@astryxdesign/core 0.6.1 → 0.6.2-canary.0faf070
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/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +12 -2
- package/dist/Collapsible/Collapsible.d.ts.map +1 -1
- package/dist/Collapsible/Collapsible.js +6 -1
- 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/Kbd/Kbd.d.ts +5 -3
- package/dist/Kbd/Kbd.d.ts.map +1 -1
- package/dist/Kbd/Kbd.js +36 -42
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +6 -2
- 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/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +13 -1
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +5 -5
- package/dist/SideNav/SideNav.d.ts +2 -1
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +9 -3
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +19 -10
- 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/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +11 -0
- package/dist/TabList/Tab.d.ts +1 -1
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +20 -7
- 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 +13 -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/dist/utils/interactionOverlay.stylex.d.ts +8 -0
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +9 -0
- 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/Button/__tests__/Button.a11y.chromium.spec.ts +17 -1
- package/src/Button/__tests__/Button.a11y.known-failures.ts +0 -29
- package/src/Button/__tests__/Button.a11y.renders.tsx +9 -2
- package/src/Button/__tests__/Button.a11y.states.ts +9 -0
- package/src/CheckboxInput/CheckboxInput.doc.mjs +11 -0
- package/src/CheckboxInput/CheckboxInput.test.tsx +34 -0
- package/src/CheckboxInput/CheckboxInput.tsx +21 -1
- package/src/ClickableCard/ClickableCard.test.tsx +102 -5
- package/src/Collapsible/Collapsible.doc.mjs +11 -0
- package/src/Collapsible/Collapsible.test.tsx +21 -0
- package/src/Collapsible/Collapsible.tsx +5 -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/Kbd/Kbd.doc.mjs +3 -3
- package/src/Kbd/Kbd.test.tsx +57 -1
- package/src/Kbd/Kbd.tsx +57 -37
- package/src/Link/Link.doc.mjs +11 -0
- package/src/Link/Link.test.tsx +24 -0
- package/src/Link/Link.tsx +5 -0
- package/src/Markdown/Markdown.doc.mjs +167 -42
- package/src/Markdown/Markdown.public.test.ts +157 -0
- package/src/Markdown/Markdown.spec.md +255 -71
- 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/Outline/Outline.spec.md +1 -1
- package/src/Outline/modules/parseOutlineFromMarkdown.spec.md +142 -0
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +150 -1
- package/src/PowerSearch/PowerSearchEditPopover.tsx +51 -28
- package/src/RadioList/RadioList.doc.mjs +11 -0
- package/src/RadioList/RadioList.test.tsx +32 -0
- package/src/RadioList/RadioListItem.tsx +25 -1
- package/src/ScrollableArea/modules/useScrollableArea.spec.md +50 -22
- package/src/SegmentedControl/SegmentedControl.doc.mjs +2 -2
- package/src/SegmentedControl/SegmentedControl.test.tsx +31 -0
- package/src/SegmentedControl/SegmentedControlItem.tsx +6 -9
- package/src/SideNav/SideNav.doc.mjs +1 -1
- package/src/SideNav/SideNav.test.tsx +10 -0
- package/src/SideNav/SideNav.tsx +14 -2
- package/src/Slider/Slider.doc.mjs +27 -0
- package/src/Slider/Slider.spec.md +61 -47
- package/src/Slider/Slider.test.tsx +146 -0
- package/src/Slider/Slider.tsx +37 -13
- 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/Switch/Switch.doc.mjs +11 -0
- package/src/Switch/Switch.test.tsx +16 -0
- package/src/Switch/Switch.tsx +28 -0
- package/src/TabList/Tab.tsx +35 -7
- package/src/TabList/TabList.doc.mjs +11 -0
- package/src/TabList/TabList.test.tsx +66 -0
- package/src/TabList/__tests__/Tabs.a11y.known-failures.ts +1 -34
- 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/__tests__/PressedState.a11y.chromium.spec.ts +813 -0
- package/src/__tests__/pressState.ts +93 -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
- package/src/utils/interactionOverlay.stylex.ts +20 -0
|
@@ -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":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgG5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;;OAUG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,kBAAkB,qBA4JpB;yBA1Ke,aAAa"}
|
|
@@ -20,7 +20,10 @@
|
|
|
20
20
|
import React, { use, useId, useRef } from 'react';
|
|
21
21
|
import * as stylex from '@stylexjs/stylex';
|
|
22
22
|
import { RadioListContext } from "./RadioList.js";
|
|
23
|
+
import "../theme/tokens.stylex.js";
|
|
24
|
+
import { colorVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
23
25
|
import { mergeProps, isRenderable, rtlStyles } from "../utils/index.js";
|
|
26
|
+
import "../Indicator/indicator.markers.stylex.js";
|
|
24
27
|
import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
|
|
25
28
|
import { useIndicatorFocusRing } from "../hooks/useIndicatorFocusRing.js";
|
|
26
29
|
import { useIndicator } from "../Indicator/index.js";
|
|
@@ -37,6 +40,15 @@ const styles = {
|
|
|
37
40
|
kHBbk8: "xc8icb0",
|
|
38
41
|
$$css: true
|
|
39
42
|
},
|
|
43
|
+
indicatorPressOverlay: {
|
|
44
|
+
k5JduY: "x1s928wv",
|
|
45
|
+
kwXMNM: "x1j6awrg",
|
|
46
|
+
kv0HGH: "xarstr8",
|
|
47
|
+
kUfP38: "xq94oqs",
|
|
48
|
+
kloYau: "x2q1x1w",
|
|
49
|
+
ks3ayO: "xyhc2n1 x2kv6q6",
|
|
50
|
+
$$css: true
|
|
51
|
+
},
|
|
40
52
|
input: {
|
|
41
53
|
kVAEAm: "x10l6tqk",
|
|
42
54
|
k87sOh: "xwa60dl",
|
|
@@ -146,7 +158,7 @@ export function RadioListItem({
|
|
|
146
158
|
// `<label htmlFor>` would double-fire under delegation.
|
|
147
159
|
const radioRef = useRef(null);
|
|
148
160
|
const radioCircle = /*#__PURE__*/_jsxs("div", {
|
|
149
|
-
...stylex.props(styles.radioWrapper, wrapperSizeStyles[size]),
|
|
161
|
+
...stylex.props(styles.radioWrapper, wrapperSizeStyles[size], !isDisabled && styles.indicatorPressOverlay),
|
|
150
162
|
...focusProps,
|
|
151
163
|
children: [/*#__PURE__*/_jsx("input", {
|
|
152
164
|
ref: radioRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAyGD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,GAAG,IAAI,EACR,EAAE,yBAAyB,qBAuE3B;yBAjFe,oBAAoB"}
|
|
@@ -22,6 +22,7 @@ import { useSegmentedControlContext } from "./SegmentedControlContext.js";
|
|
|
22
22
|
import { mergeProps, composeEventHandlers } from "../utils/index.js";
|
|
23
23
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
24
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
25
|
+
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
25
26
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
26
27
|
// =============================================================================
|
|
27
28
|
// Styles
|
|
@@ -50,10 +51,6 @@ const styles = {
|
|
|
50
51
|
kAMwcw: "xlr8y92",
|
|
51
52
|
$$css: true
|
|
52
53
|
},
|
|
53
|
-
hover: {
|
|
54
|
-
kWkggS: "xoevpu5",
|
|
55
|
-
$$css: true
|
|
56
|
-
},
|
|
57
54
|
selected: {
|
|
58
55
|
kAXs8y: "x1kzknox",
|
|
59
56
|
kMwMTN: "x1tgivj0 x1k5gbb1",
|
|
@@ -184,7 +181,10 @@ export function SegmentedControlItem({
|
|
|
184
181
|
size,
|
|
185
182
|
selected: isSelected ? 'selected' : null,
|
|
186
183
|
disabled: isItemDisabled ? 'disabled' : null
|
|
187
|
-
}), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isFill && styles.fill, isSelected && styles.selected,
|
|
184
|
+
}), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isFill && styles.fill, isSelected && styles.selected,
|
|
185
|
+
// The shared hover and pressed overlay, on the segments a press can
|
|
186
|
+
// change: the selected segment keeps its raised surface as it is.
|
|
187
|
+
!isSelected && !isItemDisabled && interactionOverlayStyles.backgroundColor, isItemDisabled && styles.disabled, xstyle)),
|
|
188
188
|
children: [iconElement, !isLabelHidden && /*#__PURE__*/_jsx("span", {
|
|
189
189
|
...{
|
|
190
190
|
className: "xb3r6kr xlyipyv xeuugli"
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
* Sidebar navigation container with five zones: header + topContent (sticky together),
|
|
8
8
|
* children (scrollable), footer, and footerIcons (sticky bottom).
|
|
9
9
|
*
|
|
10
|
-
* Supports optional resize via drag handle at the inline-end edge.
|
|
10
|
+
* Supports optional resize via a drag handle at the inline-end edge. The
|
|
11
|
+
* resizable wrapper clips handle overflow while keeping its focus ring inside.
|
|
11
12
|
*
|
|
12
13
|
* SYNC: When modified, update these files to stay in sync:
|
|
13
14
|
* - /packages/core/src/SideNav/SideNav.doc.mjs
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,wBAAwB,EAC7B,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAsP/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAEtC;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,wBAAwB,CAAC;CAClD;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BA2Qd;yBA1Re,OAAO"}
|
package/dist/SideNav/SideNav.js
CHANGED
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
* Sidebar navigation container with five zones: header + topContent (sticky together),
|
|
12
12
|
* children (scrollable), footer, and footerIcons (sticky bottom).
|
|
13
13
|
*
|
|
14
|
-
* Supports optional resize via drag handle at the inline-end edge.
|
|
14
|
+
* Supports optional resize via a drag handle at the inline-end edge. The
|
|
15
|
+
* resizable wrapper clips handle overflow while keeping its focus ring inside.
|
|
15
16
|
*
|
|
16
17
|
* SYNC: When modified, update these files to stay in sync:
|
|
17
18
|
* - /packages/core/src/SideNav/SideNav.doc.mjs
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
import { useCallback, useImperativeHandle, useRef } from 'react';
|
|
24
25
|
import * as stylex from '@stylexjs/stylex';
|
|
25
26
|
import "../theme/tokens.stylex.js";
|
|
26
|
-
import { spacingVars } from "../theme/tokens.stylex.js";
|
|
27
|
+
import { focusVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
27
28
|
import { mergeProps } from "../utils/index.js";
|
|
28
29
|
import { SideNavCollapseContext } from "./SideNavCollapseContext.js";
|
|
29
30
|
import { SideNavCollapseButton } from "./SideNavCollapseButton.js";
|
|
@@ -100,6 +101,10 @@ const styles = {
|
|
|
100
101
|
kzqmXN: "xhgvbfk",
|
|
101
102
|
$$css: true
|
|
102
103
|
},
|
|
104
|
+
resizableHandle: {
|
|
105
|
+
kInvED: "x1wfwxd8 x1l5jwag",
|
|
106
|
+
$$css: true
|
|
107
|
+
},
|
|
103
108
|
topbar: {
|
|
104
109
|
k1xSpc: "x78zum5",
|
|
105
110
|
kXwgrk: "x1q0g3np",
|
|
@@ -400,7 +405,7 @@ export function SideNav({
|
|
|
400
405
|
// the panel's overflow: clip bounds.
|
|
401
406
|
const content = showResizeHandle ? /*#__PURE__*/_jsxs("div", {
|
|
402
407
|
...{
|
|
403
|
-
className: "x1n2onr6 x78zum5 x2lah0s x5yr21d"
|
|
408
|
+
className: "x1n2onr6 x78zum5 x2lah0s x5yr21d x7giv3"
|
|
404
409
|
},
|
|
405
410
|
children: [navElement, /*#__PURE__*/_jsx(ResizeHandle, {
|
|
406
411
|
"data-testid": "astryx-sidenav-resize-handle",
|
|
@@ -408,6 +413,7 @@ export function SideNav({
|
|
|
408
413
|
position: "overlay",
|
|
409
414
|
pillPlacement: "end",
|
|
410
415
|
isAlwaysVisible: false,
|
|
416
|
+
xstyle: styles.resizableHandle,
|
|
411
417
|
resizable: resizableHook.props,
|
|
412
418
|
label: t('@astryx.sideNav.resizeSidebar')
|
|
413
419
|
})]
|
|
@@ -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;
|
|
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;AA6S/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BAqrBlD;yBArrBe,MAAM"}
|
package/dist/Slider/Slider.js
CHANGED
|
@@ -105,6 +105,10 @@ const styles = {
|
|
|
105
105
|
kWkggS: "x1ewilqj xvxo0qp",
|
|
106
106
|
$$css: true
|
|
107
107
|
},
|
|
108
|
+
thumbPressed: {
|
|
109
|
+
kKwaWg: "xpl5ynk",
|
|
110
|
+
$$css: true
|
|
111
|
+
},
|
|
108
112
|
thumbDisabled: {
|
|
109
113
|
kWkggS: "xwmxj5m",
|
|
110
114
|
kkrTdU: "xt0e3qv",
|
|
@@ -393,17 +397,19 @@ export function Slider({
|
|
|
393
397
|
// clicking on wide labels like "100").
|
|
394
398
|
const markEl = e.target.closest('[data-mark-value]');
|
|
395
399
|
const newVal = markEl ? Number(markEl.dataset.markValue) : getValueFromPosition(e.clientX, e.clientY);
|
|
396
|
-
const
|
|
400
|
+
const track = trackRef.current;
|
|
401
|
+
const thumbs = track?.querySelectorAll('[role="slider"]');
|
|
402
|
+
const pressedThumb = e.target.closest('[role="slider"]');
|
|
403
|
+
const pressedThumbIndex = pressedThumb == null || thumbs == null ? -1 : Array.from(thumbs).indexOf(pressedThumb);
|
|
404
|
+
// A direct thumb press owns that thumb even when range values coincide.
|
|
405
|
+
// Track and mark presses still choose the nearest value.
|
|
406
|
+
const thumbIndex = pressedThumbIndex >= 0 ? pressedThumbIndex : getClosestThumb(newVal);
|
|
397
407
|
draggingThumbRef.current = thumbIndex;
|
|
398
408
|
setDraggingThumb(thumbIndex);
|
|
399
409
|
updateValue(thumbIndex, newVal);
|
|
400
410
|
|
|
401
|
-
// Focus the
|
|
402
|
-
|
|
403
|
-
if (track) {
|
|
404
|
-
const thumbs = track.querySelectorAll('[role="slider"]');
|
|
405
|
-
thumbs[thumbIndex]?.focus();
|
|
406
|
-
}
|
|
411
|
+
// Focus the thumb that owns this drag.
|
|
412
|
+
thumbs?.[thumbIndex]?.focus();
|
|
407
413
|
// Also clear it explicitly: focusing an already-focused thumb fires no
|
|
408
414
|
// focus event, so a thumb the user had tabbed to would keep its ring
|
|
409
415
|
// through the drag.
|
|
@@ -552,7 +558,7 @@ export function Slider({
|
|
|
552
558
|
...mergeProps(themeProps('slider-thumb', {
|
|
553
559
|
orientation,
|
|
554
560
|
disabled: isDisabled ? 'disabled' : null
|
|
555
|
-
}), stylex.props(styles.thumb, isHorizontal ? styles.thumbHorizontal : rtlStyles.centerInline('50%'), !isDisabled && styles.thumbHover, !isDisabled && keyboardFocusThumb === thumbIndex && focusOutlineStyles.focusVisible, isDisabled && styles.thumbDisabled), undefined, positionStyle)
|
|
561
|
+
}), stylex.props(styles.thumb, isHorizontal ? styles.thumbHorizontal : rtlStyles.centerInline('50%'), !isDisabled && styles.thumbHover, !isDisabled && draggingThumb === thumbIndex && styles.thumbPressed, !isDisabled && keyboardFocusThumb === thumbIndex && focusOutlineStyles.focusVisible, isDisabled && styles.thumbDisabled), undefined, positionStyle)
|
|
556
562
|
}, thumbIndex);
|
|
557
563
|
if (useValueTooltip) {
|
|
558
564
|
return /*#__PURE__*/_jsx(Tooltip, {
|
|
@@ -660,7 +666,10 @@ export function Slider({
|
|
|
660
666
|
onPointerMove: handlePointerMove,
|
|
661
667
|
onPointerUp: handlePointerUp,
|
|
662
668
|
onPointerCancel: handlePointerUp,
|
|
663
|
-
...{
|
|
669
|
+
...mergeProps(themeProps('slider-control', {
|
|
670
|
+
orientation,
|
|
671
|
+
disabled: isDisabled ? 'disabled' : null
|
|
672
|
+
}), {
|
|
664
673
|
0: {
|
|
665
674
|
className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 xw4jnvo x1ymw6g xkagaj0 xdt5ytf xl56j7k x1ypdohk x16khyan"
|
|
666
675
|
},
|
|
@@ -673,7 +682,7 @@ export function Slider({
|
|
|
673
682
|
3: {
|
|
674
683
|
className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 x1qx5ct2 x80b3aj xh8yej3 xbyyjgo xt0e3qv"
|
|
675
684
|
}
|
|
676
|
-
}[!!isHorizontal << 1 | !!isDisabled << 0],
|
|
685
|
+
}[!!isHorizontal << 1 | !!isDisabled << 0]),
|
|
677
686
|
children: [/*#__PURE__*/_jsx("div", {
|
|
678
687
|
"aria-hidden": "true",
|
|
679
688
|
...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
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAmS9C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC9D,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;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;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,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,aAAqB,EACrB,YAAoB,EACpB,MAAM,EACN,IAAW,EACX,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,+BA0Mb;yBArOe,MAAM"}
|
package/dist/Switch/Switch.js
CHANGED
|
@@ -97,6 +97,15 @@ const thumbOnSizeStyles = {
|
|
|
97
97
|
$$css: true
|
|
98
98
|
}
|
|
99
99
|
};
|
|
100
|
+
|
|
101
|
+
// The pressed overlay, painted as a gradient layer OVER the track's and
|
|
102
|
+
// thumb's own fills so it composes with the on/off colors and the hover tint
|
|
103
|
+
// instead of replacing them. Same token Button's overlay paints with. The
|
|
104
|
+
// switch is a two-part control whose focusable input sits beside the track,
|
|
105
|
+
// so the press is read off the shared scope marker (the row), the way the
|
|
106
|
+
// hover tint already is: pressing the input, the track or the label all
|
|
107
|
+
// activate the row.
|
|
108
|
+
const pressedImage = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
|
|
100
109
|
const labelWrapperSizeStyles = {
|
|
101
110
|
sm: {
|
|
102
111
|
kAzted: "xisnujt",
|
|
@@ -169,6 +178,7 @@ const styles = {
|
|
|
169
178
|
kMzoRj: "xc342km x13rsnn2",
|
|
170
179
|
ksu8eU: "xng3xce xx61lck",
|
|
171
180
|
kVAM5u: "x1w1tqly",
|
|
181
|
+
kKwaWg: "x1xm682w",
|
|
172
182
|
$$css: true
|
|
173
183
|
},
|
|
174
184
|
trackFocus: {
|
|
@@ -201,6 +211,7 @@ const styles = {
|
|
|
201
211
|
k1ekBW: "xh3q6i0",
|
|
202
212
|
kIyJzY: "xuedmi6 x12w9bfk",
|
|
203
213
|
kAMwcw: "xlr8y92",
|
|
214
|
+
kKwaWg: "x1xm682w",
|
|
204
215
|
$$css: true
|
|
205
216
|
},
|
|
206
217
|
thumbOff: {
|
package/dist/TabList/Tab.d.ts
CHANGED
|
@@ -79,7 +79,7 @@ export interface TabProps extends BaseProps<HTMLButtonElement> {
|
|
|
79
79
|
* </TabList>
|
|
80
80
|
* ```
|
|
81
81
|
*/
|
|
82
|
-
export declare function Tab({ as, ref, value, label, isLabelHidden, href, panelId, icon, selectedIcon, endContent, xstyle, className, style, ...restProps }: TabProps): React.JSX.Element;
|
|
82
|
+
export declare function Tab({ as, ref, value, label, isLabelHidden, href, panelId, icon, selectedIcon, endContent, xstyle, className, style, onClick, ...restProps }: TabProps): React.JSX.Element;
|
|
83
83
|
export declare namespace Tab {
|
|
84
84
|
var displayName: string;
|
|
85
85
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAOrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;
|
|
1
|
+
{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAOrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AA4ID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,SAAS,EACb,EAAE,QAAQ,qBA8KV;yBA9Le,GAAG"}
|
package/dist/TabList/Tab.js
CHANGED
|
@@ -66,7 +66,7 @@ const styles = {
|
|
|
66
66
|
kzqmXN: "xh8yej3",
|
|
67
67
|
kaIpWk: "xh6dtrn",
|
|
68
68
|
kfzvcC: "x47corl",
|
|
69
|
-
kWkggS: "xjbqb8w x1a1zr74",
|
|
69
|
+
kWkggS: "xjbqb8w x1a1zr74 x6ipy2d x74x3iv",
|
|
70
70
|
k1ekBW: "x15406qy",
|
|
71
71
|
kIyJzY: "xuedmi6",
|
|
72
72
|
kAMwcw: "xlr8y92",
|
|
@@ -166,6 +166,7 @@ export function Tab({
|
|
|
166
166
|
xstyle,
|
|
167
167
|
className,
|
|
168
168
|
style,
|
|
169
|
+
onClick,
|
|
169
170
|
...restProps
|
|
170
171
|
}) {
|
|
171
172
|
const tabListCtx = useTabListContext();
|
|
@@ -178,9 +179,17 @@ export function Tab({
|
|
|
178
179
|
const isTabRole = isTabsPattern && !isLink;
|
|
179
180
|
const displayIcon = isSelected && selectedIcon ? selectedIcon : icon;
|
|
180
181
|
const hasVisibleLabel = !isLabelHidden && label !== '';
|
|
181
|
-
const
|
|
182
|
-
|
|
183
|
-
|
|
182
|
+
const isDisabled = restProps['aria-disabled'] === true || restProps['aria-disabled'] === 'true';
|
|
183
|
+
const handleSelect = useCallback(event => {
|
|
184
|
+
if (isDisabled) {
|
|
185
|
+
event.preventDefault();
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
onClick?.(event);
|
|
189
|
+
if (!event.defaultPrevented) {
|
|
190
|
+
tabListCtx.onChange(value);
|
|
191
|
+
}
|
|
192
|
+
}, [isDisabled, onClick, tabListCtx, value]);
|
|
184
193
|
useDevWarning('Tab', 'href is ignored in a role="tablist" TabList — a tab swaps a panel in ' + 'place rather than navigating. Drop the href, or drop the role for the ' + 'navigation pattern.', isTabRole && href != null);
|
|
185
194
|
|
|
186
195
|
// A consumer who wired aria-controls by hand already said which panel this
|
|
@@ -223,7 +232,7 @@ export function Tab({
|
|
|
223
232
|
tabIndex: isSelected ? 0 : -1,
|
|
224
233
|
...mergeProps(themeProps('tab', {
|
|
225
234
|
selected: isSelected ? 'selected' : null
|
|
226
|
-
}), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isSelected && styles.selected, isFill && layoutStyles.fill, tabScope, xstyle), className, style)
|
|
235
|
+
}), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isSelected && styles.selected, isFill && layoutStyles.fill, !isDisabled && tabScope, xstyle), className, style)
|
|
227
236
|
};
|
|
228
237
|
const hoverBgElement = /*#__PURE__*/_jsx("span", {
|
|
229
238
|
"aria-hidden": "true",
|
|
@@ -265,9 +274,13 @@ export function Tab({
|
|
|
265
274
|
children: endContent
|
|
266
275
|
}) : null;
|
|
267
276
|
if (isLink) {
|
|
268
|
-
|
|
277
|
+
// A disabled link tab must not reach a router component: some routers reject
|
|
278
|
+
// a missing destination, while others treat it as the current route. A
|
|
279
|
+
// plain anchor without href preserves the element shape but cannot navigate.
|
|
280
|
+
const LinkRoot = isDisabled ? 'a' : LinkComponent;
|
|
281
|
+
return /*#__PURE__*/_jsxs(LinkRoot, {
|
|
269
282
|
ref: ref,
|
|
270
|
-
href: href,
|
|
283
|
+
href: isDisabled ? undefined : href,
|
|
271
284
|
onClick: handleSelect,
|
|
272
285
|
...sharedProps,
|
|
273
286
|
children: [hoverBgElement, iconElement, labelElement, endContentElement, indicatorElement]
|
|
@@ -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"}
|