@astryxdesign/core 0.6.1 → 0.6.2-canary.176dfa6
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 +33 -0
- package/dist/BottomSheet/BottomSheet.d.ts +1 -1
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +3 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts +7 -5
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +56 -19
- package/dist/DateRangeInput/DateRangeInput.d.ts +3 -0
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +16 -9
- package/dist/Dialog/DialogHeader.d.ts +1 -1
- package/dist/Dialog/DialogHeader.d.ts.map +1 -1
- package/dist/Dialog/DialogHeader.js +10 -7
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +9 -3
- package/dist/Markdown/Markdown.d.ts +10 -2
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +58 -14
- package/dist/Markdown/index.d.ts +1 -1
- package/dist/Markdown/index.d.ts.map +1 -1
- package/dist/Markdown/parser.d.ts +126 -12
- package/dist/Markdown/parser.d.ts.map +1 -1
- package/dist/Markdown/parser.js +369 -34
- package/dist/Markdown/utils.d.ts +1 -1
- package/dist/Markdown/utils.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +46 -30
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +5 -2
- package/dist/Spinner/Spinner.d.ts +1 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +23 -15
- package/dist/ToggleButton/ToggleButton.d.ts +2 -1
- package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButton.js +7 -1
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +15 -6
- package/dist/astryx.css +5 -2
- package/dist/hooks/scrollKeyboardDelegation.d.ts +3 -0
- package/dist/hooks/scrollKeyboardDelegation.d.ts.map +1 -0
- package/dist/hooks/scrollKeyboardDelegation.js +146 -0
- package/dist/hooks/useScrollableArea.d.ts +6 -2
- package/dist/hooks/useScrollableArea.d.ts.map +1 -1
- package/dist/hooks/useScrollableArea.js +17 -5
- package/locales/en.json +16 -0
- package/locales/pseudo.json +12 -0
- package/package.json +7 -5
- package/scripts/agent-doc-state.mjs +1 -1
- package/src/BottomSheet/BottomSheet.doc.mjs +8 -1
- package/src/BottomSheet/BottomSheet.spec.md +46 -20
- package/src/BottomSheet/BottomSheet.test.tsx +6 -3
- package/src/BottomSheet/BottomSheet.tsx +3 -1
- package/src/BottomSheet/BottomSheetKeyboard.test.tsx +195 -0
- package/src/BottomSheet/BottomSheetPanel.test.tsx +11 -1
- package/src/BottomSheet/BottomSheetPanel.tsx +49 -16
- package/src/BottomSheet/__tests__/BottomSheetKeyboard.a11y.browser.spec.ts +344 -0
- package/src/DateRangeInput/DateRangeInput.doc.mjs +35 -7
- package/src/DateRangeInput/DateRangeInput.spec.md +203 -0
- package/src/DateRangeInput/DateRangeInput.test.tsx +100 -4
- package/src/DateRangeInput/DateRangeInput.tsx +29 -20
- package/src/Dialog/Dialog.doc.mjs +3 -0
- package/src/Dialog/Dialog.spec.md +1 -1
- package/src/Dialog/DialogHeader.doc.mjs +38 -0
- package/src/Dialog/DialogHeader.test.tsx +49 -0
- package/src/Dialog/DialogHeader.tsx +23 -4
- package/src/Dialog/modules/DialogHeader.spec.md +152 -0
- package/src/FileInput/FileInput.doc.mjs +2 -0
- package/src/FileInput/FileInput.spec.md +199 -0
- package/src/FileInput/FileInput.test.tsx +14 -0
- package/src/FileInput/FileInput.tsx +13 -3
- package/src/Markdown/Markdown.doc.mjs +167 -42
- package/src/Markdown/Markdown.public.test.ts +157 -0
- package/src/Markdown/Markdown.spec.md +149 -70
- package/src/Markdown/Markdown.test.tsx +107 -3
- package/src/Markdown/Markdown.tsx +116 -35
- package/src/Markdown/incremental.test.ts +175 -7
- package/src/Markdown/index.ts +6 -0
- package/src/Markdown/parser.perf.test.ts +3 -1
- package/src/Markdown/parser.test.ts +122 -0
- package/src/Markdown/parser.ts +609 -81
- package/src/Markdown/utils.ts +6 -0
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +150 -1
- package/src/PowerSearch/PowerSearchEditPopover.tsx +51 -28
- package/src/ScrollableArea/modules/useScrollableArea.spec.md +50 -22
- package/src/Slider/Slider.doc.mjs +16 -0
- package/src/Slider/Slider.spec.md +61 -47
- package/src/Slider/Slider.test.tsx +18 -0
- package/src/Slider/Slider.tsx +12 -6
- package/src/Spinner/Spinner.doc.mjs +6 -3
- package/src/Spinner/Spinner.test.tsx +37 -0
- package/src/Spinner/Spinner.tsx +31 -14
- package/src/ToggleButton/ToggleButton.test.tsx +133 -0
- package/src/ToggleButton/ToggleButton.tsx +9 -2
- package/src/ToggleButton/__tests__/ToggleButton.a11y.chromium.spec.ts +209 -0
- package/src/Tokenizer/Tokenizer.spec.md +142 -75
- package/src/Typeahead/BaseTypeahead.spec.md +4 -3
- package/src/Typeahead/BaseTypeahead.tsx +15 -6
- package/src/Typeahead/Typeahead.test.tsx +53 -0
- package/src/hooks/scrollKeyboardDelegation.test.ts +155 -0
- package/src/hooks/scrollKeyboardDelegation.ts +233 -0
- package/src/hooks/useScrollableArea.doc.mjs +15 -3
- package/src/hooks/useScrollableArea.test.tsx +59 -1
- package/src/hooks/useScrollableArea.ts +34 -10
- package/src/theme/derivedVarRegistry.test.ts +6 -4
|
@@ -229,7 +229,7 @@ function NestedSubFilterRow({
|
|
|
229
229
|
config: config,
|
|
230
230
|
maxMenuItems: maxMenuItems,
|
|
231
231
|
isDisabled: isReadOnly
|
|
232
|
-
})
|
|
232
|
+
}, valueEditorKey(subFilter))
|
|
233
233
|
})]
|
|
234
234
|
});
|
|
235
235
|
}
|
|
@@ -414,6 +414,42 @@ function NestedEditor({
|
|
|
414
414
|
});
|
|
415
415
|
}
|
|
416
416
|
|
|
417
|
+
// =============================================================================
|
|
418
|
+
// Value editor cell
|
|
419
|
+
// =============================================================================
|
|
420
|
+
|
|
421
|
+
// A field switch must replace the editor, not update it in place: a reused
|
|
422
|
+
// editor keeps its open menu and old results.
|
|
423
|
+
function valueEditorKey(filter) {
|
|
424
|
+
return `${filter.field}\u0000${filter.operator ?? ''}`;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
// Keyed on field + operator, so this also mounts on a field switch, not just
|
|
428
|
+
// when the popover opens; the focus handoff below runs for both.
|
|
429
|
+
function ValueEditorCell(props) {
|
|
430
|
+
const ref = useRef(null);
|
|
431
|
+
useEffect(() => {
|
|
432
|
+
const frame = requestAnimationFrame(() => {
|
|
433
|
+
const container = ref.current;
|
|
434
|
+
if (!container) {
|
|
435
|
+
return;
|
|
436
|
+
}
|
|
437
|
+
const focusable = container.querySelector('input:not([disabled]), button:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
|
|
438
|
+
focusable?.focus();
|
|
439
|
+
});
|
|
440
|
+
return () => cancelAnimationFrame(frame);
|
|
441
|
+
}, []);
|
|
442
|
+
return /*#__PURE__*/_jsx("div", {
|
|
443
|
+
ref: ref,
|
|
444
|
+
...{
|
|
445
|
+
className: "xgyuaek xeuugli"
|
|
446
|
+
},
|
|
447
|
+
children: /*#__PURE__*/_jsx(PowerSearchValueEditor, {
|
|
448
|
+
...props
|
|
449
|
+
})
|
|
450
|
+
});
|
|
451
|
+
}
|
|
452
|
+
|
|
417
453
|
// =============================================================================
|
|
418
454
|
// Main popover
|
|
419
455
|
// =============================================================================
|
|
@@ -431,20 +467,6 @@ export function PowerSearchEditPopover({
|
|
|
431
467
|
const t = useTranslator();
|
|
432
468
|
const saveButtonLabel = saveButtonLabelFromProps ?? t('@astryx.powersearch.editor.apply');
|
|
433
469
|
const [partialFilter, setPartialFilter] = useState(initialFilter);
|
|
434
|
-
const valueEditorRef = useRef(null);
|
|
435
|
-
|
|
436
|
-
// Focus the first focusable element inside the value editor after mount
|
|
437
|
-
useEffect(() => {
|
|
438
|
-
const frame = requestAnimationFrame(() => {
|
|
439
|
-
const container = valueEditorRef.current;
|
|
440
|
-
if (!container) {
|
|
441
|
-
return;
|
|
442
|
-
}
|
|
443
|
-
const focusable = container.querySelector('input:not([disabled]), button:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
|
|
444
|
-
focusable?.focus();
|
|
445
|
-
});
|
|
446
|
-
return () => cancelAnimationFrame(frame);
|
|
447
|
-
}, []);
|
|
448
470
|
const currentOperator = partialFilter.operator ? config.getOperator(partialFilter.field, partialFilter.operator) : undefined;
|
|
449
471
|
|
|
450
472
|
// Build field options for the selector
|
|
@@ -651,21 +673,15 @@ export function PowerSearchEditPopover({
|
|
|
651
673
|
isDisabled: isReadOnly,
|
|
652
674
|
size: "md"
|
|
653
675
|
})
|
|
654
|
-
}), operatorValue && !isEmptyType && /*#__PURE__*/_jsx(
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
onEnter: handleSave,
|
|
664
|
-
config: config,
|
|
665
|
-
maxMenuItems: maxMenuItems,
|
|
666
|
-
isDisabled: isReadOnly
|
|
667
|
-
})
|
|
668
|
-
})]
|
|
676
|
+
}), operatorValue && !isEmptyType && /*#__PURE__*/_jsx(ValueEditorCell, {
|
|
677
|
+
operatorValue: operatorValue,
|
|
678
|
+
filterValue: partialFilter.value,
|
|
679
|
+
onChange: handleValueChange,
|
|
680
|
+
onEnter: handleSave,
|
|
681
|
+
config: config,
|
|
682
|
+
maxMenuItems: maxMenuItems,
|
|
683
|
+
isDisabled: isReadOnly
|
|
684
|
+
}, valueEditorKey(partialFilter))]
|
|
669
685
|
})
|
|
670
686
|
}), !isEmptyType && /*#__PURE__*/_jsx("div", {
|
|
671
687
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAQhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAoS/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAQhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAoS/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BA4qBlD;yBA5qBe,MAAM"}
|
package/dist/Slider/Slider.js
CHANGED
|
@@ -660,7 +660,10 @@ export function Slider({
|
|
|
660
660
|
onPointerMove: handlePointerMove,
|
|
661
661
|
onPointerUp: handlePointerUp,
|
|
662
662
|
onPointerCancel: handlePointerUp,
|
|
663
|
-
...{
|
|
663
|
+
...mergeProps(themeProps('slider-control', {
|
|
664
|
+
orientation,
|
|
665
|
+
disabled: isDisabled ? 'disabled' : null
|
|
666
|
+
}), {
|
|
664
667
|
0: {
|
|
665
668
|
className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 xw4jnvo x1ymw6g xkagaj0 xdt5ytf xl56j7k x1ypdohk x16khyan"
|
|
666
669
|
},
|
|
@@ -673,7 +676,7 @@ export function Slider({
|
|
|
673
676
|
3: {
|
|
674
677
|
className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 x1qx5ct2 x80b3aj xh8yej3 xbyyjgo xt0e3qv"
|
|
675
678
|
}
|
|
676
|
-
}[!!isHorizontal << 1 | !!isDisabled << 0],
|
|
679
|
+
}[!!isHorizontal << 1 | !!isDisabled << 0]),
|
|
677
680
|
children: [/*#__PURE__*/_jsx("div", {
|
|
678
681
|
"aria-hidden": "true",
|
|
679
682
|
...mergeProps(themeProps('slider-track', {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Spinner.tsx
|
|
3
|
-
* @input Uses React, StyleX, SVG rendering
|
|
3
|
+
* @input Uses React, i18n (useTranslator), StyleX, SVG rendering
|
|
4
4
|
* @output Exports Spinner component, SpinnerProps, SpinnerSize, SpinnerShade types
|
|
5
5
|
* @position Core implementation of spinner loading indicator
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AA6WF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,SAAS,EACb,EAAE,YAAY,+BAyHd;yBApIe,OAAO"}
|
package/dist/Spinner/Spinner.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Spinner.tsx
|
|
7
|
-
* @input Uses React, StyleX, SVG rendering
|
|
7
|
+
* @input Uses React, i18n (useTranslator), StyleX, SVG rendering
|
|
8
8
|
* @output Exports Spinner component, SpinnerProps, SpinnerSize, SpinnerShade types
|
|
9
9
|
* @position Core implementation of spinner loading indicator
|
|
10
10
|
*
|
|
@@ -21,6 +21,7 @@ import "../theme/tokens.stylex.js";
|
|
|
21
21
|
import { colorVars, durationVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { Text } from "../Text/Text.js";
|
|
23
23
|
import { mergeProps } from "../utils/index.js";
|
|
24
|
+
import { useTranslator } from "../i18n/index.js";
|
|
24
25
|
import { themeProps } from "../utils/themeProps.js";
|
|
25
26
|
|
|
26
27
|
// =============================================================================
|
|
@@ -28,21 +29,17 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
28
29
|
// =============================================================================
|
|
29
30
|
|
|
30
31
|
/**
|
|
31
|
-
*
|
|
32
|
-
* swept 135deg, not the 270deg its constant's comment claimed.
|
|
32
|
+
* Default fraction of the ring the moving arc covers. The canvas ring this
|
|
33
|
+
* replaces swept 135deg, not the 270deg its constant's comment claimed.
|
|
34
|
+
*
|
|
35
|
+
* Themeable via `--spinner-arc-fraction`, declared alongside the other public
|
|
36
|
+
* vars in `sizeStyles` below. Only the inline `strokeDasharray` attribute
|
|
37
|
+
* (the pre-stylesheet render — see its own comment) still reads this
|
|
38
|
+
* constant directly; the CSS side composes the dash from the live var.
|
|
33
39
|
*/
|
|
34
40
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
35
41
|
const ARC_FRACTION = 0.375;
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* The dash pattern, per unit of diameter: one arc, then the gap that closes
|
|
39
|
-
* the circle. The circumference is `pi x diameter`, so multiplying the
|
|
40
|
-
* resolved diameter by these two constants gives exactly the lengths the
|
|
41
|
-
* default render has always used, and scales them with a themed diameter.
|
|
42
|
-
*/
|
|
43
42
|
const PI = 3.141592653589793;
|
|
44
|
-
const ARC_DASH = PI * ARC_FRACTION;
|
|
45
|
-
const ARC_GAP = PI * (1 - ARC_FRACTION);
|
|
46
43
|
const SIZES = {
|
|
47
44
|
sm: {
|
|
48
45
|
diameter: 10,
|
|
@@ -269,25 +266,33 @@ const styles = {
|
|
|
269
266
|
// cost of its own — with nothing declaring the var,
|
|
270
267
|
// `theme-var-reachability.js` cannot find an element to check, so a documented
|
|
271
268
|
// var reads as unreachable.
|
|
269
|
+
// Arc fraction is not itself size-dependent, but it declares alongside the
|
|
270
|
+
// two vars that are, on the same per-size condition (`!hasLabel` gate at the
|
|
271
|
+
// call site) — it needs a home on whichever element carries the theme
|
|
272
|
+
// target, and this is the object already wired to be there.
|
|
272
273
|
const sizeStyles = {
|
|
273
274
|
sm: {
|
|
274
275
|
"--spinner-diameter": "x11wm0hx",
|
|
275
276
|
"--spinner-stroke-width": "xls98ul",
|
|
277
|
+
"--spinner-arc-fraction": "x7o5821",
|
|
276
278
|
$$css: true
|
|
277
279
|
},
|
|
278
280
|
md: {
|
|
279
281
|
"--spinner-diameter": "x15pu9g6",
|
|
280
282
|
"--spinner-stroke-width": "xr0wkrm",
|
|
283
|
+
"--spinner-arc-fraction": "x7o5821",
|
|
281
284
|
$$css: true
|
|
282
285
|
},
|
|
283
286
|
lg: {
|
|
284
287
|
"--spinner-diameter": "x1w424tr",
|
|
285
288
|
"--spinner-stroke-width": "xr0wkrm",
|
|
289
|
+
"--spinner-arc-fraction": "x7o5821",
|
|
286
290
|
$$css: true
|
|
287
291
|
},
|
|
288
292
|
xl: {
|
|
289
293
|
"--spinner-diameter": "x1orj1z9",
|
|
290
294
|
"--spinner-stroke-width": "x7y2bof",
|
|
295
|
+
"--spinner-arc-fraction": "x7o5821",
|
|
291
296
|
$$css: true
|
|
292
297
|
}
|
|
293
298
|
};
|
|
@@ -377,6 +382,7 @@ export function Spinner({
|
|
|
377
382
|
const arcLength = circumference * ARC_FRACTION;
|
|
378
383
|
const hasLabel = label != null;
|
|
379
384
|
const labelId = useId();
|
|
385
|
+
const t = useTranslator();
|
|
380
386
|
|
|
381
387
|
// When a visible string label renders (and no explicit aria-label is set),
|
|
382
388
|
// name the status element from the visible Text via aria-labelledby instead
|
|
@@ -384,8 +390,10 @@ export function Spinner({
|
|
|
384
390
|
// announced twice by screen readers (WCAG 4.1.2).
|
|
385
391
|
const namedByVisibleLabel = hasLabel && typeof label === 'string' && ariaLabel == null;
|
|
386
392
|
|
|
387
|
-
// Resolve accessible name: explicit aria-label > string label >
|
|
388
|
-
|
|
393
|
+
// Resolve accessible name: explicit aria-label > string label > the
|
|
394
|
+
// localized default. The fallback is AT-facing text, so it goes through the
|
|
395
|
+
// translation runtime like visible text does.
|
|
396
|
+
const resolvedAriaLabel = ariaLabel ?? (typeof label === 'string' ? label : undefined) ?? t('@astryx.spinner.loading');
|
|
389
397
|
const spinner = /*#__PURE__*/_jsx("span", {
|
|
390
398
|
ref: hasLabel ? undefined : ref,
|
|
391
399
|
role: "status",
|
|
@@ -440,7 +448,7 @@ export function Spinner({
|
|
|
440
448
|
,
|
|
441
449
|
strokeDasharray: `${arcLength} ${circumference - arcLength}`,
|
|
442
450
|
...{
|
|
443
|
-
className: "xbh8q5q x1764fhq x1g0ag68 x1owpc8m xio8zfp xgw3ha0 xtve3lm x9tu13d
|
|
451
|
+
className: "xbh8q5q x1764fhq x1g0ag68 x1owpc8m xio8zfp xgw3ha0 xtve3lm x9tu13d xdv9ggb"
|
|
444
452
|
}
|
|
445
453
|
})]
|
|
446
454
|
})
|
|
@@ -77,7 +77,8 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
|
|
|
77
77
|
elevation?: Elevation;
|
|
78
78
|
/**
|
|
79
79
|
* Whether the button is disabled.
|
|
80
|
-
* When used inside ToggleButtonGroup,
|
|
80
|
+
* When used inside ToggleButtonGroup, a disabled group disables this button
|
|
81
|
+
* too, but an enabled group does not re-enable a button that disables itself.
|
|
81
82
|
* @default false
|
|
82
83
|
*/
|
|
83
84
|
isDisabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAClD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,CAChB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACvC,IAAI,CAAC;IAEV;;;;;;;;;;;;;;;;;OAiBG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB
|
|
1
|
+
{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAClD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,CAChB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACvC,IAAI,CAAC;IAEV;;;;;;;;;;;;;;;;;OAiBG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,mBAAmB,EACpC,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,SAAkB,EAClB,UAAU,EAAE,cAAsB,EAClC,SAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,SAAS,CAiH/B;yBArIe,YAAY"}
|
|
@@ -99,7 +99,13 @@ export function ToggleButton({
|
|
|
99
99
|
const group = useToggleButtonGroup();
|
|
100
100
|
const committedPressed = group && value != null ? group.selectedValues.has(value) : isPressedProp ?? false;
|
|
101
101
|
const size = sizeProp ?? group?.size ?? 'md';
|
|
102
|
-
|
|
102
|
+
// Either source disabling this button is enough. `??` could not express that:
|
|
103
|
+
// the group always supplies a boolean (its own prop defaults to false), so the
|
|
104
|
+
// fallback never ran and an enabled group handed a member that had disabled
|
|
105
|
+
// itself its availability back. A group still disables everything it contains
|
|
106
|
+
// — that is the half `??` got right — but it cannot re-enable a member
|
|
107
|
+
// (family:buttons FR3).
|
|
108
|
+
const isDisabled = (group?.isDisabled ?? false) || isDisabledProp;
|
|
103
109
|
|
|
104
110
|
// Track the pressed state optimistically so the button reflects the intended
|
|
105
111
|
// state immediately while an async action is pending. The optimistic update
|
|
@@ -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;AAGf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAyBnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAS1D,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;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;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;AA+JD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,
|
|
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;AAGf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAyBnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAS1D,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;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;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;AA+JD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,EAouBrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}
|
|
@@ -274,9 +274,9 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
274
274
|
// Debounce ref
|
|
275
275
|
const searchTimeoutRef = useRef(null);
|
|
276
276
|
|
|
277
|
-
// Monotonic counter incremented on selection
|
|
278
|
-
// searches that resolve
|
|
279
|
-
// generation to the current value and discard stale results.
|
|
277
|
+
// Monotonic counter incremented on selection, query-clear, and source
|
|
278
|
+
// replacement. Async searches that resolve afterwards compare their
|
|
279
|
+
// captured generation to the current value and discard stale results.
|
|
280
280
|
const searchGenRef = useRef(0);
|
|
281
281
|
// The generation at which results were last populated. handleFocus
|
|
282
282
|
// compares this to searchGenRef — if they differ, the cached results
|
|
@@ -284,6 +284,15 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
284
284
|
// be re-shown.
|
|
285
285
|
const resultsGenRef = useRef(0);
|
|
286
286
|
|
|
287
|
+
// Results still arriving from a replaced source must not land in the new
|
|
288
|
+
// one's menu.
|
|
289
|
+
const prevSearchSourceRef = useRef(searchSource);
|
|
290
|
+
if (prevSearchSourceRef.current !== searchSource) {
|
|
291
|
+
prevSearchSourceRef.current.cancel?.();
|
|
292
|
+
prevSearchSourceRef.current = searchSource;
|
|
293
|
+
searchGenRef.current++;
|
|
294
|
+
}
|
|
295
|
+
|
|
287
296
|
// Layer for dropdown
|
|
288
297
|
const handleLayerShow = useCallback(() => {
|
|
289
298
|
onOpenChange?.(true);
|
|
@@ -630,15 +639,15 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
630
639
|
});
|
|
631
640
|
const selectedKey = value == null ? null : getKey(value.id, () => results.indexOf(value));
|
|
632
641
|
|
|
633
|
-
//
|
|
642
|
+
// Unmount: clear the pending debounce and cancel in-flight work.
|
|
634
643
|
useEffect(() => {
|
|
635
644
|
return () => {
|
|
636
645
|
if (searchTimeoutRef.current) {
|
|
637
646
|
clearTimeout(searchTimeoutRef.current);
|
|
638
647
|
}
|
|
639
|
-
|
|
648
|
+
prevSearchSourceRef.current.cancel?.();
|
|
640
649
|
};
|
|
641
|
-
}, [
|
|
650
|
+
}, []);
|
|
642
651
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
643
652
|
children: [/*#__PURE__*/_jsx("input", {
|
|
644
653
|
...rest,
|
package/dist/astryx.css
CHANGED
|
@@ -333,6 +333,7 @@
|
|
|
333
333
|
.xnpej1e{--radius-element:var(--radius-full)}
|
|
334
334
|
.x11rj6l1{--selectable-card-ring-color:var(--color-accent)}
|
|
335
335
|
.xkce8z9{--separator-display:flex}
|
|
336
|
+
.x7o5821{--spinner-arc-fraction:.375}
|
|
336
337
|
.x1uzk0gl{--spinner-color:currentColor}
|
|
337
338
|
.xt1b8mc{--spinner-color:var(--color-accent)}
|
|
338
339
|
.x13u6jys{--spinner-color:var(--color-on-dark)}
|
|
@@ -515,7 +516,6 @@
|
|
|
515
516
|
.xb3r6kr:not(#\#):not(#\#){overflow:hidden}
|
|
516
517
|
.x1rea2x4:not(#\#):not(#\#){overflow:visible}
|
|
517
518
|
.xish69e:not(#\#):not(#\#){overscroll-behavior:contain}
|
|
518
|
-
.x8du1vd:not(#\#):not(#\#){overscroll-behavior:none}
|
|
519
519
|
.xt970qd:not(#\#):not(#\#){padding-block:0}
|
|
520
520
|
.x1vn5h1t:not(#\#):not(#\#){padding-block:calc((var(--size-element-lg) - var(--spacing-5) - 2 * var(--border-width)) / 2)}
|
|
521
521
|
.x1ioay2v:not(#\#):not(#\#){padding-block:calc((var(--size-element-md) - var(--spacing-5) - 2 * var(--border-width)) / 2)}
|
|
@@ -866,6 +866,7 @@
|
|
|
866
866
|
.x1lliihq:not(#\#):not(#\#):not(#\#){display:block}
|
|
867
867
|
.xjp7ctv:not(#\#):not(#\#):not(#\#){display:contents}
|
|
868
868
|
.x78zum5:not(#\#):not(#\#):not(#\#){display:flex}
|
|
869
|
+
.xufnvkl:not(#\#):not(#\#):not(#\#){display:flow-root}
|
|
869
870
|
.xrvj5dj:not(#\#):not(#\#):not(#\#){display:grid}
|
|
870
871
|
.x1rg5ohu:not(#\#):not(#\#):not(#\#){display:inline-block}
|
|
871
872
|
.x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
|
|
@@ -1173,7 +1174,7 @@
|
|
|
1173
1174
|
.x24f09q:not(#\#):not(#\#):not(#\#){scrollbar-gutter:auto}
|
|
1174
1175
|
.xosa0jh:not(#\#):not(#\#):not(#\#){scrollbar-width:auto}
|
|
1175
1176
|
.x1rohswg:not(#\#):not(#\#):not(#\#){scrollbar-width:none}
|
|
1176
|
-
.
|
|
1177
|
+
.xdv9ggb:not(#\#):not(#\#):not(#\#){stroke-dasharray:calc(var(--_spinner-ring-diameter) * 3.141592653589793 * var(--spinner-arc-fraction)) calc(var(--_spinner-ring-diameter) * 3.141592653589793 * (1 - var(--spinner-arc-fraction)))}
|
|
1177
1178
|
.x1owpc8m:not(#\#):not(#\#):not(#\#){stroke-linecap:round}
|
|
1178
1179
|
.x7bo2k:not(#\#):not(#\#):not(#\#){stroke-opacity:.3}
|
|
1179
1180
|
.x1smxkh6:not(#\#):not(#\#):not(#\#){stroke-opacity:.302}
|
|
@@ -1362,6 +1363,7 @@
|
|
|
1362
1363
|
.x1e0x2sz:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--color-error)}
|
|
1363
1364
|
.xx47ajj:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--focus-outline-color)}
|
|
1364
1365
|
.x7s97pk:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:2px}
|
|
1366
|
+
.x1nw7mhf:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:calc(-1 * var(--focus-outline-width))}
|
|
1365
1367
|
.x13aywxo:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--button-focus-offset)}
|
|
1366
1368
|
.x1vwwbsn:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
|
|
1367
1369
|
.xwz5zln.xwz5zln:where(.x1iwu4tg:has(:focus-visible) *):not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
|
|
@@ -1675,6 +1677,7 @@
|
|
|
1675
1677
|
.xjwf9q1:not(#\#):not(#\#):not(#\#):not(#\#){min-height:24px}
|
|
1676
1678
|
.xe0p6wg:not(#\#):not(#\#):not(#\#):not(#\#){min-height:28px}
|
|
1677
1679
|
.x21xpn4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:32px}
|
|
1680
|
+
.x121v3j4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:min-content}
|
|
1678
1681
|
.x1xf4nls:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-lg)}
|
|
1679
1682
|
.x1uogy3y:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-md)}
|
|
1680
1683
|
.x1gdqauq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-sm)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scrollKeyboardDelegation.d.ts","sourceRoot":"","sources":["../../src/hooks/scrollKeyboardDelegation.ts"],"names":[],"mappings":"AAkIA,0EAA0E;AAC1E,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,WAAW,GACnB,MAAM,IAAI,CAkGZ"}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file scrollKeyboardDelegation.ts
|
|
5
|
+
* @input A named, overflowing viewport and its real content box
|
|
6
|
+
* @output Focus-time delegation with native forward and reverse Tab traversal
|
|
7
|
+
* @position Private useScrollableArea keyboard behavior; no DOM observers or scrolling
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import { FOCUSABLE_SELECTOR } from "./focusableSelector.js";
|
|
11
|
+
import { getRegisteredScrollOwnerState } from "./scrollOwnerRegistry.js";
|
|
12
|
+
|
|
13
|
+
// Structural roles may contain ordinary links/buttons. Unknown or interactive
|
|
14
|
+
// roles are deliberately excluded until their navigation contract is proven.
|
|
15
|
+
const PASSIVE_ROLES = new Set(['article', 'banner', 'complementary', 'contentinfo', 'definition', 'directory', 'document', 'figure', 'form', 'generic', 'group', 'heading', 'list', 'listitem', 'main', 'navigation', 'none', 'note', 'paragraph', 'presentation', 'region', 'section', 'status', 'table', 'term']);
|
|
16
|
+
function isSequential(element) {
|
|
17
|
+
if (element.tabIndex < 0 || element.matches(':disabled') || element.closest('[inert], [hidden]') != null || element.getClientRects().length === 0) {
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
const visibility = getComputedStyle(element).visibility;
|
|
21
|
+
return visibility !== 'hidden' && visibility !== 'collapse';
|
|
22
|
+
}
|
|
23
|
+
function firstDelegationTarget(viewport, content) {
|
|
24
|
+
const candidates = content.querySelectorAll(FOCUSABLE_SELECTOR);
|
|
25
|
+
let first = content.matches(FOCUSABLE_SELECTOR) && isSequential(content) ? content : null;
|
|
26
|
+
for (const candidate of candidates) {
|
|
27
|
+
// After finding the first target, only positive tabindex can precede it.
|
|
28
|
+
// Ordinary trailing controls need no visibility or layout reads.
|
|
29
|
+
if (first != null && candidate.tabIndex <= 0) {
|
|
30
|
+
continue;
|
|
31
|
+
}
|
|
32
|
+
if (!isSequential(candidate)) {
|
|
33
|
+
continue;
|
|
34
|
+
}
|
|
35
|
+
// Positive tabindex participates before the zero-index viewport. Do not
|
|
36
|
+
// revisit it or skip its ordering by delegating to a later zero-index child.
|
|
37
|
+
if (candidate.tabIndex > 0) {
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
first ??= candidate;
|
|
41
|
+
}
|
|
42
|
+
if (first == null || first.tabIndex !== 0 || !first.matches('a[href], button') || first.closest('[aria-hidden="true"]') != null || first.matches('[aria-disabled="true"], [aria-haspopup]:not([aria-haspopup="false"])')) {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
let ancestor = first;
|
|
46
|
+
while (ancestor != null && ancestor !== viewport) {
|
|
47
|
+
const role = ancestor.getAttribute('role')?.trim().toLowerCase();
|
|
48
|
+
const nativeRole = ancestor === first && (role === 'button' && first.localName === 'button' || role === 'link' && first.localName === 'a');
|
|
49
|
+
if (role != null && role !== '' && !nativeRole && !PASSIVE_ROLES.has(role) || ancestor === first && role != null && role !== '' && !nativeRole || ancestor.hasAttribute('aria-activedescendant') || ancestor.isContentEditable || ancestor.matches('[contenteditable]:not([contenteditable="false"])') || getRegisteredScrollOwnerState(ancestor) != null) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
// Also respect native scroll owners that have not adopted the shared hook.
|
|
53
|
+
const style = getComputedStyle(ancestor);
|
|
54
|
+
if (/^(auto|scroll|overlay)$/.test(style.overflowX) && ancestor.scrollWidth > ancestor.clientWidth + 1 || /^(auto|scroll|overlay)$/.test(style.overflowY) && ancestor.scrollHeight > ancestor.clientHeight + 1) {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
ancestor = ancestor.parentElement;
|
|
58
|
+
}
|
|
59
|
+
return ancestor === viewport ? first : null;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/** Attach only while automatic ownership has an effective scroll axis. */
|
|
63
|
+
export function attachScrollKeyboardDelegation(viewport, content) {
|
|
64
|
+
const document = viewport.ownerDocument;
|
|
65
|
+
const window = document.defaultView;
|
|
66
|
+
if (window == null) {
|
|
67
|
+
return () => {};
|
|
68
|
+
}
|
|
69
|
+
let entry = null;
|
|
70
|
+
let origin = null;
|
|
71
|
+
let delegated = null;
|
|
72
|
+
let timer;
|
|
73
|
+
let restoreTabStop;
|
|
74
|
+
const reset = () => {
|
|
75
|
+
entry = null;
|
|
76
|
+
origin = null;
|
|
77
|
+
window.clearTimeout(timer);
|
|
78
|
+
restoreTabStop?.();
|
|
79
|
+
restoreTabStop = undefined;
|
|
80
|
+
};
|
|
81
|
+
const onKeyDown = event => {
|
|
82
|
+
reset();
|
|
83
|
+
if (event.key !== 'Tab' || event.ctrlKey || event.metaKey) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
// Keep the actual event: focus() during keydown is programmatic (nonzero
|
|
87
|
+
// eventPhase), whereas native Tab focus follows completed event dispatch.
|
|
88
|
+
entry = event;
|
|
89
|
+
origin = event.target;
|
|
90
|
+
if (event.shiftKey && delegated != null && document.activeElement === delegated && viewport.contains(delegated)) {
|
|
91
|
+
const tabIndex = viewport.getAttribute('tabindex');
|
|
92
|
+
viewport.tabIndex = -1;
|
|
93
|
+
restoreTabStop = () => {
|
|
94
|
+
if (viewport.getAttribute('tabindex') === '-1') {
|
|
95
|
+
if (tabIndex == null) {
|
|
96
|
+
viewport.removeAttribute('tabindex');
|
|
97
|
+
} else {
|
|
98
|
+
viewport.setAttribute('tabindex', tabIndex);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
// A canceled Tab, focus leaving the document, or a held key must not leave
|
|
104
|
+
// stale keyboard intent for a later pointer/programmatic focus operation.
|
|
105
|
+
timer = window.setTimeout(reset, 0);
|
|
106
|
+
};
|
|
107
|
+
const onFocusIn = event => {
|
|
108
|
+
const keyboardEntry = entry;
|
|
109
|
+
const previous = origin;
|
|
110
|
+
reset();
|
|
111
|
+
if (event.target !== viewport) {
|
|
112
|
+
if (!viewport.contains(event.target)) {
|
|
113
|
+
delegated = null;
|
|
114
|
+
}
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
delegated = null;
|
|
118
|
+
if (keyboardEntry == null || keyboardEntry.shiftKey || keyboardEntry.defaultPrevented || keyboardEntry.eventPhase !== 0 || event.relatedTarget != null && event.relatedTarget !== previous) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
const target = firstDelegationTarget(viewport, content);
|
|
122
|
+
if (target == null) {
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
delegated = target;
|
|
126
|
+
// Let native focus reveal the action. Arrow/Page scrolling remains entirely
|
|
127
|
+
// browser-owned, including scroll chaining and the full viewport range.
|
|
128
|
+
target.focus();
|
|
129
|
+
if (document.activeElement !== target) {
|
|
130
|
+
delegated = null;
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
document.addEventListener('keydown', onKeyDown, true);
|
|
134
|
+
document.addEventListener('keyup', reset, true);
|
|
135
|
+
document.addEventListener('pointerdown', reset, true);
|
|
136
|
+
document.addEventListener('focusin', onFocusIn, true);
|
|
137
|
+
window.addEventListener('blur', reset);
|
|
138
|
+
return () => {
|
|
139
|
+
reset();
|
|
140
|
+
document.removeEventListener('keydown', onKeyDown, true);
|
|
141
|
+
document.removeEventListener('keyup', reset, true);
|
|
142
|
+
document.removeEventListener('pointerdown', reset, true);
|
|
143
|
+
document.removeEventListener('focusin', onFocusIn, true);
|
|
144
|
+
window.removeEventListener('blur', reset);
|
|
145
|
+
};
|
|
146
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file useScrollableArea.ts
|
|
3
|
-
* @input Logical scroll intent, keyboard
|
|
4
|
-
* @output Safe prop getters and stable per-axis effective scroll state
|
|
3
|
+
* @input Logical scroll intent, focus-time keyboard delegation, caller-owned viewport/content props
|
|
4
|
+
* @output Safe prop getters, native keyboard entry, and stable per-axis effective scroll state
|
|
5
5
|
* @position Canonical behavior core for ScrollableArea and structure-owning adopters
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update:
|
|
@@ -20,6 +20,10 @@ export type ScrollKeyboardAccess = {
|
|
|
20
20
|
owner: 'viewport';
|
|
21
21
|
label: string;
|
|
22
22
|
role?: 'group' | 'region';
|
|
23
|
+
} | {
|
|
24
|
+
owner: 'contentOrViewport';
|
|
25
|
+
label: string;
|
|
26
|
+
role?: 'group' | 'region';
|
|
23
27
|
};
|
|
24
28
|
export interface ScrollAxisState {
|
|
25
29
|
isScrollable: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollableArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollableArea.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAOL,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"useScrollableArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollableArea.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAOL,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkB5C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAC5B;IAAC,KAAK,EAAE,SAAS,CAAA;CAAC,GAClB;IAAC,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAC,GAC7D;IACE,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B,CAAC;AAEN,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,cAAc,EAAE,oBAAoB,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;CAC7C;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GACtE,aAAa,CAAC,CAAC,CAAC,CAAC;AAEnB,MAAM,WAAW,uBAAuB;IACtC,gBAAgB,CAAC,CAAC,SAAS,WAAW,EACpC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,CAAC,SAAS,WAAW,EACnC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,KAAK,EAAE,mBAAmB,CAAC;CAC5B;AAiGD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,cAAc,EACd,UAAoB,EACpB,iBAAoC,GACrC,EAAE,wBAAwB,GAAG,uBAAuB,CA0SpD"}
|