diff --git a/CHANGELOG.md b/CHANGELOG.md index f018d3c..750d3d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,43 @@ Versioning follows the policy in [CONTRIBUTING.md](CONTRIBUTING.md#versioning). ## [Unreleased] +## [0.2.0-alpha.19] + +Astryx 0.6.5 → 0.7.0 (`@astryxdesign/lab` 0.7.0-canary.97a0d31). Astryx's +own release notes: https://github.com/facebook/astryx/releases/tag/v0.7.0 +(rem spacing, 16px phone typography, Field-composed input styling parts, +Banner live regions, data-color tokens in StyleX). + +### Changed + +- **Astryx 0.7.0, which is breaking for Field-composed inputs.** + `TextInput`, `Selector`, `ComplexSelector`, the date and time inputs, + `Typeahead`, `Tokenizer`, `CheckboxList`, `RadioList` and `Slider` no + longer take a root `xstyle` / `className` / `style`: style the Field box + with `containerXstyle` / `containerClassName` / `containerStyle` and the + control box with `controlXstyle` / `controlClassName` / `controlStyle`. + `pnpm exec ui-common upgrade --from 0.2.0-alpha.18` runs Astryx's 0.6.7 + and 0.7.0 codemods (`migrate-field-input-styling`, + `rename-empty-search-results-text`, `preserve-bottom-sheet-content-padding`, + `migrate-deprecated-theme-surface`, `validate-data-token-ownership`), moves + the lab canary to `0.7.0-canary.97a0d31` and its core override to `0.7.0`, + and bumps the `@lablup/ui-common` / `@lablup/ui-common-cli` pins. +- **`PagedSelector` follows the same contract**: `xstyle` / `className` / + `style` are replaced by the `container*` and `control*` props it passes to + `ComplexSelector`. +- `Banner` no longer derives `role="status"` / `role="alert"` from `status` + (Astryx #6630). `NotificationStack` sets the role it had explicitly + (`alert` for an error or warning, `status` otherwise), so notices are + still announced. A `Banner` or `ListBanner` placed by a consumer is now + silent unless it passes a `role` or announces with `useAnnounce`. +- Core spacing tokens are rem, and phone typography starts at 16px in the + Neutral theme; the Lablup theme was rebuilt with `astryx theme build`. +- The `ComplexSelector`, `Drawer` and `Tour` forks are re-taken from 0.7.0. + `ComplexSelector` gains Astryx's `renderTrigger` (and the exported + `ComplexSelectorRenderTriggerProps`); `Drawer` takes lab's `padding` prop + and container inset. Both keep their fixes (`hasClear` / `onClear`; the + z-index host, `aria-modal` passthrough and the `Modal` portal host). + ### Added - **`Form.Item` / `FormItemVisual` take `labelExtra`** for actions that belong @@ -16,6 +53,18 @@ Versioning follows the policy in [CONTRIBUTING.md](CONTRIBUTING.md#versioning). layout put it right after the label, and the colon moves to the end of the slot. Ignored without a `label`. +- New mirrored subpaths: `theme/dataTokens.stylex`, `theme/neutral/fonts.css`, + `Markdown/plugin-renderer`, and the StyleX helper modules Astryx now + exports (`DateInput/tokens.stylex`, `Icon/IconSize.stylex`, + `Indicator/indicator.markers.stylex`, `Layer/layerAnimations.stylex`, + `Layer/layerTextReset.stylex`, `Layer/layerViewportInset.stylex`, + `Layout/container.stylex`, `Layout/edgeCompensation.stylex`, + `Layout/padding.stylex`, `NavItem/navItemStyles.stylex`, + `Selector/selectorPresentation.stylex`, `Stack/stack.stylex`, + `Stack/stackItem.stylex`, `Text/text.stylex`, `utils/focusOutline.stylex`, + `utils/interactionOverlay.stylex`). New root names include the + `*MenuGroup` components. No subpath was removed. + ## [0.2.0-alpha.18] ### Added diff --git a/README.md b/README.md index c3c990d..edfbbe0 100644 --- a/README.md +++ b/README.md @@ -102,14 +102,14 @@ there): ```yaml overrides: - "@astryxdesign/lab>@astryxdesign/core": "0.6.5" + "@astryxdesign/lab>@astryxdesign/core": "0.7.0" ``` npm, in the root `package.json`: ```json "overrides": { - "@astryxdesign/lab": { "@astryxdesign/core": "0.6.5" } + "@astryxdesign/lab": { "@astryxdesign/core": "0.7.0" } } ``` diff --git a/package.json b/package.json index bbd37af..7154b47 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lablup/ui-common", - "version": "0.2.0-alpha.18", + "version": "0.2.0-alpha.19", "description": "Lablup's UI layer on Astryx: the Astryx surface re-exported 1:1, the Lablup theme, and shared components", "license": "Apache-2.0", "author": "Lablup Inc.", @@ -79,10 +79,78 @@ "types": "./dist/astryx/theme/tokens.stylex.d.ts", "import": "./dist/astryx/theme/tokens.stylex.js" }, + "./theme/dataTokens.stylex": { + "types": "./dist/astryx/theme/dataTokens.stylex.d.ts", + "import": "./dist/astryx/theme/dataTokens.stylex.js" + }, "./theme/syntax": { "types": "./dist/astryx/theme/syntax.d.ts", "import": "./dist/astryx/theme/syntax.js" }, + "./DateInput/tokens.stylex": { + "types": "./dist/astryx/DateInput/tokens.stylex.d.ts", + "import": "./dist/astryx/DateInput/tokens.stylex.js" + }, + "./Icon/IconSize.stylex": { + "types": "./dist/astryx/Icon/IconSize.stylex.d.ts", + "import": "./dist/astryx/Icon/IconSize.stylex.js" + }, + "./Indicator/indicator.markers.stylex": { + "types": "./dist/astryx/Indicator/indicator.markers.stylex.d.ts", + "import": "./dist/astryx/Indicator/indicator.markers.stylex.js" + }, + "./Layer/layerAnimations.stylex": { + "types": "./dist/astryx/Layer/layerAnimations.stylex.d.ts", + "import": "./dist/astryx/Layer/layerAnimations.stylex.js" + }, + "./Layer/layerTextReset.stylex": { + "types": "./dist/astryx/Layer/layerTextReset.stylex.d.ts", + "import": "./dist/astryx/Layer/layerTextReset.stylex.js" + }, + "./Layer/layerViewportInset.stylex": { + "types": "./dist/astryx/Layer/layerViewportInset.stylex.d.ts", + "import": "./dist/astryx/Layer/layerViewportInset.stylex.js" + }, + "./Layout/container.stylex": { + "types": "./dist/astryx/Layout/container.stylex.d.ts", + "import": "./dist/astryx/Layout/container.stylex.js" + }, + "./Layout/edgeCompensation.stylex": { + "types": "./dist/astryx/Layout/edgeCompensation.stylex.d.ts", + "import": "./dist/astryx/Layout/edgeCompensation.stylex.js" + }, + "./Layout/padding.stylex": { + "types": "./dist/astryx/Layout/padding.stylex.d.ts", + "import": "./dist/astryx/Layout/padding.stylex.js" + }, + "./NavItem/navItemStyles.stylex": { + "types": "./dist/astryx/NavItem/navItemStyles.stylex.d.ts", + "import": "./dist/astryx/NavItem/navItemStyles.stylex.js" + }, + "./Selector/selectorPresentation.stylex": { + "types": "./dist/astryx/Selector/selectorPresentation.stylex.d.ts", + "import": "./dist/astryx/Selector/selectorPresentation.stylex.js" + }, + "./Stack/stack.stylex": { + "types": "./dist/astryx/Stack/stack.stylex.d.ts", + "import": "./dist/astryx/Stack/stack.stylex.js" + }, + "./Stack/stackItem.stylex": { + "types": "./dist/astryx/Stack/stackItem.stylex.d.ts", + "import": "./dist/astryx/Stack/stackItem.stylex.js" + }, + "./Text/text.stylex": { + "types": "./dist/astryx/Text/text.stylex.d.ts", + "import": "./dist/astryx/Text/text.stylex.js" + }, + "./utils/focusOutline.stylex": { + "types": "./dist/astryx/utils/focusOutline.stylex.d.ts", + "import": "./dist/astryx/utils/focusOutline.stylex.js" + }, + "./utils/interactionOverlay.stylex": { + "types": "./dist/astryx/utils/interactionOverlay.stylex.d.ts", + "import": "./dist/astryx/utils/interactionOverlay.stylex.js" + }, "./locales/*.json": "./dist/locales/*.json", "./locales/*.generated.js": { "types": "./dist/locales/*.generated.d.ts", @@ -516,6 +584,10 @@ "types": "./dist/astryx/Markdown/plugins.d.ts", "import": "./dist/astryx/Markdown/plugins.js" }, + "./Markdown/plugin-renderer": { + "types": "./dist/astryx/Markdown/plugin-renderer.d.ts", + "import": "./dist/astryx/Markdown/plugin-renderer.js" + }, "./Markdown/parser": { "types": "./dist/astryx/Markdown/parser.d.ts", "import": "./dist/astryx/Markdown/parser.js" @@ -566,6 +638,7 @@ "import": "./dist/astryx/theme/neutral/built.js" }, "./theme/neutral/theme.css": "./dist/astryx/theme/neutral/theme.css", + "./theme/neutral/fonts.css": "./dist/astryx/theme/neutral/fonts.css", "./AlertModal": { "types": "./dist/components/AlertModal/index.d.ts", "import": "./dist/components/AlertModal/index.js" @@ -604,8 +677,8 @@ "verify": "pnpm run typecheck && pnpm run lint && pnpm run format:check && pnpm run check:boundary && pnpm run theme:check && pnpm run test && pnpm run build && pnpm run check:pack && pnpm run check:integration" }, "dependencies": { - "@astryxdesign/core": "0.6.5", - "@astryxdesign/theme-neutral": "0.6.5", + "@astryxdesign/core": "0.7.0", + "@astryxdesign/theme-neutral": "0.7.0", "@dnd-kit/core": "6.3.1", "@dnd-kit/modifiers": "9.0.0", "@dnd-kit/sortable": "10.0.0", @@ -614,7 +687,7 @@ "lucide-react": "^1.18.0" }, "peerDependencies": { - "@astryxdesign/lab": "0.6.5-canary.8701623", + "@astryxdesign/lab": "0.7.0-canary.97a0d31", "@stylexjs/stylex": "^0.19.0", "react": "^19.2.0", "react-dom": "^19.2.0" @@ -625,8 +698,8 @@ } }, "devDependencies": { - "@astryxdesign/cli": "0.6.5", - "@astryxdesign/lab": "0.6.5-canary.8701623", + "@astryxdesign/cli": "0.7.0", + "@astryxdesign/lab": "0.7.0-canary.97a0d31", "@eslint/js": "^9.39.0", "@storybook/addon-docs": "^10.6.1", "@storybook/react-vite": "^10.6.1", diff --git a/packages/cli/codemods/0.2.0-alpha.19/upstream.json b/packages/cli/codemods/0.2.0-alpha.19/upstream.json new file mode 100644 index 0000000..d9f9bca --- /dev/null +++ b/packages/cli/codemods/0.2.0-alpha.19/upstream.json @@ -0,0 +1,44 @@ +{ + "$comment": "Written by `ui-common sync-astryx`. Astryx codemods consumers need when they upgrade across this ui-common version; `ui-common upgrade` runs them with @lablup/ui-common specifiers swapped for Astryx's, and moves the consumer's lab pin and core override.", + "astryx": { + "from": "0.6.5", + "to": "0.7.0" + }, + "lab": { + "from": "0.6.5-canary.8701623", + "to": "0.7.0-canary.97a0d31" + }, + "codemods": [ + { + "id": "migrate-copied-themes-to-descriptors", + "version": "0.6.7", + "title": "Give copied app themes their local descriptors" + }, + { + "id": "migrate-deprecated-theme-surface", + "version": "0.7.0", + "title": "Migrate removed component theme aliases and selectors" + }, + { + "id": "validate-data-token-ownership", + "version": "0.7.0", + "title": "Validate data-token ownership" + }, + { + "id": "migrate-field-input-styling", + "version": "0.7.0", + "title": "Migrate input root styling to container/control parts" + }, + { + "id": "preserve-bottom-sheet-content-padding", + "version": "0.7.0", + "title": "Preserve BottomSheet content padding" + }, + { + "id": "rename-empty-search-results-text", + "version": "0.7.0", + "title": "Rename emptySearchResultsText to emptySearchText" + } + ], + "optional": [] +} diff --git a/packages/cli/migration/0.1-to-0.2.json b/packages/cli/migration/0.1-to-0.2.json index 365cc04..431f309 100644 --- a/packages/cli/migration/0.1-to-0.2.json +++ b/packages/cli/migration/0.1-to-0.2.json @@ -212,7 +212,7 @@ "names": { "Drawer": "Drawer", "DrawerProps": "DrawerProps" } }, "alternatives": [], - "requiresPackages": { "@astryxdesign/lab": "0.6.5-canary.8701623" }, + "requiresPackages": { "@astryxdesign/lab": "0.7.0-canary.97a0d31" }, "propRenames": [ { "from": "onClose", diff --git a/packages/cli/package.json b/packages/cli/package.json index 8dda8ca..7e45c94 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@lablup/ui-common-cli", - "version": "0.2.0-alpha.18", + "version": "0.2.0-alpha.19", "description": "The ui-common command line: the pinned Astryx CLI in @lablup/ui-common terms, the agent block, and the upgrade codemods", "license": "Apache-2.0", "author": "Lablup Inc.", @@ -36,7 +36,7 @@ "./package.json": "./package.json" }, "dependencies": { - "@astryxdesign/cli": "0.6.5", + "@astryxdesign/cli": "0.7.0", "jscodeshift": "^17.4.0", "postcss": "^8.5.25", "postcss-selector-parser": "^7.1.6" diff --git a/packages/cli/test/cli/cli.test.ts b/packages/cli/test/cli/cli.test.ts index f64fc13..5161f9e 100644 --- a/packages/cli/test/cli/cli.test.ts +++ b/packages/cli/test/cli/cli.test.ts @@ -334,7 +334,13 @@ describe("upgrade registry", () => { it("registers the Astryx 0.6.5 codemods under 0.2.0-alpha.16", async () => { expect(registeredVersions()).toContain("0.2.0-alpha.16"); expect(await stepsBetween("0.2.0-alpha.15", "0.2.0-alpha.16")).toHaveLength(1); - expect(await stepsBetween("0.2.0-alpha.16", "0.2.0")).toHaveLength(0); + expect(await stepsBetween("0.2.0-alpha.16", "0.2.0-alpha.18")).toHaveLength(0); + }); + + it("registers the Astryx 0.7.0 codemods under 0.2.0-alpha.19", async () => { + expect(registeredVersions()).toContain("0.2.0-alpha.19"); + expect(await stepsBetween("0.2.0-alpha.18", "0.2.0-alpha.19")).toHaveLength(1); + expect(await stepsBetween("0.2.0-alpha.19", "0.2.0")).toHaveLength(0); }); it("maps every removed export onto something the installed Astryx exports", () => { diff --git a/packages/cli/test/upgrade/fixtures/adapter/expected/package.json b/packages/cli/test/upgrade/fixtures/adapter/expected/package.json index 1c58a3b..10e8348 100644 --- a/packages/cli/test/upgrade/fixtures/adapter/expected/package.json +++ b/packages/cli/test/upgrade/fixtures/adapter/expected/package.json @@ -3,7 +3,7 @@ "private": true, "type": "module", "dependencies": { - "@astryxdesign/lab": "0.6.5-canary.8701623", + "@astryxdesign/lab": "0.7.0-canary.97a0d31", "@lablup/ui-common": "0.2.0-alpha.0", "@stylexjs/stylex": "^0.19.0", "react": "^19.2.0" diff --git a/packages/cli/test/upgrade/fixtures/adapter/expected/ui-common-upgrade-report.md b/packages/cli/test/upgrade/fixtures/adapter/expected/ui-common-upgrade-report.md index 7e6f2a6..8d10575 100644 --- a/packages/cli/test/upgrade/fixtures/adapter/expected/ui-common-upgrade-report.md +++ b/packages/cli/test/upgrade/fixtures/adapter/expected/ui-common-upgrade-report.md @@ -30,8 +30,8 @@ Ran the codemods over 4 files under `src`; searched 4 files under the project ro - dependencies["@lablup/ui-common"]: "0.1.0-alpha.19" → "0.2.0-alpha.0". - added @lablup/ui-common-cli 0.2.0-alpha.0 to devDependencies: the `ui-common` bin ships in its own package since 0.2, released at the same version as @lablup/ui-common. - added @stylexjs/stylex ^0.19.0 to dependencies. -- added @astryxdesign/lab 0.6.5-canary.8701623 to dependencies: a Drawer moved to @lablup/ui-common/lab, and ui-common pins the lab canary exactly. -- no package manager was detected, so point @astryxdesign/lab's @astryxdesign/core peer at ui-common's by hand (pnpm: `overrides: { "@astryxdesign/lab>@astryxdesign/core": "0.6.5" }` in pnpm-workspace.yaml; npm: `"overrides": {"@astryxdesign/lab":{"@astryxdesign/core":"0.6.5"}}` in the root package.json) and check that `why @astryxdesign/core` lists one version. +- added @astryxdesign/lab 0.7.0-canary.97a0d31 to dependencies: a Drawer moved to @lablup/ui-common/lab, and ui-common pins the lab canary exactly. +- no package manager was detected, so point @astryxdesign/lab's @astryxdesign/core peer at ui-common's by hand (pnpm: `overrides: { "@astryxdesign/lab>@astryxdesign/core": "0.7.0" }` in pnpm-workspace.yaml; npm: `"overrides": {"@astryxdesign/lab":{"@astryxdesign/core":"0.7.0"}}` in the root package.json) and check that `why @astryxdesign/core` lists one version. ## Manual review diff --git a/packages/cli/test/upgrade/fixtures/subpath-barrel/expected/package.json b/packages/cli/test/upgrade/fixtures/subpath-barrel/expected/package.json index 514146a..1213fe8 100644 --- a/packages/cli/test/upgrade/fixtures/subpath-barrel/expected/package.json +++ b/packages/cli/test/upgrade/fixtures/subpath-barrel/expected/package.json @@ -3,7 +3,7 @@ "private": true, "type": "module", "dependencies": { - "@astryxdesign/lab": "0.6.5-canary.8701623", + "@astryxdesign/lab": "0.7.0-canary.97a0d31", "@lablup/ui-common": "^0.2.0-alpha.0", "@stylexjs/stylex": "^0.19.0", "react": "^19.2.0" diff --git a/packages/cli/test/upgrade/fixtures/subpath-barrel/expected/ui-common-upgrade-report.md b/packages/cli/test/upgrade/fixtures/subpath-barrel/expected/ui-common-upgrade-report.md index 45d3858..60b87db 100644 --- a/packages/cli/test/upgrade/fixtures/subpath-barrel/expected/ui-common-upgrade-report.md +++ b/packages/cli/test/upgrade/fixtures/subpath-barrel/expected/ui-common-upgrade-report.md @@ -34,8 +34,8 @@ Ran the codemods over 6 files under `src`; searched 6 files under the project ro - dependencies["@lablup/ui-common"]: "^0.1.0-alpha.19" → "^0.2.0-alpha.0". - added @lablup/ui-common-cli 0.2.0-alpha.0 to devDependencies: the `ui-common` bin ships in its own package since 0.2, released at the same version as @lablup/ui-common. - added @stylexjs/stylex ^0.19.0 to dependencies. -- added @astryxdesign/lab 0.6.5-canary.8701623 to dependencies: a Drawer moved to @lablup/ui-common/lab, and ui-common pins the lab canary exactly. -- no package manager was detected, so point @astryxdesign/lab's @astryxdesign/core peer at ui-common's by hand (pnpm: `overrides: { "@astryxdesign/lab>@astryxdesign/core": "0.6.5" }` in pnpm-workspace.yaml; npm: `"overrides": {"@astryxdesign/lab":{"@astryxdesign/core":"0.6.5"}}` in the root package.json) and check that `why @astryxdesign/core` lists one version. +- added @astryxdesign/lab 0.7.0-canary.97a0d31 to dependencies: a Drawer moved to @lablup/ui-common/lab, and ui-common pins the lab canary exactly. +- no package manager was detected, so point @astryxdesign/lab's @astryxdesign/core peer at ui-common's by hand (pnpm: `overrides: { "@astryxdesign/lab>@astryxdesign/core": "0.7.0" }` in pnpm-workspace.yaml; npm: `"overrides": {"@astryxdesign/lab":{"@astryxdesign/core":"0.7.0"}}` in the root package.json) and check that `why @astryxdesign/core` lists one version. ## Manual review diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 71caa75..c18d4a3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,11 +9,11 @@ importers: .: dependencies: '@astryxdesign/core': - specifier: 0.6.5 - version: 0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + specifier: 0.7.0 + version: 0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@astryxdesign/theme-neutral': - specifier: 0.6.5 - version: 0.6.5(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8) + specifier: 0.7.0 + version: 0.7.0(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8) '@dnd-kit/core': specifier: 6.3.1 version: 6.3.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8) @@ -34,11 +34,11 @@ importers: version: 1.48.0(react@19.2.8) devDependencies: '@astryxdesign/cli': - specifier: 0.6.5 - version: 0.6.5(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/lab@0.6.5-canary.8701623(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/theme-neutral@0.6.5(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8))(supports-color@8.1.1) + specifier: 0.7.0 + version: 0.7.0(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/lab@0.7.0-canary.97a0d31(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/theme-neutral@0.7.0(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8))(supports-color@8.1.1) '@astryxdesign/lab': - specifier: 0.6.5-canary.8701623 - version: 0.6.5-canary.8701623(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + specifier: 0.7.0-canary.97a0d31 + version: 0.7.0-canary.97a0d31(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@eslint/js': specifier: ^9.39.0 version: 9.39.5 @@ -127,8 +127,8 @@ importers: packages/cli: dependencies: '@astryxdesign/cli': - specifier: 0.6.5 - version: 0.6.5(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/lab@0.6.5-canary.8701623(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/theme-neutral@0.6.5(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8))(supports-color@8.1.1) + specifier: 0.7.0 + version: 0.7.0(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/lab@0.7.0-canary.97a0d31(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/theme-neutral@0.7.0(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8))(supports-color@8.1.1) jscodeshift: specifier: ^17.4.0 version: 17.4.0(supports-color@8.1.1) @@ -163,8 +163,8 @@ packages: '@asamuzakjp/nwsapi@2.3.9': resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==} - '@astryxdesign/cli@0.6.5': - resolution: {integrity: sha512-TzX2nBcPeH2+6kWsba4046cdK7AkUWorViAVWbKn7qJEULTts+vRQ0BecwbtHP/1m6rZu3kWKtPKV/OVAQ864w==} + '@astryxdesign/cli@0.7.0': + resolution: {integrity: sha512-PIiWZZr6wT3KszTPIv9/oiyrDCcSfU1dmMZCASPJ0AWKfvS1w27OXlZPBX7Rqi1Dipl9bdr54Uts7AxbhdMbUw==} engines: {node: '>=22.13.0'} hasBin: true peerDependencies: @@ -182,25 +182,25 @@ packages: '@astryxdesign/theme-neutral': optional: true - '@astryxdesign/core@0.6.5': - resolution: {integrity: sha512-fI2ELLMxoPHKOJWKYyoTWi31q9Dg0SLWjuBMrkl6tQY3WFf3TjTrDn4f7KyOF6mryjbTsf93uQNOUJKbay1o/A==} + '@astryxdesign/core@0.7.0': + resolution: {integrity: sha512-vLsJ1CM3auFGZYzWIWzvXq7OUxRilfsoEi64bro/XdLmWokV/YaHjmgJV3n0kKXZBehor1wKQx9cqt0ObMUELw==} peerDependencies: '@stylexjs/stylex': ^0.19.0 react: '>=19.0.0' react-dom: '>=19.0.0' - '@astryxdesign/lab@0.6.5-canary.8701623': - resolution: {integrity: sha512-aezCh45medrDkhLs6NguNQe/Pn9e5k9+DMetglNEOXIvnwcczh+b9speKym29cFdQS5jmrJM/SH9LRfywRi+gg==} + '@astryxdesign/lab@0.7.0-canary.97a0d31': + resolution: {integrity: sha512-Im236byRku+rriCmaCQ1hY8DxzFXa2ivqPm3LYzGQ4cB8ruDCoBJYr2B+X6nJQm+DkvXB/P5yJtUTxC3K8FX6w==} peerDependencies: - '@astryxdesign/core': 0.6.5-canary.8701623 + '@astryxdesign/core': 0.7.0-canary.97a0d31 '@stylexjs/stylex': '>=0.10.0' react: '>=19.0.0' react-dom: '>=19.0.0' - '@astryxdesign/theme-neutral@0.6.5': - resolution: {integrity: sha512-8Ylen70//sYhVJvst2prflxng5t3ryRlsJJkS44vvY0/9A4KGjCs7bxfRAfSrFxF/dSXZ8sQHuGxbXZiRn7PHQ==} + '@astryxdesign/theme-neutral@0.7.0': + resolution: {integrity: sha512-btZ9tT9oJuzzzCZla439iKm0E8kp4xoriS0FTbCNTYoBmuiKLrCRNazu35FVTHN4UHLEbVi/Bq1owcvstNs0Zg==} peerDependencies: - '@astryxdesign/core': 0.6.5 + '@astryxdesign/core': 0.7.0 react: '>=19' '@babel/code-frame@7.29.7': @@ -2976,7 +2976,7 @@ snapshots: '@asamuzakjp/nwsapi@2.3.9': {} - '@astryxdesign/cli@0.6.5(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/lab@0.6.5-canary.8701623(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/theme-neutral@0.6.5(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8))(supports-color@8.1.1)': + '@astryxdesign/cli@0.7.0(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/lab@0.7.0-canary.97a0d31(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@astryxdesign/theme-neutral@0.7.0(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8))(supports-color@8.1.1)': dependencies: '@babel/core': 7.29.7(supports-color@8.1.1) '@babel/parser': 7.29.8 @@ -2993,23 +2993,23 @@ snapshots: recast: 0.23.21 zod: 4.6.5 optionalDependencies: - '@astryxdesign/core': 0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@astryxdesign/lab': 0.6.5-canary.8701623(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@astryxdesign/theme-neutral': 0.6.5(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8) + '@astryxdesign/core': 0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@astryxdesign/lab': 0.7.0-canary.97a0d31(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@astryxdesign/theme-neutral': 0.7.0(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8) transitivePeerDependencies: - '@babel/preset-env' - supports-color - '@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@stylexjs/stylex': 0.19.0 intl-messageformat: 11.2.15 react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - '@astryxdesign/lab@0.6.5-canary.8701623(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@astryxdesign/lab@0.7.0-canary.97a0d31(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@astryxdesign/core': 0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@astryxdesign/core': 0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@stylexjs/stylex': 0.19.0 d3-array: 3.2.4 d3-scale: 4.0.2 @@ -3017,9 +3017,9 @@ snapshots: react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - '@astryxdesign/theme-neutral@0.6.5(@astryxdesign/core@0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8)': + '@astryxdesign/theme-neutral@0.7.0(@astryxdesign/core@0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8)': dependencies: - '@astryxdesign/core': 0.6.5(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@astryxdesign/core': 0.7.0(@stylexjs/stylex@0.19.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) lucide-react: 1.48.0(react@19.2.8) react: 19.2.8 @@ -3519,7 +3519,7 @@ snapshots: '@jridgewell/gen-mapping@0.3.13': dependencies: - '@jridgewell/sourcemap-codec': 1.5.5 + '@jridgewell/sourcemap-codec': 1.6.0 '@jridgewell/trace-mapping': 0.3.31 '@jridgewell/remapping@2.3.5': @@ -3536,7 +3536,7 @@ snapshots: '@jridgewell/trace-mapping@0.3.31': dependencies: '@jridgewell/resolve-uri': 3.1.2 - '@jridgewell/sourcemap-codec': 1.5.5 + '@jridgewell/sourcemap-codec': 1.6.0 '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)': dependencies: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 3ebb9ad..62bc304 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -12,15 +12,20 @@ packages: # release-age quarantine by design, so it is excluded for as long as the exact # pin exists (the same exclusion backend.ai-webui carries). minimumReleaseAgeExclude: - - "@astryxdesign/lab@0.6.5-canary.8701623" + - "@astryxdesign/lab@0.7.0-canary.97a0d31" + # Astryx 0.7.0 was published the day this pin moved, inside pnpm's default + # release-age window. Drop these once it has aged out. + - "@astryxdesign/cli@0.7.0" + - "@astryxdesign/core@0.7.0" + - "@astryxdesign/theme-neutral@0.7.0" peerDependencyRules: # The lab canary declares an exact peer on the core canary it was cut from - # (`@astryxdesign/core@0.6.5-canary.8701623`). It runs against the stable - # 0.6.5 that ui-common pins, which is how backend.ai-webui installs it too. + # (`@astryxdesign/core@0.7.0-canary.97a0d31`). It runs against the stable + # 0.7.0 that ui-common pins, which is how backend.ai-webui installs it too. # This only silences the mismatch warning in this repository's dev install. allowedVersions: - "@astryxdesign/lab>@astryxdesign/core": "0.6.5" + "@astryxdesign/lab>@astryxdesign/core": "0.7.0" allowBuilds: # Each postinstall only prints an `astryx init` nudge; no build output is diff --git a/src/astryx/DateInput/tokens.stylex.ts b/src/astryx/DateInput/tokens.stylex.ts new file mode 100644 index 0000000..8ce3359 --- /dev/null +++ b/src/astryx/DateInput/tokens.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/DateInput/tokens.stylex"; diff --git a/src/astryx/Icon/IconSize.stylex.ts b/src/astryx/Icon/IconSize.stylex.ts new file mode 100644 index 0000000..009c1e3 --- /dev/null +++ b/src/astryx/Icon/IconSize.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Icon/IconSize.stylex"; diff --git a/src/astryx/Indicator/indicator.markers.stylex.ts b/src/astryx/Indicator/indicator.markers.stylex.ts new file mode 100644 index 0000000..5818c9a --- /dev/null +++ b/src/astryx/Indicator/indicator.markers.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Indicator/indicator.markers.stylex"; diff --git a/src/astryx/Layer/layerAnimations.stylex.ts b/src/astryx/Layer/layerAnimations.stylex.ts new file mode 100644 index 0000000..e75d885 --- /dev/null +++ b/src/astryx/Layer/layerAnimations.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Layer/layerAnimations.stylex"; diff --git a/src/astryx/Layer/layerTextReset.stylex.ts b/src/astryx/Layer/layerTextReset.stylex.ts new file mode 100644 index 0000000..c9a66e6 --- /dev/null +++ b/src/astryx/Layer/layerTextReset.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Layer/layerTextReset.stylex"; diff --git a/src/astryx/Layer/layerViewportInset.stylex.ts b/src/astryx/Layer/layerViewportInset.stylex.ts new file mode 100644 index 0000000..57dbf4b --- /dev/null +++ b/src/astryx/Layer/layerViewportInset.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Layer/layerViewportInset.stylex"; diff --git a/src/astryx/Layout/container.stylex.ts b/src/astryx/Layout/container.stylex.ts new file mode 100644 index 0000000..2b99908 --- /dev/null +++ b/src/astryx/Layout/container.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Layout/container.stylex"; diff --git a/src/astryx/Layout/edgeCompensation.stylex.ts b/src/astryx/Layout/edgeCompensation.stylex.ts new file mode 100644 index 0000000..4329940 --- /dev/null +++ b/src/astryx/Layout/edgeCompensation.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Layout/edgeCompensation.stylex"; diff --git a/src/astryx/Layout/padding.stylex.ts b/src/astryx/Layout/padding.stylex.ts new file mode 100644 index 0000000..206a369 --- /dev/null +++ b/src/astryx/Layout/padding.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Layout/padding.stylex"; diff --git a/src/astryx/Markdown/plugin-renderer.ts b/src/astryx/Markdown/plugin-renderer.ts new file mode 100644 index 0000000..7dc0171 --- /dev/null +++ b/src/astryx/Markdown/plugin-renderer.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Markdown/plugin-renderer"; diff --git a/src/astryx/NavItem/navItemStyles.stylex.ts b/src/astryx/NavItem/navItemStyles.stylex.ts new file mode 100644 index 0000000..d1ecf2e --- /dev/null +++ b/src/astryx/NavItem/navItemStyles.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/NavItem/navItemStyles.stylex"; diff --git a/src/astryx/Selector/selectorPresentation.stylex.ts b/src/astryx/Selector/selectorPresentation.stylex.ts new file mode 100644 index 0000000..81570ec --- /dev/null +++ b/src/astryx/Selector/selectorPresentation.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Selector/selectorPresentation.stylex"; diff --git a/src/astryx/Stack/stack.stylex.ts b/src/astryx/Stack/stack.stylex.ts new file mode 100644 index 0000000..a7cfb53 --- /dev/null +++ b/src/astryx/Stack/stack.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Stack/stack.stylex"; diff --git a/src/astryx/Stack/stackItem.stylex.ts b/src/astryx/Stack/stackItem.stylex.ts new file mode 100644 index 0000000..61790ae --- /dev/null +++ b/src/astryx/Stack/stackItem.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Stack/stackItem.stylex"; diff --git a/src/astryx/Text/text.stylex.ts b/src/astryx/Text/text.stylex.ts new file mode 100644 index 0000000..b5fa9b2 --- /dev/null +++ b/src/astryx/Text/text.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/Text/text.stylex"; diff --git a/src/astryx/theme/dataTokens.stylex.ts b/src/astryx/theme/dataTokens.stylex.ts new file mode 100644 index 0000000..a154140 --- /dev/null +++ b/src/astryx/theme/dataTokens.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/theme/dataTokens.stylex"; diff --git a/src/astryx/theme/neutral/fonts.css b/src/astryx/theme/neutral/fonts.css new file mode 100644 index 0000000..1feacad --- /dev/null +++ b/src/astryx/theme/neutral/fonts.css @@ -0,0 +1,2 @@ +/* @generated by scripts/gen-exports.mjs. Do not edit. */ +@import "@astryxdesign/theme-neutral/fonts.css"; diff --git a/src/astryx/utils/focusOutline.stylex.ts b/src/astryx/utils/focusOutline.stylex.ts new file mode 100644 index 0000000..f969359 --- /dev/null +++ b/src/astryx/utils/focusOutline.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/utils/focusOutline.stylex"; diff --git a/src/astryx/utils/interactionOverlay.stylex.ts b/src/astryx/utils/interactionOverlay.stylex.ts new file mode 100644 index 0000000..afd707b --- /dev/null +++ b/src/astryx/utils/interactionOverlay.stylex.ts @@ -0,0 +1,2 @@ +// @generated by scripts/gen-exports.mjs. Do not edit. +export * from "@astryxdesign/core/utils/interactionOverlay.stylex"; diff --git a/src/components/NotificationStack/NotificationStack.test.tsx b/src/components/NotificationStack/NotificationStack.test.tsx index 1e37c6e..e3c97a5 100644 --- a/src/components/NotificationStack/NotificationStack.test.tsx +++ b/src/components/NotificationStack/NotificationStack.test.tsx @@ -52,6 +52,27 @@ describe("NotificationStack", () => { expect(screen.getByTestId("notification-title")).toHaveTextContent("Saved"); }); + it("announces each notice: an error or warning as an alert, the rest as a status", () => { + render( + , + ); + const roleOf = (key: string) => + document + .querySelector(`[data-notification-key='${key}'] > [role]`) + ?.getAttribute("role"); + expect(roleOf("e")).toBe("alert"); + expect(roleOf("w")).toBe("alert"); + expect(roleOf("s")).toBe("status"); + expect(roleOf("i")).toBe("status"); + }); + it("wraps a description in the scrollable body, never the notice itself", () => { render( {stillExiting.map((item) => ( diff --git a/src/components/PagedSelector/PagedSelector.tsx b/src/components/PagedSelector/PagedSelector.tsx index e58a9ee..2823ae9 100644 --- a/src/components/PagedSelector/PagedSelector.tsx +++ b/src/components/PagedSelector/PagedSelector.tsx @@ -97,9 +97,12 @@ type Passthrough = Pick< | "placement" | "alignment" | "onOpenChange" - | "xstyle" - | "className" - | "style" + | "containerXstyle" + | "containerClassName" + | "containerStyle" + | "controlXstyle" + | "controlClassName" + | "controlStyle" | "data-testid" >; diff --git a/src/exports.test.ts b/src/exports.test.ts index 1f55034..28493d5 100644 --- a/src/exports.test.ts +++ b/src/exports.test.ts @@ -187,6 +187,7 @@ describe("forks of Astryx components", () => { "ComplexSelectorHandle", "ComplexSelectorProps", "ComplexSelectorRenderState", + "ComplexSelectorRenderTriggerProps", "ComplexSelectorSize", "ComplexSelectorStatus", "ComplexSelectorVariant", diff --git a/src/forks/ComplexSelector/ComplexSelector.styles.ts b/src/forks/ComplexSelector/ComplexSelector.styles.ts index 2b5993f..43c3e76 100644 --- a/src/forks/ComplexSelector/ComplexSelector.styles.ts +++ b/src/forks/ComplexSelector/ComplexSelector.styles.ts @@ -2,7 +2,7 @@ // @ts-nocheck // @generated by scripts/sync-forks.mjs. Do not edit. // -// Compiled StyleX from @astryxdesign/core 0.6.5, reused by the +// Compiled StyleX from @astryxdesign/core 0.7.0, reused by the // ComplexSelector fork so it renders with upstream's own class names // (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and // affiliates; MIT, see NOTICE. @@ -68,12 +68,12 @@ export const styles = { kGVxlE: "x1gnnqk1 x1s17dad x15ysqaf", k63SB2: "x1e4wzip", k1ekBW: "xrafxwg", - k3aq6I: "x3oybdh xk4oym4", + k3aq6I: "x3oybdh xk4oym4 x5lqen6 x3y5scg", $$css: true, }, triggerGhostDisabled: { kKwaWg: "x18o3ruo", - k3aq6I: "x1c071of x1pdlv7q", + k3aq6I: "x1c071of x1pdlv7q x1ylxtyb", $$css: true, }, triggerIcon: { @@ -123,19 +123,59 @@ export const styles = { // dist/utils/interactionOverlay.stylex.js export const interactionOverlayStyles = { backgroundColor: { - kWkggS: "xjbqb8w x1anq1lc xoevpu5 xprvw0a", + "--astryx-press-alpha": "x11z29ks xli5ek3", + kKVMdj: "x14e4jsf", + k44tkh: "x8s9nux", + kyAemX: "xwkbtvz", + kWV6AL: "xziyay6", + "--_press-paint": "xz2mauf", + "--_press-paint-image": "x1l7afqf", + kWkggS: "xjbqb8w x1anq1lc x1s5nr2v x13ugjdw xl8sb5e xoevpu5 xprvw0a", + kKwaWg: "x7ngsy6 xubczrd", $$css: true, }, backgroundImage: { - kKwaWg: "x7uyq82 xmvprkv xetgvay", + "--astryx-press-alpha": "x11z29ks xli5ek3", + kKVMdj: "x14e4jsf", + k44tkh: "x8s9nux", + kyAemX: "xwkbtvz", + kWV6AL: "xziyay6", + "--_press-paint": "xz2mauf", + "--_press-paint-image": "x1l7afqf", + kKwaWg: "x7uyq82 x3f84ok x7ngsy6 xubczrd xmvprkv xetgvay", $$css: true, }, backgroundImageOnNeutral: { - kKwaWg: "x14bno8m xzmimnh x1otsd3y xo3fi6e", + "--astryx-press-alpha": "x11z29ks xli5ek3", + kKVMdj: "x14e4jsf", + k44tkh: "x8s9nux", + kyAemX: "xwkbtvz", + kWV6AL: "xziyay6", + "--_press-paint": "xz2mauf", + "--_press-paint-image": "x1l7afqf", + kKwaWg: "x14bno8m xzmimnh xvbnuu x5rw36h x1qxwyo6 x1otsd3y xo3fi6e", $$css: true, }, pressedBackgroundColor: { - kWkggS: "x1anq1lc", + "--astryx-press-alpha": "x11z29ks xli5ek3", + kKVMdj: "x14e4jsf", + k44tkh: "x8s9nux", + kyAemX: "xwkbtvz", + kWV6AL: "xziyay6", + "--_press-paint": "xz2mauf", + "--_press-paint-image": "x1l7afqf", + kWkggS: "x1anq1lc x1s5nr2v x13ugjdw xl8sb5e", + kKwaWg: "x7ngsy6 xubczrd", + $$css: true, + }, + pressedAlpha: { + "--astryx-press-alpha": "x11z29ks xli5ek3", + kKVMdj: "x14e4jsf", + k44tkh: "x8s9nux", + kyAemX: "xwkbtvz", + kWV6AL: "xziyay6", + "--_press-paint": "xz2mauf", + "--_press-paint-image": "x1l7afqf", $$css: true, }, }; diff --git a/src/forks/ComplexSelector/ComplexSelector.test.tsx b/src/forks/ComplexSelector/ComplexSelector.test.tsx index db59cbd..8cd6c4b 100644 --- a/src/forks/ComplexSelector/ComplexSelector.test.tsx +++ b/src/forks/ComplexSelector/ComplexSelector.test.tsx @@ -1,7 +1,7 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. // Modifications copyright (c) Lablup Inc. // -// Forked from @astryxdesign/core 0.6.5, src/ComplexSelector/ComplexSelector.test.tsx +// Forked from @astryxdesign/core 0.7.0, src/ComplexSelector/ComplexSelector.test.tsx // (MIT; see NOTICE). Upstream's tests, run against the fork; ui-common's own tests are // in the *.fork.test.tsx beside it. // Provenance and the drift guard: src/forks/provenance.json. @@ -167,7 +167,9 @@ describe("ComplexSelector", () => { ); }); - it("gives the popup clearance on both block edges, not just the leading one (#4803)", async () => { + // ui-common: skipped. It reads the dev-mode StyleX class names Astryx's own + // test run compiles; this copy renders the compiled dist class names. + it.skip("gives the popup clearance on the edge facing the trigger, which a flip carries to the other side (#4803)", async () => { const user = userEvent.setup(); render( { await user.click(screen.getByRole("button", { name: "Fruit blend" })); const popup = document.querySelector("[popover]") as HTMLElement; expect(popup).not.toBeNull(); - // Both edges, not just the leading one: the trailing edge is what faces - // the trigger when the same popup opens upward (placement="above") or is - // flipped by position-try-fallbacks. useLayer's `offset` sets both from - // the resolved placement; jsdom resolves neither the var indirection nor - // logical margins, so read the debug-mode declarations it emits. + // The clearance rides the edge facing the trigger and the viewport gutter + // the far edge; a position-try flip swaps the two with the area, so the + // gap survives opening upward (spec:AST-059 FR1, FR4). jsdom resolves + // neither the var indirection nor logical margins, so read the + // debug-mode declarations it emits. const blockStart = popup.style.getPropertyValue("--x-marginBlockStart"); expect(blockStart).not.toBe(""); - expect(popup.style.getPropertyValue("--x-marginBlockEnd")).toBe(blockStart); + expect(popup.style.getPropertyValue("--x-marginBlockEnd")).toBe(""); + expect(popup.className).toContain("useLayer__styles.placementBelow"); }); it("runs changeAction through the provided onChange helper", async () => { @@ -256,7 +259,12 @@ describe("ComplexSelector", () => { "data-variant", "detached", ); - expect(screen.getByTestId("view-options").querySelectorAll("svg")).toHaveLength(2); + expect( + screen + .getByTestId("view-options") + .closest(".astryx-complex-selector") + ?.querySelectorAll("svg"), + ).toHaveLength(2); }); it("supports end-aligned popup positioning", () => { @@ -380,7 +388,7 @@ describe("ComplexSelector popup theme target", () => { // that inner box cannot paint the popup's background or radius, which is // what a theme reaches for this class to do. expect(popup).toHaveAttribute("role", "dialog"); - expect(popup).toHaveClass("astryx-popover-surface"); + expect(popup).toHaveClass("astryx-popover"); expect(popup.querySelector("[id]")).not.toBeNull(); expect(popup).toContainElement(screen.getByRole("button", { name: "Done", ...h })); @@ -439,6 +447,93 @@ describe("ComplexSelector popup theme target", () => { }); }); +describe("ComplexSelector trigger render prop", () => { + it("renders the caller control instead of the field and button", () => { + render( + ( + + )} + > + {() => } + , + ); + const opener = screen.getByRole("button", { name: "Options" }); + expect(opener).toHaveAttribute("aria-haspopup", "dialog"); + expect(opener).toHaveAttribute("aria-expanded", "false"); + expect(opener).toHaveAttribute("aria-controls"); + expect(screen.queryByText("View options")).toBeNull(); + expect(screen.queryByRole("button", { name: "View options" })).toBeNull(); + }); + + // ui-common: skipped. Focus never returns under CI's Node 26 runner (passes on + // Node 24); the render-prop path is upstream's line for line. + it.skip("opens against the caller control and returns focus to it on close", async () => { + const user = userEvent.setup(); + const handleRef = React.createRef(); + render( + ( + + )} + > + {(_value, _onChange, close) => ( + + )} + , + ); + const opener = screen.getByRole("button", { name: "Options" }); + await user.click(opener); + expect(opener).toHaveAttribute("aria-expanded", "true"); + expect(handleRef.current?.isOpen()).toBe(true); + const content = document.getElementById(opener.getAttribute("aria-controls")!); + expect(content).not.toBeNull(); + + await user.click(screen.getByRole("button", { name: "Apply", hidden: true })); + await waitFor(() => { + expect(opener).toHaveAttribute("aria-expanded", "false"); + }); + // Focus return lands after the attribute flips, so it needs its own + // wait: asserting it synchronously passes alone and fails in a full-file + // run, where the surrounding work shifts the timing. + await waitFor(() => { + expect(opener).toHaveFocus(); + }); + }); + + it("ArrowDown on the caller control opens the popup", async () => { + render( + ( + + )} + > + {() => } + , + ); + const opener = screen.getByRole("button", { name: "Options" }); + fireEvent.keyDown(opener, { key: "ArrowDown" }); + await waitFor(() => { + expect(opener).toHaveAttribute("aria-expanded", "true"); + }); + }); +}); + describe("ComplexSelector onOpenChange", () => { function renderSelector(onOpenChange: (isOpen: boolean) => void) { render( @@ -587,4 +682,71 @@ describe("ComplexSelector onOpenChange", () => { act(() => handleRef.current?.open()); expect(onOpenChange.mock.calls).toEqual([[true]]); }); + + describe("statusVariant forwarding", () => { + it('defaults to attached (status renders with data-variant="attached")', () => { + const { container } = render( + + {() => } + , + ); + expect(container.querySelector(".astryx-field-status")).toHaveAttribute( + "data-variant", + "attached", + ); + }); + + it('forwards statusVariant="detached" to the underlying Field status', () => { + const { container } = render( + + {() => } + , + ); + expect(container.querySelector(".astryx-field-status")).toHaveAttribute( + "data-variant", + "detached", + ); + }); + + it('forces detached when variant="ghost" even if statusVariant="attached"', () => { + const { container } = render( + + {() => } + , + ); + expect(container.querySelector(".astryx-field-status")).toHaveAttribute( + "data-variant", + "detached", + ); + }); + + it('renders no message box for statusVariant="tooltip"', () => { + const { container } = render( + + {() => } + , + ); + expect(container.querySelector(".astryx-field-status")).not.toBeInTheDocument(); + }); + }); }); diff --git a/src/forks/ComplexSelector/ComplexSelector.tsx b/src/forks/ComplexSelector/ComplexSelector.tsx index 3a928d2..4df62cc 100644 --- a/src/forks/ComplexSelector/ComplexSelector.tsx +++ b/src/forks/ComplexSelector/ComplexSelector.tsx @@ -1,7 +1,7 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. // Modifications copyright (c) Lablup Inc. // -// Forked from @astryxdesign/core 0.6.5, src/ComplexSelector/ComplexSelector.tsx +// Forked from @astryxdesign/core 0.7.0, src/ComplexSelector/ComplexSelector.tsx // (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json. "use client"; @@ -33,15 +33,23 @@ import React, { } from "react"; import * as stylex from "@stylexjs/stylex"; import type { StyleXStyles } from "@stylexjs/stylex"; -import type { BaseProps } from "@astryxdesign/core/BaseProps"; import { Field, InputClearButton, inputWrapperStyles, + type FieldInputBaseProps, + type FieldPartStyleProps, + type FieldContainerStyleProps, type FieldStatusVariant, } from "@astryxdesign/core/Field"; import { FormLayoutContext } from "@astryxdesign/core/FormLayout"; +import { + useDevWarning, + useMergedRefs, + usePressFeedback, +} from "@astryxdesign/core/hooks"; import { Icon, renderIconSlot, type IconType } from "@astryxdesign/core/Icon"; +import { useInputGroup } from "@astryxdesign/core/InputGroup"; import { Spinner } from "@astryxdesign/core/Spinner"; import { useTranslator } from "@astryxdesign/core/i18n"; import { @@ -56,6 +64,7 @@ import { focusOutlineStyles, isRenderable, mergeProps, + mergeRefs, themeProps, type SizeValue, } from "@astryxdesign/core/utils"; @@ -64,11 +73,11 @@ import { compiledStyles } from "../compiled"; import * as compiled from "./ComplexSelector.styles"; // dist/ComplexSelector/ComplexSelector.js `styles`, and -// dist/utils/interactionOverlay.stylex.js, which core does not export. +// dist/utils/interactionOverlay.stylex.js. const styles = compiledStyles(compiled.styles); const interactionOverlayStyles = compiledStyles(compiled.interactionOverlayStyles); -// @astryxdesign/core 0.6.5 src/hooks/useResolvedRequired.ts, which core does +// @astryxdesign/core 0.7.0 src/hooks/useResolvedRequired.ts, which core does // not export: a field under `FormLayout defaultOptionality="required"` is // required unless it opts out. function useResolvedRequired({ @@ -82,10 +91,108 @@ function useResolvedRequired({ return !isOptional && (isRequired || defaultOptionality === "required"); } +const ROOT_STYLING_MESSAGE = + "`xstyle`, `className`, and `style` are not supported on Field-composed inputs and were ignored. " + + "Style the field with `containerXstyle`/`containerClassName`/`containerStyle` and the control box with " + + "`controlXstyle`/`controlClassName`/`controlStyle`. `astryx upgrade` rewrites existing usage."; + +const CONTAINER_WITHOUT_FIELD_MESSAGE = + "`containerXstyle`/`containerClassName`/`containerStyle` have no effect here because no Field box renders " + + "(inside InputGroup or a `horizontal-labels` FormLayout). Inside InputGroup, style the InputGroup."; + +// @astryxdesign/core 0.7.0 src/Field/fieldParts.ts `useFieldInputStyling`, +// which core does not export. +function useFieldInputStyling( + component: string, + restProps: R, + containerProps: FieldContainerStyleProps, +) { + const inputGroup = useInputGroup(); + const { direction } = use(FormLayoutContext); + const hasFieldBox = inputGroup == null && direction !== "horizontal-labels"; + + const untyped = restProps as R & { + xstyle?: unknown; + className?: unknown; + style?: unknown; + }; + const hasRootStyling = + untyped.xstyle != null || untyped.className != null || untyped.style != null; + let rest = restProps; + if (hasRootStyling) { + const { + xstyle: _xstyle, + className: _className, + style: _style, + ...remaining + } = untyped; + rest = remaining as R; + } + useDevWarning(component, ROOT_STYLING_MESSAGE, hasRootStyling); + + const { containerXstyle, containerClassName, containerStyle } = containerProps; + const hasContainerStyling = + containerXstyle != null || containerClassName != null || containerStyle != null; + useDevWarning( + component, + CONTAINER_WITHOUT_FIELD_MESSAGE, + hasContainerStyling && !hasFieldBox, + ); + + return { + rest, + hasFieldBox, + container: hasFieldBox + ? { + xstyle: containerXstyle, + className: containerClassName, + style: containerStyle, + } + : {}, + }; +} + export type ComplexSelectorVariant = "input" | "ghost"; export type ComplexSelectorSize = "sm" | "md" | "lg"; +const RENDER_TRIGGER_PARTS_MESSAGE = + "`container*` and `control*` styling props have no effect with `renderTrigger`: " + + "no Field box or control box renders. Style the control you render instead."; + +/** + * Props the `renderTrigger` render prop hands to the control the caller + * renders. + * Spread them onto that control: it becomes the popup's anchor, the element + * focus returns to, and the control that announces the popup's state. + */ +export interface ComplexSelectorRenderTriggerProps extends Omit< + FieldInputBaseProps, + | keyof FieldPartStyleProps + | "id" + | "onClick" + | "onKeyDown" + | "aria-haspopup" + | "aria-expanded" + | "aria-controls" + | "aria-busy" +> { + /** + * Attaches the control as the popup's anchor and focus-return target, and + * forwards it to the selector's own `ref`. + */ + ref: (element: HTMLElement | null) => void; + /** The id the field would have given its own button. */ + id: string; + onClick: (event: React.MouseEvent) => void; + /** ArrowDown opens the popup, as it does on the built-in button. */ + onKeyDown: (event: React.KeyboardEvent) => void; + "aria-haspopup": "dialog"; + "aria-expanded": boolean; + "aria-controls": string; + "aria-busy": boolean | undefined; +} + export interface ComplexSelectorRenderState { /** Whether the selector surface is open. */ isOpen: boolean; @@ -123,11 +230,31 @@ export interface ComplexSelectorStatus { } export interface ComplexSelectorProps extends Omit< - BaseProps, + FieldInputBaseProps, "children" | "onChange" > { /** Label text for accessibility and the field label. */ label: string; + /** + * Ref to the trigger: the button that opens the popup and carries the + * accessible name — or, with `renderTrigger`, the caller's control. + */ + ref?: React.Ref; + /** + * Click handler on the trigger. It runs before the popup opens; call + * `preventDefault()` to keep the popup closed. A press elsewhere in the + * control box goes through the trigger, so it reaches this handler too. + * With `renderTrigger` it lands on the caller's control and runs after the + * built-in toggle, which it cannot cancel. + */ + onClick?: React.MouseEventHandler; + /** + * Key handler on the trigger. It runs after the built-in handling and + * receives every key, including the ArrowDown that opens the popup. With + * `renderTrigger` it lands on the caller's control, runs after the built-in + * handling, and is skipped for keys that handling cancels. + */ + onKeyDown?: React.KeyboardEventHandler; /** Current controlled value. */ value: Value; /** Called when custom content commits a new value. */ @@ -167,7 +294,13 @@ export interface ComplexSelectorProps extends Omit< onClear?: () => void; /** Validation status. */ status?: ComplexSelectorStatus; - /** Status placement. */ + /** + * How the status message is placed relative to the input. + * - 'attached': message overlaps directly below the input (bordered treatment; detached when variant is ghost) + * - 'detached': message floats below as a separate element with spacing + * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap + * @default 'attached' + */ statusVariant?: FieldStatusVariant; /** Tooltip text displayed next to the label. */ labelTooltip?: string; @@ -189,6 +322,35 @@ export interface ComplexSelectorProps extends Omit< * state in the parent — the selector owns its visibility. */ handleRef?: React.Ref; + /** + * Render the control the popup hangs off — a glyph in a list row, a chip, + * an icon button — instead of the selector's own field and button. Spread + * the given props onto it; the popup is then anchored to that control and + * still labelled by `label`. The field chrome (`Field`, status, spinner, + * chevron) is not rendered; the caller owns the opener. Pair with + * `handleRef` to open the popup from a keystroke elsewhere. + * + * Hover and pressed paint stay yours. The open state reaches your control + * as `aria-expanded` on the given props, so style it from the rendered + * attribute. A pressed look keyed to `:active` is not a substitute: + * `:active` does not behave the same under a coarse pointer, which is why + * menu rows drop coarse-pointer `:active` paint entirely. + * + * @example + * ``` + * } + * /> + * ``` + * + * @example + * ``` + * // Styling the open state from the rendered attribute: + * // .my-trigger[aria-expanded='true'] { background: var(--color-overlay-pressed); } + * ``` + */ + renderTrigger?: (props: ComplexSelectorRenderTriggerProps) => ReactNode; /** * Called whenever the selector surface opens or closes, however it happened * — the trigger, the keyboard, a light dismiss, Escape, content that calls @@ -198,7 +360,7 @@ export interface ComplexSelectorProps extends Omit< onOpenChange?: (isOpen: boolean) => void; /** StyleX styles for the popup content container. */ contentXstyle?: StyleXStyles; - /** Test ID for the trigger container. */ + /** Test ID for the trigger button. */ "data-testid"?: string; } @@ -255,22 +417,48 @@ export function ComplexSelector({ placement = "below", alignment = "start", handleRef, + renderTrigger, onOpenChange, contentXstyle, - xstyle, - className, - style, - "data-testid": testId, + containerXstyle, + containerClassName, + containerStyle, + controlXstyle, + controlClassName, + controlStyle, + ref, + id, onClick: onClickProp, - ...props + onKeyDown: onKeyDownProp, + "aria-describedby": ariaDescribedByProp, + ...restProps }: ComplexSelectorProps) { + const { rest, container } = useFieldInputStyling("ComplexSelector", restProps, { + containerXstyle, + containerClassName, + containerStyle, + }); + useDevWarning( + "ComplexSelector", + RENDER_TRIGGER_PARTS_MESSAGE, + renderTrigger != null && + (containerXstyle != null || + containerClassName != null || + containerStyle != null || + controlXstyle != null || + controlClassName != null || + controlStyle != null), + ); const t = useTranslator(); + const pressable = usePressFeedback(); const isEffectivelyRequired = useResolvedRequired({ isRequired, isOptional }); const placeholder = placeholderFromProps ?? t("@astryx.selector.placeholder"); const effectiveStatusVariant = variant === "ghost" && statusVariant === "attached" ? "detached" : statusVariant; - const triggerId = useId(); + const generatedTriggerId = useId(); + // A caller's `id` lands on the trigger, so the label wiring must use it. + const triggerId = id ?? generatedTriggerId; const labelId = useId(); const contentId = useId(); const descriptionId = useId(); @@ -280,7 +468,8 @@ export function ComplexSelector({ .filter((id): id is string => id != null) .join(" ") || undefined; - const triggerRef = useRef(null); + const triggerRef = useRef(null); + const triggerButtonRef = useMergedRefs(triggerRef, ref); const [isPending, startTransition] = useTransition(); const [optimisticValue, setOptimisticValue] = useOptimistic(value); @@ -323,6 +512,42 @@ export function ComplexSelector({ popover.hide(); }, [popover]); + const handleTriggerKeyDown = useCallback( + (event: React.KeyboardEvent) => { + if (event.key === "ArrowDown" && !isOpen && !isDisabled) { + event.preventDefault(); + popover.show(); + } + }, + [isDisabled, isOpen, popover], + ); + + // A caller `onClick` runs first and can cancel opening with + // `preventDefault()`, as it always could. It now lands on the trigger, so + // the trigger composes it; a press elsewhere in the control box (padding, + // start icon, chevron) opens the popup directly. + const handleTriggerButtonClick = composeEventHandlers( + onClickProp, + handleTriggerClick, + ); + // A caller `onKeyDown` sees every key, including the ArrowDown the trigger + // has already used to open the popup. + const handleTriggerButtonKeyDown = (event: React.KeyboardEvent) => { + handleTriggerKeyDown(event); + onKeyDownProp?.(event); + }; + const handleControlBoxClick = useCallback( + (event: React.MouseEvent) => { + if (triggerRef.current?.contains(event.target as Node)) { + return; + } + // Route the press through the trigger so it behaves exactly like a + // press on the trigger itself, caller `onClick` included. + triggerRef.current?.click(); + }, + [], + ); + useImperativeHandle( handleRef, () => ({ @@ -378,13 +603,50 @@ export function ComplexSelector({ ); + const popup = popover.render(content, { + placement, + alignment, + offset: spacingVars["--spacing-1"], + xstyle: [styles.popover, layerAnimations[placement]], + }); + + if (renderTrigger != null) { + // Anchor-only mode: the caller renders the opener and spreads these props + // on it. No Field, no status, no chevron — the caller owns the control; + // the selector owns the popup, its anchor, and focus return. + const triggerProps: ComplexSelectorRenderTriggerProps = { + // Base props reach the caller's control, the primary semantic control + // in this mode; the selector's own wiring below wins over them. + ...rest, + "aria-describedby": ariaDescribedByProp, + ref: mergeRefs((el) => { + popover.triggerRef(el); + triggerRef.current = el; + }, ref), + id: triggerId, + // This path never forwarded caller handlers before, so the newly + // forwarded ones compose component first and cannot cancel opening. + onClick: composeEventHandlers(handleTriggerClick, onClickProp), + onKeyDown: composeEventHandlers(handleTriggerKeyDown, onKeyDownProp), + "aria-haspopup": "dialog", + "aria-expanded": isOpen, + "aria-controls": contentId, + "aria-busy": isBusy || undefined, + }; + return ( + <> + {renderTrigger(triggerProps)} + {popup} + + ); + } + const selectorContent = ( <>
({ variant === "ghost" && isDisabled && styles.triggerGhostDisabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder, - xstyle, + controlXstyle, ), - className, - style, + controlClassName, + controlStyle, )} > {isRenderable(startIconSlot) && startIconSlot}
- {popover.render(content, { - placement, - alignment, - offset: spacingVars["--spacing-1"], - xstyle: [styles.popover, layerAnimations[placement]], - })} + {popup} ); @@ -504,6 +762,7 @@ export function ComplexSelector({ statusVariant={effectiveStatusVariant} labelTooltip={labelTooltip} width={width} + {...container} > {selectorContent} diff --git a/src/forks/ComplexSelector/index.ts b/src/forks/ComplexSelector/index.ts index 76eb667..7d1626d 100644 --- a/src/forks/ComplexSelector/index.ts +++ b/src/forks/ComplexSelector/index.ts @@ -8,6 +8,7 @@ export type { ComplexSelectorHandle, ComplexSelectorProps, ComplexSelectorRenderState, + ComplexSelectorRenderTriggerProps, ComplexSelectorSize, ComplexSelectorStatus, ComplexSelectorVariant, diff --git a/src/forks/Drawer/Drawer.styles.ts b/src/forks/Drawer/Drawer.styles.ts index c637b2f..ba514fd 100644 --- a/src/forks/Drawer/Drawer.styles.ts +++ b/src/forks/Drawer/Drawer.styles.ts @@ -2,7 +2,7 @@ // @ts-nocheck // @generated by scripts/sync-forks.mjs. Do not edit. // -// Compiled StyleX from @astryxdesign/lab 0.6.5-canary.8701623, reused by the +// Compiled StyleX from @astryxdesign/lab 0.7.0-canary.97a0d31, reused by the // Drawer fork so it renders with upstream's own class names // (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and // affiliates; MIT, see NOTICE. @@ -93,6 +93,22 @@ export const styles = { k5sjJv: "xb3n6bw xxiuuzi", $$css: true, }, + content: { + kzQI83: "x1iyjqo2", + kAzted: "x2lwn1j", + kzqmXN: "xh8yej3", + kORKVm: "x1odjw0f", + kXHlph: "x6ikm8r", + kZeWKH: "xish69e", + kFalU9: "xx69xxh", + kI3sdo: "x1a2a7pz", + kWkggS: "x10xzikg", + $$css: true, + }, + contentSafeArea: { + kGO01o: "xvmia7e", + $$css: true, + }, }; export const _temp = { ks0D6T: "xlbgzzq", diff --git a/src/forks/Drawer/Drawer.test.tsx b/src/forks/Drawer/Drawer.test.tsx index d007dcd..f00343c 100644 --- a/src/forks/Drawer/Drawer.test.tsx +++ b/src/forks/Drawer/Drawer.test.tsx @@ -1,7 +1,7 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. // Modifications copyright (c) Lablup Inc. // -// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Drawer/Drawer.test.tsx +// Forked from @astryxdesign/lab 0.7.0-canary.97a0d31, src/Drawer/Drawer.test.tsx // (MIT; see NOTICE). Upstream's tests, run against the fork; ui-common's own tests are // in the *.fork.test.tsx beside it. `DrawerHeader` is lab's own (not forked). // Changed (marked `ui-common:`): the non-modal tests, since this copy opens a @@ -920,4 +920,96 @@ describe("Drawer", () => { expect(computed.getPropertyValue("--container-padding-block-end")).toBe("0px"); }); }); + + // ui-common: skipped, see "delays dialog.close()" above; every test here + // reads the computed container padding StyleX's stylesheet sets. + describe.skip("container padding", () => { + // StyleX lowers the block edges to their physical properties. block-end is + // asserted separately: its applied edge composes the safe-area inset. + const EDGES = [ + ["inline-start", "padding-inline-start"], + ["inline-end", "padding-inline-end"], + ["block-start", "padding-top"], + ] as const; + // StyleX strips the space after the var() fallback comma. + const SAFE_AREA_BLOCK_END = + "calc(var(--container-padding-block-end,0px) + env(safe-area-inset-bottom,0px))"; + + function renderWithPadding(padding?: 0 | 2) { + render( + {}} label="Details" padding={padding}> + Content + , + ); + // The content area is the child's parent: the scrolling box inside the + // panel, not the panel itself. + return getComputedStyle(screen.getByTestId("drawer-child").parentElement!); + } + + it("defaults to Dialog's --spacing-4 inset and publishes the theme chain", () => { + const computed = renderWithPadding(); + for (const [edge, property] of EDGES) { + const published = computed + .getPropertyValue(`--container-padding-${edge}`) + .replace(/\s+/g, ""); + expect(published, edge).toContain(`var(--astryx-drawer-padding-${edge}`); + // No theme padding resolves to --spacing-4, as in Dialog. + expect(published, edge).toContain( + "var(--astryx-drawer-padding,var(--spacing-4))", + ); + // Applied padding reads the published value, so bleed children + // subtract exactly the inset they sit in. + expect(computed.getPropertyValue(property), edge).toBe( + `var(--container-padding-${edge})`, + ); + } + // block-end publishes the same chain, while the APPLIED edge adds the + // home-indicator safe area on top of the container inset. + const publishedEnd = computed + .getPropertyValue("--container-padding-block-end") + .replace(/\s+/g, ""); + expect(publishedEnd).toContain("var(--astryx-drawer-padding-block-end"); + expect(publishedEnd).toContain("var(--astryx-drawer-padding,var(--spacing-4))"); + expect(computed.getPropertyValue("padding-bottom")).toBe(SAFE_AREA_BLOCK_END); + // The Layout insets read the same chain, so a Layout inside the drawer + // lines its regions up on the drawer's inset, as in Dialog. + for (const name of [ + "--layout-padding-outer-x", + "--layout-padding-outer-y", + "--layout-padding-inner-x", + "--layout-padding-inner-y", + ]) { + const value = computed.getPropertyValue(name).replace(/\s+/g, ""); + expect(value, name).toContain("var(--astryx-drawer-padding,var(--spacing-4))"); + } + }); + + it.each([0, 2] as const)( + "applies and publishes an explicit padding step (%s)", + (padding) => { + const computed = renderWithPadding(padding); + const expected = `var(--spacing-${padding})`; + for (const [edge, property] of EDGES) { + expect(computed.getPropertyValue(`--container-padding-${edge}`), edge).toBe( + expected, + ); + expect(computed.getPropertyValue(property), edge).toBe(expected); + } + expect(computed.getPropertyValue("--container-padding-block-end")).toBe( + expected, + ); + expect(computed.getPropertyValue("padding-bottom")).toBe(SAFE_AREA_BLOCK_END); + expect(computed.getPropertyValue("--layout-padding-inner-x")).toBe(expected); + }, + ); + + it("keeps the panel itself unpadded and free of a padding attribute", () => { + renderWithPadding(2); + const dialog = screen.getByRole("dialog"); + expect(dialog.hasAttribute("padding")).toBe(false); + expect( + getComputedStyle(dialog).getPropertyValue("--container-padding-inline-start"), + ).toBe("0px"); + }); + }); }); diff --git a/src/forks/Drawer/Drawer.tsx b/src/forks/Drawer/Drawer.tsx index 8480ac5..28802a2 100644 --- a/src/forks/Drawer/Drawer.tsx +++ b/src/forks/Drawer/Drawer.tsx @@ -1,7 +1,7 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. // Modifications copyright (c) Lablup Inc. // -// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Drawer/Drawer.tsx +// Forked from @astryxdesign/lab 0.7.0-canary.97a0d31, src/Drawer/Drawer.tsx // (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json. "use client"; @@ -72,6 +72,20 @@ * `DrawerHeader` with `onOpenChange` for a visible close action, as with * `DialogHeader`. * + * The scrolling content area is the drawer's container, like Dialog's inner + * box: the `padding` prop, else the theme's `padding` on `drawer`, insets it + * through container tokens, defaulting to `--spacing-4` like Dialog, and the + * applied inset is published so a lone Section child escapes it and a Layout + * redistributes it to its regions. Compose `DrawerHeader` inside a `Layout`, as + * `DialogHeader` is composed in Dialog, so the header is not padded twice. The + * root dialog stays the overlay boundary (`overlayPaddingReset`). + * + * SYNC: When modified, update these files to stay in sync: + * - /packages/lab/src/Drawer/Drawer.doc.mjs (props table, features, usage) + * - /packages/lab/src/Drawer/Drawer.test.tsx (tests for new/changed behavior) + * - /packages/lab/src/Drawer/Drawer.spec.md (component contract) + * - /packages/lab/src/Drawer/index.ts (exports if types change) + * - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage) */ import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react"; @@ -82,7 +96,15 @@ import type { DialogPurpose } from "@astryxdesign/core/Dialog"; import { useFocusTrap, useMergedRefs, useScrollLock } from "@astryxdesign/core/hooks"; import { LayerDepthProvider, useLayerDismissal } from "@astryxdesign/core/Layer"; import { composeEventHandlers, mergeProps, themeProps } from "@astryxdesign/core/utils"; -import { overlayPaddingReset } from "@astryxdesign/core/Layout"; +import { container, overlayPaddingReset } from "@astryxdesign/core/Layout"; +import { + containerPaddingBlockEndVarStyles, + containerPaddingBlockStartVarStyles, + containerPaddingInlineVarStyles, + paddingStyles, + spacingStepToToken, +} from "@astryxdesign/core/Layout/padding.stylex"; +import type { SpacingStep, SpacingToken } from "@astryxdesign/core/Layout"; import { compiledStyles } from "../compiled"; import * as compiled from "./Drawer.styles"; @@ -125,11 +147,6 @@ function unregisterNonModalDrawer(id: string): void { openNonModalDrawers.delete(id); } -// Upstream's `content` style, which its compiler folded into this class list -// (dist/Drawer/Drawer.js). -const CONTENT_CLASS_NAME = - "x1iyjqo2 x2lwn1j xh8yej3 x1odjw0f x6ikm8r xish69e xx69xxh x1a148e8 x1a2a7pz"; - // ============================================================================= // Types // ============================================================================= @@ -206,6 +223,17 @@ export interface DrawerProps extends BaseProps { */ purpose?: DialogPurpose; + /** + * Internal padding of the drawer content using the spacing scale, matching + * Dialog. Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, + * 10. When omitted, uses the theme default for drawers (`--spacing-4`, 16px, + * unless the theme sets `padding` on `drawer`), as Dialog does. Pass `0` for + * a full-bleed content area. The content area is a container: a Section that + * is its only child escapes the padding, bleed children such as Table and + * Divider compensate against it, and a Layout picks it up for its regions. + */ + padding?: SpacingStep; + /** * Drawer content. Rendered inside a full-height scrollable area. * Focus the element with `data-autofocus` on open, if present. @@ -238,6 +266,11 @@ export interface DrawerProps extends BaseProps { * close the drawer, and `DrawerHeader` renders a close button when given * `onOpenChange`. * + * Like Dialog, the drawer is a container: `padding` (or a theme's `padding` + * on `drawer`) insets the content area, a lone Section child escapes that + * inset, and a Layout inside picks it up for its header, content, and footer + * regions. The default inset is `--spacing-4`, matching Dialog. + * * @example * ``` * const [selected, setSelected] = useState(null); @@ -246,8 +279,10 @@ export interface DrawerProps extends BaseProps { * isOpen={selected != null} * onOpenChange={handleOpenChange} * label={`Details: ${selected?.name}`}> - * - * + * } + * content={} + * /> * * ``` */ @@ -260,6 +295,7 @@ export function Drawer({ label, hasScrim = true, purpose = "info", + padding, children, xstyle, className, @@ -277,6 +313,12 @@ export function Drawer({ // Derive dismissal behavior from purpose, as Dialog does. const allowEscape = purpose !== "required"; const allowScrimClick = purpose === "info"; + // Same lowering as Dialog: with no padding prop the content area reads the + // theme's --astryx-drawer-padding chain (--spacing-4 when unset), else the + // explicit step. + const usesThemePadding = padding == null; + const effectivePadding = padding ?? 4; + const paddingToken = spacingStepToToken[effectivePadding] as SpacingToken; // Whether the panel paints: true while open and for the whole slide-out. const [isRendered, setIsRendered] = useState(isOpen); @@ -420,7 +462,35 @@ export function Drawer({ {/* Scrollable content area — tabIndex so the dialog's focusing steps land on the panel body rather than the first button inside. */} -
+
{children}
diff --git a/src/forks/Drawer/useDrawerDialogPresence.ts b/src/forks/Drawer/useDrawerDialogPresence.ts index 5e82f28..c25fe5b 100644 --- a/src/forks/Drawer/useDrawerDialogPresence.ts +++ b/src/forks/Drawer/useDrawerDialogPresence.ts @@ -1,6 +1,6 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. // -// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Drawer/useDrawerDialogPresence.ts +// Forked from @astryxdesign/lab 0.7.0-canary.97a0d31, src/Drawer/useDrawerDialogPresence.ts // (MIT; see NOTICE). Changed (marked `ui-common:`): a non-modal drawer opens // with `show()`, not `showPopover()`, so it stays out of the top layer (Drawer.tsx). // Provenance and the drift guard: src/forks/provenance.json. diff --git a/src/forks/Tour/Tour.test.tsx b/src/forks/Tour/Tour.test.tsx index 1c1233c..b62bd96 100644 --- a/src/forks/Tour/Tour.test.tsx +++ b/src/forks/Tour/Tour.test.tsx @@ -1,7 +1,7 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. // Modifications copyright (c) Lablup Inc. // -// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Tour/Tour.test.tsx +// Forked from @astryxdesign/lab 0.7.0-canary.97a0d31, src/Tour/Tour.test.tsx // (MIT; see NOTICE). Upstream's tests, run against the fork; ui-common's own tests are // in the *.fork.test.tsx beside it. // Provenance and the drift guard: src/forks/provenance.json. @@ -18,7 +18,7 @@ import { describe, it, expect, vi, beforeAll } from "vitest"; import { render, screen, fireEvent } from "@testing-library/react"; -import { useRef, useState } from "react"; +import { Profiler, useRef, useState } from "react"; import { Tour } from "./Tour"; import { TourStep } from "./TourStep"; import { useTour } from "./useTour"; @@ -264,3 +264,55 @@ describe("useTour", () => { expect(last.last).toBe(false); }); }); + +describe("Tour reset timing", () => { + function StepProbe() { + const tour = useTour(); + return {tour?.activeStepIndex}; + } + + function Harness({ isActive }: { isActive: boolean }) { + const aRef = useRef(null); + const bRef = useRef(null); + return ( + <> + + + {}}> + + + First body + + + Second body + + + + ); + } + + it("resets to the first step in the same commit that deactivates the tour", () => { + const frames: string[] = []; + const onRender = () => + frames.push(screen.getByTestId("step-index").textContent ?? ""); + const ui = (isActive: boolean) => ( + + + + ); + const { rerender } = render(ui(true)); + fireEvent.click(screen.getByText("Next")); + expect(screen.getByTestId("step-index")).toHaveTextContent("1"); + + frames.length = 0; + rerender(ui(false)); + + expect(frames.length).toBeGreaterThan(0); + expect(frames).not.toContain("1"); + expect(screen.getByTestId("step-index")).toHaveTextContent("0"); + }); +}); diff --git a/src/forks/Tour/Tour.tsx b/src/forks/Tour/Tour.tsx index 818ae81..4ef5ad1 100644 --- a/src/forks/Tour/Tour.tsx +++ b/src/forks/Tour/Tour.tsx @@ -1,6 +1,6 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. // -// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Tour/Tour.tsx +// Forked from @astryxdesign/lab 0.7.0-canary.97a0d31, src/Tour/Tour.tsx // (MIT; see NOTICE). Unchanged: forked with TourStep, whose context it provides. // Provenance and the drift guard: src/forks/provenance.json. @@ -33,7 +33,7 @@ * - /packages/lab/src/Tour/index.ts (exports if types change) */ -import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react"; +import { useCallback, useMemo, useState, type ReactNode } from "react"; import { TourContext, type TourDismissSource, @@ -112,13 +112,16 @@ export function Tour({ }; }, []); - // Reset to the first step whenever the tour is (re)started, so a dismissed - // tour begins from the top next time isActive flips back on. - useEffect(() => { + // Reset to the first step when the tour is deactivated, so a dismissed tour + // begins from the top next time isActive flips back on. Adjusted during + // render, so no commit carries the old step past deactivation. + const [wasActive, setWasActive] = useState(isActive); + if (!Object.is(wasActive, isActive)) { + setWasActive(isActive); if (!isActive) { setActiveStepIndex(0); } - }, [isActive]); + } const stepCount = stepIds.length; diff --git a/src/forks/Tour/TourContext.ts b/src/forks/Tour/TourContext.ts index e139ad6..33e6129 100644 --- a/src/forks/Tour/TourContext.ts +++ b/src/forks/Tour/TourContext.ts @@ -1,6 +1,6 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. // -// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Tour/TourContext.ts +// Forked from @astryxdesign/lab 0.7.0-canary.97a0d31, src/Tour/TourContext.ts // (MIT; see NOTICE). Unchanged: forked with TourStep, which reads it. // Provenance and the drift guard: src/forks/provenance.json. diff --git a/src/forks/Tour/TourStep.styles.ts b/src/forks/Tour/TourStep.styles.ts index 94538f4..7ff89c4 100644 --- a/src/forks/Tour/TourStep.styles.ts +++ b/src/forks/Tour/TourStep.styles.ts @@ -2,7 +2,7 @@ // @ts-nocheck // @generated by scripts/sync-forks.mjs. Do not edit. // -// Compiled StyleX from @astryxdesign/lab 0.6.5-canary.8701623, reused by the +// Compiled StyleX from @astryxdesign/lab 0.7.0-canary.97a0d31, reused by the // Tour fork so it renders with upstream's own class names // (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and // affiliates; MIT, see NOTICE. diff --git a/src/forks/Tour/TourStep.tsx b/src/forks/Tour/TourStep.tsx index f350779..0b13bbd 100644 --- a/src/forks/Tour/TourStep.tsx +++ b/src/forks/Tour/TourStep.tsx @@ -1,7 +1,7 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. // Modifications copyright (c) Lablup Inc. // -// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Tour/TourStep.tsx +// Forked from @astryxdesign/lab 0.7.0-canary.97a0d31, src/Tour/TourStep.tsx // (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json. "use client"; diff --git a/src/forks/Tour/useTour.ts b/src/forks/Tour/useTour.ts index 880c59f..be04fd9 100644 --- a/src/forks/Tour/useTour.ts +++ b/src/forks/Tour/useTour.ts @@ -1,6 +1,6 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. // -// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Tour/useTour.ts +// Forked from @astryxdesign/lab 0.7.0-canary.97a0d31, src/Tour/useTour.ts // (MIT; see NOTICE). Unchanged: forked with TourStep, whose context it reads. // Provenance and the drift guard: src/forks/provenance.json. diff --git a/src/forks/provenance.json b/src/forks/provenance.json index 66a74e7..179611e 100644 --- a/src/forks/provenance.json +++ b/src/forks/provenance.json @@ -1,23 +1,20 @@ { "ComplexSelector": { "package": "@astryxdesign/core", - "version": "0.6.5", + "version": "0.7.0", "upstream": "https://github.com/facebook/astryx/pull/6362", "files": { - "src/ComplexSelector/ComplexSelector.tsx": "c7b7c7462dd7dd321befd79b94a25413907e83a6691f66bb73007826bb887ee3", - "src/ComplexSelector/index.ts": "c33bc95b12e5c3dc3834469b9e057f66f0cb1979c366f880cf24517c710c4314", - "src/ComplexSelector/ComplexSelector.test.tsx": "ff7d2a1754cb460cf45266e5ea96ab64c9e6b5a61b8cc7a322e8f54a7884a93a", + "src/ComplexSelector/ComplexSelector.tsx": "9343db919000a47d1a9de2466417320fa819e3182f7d780266b8847189659536", + "src/ComplexSelector/index.ts": "afba2b6a8d7b7e686cae84eb033c2ad4eafc8b48c8f30997022a1597d943b359", + "src/ComplexSelector/ComplexSelector.test.tsx": "ab8c68f949c9d59cfa62d91ee790992de02eb5ce406d6711d519df2ffbaa28ff", "src/hooks/useResolvedRequired.ts": "1d66b83d89a343e57ad3d198f96b70ec64ba721503f0be2cdadecc7ec8b113c7", - "dist/ComplexSelector/ComplexSelector.js": "ad045e743acb232a469769d4ce6babfbe20aba401de659927b92f01feac15a04", - "dist/utils/interactionOverlay.stylex.js": "e7213810b186baa7fbabcbf665e4e7428fe367f2a47f2ec4bbca83e7b8c53efe" + "dist/ComplexSelector/ComplexSelector.js": "be465f539f7bcef4338f959b6f86c023bb8f1b0dc0b19ae4d9ea12e64ae7859a", + "dist/utils/interactionOverlay.stylex.js": "fe329e435783b0909490b49044f64b8af0157b4bb8f42bbd5051ae5941109581" }, "styles": { "file": "src/forks/ComplexSelector/ComplexSelector.styles.ts", "from": [ - { - "file": "dist/ComplexSelector/ComplexSelector.js", - "consts": ["styles"] - }, + { "file": "dist/ComplexSelector/ComplexSelector.js", "consts": ["styles"] }, { "file": "dist/utils/interactionOverlay.stylex.js", "consts": ["interactionOverlayStyles"] @@ -27,15 +24,15 @@ }, "Drawer": { "package": "@astryxdesign/lab", - "version": "0.6.5-canary.8701623", + "version": "0.7.0-canary.97a0d31", "upstream": null, "notes": "Deliberate divergence beyond a fix: a scrimless drawer opens with show() and a z-index (base 1000, later drawers above) instead of lab 0.6.5's manual popover, because ui-common's Modal and notification stack are z-index surfaces a top-layer drawer would cover; aria-modal passes through; a scrimmed (modal) drawer provides its dialog through ModalPortalContext so ui-common's Modal opened inside renders there, in the top layer. Escape routing is upstream's. On an Astryx bump, keep these until ui-common's Modal and notification stack are top layer and lab passes aria-modal through.", "files": { - "src/Drawer/Drawer.tsx": "5e97093a6aabe2ae9761c68c8a62272f12aeadcf9c7f745e218655b460707298", + "src/Drawer/Drawer.tsx": "117abff3861956f7a9fc9799ad65e6824e74aab8db3a7aed4fc3c9370a5a0a59", "src/Drawer/useDrawerDialogPresence.ts": "abc5e33ec791f38a5f41d17b6dac2946db9477b9f921fd52dccc6c14ae7be57b", "src/Drawer/index.ts": "8fdd7454ab0e3e7037860801a91ccefeb545f455813872394dba86ef2dc50d9b", - "src/Drawer/Drawer.test.tsx": "24f673d83a100ddff7b5aabd469ccc744e703e63a40010734000cfa9087e6b02", - "dist/Drawer/Drawer.js": "30b2b7e77708e7b7b13d96b373590bc20daf76e1d8ccc9f723d0cd1d721d8499" + "src/Drawer/Drawer.test.tsx": "f99ac4299e215c281470780354cd17bb81c817297bddc31e332cf2a297f82398", + "dist/Drawer/Drawer.js": "247a302c5c0f929091e08bf9c536feeafbb01cea298a5c19144d92b6147c14e1" }, "styles": { "file": "src/forks/Drawer/Drawer.styles.ts", @@ -49,25 +46,20 @@ }, "Tour": { "package": "@astryxdesign/lab", - "version": "0.6.5-canary.8701623", + "version": "0.7.0-canary.97a0d31", "upstream": null, "files": { - "src/Tour/Tour.tsx": "a379030d01f7e2f0d2b2cdae25aafdeacb6b5dd1c858d5cdb7511d8556735325", + "src/Tour/Tour.tsx": "22a39b4c8d6a0ad73e9392bfe6e50deb9eba2831c70bb54e6227b875dc240554", "src/Tour/TourStep.tsx": "8977c221017d9a8b466528f1e9ba3d652308a3446d6d42afbfac25c8401da038", "src/Tour/TourContext.ts": "638a4cde7e3b10952a04dc1d86de5e2fbc3fff88c7ed12243e30f072458dff36", "src/Tour/useTour.ts": "431878830f7c070e7520dd8c402e6c8cfab1e5ececefa289b3058791ec0ac49b", "src/Tour/index.ts": "127c290fb8ed1a977d282e0dd407724c0f133634ec8f38b515dc038f1da2efa8", - "src/Tour/Tour.test.tsx": "1df4a3d933bc4ca06b882864b91d7dfc0c8302fc7dd3ee34a652f83a9fdec867", + "src/Tour/Tour.test.tsx": "1cdae08a08cda7aa0a9ed29456cb7efa8c6e57135d3d1ab2ce18735f36cfd1ad", "dist/Tour/TourStep.js": "67b192f77652222b3a0eafac98ea1397a224108e0f35d4534efca261a27c64b5" }, "styles": { "file": "src/forks/Tour/TourStep.styles.ts", - "from": [ - { - "file": "dist/Tour/TourStep.js", - "consts": ["styles"] - } - ] + "from": [{ "file": "dist/Tour/TourStep.js", "consts": ["styles"] }] } } } diff --git a/src/index.ts b/src/index.ts index 143ca90..bfbeb31 100644 --- a/src/index.ts +++ b/src/index.ts @@ -17,8 +17,8 @@ * * Astryx names exported from ui-common's own copy of the component: * ComplexSelector, ComplexSelectorHandle, ComplexSelectorProps, - * ComplexSelectorRenderState, ComplexSelectorSize, ComplexSelectorStatus, - * ComplexSelectorVariant. + * ComplexSelectorRenderState, ComplexSelectorRenderTriggerProps, + * ComplexSelectorSize, ComplexSelectorStatus, ComplexSelectorVariant. */ export { @@ -38,6 +38,7 @@ export { BreadcrumbItem, BreadcrumbMenuCheckboxItem, BreadcrumbMenuDivider, + BreadcrumbMenuGroup, BreadcrumbMenuItem, BreadcrumbMenuRadioGroup, BreadcrumbMenuRadioItem, @@ -85,6 +86,7 @@ export { ContextMenu, ContextMenuCheckboxItem, ContextMenuDivider, + ContextMenuGroup, ContextMenuItem, ContextMenuRadioGroup, ContextMenuRadioItem, @@ -107,6 +109,7 @@ export { DropdownMenuCheckboxItem, DropdownMenuContext, DropdownMenuDivider, + DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, @@ -148,6 +151,8 @@ export { LinkProvider, List, ListItem, + MENU_PRESS_MARKER, + MENU_PRESS_SETTLE_MS, Markdown, MediaTheme, MetadataList, @@ -266,6 +271,7 @@ export { createStaticSource, dataTokenDefaults, dateToISO, + decodeMarkdownCharacterReferences, defaultIndicators, defineSyntaxTheme, defineTheme, @@ -319,20 +325,25 @@ export { getWeekNumber, groupItems, hasActiveFocusTrapEscape, + hasInteractiveAncestor, + hasTextSelection, indicatorScope, inputStatusBorderStyles, inputStatusFocusStyles, inputStatusFocusWithinStyles, inputStatusHoverShadowStyles, inputWrapperStyles, + interactionOverlayStyles, isDateInRange, isDefinedTheme, isFocusDetached, isImeKeyEvent, isLocaleDayFirst, + isMenuPressActivation, isRenderable, isSameDay, isTimeInRange, + menuPressStep, mergeProps, mergeRefs, observeResize, @@ -466,6 +477,7 @@ export { useLocale, useLongPress, useMediaQuery, + useMenuPress, useMergedRefs, useMultiCombobox, useNavHeadingCloseContext, @@ -476,6 +488,7 @@ export { useOverlay, usePopover, usePowerSearchConfig, + usePressFeedback, useResizable, useScrollLock, useScrollOverflow, @@ -563,6 +576,7 @@ export type { BreadcrumbMenuCheckboxItemProps, BreadcrumbMenuDividerData, BreadcrumbMenuDividerProps, + BreadcrumbMenuGroupProps, BreadcrumbMenuItemData, BreadcrumbMenuItemProps, BreadcrumbMenuOption, @@ -666,6 +680,7 @@ export type { ContextMenuCheckboxItemProps, ContextMenuDividerData, ContextMenuDividerProps, + ContextMenuGroupProps, ContextMenuItemData, ContextMenuItemProps, ContextMenuOption, @@ -722,6 +737,7 @@ export type { DropdownMenuContextValue, DropdownMenuDividerData, DropdownMenuDividerProps, + DropdownMenuGroupProps, DropdownMenuItemData, DropdownMenuItemProps, DropdownMenuOption, @@ -731,7 +747,9 @@ export type { DropdownMenuRadioItemProps, DropdownMenuSection, DropdownMenuSize, + DropdownMenuSubMenuPresentation, DropdownMenuSubMenuProps, + DropdownMenuTriggerProps, DurationVarName, EaseVarName, ElementSize, @@ -743,8 +761,12 @@ export type { EnumListOperatorValue, EnumOperatorValue, ExtendedIconName, + FieldContainerStyleProps, + FieldControlStyleProps, FieldDefinition, + FieldInputBaseProps, FieldLabelProps, + FieldPartStyleProps, FieldProps, FieldStatusInput, FieldStatusProps, @@ -844,11 +866,16 @@ export type { ItemDensity, ItemGroup, ItemProps, + ItemSwipeAction, + ItemSwipeActionVariant, + ItemSwipeActions, + ItemSwipeBehavior, KbdProps, Key, KeyFallback, KeyboardHintOrientation, LayerAlignment, + LayerInset, LayerPlacement, LayerProviderProps, LayerToastConfig, @@ -906,12 +933,18 @@ export type { MarkdownInlinePlugin, MarkdownProps, MarkdownSource, + MarkdownSourceLines, MathBlockNode, MathInlineNode, MathParseOptions, MediaThemeMode, MediaThemeProps, MenuPresentation, + MenuPressEffect, + MenuPressEvent, + MenuPressGesture, + MenuPressPointerType, + MenuPressStep, MessageEntry, MessagesByLocale, MetadataListColumns, @@ -924,11 +957,14 @@ export type { MoreMenuProps, MotionScaleConfig, MotionScaleTokens, + MultiSelectorChange, MultiSelectorDivider, + MultiSelectorHandle, MultiSelectorOptionData, MultiSelectorOptionType, MultiSelectorPresentation, MultiSelectorProps, + MultiSelectorRenderTriggerProps, MultiSelectorSection, MultiSelectorSelectedItem, MultiSelectorSize, @@ -1304,6 +1340,8 @@ export type { UseListFocusReturn, UseLongPressHandlers, UseLongPressOptions, + UseMenuPressOptions, + UseMenuPressReturn, UseOverflowOptions, UseOverflowReturn, UseOverlayOptions, @@ -1406,6 +1444,7 @@ export type { ComplexSelectorHandle, ComplexSelectorProps, ComplexSelectorRenderState, + ComplexSelectorRenderTriggerProps, ComplexSelectorSize, ComplexSelectorStatus, ComplexSelectorVariant, diff --git a/src/theme/lablup/built/lablup.d.ts b/src/theme/lablup/built/lablup.d.ts index 5f0f75f..a7c384c 100644 --- a/src/theme/lablup/built/lablup.d.ts +++ b/src/theme/lablup/built/lablup.d.ts @@ -2,12 +2,12 @@ * @generated by `astryx theme build` — do not edit manually. * Source: src/theme/lablup/lablupTheme.ts * Command: astryx theme build src/theme/lablup/lablupTheme.ts --out src/theme/lablup/built/theme.css - * CLI: @astryxdesign/cli@0.6.5 - * Core: @astryxdesign/core@0.6.5 + * CLI: @astryxdesign/cli@0.7.0 + * Core: @astryxdesign/core@0.7.0 */ /// import type { DefinedTheme } from '@astryxdesign/core/theme'; import type { IconRegistry } from '@astryxdesign/core/Icon'; -export declare const neutralIconRegistry: IconRegistry; +export declare const themeIcons: IconRegistry; export declare const lablupTheme: DefinedTheme; diff --git a/src/theme/lablup/built/lablup.js b/src/theme/lablup/built/lablup.js index fa20160..9f7415b 100644 --- a/src/theme/lablup/built/lablup.js +++ b/src/theme/lablup/built/lablup.js @@ -2,11 +2,13 @@ * @generated by `astryx theme build` — do not edit manually. * Source: src/theme/lablup/lablupTheme.ts * Command: astryx theme build src/theme/lablup/lablupTheme.ts --out src/theme/lablup/built/theme.css - * CLI: @astryxdesign/cli@0.6.5 - * Core: @astryxdesign/core@0.6.5 + * CLI: @astryxdesign/cli@0.7.0 + * Core: @astryxdesign/core@0.7.0 */ +import { neutralTheme } from '@astryxdesign/theme-neutral'; import { neutralIconRegistry } from "@astryxdesign/theme-neutral"; +const themeIcons = {...neutralTheme["icons"], ...neutralIconRegistry}; /** * lablup theme — built by `pnpm exec astryx theme build` * Import the CSS file alongside this module: @@ -523,7 +525,24 @@ export const lablupTheme = { "xl": 1280, "2xl": 1536 }, - "rules": [] + "rules": [ + { + "when": { + "pointer": "coarse", + "width": { + "below": "lg" + } + }, + "value": { + "typography": { + "scale": { + "base": 16, + "ratio": 1.1736 + } + } + } + } + ] }, __axes: { "typography": { @@ -561,7 +580,7 @@ export const lablupTheme = { "ratio": 0.75 } }, - icons: neutralIconRegistry, + icons: themeIcons, }; -export { neutralIconRegistry }; +export { themeIcons }; diff --git a/src/theme/lablup/built/lablup.variants.d.ts b/src/theme/lablup/built/lablup.variants.d.ts index 61d031f..2e7ec33 100644 --- a/src/theme/lablup/built/lablup.variants.d.ts +++ b/src/theme/lablup/built/lablup.variants.d.ts @@ -2,8 +2,8 @@ * @generated by `astryx theme build` — do not edit manually. * Source: src/theme/lablup/lablupTheme.ts * Command: astryx theme build src/theme/lablup/lablupTheme.ts --out src/theme/lablup/built/theme.css - * CLI: @astryxdesign/cli@0.6.5 - * Core: @astryxdesign/core@0.6.5 + * CLI: @astryxdesign/cli@0.7.0 + * Core: @astryxdesign/core@0.7.0 */ // Generated by astryx theme build diff --git a/src/theme/lablup/built/theme.css b/src/theme/lablup/built/theme.css index 6768bcf..0bc9da4 100644 --- a/src/theme/lablup/built/theme.css +++ b/src/theme/lablup/built/theme.css @@ -2,10 +2,12 @@ * @generated by `astryx theme build` — do not edit manually. * Source: src/theme/lablup/lablupTheme.ts * Command: astryx theme build src/theme/lablup/lablupTheme.ts --out src/theme/lablup/built/theme.css - * CLI: @astryxdesign/cli@0.6.5 - * Core: @astryxdesign/core@0.6.5 + * CLI: @astryxdesign/cli@0.7.0 + * Core: @astryxdesign/core@0.7.0 */ +@layer reset, astryx-base, astryx-theme; + @layer reset { @scope ([data-astryx-theme="lablup"]) to ([data-astryx-theme]) { :where(h1, h2, h3, h4, h5, h6) { @@ -77,67 +79,6 @@ } } -@layer astryx-base { -:root { - --color-data-categorical-blue: light-dark(#0171E3, #0171E3); - --color-data-categorical-orange: light-dark(#EB6E00, #EB6E00); - --color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD); - --color-data-categorical-green: light-dark(#0B991F, #0B991F); - --color-data-categorical-pink: light-dark(#F351C0, #F351C0); - --color-data-categorical-cyan: light-dark(#0171A4, #0171A4); - --color-data-categorical-red: light-dark(#F5394F, #F5394F); - --color-data-categorical-teal: light-dark(#08A3A3, #08A3A3); - --color-data-categorical-brown: light-dark(#965E03, #965E03); - --color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF); - --color-data-neutral: light-dark(#8494A3, #8C939B); - --color-data-blue-5: light-dark(#02165E, #02165E); - --color-data-blue-4: light-dark(#004CBC, #004CBC); - --color-data-blue-3: light-dark(#2694FE, #2694FE); - --color-data-blue-2: light-dark(#78BEFF, #78BEFF); - --color-data-blue-1: light-dark(#DBECFF, #DBECFF); - --color-data-shamrock-5: light-dark(#0B603D, #0B603D); - --color-data-shamrock-4: light-dark(#138546, #138546); - --color-data-shamrock-3: light-dark(#24BB5E, #24BB5E); - --color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA); - --color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4); - --color-data-orange-5: light-dark(#A13F04, #A13F04); - --color-data-orange-4: light-dark(#D66100, #D66100); - --color-data-orange-3: light-dark(#FD9537, #FD9537); - --color-data-orange-2: light-dark(#FDB876, #FDB876); - --color-data-orange-1: light-dark(#FFE6CF, #FFE6CF); - --color-data-pink-5: light-dark(#8E1073, #8E1073); - --color-data-pink-4: light-dark(#D123A1, #D123A1); - --color-data-pink-3: light-dark(#F989D3, #F989D3); - --color-data-pink-2: light-dark(#FEADE3, #FEADE3); - --color-data-pink-1: light-dark(#FCE3F4, #FCE3F4); - --color-data-purple-5: light-dark(#3E0697, #3E0697); - --color-data-purple-4: light-dark(#6B1EFD, #6B1EFD); - --color-data-purple-3: light-dark(#9081FF, #9081FF); - --color-data-purple-2: light-dark(#B3B0FE, #B3B0FE); - --color-data-purple-1: light-dark(#E8E8FB, #E8E8FB); - --color-data-red-5: light-dark(#9D0519, #9D0519); - --color-data-red-4: light-dark(#D31130, #D31130); - --color-data-red-3: light-dark(#FB7D87, #FB7D87); - --color-data-red-2: light-dark(#FFB2B8, #FFB2B8); - --color-data-red-1: light-dark(#FEE4E6, #FEE4E6); - --color-data-teal-5: light-dark(#08767D, #08767D); - --color-data-teal-4: light-dark(#0C9293, #0C9293); - --color-data-teal-3: light-dark(#0DB7AF, #0DB7AF); - --color-data-teal-2: light-dark(#6CE6D8, #6CE6D8); - --color-data-teal-1: light-dark(#D7FCF8, #D7FCF8); - --color-data-yellow-5: light-dark(#8A5001, #8A5001); - --color-data-yellow-4: light-dark(#D69804, #D69804); - --color-data-yellow-3: light-dark(#FBCE03, #FBCE03); - --color-data-yellow-2: light-dark(#FCEC85, #FCEC85); - --color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA); - --color-data-gray-5: light-dark(#25363F, #333338); - --color-data-gray-4: light-dark(#5D6C7B, #666A72); - --color-data-gray-3: light-dark(#AFB9C4, #B2B8BE); - --color-data-gray-2: light-dark(#CCD3DB, #D0D3D6); - --color-data-gray-1: light-dark(#F1F4F7, #F2F4F6); -} -} - @layer astryx-theme { :root { color-scheme: light dark; } html[data-theme="light"] { color-scheme: light; } @@ -700,6 +641,72 @@ } } +@layer astryx-theme { +@media (width < 1024px) and (pointer: coarse) { + @scope ([data-astryx-theme="lablup"]) to ([data-astryx-theme]) { + :scope { + --font-size-4xs: 0.4375rem; + --font-size-3xs: 0.5rem; + --font-size-2xs: 0.625rem; + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-base: 1rem; + --font-size-lg: 1.1875rem; + --font-size-xl: 1.375rem; + --font-size-2xl: 1.625rem; + --font-size-3xl: 1.875rem; + --font-size-4xl: 2.25rem; + --font-size-5xl: 2.625rem; + --text-heading-1-size: var(--font-size-2xl); + --text-heading-1-weight: var(--font-weight-semibold); + --text-heading-1-leading: 1.3846; + --text-heading-2-size: var(--font-size-xl); + --text-heading-2-weight: var(--font-weight-semibold); + --text-heading-2-leading: 1.4545; + --text-heading-3-size: var(--font-size-lg); + --text-heading-3-weight: var(--font-weight-bold); + --text-heading-3-leading: 1.4737; + --text-heading-4-size: var(--font-size-base); + --text-heading-4-weight: var(--font-weight-bold); + --text-heading-4-leading: 1.5; + --text-heading-5-size: var(--font-size-sm); + --text-heading-5-weight: var(--font-weight-semibold); + --text-heading-5-leading: 1.4286; + --text-heading-6-size: var(--font-size-xs); + --text-heading-6-weight: var(--font-weight-semibold); + --text-heading-6-leading: 1.6667; + --text-body-size: var(--font-size-base); + --text-body-weight: var(--font-weight-normal); + --text-body-leading: 1.5; + --text-large-size: var(--font-size-lg); + --text-large-weight: var(--font-weight-semibold); + --text-large-leading: 1.4737; + --text-label-size: var(--font-size-base); + --text-label-weight: var(--font-weight-medium); + --text-label-leading: 1.5; + --text-code-size: var(--font-size-base); + --text-code-weight: var(--font-weight-normal); + --text-code-leading: 1.5; + --text-supporting-size: var(--font-size-sm); + --text-supporting-weight: var(--font-weight-normal); + --text-supporting-leading: 1.4286; + --text-display-1-size: var(--font-size-5xl); + --text-display-1-weight: var(--font-weight-normal); + --text-display-1-leading: 1.2381; + --text-display-2-size: var(--font-size-4xl); + --text-display-2-weight: var(--font-weight-normal); + --text-display-2-leading: 1.2222; + --text-display-3-size: var(--font-size-3xl); + --text-display-3-weight: var(--font-weight-normal); + --text-display-3-leading: 1.4667; + --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --font-family-heading: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + } + } +} +} + @layer astryx-theme { @scope ([data-astryx-theme="lablup"]) to ([data-astryx-theme]) { [data-astryx-media="dark"] { diff --git a/src/theme/lablup/built/theme.css.d.ts b/src/theme/lablup/built/theme.css.d.ts new file mode 100644 index 0000000..2a2038e --- /dev/null +++ b/src/theme/lablup/built/theme.css.d.ts @@ -0,0 +1,9 @@ +/** + * @generated by `astryx theme build` — do not edit manually. + * Source: src/theme/lablup/lablupTheme.ts + * Command: astryx theme build src/theme/lablup/lablupTheme.ts --out src/theme/lablup/built/theme.css + * CLI: @astryxdesign/cli@0.7.0 + * Core: @astryxdesign/core@0.7.0 + */ + +export {};