@astryxdesign/core 0.7.0-canary.fe57f54 → 0.7.0
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/CHANGELOG.md +186 -0
- package/dist/BottomSheet/BottomSheet.d.ts +5 -4
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts +1 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +1 -1
- package/dist/Calendar/styles.d.ts +6 -6
- package/dist/Chat/ChatComposerInput.d.ts +0 -11
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +0 -11
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.js +1 -1
- package/dist/CommandPalette/CommandPaletteList.d.ts +3 -2
- package/dist/CommandPalette/CommandPaletteList.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteList.js +3 -2
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +4 -1
- package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -1
- package/dist/DateTimeInput/TouchDateTimeField.js +29 -13
- package/dist/DropdownMenu/DropdownMenu.d.ts +11 -0
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +173 -11
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +13 -2
- package/dist/DropdownMenu/menuRegionsContext.d.ts +2 -0
- package/dist/DropdownMenu/menuRegionsContext.d.ts.map +1 -0
- package/dist/DropdownMenu/menuRegionsContext.js +17 -0
- package/dist/Field/inputStyles.stylex.d.ts +3 -3
- package/dist/Layout/container.stylex.d.ts +18 -20
- package/dist/Layout/container.stylex.d.ts.map +1 -1
- package/dist/Layout/container.stylex.js +15 -25
- package/dist/Layout/padding.stylex.d.ts +231 -231
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +15 -6
- package/dist/Markdown/plugins/protocol.d.ts.map +1 -1
- package/dist/Markdown/plugins/protocol.js +33 -8
- package/dist/NavItem/navItemStyles.stylex.d.ts +5 -5
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +21 -1
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +30 -15
- package/dist/Stack/stack.stylex.d.ts +22 -22
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +89 -14
- package/dist/Table/table.stylex.d.ts +6 -6
- package/dist/TimeInput/TouchTimeField.d.ts.map +1 -1
- package/dist/TimeInput/TouchTimeField.js +4 -1
- package/dist/Tokenizer/Tokenizer.d.ts +1 -12
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +1 -13
- package/dist/Typeahead/BaseTypeahead.d.ts +0 -11
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +1 -9
- package/dist/Typeahead/Typeahead.d.ts +1 -12
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +1 -13
- package/dist/astryx.css +17 -12
- package/dist/hooks/useFocusTrap.d.ts +8 -0
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +5 -1
- package/dist/hooks/useRenamedProp.d.ts +6 -6
- package/dist/hooks/useRenamedProp.js +6 -6
- package/dist/reset.a11y.chromium.spec.d.ts +2 -0
- package/dist/reset.a11y.chromium.spec.d.ts.map +1 -0
- package/dist/reset.a11y.chromium.spec.js +176 -0
- package/dist/theme/tokens.stylex.d.ts +30 -30
- package/dist/theme/tokens.stylex.d.ts.map +1 -1
- package/dist/theme/tokens.stylex.js +18 -15
- package/dist/theme/useTheme.d.ts +1 -1
- package/package.json +4 -4
- package/src/BottomSheet/BottomSheet.doc.mjs +4 -4
- package/src/BottomSheet/BottomSheet.tsx +5 -4
- package/src/BottomSheet/BottomSheetPanel.test.tsx +6 -9
- package/src/BottomSheet/BottomSheetPanel.tsx +2 -3
- package/src/Chat/ChatComposerInput.doc.mjs +3 -3
- package/src/Chat/ChatComposerInput.test.tsx +7 -55
- package/src/Chat/ChatComposerInput.tsx +0 -36
- package/src/Chat/useTriggerMenu.tsx +1 -4
- package/src/CommandPalette/CommandPalette.spec.md +2 -0
- package/src/CommandPalette/CommandPaletteList.spec.md +189 -0
- package/src/CommandPalette/CommandPaletteList.test.tsx +47 -0
- package/src/CommandPalette/CommandPaletteList.tsx +3 -2
- package/src/DateInput/TouchDateField.tsx +3 -1
- package/src/DateTimeInput/DateTimeInputTouch.test.tsx +60 -1
- package/src/DateTimeInput/TouchDateTimeField.tsx +31 -14
- package/src/DropdownMenu/DropdownMenu.doc.mjs +12 -0
- package/src/DropdownMenu/DropdownMenu.spec.md +65 -40
- package/src/DropdownMenu/DropdownMenu.test.tsx +457 -0
- package/src/DropdownMenu/DropdownMenu.tsx +278 -49
- package/src/DropdownMenu/DropdownMenuCheckboxItem.doc.mjs +6 -3
- package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs +2 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +11 -1
- package/src/DropdownMenu/__tests__/MenuHeaderFooter.a11y.chromium.spec.ts +195 -0
- package/src/DropdownMenu/menuRegionsContext.ts +17 -0
- package/src/Layout/container.stylex.ts +11 -21
- package/src/Lightbox/Lightbox.test.tsx +58 -0
- package/src/Lightbox/Lightbox.tsx +12 -6
- package/src/Markdown/plugins/protocol.ts +45 -12
- package/src/Markdown/plugins/sourceLines.test.tsx +121 -0
- package/src/PowerSearch/PowerSearch.tsx +28 -1
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +284 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +41 -13
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +33 -9
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +81 -18
- package/src/TimeInput/TouchTimeField.tsx +3 -1
- package/src/Tokenizer/Tokenizer.doc.mjs +0 -16
- package/src/Tokenizer/Tokenizer.test.tsx +12 -63
- package/src/Tokenizer/Tokenizer.tsx +1 -25
- package/src/Toolbar/Toolbar.test.tsx +29 -0
- package/src/Typeahead/BaseTypeahead.doc.mjs +0 -16
- package/src/Typeahead/BaseTypeahead.test.tsx +1 -1
- package/src/Typeahead/BaseTypeahead.tsx +1 -21
- package/src/Typeahead/Typeahead.doc.mjs +0 -7
- package/src/Typeahead/Typeahead.test.tsx +24 -42
- package/src/Typeahead/Typeahead.tsx +1 -25
- package/src/hooks/useFocusTrap.ts +5 -1
- package/src/hooks/useRenamedProp.ts +6 -6
- package/src/reset.a11y.chromium.spec.ts +178 -0
- package/src/reset.css +8 -8
- package/src/reset.test.ts +112 -0
- package/src/theme/__tests__/SpacingRootFontSize.a11y.chromium.spec.ts +198 -0
- package/src/theme/tokens.stylex.ts +18 -15
- package/src/theme/tokens.test.ts +1 -1
- package/src/theme/useTheme.test.tsx +4 -4
- package/src/theme/useTheme.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -36,7 +36,6 @@ import { colorVars, spacingVars, sizeVars, typeScaleVars } from "../theme/tokens
|
|
|
36
36
|
import { mergeProps } from "../utils/index.js";
|
|
37
37
|
import { themeProps } from "../utils/themeProps.js";
|
|
38
38
|
import { useTranslator } from "../i18n/index.js";
|
|
39
|
-
import { useRenamedProp } from "../hooks/useRenamedProp.js";
|
|
40
39
|
|
|
41
40
|
// Re-export status types for convenience
|
|
42
41
|
|
|
@@ -314,8 +313,7 @@ export function Tokenizer({
|
|
|
314
313
|
maxMenuItems,
|
|
315
314
|
menuWidth,
|
|
316
315
|
minQueryLength,
|
|
317
|
-
|
|
318
|
-
emptySearchText: emptySearchTextFromProps,
|
|
316
|
+
emptySearchText,
|
|
319
317
|
isDisabled = false,
|
|
320
318
|
htmlName,
|
|
321
319
|
disabledMessage,
|
|
@@ -372,16 +370,6 @@ export function Tokenizer({
|
|
|
372
370
|
focusTrigger: 'always',
|
|
373
371
|
isEnabled: showsDisabledMessage
|
|
374
372
|
});
|
|
375
|
-
|
|
376
|
-
// The replacement wins, the released name keeps working, and development
|
|
377
|
-
// says which one was read (`spec:AST-056` FR7, `spec:AST-017` FR28).
|
|
378
|
-
const emptySearchText = useRenamedProp({
|
|
379
|
-
component: 'Tokenizer',
|
|
380
|
-
deprecated: 'emptySearchResultsText',
|
|
381
|
-
deprecatedValue: emptySearchResultsText,
|
|
382
|
-
replacement: 'emptySearchText',
|
|
383
|
-
value: emptySearchTextFromProps
|
|
384
|
-
});
|
|
385
373
|
useImperativeHandle(handleRef, () => ({
|
|
386
374
|
focus() {
|
|
387
375
|
inputRef.current?.focus();
|
|
@@ -77,17 +77,6 @@ export interface BaseTypeaheadProps<T extends SearchableItem> extends Omit<BaseP
|
|
|
77
77
|
* @default 'No results found'
|
|
78
78
|
*/
|
|
79
79
|
emptySearchText?: ReactNode;
|
|
80
|
-
/**
|
|
81
|
-
* Text shown when no results found.
|
|
82
|
-
* @default 'No results found'
|
|
83
|
-
* @deprecated `DEP-0003`. Renamed to `emptySearchText`, which takes a
|
|
84
|
-
* `ReactNode` rather than a `string` — every existing value stays valid
|
|
85
|
-
* (`spec:AST-056` FR1, FR7). Still works exactly as released;
|
|
86
|
-
* `emptySearchText` wins when both are set. Removal is `CLN-0003`, in a
|
|
87
|
-
* later minor whose frozen manifest carries both ids (`spec:AST-017`
|
|
88
|
-
* FR31).
|
|
89
|
-
*/
|
|
90
|
-
emptySearchResultsText?: string;
|
|
91
80
|
/**
|
|
92
81
|
* Whether the input is disabled.
|
|
93
82
|
* @default false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA2BnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAW1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;;;;;OAaG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAEtD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAoKD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,EAs0BrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}
|
|
@@ -23,7 +23,6 @@ import { useTrailingKeyDown } from "./trailingKeyDown.js";
|
|
|
23
23
|
import { usePopover } from "../Popover/usePopover.js";
|
|
24
24
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
25
25
|
import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
|
|
26
|
-
import { useRenamedProp } from "../hooks/useRenamedProp.js";
|
|
27
26
|
import { useHighlightedOptionScroll } from "../hooks/useHighlightedOptionScroll.js";
|
|
28
27
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
29
28
|
import { isImeKeyEvent } from "../utils/ime.js";
|
|
@@ -182,7 +181,6 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
182
181
|
maxMenuItems = 10,
|
|
183
182
|
menuWidth,
|
|
184
183
|
minQueryLength = 1,
|
|
185
|
-
emptySearchResultsText: deprecatedEmptySearchResultsText,
|
|
186
184
|
emptySearchText: emptySearchTextFromProps,
|
|
187
185
|
isDisabled = false,
|
|
188
186
|
isFocusableDisabled = false,
|
|
@@ -215,13 +213,7 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
215
213
|
}) {
|
|
216
214
|
const t = useTranslator();
|
|
217
215
|
const placeholder = placeholderFromProps ?? t('@astryx.typeahead.searchPlaceholder');
|
|
218
|
-
const emptySearchText =
|
|
219
|
-
component: 'BaseTypeahead',
|
|
220
|
-
deprecated: 'emptySearchResultsText',
|
|
221
|
-
deprecatedValue: deprecatedEmptySearchResultsText,
|
|
222
|
-
replacement: 'emptySearchText',
|
|
223
|
-
value: emptySearchTextFromProps
|
|
224
|
-
}) ?? t('@astryx.typeahead.emptySearchResults');
|
|
216
|
+
const emptySearchText = emptySearchTextFromProps ?? t('@astryx.typeahead.emptySearchResults');
|
|
225
217
|
// The empty-state row carries the message visually, and the live region has
|
|
226
218
|
// to speak the same words. `emptySearchText` takes a ReactNode, so they are
|
|
227
219
|
// read off the rendered row after it renders rather than guessed from the
|
|
@@ -100,17 +100,6 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<FieldInpu
|
|
|
100
100
|
* @default 'No results found'
|
|
101
101
|
*/
|
|
102
102
|
emptySearchText?: ReactNode;
|
|
103
|
-
/**
|
|
104
|
-
* Text shown when no results found.
|
|
105
|
-
* @default 'No results found'
|
|
106
|
-
* @deprecated `DEP-0002`. Renamed to `emptySearchText`, which takes a
|
|
107
|
-
* `ReactNode` rather than a `string` — every existing value stays valid
|
|
108
|
-
* (`spec:AST-056` FR1, FR7). Still works exactly as released;
|
|
109
|
-
* `emptySearchText` wins when both are set. Removal is `CLN-0002`, in a
|
|
110
|
-
* later minor whose frozen manifest carries both ids (`spec:AST-017`
|
|
111
|
-
* FR31).
|
|
112
|
-
*/
|
|
113
|
-
emptySearchResultsText?: string;
|
|
114
103
|
/** Whether the input is disabled. @default false */
|
|
115
104
|
isDisabled?: boolean;
|
|
116
105
|
/**
|
|
@@ -153,7 +142,7 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<FieldInpu
|
|
|
153
142
|
/** Callback when dropdown opens/closes. */
|
|
154
143
|
onOpenChange?: (isOpen: boolean) => void;
|
|
155
144
|
}
|
|
156
|
-
export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, minQueryLength,
|
|
145
|
+
export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, minQueryLength, emptySearchText, isDisabled, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, onKeyDown, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, id: idProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: TypeaheadProps<T>): React.JSX.Element;
|
|
157
146
|
export declare namespace Typeahead {
|
|
158
147
|
var displayName: string;
|
|
159
148
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAatD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"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"}
|
|
@@ -38,7 +38,6 @@ import { useFieldInputStyling } from "../Field/fieldParts.js";
|
|
|
38
38
|
import { themeProps } from "../utils/themeProps.js";
|
|
39
39
|
import { useTranslator } from "../i18n/index.js";
|
|
40
40
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
41
|
-
import { useRenamedProp } from "../hooks/useRenamedProp.js";
|
|
42
41
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
43
42
|
// =============================================================================
|
|
44
43
|
// Styles
|
|
@@ -159,8 +158,7 @@ export function Typeahead({
|
|
|
159
158
|
hasEntriesOnFocus,
|
|
160
159
|
maxMenuItems,
|
|
161
160
|
minQueryLength,
|
|
162
|
-
|
|
163
|
-
emptySearchText: emptySearchTextFromProps,
|
|
161
|
+
emptySearchText,
|
|
164
162
|
isDisabled = false,
|
|
165
163
|
disabledMessage,
|
|
166
164
|
hasClear = true,
|
|
@@ -197,16 +195,6 @@ export function Typeahead({
|
|
|
197
195
|
const descriptionId = useId();
|
|
198
196
|
const statusMessageId = useId();
|
|
199
197
|
const inputGroup = useInputGroup();
|
|
200
|
-
|
|
201
|
-
// The replacement wins, the released name keeps working, and development
|
|
202
|
-
// says which one was read (`spec:AST-056` FR7, `spec:AST-017` FR28).
|
|
203
|
-
const emptySearchText = useRenamedProp({
|
|
204
|
-
component: 'Typeahead',
|
|
205
|
-
deprecated: 'emptySearchResultsText',
|
|
206
|
-
deprecatedValue: emptySearchResultsText,
|
|
207
|
-
replacement: 'emptySearchText',
|
|
208
|
-
value: emptySearchTextFromProps
|
|
209
|
-
});
|
|
210
198
|
const wrapperRef = useRef(null);
|
|
211
199
|
const inputRef = useRef(null);
|
|
212
200
|
const tokenRef = useRef(null);
|
package/dist/astryx.css
CHANGED
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
:root, .xrw1vgx{--radius-none:0px;--radius-inner:4px;--radius-element:8px;--radius-container:12px;--radius-page:28px;--radius-chat:28px;--radius-full:9999px;}
|
|
85
85
|
:root, .xua8qm3{--shadow-low:0px 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));--shadow-med:0px 1px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));--shadow-high:0px 2px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 8px 24px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));--shadow-inset-hover:inset 0px 0px 0px 2px light-dark(rgba(5, 54, 89, 0.15), rgba(223, 226, 229, 0.2));--shadow-inset-selected:inset 0px 0px 0px 2px rgba(1, 113, 227, 0.5);--shadow-inset-success:inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3);--shadow-inset-warning:inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3);--shadow-inset-error:inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3);}
|
|
86
86
|
:root, .xkgjyic{--size-element-sm:28px;--size-element-md:32px;--size-element-lg:36px;}
|
|
87
|
-
:root, .x1kvdh9l{--spacing-0:
|
|
87
|
+
:root, .x1kvdh9l{--spacing-0:0rem;--spacing-0-5:0.125rem;--spacing-1:0.25rem;--spacing-1-5:0.375rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-7:1.75rem;--spacing-8:2rem;--spacing-9:2.25rem;--spacing-10:2.5rem;--spacing-11:2.75rem;--spacing-12:3rem;}
|
|
88
88
|
:root, .x1etlgq0{--text-heading-1-size:var(--font-size-2xl);--text-heading-1-weight:var(--font-weight-semibold);--text-heading-1-leading:1.3333;--text-heading-2-size:var(--font-size-xl);--text-heading-2-weight:var(--font-weight-semibold);--text-heading-2-leading:1.4;--text-heading-3-size:var(--font-size-lg);--text-heading-3-weight:var(--font-weight-semibold);--text-heading-3-leading:1.4118;--text-heading-4-size:var(--font-size-base);--text-heading-4-weight:var(--font-weight-semibold);--text-heading-4-leading:1.4286;--text-heading-5-size:var(--font-size-sm);--text-heading-5-weight:var(--font-weight-semibold);--text-heading-5-leading:1.6667;--text-heading-6-size:var(--font-size-xs);--text-heading-6-weight:var(--font-weight-semibold);--text-heading-6-leading:1.6;--text-body-size:var(--font-size-base);--text-body-weight:var(--font-weight-normal);--text-body-leading:1.4286;--text-large-size:var(--font-size-lg);--text-large-weight:var(--font-weight-semibold);--text-large-leading:1.4118;--text-label-size:var(--font-size-base);--text-label-weight:var(--font-weight-medium);--text-label-leading:1.4286;--text-code-size:var(--font-size-base);--text-code-weight:var(--font-weight-normal);--text-code-leading:1.4286;--text-supporting-size:var(--font-size-sm);--text-supporting-weight:var(--font-weight-normal);--text-supporting-leading:1.6667;--text-display-1-size:var(--font-size-5xl);--text-display-1-weight:var(--font-weight-normal);--text-display-1-leading:1.2381;--text-display-2-size:var(--font-size-4xl);--text-display-2-weight:var(--font-weight-normal);--text-display-2-leading:1.2571;--text-display-3-size:var(--font-size-3xl);--text-display-3-weight:var(--font-weight-normal);--text-display-3-leading:1.2414;}
|
|
89
89
|
.xlz5hwt{--_avatar-group-overlap:var(--x---_avatar-group-overlap)}
|
|
90
90
|
.xdarwi0{--_avatar-radius:var(--radius-element)}
|
|
@@ -174,7 +174,7 @@
|
|
|
174
174
|
.x1mtvhk1{--color-syntax-background:transparent}
|
|
175
175
|
.x18nyedi{--container-max-height:var(--x---container-max-height)}
|
|
176
176
|
.xax9j7h{--container-padding-block-end:0px}
|
|
177
|
-
.
|
|
177
|
+
.x1of45zw{--container-padding-block-end:var(--astryx-bottom-sheet-padding-block-end,var(--astryx-bottom-sheet-padding,var(--spacing-4)))}
|
|
178
178
|
.x1omyuck{--container-padding-block-end:var(--astryx-card-padding-block-end,var(--astryx-card-padding,var(--spacing-4)))}
|
|
179
179
|
.x1gvthzm{--container-padding-block-end:var(--astryx-dialog-padding-block-end,var(--astryx-dialog-padding,var(--spacing-4)))}
|
|
180
180
|
.x1g5mqay{--container-padding-block-end:var(--astryx-drawer-padding-block-end,var(--astryx-drawer-padding,var(--spacing-4)))}
|
|
@@ -197,7 +197,7 @@
|
|
|
197
197
|
.x8lgq76{--container-padding-block-end:var(--spacing-8)}
|
|
198
198
|
.x1f7f9rt{--container-padding-block-end:var(--spacing-9)}
|
|
199
199
|
.x1047aw6{--container-padding-block-start:0px}
|
|
200
|
-
.
|
|
200
|
+
.x8qn3ha{--container-padding-block-start:var(--astryx-bottom-sheet-padding-block-start,var(--astryx-bottom-sheet-padding,var(--spacing-4)))}
|
|
201
201
|
.x1rqz8me{--container-padding-block-start:var(--astryx-card-padding-block-start,var(--astryx-card-padding,var(--spacing-4)))}
|
|
202
202
|
.x1g2kccc{--container-padding-block-start:var(--astryx-dialog-padding-block-start,var(--astryx-dialog-padding,var(--spacing-4)))}
|
|
203
203
|
.x18184ib{--container-padding-block-start:var(--astryx-drawer-padding-block-start,var(--astryx-drawer-padding,var(--spacing-4)))}
|
|
@@ -220,7 +220,7 @@
|
|
|
220
220
|
.xfv60at{--container-padding-block-start:var(--spacing-8)}
|
|
221
221
|
.x14fzdu7{--container-padding-block-start:var(--spacing-9)}
|
|
222
222
|
.xjsfl84{--container-padding-inline-end:0px}
|
|
223
|
-
.
|
|
223
|
+
.x1ui7op6{--container-padding-inline-end:var(--astryx-bottom-sheet-padding-inline-end,var(--astryx-bottom-sheet-padding-inline,var(--astryx-bottom-sheet-padding,var(--spacing-4))))}
|
|
224
224
|
.x1ihxwbr{--container-padding-inline-end:var(--astryx-card-padding-inline-end,var(--astryx-card-padding-inline,var(--astryx-card-padding,var(--spacing-4))))}
|
|
225
225
|
.x11h1f2o{--container-padding-inline-end:var(--astryx-dialog-padding-inline-end,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,var(--spacing-4))))}
|
|
226
226
|
.xlsqznw{--container-padding-inline-end:var(--astryx-drawer-padding-inline-end,var(--astryx-drawer-padding-inline,var(--astryx-drawer-padding,var(--spacing-4))))}
|
|
@@ -243,7 +243,7 @@
|
|
|
243
243
|
.x1b9k1pi{--container-padding-inline-end:var(--spacing-8)}
|
|
244
244
|
.x19w02kr{--container-padding-inline-end:var(--spacing-9)}
|
|
245
245
|
.xrhngw9{--container-padding-inline-start:0px}
|
|
246
|
-
.
|
|
246
|
+
.xv7mus7{--container-padding-inline-start:var(--astryx-bottom-sheet-padding-inline-start,var(--astryx-bottom-sheet-padding-inline,var(--astryx-bottom-sheet-padding,var(--spacing-4))))}
|
|
247
247
|
.xjmlhfd{--container-padding-inline-start:var(--astryx-card-padding-inline-start,var(--astryx-card-padding-inline,var(--astryx-card-padding,var(--spacing-4))))}
|
|
248
248
|
.x1tewnwq{--container-padding-inline-start:var(--astryx-dialog-padding-inline-start,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,var(--spacing-4))))}
|
|
249
249
|
.x1mndvw9{--container-padding-inline-start:var(--astryx-drawer-padding-inline-start,var(--astryx-drawer-padding-inline,var(--astryx-drawer-padding,var(--spacing-4))))}
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
.x15lplax{--layout-content-width:100cqi}
|
|
272
272
|
.x4906uf{--layout-content-width:var(--x---layout-content-width)}
|
|
273
273
|
.x1qfll2g{--layout-padding-inner-x:initial}
|
|
274
|
-
.
|
|
274
|
+
.xp9icaw{--layout-padding-inner-x:var(--astryx-bottom-sheet-padding-inline-start,var(--astryx-bottom-sheet-padding-inline,var(--astryx-bottom-sheet-padding,var(--spacing-4))))}
|
|
275
275
|
.x4poyjn{--layout-padding-inner-x:var(--astryx-card-padding-inline-start,var(--astryx-card-padding-inline,var(--astryx-card-padding,var(--spacing-4))))}
|
|
276
276
|
.x2so38{--layout-padding-inner-x:var(--astryx-dialog-padding-inline-start,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,var(--spacing-4))))}
|
|
277
277
|
.x1qbr0dm{--layout-padding-inner-x:var(--astryx-drawer-padding-inline-start,var(--astryx-drawer-padding-inline,var(--astryx-drawer-padding,var(--spacing-4))))}
|
|
@@ -292,7 +292,7 @@
|
|
|
292
292
|
.xn7c84u{--layout-padding-inner-x:var(--spacing-8)}
|
|
293
293
|
.xeqkbsz{--layout-padding-inner-x:var(--spacing-9)}
|
|
294
294
|
.xyvxpqs{--layout-padding-inner-y:initial}
|
|
295
|
-
.
|
|
295
|
+
.x10u54dy{--layout-padding-inner-y:var(--astryx-bottom-sheet-padding-block-start,var(--astryx-bottom-sheet-padding,var(--spacing-4)))}
|
|
296
296
|
.x1u1kw4e{--layout-padding-inner-y:var(--astryx-card-padding-block-start,var(--astryx-card-padding,var(--spacing-4)))}
|
|
297
297
|
.xinu7xd{--layout-padding-inner-y:var(--astryx-dialog-padding-block-start,var(--astryx-dialog-padding,var(--spacing-4)))}
|
|
298
298
|
.x1ek71mq{--layout-padding-inner-y:var(--astryx-drawer-padding-block-start,var(--astryx-drawer-padding,var(--spacing-4)))}
|
|
@@ -313,7 +313,7 @@
|
|
|
313
313
|
.xm2cs6f{--layout-padding-inner-y:var(--spacing-8)}
|
|
314
314
|
.x1vsq92b{--layout-padding-inner-y:var(--spacing-9)}
|
|
315
315
|
.xdt8ak2{--layout-padding-outer-x:initial}
|
|
316
|
-
.
|
|
316
|
+
.x11ixy8q{--layout-padding-outer-x:var(--astryx-bottom-sheet-padding-inline-start,var(--astryx-bottom-sheet-padding-inline,var(--astryx-bottom-sheet-padding,var(--spacing-4))))}
|
|
317
317
|
.x14rzhog{--layout-padding-outer-x:var(--astryx-card-padding-inline-start,var(--astryx-card-padding-inline,var(--astryx-card-padding,var(--spacing-4))))}
|
|
318
318
|
.x1hsjncj{--layout-padding-outer-x:var(--astryx-dialog-padding-inline-start,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,var(--spacing-4))))}
|
|
319
319
|
.x18e7m0u{--layout-padding-outer-x:var(--astryx-drawer-padding-inline-start,var(--astryx-drawer-padding-inline,var(--astryx-drawer-padding,var(--spacing-4))))}
|
|
@@ -334,7 +334,7 @@
|
|
|
334
334
|
.x1t3kfz{--layout-padding-outer-x:var(--spacing-8)}
|
|
335
335
|
.xzr4qsh{--layout-padding-outer-x:var(--spacing-9)}
|
|
336
336
|
.x1rs4lu4{--layout-padding-outer-y:initial}
|
|
337
|
-
.
|
|
337
|
+
.x1iwhsh0{--layout-padding-outer-y:var(--astryx-bottom-sheet-padding-block-start,var(--astryx-bottom-sheet-padding,var(--spacing-4)))}
|
|
338
338
|
.xjej9fs{--layout-padding-outer-y:var(--astryx-card-padding-block-start,var(--astryx-card-padding,var(--spacing-4)))}
|
|
339
339
|
.x1pui4bz{--layout-padding-outer-y:var(--astryx-dialog-padding-block-start,var(--astryx-dialog-padding,var(--spacing-4)))}
|
|
340
340
|
.xc006j{--layout-padding-outer-y:var(--astryx-drawer-padding-block-start,var(--astryx-drawer-padding,var(--spacing-4)))}
|
|
@@ -1117,6 +1117,9 @@
|
|
|
1117
1117
|
.xojxgvx:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--container-padding-inline-start,0px))}
|
|
1118
1118
|
.x1wim8z0:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--layout-padding-inner-x,var(--spacing-4)))}
|
|
1119
1119
|
.x1s1akpx:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--spacing-2))}
|
|
1120
|
+
.x6n8pbd:not(#\#):not(#\#):not(#\#){margin-inline-start:calc((40px - min(var(--spacing-6),40px)) / 2 - var(--spacing-2))}
|
|
1121
|
+
.xs69w1r:not(#\#):not(#\#):not(#\#){margin-inline-start:calc((40px - min(var(--spacing-6),40px)) / 2 - var(--spacing-3))}
|
|
1122
|
+
.x1idpjx9:not(#\#):not(#\#):not(#\#){margin-inline-start:calc((40px - min(var(--spacing-6),40px)) / 2 - var(--spacing-4))}
|
|
1120
1123
|
.x1xrm450:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(var(--spacing-2) - var(--spacing-1) + 1px)}
|
|
1121
1124
|
.x13hpdyo:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--_avatar-group-overlap)}
|
|
1122
1125
|
.x12vn87o:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--_tree-indent,0px)}
|
|
@@ -1195,12 +1198,12 @@
|
|
|
1195
1198
|
.x1c1uobl:not(#\#):not(#\#):not(#\#){padding-inline-start:0}
|
|
1196
1199
|
.x12t6xex:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(-1 * var(--_avatar-group-overlap))}
|
|
1197
1200
|
.x1f43n9v:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(16px + var(--spacing-1-5))}
|
|
1201
|
+
.x8oor0o:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(40px + var(--spacing-2))}
|
|
1202
|
+
.xir64ve:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(40px + var(--spacing-3))}
|
|
1203
|
+
.x19picz4:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(40px + var(--spacing-4))}
|
|
1198
1204
|
.xwb75os:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--_tab-strip-bleed,0px) + max(var(--container-padding-inline-start,0px) - var(--spacing-3),0px))}
|
|
1199
1205
|
.x1b6te9z:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--_textarea-inline-padding) + var(--spacing-6))}
|
|
1200
1206
|
.xs19ii7:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--container-padding-inline-start) - var(--border-width))}
|
|
1201
|
-
.xbupoan:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--spacing-10) + var(--spacing-2))}
|
|
1202
|
-
.x1vo382s:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--spacing-10) + var(--spacing-3))}
|
|
1203
|
-
.x193i2cf:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--spacing-10) + var(--spacing-4))}
|
|
1204
1207
|
.x2a0j69:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--spacing-2) - var(--spacing-1) + 1px)}
|
|
1205
1208
|
.xhlv5e7:not(#\#):not(#\#):not(#\#){padding-inline-start:max(var(--container-padding-inline-start,0px),calc((100cqi - var(--layout-alignment-width)) / 2 + var(--container-padding-inline-start,0px)))}
|
|
1206
1209
|
.xxjme2g:not(#\#):not(#\#):not(#\#){padding-inline-start:max(var(--container-padding-inline-start,0px),calc(100cqi - var(--layout-alignment-width) + var(--container-padding-inline-start,0px)))}
|
|
@@ -1702,6 +1705,7 @@
|
|
|
1702
1705
|
.x14o5nre:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--text-supporting-size) * var(--text-supporting-leading))}
|
|
1703
1706
|
.xw1wawg:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(44px - 8px)}
|
|
1704
1707
|
.xg7h5cd:not(#\#):not(#\#):not(#\#):not(#\#){height:fit-content}
|
|
1708
|
+
.xsbjeu0:not(#\#):not(#\#):not(#\#):not(#\#){height:min(var(--spacing-6),40px)}
|
|
1705
1709
|
.xhovv34:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_progressbar-mark-height,8px)}
|
|
1706
1710
|
.x7yyq19:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_spinner-box-size)}
|
|
1707
1711
|
.xsyqizj:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--border-width)}
|
|
@@ -1961,6 +1965,7 @@
|
|
|
1961
1965
|
.xezivpi:not(#\#):not(#\#):not(#\#):not(#\#){width:max-content}
|
|
1962
1966
|
.x1qwjaml:not(#\#):not(#\#):not(#\#):not(#\#){width:max(0px,calc(-1 * calc(var(--_item-swipe-travel,0px) * var(--_item-swipe-dir,1))))}
|
|
1963
1967
|
.x96shys:not(#\#):not(#\#):not(#\#):not(#\#){width:max(0px,calc(var(--_item-swipe-travel,0px) * var(--_item-swipe-dir,1)))}
|
|
1968
|
+
.x17cz0of:not(#\#):not(#\#):not(#\#):not(#\#){width:min(var(--spacing-6),40px)}
|
|
1964
1969
|
.x63cpjl:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_progressbar-mark-width,2px)}
|
|
1965
1970
|
.x6v0vjy:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_spinner-box-size)}
|
|
1966
1971
|
.xjk4fl7:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--border-width)}
|
|
@@ -16,6 +16,14 @@ export declare function hasActiveFocusTrapEscape(): boolean;
|
|
|
16
16
|
* second dismissal owner.
|
|
17
17
|
*/
|
|
18
18
|
export declare function useFocusTrapEscapeCompatibilitySignal(isActive: boolean): void;
|
|
19
|
+
/**
|
|
20
|
+
* Get all focusable elements within a container.
|
|
21
|
+
*
|
|
22
|
+
* Exported for menus that place their own Tab stops inside a trapped layer
|
|
23
|
+
* (DropdownMenu's header and footer), so they judge reachability exactly as
|
|
24
|
+
* the trap does. Not re-exported from the package's `hooks` entry.
|
|
25
|
+
*/
|
|
26
|
+
export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
|
|
19
27
|
/**
|
|
20
28
|
* Configuration for focus trap behavior
|
|
21
29
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AA8BA;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,IAAI,OAAO,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,qCAAqC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAU7E;
|
|
1
|
+
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AA8BA;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,IAAI,OAAO,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,qCAAqC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAU7E;AA+BD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAI1E;AA0CD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrE;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAExC;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC9D,OAAO,EAAE,mBAAmB,GAC3B,kBAAkB,CAAC,CAAC,CAAC,CAkQvB"}
|
|
@@ -89,8 +89,12 @@ function isVisiblyFocusable(el) {
|
|
|
89
89
|
|
|
90
90
|
/**
|
|
91
91
|
* Get all focusable elements within a container.
|
|
92
|
+
*
|
|
93
|
+
* Exported for menus that place their own Tab stops inside a trapped layer
|
|
94
|
+
* (DropdownMenu's header and footer), so they judge reachability exactly as
|
|
95
|
+
* the trap does. Not re-exported from the package's `hooks` entry.
|
|
92
96
|
*/
|
|
93
|
-
function getFocusableElements(container) {
|
|
97
|
+
export function getFocusableElements(container) {
|
|
94
98
|
return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(isVisiblyFocusable);
|
|
95
99
|
}
|
|
96
100
|
|
|
@@ -26,12 +26,12 @@ export interface RenamedPropOptions<T> {
|
|
|
26
26
|
*
|
|
27
27
|
* @example
|
|
28
28
|
* ```
|
|
29
|
-
* const
|
|
30
|
-
* component: '
|
|
31
|
-
* deprecated: '
|
|
32
|
-
* deprecatedValue:
|
|
33
|
-
* replacement: '
|
|
34
|
-
* value:
|
|
29
|
+
* const label = useRenamedProp({
|
|
30
|
+
* component: 'Example',
|
|
31
|
+
* deprecated: 'oldLabel',
|
|
32
|
+
* deprecatedValue: oldLabel,
|
|
33
|
+
* replacement: 'label',
|
|
34
|
+
* value: labelFromProps,
|
|
35
35
|
* });
|
|
36
36
|
* ```
|
|
37
37
|
*/
|
|
@@ -41,12 +41,12 @@ import { useDevWarning } from "./useDevWarning.js";
|
|
|
41
41
|
*
|
|
42
42
|
* @example
|
|
43
43
|
* ```
|
|
44
|
-
* const
|
|
45
|
-
* component: '
|
|
46
|
-
* deprecated: '
|
|
47
|
-
* deprecatedValue:
|
|
48
|
-
* replacement: '
|
|
49
|
-
* value:
|
|
44
|
+
* const label = useRenamedProp({
|
|
45
|
+
* component: 'Example',
|
|
46
|
+
* deprecated: 'oldLabel',
|
|
47
|
+
* deprecatedValue: oldLabel,
|
|
48
|
+
* replacement: 'label',
|
|
49
|
+
* value: labelFromProps,
|
|
50
50
|
* });
|
|
51
51
|
* ```
|
|
52
52
|
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reset.a11y.chromium.spec.d.ts","sourceRoot":"","sources":["../src/reset.a11y.chromium.spec.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file reset.a11y.chromium.spec.ts
|
|
5
|
+
* @input packages/core/src/reset.css, alone on a blank Chromium page
|
|
6
|
+
* @output Browser evidence that the reset reaches ::before, ::after,
|
|
7
|
+
* ::placeholder and the search field's cancel button
|
|
8
|
+
* @position reset.css integration proof. A pseudo-element inside :where() is
|
|
9
|
+
* invalid, and the forgiving list drops it without an error, so only a
|
|
10
|
+
* shipping engine shows which of the reset's rules still match.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import * as fs from 'node:fs';
|
|
14
|
+
import { fileURLToPath } from 'node:url';
|
|
15
|
+
import { expect, test } from '@playwright/test';
|
|
16
|
+
const RESET_CSS = fs.readFileSync(fileURLToPath(new URL('./reset.css', import.meta.url)), 'utf8');
|
|
17
|
+
|
|
18
|
+
// No Astryx CSS is loaded, so --color-text-secondary is undefined and a
|
|
19
|
+
// placeholder takes the reset's fallback: the token's own light-dark() default.
|
|
20
|
+
const PLACEHOLDER_FALLBACK = {
|
|
21
|
+
light: 'rgb(78, 96, 111)',
|
|
22
|
+
dark: 'rgb(170, 175, 181)'
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
/** Every style rule's selector, in source order, comments stripped. */
|
|
26
|
+
function sourceSelectors(css) {
|
|
27
|
+
const stripped = css.replace(/\/\*[\s\S]*?\*\//g, '');
|
|
28
|
+
return [...stripped.matchAll(/([^{}]+)\{[^{}]*\}/g)].map(([, selector]) => selector.trim());
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/** Whitespace and quote style are the only differences serialization adds. */
|
|
32
|
+
function normalize(selector) {
|
|
33
|
+
return selector.replace(/\s+/g, '').replace(/'/g, '"');
|
|
34
|
+
}
|
|
35
|
+
async function loadReset(page) {
|
|
36
|
+
await page.setContent(`
|
|
37
|
+
<div id="probe"></div>
|
|
38
|
+
<input id="name" placeholder="Name">
|
|
39
|
+
<textarea id="notes" placeholder="Notes"></textarea>
|
|
40
|
+
<input id="query" type="search" value="query" style="width: 200px">
|
|
41
|
+
`);
|
|
42
|
+
await page.addStyleTag({
|
|
43
|
+
content: RESET_CSS
|
|
44
|
+
});
|
|
45
|
+
// Width 100 plus 10px padding a side: 100 wide under border-box, 120
|
|
46
|
+
// under content-box. The ::before border sets only its width.
|
|
47
|
+
await page.addStyleTag({
|
|
48
|
+
content: `
|
|
49
|
+
#probe { display: inline-block; }
|
|
50
|
+
#probe::before, #probe::after {
|
|
51
|
+
content: '';
|
|
52
|
+
display: block;
|
|
53
|
+
width: 100px;
|
|
54
|
+
height: 20px;
|
|
55
|
+
padding: 10px;
|
|
56
|
+
}
|
|
57
|
+
#probe::before { border-width: 5px; }
|
|
58
|
+
`
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
test.beforeEach(async ({
|
|
62
|
+
page
|
|
63
|
+
}) => {
|
|
64
|
+
await loadReset(page);
|
|
65
|
+
});
|
|
66
|
+
test('Chromium keeps every selector the reset writes', async ({
|
|
67
|
+
page
|
|
68
|
+
}) => {
|
|
69
|
+
// A forgiving list drops an invalid entry instead of the whole rule, so a
|
|
70
|
+
// dropped pseudo-element shows up as a shorter serialized selector.
|
|
71
|
+
const parsed = await page.evaluate(() => {
|
|
72
|
+
const layer = document.styleSheets[0].cssRules[0];
|
|
73
|
+
return [...layer.cssRules].map(rule => rule.selectorText);
|
|
74
|
+
});
|
|
75
|
+
expect(parsed.map(normalize)).toEqual(sourceSelectors(RESET_CSS).map(normalize));
|
|
76
|
+
});
|
|
77
|
+
test('::before and ::after are border-box and take the border reset', async ({
|
|
78
|
+
page
|
|
79
|
+
}) => {
|
|
80
|
+
const measured = await page.evaluate(() => {
|
|
81
|
+
const probe = document.getElementById('probe');
|
|
82
|
+
if (!probe) {
|
|
83
|
+
throw new Error('missing probe');
|
|
84
|
+
}
|
|
85
|
+
const before = getComputedStyle(probe, '::before');
|
|
86
|
+
const after = getComputedStyle(probe, '::after');
|
|
87
|
+
return {
|
|
88
|
+
beforeBoxSizing: before.boxSizing,
|
|
89
|
+
afterBoxSizing: after.boxSizing,
|
|
90
|
+
beforeBorderStyle: before.borderTopStyle,
|
|
91
|
+
beforeBorderWidth: before.borderTopWidth,
|
|
92
|
+
afterBorderWidth: after.borderTopWidth,
|
|
93
|
+
width: probe.getBoundingClientRect().width
|
|
94
|
+
};
|
|
95
|
+
});
|
|
96
|
+
expect(measured).toEqual({
|
|
97
|
+
beforeBoxSizing: 'border-box',
|
|
98
|
+
afterBoxSizing: 'border-box',
|
|
99
|
+
beforeBorderStyle: 'solid',
|
|
100
|
+
beforeBorderWidth: '5px',
|
|
101
|
+
afterBorderWidth: '0px',
|
|
102
|
+
width: 100
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
test('input and textarea placeholders take the reset color in both schemes', async ({
|
|
106
|
+
page
|
|
107
|
+
}) => {
|
|
108
|
+
const readPlaceholders = async () => page.evaluate(() => ['name', 'notes'].map(id => {
|
|
109
|
+
const field = document.getElementById(id);
|
|
110
|
+
if (!field) {
|
|
111
|
+
throw new Error(`missing #${id}`);
|
|
112
|
+
}
|
|
113
|
+
const placeholder = getComputedStyle(field, '::placeholder');
|
|
114
|
+
return {
|
|
115
|
+
color: placeholder.color,
|
|
116
|
+
opacity: placeholder.opacity
|
|
117
|
+
};
|
|
118
|
+
}));
|
|
119
|
+
for (const scheme of ['light', 'dark']) {
|
|
120
|
+
await page.emulateMedia({
|
|
121
|
+
colorScheme: scheme
|
|
122
|
+
});
|
|
123
|
+
const color = PLACEHOLDER_FALLBACK[scheme];
|
|
124
|
+
expect(await readPlaceholders(), scheme).toEqual([{
|
|
125
|
+
color,
|
|
126
|
+
opacity: '1'
|
|
127
|
+
}, {
|
|
128
|
+
color,
|
|
129
|
+
opacity: '1'
|
|
130
|
+
}]);
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
test('a search field has no cancel button to clear it', async ({
|
|
134
|
+
page
|
|
135
|
+
}) => {
|
|
136
|
+
// Chromium draws the cancel button at the inline end of a focused search
|
|
137
|
+
// field that has a value, and a click on it empties the field.
|
|
138
|
+
const query = page.locator('#query');
|
|
139
|
+
await query.focus();
|
|
140
|
+
const box = await query.boundingBox();
|
|
141
|
+
if (!box) {
|
|
142
|
+
throw new Error('missing search field box');
|
|
143
|
+
}
|
|
144
|
+
await page.mouse.click(box.x + box.width - 8, box.y + box.height / 2);
|
|
145
|
+
await expect(query).toHaveValue('query');
|
|
146
|
+
});
|
|
147
|
+
test('a later layer and an unlayered rule still override the reset', async ({
|
|
148
|
+
page
|
|
149
|
+
}) => {
|
|
150
|
+
// Same 0,0,1 specificity as the reset's own selectors, so only the cascade
|
|
151
|
+
// layer decides.
|
|
152
|
+
await page.addStyleTag({
|
|
153
|
+
content: `
|
|
154
|
+
@layer reset, astryx-base;
|
|
155
|
+
@layer astryx-base {
|
|
156
|
+
:where(textarea)::placeholder { color: rgb(0, 128, 0); }
|
|
157
|
+
}
|
|
158
|
+
:where(#probe)::after { box-sizing: content-box; }
|
|
159
|
+
`
|
|
160
|
+
});
|
|
161
|
+
const overridden = await page.evaluate(() => {
|
|
162
|
+
const probe = document.getElementById('probe');
|
|
163
|
+
const notes = document.getElementById('notes');
|
|
164
|
+
if (!probe || !notes) {
|
|
165
|
+
throw new Error('missing probe or textarea');
|
|
166
|
+
}
|
|
167
|
+
return {
|
|
168
|
+
placeholderColor: getComputedStyle(notes, '::placeholder').color,
|
|
169
|
+
afterBoxSizing: getComputedStyle(probe, '::after').boxSizing
|
|
170
|
+
};
|
|
171
|
+
});
|
|
172
|
+
expect(overridden).toEqual({
|
|
173
|
+
placeholderColor: 'rgb(0, 128, 0)',
|
|
174
|
+
afterBoxSizing: 'content-box'
|
|
175
|
+
});
|
|
176
|
+
});
|