@astryxdesign/core 0.7.5-canary.d9b43cf → 0.7.5-canary.dae1747
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 +9 -0
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +48 -6
- package/dist/Icon/IconSize.stylex.d.ts +16 -11
- package/dist/Icon/IconSize.stylex.d.ts.map +1 -1
- package/dist/Icon/IconSize.stylex.js +27 -11
- package/dist/Icon/globalIconRegistry.d.ts +68 -4
- package/dist/Icon/globalIconRegistry.d.ts.map +1 -1
- package/dist/Icon/globalIconRegistry.js +108 -24
- package/dist/Icon/index.d.ts +26 -2
- package/dist/Icon/index.d.ts.map +1 -1
- package/dist/Icon/index.js +24 -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 +32 -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 +102 -11
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +66 -7
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +9 -0
- 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 +51 -3
- package/src/Icon/Icon.test.tsx +263 -9
- package/src/Icon/Icon.tsx +45 -10
- package/src/Icon/IconSize.stylex.ts +27 -11
- package/src/Icon/globalIconRegistry.test.tsx +326 -3
- package/src/Icon/globalIconRegistry.tsx +137 -36
- package/src/Icon/index.ts +29 -1
- package/src/Icon/useIcon.ts +5 -1
- package/src/IconButton/IconButton.test.tsx +5 -2
- 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/__tests__/unthemedLength.ts +34 -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 +235 -2
- package/src/theme/defineTheme.ts +175 -19
- package/src/theme/derivedVarRegistry.test.ts +19 -0
- package/src/theme/derivedVarRegistry.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,12 @@
|
|
|
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.
|
|
13
|
+
*
|
|
14
|
+
* Both modes size the glyph from the `icon` target's private size vars
|
|
15
|
+
* (`iconSizeStyles` in IconSize.stylex.ts, `registrySizeStyles` below), so a
|
|
16
|
+
* theme's `width` and `height` on that target's size selector set the size's
|
|
17
|
+
* glyph dimension, including the font size 1em-based registry artwork follows.
|
|
12
18
|
*
|
|
13
19
|
* SYNC: When modified, update these files to stay in sync:
|
|
14
20
|
* - /packages/core/src/Icon/Icon.doc.mjs (props table, features, implementation notes)
|
|
@@ -118,6 +124,9 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
118
124
|
* - 'md': 1.25rem (20px at a 16px root)
|
|
119
125
|
* - 'lg': 1.5rem (24px at a 16px root)
|
|
120
126
|
*
|
|
127
|
+
* A theme sets a size's glyph dimension with `width` and `height`, in `px`
|
|
128
|
+
* or `rem`, on `components.icon['size:sm']` (and the other sizes).
|
|
129
|
+
*
|
|
121
130
|
* An explicit value wins. When omitted, Icon uses the nearest default supplied
|
|
122
131
|
* by an owning Astryx component for its icon slot, then falls back to 'md'.
|
|
123
132
|
*/
|
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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;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,EAAiB,KAAK,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhE,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAiDhD,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;;;;;;;;;;;;OAYG;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,12 @@
|
|
|
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.
|
|
17
|
+
*
|
|
18
|
+
* Both modes size the glyph from the `icon` target's private size vars
|
|
19
|
+
* (`iconSizeStyles` in IconSize.stylex.ts, `registrySizeStyles` below), so a
|
|
20
|
+
* theme's `width` and `height` on that target's size selector set the size's
|
|
21
|
+
* glyph dimension, including the font size 1em-based registry artwork follows.
|
|
16
22
|
*
|
|
17
23
|
* SYNC: When modified, update these files to stay in sync:
|
|
18
24
|
* - /packages/core/src/Icon/Icon.doc.mjs (props table, features, implementation notes)
|
|
@@ -26,11 +32,11 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
26
32
|
import "../theme/tokens.stylex.js";
|
|
27
33
|
import { colorVars } from "../theme/tokens.stylex.js";
|
|
28
34
|
import { useThemeName } from "../theme/useTheme.js";
|
|
29
|
-
import {
|
|
35
|
+
import { resolveIcon } from "./globalIconRegistry.js";
|
|
30
36
|
import { mergeProps } from "../utils/index.js";
|
|
31
37
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
38
|
import { useIconSize } from "./IconDefaultSizeContext.js";
|
|
33
|
-
import {
|
|
39
|
+
import { iconSizeStyles } from "./IconSize.stylex.js";
|
|
34
40
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
35
41
|
// =============================================================================
|
|
36
42
|
// Styles
|
|
@@ -49,6 +55,40 @@ const styles = {
|
|
|
49
55
|
$$css: true
|
|
50
56
|
}
|
|
51
57
|
};
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Size styles for string-based registry icons: the glyph dimensions
|
|
61
|
+
* `iconSizeStyles` reads from the `icon` target's private vars, plus a
|
|
62
|
+
* `fontSize`, because registry artwork is 1em-based. `fontSize` is the smaller
|
|
63
|
+
* side, which fits square artwork into a non-square box the way an SVG viewBox
|
|
64
|
+
* does.
|
|
65
|
+
*/
|
|
66
|
+
const registrySizeStyles = {
|
|
67
|
+
xsm: {
|
|
68
|
+
kzqmXN: "x13u0t82",
|
|
69
|
+
kZKoxP: "x89eeu2",
|
|
70
|
+
kGuDYH: "x1uq1jy3",
|
|
71
|
+
$$css: true
|
|
72
|
+
},
|
|
73
|
+
sm: {
|
|
74
|
+
kzqmXN: "xomy6nw",
|
|
75
|
+
kZKoxP: "x14eyxzr",
|
|
76
|
+
kGuDYH: "x1qzu985",
|
|
77
|
+
$$css: true
|
|
78
|
+
},
|
|
79
|
+
md: {
|
|
80
|
+
kzqmXN: "x1vvatio",
|
|
81
|
+
kZKoxP: "x1jxzzob",
|
|
82
|
+
kGuDYH: "xhhwgqx",
|
|
83
|
+
$$css: true
|
|
84
|
+
},
|
|
85
|
+
lg: {
|
|
86
|
+
kzqmXN: "x1gbskz6",
|
|
87
|
+
kZKoxP: "xol4r8t",
|
|
88
|
+
kGuDYH: "x14nqahd",
|
|
89
|
+
$$css: true
|
|
90
|
+
}
|
|
91
|
+
};
|
|
52
92
|
const colorStyles = {
|
|
53
93
|
primary: {
|
|
54
94
|
kMwMTN: "xtbr613",
|
|
@@ -234,8 +274,8 @@ Icon.displayName = 'Icon';
|
|
|
234
274
|
* Internal component that resolves a semantic icon name from the registry
|
|
235
275
|
* and renders it in a styled span with proper sizing.
|
|
236
276
|
*
|
|
237
|
-
* Extracted as a separate component so
|
|
238
|
-
*
|
|
277
|
+
* Extracted as a separate component so the registry is only read when the
|
|
278
|
+
* icon prop is a string. A function entry receives the resolved size.
|
|
239
279
|
*/
|
|
240
280
|
function IconFromRegistry({
|
|
241
281
|
name,
|
|
@@ -248,7 +288,9 @@ function IconFromRegistry({
|
|
|
248
288
|
spanProps
|
|
249
289
|
}) {
|
|
250
290
|
const themeName = useThemeName();
|
|
251
|
-
const resolvedIcon =
|
|
291
|
+
const resolvedIcon = resolveIcon(name, themeName, {
|
|
292
|
+
size
|
|
293
|
+
});
|
|
252
294
|
if (resolvedIcon == null) {
|
|
253
295
|
return null;
|
|
254
296
|
}
|
|
@@ -265,7 +307,7 @@ function IconFromRegistry({
|
|
|
265
307
|
...mergeProps(themeProps('icon', {
|
|
266
308
|
size,
|
|
267
309
|
color
|
|
268
|
-
}), stylex.props(styles.span, colorStyles[color],
|
|
310
|
+
}), stylex.props(styles.span, colorStyles[color], registrySizeStyles[size], xstyle), className ?? undefined, style),
|
|
269
311
|
children: resolvedIcon
|
|
270
312
|
});
|
|
271
313
|
}
|