@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
|
@@ -59,7 +59,7 @@ export interface BreadcrumbItemProps extends Omit<BaseProps<HTMLLIElement>, 'onC
|
|
|
59
59
|
* <BreadcrumbItem isCurrent>My Project</BreadcrumbItem>
|
|
60
60
|
* ```
|
|
61
61
|
*/
|
|
62
|
-
export declare function BreadcrumbItem({ ref, as, children, href, onClick, isCurrent: isCurrentProp, startIcon, xstyle, className, style, 'data-testid': testId,
|
|
62
|
+
export declare function BreadcrumbItem({ ref, as, children, href, onClick, isCurrent: isCurrentProp, startIcon, xstyle, className, style, 'data-testid': testId, }: BreadcrumbItemProps): React.JSX.Element;
|
|
63
63
|
export declare namespace BreadcrumbItem {
|
|
64
64
|
var displayName: string;
|
|
65
65
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,mBAAmB,qBAqJrB;yBAjKe,cAAc"}
|
|
@@ -82,8 +82,7 @@ export function BreadcrumbItem({
|
|
|
82
82
|
xstyle,
|
|
83
83
|
className,
|
|
84
84
|
style,
|
|
85
|
-
'data-testid': testId
|
|
86
|
-
...rest
|
|
85
|
+
'data-testid': testId
|
|
87
86
|
}) {
|
|
88
87
|
const ctx = use(BreadcrumbContext);
|
|
89
88
|
const LinkComponent = useLinkComponent(as);
|
|
@@ -145,7 +144,6 @@ export function BreadcrumbItem({
|
|
|
145
144
|
ref: mergeRefs(ref, liRef),
|
|
146
145
|
...mergeProps(themeProps('breadcrumb-item'), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
|
|
147
146
|
"data-testid": testId,
|
|
148
|
-
...rest,
|
|
149
147
|
children: [/*#__PURE__*/_jsx("span", {
|
|
150
148
|
"aria-hidden": "true",
|
|
151
149
|
...{
|
|
@@ -173,7 +171,6 @@ export function BreadcrumbItem({
|
|
|
173
171
|
ref: mergeRefs(ref, liRef),
|
|
174
172
|
...mergeProps(themeProps('breadcrumb-item'), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
|
|
175
173
|
"data-testid": testId,
|
|
176
|
-
...rest,
|
|
177
174
|
children: [/*#__PURE__*/_jsx("span", {
|
|
178
175
|
"aria-hidden": "true",
|
|
179
176
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -23,7 +23,6 @@ import "../theme/tokens.stylex.js";
|
|
|
23
23
|
import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
24
24
|
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
25
25
|
import { Spinner } from "../Spinner/index.js";
|
|
26
|
-
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
27
26
|
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
|
|
28
27
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
29
28
|
import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
@@ -414,7 +413,10 @@ export function Button({
|
|
|
414
413
|
},
|
|
415
414
|
children: endContent
|
|
416
415
|
})]
|
|
417
|
-
}), /*#__PURE__*/_jsx(
|
|
416
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
417
|
+
...{
|
|
418
|
+
className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
|
|
419
|
+
},
|
|
418
420
|
role: "status",
|
|
419
421
|
"aria-live": "polite",
|
|
420
422
|
children: isLoadingState ? 'Loading' : ''
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAI5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BA4RtD;yBA5Re,QAAQ"}
|
|
@@ -21,7 +21,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
21
21
|
import { Button } from "../Button/index.js";
|
|
22
22
|
import { Icon } from "../Icon/index.js";
|
|
23
23
|
import { useGridFocus } from "../hooks/index.js";
|
|
24
|
-
import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
|
|
24
|
+
import { useCalendarDays, useCalendarConstraints, useCalendarRovingTabindex } from "./hooks/index.js";
|
|
25
25
|
import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./styles.js";
|
|
26
26
|
import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
|
|
27
27
|
import { mergeProps } from "../utils/index.js";
|
|
@@ -350,30 +350,16 @@ function MonthGrid({
|
|
|
350
350
|
}
|
|
351
351
|
return null;
|
|
352
352
|
}, [mode, value]);
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
return plainDateToISO(selectedDateForTabindex);
|
|
364
|
-
}
|
|
365
|
-
}
|
|
366
|
-
const isTodayInMonth = today.year === year && today.month === month.month;
|
|
367
|
-
if (isTodayInMonth && !isDateDisabled(today)) {
|
|
368
|
-
return plainDateToISO(today);
|
|
369
|
-
}
|
|
370
|
-
for (const day of days) {
|
|
371
|
-
if (!day.isOutside && !isDateDisabled(day.date)) {
|
|
372
|
-
return day.iso;
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
return null;
|
|
376
|
-
}, [days, today, year, month.month, isDateDisabled, selectedDateForTabindex]);
|
|
353
|
+
const {
|
|
354
|
+
isTabbable
|
|
355
|
+
} = useCalendarRovingTabindex({
|
|
356
|
+
days,
|
|
357
|
+
today,
|
|
358
|
+
year,
|
|
359
|
+
month: month.month,
|
|
360
|
+
isDateDisabled,
|
|
361
|
+
selectedDate: selectedDateForTabindex
|
|
362
|
+
});
|
|
377
363
|
|
|
378
364
|
// Helper to get the focused date from the currently focused element.
|
|
379
365
|
// Reads the machine-readable `data-date` (ISO) attribute rather than parsing
|
|
@@ -433,14 +419,12 @@ function MonthGrid({
|
|
|
433
419
|
// the next enabled cell.
|
|
434
420
|
const {
|
|
435
421
|
gridRef,
|
|
436
|
-
handleKeyDown: handleGridKeyDown
|
|
437
|
-
handleFocus: handleGridFocus
|
|
422
|
+
handleKeyDown: handleGridKeyDown
|
|
438
423
|
} = useGridFocus({
|
|
439
424
|
columns: 7,
|
|
440
425
|
cellSelector: '[role="gridcell"]',
|
|
441
426
|
isCellFocusable: cell => cell.querySelector('button:not([disabled])') !== null,
|
|
442
427
|
getFocusTarget: cell => cell.querySelector('button'),
|
|
443
|
-
hasRovingTabIndex: true,
|
|
444
428
|
onNavigateBefore: handleNavigatePrevious,
|
|
445
429
|
onNavigateAfter: handleNavigateNext,
|
|
446
430
|
onPageUp: handlePageUp,
|
|
@@ -515,7 +499,6 @@ function MonthGrid({
|
|
|
515
499
|
role: "grid",
|
|
516
500
|
"aria-label": monthLabel,
|
|
517
501
|
onKeyDown: handleGridKeyDown,
|
|
518
|
-
onFocus: handleGridFocus,
|
|
519
502
|
...stylex.props(monthGridStyles.daysGrid, hasWeekNumbers && monthGridStyles.daysGridWithNumbers),
|
|
520
503
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
521
504
|
role: "row",
|
|
@@ -549,7 +532,7 @@ function MonthGrid({
|
|
|
549
532
|
today: today,
|
|
550
533
|
hasOutsideDays: hasOutsideDays,
|
|
551
534
|
isDisabled: isDateDisabled(day.date),
|
|
552
|
-
isTabbable: day.iso
|
|
535
|
+
isTabbable: isTabbable(day.iso),
|
|
553
536
|
onDayClick: onDayClick,
|
|
554
537
|
onDayHover: onDayHover
|
|
555
538
|
}, day.iso))]
|
|
@@ -621,9 +604,7 @@ function DayCell({
|
|
|
621
604
|
"aria-label": plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
|
|
622
605
|
"aria-selected": state.isSelected || state.isInRange || undefined,
|
|
623
606
|
"aria-disabled": state.effectivelyDisabled || undefined,
|
|
624
|
-
disabled: isDisabled
|
|
625
|
-
// Initial roving tab-stop seed; useGridFocus owns it after mount.
|
|
626
|
-
,
|
|
607
|
+
disabled: isDisabled,
|
|
627
608
|
tabIndex: isTabbableDay ? 0 : -1,
|
|
628
609
|
onClick: () => !state.effectivelyDisabled && onDayClick(date),
|
|
629
610
|
onMouseEnter: () => !state.effectivelyDisabled && onDayHover(date),
|
|
@@ -12,4 +12,6 @@ export { useCalendarConstraints } from './useCalendarConstraints';
|
|
|
12
12
|
export type { UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, } from './useCalendarConstraints';
|
|
13
13
|
export { useCalendarNavigation } from './useCalendarNavigation';
|
|
14
14
|
export type { UseCalendarNavigationOptions, UseCalendarNavigationReturn, } from './useCalendarNavigation';
|
|
15
|
+
export { useCalendarRovingTabindex } from './useCalendarRovingTabindex';
|
|
16
|
+
export type { UseCalendarRovingTabindexOptions, UseCalendarRovingTabindexReturn, } from './useCalendarRovingTabindex';
|
|
15
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,6BAA6B,EAC7B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,6BAA6B,EAC7B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,YAAY,EACV,gCAAgC,EAChC,+BAA+B,GAChC,MAAM,6BAA6B,CAAC"}
|
|
@@ -11,4 +11,5 @@
|
|
|
11
11
|
|
|
12
12
|
export { useCalendarDays } from "./useCalendarDays.js";
|
|
13
13
|
export { useCalendarConstraints } from "./useCalendarConstraints.js";
|
|
14
|
-
export { useCalendarNavigation } from "./useCalendarNavigation.js";
|
|
14
|
+
export { useCalendarNavigation } from "./useCalendarNavigation.js";
|
|
15
|
+
export { useCalendarRovingTabindex } from "./useCalendarRovingTabindex.js";
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import type { ISODateString } from '../../utils/dateTypes';
|
|
2
|
+
import { type PlainDate } from '../../utils/plainDate';
|
|
3
|
+
import type { CalendarDay } from './useCalendarDays';
|
|
4
|
+
/**
|
|
5
|
+
* Configuration for calendar roving tabindex
|
|
6
|
+
*/
|
|
7
|
+
export interface UseCalendarRovingTabindexOptions {
|
|
8
|
+
/** All days in the grid */
|
|
9
|
+
days: CalendarDay[];
|
|
10
|
+
/** Today's date as a PlainDate */
|
|
11
|
+
today: PlainDate;
|
|
12
|
+
/** The year being displayed */
|
|
13
|
+
year: number;
|
|
14
|
+
/** The month being displayed (1-based: 1 = January, 12 = December) */
|
|
15
|
+
month: number;
|
|
16
|
+
/** Function to check if a date is disabled */
|
|
17
|
+
isDateDisabled: (date: PlainDate) => boolean;
|
|
18
|
+
/** Currently selected date (if any) */
|
|
19
|
+
selectedDate?: PlainDate | null;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Return type for useCalendarRovingTabindex hook
|
|
23
|
+
*/
|
|
24
|
+
export interface UseCalendarRovingTabindexReturn {
|
|
25
|
+
/** The ISO date string of the tabbable element, or null */
|
|
26
|
+
tabbableDate: ISODateString | null;
|
|
27
|
+
/** Check if a specific date is the tabbable one */
|
|
28
|
+
isTabbable: (iso: ISODateString) => boolean;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Hook for managing roving tabindex in calendar grids.
|
|
32
|
+
*
|
|
33
|
+
* Implements the WAI-ARIA roving tabindex pattern where only one element
|
|
34
|
+
* in a group has tabindex="0" while others have tabindex="-1".
|
|
35
|
+
*
|
|
36
|
+
* Priority for tabbable element:
|
|
37
|
+
* 1. Today if visible in the current month and enabled
|
|
38
|
+
* 2. First enabled day in the month
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```
|
|
42
|
+
* const {tabbableDate, isTabbable} = useCalendarRovingTabindex({
|
|
43
|
+
* days,
|
|
44
|
+
* today: {year: 2026, month: 1, day: 20},
|
|
45
|
+
* year: 2026,
|
|
46
|
+
* month: 1, // January (1-based)
|
|
47
|
+
* isDateDisabled,
|
|
48
|
+
* });
|
|
49
|
+
*
|
|
50
|
+
* // In day rendering:
|
|
51
|
+
* <button tabIndex={isTabbable(day.iso) ? 0 : -1}>
|
|
52
|
+
* {day.dayNumber}
|
|
53
|
+
* </button>
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
export declare function useCalendarRovingTabindex(options: UseCalendarRovingTabindexOptions): UseCalendarRovingTabindexReturn;
|
|
57
|
+
//# sourceMappingURL=useCalendarRovingTabindex.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCalendarRovingTabindex.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/useCalendarRovingTabindex.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,KAAK,SAAS,EAAiB,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,gCAAgC;IAC/C,2BAA2B;IAC3B,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,uCAAuC;IACvC,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C,2DAA2D;IAC3D,YAAY,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC,mDAAmD;IACnD,UAAU,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,OAAO,CAAC;CAC7C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,gCAAgC,GACxC,+BAA+B,CA0CjC"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file useCalendarRovingTabindex.ts
|
|
7
|
+
* @input Uses React useMemo, PlainDate utilities
|
|
8
|
+
* @output Exports useCalendarRovingTabindex hook for accessible grid navigation
|
|
9
|
+
* @position Calendar-specific hook; used by Calendar
|
|
10
|
+
*
|
|
11
|
+
* SYNC: When modified, update:
|
|
12
|
+
* - /packages/core/src/Calendar/hooks/index.ts
|
|
13
|
+
*/
|
|
14
|
+
import { useMemo } from 'react';
|
|
15
|
+
import { plainDateToISO } from "../../utils/plainDate.js";
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Configuration for calendar roving tabindex
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Return type for useCalendarRovingTabindex hook
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Hook for managing roving tabindex in calendar grids.
|
|
27
|
+
*
|
|
28
|
+
* Implements the WAI-ARIA roving tabindex pattern where only one element
|
|
29
|
+
* in a group has tabindex="0" while others have tabindex="-1".
|
|
30
|
+
*
|
|
31
|
+
* Priority for tabbable element:
|
|
32
|
+
* 1. Today if visible in the current month and enabled
|
|
33
|
+
* 2. First enabled day in the month
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```
|
|
37
|
+
* const {tabbableDate, isTabbable} = useCalendarRovingTabindex({
|
|
38
|
+
* days,
|
|
39
|
+
* today: {year: 2026, month: 1, day: 20},
|
|
40
|
+
* year: 2026,
|
|
41
|
+
* month: 1, // January (1-based)
|
|
42
|
+
* isDateDisabled,
|
|
43
|
+
* });
|
|
44
|
+
*
|
|
45
|
+
* // In day rendering:
|
|
46
|
+
* <button tabIndex={isTabbable(day.iso) ? 0 : -1}>
|
|
47
|
+
* {day.dayNumber}
|
|
48
|
+
* </button>
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
51
|
+
export function useCalendarRovingTabindex(options) {
|
|
52
|
+
const {
|
|
53
|
+
days,
|
|
54
|
+
today,
|
|
55
|
+
year,
|
|
56
|
+
month,
|
|
57
|
+
isDateDisabled,
|
|
58
|
+
selectedDate
|
|
59
|
+
} = options;
|
|
60
|
+
|
|
61
|
+
// Determine which day should be tabbable
|
|
62
|
+
const tabbableDate = useMemo(() => {
|
|
63
|
+
// Priority 1: Selected date if visible in this month and enabled
|
|
64
|
+
if (selectedDate) {
|
|
65
|
+
const isSelectedInMonth = selectedDate.year === year && selectedDate.month === month;
|
|
66
|
+
if (isSelectedInMonth && !isDateDisabled(selectedDate)) {
|
|
67
|
+
return plainDateToISO(selectedDate);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Priority 2: Today if visible in this month and enabled
|
|
72
|
+
const isTodayInMonth = today.year === year && today.month === month;
|
|
73
|
+
if (isTodayInMonth && !isDateDisabled(today)) {
|
|
74
|
+
return plainDateToISO(today);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Priority 3: First enabled day in this month
|
|
78
|
+
for (const day of days) {
|
|
79
|
+
if (!day.isOutside && !isDateDisabled(day.date)) {
|
|
80
|
+
return day.iso;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
return null;
|
|
84
|
+
}, [days, today, year, month, isDateDisabled, selectedDate]);
|
|
85
|
+
|
|
86
|
+
// Check if a specific date is tabbable
|
|
87
|
+
const isTabbable = useMemo(() => {
|
|
88
|
+
return iso => {
|
|
89
|
+
return tabbableDate !== null && iso === tabbableDate;
|
|
90
|
+
};
|
|
91
|
+
}, [tabbableDate]);
|
|
92
|
+
return {
|
|
93
|
+
tabbableDate,
|
|
94
|
+
isTabbable
|
|
95
|
+
};
|
|
96
|
+
}
|
package/dist/Calendar/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
*/
|
|
9
9
|
export { Calendar } from './Calendar';
|
|
10
10
|
export type { CalendarProps, CalendarHandle, ISODateString, DayOfWeek, DayOfWeekName, DateRange, } from './Calendar';
|
|
11
|
-
export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, } from './hooks';
|
|
12
|
-
export type { CalendarDay, UseCalendarDaysOptions, UseCalendarDaysReturn, UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, UseCalendarNavigationOptions, UseCalendarNavigationReturn, } from './hooks';
|
|
11
|
+
export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, useCalendarRovingTabindex, } from './hooks';
|
|
12
|
+
export type { CalendarDay, UseCalendarDaysOptions, UseCalendarDaysReturn, UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, UseCalendarNavigationOptions, UseCalendarNavigationReturn, UseCalendarRovingTabindexOptions, UseCalendarRovingTabindexReturn, } from './hooks';
|
|
13
13
|
export { isSameDay, isDateInRange, getWeekNumber, formatAccessibleDate, } from './utils';
|
|
14
14
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Calendar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,qBAAqB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Calendar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,4BAA4B,EAC5B,4BAA4B,EAC5B,2BAA2B,EAC3B,gCAAgC,EAChC,+BAA+B,GAChC,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,oBAAoB,GACrB,MAAM,SAAS,CAAC"}
|
package/dist/Calendar/index.js
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
*/
|
|
13
13
|
export { Calendar } from "./Calendar.js";
|
|
14
14
|
// Re-export hooks for advanced usage
|
|
15
|
-
export { useCalendarDays, useCalendarConstraints, useCalendarNavigation } from "./hooks/index.js";
|
|
15
|
+
export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, useCalendarRovingTabindex } from "./hooks/index.js";
|
|
16
16
|
// Re-export calendar-specific utilities for advanced usage
|
|
17
17
|
export { isSameDay, isDateInRange, getWeekNumber, formatAccessibleDate } from "./utils.js";
|
|
18
18
|
|
|
@@ -62,7 +62,7 @@ export function CheckboxList({
|
|
|
62
62
|
'data-testid': dataTestId
|
|
63
63
|
}) {
|
|
64
64
|
const inputID = useId();
|
|
65
|
-
const
|
|
65
|
+
const labelElementID = useId();
|
|
66
66
|
const descriptionID = useId();
|
|
67
67
|
const statusMessageID = useId();
|
|
68
68
|
const [, startTransition] = useTransition();
|
|
@@ -98,7 +98,7 @@ export function CheckboxList({
|
|
|
98
98
|
isLabelHidden: isLabelHidden,
|
|
99
99
|
description: description,
|
|
100
100
|
inputID: inputID,
|
|
101
|
-
|
|
101
|
+
labelElementID: labelElementID,
|
|
102
102
|
isGroupLabel: true,
|
|
103
103
|
descriptionID: description ? descriptionID : undefined,
|
|
104
104
|
isDisabled: isDisabled,
|
|
@@ -118,7 +118,7 @@ export function CheckboxList({
|
|
|
118
118
|
value: contextValue,
|
|
119
119
|
children: /*#__PURE__*/_jsx("div", {
|
|
120
120
|
role: "group",
|
|
121
|
-
"aria-labelledby":
|
|
121
|
+
"aria-labelledby": labelElementID,
|
|
122
122
|
"aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined,
|
|
123
123
|
children: /*#__PURE__*/_jsx(List, {
|
|
124
124
|
density: density,
|
|
@@ -43,6 +43,12 @@ interface ContextMenuBaseProps extends BaseProps {
|
|
|
43
43
|
* @default 'Context menu'
|
|
44
44
|
*/
|
|
45
45
|
label?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Whether to auto-focus the first menu item when the menu opens.
|
|
48
|
+
* Set to `false` for inline showcases or documentation previews.
|
|
49
|
+
* @default true
|
|
50
|
+
*/
|
|
51
|
+
hasAutoFocus?: boolean;
|
|
46
52
|
/** When true, right-click shows the native browser context menu instead. */
|
|
47
53
|
isDisabled?: boolean;
|
|
48
54
|
/** Called when the menu opens or closes. */
|
|
@@ -83,7 +89,7 @@ export type ContextMenuProps = ContextMenuDataProps | ContextMenuCompoundProps;
|
|
|
83
89
|
* </ContextMenu>
|
|
84
90
|
* ```
|
|
85
91
|
*/
|
|
86
|
-
export declare function ContextMenu({ children, menuWidth, size, label, isDisabled, onOpenChange, ref, className, style, xstyle, 'data-testid': testId, ...props }: ContextMenuProps): React.JSX.Element;
|
|
92
|
+
export declare function ContextMenu({ children, menuWidth, size, label, hasAutoFocus, isDisabled, onOpenChange, ref, className, style, xstyle, 'data-testid': testId, ...props }: ContextMenuProps): React.JSX.Element;
|
|
87
93
|
export declare namespace ContextMenu {
|
|
88
94
|
var displayName: string;
|
|
89
95
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAsCtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAsB,EACtB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAsCtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAsB,EACtB,YAAmB,EACnB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAsOlB;yBApPe,WAAW"}
|
|
@@ -110,6 +110,7 @@ export function ContextMenu({
|
|
|
110
110
|
menuWidth,
|
|
111
111
|
size = 'md',
|
|
112
112
|
label = 'Context menu',
|
|
113
|
+
hasAutoFocus = true,
|
|
113
114
|
isDisabled = false,
|
|
114
115
|
onOpenChange,
|
|
115
116
|
ref,
|
|
@@ -191,9 +192,10 @@ export function ContextMenu({
|
|
|
191
192
|
}, [isOpen, closeMenu, listRef]);
|
|
192
193
|
|
|
193
194
|
// Dismiss on Escape from anywhere while open. The menu div's own onKeyDown
|
|
194
|
-
// only fires when focus is inside the menu
|
|
195
|
-
//
|
|
196
|
-
//
|
|
195
|
+
// only fires when focus is inside the menu, which never happens when the
|
|
196
|
+
// menu is opened with hasAutoFocus={false} (e.g. table context menus), so a
|
|
197
|
+
// document-level listener is required for a reliable Escape path. Guards
|
|
198
|
+
// against IME composition-cancel.
|
|
197
199
|
useEffect(() => {
|
|
198
200
|
if (!isOpen) {
|
|
199
201
|
return;
|
|
@@ -254,8 +256,10 @@ export function ContextMenu({
|
|
|
254
256
|
// close (Escape or outside-click), instead of dropping focus to <body>.
|
|
255
257
|
triggerFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : e.currentTarget;
|
|
256
258
|
layer.show();
|
|
257
|
-
|
|
258
|
-
|
|
259
|
+
if (hasAutoFocus) {
|
|
260
|
+
requestAnimationFrame(() => focusFirst());
|
|
261
|
+
}
|
|
262
|
+
}, [isDisabled, layer, hasAutoFocus, focusFirst]);
|
|
259
263
|
|
|
260
264
|
// Touch long-press invocation (menus-8). iOS Safari never synthesizes a
|
|
261
265
|
// `contextmenu` event on long-press, so a context menu is otherwise
|
|
@@ -269,8 +273,10 @@ export function ContextMenu({
|
|
|
269
273
|
y: point.y
|
|
270
274
|
};
|
|
271
275
|
layer.show();
|
|
272
|
-
|
|
273
|
-
|
|
276
|
+
if (hasAutoFocus) {
|
|
277
|
+
requestAnimationFrame(() => focusFirst());
|
|
278
|
+
}
|
|
279
|
+
}, [layer, hasAutoFocus, focusFirst])
|
|
274
280
|
});
|
|
275
281
|
const popoverXstyle = menuWidth ? styles.popoverCustomWidth(menuWidth) : styles.popover;
|
|
276
282
|
const contextValue = useMemo(() => ({
|
|
@@ -51,6 +51,13 @@ interface DropdownMenuBaseProps extends BaseProps {
|
|
|
51
51
|
* @default 'below'
|
|
52
52
|
*/
|
|
53
53
|
placement?: LayerPlacement;
|
|
54
|
+
/**
|
|
55
|
+
* Whether to auto-focus the first menu item when the menu opens.
|
|
56
|
+
* Set to `false` for inline showcases or documentation previews
|
|
57
|
+
* where stealing focus is undesirable.
|
|
58
|
+
* @default true
|
|
59
|
+
*/
|
|
60
|
+
hasAutoFocus?: boolean;
|
|
54
61
|
'data-testid'?: string;
|
|
55
62
|
}
|
|
56
63
|
interface DropdownMenuDataProps extends DropdownMenuBaseProps {
|
|
@@ -62,7 +69,7 @@ interface DropdownMenuCompoundProps extends DropdownMenuBaseProps {
|
|
|
62
69
|
children: ReactNode;
|
|
63
70
|
}
|
|
64
71
|
export type DropdownMenuProps = DropdownMenuDataProps | DropdownMenuCompoundProps;
|
|
65
|
-
export declare function DropdownMenu({ button, isMenuOpen: controlledIsOpen, onOpenChange, menuWidth, onClick, hasChevron, placement, className, style, xstyle, 'data-testid': testId, ...props }: DropdownMenuProps): React.JSX.Element;
|
|
72
|
+
export declare function DropdownMenu({ button, isMenuOpen: controlledIsOpen, onOpenChange, menuWidth, onClick, hasChevron, placement, hasAutoFocus, className, style, xstyle, 'data-testid': testId, ...props }: DropdownMenuProps): React.JSX.Element;
|
|
66
73
|
export declare namespace DropdownMenu {
|
|
67
74
|
var displayName: string;
|
|
68
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAUtC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwC5C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC1B,oBAAoB,GACpB,mBAAmB,GACnB,mBAAmB,CAAC;AAMxB,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GACzB,qBAAqB,GACrB,yBAAyB,CAAC;AA4B9B,wBAAgB,YAAY,CAAC,EAC3B,MAAuB,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAUtC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwC5C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC1B,oBAAoB,GACpB,mBAAmB,GACnB,mBAAmB,CAAC;AAMxB,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GACzB,qBAAqB,GACrB,yBAAyB,CAAC;AA4B9B,wBAAgB,YAAY,CAAC,EAC3B,MAAuB,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,YAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAyQnB;yBAvRe,YAAY"}
|
|
@@ -119,6 +119,7 @@ export function DropdownMenu({
|
|
|
119
119
|
onClick,
|
|
120
120
|
hasChevron = true,
|
|
121
121
|
placement = 'below',
|
|
122
|
+
hasAutoFocus = true,
|
|
122
123
|
className,
|
|
123
124
|
style,
|
|
124
125
|
xstyle,
|
|
@@ -206,12 +207,14 @@ export function DropdownMenu({
|
|
|
206
207
|
if (isControlled) {
|
|
207
208
|
if (controlledIsOpen && !popover.isOpen) {
|
|
208
209
|
popover.show();
|
|
209
|
-
|
|
210
|
+
if (hasAutoFocus) {
|
|
211
|
+
requestAnimationFrame(() => focusFirst());
|
|
212
|
+
}
|
|
210
213
|
} else if (!controlledIsOpen && popover.isOpen) {
|
|
211
214
|
popover.hide();
|
|
212
215
|
}
|
|
213
216
|
}
|
|
214
|
-
}, [controlledIsOpen, isControlled, popover, focusFirst]);
|
|
217
|
+
}, [controlledIsOpen, isControlled, popover, hasAutoFocus, focusFirst]);
|
|
215
218
|
|
|
216
219
|
// Extend useListFocus with Enter/Space activation + typeahead
|
|
217
220
|
const listKeyDown = useCallback(e => {
|
|
@@ -241,8 +244,10 @@ export function DropdownMenu({
|
|
|
241
244
|
}, [listNavKeyDown, closeMenu, typeahead]);
|
|
242
245
|
const openAndFocus = useCallback(() => {
|
|
243
246
|
popover.show();
|
|
244
|
-
|
|
245
|
-
|
|
247
|
+
if (hasAutoFocus) {
|
|
248
|
+
requestAnimationFrame(() => focusFirst());
|
|
249
|
+
}
|
|
250
|
+
}, [popover, hasAutoFocus, focusFirst]);
|
|
246
251
|
const handleButtonClick = useCallback(() => {
|
|
247
252
|
// If the menu was just closed by light dismiss (e.g. iOS Safari fires
|
|
248
253
|
// pointerdown → hide before the trigger's click), the click would
|
package/dist/Field/Field.d.ts
CHANGED
|
@@ -51,7 +51,7 @@ export interface FieldProps extends Omit<BaseProps<HTMLDivElement>, 'children'>
|
|
|
51
51
|
/**
|
|
52
52
|
* ID of the input element this label points AT (used as the label's
|
|
53
53
|
* `htmlFor`). This is the id of the *control*, not of the label element —
|
|
54
|
-
* see `
|
|
54
|
+
* see `labelElementID` for the latter.
|
|
55
55
|
*/
|
|
56
56
|
inputID: string;
|
|
57
57
|
/**
|
|
@@ -60,12 +60,12 @@ export interface FieldProps extends Omit<BaseProps<HTMLDivElement>, 'children'>
|
|
|
60
60
|
* (radiogroup, checkbox group) references this via `aria-labelledby` to take
|
|
61
61
|
* the label as its accessible name. Pair with `isGroupLabel`.
|
|
62
62
|
*/
|
|
63
|
-
|
|
63
|
+
labelElementID?: string;
|
|
64
64
|
/**
|
|
65
65
|
* When the field wraps a group of controls rather than a single input, set
|
|
66
66
|
* this so the label renders as a non-`<label>` element (a `<span>`): a
|
|
67
67
|
* `<label>` semantically names one control and can't be associated with a
|
|
68
|
-
* group. Pair with `
|
|
68
|
+
* group. Pair with `labelElementID` + `aria-labelledby` on the group.
|
|
69
69
|
* @default false
|
|
70
70
|
*/
|
|
71
71
|
isGroupLabel?: boolean;
|
|
@@ -133,7 +133,7 @@ export interface FieldProps extends Omit<BaseProps<HTMLDivElement>, 'children'>
|
|
|
133
133
|
* </Field>
|
|
134
134
|
* ```
|
|
135
135
|
*/
|
|
136
|
-
export declare function Field({ label, isLabelHidden, description, inputID,
|
|
136
|
+
export declare function Field({ label, isLabelHidden, description, inputID, labelElementID, isGroupLabel, descriptionID, isOptional, isRequired, isDisabled, labelIcon, status, labelTooltip, statusVariant, width, xstyle, children, className, style, ref, ...props }: FieldProps): import("react").JSX.Element;
|
|
137
137
|
export declare namespace Field {
|
|
138
138
|
var displayName: string;
|
|
139
139
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoCtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoCtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;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;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACxC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,cAAc,EACd,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAqGZ;yBA3He,KAAK"}
|
package/dist/Field/Field.js
CHANGED
|
@@ -69,7 +69,7 @@ export function Field({
|
|
|
69
69
|
isLabelHidden = false,
|
|
70
70
|
description,
|
|
71
71
|
inputID,
|
|
72
|
-
|
|
72
|
+
labelElementID,
|
|
73
73
|
isGroupLabel = false,
|
|
74
74
|
descriptionID,
|
|
75
75
|
isOptional = false,
|
|
@@ -99,7 +99,7 @@ export function Field({
|
|
|
99
99
|
const labelNode = /*#__PURE__*/_jsx(FieldLabel, {
|
|
100
100
|
label: label,
|
|
101
101
|
inputID: inputID,
|
|
102
|
-
|
|
102
|
+
labelElementID: labelElementID,
|
|
103
103
|
isGroupLabel: isGroupLabel,
|
|
104
104
|
isLabelHidden: isLabelHidden,
|
|
105
105
|
isDisabled: isDisabled,
|