@astryxdesign/core 0.7.5-canary.d9b43cf → 0.7.5-canary.daab0b6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AlertDialog/AlertDialog.js +1 -1
- package/dist/Banner/Banner.d.ts +1 -0
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +2 -0
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +2 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +2 -1
- package/dist/BottomSheet/BottomSheetSwitcher.js +1 -1
- package/dist/Chat/ChatPastedTextToken.d.ts.map +1 -1
- package/dist/Chat/ChatPastedTextToken.js +7 -6
- package/dist/Collapsible/Collapsible.d.ts +8 -1
- package/dist/Collapsible/Collapsible.d.ts.map +1 -1
- package/dist/Collapsible/Collapsible.js +84 -2
- package/dist/Field/Field.js +1 -1
- package/dist/Field/FieldLabel.js +1 -1
- package/dist/Field/PanelSearchInput.d.ts +9 -1
- package/dist/Field/PanelSearchInput.d.ts.map +1 -1
- package/dist/Field/PanelSearchInput.js +20 -8
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +12 -6
- package/dist/Icon/Icon.d.ts +1 -0
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +7 -4
- package/dist/Icon/globalIconRegistry.d.ts +65 -4
- package/dist/Icon/globalIconRegistry.d.ts.map +1 -1
- package/dist/Icon/globalIconRegistry.js +101 -24
- package/dist/Icon/index.d.ts +3 -2
- package/dist/Icon/index.d.ts.map +1 -1
- package/dist/Icon/index.js +2 -1
- package/dist/Icon/useIcon.d.ts +5 -1
- package/dist/Icon/useIcon.d.ts.map +1 -1
- package/dist/Icon/useIcon.js +5 -1
- package/dist/Kbd/Kbd.d.ts +2 -2
- package/dist/Kbd/Kbd.d.ts.map +1 -1
- package/dist/Kbd/Kbd.js +18 -11
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +6 -4
- package/dist/Lightbox/LightboxViewport.a11y.browser.spec.d.ts +2 -0
- package/dist/Lightbox/LightboxViewport.a11y.browser.spec.d.ts.map +1 -0
- package/dist/Lightbox/LightboxViewport.a11y.browser.spec.js +65 -0
- package/dist/MultiSelector/MultiSelector.d.ts +1 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +13 -1
- package/dist/NavMenu/NavHeadingMenuItem.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenuItem.js +46 -7
- package/dist/NumberInput/NumberInput.d.ts +1 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +8 -1
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +7 -5
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +8 -1
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +5 -1
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +1 -0
- package/dist/Table/TableCell.d.ts.map +1 -1
- package/dist/Table/TableCell.js +1 -0
- package/dist/Table/TableHeaderCell.d.ts.map +1 -1
- package/dist/Table/TableHeaderCell.js +1 -0
- package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
- package/dist/Table/plugins/columnResize/useTableColumnResize.js +11 -2
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +103 -4
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map +1 -1
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +233 -6
- package/dist/Table/rowDivider.d.ts +34 -0
- package/dist/Table/rowDivider.d.ts.map +1 -0
- package/dist/Table/rowDivider.js +118 -0
- package/dist/Tokenizer/Tokenizer.d.ts +71 -4
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +418 -32
- package/dist/Tokenizer/TokenizerBottomSheet.d.ts +98 -0
- package/dist/Tokenizer/TokenizerBottomSheet.d.ts.map +1 -0
- package/dist/Tokenizer/TokenizerBottomSheet.js +721 -0
- package/dist/TreeList/TreeList.d.ts +8 -23
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +175 -3
- package/dist/TreeList/TreeListItem.d.ts +7 -1
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +3 -1
- package/dist/astryx.css +20 -1
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/useAdaptivePresentation.d.ts +8 -0
- package/dist/hooks/useAdaptivePresentation.d.ts.map +1 -1
- package/dist/hooks/useAdaptivePresentation.js +27 -5
- package/dist/hooks/useAnimatedLayout.d.ts +42 -0
- package/dist/hooks/useAnimatedLayout.d.ts.map +1 -0
- package/dist/hooks/useAnimatedLayout.js +46 -0
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +33 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +33 -0
- package/dist/internal/tokenizer-presentation.d.ts +21 -0
- package/dist/internal/tokenizer-presentation.d.ts.map +1 -0
- package/dist/internal/tokenizer-presentation.js +21 -0
- package/dist/motion/LayoutChangeSnapshot.d.ts +33 -0
- package/dist/motion/LayoutChangeSnapshot.d.ts.map +1 -0
- package/dist/motion/LayoutChangeSnapshot.js +37 -0
- package/dist/motion/animatedLayout.d.ts +8 -0
- package/dist/motion/animatedLayout.d.ts.map +1 -1
- package/dist/motion/animatedLayout.js +44 -3
- package/dist/theme/defineTheme.d.ts +35 -5
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +31 -5
- package/locales/af-ZA.json +1 -1
- package/locales/ar-SA.json +1 -1
- package/locales/ca-ES.json +1 -1
- package/locales/cs-CZ.json +1 -1
- package/locales/da-DK.json +1 -1
- package/locales/de-DE.json +1 -1
- package/locales/el-GR.json +1 -1
- package/locales/en.json +132 -0
- package/locales/es-ES.json +1 -1
- package/locales/fi-FI.json +1 -1
- package/locales/fr-FR.json +1 -1
- package/locales/he-IL.json +1 -1
- package/locales/hu-HU.json +1 -1
- package/locales/it-IT.json +1 -1
- package/locales/ja-JP.json +1 -1
- package/locales/ko-KR.json +1 -1
- package/locales/nl-NL.json +1 -1
- package/locales/no-NO.json +1 -1
- package/locales/pl-PL.json +1 -1
- package/locales/pseudo.json +99 -0
- package/locales/pt-BR.json +1 -1
- package/locales/pt-PT.json +1 -1
- package/locales/ro-RO.json +1 -1
- package/locales/ru-RU.json +1 -1
- package/locales/sr-SP.json +1 -1
- package/locales/sv-SE.json +1 -1
- package/locales/tr-TR.json +1 -1
- package/locales/uk-UA.json +1 -1
- package/locales/vi-VN.json +1 -1
- package/locales/zh-CN.json +1 -1
- package/locales/zh-TW.json +1 -1
- package/package.json +8 -3
- package/src/AlertDialog/AlertDialog.tsx +1 -1
- package/src/AppShell/AppShell.spec.md +52 -44
- package/src/Banner/Banner.test.tsx +36 -17
- package/src/Banner/Banner.tsx +5 -0
- package/src/BottomSheet/BottomSheet.tsx +2 -1
- package/src/BottomSheet/BottomSheetPanel.tsx +2 -1
- package/src/BottomSheet/BottomSheetSwitcher.spec.md +3 -7
- package/src/BottomSheet/BottomSheetSwitcher.tsx +1 -1
- package/src/Button/Button.spec.md +30 -28
- package/src/Card/Card.spec.md +205 -0
- package/src/Chat/ChatPastedTextToken.test.tsx +71 -0
- package/src/Chat/ChatPastedTextToken.tsx +8 -7
- package/src/CheckboxInput/CheckboxInput.spec.md +97 -66
- package/src/CheckboxList/CheckboxList.spec.md +92 -78
- package/src/CheckboxList/CheckboxListItem.spec.md +86 -60
- package/src/Collapsible/Collapsible.doc.mjs +6 -0
- package/src/Collapsible/Collapsible.spec.md +26 -23
- package/src/Collapsible/Collapsible.tsx +121 -2
- package/src/CommandPalette/CommandPalette.perf.test.ts +8 -4
- package/src/ContextMenu/ContextMenu.spec.md +30 -26
- package/src/Divider/Divider.spec.md +79 -70
- package/src/DropdownMenu/DropdownMenu.ssr.test.tsx +33 -7
- package/src/DropdownMenu/modules/useMenuPress.spec.md +35 -36
- package/src/Field/Field.tsx +1 -1
- package/src/Field/FieldLabel.tsx +1 -1
- package/src/Field/PanelSearchInput.tsx +11 -0
- package/src/FileInput/FileInput.test.tsx +78 -0
- package/src/FileInput/FileInput.tsx +8 -6
- package/src/Icon/Icon.doc.mjs +10 -0
- package/src/Icon/Icon.test.tsx +143 -1
- package/src/Icon/Icon.tsx +5 -4
- package/src/Icon/globalIconRegistry.test.tsx +275 -3
- package/src/Icon/globalIconRegistry.tsx +124 -36
- package/src/Icon/index.ts +4 -1
- package/src/Icon/useIcon.ts +5 -1
- package/src/InputGroup/InputGroup.spec.md +199 -0
- package/src/InputGroup/InputGroupText.spec.md +139 -0
- package/src/Kbd/Kbd.test.tsx +95 -0
- package/src/Kbd/Kbd.tsx +30 -23
- package/src/Lightbox/Lightbox.test.tsx +15 -0
- package/src/Lightbox/Lightbox.tsx +9 -4
- package/src/Lightbox/LightboxViewport.a11y.browser.spec.ts +70 -0
- package/src/List/List.spec.md +73 -28
- package/src/MultiSelector/MultiSelector.test.tsx +97 -0
- package/src/MultiSelector/MultiSelector.tsx +16 -1
- package/src/NavMenu/NavHeadingMenu.test.tsx +199 -1
- package/src/NavMenu/NavHeadingMenuItem.tsx +54 -6
- package/src/NumberInput/NumberInput.test.tsx +43 -0
- package/src/NumberInput/NumberInput.tsx +11 -1
- package/src/PowerSearch/PowerSearch.test.tsx +32 -1
- package/src/PowerSearch/PowerSearch.tsx +7 -5
- package/src/Selector/Selector.test.tsx +47 -0
- package/src/Selector/Selector.tsx +11 -1
- package/src/SideNav/SideNav.spec.md +46 -27
- package/src/Skeleton/Skeleton.spec.md +7 -7
- package/src/Spinner/Spinner.spec.md +10 -10
- package/src/Stepper/Step.spec.md +206 -0
- package/src/TabList/Tab.tsx +7 -1
- package/src/TabList/TabMenu.tsx +2 -0
- package/src/TabList/__tests__/TabListOverflow.interaction.browser.spec.ts +99 -0
- package/src/Table/Table.spec.md +17 -17
- package/src/Table/TableCell.tsx +6 -0
- package/src/Table/TableHeaderCell.tsx +2 -0
- package/src/Table/__tests__/TableStickyDividers.a11y.browser.spec.ts +560 -0
- package/src/Table/plugins/columnResize/useTableColumnResize.tsx +23 -8
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +91 -9
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +120 -5
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.test.tsx +51 -1
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +291 -12
- package/src/Table/rowDivider.ts +154 -0
- package/src/TextArea/TextArea.spec.md +164 -64
- package/src/Timestamp/Timestamp.spec.md +252 -0
- package/src/Tokenizer/Tokenizer.props-type.test.tsx +126 -0
- package/src/Tokenizer/Tokenizer.spec.md +66 -54
- package/src/Tokenizer/Tokenizer.ssr.test.tsx +196 -0
- package/src/Tokenizer/Tokenizer.tsx +573 -25
- package/src/Tokenizer/TokenizerBottomSheet.test.tsx +2719 -0
- package/src/Tokenizer/TokenizerBottomSheet.tsx +957 -0
- package/src/Toolbar/Toolbar.spec.md +101 -48
- package/src/TreeList/TreeList.doc.mjs +13 -0
- package/src/TreeList/TreeList.spec.md +51 -35
- package/src/TreeList/TreeList.tsx +234 -2
- package/src/TreeList/TreeListItem.tsx +12 -2
- package/src/VisuallyHidden/VisuallyHidden.spec.md +170 -0
- package/src/hooks/index.ts +6 -0
- package/src/hooks/useAdaptivePresentation.ts +36 -6
- package/src/hooks/useAnimatedLayout.doc.mjs +101 -0
- package/src/hooks/useAnimatedLayout.ts +61 -0
- package/src/hooks/useAnnounceRenderedText.adopters.test.tsx +22 -0
- package/src/i18n/generated-locales/en.generated.ts +35 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +37 -0
- package/src/internal/tokenizer-presentation.test.ts +29 -0
- package/src/internal/tokenizer-presentation.ts +25 -0
- package/src/motion/LayoutChangeSnapshot.tsx +50 -0
- package/src/motion/__tests__/animatedLayoutAdopters.interaction.browser.spec.ts +217 -0
- package/src/motion/animatedLayout.boundary.test.ts +5 -3
- package/src/motion/animatedLayout.test.ts +37 -0
- package/src/motion/animatedLayout.ts +53 -3
- package/src/motion/animatedLayoutAdopters.test.tsx +500 -0
- package/src/theme/defineTheme.test.ts +55 -0
- package/src/theme/defineTheme.ts +71 -10
- package/src/theme/derivedVarRegistry.test.ts +4 -0
|
@@ -28,7 +28,7 @@ import { Button } from "../Button/index.js";
|
|
|
28
28
|
import { mergeProps } from "../utils/index.js";
|
|
29
29
|
import { themeProps } from "../utils/themeProps.js";
|
|
30
30
|
import { useTranslator } from "../i18n/index.js";
|
|
31
|
-
import { useMediaQuery } from "../hooks/
|
|
31
|
+
import { useMediaQuery } from "../hooks/useMediaQuery.js";
|
|
32
32
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
33
|
const SMALL_SCREEN_QUERY = '(max-width: 640px)';
|
|
34
34
|
const styles = {
|
package/dist/Banner/Banner.d.ts
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
* - Banner frame (themeProps 'banner-frame'): owns the resting elevation and,
|
|
9
9
|
* for elevated card banners, the outer radius that shapes that shadow
|
|
10
10
|
* - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
|
|
11
|
+
* - End area restores the ordinary text context for consumer `endContent`; built-in controls opt back into the status foreground
|
|
11
12
|
* - Content area (themeProps 'banner-content'): card background for additional content (children)
|
|
12
13
|
* - Status icon (themeProps 'banner-icon'): the target rides on the default
|
|
13
14
|
* <Icon> itself — the element that paints — so 'status:X' overrides reach
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4QD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCAqQb;yBAzRe,MAAM"}
|
package/dist/Banner/Banner.js
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
* - Banner frame (themeProps 'banner-frame'): owns the resting elevation and,
|
|
13
13
|
* for elevated card banners, the outer radius that shapes that shadow
|
|
14
14
|
* - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
|
|
15
|
+
* - End area restores the ordinary text context for consumer `endContent`; built-in controls opt back into the status foreground
|
|
15
16
|
* - Content area (themeProps 'banner-content'): card background for additional content (children)
|
|
16
17
|
* - Status icon (themeProps 'banner-icon'): the target rides on the default
|
|
17
18
|
* <Icon> itself — the element that paints — so 'status:X' overrides reach
|
|
@@ -148,6 +149,7 @@ const styles = {
|
|
|
148
149
|
kjj79g: "x13a6bvl",
|
|
149
150
|
kOIVth: "x1txdalj",
|
|
150
151
|
kmuXW: "x2lah0s",
|
|
152
|
+
kMwMTN: "x1tgivj0",
|
|
151
153
|
ks0D6T: "x193iq5w",
|
|
152
154
|
keTefX: "xvc5jky",
|
|
153
155
|
kqGvvJ: "x81ka23",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAsDhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAsJhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AAm0BxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
|
|
@@ -80,7 +80,8 @@ import { use, useCallback, useEffect, useLayoutEffect, useRef, useState } from '
|
|
|
80
80
|
import * as stylex from '@stylexjs/stylex';
|
|
81
81
|
import "../theme/tokens.stylex.js";
|
|
82
82
|
import { colorVars, durationVars, easeVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
83
|
-
import { useDevWarning
|
|
83
|
+
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
84
|
+
import { useScrollLock } from "../hooks/useScrollLock.js";
|
|
84
85
|
import { mergeProps } from "../utils/index.js";
|
|
85
86
|
import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
|
|
86
87
|
import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAIvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA+CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AA2M3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA4HD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyXvB;yBA9Ye,gBAAgB"}
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
*/
|
|
25
25
|
import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
|
|
26
26
|
import * as stylex from '@stylexjs/stylex';
|
|
27
|
-
import { useDevWarning
|
|
27
|
+
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
28
|
+
import { useMediaQuery } from "../hooks/useMediaQuery.js";
|
|
28
29
|
import { useScrollableArea } from "../hooks/useScrollableArea.js";
|
|
29
30
|
import "../theme/tokens.stylex.js";
|
|
30
31
|
import { borderVars, colorVars, durationVars, easeVars, focusVars, radiusVars, shadowVars, sizeVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
*/
|
|
76
76
|
import { use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
77
77
|
import * as stylex from '@stylexjs/stylex';
|
|
78
|
-
import { useScrollLock } from "../hooks/
|
|
78
|
+
import { useScrollLock } from "../hooks/useScrollLock.js";
|
|
79
79
|
import { useFocusTrapEscapeCompatibilitySignal } from "../hooks/useFocusTrap.js";
|
|
80
80
|
import { dispatchLayerEscapeKeyDown } from "../Layer/layerStack.js";
|
|
81
81
|
import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPastedTextToken.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatPastedTextToken.tsx"],"names":[],"mappings":"AAiCA,MAAM,WAAW,wBAAwB;IACvC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;
|
|
1
|
+
{"version":3,"file":"ChatPastedTextToken.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatPastedTextToken.tsx"],"names":[],"mappings":"AAiCA,MAAM,WAAW,wBAAwB;IACvC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAkDD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,QAAQ,GACT,EAAE,wBAAwB,+BA8B1B;yBAjCe,mBAAmB"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file ChatPastedTextToken.tsx
|
|
7
|
-
* @input Uses React, StyleX, Badge, HoverCard, Button,
|
|
7
|
+
* @input Uses React, StyleX, Badge, HoverCard, Button, provider-bound translator
|
|
8
8
|
* @output Exports ChatPastedTextToken component
|
|
9
9
|
* @position Inline token for pasted text with hover card preview + expand
|
|
10
10
|
*
|
|
@@ -32,10 +32,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; // =============
|
|
|
32
32
|
// Helpers
|
|
33
33
|
// =============================================================================
|
|
34
34
|
|
|
35
|
-
function formatLabel(text) {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
function formatLabel(text, t) {
|
|
36
|
+
return t('@astryx.chat.pastedText.label', {
|
|
37
|
+
lines: text.split('\n').length,
|
|
38
|
+
chars: text.length
|
|
39
|
+
});
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
// =============================================================================
|
|
@@ -47,7 +48,7 @@ export function ChatPastedTextToken({
|
|
|
47
48
|
onExpand
|
|
48
49
|
}) {
|
|
49
50
|
const t = useTranslator();
|
|
50
|
-
const label = formatLabel(text);
|
|
51
|
+
const label = formatLabel(text, t);
|
|
51
52
|
const cardContent = /*#__PURE__*/_jsxs("div", {
|
|
52
53
|
...{
|
|
53
54
|
className: "x78zum5 xdt5ytf x1txdalj x17fpy1y"
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
* - /packages/cli/assets/templates/blocks/components/Collapsible/ (showcase blocks)
|
|
24
24
|
*/
|
|
25
25
|
import { type ReactNode } from 'react';
|
|
26
|
+
import { type AnimatedLayout } from '../motion/animatedLayout.js';
|
|
26
27
|
import type { CollapsibleChevronPosition } from './CollapsibleGroupContext.js';
|
|
27
28
|
import type { BaseProps } from '../BaseProps.js';
|
|
28
29
|
export interface CollapsibleProps extends BaseProps {
|
|
@@ -63,6 +64,12 @@ export interface CollapsibleProps extends BaseProps {
|
|
|
63
64
|
* CollapsibleGroup owns grouped state and calls its `onChange` instead.
|
|
64
65
|
*/
|
|
65
66
|
onOpenChange?: (isOpen: boolean) => void;
|
|
67
|
+
/**
|
|
68
|
+
* The handle from `useAnimatedLayout({containerRef})`. With it, opening and
|
|
69
|
+
* closing glides the content after this Collapsible, up to that container,
|
|
70
|
+
* instead of jumping, and the chevron turns on the same timing.
|
|
71
|
+
*/
|
|
72
|
+
animatedLayout?: AnimatedLayout;
|
|
66
73
|
/**
|
|
67
74
|
* Logical position of the disclosure chevron.
|
|
68
75
|
*
|
|
@@ -125,7 +132,7 @@ export interface CollapsibleProps extends BaseProps {
|
|
|
125
132
|
* </CollapsibleGroup>
|
|
126
133
|
* ```
|
|
127
134
|
*/
|
|
128
|
-
export declare function Collapsible({ trigger, children, defaultIsOpen, isOpen: controlledIsOpen, isDisabled, onOpenChange, chevronPosition, value, ref, xstyle, className, style, ...props }: CollapsibleProps): import("react").JSX.Element;
|
|
135
|
+
export declare function Collapsible({ trigger, children, defaultIsOpen, isOpen: controlledIsOpen, isDisabled, onOpenChange, chevronPosition, value, animatedLayout, ref, xstyle, className, style, ...props }: CollapsibleProps): import("react").JSX.Element;
|
|
129
136
|
export declare namespace Collapsible {
|
|
130
137
|
var displayName: string;
|
|
131
138
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAef,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,2BAA2B,CAAC;AAG1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0J5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC;;;;;;;;;;;;OAYG;IACH,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAE7C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,aAAa,EACb,MAAM,EAAE,gBAAgB,EACxB,UAAkB,EAClB,YAAY,EACZ,eAAe,EACf,KAAK,EACL,cAAc,EACd,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAmOlB;yBAlPe,WAAW"}
|
|
@@ -26,11 +26,13 @@
|
|
|
26
26
|
* - /apps/storybook/stories/Collapsible.stories.tsx
|
|
27
27
|
* - /packages/cli/assets/templates/blocks/components/Collapsible/ (showcase blocks)
|
|
28
28
|
*/
|
|
29
|
-
import { use, useId } from 'react';
|
|
29
|
+
import { use, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
30
30
|
import * as stylex from '@stylexjs/stylex';
|
|
31
31
|
import "../theme/tokens.stylex.js";
|
|
32
32
|
import { borderVars, colorVars, typographyVars, fontWeightVars, spacingVars, typeScaleVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
33
33
|
import { useCollapsible } from "./useCollapsible.js";
|
|
34
|
+
import { LayoutChangeSnapshot } from "../motion/LayoutChangeSnapshot.js";
|
|
35
|
+
import { applyLayoutChangeTransition, holdLayoutExit, playLayoutChange, releaseLayoutExit, reportLayoutChange } from "../motion/animatedLayout.js";
|
|
34
36
|
import { CollapsibleGroupPresentationContext } from "./CollapsibleGroupContext.js";
|
|
35
37
|
import { Icon } from "../Icon/index.js";
|
|
36
38
|
import { mergeProps } from "../utils/index.js";
|
|
@@ -203,6 +205,7 @@ export function Collapsible({
|
|
|
203
205
|
onOpenChange,
|
|
204
206
|
chevronPosition,
|
|
205
207
|
value,
|
|
208
|
+
animatedLayout,
|
|
206
209
|
ref,
|
|
207
210
|
xstyle,
|
|
208
211
|
className,
|
|
@@ -226,6 +229,80 @@ export function Collapsible({
|
|
|
226
229
|
value
|
|
227
230
|
});
|
|
228
231
|
|
|
232
|
+
// With an `animatedLayout` handle, the content's size change animates: the
|
|
233
|
+
// content after this Collapsible, up to the handle's container, glides, and
|
|
234
|
+
// the revealed content plays its own entrance on the same timing
|
|
235
|
+
// (`architecture:react-component-runtime` INV12). Without one, nothing
|
|
236
|
+
// changes.
|
|
237
|
+
const contentRef = useRef(null);
|
|
238
|
+
const triggerRef = useRef(null);
|
|
239
|
+
const layoutChange = useMemo(() => reportLayoutChange(animatedLayout, contentRef), [animatedLayout]);
|
|
240
|
+
// Every open-state change, whatever caused it (a click, an owner-set
|
|
241
|
+
// `isOpen`, a group's value), is measured before it lands (`spec:AST-105`
|
|
242
|
+
// FR1): LayoutChangeSnapshot calls this in the commit, before the DOM
|
|
243
|
+
// changes. The chevron (the trigger's Icon, its `icon` theming target)
|
|
244
|
+
// turns on the glide's motion too.
|
|
245
|
+
const measureChange = useCallback(() => {
|
|
246
|
+
applyLayoutChangeTransition(animatedLayout, triggerRef.current?.querySelector(':scope > .astryx-icon') ?? null);
|
|
247
|
+
layoutChange.measureBefore();
|
|
248
|
+
}, [animatedLayout, layoutChange]);
|
|
249
|
+
// Without a handle the chevron keeps the theme's own turn: a spring a handle
|
|
250
|
+
// set stays only while it is passed (`spec:AST-105` FR2).
|
|
251
|
+
useLayoutEffect(() => {
|
|
252
|
+
if (animatedLayout == null) {
|
|
253
|
+
applyLayoutChangeTransition(null, triggerRef.current?.querySelector(':scope > .astryx-icon') ?? null);
|
|
254
|
+
}
|
|
255
|
+
}, [animatedLayout]);
|
|
256
|
+
// A close with a handle keeps the content rendered while it plays its exit
|
|
257
|
+
// (the exit makes it inert and gives up its space), then hides it
|
|
258
|
+
// (`spec:AST-105` FR4). Derived from the open state as it changes, during
|
|
259
|
+
// render, so the closing commit already keeps it.
|
|
260
|
+
const [renderedIsOpen, setRenderedIsOpen] = useState(isOpen);
|
|
261
|
+
const [isExiting, setIsExiting] = useState(false);
|
|
262
|
+
if (renderedIsOpen !== isOpen) {
|
|
263
|
+
setRenderedIsOpen(isOpen);
|
|
264
|
+
setIsExiting(!isOpen && animatedLayout != null);
|
|
265
|
+
}
|
|
266
|
+
const endExit = useCallback(() => {
|
|
267
|
+
// eslint-disable-next-line @eslint-react/set-state-in-effect -- holdLayoutExit decides from layout read in the closing commit (the content's place in the area's visible part, Reduce Motion and the pointer, and whether an end margin frees its space); an exit it does not hold hides the content before the frame paints
|
|
268
|
+
setIsExiting(false);
|
|
269
|
+
}, []);
|
|
270
|
+
const wasOpenRef = useRef(isOpen);
|
|
271
|
+
useLayoutEffect(() => {
|
|
272
|
+
if (wasOpenRef.current === isOpen) {
|
|
273
|
+
return;
|
|
274
|
+
}
|
|
275
|
+
wasOpenRef.current = isOpen;
|
|
276
|
+
const content = contentRef.current;
|
|
277
|
+
if (content == null) {
|
|
278
|
+
return;
|
|
279
|
+
}
|
|
280
|
+
// A change that was not measured (no handle) lands at once, entrance and
|
|
281
|
+
// exit included, so the content and what follows stay in step.
|
|
282
|
+
const isMeasured = layoutChange.animate();
|
|
283
|
+
if (isOpen) {
|
|
284
|
+
// Opened again mid-exit: the content takes its place in flow.
|
|
285
|
+
releaseLayoutExit(content);
|
|
286
|
+
if (isMeasured) {
|
|
287
|
+
playLayoutChange(animatedLayout, content);
|
|
288
|
+
}
|
|
289
|
+
return;
|
|
290
|
+
}
|
|
291
|
+
const isHeld = isExiting && isMeasured && holdLayoutExit(animatedLayout, content, endExit);
|
|
292
|
+
if (isExiting && !isHeld) {
|
|
293
|
+
// An exit holdLayoutExit did not hold (unmeasured, out of view, Reduce
|
|
294
|
+
// Motion with a fine pointer, or no margin frees its space): hide the
|
|
295
|
+
// content before this frame paints.
|
|
296
|
+
endExit();
|
|
297
|
+
}
|
|
298
|
+
}, [isOpen, isExiting, layoutChange, animatedLayout, endExit]);
|
|
299
|
+
useLayoutEffect(() => {
|
|
300
|
+
if (!isOpen && !isExiting && contentRef.current != null) {
|
|
301
|
+
// Hidden again after its exit: drop the exit's inline values.
|
|
302
|
+
releaseLayoutExit(contentRef.current);
|
|
303
|
+
}
|
|
304
|
+
}, [isOpen, isExiting]);
|
|
305
|
+
|
|
229
306
|
// Activation is blocked by this guard rather than the native `disabled`
|
|
230
307
|
// attribute, so the trigger keeps `aria-disabled` semantics and stays
|
|
231
308
|
// discoverable. A native `disabled` button would silently swallow events
|
|
@@ -272,6 +349,7 @@ export function Collapsible({
|
|
|
272
349
|
}), stylex.props(styles.root, isDivided && styles.divided, xstyle), className, style),
|
|
273
350
|
...props,
|
|
274
351
|
children: [/*#__PURE__*/_jsxs("button", {
|
|
352
|
+
ref: triggerRef,
|
|
275
353
|
type: "button",
|
|
276
354
|
onClick: handleToggle,
|
|
277
355
|
"aria-disabled": isDisabled || undefined,
|
|
@@ -301,12 +379,16 @@ export function Collapsible({
|
|
|
301
379
|
},
|
|
302
380
|
children: trigger
|
|
303
381
|
}), !isChevronAtStart && chevron]
|
|
382
|
+
}), animatedLayout != null && /*#__PURE__*/_jsx(LayoutChangeSnapshot, {
|
|
383
|
+
value: isOpen,
|
|
384
|
+
onBeforeChange: measureChange
|
|
304
385
|
}), /*#__PURE__*/_jsx("div", {
|
|
386
|
+
ref: contentRef,
|
|
305
387
|
id: contentId,
|
|
306
388
|
...mergeProps(themeProps('collapsible-content', {
|
|
307
389
|
density: density ?? undefined,
|
|
308
390
|
open: isOpen ? 'open' : null
|
|
309
|
-
}), stylex.props(styles.content, density != null && contentDensity[density], !isOpen && styles.contentHidden)),
|
|
391
|
+
}), stylex.props(styles.content, density != null && contentDensity[density], !isOpen && !isExiting && styles.contentHidden)),
|
|
310
392
|
children: presentation != null ? /*#__PURE__*/_jsx(CollapsibleGroupPresentationContext, {
|
|
311
393
|
value: null,
|
|
312
394
|
children: children
|
package/dist/Field/Field.js
CHANGED
|
@@ -25,7 +25,7 @@ import { spacingVars, borderVars, sizeVars } from "../theme/tokens.stylex.js";
|
|
|
25
25
|
import { mergeProps } from "../utils/index.js";
|
|
26
26
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
27
27
|
import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
|
|
28
|
-
import { Text } from "../Text/
|
|
28
|
+
import { Text } from "../Text/Text.js";
|
|
29
29
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
30
30
|
import { themeProps } from "../utils/themeProps.js";
|
|
31
31
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
package/dist/Field/FieldLabel.js
CHANGED
|
@@ -24,7 +24,7 @@ import { Icon, renderIconSlot } from "../Icon/index.js";
|
|
|
24
24
|
import { Tooltip } from "../Tooltip/index.js";
|
|
25
25
|
import { useTranslator } from "../i18n/index.js";
|
|
26
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
27
|
-
import { useInputContainer } from "../hooks/
|
|
27
|
+
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
28
28
|
import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
|
|
29
29
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
30
30
|
const styles = {
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
* that use it, not public API.
|
|
36
36
|
*/
|
|
37
37
|
import { type Ref } from 'react';
|
|
38
|
+
import type { StyleXStyles } from '@stylexjs/stylex';
|
|
38
39
|
import type { BaseProps } from '../BaseProps.js';
|
|
39
40
|
export interface PanelSearchInputProps extends Omit<BaseProps<HTMLInputElement>, 'onChange'> {
|
|
40
41
|
/** Ref forwarded to the input element (for focus management). */
|
|
@@ -64,6 +65,13 @@ export interface PanelSearchInputProps extends Omit<BaseProps<HTMLInputElement>,
|
|
|
64
65
|
* handler of its own.
|
|
65
66
|
*/
|
|
66
67
|
onContainerKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
|
|
68
|
+
/**
|
|
69
|
+
* Styles for the field box itself (the rounded row that draws the focus
|
|
70
|
+
* ring), as opposed to `xstyle`, which lands on the outer gutter. A panel
|
|
71
|
+
* whose rows are taller than a dropdown's — a touch sheet — uses it to grow
|
|
72
|
+
* the field to the same height as its rows.
|
|
73
|
+
*/
|
|
74
|
+
fieldXstyle?: StyleXStyles;
|
|
67
75
|
}
|
|
68
76
|
/**
|
|
69
77
|
* Search row for the top of a dropdown panel: magnifier, borderless input, and
|
|
@@ -74,7 +82,7 @@ export interface PanelSearchInputProps extends Omit<BaseProps<HTMLInputElement>,
|
|
|
74
82
|
* option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
|
|
75
83
|
* passes through to the `<input>`, so the caller owns the combobox wiring.
|
|
76
84
|
*/
|
|
77
|
-
export declare function PanelSearchInput({ ref, label, clearLabel, placeholder, value, onValueChange, onKeyDown, onFocus, onBlur, onContainerKeyDown, xstyle, className, style, ...props }: PanelSearchInputProps): import("react").JSX.Element;
|
|
85
|
+
export declare function PanelSearchInput({ ref, label, clearLabel, placeholder, value, onValueChange, onKeyDown, onFocus, onBlur, onContainerKeyDown, fieldXstyle, xstyle, className, style, ...props }: PanelSearchInputProps): import("react").JSX.Element;
|
|
78
86
|
export declare namespace PanelSearchInput {
|
|
79
87
|
var displayName: string;
|
|
80
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAwB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAwB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAiBnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgF5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAEhE;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BA6EvB;yBA7Fe,gBAAgB"}
|
|
@@ -53,6 +53,24 @@ const styles = {
|
|
|
53
53
|
kg3NbH: "x7a5moj",
|
|
54
54
|
$$css: true
|
|
55
55
|
},
|
|
56
|
+
field: {
|
|
57
|
+
kB7OPa: "x9f619",
|
|
58
|
+
k1xSpc: "x78zum5",
|
|
59
|
+
kGNEyG: "x6s0dn4",
|
|
60
|
+
kOIVth: "x1txdalj",
|
|
61
|
+
kzqmXN: "xh8yej3",
|
|
62
|
+
k8WAf4: "x1vofgu7",
|
|
63
|
+
kg3NbH: "xf314gf",
|
|
64
|
+
kaIpWk: "xh6dtrn",
|
|
65
|
+
k1ekBW: "xkdsq27",
|
|
66
|
+
kIyJzY: "xuedmi6 x12w9bfk",
|
|
67
|
+
kAMwcw: "xlr8y92",
|
|
68
|
+
$$css: true
|
|
69
|
+
},
|
|
70
|
+
fieldKeyboardFocus: {
|
|
71
|
+
kGVxlE: "x1gnnqk1 x1btxeh5",
|
|
72
|
+
$$css: true
|
|
73
|
+
},
|
|
56
74
|
icon: {
|
|
57
75
|
k1xSpc: "x78zum5",
|
|
58
76
|
kGNEyG: "x6s0dn4",
|
|
@@ -80,6 +98,7 @@ export function PanelSearchInput({
|
|
|
80
98
|
onFocus,
|
|
81
99
|
onBlur,
|
|
82
100
|
onContainerKeyDown,
|
|
101
|
+
fieldXstyle,
|
|
83
102
|
xstyle,
|
|
84
103
|
className,
|
|
85
104
|
style,
|
|
@@ -121,14 +140,7 @@ export function PanelSearchInput({
|
|
|
121
140
|
...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
|
|
122
141
|
children: /*#__PURE__*/_jsxs("div", {
|
|
123
142
|
"data-keyboard-focus": isKeyboardFocus ? 'true' : undefined,
|
|
124
|
-
...
|
|
125
|
-
0: {
|
|
126
|
-
className: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92"
|
|
127
|
-
},
|
|
128
|
-
1: {
|
|
129
|
-
className: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92 x1gnnqk1 x1btxeh5"
|
|
130
|
-
}
|
|
131
|
-
}[!!isKeyboardFocus << 0],
|
|
143
|
+
...stylex.props(styles.field, isKeyboardFocus && styles.fieldKeyboardFocus, fieldXstyle),
|
|
132
144
|
children: [/*#__PURE__*/_jsx(Icon, {
|
|
133
145
|
icon: "search",
|
|
134
146
|
size: "sm",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAUlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAUlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAqP9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,EACnB,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,GAAG,SAAS,EACb,EAAE,cAAc,+BAmdhB;yBAlfe,SAAS"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file FileInput.tsx
|
|
7
|
-
* @input Uses React, useId, Field, Icon, Spinner, VisuallyHidden
|
|
7
|
+
* @input Uses React, useId, Field, Icon, Spinner, VisuallyHidden, provider-bound translator
|
|
8
8
|
* @output Exports FileInput component, public types, and its root/icon theme targets
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by FileInput.test.tsx
|
|
10
10
|
*
|
|
@@ -34,14 +34,20 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
34
34
|
import { useTranslator } from "../i18n/index.js";
|
|
35
35
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
36
36
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
37
|
-
function formatFileSize(bytes) {
|
|
37
|
+
function formatFileSize(bytes, t) {
|
|
38
38
|
if (bytes < 1024) {
|
|
39
|
-
return
|
|
39
|
+
return t('@astryx.fileInput.fileSize.bytes', {
|
|
40
|
+
size: bytes
|
|
41
|
+
});
|
|
40
42
|
}
|
|
41
43
|
if (bytes < 1024 * 1024) {
|
|
42
|
-
return
|
|
44
|
+
return t('@astryx.fileInput.fileSize.kilobytes', {
|
|
45
|
+
size: bytes / 1024
|
|
46
|
+
});
|
|
43
47
|
}
|
|
44
|
-
return
|
|
48
|
+
return t('@astryx.fileInput.fileSize.megabytes', {
|
|
49
|
+
size: bytes / (1024 * 1024)
|
|
50
|
+
});
|
|
45
51
|
}
|
|
46
52
|
function validateFiles(files, accept, maxSize, maxFiles, isMultiple, t) {
|
|
47
53
|
const errors = [];
|
|
@@ -71,7 +77,7 @@ function validateFiles(files, accept, maxSize, maxFiles, isMultiple, t) {
|
|
|
71
77
|
if (file.size > maxSize) {
|
|
72
78
|
errors.push(t('@astryx.fileInput.errorMaxSize', {
|
|
73
79
|
fileName: file.name,
|
|
74
|
-
maxSize: formatFileSize(maxSize)
|
|
80
|
+
maxSize: formatFileSize(maxSize, t)
|
|
75
81
|
}));
|
|
76
82
|
return false;
|
|
77
83
|
}
|
package/dist/Icon/Icon.d.ts
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
* directly with and spread SVG props.
|
|
10
10
|
* - String mode: Pass a semantic name (e.g. 'close', 'chevronDown') — resolved from the
|
|
11
11
|
* theme's icon registry (or built-in fallback SVGs) and wrapped in a styled span.
|
|
12
|
+
* A function registry entry receives `{size}`, the size resolved by ORD1.
|
|
12
13
|
*
|
|
13
14
|
* SYNC: When modified, update these files to stay in sync:
|
|
14
15
|
* - /packages/core/src/Icon/Icon.doc.mjs (props table, features, implementation notes)
|
package/dist/Icon/Icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAIvE,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAmBhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAkDX;yBA5De,IAAI;;;AAqIpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
|
package/dist/Icon/Icon.js
CHANGED
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
* directly with and spread SVG props.
|
|
14
14
|
* - String mode: Pass a semantic name (e.g. 'close', 'chevronDown') — resolved from the
|
|
15
15
|
* theme's icon registry (or built-in fallback SVGs) and wrapped in a styled span.
|
|
16
|
+
* A function registry entry receives `{size}`, the size resolved by ORD1.
|
|
16
17
|
*
|
|
17
18
|
* SYNC: When modified, update these files to stay in sync:
|
|
18
19
|
* - /packages/core/src/Icon/Icon.doc.mjs (props table, features, implementation notes)
|
|
@@ -26,7 +27,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
26
27
|
import "../theme/tokens.stylex.js";
|
|
27
28
|
import { colorVars } from "../theme/tokens.stylex.js";
|
|
28
29
|
import { useThemeName } from "../theme/useTheme.js";
|
|
29
|
-
import {
|
|
30
|
+
import { resolveIcon } from "./globalIconRegistry.js";
|
|
30
31
|
import { mergeProps } from "../utils/index.js";
|
|
31
32
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
33
|
import { useIconSize } from "./IconDefaultSizeContext.js";
|
|
@@ -234,8 +235,8 @@ Icon.displayName = 'Icon';
|
|
|
234
235
|
* Internal component that resolves a semantic icon name from the registry
|
|
235
236
|
* and renders it in a styled span with proper sizing.
|
|
236
237
|
*
|
|
237
|
-
* Extracted as a separate component so
|
|
238
|
-
*
|
|
238
|
+
* Extracted as a separate component so the registry is only read when the
|
|
239
|
+
* icon prop is a string. A function entry receives the resolved size.
|
|
239
240
|
*/
|
|
240
241
|
function IconFromRegistry({
|
|
241
242
|
name,
|
|
@@ -248,7 +249,9 @@ function IconFromRegistry({
|
|
|
248
249
|
spanProps
|
|
249
250
|
}) {
|
|
250
251
|
const themeName = useThemeName();
|
|
251
|
-
const resolvedIcon =
|
|
252
|
+
const resolvedIcon = resolveIcon(name, themeName, {
|
|
253
|
+
size
|
|
254
|
+
});
|
|
252
255
|
if (resolvedIcon == null) {
|
|
253
256
|
return null;
|
|
254
257
|
}
|