@astryxdesign/core 0.7.5-canary.d9b43cf → 0.7.5-canary.dcdb356
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/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/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/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/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 +13 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +13 -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/locales/en.json +52 -0
- package/locales/pseudo.json +39 -0
- package/package.json +8 -3
- package/src/AlertDialog/AlertDialog.tsx +1 -1
- 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/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/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/InputGroup/InputGroup.spec.md +199 -0
- package/src/InputGroup/InputGroupText.spec.md +139 -0
- 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 +57 -28
- package/src/MultiSelector/MultiSelector.test.tsx +97 -0
- package/src/MultiSelector/MultiSelector.tsx +16 -1
- 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/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 +146 -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 +14 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +14 -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/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 = {
|
|
@@ -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";
|
|
@@ -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":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;
|
|
1
|
+
{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAmKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCA4cf;yBA5de,QAAQ"}
|
|
@@ -56,7 +56,7 @@ const styles = {
|
|
|
56
56
|
kVAEAm: "xixxii4",
|
|
57
57
|
kpwlN0: "x10a8y8t",
|
|
58
58
|
kzqmXN: "xn9wirt",
|
|
59
|
-
kZKoxP: "
|
|
59
|
+
kZKoxP: "x1gvbg2u",
|
|
60
60
|
ks0D6T: "x1x1rfll",
|
|
61
61
|
kskxy: "x7ab17h",
|
|
62
62
|
kogj98: "x1ghz6dp",
|
|
@@ -303,10 +303,12 @@ export function Lightbox({
|
|
|
303
303
|
}) : t('@astryx.lightbox.imagePosition', position));
|
|
304
304
|
}, [index, isOpen, announce, mediaArray, t]);
|
|
305
305
|
|
|
306
|
-
// Open/close dialog
|
|
306
|
+
// Open/close dialog. The dialog renders only with an item, so a viewer
|
|
307
|
+
// opened before its first item arrives opens when that item does.
|
|
308
|
+
const hasItem = currentItem != null;
|
|
307
309
|
useIsomorphicLayoutEffect(() => {
|
|
308
310
|
const dialog = dialogRef.current;
|
|
309
|
-
if (!dialog) {
|
|
311
|
+
if (!dialog || !hasItem) {
|
|
310
312
|
return;
|
|
311
313
|
}
|
|
312
314
|
if (isOpen && !dialog.open) {
|
|
@@ -318,7 +320,7 @@ export function Lightbox({
|
|
|
318
320
|
triggerElementRef.current.focus();
|
|
319
321
|
}
|
|
320
322
|
}
|
|
321
|
-
}, [isOpen]);
|
|
323
|
+
}, [isOpen, hasItem]);
|
|
322
324
|
const handleClose = useCallback(() => {
|
|
323
325
|
onOpenChange(false);
|
|
324
326
|
}, [onOpenChange]);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LightboxViewport.a11y.browser.spec.d.ts","sourceRoot":"","sources":["../../src/Lightbox/LightboxViewport.a11y.browser.spec.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
// @pr-a11y always
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* @file LightboxViewport.a11y.browser.spec.ts
|
|
6
|
+
* @input The built Lightbox default story and the stylesheet rules the open
|
|
7
|
+
* viewer matches, in Chromium and WebKit
|
|
8
|
+
* @output Browser evidence that the viewer is as tall as the dynamic viewport,
|
|
9
|
+
* so a mobile browser's toolbar never covers its bottom
|
|
10
|
+
* @position Cross-browser proof for Lightbox's full-screen sizing
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import { expect, test } from '@playwright/test';
|
|
14
|
+
import { DEFAULT_STORYBOOK_DIR, serveStorybook } from '@astryxdesign/a11y-spec/storybook';
|
|
15
|
+
let storybook;
|
|
16
|
+
test.beforeAll(async () => {
|
|
17
|
+
storybook = await serveStorybook(process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR);
|
|
18
|
+
});
|
|
19
|
+
test.afterAll(async () => {
|
|
20
|
+
await storybook?.close();
|
|
21
|
+
});
|
|
22
|
+
test('the viewer is as tall as the dynamic viewport, so a toolbar never covers its bottom', async ({
|
|
23
|
+
page
|
|
24
|
+
}) => {
|
|
25
|
+
// The story's photo is remote; the sizing does not need it to load.
|
|
26
|
+
await page.route(/picsum\.photos/, async route => route.abort());
|
|
27
|
+
await page.goto(`${storybook.origin}/iframe.html?id=core-lightbox--default&viewMode=story`);
|
|
28
|
+
await page.getByRole('button', {
|
|
29
|
+
name: 'Open lightbox'
|
|
30
|
+
}).click();
|
|
31
|
+
const dialog = page.getByRole('dialog');
|
|
32
|
+
await expect(dialog).toBeVisible();
|
|
33
|
+
// Mobile Safari's 100vh is the large viewport, measured with its toolbars
|
|
34
|
+
// retracted, so a viewer that tall runs under the bottom toolbar and hides a
|
|
35
|
+
// gallery's caption (iOS 26.2, iPhone 17 Pro: 714 pt visible, the caption
|
|
36
|
+
// at 718–754). The dynamic viewport is the visible height. No desktop or
|
|
37
|
+
// emulated engine shrinks it, so this reads the height the viewer declares.
|
|
38
|
+
const declared = await dialog.evaluate(element => {
|
|
39
|
+
const heights = [];
|
|
40
|
+
const walk = rules => {
|
|
41
|
+
for (const rule of Array.from(rules)) {
|
|
42
|
+
if (rule instanceof CSSStyleRule) {
|
|
43
|
+
if (rule.style.height !== '' && element.matches(rule.selectorText)) {
|
|
44
|
+
heights.push(rule.style.height);
|
|
45
|
+
}
|
|
46
|
+
} else if ('cssRules' in rule) {
|
|
47
|
+
walk(rule.cssRules);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
for (const sheet of Array.from(document.styleSheets)) {
|
|
52
|
+
try {
|
|
53
|
+
walk(sheet.cssRules);
|
|
54
|
+
} catch {
|
|
55
|
+
// A cross-origin stylesheet's rules are unreadable and not ours.
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
return {
|
|
59
|
+
heights,
|
|
60
|
+
supported: CSS.supports('height', '100dvh')
|
|
61
|
+
};
|
|
62
|
+
});
|
|
63
|
+
expect(declared.supported).toBe(true);
|
|
64
|
+
expect(declared.heights).toContain('100dvh');
|
|
65
|
+
});
|
|
@@ -426,7 +426,7 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
|
|
|
426
426
|
* />
|
|
427
427
|
* ```
|
|
428
428
|
*/
|
|
429
|
-
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled: isDisabledProp, isReadOnly, disabledMessage, options, value, onChange, changeAction, isLoading, placeholder: placeholderFromProps, size: sizeProp, variant, status, statusVariant, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel: selectAllLabelFromProps, hasSearch, searchPlaceholder: searchPlaceholderFromProps, emptyText: emptyTextFromProps, emptySearchText: emptySearchTextFromProps, hasCreate, triggerDisplay, formatValue, maxBadges, renderOption, indicatorPosition, presentation, isDefaultOpen, renderTrigger, handleRef, onOpenChange, htmlName, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, id, onClick, onFocus, onKeyDown: onKeyDownProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: MultiSelectorProps<T>): React.JSX.Element;
|
|
429
|
+
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled: isDisabledProp, isReadOnly, disabledMessage, options, value, onChange, changeAction, isLoading, placeholder: placeholderFromProps, size: sizeProp, variant, status, statusVariant, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel: selectAllLabelFromProps, hasSearch, searchPlaceholder: searchPlaceholderFromProps, emptyText: emptyTextFromProps, emptySearchText: emptySearchTextFromProps, hasCreate, triggerDisplay, formatValue, maxBadges, renderOption, indicatorPosition, presentation, isDefaultOpen, renderTrigger, handleRef, onOpenChange, htmlName, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, id, onClick, onFocus, onKeyDown: onKeyDownProp, 'aria-describedby': ariaDescribedByProp, 'aria-labelledby': ariaLabelledByProp, ...restProps }: MultiSelectorProps<T>): React.JSX.Element;
|
|
430
430
|
export declare namespace MultiSelector {
|
|
431
431
|
var displayName: string;
|
|
432
432
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAWZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,EAKL,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAOlB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAcpD,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAWZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,EAKL,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAOlB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAcpD,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAoBjB,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAM7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAW9C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AAub3E,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,yBAAyB,GAAG,oBAAoB,CAAC;AAE7D,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtE,YAAY,EAAC,mBAAmB,EAAC,CAAC;AAElC;;;;;GAKG;AACH,MAAM,WAAW,+BAAgC,SAAQ,IAAI,CAC3D,mBAAmB,EACjB,MAAM,mBAAmB,GACzB,IAAI,GACJ,SAAS,GACT,WAAW,GACX,SAAS,GACT,eAAe,GACf,eAAe,GACf,eAAe,GACf,WAAW,GACX,eAAe,CAClB;IACC;;;OAGG;IACH,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAC;IACX;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IAChD,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,mBAAmB;IAClC,uEAAuE;IACvE,IAAI,IAAI,IAAI,CAAC;IACb,sDAAsD;IACtD,KAAK,IAAI,IAAI,CAAC;IACd,uCAAuC;IACvC,MAAM,IAAI,IAAI,CAAC;IACf,6DAA6D;IAC7D,MAAM,IAAI,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,gEAAgE;IAChE,IAAI,EAAE,QAAQ,CAAC;IACf,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,uBAAuB,GAAG,uBAAuB,CAC3D,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,cAAc,CAAC;IAC9D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAE/C;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAE/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAEpD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IAEb;;OAEG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAElE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE/C;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,EAAE,KAAK,MAAM,CAAC;IAE7D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAE9D;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAEtC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC;IAEzC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,SAAS,CAAC;IAEtE;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAE3C;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAqED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,uBAAuB,EAAE,EAC/D,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAU,EAAE,cAAsB,EAClC,UAAkB,EAClB,eAAe,EACf,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,OAAiB,EACjB,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,SAAS,EACT,QAAgB,EAChB,YAAoB,EACpB,cAAc,EAAE,uBAAuB,EACvC,SAAiB,EACjB,iBAAiB,EAAE,0BAA0B,EAC7C,SAAS,EAAE,kBAAkB,EAC7B,eAAe,EAAE,wBAAwB,EACzC,SAAiB,EACjB,cAAwB,EACxB,WAAW,EACX,SAAa,EACb,YAAY,EACZ,iBAA2B,EAC3B,YAAwB,EACxB,aAAqB,EACrB,aAAa,EACb,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EACF,OAAO,EACP,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,kBAAkB,EAAE,mBAAmB,EACvC,iBAAiB,EAAE,kBAAkB,EACrC,GAAG,SAAS,EACb,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAqmDvB;yBA5pDe,aAAa"}
|
|
@@ -33,6 +33,7 @@ import { colorVars, focusVars, sizeVars, spacingVars, radiusVars, durationVars,
|
|
|
33
33
|
import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "../Selector/utils.js";
|
|
34
34
|
import { useMultiCombobox } from "./hooks.js";
|
|
35
35
|
import { getInputARIA, isImeKeyEvent, mergeProps } from "../utils/index.js";
|
|
36
|
+
import { joinAriaIDs } from "../utils/inputAria.js";
|
|
36
37
|
import { devWarn, warnOnce } from "../utils/devWarning.js";
|
|
37
38
|
import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
38
39
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
@@ -407,6 +408,7 @@ export function MultiSelector({
|
|
|
407
408
|
onFocus,
|
|
408
409
|
onKeyDown: onKeyDownProp,
|
|
409
410
|
'aria-describedby': ariaDescribedByProp,
|
|
411
|
+
'aria-labelledby': ariaLabelledByProp,
|
|
410
412
|
...restProps
|
|
411
413
|
}) {
|
|
412
414
|
const inputGroup = useInputGroup();
|
|
@@ -442,6 +444,7 @@ export function MultiSelector({
|
|
|
442
444
|
const listboxId = useId();
|
|
443
445
|
const descriptionId = useId();
|
|
444
446
|
const statusMessageId = useId();
|
|
447
|
+
const fieldLabelId = useId();
|
|
445
448
|
const inputLabelId = useId();
|
|
446
449
|
const readOnlyDescriptionId = useId();
|
|
447
450
|
const searchId = useId();
|
|
@@ -488,6 +491,9 @@ export function MultiSelector({
|
|
|
488
491
|
ariaLabelledBy,
|
|
489
492
|
ariaDescribedBy
|
|
490
493
|
} = getInputARIA(inputLabelId, [description ? descriptionId : null, !inputGroup && effectiveStatusVariant !== 'tooltip' && status?.message ? statusMessageId : null, effectiveStatusVariant === 'tooltip' && status?.message ? statusTooltip.describedBy : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null, isEffectivelyReadOnly ? readOnlyDescriptionId : null], inputGroup);
|
|
494
|
+
// A caller aria-labelledby names the trigger together with the field's own
|
|
495
|
+
// label (the Field label standalone, the group and input labels in a group).
|
|
496
|
+
const triggerLabelledBy = ariaLabelledByProp != null ? joinAriaIDs(ariaLabelledBy ?? fieldLabelId, ariaLabelledByProp) : ariaLabelledBy;
|
|
491
497
|
|
|
492
498
|
// Flatten options for keyboard navigation
|
|
493
499
|
const selectableItems = useMemo(() => getSelectableOptions(options), [options]);
|
|
@@ -1415,7 +1421,7 @@ export function MultiSelector({
|
|
|
1415
1421
|
id: triggerId,
|
|
1416
1422
|
// A caller's description is kept alongside the field's own.
|
|
1417
1423
|
'aria-describedby': [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
|
|
1418
|
-
'aria-labelledby':
|
|
1424
|
+
'aria-labelledby': triggerLabelledBy,
|
|
1419
1425
|
'aria-required': isEffectivelyRequired ? 'true' : undefined,
|
|
1420
1426
|
'aria-invalid': status?.type === 'error' ? 'true' : undefined,
|
|
1421
1427
|
'aria-busy': isBusy || undefined,
|
|
@@ -1450,6 +1456,11 @@ export function MultiSelector({
|
|
|
1450
1456
|
// in this mode; the selector's own wiring below wins over them.
|
|
1451
1457
|
...rest,
|
|
1452
1458
|
'aria-describedby': ariaDescribedByProp,
|
|
1459
|
+
// Only a caller value is handed back, so a control that names itself
|
|
1460
|
+
// with its own aria-labelledby before spreading keeps it.
|
|
1461
|
+
...(ariaLabelledByProp != null ? {
|
|
1462
|
+
'aria-labelledby': ariaLabelledByProp
|
|
1463
|
+
} : null),
|
|
1453
1464
|
ref: mergeRefs(el => {
|
|
1454
1465
|
popover.triggerRef(el);
|
|
1455
1466
|
triggerRef.current = el;
|
|
@@ -1613,6 +1624,7 @@ export function MultiSelector({
|
|
|
1613
1624
|
isLabelHidden: isLabelHidden,
|
|
1614
1625
|
description: description,
|
|
1615
1626
|
inputID: triggerId,
|
|
1627
|
+
labelID: ariaLabelledByProp != null ? fieldLabelId : undefined,
|
|
1616
1628
|
descriptionID: description ? descriptionId : undefined,
|
|
1617
1629
|
isOptional: isOptional,
|
|
1618
1630
|
isRequired: isRequired,
|
|
@@ -246,7 +246,7 @@ export type NumberInputProps = NumberInputPropsNonClearable | NumberInputPropsCl
|
|
|
246
246
|
* <NumberInput label="Price" value={price} onChange={setPrice} min={0} step={0.01} />
|
|
247
247
|
* ```
|
|
248
248
|
*/
|
|
249
|
-
export declare function NumberInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled: isDisabledProp, isReadOnly, disabledMessage, startIcon, labelIcon, status, statusVariant, size: sizeProp, onChange, value, placeholder, labelTooltip, hasAutoFocus, htmlName, autoComplete, min, max, step, formatValue, isWheelEnabled, hasNumberSteppers, units, isIntegerOnly, onFocus, onBlur, hasClear, onEnter, onKeyDown, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, id: idProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: NumberInputProps): import("react").JSX.Element;
|
|
249
|
+
export declare function NumberInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled: isDisabledProp, isReadOnly, disabledMessage, startIcon, labelIcon, status, statusVariant, size: sizeProp, onChange, value, placeholder, labelTooltip, hasAutoFocus, htmlName, autoComplete, min, max, step, formatValue, isWheelEnabled, hasNumberSteppers, units, isIntegerOnly, onFocus, onBlur, hasClear, onEnter, onKeyDown, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-labelledby': ariaLabelledByProp, ...restProps }: NumberInputProps): import("react").JSX.Element;
|
|
250
250
|
export declare namespace NumberInput {
|
|
251
251
|
var displayName: string;
|
|
252
252
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiJ5D,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,UAAU,CAAC;AAMtD,YAAY,EACV,WAAW,IAAI,iBAAiB,EAChC,eAAe,IAAI,qBAAqB,GACzC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAM9C,UAAU,oBAAqB,SAAQ,IAAI,CACzC,mBAAmB,EACnB,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED;;;GAGG;AACH,KAAK,4BAA4B,GAAG,oBAAoB,GAAG;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG,oBAAoB,GAAG;IACtD;;;;;;OAMG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAC1B,4BAA4B,GAAG,yBAAyB,CAAC;AAsF3D;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAU,EAAE,cAAsB,EAClC,UAAkB,EAClB,eAAe,EACf,SAAS,EACT,SAAS,EACT,MAAM,EACN,aAA0B,EAC1B,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,GAAG,EACH,GAAG,EACH,IAAI,EACJ,WAAW,EACX,cAAqB,EACrB,iBAAyB,EACzB,KAAK,EACL,aAAqB,EACrB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,kBAAkB,EAAE,mBAAmB,EACvC,iBAAiB,EAAE,kBAAkB,EACrC,GAAG,SAAS,EACb,EAAE,gBAAgB,+BA8iBlB;yBA5lBe,WAAW"}
|