@astryxdesign/core 0.1.2-canary.b753238 → 0.1.2-canary.bfcbf64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +1 -4
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +4 -2
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +14 -33
- package/dist/Calendar/hooks/index.d.ts +2 -0
- package/dist/Calendar/hooks/index.d.ts.map +1 -1
- package/dist/Calendar/hooks/index.js +2 -1
- package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts +57 -0
- package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts.map +1 -0
- package/dist/Calendar/hooks/useCalendarRovingTabindex.js +96 -0
- package/dist/Calendar/index.d.ts +2 -2
- package/dist/Calendar/index.d.ts.map +1 -1
- package/dist/Calendar/index.js +1 -1
- package/dist/CheckboxList/CheckboxList.js +3 -3
- package/dist/ContextMenu/ContextMenu.d.ts +7 -1
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +13 -7
- package/dist/DropdownMenu/DropdownMenu.d.ts +8 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +9 -4
- package/dist/Field/Field.d.ts +4 -4
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +2 -2
- package/dist/Field/FieldLabel.d.ts +4 -4
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +2 -2
- package/dist/InputGroup/InputGroup.js +3 -3
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +4 -2
- package/dist/MoreMenu/MoreMenu.d.ts +7 -1
- package/dist/MoreMenu/MoreMenu.d.ts.map +1 -1
- package/dist/MoreMenu/MoreMenu.js +2 -0
- package/dist/MultiSelector/MultiSelector.d.ts +2 -25
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +6 -31
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +4 -2
- package/dist/RadioList/RadioList.js +3 -3
- package/dist/SegmentedControl/SegmentedControl.d.ts +1 -1
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +61 -51
- package/dist/Selector/Selector.d.ts +1 -22
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +6 -31
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +4 -2
- package/dist/TabList/TabList.d.ts +2 -3
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +33 -55
- package/dist/Table/tableContextMenu.d.ts.map +1 -1
- package/dist/Table/tableContextMenu.js +3 -0
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +4 -2
- package/dist/Toolbar/Toolbar.d.ts +3 -3
- package/dist/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar/Toolbar.js +6 -46
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +22 -16
- package/dist/TreeList/TreeListItem.d.ts +2 -3
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/astryx.css +0 -3
- package/dist/astryx.umd.js +47 -47
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/index.d.ts +2 -4
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +0 -1
- package/dist/hooks/useGridFocus.d.ts +0 -56
- package/dist/hooks/useGridFocus.d.ts.map +1 -1
- package/dist/hooks/useGridFocus.js +24 -138
- package/dist/hooks/useTreeFocus.d.ts +3 -27
- package/dist/hooks/useTreeFocus.d.ts.map +1 -1
- package/dist/hooks/useTreeFocus.js +6 -69
- package/package.json +1 -1
- package/src/Breadcrumbs/BreadcrumbItem.tsx +2 -5
- package/src/Button/Button.tsx +16 -3
- package/src/Calendar/Calendar.tsx +22 -52
- package/src/Calendar/hooks/index.ts +6 -0
- package/src/Calendar/hooks/useCalendarRovingTabindex.ts +118 -0
- package/src/Calendar/index.ts +3 -0
- package/src/CheckboxList/CheckboxList.tsx +3 -3
- package/src/ContextMenu/ContextMenu.doc.mjs +6 -0
- package/src/ContextMenu/ContextMenu.test.tsx +6 -4
- package/src/ContextMenu/ContextMenu.tsx +19 -7
- package/src/DropdownMenu/DropdownMenu.doc.mjs +8 -1
- package/src/DropdownMenu/DropdownMenu.test.tsx +23 -0
- package/src/DropdownMenu/DropdownMenu.tsx +16 -4
- package/src/Field/Field.test.tsx +2 -2
- package/src/Field/Field.tsx +5 -5
- package/src/Field/FieldLabel.tsx +5 -5
- package/src/InputGroup/InputGroup.tsx +3 -3
- package/src/Link/Link.tsx +13 -2
- package/src/MoreMenu/MoreMenu.doc.mjs +17 -2
- package/src/MoreMenu/MoreMenu.tsx +9 -0
- package/src/MultiSelector/MultiSelector.doc.mjs +0 -25
- package/src/MultiSelector/MultiSelector.test.tsx +1 -150
- package/src/MultiSelector/MultiSelector.tsx +3 -55
- package/src/ProgressBar/ProgressBar.tsx +3 -2
- package/src/RadioList/RadioList.tsx +3 -3
- package/src/SegmentedControl/SegmentedControl.tsx +77 -51
- package/src/Selector/Selector.doc.mjs +0 -21
- package/src/Selector/Selector.test.tsx +1 -123
- package/src/Selector/Selector.tsx +3 -53
- package/src/Switch/Switch.tsx +16 -2
- package/src/TabList/TabList.test.tsx +0 -41
- package/src/TabList/TabList.tsx +39 -66
- package/src/Table/tableContextMenu.tsx +5 -1
- package/src/TextArea/TextArea.tsx +13 -3
- package/src/Toolbar/Toolbar.test.tsx +6 -64
- package/src/Toolbar/Toolbar.tsx +4 -55
- package/src/TreeList/TreeList.tsx +28 -17
- package/src/TreeList/TreeListItem.tsx +2 -3
- package/src/VisuallyHidden/VisuallyHidden.doc.mjs +7 -7
- package/src/hooks/index.ts +5 -12
- package/src/hooks/useGridFocus.doc.mjs +2 -40
- package/src/hooks/useGridFocus.ts +23 -179
- package/src/hooks/useTreeFocus.doc.mjs +1 -15
- package/src/hooks/useTreeFocus.ts +6 -101
- package/dist/hooks/useKeyboardHint.d.ts +0 -82
- package/dist/hooks/useKeyboardHint.d.ts.map +0 -1
- package/dist/hooks/useKeyboardHint.js +0 -220
- package/src/hooks/useGridFocus.test.tsx +0 -132
- package/src/hooks/useKeyboardHint.doc.mjs +0 -101
- package/src/hooks/useKeyboardHint.test.tsx +0 -70
- package/src/hooks/useKeyboardHint.tsx +0 -332
|
@@ -22,7 +22,7 @@ export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
|
|
|
22
22
|
/**
|
|
23
23
|
* ID of the input element this label points AT (rendered as `htmlFor` on the
|
|
24
24
|
* label). This is *not* the id of the label element itself — see
|
|
25
|
-
* `
|
|
25
|
+
* `labelElementID` for that.
|
|
26
26
|
*/
|
|
27
27
|
inputID: string;
|
|
28
28
|
/**
|
|
@@ -31,14 +31,14 @@ export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
|
|
|
31
31
|
* reference this via `aria-labelledby` to take the label as its accessible
|
|
32
32
|
* name.
|
|
33
33
|
*/
|
|
34
|
-
|
|
34
|
+
labelElementID?: string;
|
|
35
35
|
/**
|
|
36
36
|
* When true, the field wraps a *group* of controls (e.g. a radiogroup)
|
|
37
37
|
* rather than a single input. In that case the label is rendered as a
|
|
38
38
|
* `<span>` instead of a `<label>` — a `<label>` semantically names one form
|
|
39
39
|
* control and can't be associated with a group, so it must not be a literal
|
|
40
40
|
* label element. The group takes the label as its name via
|
|
41
|
-
* `
|
|
41
|
+
* `labelElementID` + `aria-labelledby`.
|
|
42
42
|
* @default false
|
|
43
43
|
*/
|
|
44
44
|
isGroupLabel?: boolean;
|
|
@@ -95,7 +95,7 @@ export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
|
|
|
95
95
|
* <FieldLabel label="Search" inputID={inputId} isLabelHidden />
|
|
96
96
|
* ```
|
|
97
97
|
*/
|
|
98
|
-
export declare function FieldLabel({ label, inputID,
|
|
98
|
+
export declare function FieldLabel({ label, inputID, labelElementID, isGroupLabel, isLabelHidden, isDisabled, isOptional, isRequired, labelIcon, labelTooltip, description, descriptionID, ref, }: FieldLabelProps): import("react").JSX.Element;
|
|
99
99
|
export declare namespace FieldLabel {
|
|
100
100
|
var displayName: string;
|
|
101
101
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAkD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,
|
|
1
|
+
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAkD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,cAAc,EACd,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,GAAG,GACJ,EAAE,eAAe,+BAsDjB;yBApEe,UAAU"}
|
package/dist/Field/FieldLabel.js
CHANGED
|
@@ -36,7 +36,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
36
36
|
export function FieldLabel({
|
|
37
37
|
label,
|
|
38
38
|
inputID,
|
|
39
|
-
|
|
39
|
+
labelElementID,
|
|
40
40
|
isGroupLabel = false,
|
|
41
41
|
isLabelHidden = false,
|
|
42
42
|
isDisabled = false,
|
|
@@ -80,7 +80,7 @@ export function FieldLabel({
|
|
|
80
80
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
81
81
|
children: [/*#__PURE__*/_jsx(LabelElement, {
|
|
82
82
|
ref: ref,
|
|
83
|
-
id:
|
|
83
|
+
id: labelElementID
|
|
84
84
|
// `htmlFor` only applies to a real `<label>` associating with a single
|
|
85
85
|
// control; a group label (span) has no `htmlFor`.
|
|
86
86
|
,
|
|
@@ -88,7 +88,7 @@ export function InputGroup({
|
|
|
88
88
|
}) {
|
|
89
89
|
const size = useSize(sizeProp, 'md');
|
|
90
90
|
const inputId = useId();
|
|
91
|
-
const
|
|
91
|
+
const labelElementId = useId();
|
|
92
92
|
const statusMessageId = useId();
|
|
93
93
|
const contextValue = useMemo(() => ({
|
|
94
94
|
isInGroup: true
|
|
@@ -102,7 +102,7 @@ export function InputGroup({
|
|
|
102
102
|
isLabelHidden: isLabelHidden,
|
|
103
103
|
description: description,
|
|
104
104
|
inputID: inputId,
|
|
105
|
-
|
|
105
|
+
labelElementID: labelElementId,
|
|
106
106
|
isGroupLabel: true,
|
|
107
107
|
isOptional: isOptional,
|
|
108
108
|
isRequired: isRequired,
|
|
@@ -117,7 +117,7 @@ export function InputGroup({
|
|
|
117
117
|
children: /*#__PURE__*/_jsx("div", {
|
|
118
118
|
ref: ref,
|
|
119
119
|
role: "group",
|
|
120
|
-
"aria-labelledby":
|
|
120
|
+
"aria-labelledby": labelElementId,
|
|
121
121
|
"data-testid": testId,
|
|
122
122
|
...rest,
|
|
123
123
|
...mergeProps(themeProps('input-group', {
|
package/dist/Link/Link.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,OAAO,KAAK,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAkH/C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,iBAAiB,GAAG,iBAAiB,CACtC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACvD;;;;;OAKG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAoB,EACpB,UAAkB,EAClB,cAAsB,EACtB,WAAkC,EAClC,MAAM,EAAE,eAAe,EACvB,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,IAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAgB,EAChB,OAAkB,EAClB,QAAY,EACZ,QAAQ,EACR,GAAG,EAAE,YAAY,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAwGX;yBAjIe,IAAI"}
|
package/dist/Link/Link.js
CHANGED
|
@@ -21,7 +21,6 @@ import { colorVars, durationVars, easeVars, spacingVars, typeScaleVars } from ".
|
|
|
21
21
|
import { Icon } from "../Icon/index.js";
|
|
22
22
|
import { Tooltip } from "../Tooltip/index.js";
|
|
23
23
|
import { Text } from "../Text/index.js";
|
|
24
|
-
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
25
24
|
import { useLinkComponent } from "./useLinkComponent.js";
|
|
26
25
|
import { mergeProps } from "../utils/index.js";
|
|
27
26
|
import { computeTargetAndRel } from "./computeTargetAndRel.js";
|
|
@@ -180,7 +179,10 @@ export function Link({
|
|
|
180
179
|
icon: "externalLink",
|
|
181
180
|
size: "xsm",
|
|
182
181
|
color: "inherit"
|
|
183
|
-
}), /*#__PURE__*/_jsx(
|
|
182
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
183
|
+
...{
|
|
184
|
+
className: "x10l6tqk x1i1rx1s xjm9jq1 xkdpibf x1717udv xb3r6kr xzpqnlu xuxw1ft xng3xce"
|
|
185
|
+
},
|
|
184
186
|
children: newTabLabel
|
|
185
187
|
})]
|
|
186
188
|
})]
|
|
@@ -59,6 +59,12 @@ export interface MoreMenuProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
59
59
|
* Callback fired when the menu visibility changes.
|
|
60
60
|
*/
|
|
61
61
|
onOpenChange?: (isOpen: boolean) => void;
|
|
62
|
+
/**
|
|
63
|
+
* Whether to auto-focus the first menu item when the menu opens.
|
|
64
|
+
* Set to `false` for inline showcases or documentation previews.
|
|
65
|
+
* @default true
|
|
66
|
+
*/
|
|
67
|
+
hasAutoFocus?: boolean;
|
|
62
68
|
/** Test ID for testing frameworks. */
|
|
63
69
|
'data-testid'?: string;
|
|
64
70
|
}
|
|
@@ -77,7 +83,7 @@ export interface MoreMenuProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
77
83
|
* />
|
|
78
84
|
* ```
|
|
79
85
|
*/
|
|
80
|
-
export declare function MoreMenu({ items, label, variant, size: sizeProp, icon, isDisabled, isMenuOpen, onOpenChange, xstyle, className: classNameProp, style, 'data-testid': testId, ref, }: MoreMenuProps): import("react").JSX.Element;
|
|
86
|
+
export declare function MoreMenu({ items, label, variant, size: sizeProp, icon, isDisabled, isMenuOpen, onOpenChange, hasAutoFocus, xstyle, className: classNameProp, style, 'data-testid': testId, ref, }: MoreMenuProps): import("react").JSX.Element;
|
|
81
87
|
export declare namespace MoreMenu {
|
|
82
88
|
var displayName: string;
|
|
83
89
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MoreMenu.d.ts","sourceRoot":"","sources":["../../src/MoreMenu/MoreMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;;OAGG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAsB,EACtB,OAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+
|
|
1
|
+
{"version":3,"file":"MoreMenu.d.ts","sourceRoot":"","sources":["../../src/MoreMenu/MoreMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;;OAGG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAsB,EACtB,OAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BA+Bf;yBA9Ce,QAAQ"}
|
|
@@ -46,6 +46,7 @@ export function MoreMenu({
|
|
|
46
46
|
isDisabled = false,
|
|
47
47
|
isMenuOpen,
|
|
48
48
|
onOpenChange,
|
|
49
|
+
hasAutoFocus,
|
|
49
50
|
xstyle,
|
|
50
51
|
className: classNameProp,
|
|
51
52
|
style,
|
|
@@ -72,6 +73,7 @@ export function MoreMenu({
|
|
|
72
73
|
},
|
|
73
74
|
items: items,
|
|
74
75
|
hasChevron: false,
|
|
76
|
+
hasAutoFocus: hasAutoFocus,
|
|
75
77
|
"data-testid": testId
|
|
76
78
|
});
|
|
77
79
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file MultiSelector.tsx
|
|
3
|
-
* @input Uses React, StyleX, usePopover,
|
|
3
|
+
* @input Uses React, StyleX, usePopover, CheckboxInput, Field, Badge, Icon
|
|
4
4
|
* @output Exports MultiSelector component
|
|
5
5
|
* @position Core implementation; consumed by index.ts
|
|
6
6
|
*
|
|
@@ -46,29 +46,6 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
|
|
|
46
46
|
* @default false
|
|
47
47
|
*/
|
|
48
48
|
isDisabled?: boolean;
|
|
49
|
-
/**
|
|
50
|
-
* Explains why the selector is disabled. When set together with
|
|
51
|
-
* `isDisabled`, the selector shows a tooltip with this text on hover and
|
|
52
|
-
* keyboard focus, and the trigger stays focusable (via `aria-disabled`)
|
|
53
|
-
* so the reason is discoverable by keyboard and assistive technology.
|
|
54
|
-
* Activation stays blocked.
|
|
55
|
-
*
|
|
56
|
-
* Use this instead of wrapping a disabled selector in `Tooltip` — disabled
|
|
57
|
-
* controls don't emit the pointer events an external tooltip needs.
|
|
58
|
-
*
|
|
59
|
-
* @example
|
|
60
|
-
* ```
|
|
61
|
-
* <MultiSelector
|
|
62
|
-
* label="Columns"
|
|
63
|
-
* options={columns}
|
|
64
|
-
* value={selected}
|
|
65
|
-
* onChange={setSelected}
|
|
66
|
-
* isDisabled
|
|
67
|
-
* disabledMessage="Select a table first"
|
|
68
|
-
* />
|
|
69
|
-
* ```
|
|
70
|
-
*/
|
|
71
|
-
disabledMessage?: string;
|
|
72
49
|
/**
|
|
73
50
|
* The options to display in the selector.
|
|
74
51
|
* Can be strings, objects, dividers, or sections.
|
|
@@ -190,7 +167,7 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
|
|
|
190
167
|
* />
|
|
191
168
|
* ```
|
|
192
169
|
*/
|
|
193
|
-
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled,
|
|
170
|
+
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, options, value, onChange, changeAction, isLoading, placeholder, size: sizeProp, status, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel, hasSearch, searchPlaceholder, triggerDisplay, maxBadges, renderOption, isDefaultOpen, 'data-testid': testId, width, xstyle, className, style, }: MultiSelectorProps<T>): React.JSX.Element;
|
|
194
171
|
export declare namespace MultiSelector {
|
|
195
172
|
var displayName: string;
|
|
196
173
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file MultiSelector.tsx
|
|
7
|
-
* @input Uses React, StyleX, usePopover,
|
|
7
|
+
* @input Uses React, StyleX, usePopover, CheckboxInput, Field, Badge, Icon
|
|
8
8
|
* @output Exports MultiSelector component
|
|
9
9
|
* @position Core implementation; consumed by index.ts
|
|
10
10
|
*
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
import React, { useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
|
|
17
17
|
import * as stylex from '@stylexjs/stylex';
|
|
18
18
|
import { usePopover } from "../Popover/usePopover.js";
|
|
19
|
-
import { useTooltip } from "../Tooltip/index.js";
|
|
20
19
|
import { Icon, renderIconSlot } from "../Icon/index.js";
|
|
21
20
|
import { Field, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
|
|
22
21
|
import { Divider } from "../Divider/index.js";
|
|
@@ -176,7 +175,6 @@ export function MultiSelector({
|
|
|
176
175
|
isOptional = false,
|
|
177
176
|
isRequired = false,
|
|
178
177
|
isDisabled = false,
|
|
179
|
-
disabledMessage,
|
|
180
178
|
options,
|
|
181
179
|
value,
|
|
182
180
|
onChange,
|
|
@@ -220,22 +218,8 @@ export function MultiSelector({
|
|
|
220
218
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
221
219
|
const isBusy = isLoading || optimisticValue !== value;
|
|
222
220
|
|
|
223
|
-
// Disabled-reason tooltip. Disabled controls swallow pointer events, so the
|
|
224
|
-
// tooltip listeners attach to the trigger container (which already exists)
|
|
225
|
-
// and the trigger button stays perceivable via aria-disabled instead of the
|
|
226
|
-
// disabled attribute. Activation is blocked by the isDisabled guards in
|
|
227
|
-
// useMultiCombobox (onTriggerClick / onKeyDown).
|
|
228
|
-
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
229
|
-
const disabledMessageTooltip = useTooltip({
|
|
230
|
-
placement: 'above',
|
|
231
|
-
// The container div is not naturally focusable; focusin bubbles up from
|
|
232
|
-
// the trigger button, so always attach focus listeners.
|
|
233
|
-
focusTrigger: 'always',
|
|
234
|
-
isEnabled: showsDisabledMessage
|
|
235
|
-
});
|
|
236
|
-
|
|
237
221
|
// Build aria-describedby
|
|
238
|
-
const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null
|
|
222
|
+
const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null].filter(Boolean).join(' ') || undefined;
|
|
239
223
|
|
|
240
224
|
// Flatten options for keyboard navigation
|
|
241
225
|
const selectableItems = useMemo(() => getSelectableOptions(options), [options]);
|
|
@@ -702,10 +686,6 @@ export function MultiSelector({
|
|
|
702
686
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
703
687
|
ref: el => {
|
|
704
688
|
popover.triggerRef(el);
|
|
705
|
-
// Anchor + hover/focus listeners for the disabled-message tooltip.
|
|
706
|
-
// Handlers are gated internally by isEnabled, and anchor names
|
|
707
|
-
// compose, so attaching unconditionally is safe.
|
|
708
|
-
disabledMessageTooltip.ref(el);
|
|
709
689
|
},
|
|
710
690
|
onClick: onTriggerClick,
|
|
711
691
|
"data-testid": testId,
|
|
@@ -732,15 +712,10 @@ export function MultiSelector({
|
|
|
732
712
|
"aria-describedby": ariaDescribedBy,
|
|
733
713
|
"aria-required": isRequired ? 'true' : undefined,
|
|
734
714
|
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
735
|
-
"aria-busy": isBusy || undefined
|
|
736
|
-
|
|
737
|
-
// aria-disabled so the reason is focus-discoverable; activation is
|
|
738
|
-
// still blocked by the isDisabled guards in useMultiCombobox.
|
|
739
|
-
,
|
|
740
|
-
disabled: isDisabled && !showsDisabledMessage,
|
|
741
|
-
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
715
|
+
"aria-busy": isBusy || undefined,
|
|
716
|
+
disabled: isDisabled,
|
|
742
717
|
onKeyDown: onKeyDown,
|
|
743
|
-
tabIndex: isDisabled
|
|
718
|
+
tabIndex: isDisabled ? -1 : 0,
|
|
744
719
|
...{
|
|
745
720
|
className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz x1p25gnr x1wfwxd8 xh6dtrn"
|
|
746
721
|
},
|
|
@@ -804,7 +779,7 @@ export function MultiSelector({
|
|
|
804
779
|
placement: 'below',
|
|
805
780
|
alignment: 'start',
|
|
806
781
|
xstyle: styles.popover
|
|
807
|
-
})
|
|
782
|
+
})]
|
|
808
783
|
});
|
|
809
784
|
}
|
|
810
785
|
MultiSelector.displayName = 'MultiSelector';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkHD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAmFlB;yBAnGe,WAAW"}
|
|
@@ -21,7 +21,6 @@ import "../theme/tokens.stylex.js";
|
|
|
21
21
|
import { colorVars, spacingVars, radiusVars, fontWeightVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { mergeProps } from "../utils/index.js";
|
|
23
23
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
|
-
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
25
24
|
|
|
26
25
|
/**
|
|
27
26
|
* Extensible variant map for ProgressBar.
|
|
@@ -195,8 +194,11 @@ export function ProgressBar({
|
|
|
195
194
|
}[!!isDisabled << 0],
|
|
196
195
|
children: valueText
|
|
197
196
|
})]
|
|
198
|
-
}) : /*#__PURE__*/_jsx(
|
|
197
|
+
}) : /*#__PURE__*/_jsx("span", {
|
|
199
198
|
id: labelId,
|
|
199
|
+
...{
|
|
200
|
+
className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
|
|
201
|
+
},
|
|
200
202
|
children: label
|
|
201
203
|
}), /*#__PURE__*/_jsx("div", {
|
|
202
204
|
role: "progressbar",
|
|
@@ -67,7 +67,7 @@ export function RadioList({
|
|
|
67
67
|
}) {
|
|
68
68
|
const name = useId();
|
|
69
69
|
const inputID = useId();
|
|
70
|
-
const
|
|
70
|
+
const labelElementID = useId();
|
|
71
71
|
const descriptionID = useId();
|
|
72
72
|
const statusMessageID = useId();
|
|
73
73
|
const groupRef = useRef(null);
|
|
@@ -154,7 +154,7 @@ export function RadioList({
|
|
|
154
154
|
isLabelHidden: isLabelHidden,
|
|
155
155
|
description: description,
|
|
156
156
|
inputID: inputID,
|
|
157
|
-
|
|
157
|
+
labelElementID: labelElementID,
|
|
158
158
|
isGroupLabel: true,
|
|
159
159
|
descriptionID: description ? descriptionID : undefined,
|
|
160
160
|
isOptional: isOptional,
|
|
@@ -174,7 +174,7 @@ export function RadioList({
|
|
|
174
174
|
children: /*#__PURE__*/_jsx("div", {
|
|
175
175
|
ref: groupRef,
|
|
176
176
|
role: "radiogroup",
|
|
177
|
-
"aria-labelledby":
|
|
177
|
+
"aria-labelledby": labelElementID,
|
|
178
178
|
onFocus: handleFocus,
|
|
179
179
|
"aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined,
|
|
180
180
|
"aria-invalid": status?.type === 'error' ? true : undefined,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file SegmentedControl.tsx
|
|
3
|
-
* @input Uses React, StyleX, SegmentedControlContext
|
|
3
|
+
* @input Uses React, StyleX, SegmentedControlContext
|
|
4
4
|
* @output Exports SegmentedControl component and SegmentedControlProps type
|
|
5
5
|
* @position Container wrapper; provides context to SegmentedControlItem children
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK1E,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAwCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,qBAmHvB;yBA/He,gBAAgB"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file SegmentedControl.tsx
|
|
7
|
-
* @input Uses React, StyleX, SegmentedControlContext
|
|
7
|
+
* @input Uses React, StyleX, SegmentedControlContext
|
|
8
8
|
* @output Exports SegmentedControl component and SegmentedControlProps type
|
|
9
9
|
* @position Container wrapper; provides context to SegmentedControlItem children
|
|
10
10
|
*
|
|
@@ -14,17 +14,16 @@
|
|
|
14
14
|
* - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
|
|
15
15
|
* - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
|
|
16
16
|
*/
|
|
17
|
-
import React, { useMemo, useCallback } from 'react';
|
|
17
|
+
import React, { useMemo, useRef, useCallback } from 'react';
|
|
18
18
|
import * as stylex from '@stylexjs/stylex';
|
|
19
19
|
import "../theme/tokens.stylex.js";
|
|
20
20
|
import { colorVars, spacingVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
21
21
|
import { SegmentedControlContext } from "./SegmentedControlContext.js";
|
|
22
|
-
import {
|
|
23
|
-
import { useKeyboardHint } from "../hooks/useKeyboardHint.js";
|
|
22
|
+
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
24
23
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
25
24
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
26
25
|
import { themeProps } from "../utils/themeProps.js";
|
|
27
|
-
import {
|
|
26
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
28
27
|
// =============================================================================
|
|
29
28
|
// Styles
|
|
30
29
|
// =============================================================================
|
|
@@ -95,53 +94,45 @@ export function SegmentedControl({
|
|
|
95
94
|
style
|
|
96
95
|
}) {
|
|
97
96
|
const size = useSize(sizeProp, 'md');
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
// useListFocus primitive: it stamps a single tab stop (tabIndex 0/-1) across
|
|
101
|
-
// the radios, skips disabled ones, wraps at the ends, handles Home/End, and
|
|
102
|
-
// repairs the tab stop on mount and whenever items mount/disable — replacing
|
|
103
|
-
// the component's former inline keyboard handler and tab-stop repair effect.
|
|
104
|
-
const {
|
|
105
|
-
listRef,
|
|
106
|
-
handleKeyDown,
|
|
107
|
-
handleFocus
|
|
108
|
-
} = useListFocus({
|
|
109
|
-
itemSelector: '[role="radio"]:not([aria-disabled="true"])',
|
|
110
|
-
hasRovingTabIndex: true,
|
|
111
|
-
wrap: true,
|
|
112
|
-
orientation: 'horizontal'
|
|
113
|
-
});
|
|
114
|
-
const hint = useKeyboardHint({
|
|
115
|
-
orientation: 'horizontal',
|
|
116
|
-
isEnabled: !isDisabled
|
|
117
|
-
});
|
|
118
|
-
const handleContainerKeyDown = useCallback(e => {
|
|
119
|
-
hint.onKeyDown(e);
|
|
120
|
-
handleKeyDown(e);
|
|
121
|
-
}, [hint, handleKeyDown]);
|
|
122
|
-
|
|
123
|
-
// Selection-follows-focus (APG radiogroup): useListFocus only *moves* focus,
|
|
124
|
-
// so whenever it lands focus on a new radio (arrow/Home/End, or a click) we
|
|
125
|
-
// select that radio's value. Reading the focused element's data-value here
|
|
126
|
-
// keeps selection in lockstep with focus without duplicating the navigation
|
|
127
|
-
// logic. Disabled radios are ignored (they should never become the value),
|
|
128
|
-
// and the already-selected value is skipped so an initial Tab-in (or a click
|
|
129
|
-
// on the current segment) is a no-op, matching click behavior.
|
|
130
|
-
const handleContainerFocus = useCallback(e => {
|
|
131
|
-
hint.onFocus(e);
|
|
132
|
-
handleFocus(e);
|
|
97
|
+
const containerRef = useRef(null);
|
|
98
|
+
const handleKeyDown = useCallback(e => {
|
|
133
99
|
if (isDisabled) {
|
|
134
100
|
return;
|
|
135
101
|
}
|
|
136
|
-
const
|
|
137
|
-
if (!
|
|
102
|
+
const container = containerRef.current;
|
|
103
|
+
if (!container) {
|
|
138
104
|
return;
|
|
139
105
|
}
|
|
140
|
-
const
|
|
141
|
-
if (
|
|
106
|
+
const items = Array.from(container.querySelectorAll('[role="radio"]:not([aria-disabled="true"])'));
|
|
107
|
+
if (items.length === 0) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
const currentIndex = items.findIndex(item => item === document.activeElement);
|
|
111
|
+
let nextIndex;
|
|
112
|
+
switch (e.key) {
|
|
113
|
+
case 'ArrowRight':
|
|
114
|
+
nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
|
|
115
|
+
break;
|
|
116
|
+
case 'ArrowLeft':
|
|
117
|
+
nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
|
|
118
|
+
break;
|
|
119
|
+
case 'Home':
|
|
120
|
+
nextIndex = 0;
|
|
121
|
+
break;
|
|
122
|
+
case 'End':
|
|
123
|
+
nextIndex = items.length - 1;
|
|
124
|
+
break;
|
|
125
|
+
default:
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
128
|
+
e.preventDefault();
|
|
129
|
+
const nextItem = items[nextIndex];
|
|
130
|
+
nextItem.focus();
|
|
131
|
+
const nextValue = nextItem.dataset.value;
|
|
132
|
+
if (nextValue != null) {
|
|
142
133
|
onChange(nextValue);
|
|
143
134
|
}
|
|
144
|
-
}, [
|
|
135
|
+
}, [isDisabled, onChange]);
|
|
145
136
|
const contextValue = useMemo(() => ({
|
|
146
137
|
value,
|
|
147
138
|
onChange,
|
|
@@ -149,20 +140,39 @@ export function SegmentedControl({
|
|
|
149
140
|
layout,
|
|
150
141
|
isDisabled
|
|
151
142
|
}), [value, onChange, size, layout, isDisabled]);
|
|
143
|
+
|
|
144
|
+
// Tab-stop repair (navigation-6): each item sets tabIndex=0 only when its
|
|
145
|
+
// value matches the group value, so a stale/unmatched `value` (or a disabled
|
|
146
|
+
// selected item) can leave every segment at tabIndex=-1 — making the whole
|
|
147
|
+
// radiogroup unreachable by Tab. After render, if no enabled radio is
|
|
148
|
+
// tabbable, promote the first enabled radio to tabIndex=0 so the group always
|
|
149
|
+
// has exactly one tab stop. Mirrors Base UI's Composite tab-stop repair.
|
|
150
|
+
useIsomorphicLayoutEffect(() => {
|
|
151
|
+
const container = containerRef.current;
|
|
152
|
+
if (!container) {
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
const enabled = Array.from(container.querySelectorAll('[role="radio"]:not([aria-disabled="true"])'));
|
|
156
|
+
if (enabled.length === 0) {
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
159
|
+
const hasTabStop = enabled.some(el => el.tabIndex === 0);
|
|
160
|
+
if (!hasTabStop) {
|
|
161
|
+
enabled[0].tabIndex = 0;
|
|
162
|
+
}
|
|
163
|
+
});
|
|
152
164
|
return /*#__PURE__*/_jsx(SegmentedControlContext, {
|
|
153
165
|
value: contextValue,
|
|
154
|
-
children: /*#__PURE__*/
|
|
155
|
-
ref: mergeRefs(ref,
|
|
166
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
167
|
+
ref: mergeRefs(ref, containerRef),
|
|
156
168
|
role: "radiogroup",
|
|
157
169
|
"aria-label": label,
|
|
158
170
|
"aria-disabled": isDisabled || undefined,
|
|
159
|
-
onKeyDown:
|
|
160
|
-
onFocus: handleContainerFocus,
|
|
161
|
-
onBlur: hint.onBlur,
|
|
171
|
+
onKeyDown: handleKeyDown,
|
|
162
172
|
...mergeProps(themeProps('segmented-control', {
|
|
163
173
|
size
|
|
164
174
|
}), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, isDisabled && styles.disabled, xstyle), className, style),
|
|
165
|
-
children:
|
|
175
|
+
children: children
|
|
166
176
|
})
|
|
167
177
|
});
|
|
168
178
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Selector.tsx
|
|
3
|
-
* @input Uses React, StyleX, usePopover,
|
|
3
|
+
* @input Uses React, StyleX, usePopover, Icon
|
|
4
4
|
* @output Exports Selector component
|
|
5
5
|
* @position Core implementation; consumed by index.ts
|
|
6
6
|
*
|
|
@@ -56,27 +56,6 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
|
|
|
56
56
|
* @default false
|
|
57
57
|
*/
|
|
58
58
|
isDisabled?: boolean;
|
|
59
|
-
/**
|
|
60
|
-
* Explains why the selector is disabled. When set together with
|
|
61
|
-
* `isDisabled`, the selector shows a tooltip with this text on hover and
|
|
62
|
-
* keyboard focus, and the trigger stays focusable (via `aria-disabled`)
|
|
63
|
-
* so the reason is discoverable by keyboard and assistive technology.
|
|
64
|
-
* Activation stays blocked.
|
|
65
|
-
*
|
|
66
|
-
* Use this instead of wrapping a disabled selector in `Tooltip` — disabled
|
|
67
|
-
* controls don't emit the pointer events an external tooltip needs.
|
|
68
|
-
*
|
|
69
|
-
* @example
|
|
70
|
-
* ```
|
|
71
|
-
* <Selector
|
|
72
|
-
* label="Owner"
|
|
73
|
-
* options={owners}
|
|
74
|
-
* isDisabled
|
|
75
|
-
* disabledMessage="You need the Editor role to change this"
|
|
76
|
-
* />
|
|
77
|
-
* ```
|
|
78
|
-
*/
|
|
79
|
-
disabledMessage?: string;
|
|
80
59
|
/**
|
|
81
60
|
* The options to display in the selector.
|
|
82
61
|
* Can be strings, objects, dividers, or sections.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
|