@astryxdesign/core 0.1.2-canary.fc6ce12 → 0.1.2-canary.fc7b77b
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/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +4 -2
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +4 -2
- package/dist/SegmentedControl/SegmentedControl.d.ts +1 -1
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +57 -36
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +4 -2
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +30 -13
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +4 -2
- 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 -6
- package/dist/astryx.umd.js +48 -48
- 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/Link/Link.tsx +13 -2
- package/src/ProgressBar/ProgressBar.tsx +3 -2
- package/src/SegmentedControl/SegmentedControl.tsx +76 -33
- package/src/Switch/Switch.tsx +16 -2
- package/src/TabList/TabList.tsx +35 -11
- package/src/TextArea/TextArea.tsx +13 -3
- 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 -79
- package/dist/hooks/useKeyboardHint.d.ts.map +0 -1
- package/dist/hooks/useKeyboardHint.js +0 -263
- package/src/hooks/useGridFocus.test.tsx +0 -132
- package/src/hooks/useKeyboardHint.tsx +0 -373
|
@@ -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
|
|
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
|
})]
|
|
@@ -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",
|
|
@@ -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,12 +14,12 @@
|
|
|
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 {
|
|
22
|
+
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
23
23
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
24
24
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
25
25
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -94,44 +94,45 @@ export function SegmentedControl({
|
|
|
94
94
|
style
|
|
95
95
|
}) {
|
|
96
96
|
const size = useSize(sizeProp, 'md');
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
// useListFocus primitive: it stamps a single tab stop (tabIndex 0/-1) across
|
|
100
|
-
// the radios, skips disabled ones, wraps at the ends, handles Home/End, and
|
|
101
|
-
// repairs the tab stop on mount and whenever items mount/disable — replacing
|
|
102
|
-
// the component's former inline keyboard handler and tab-stop repair effect.
|
|
103
|
-
const {
|
|
104
|
-
listRef,
|
|
105
|
-
handleKeyDown,
|
|
106
|
-
handleFocus
|
|
107
|
-
} = useListFocus({
|
|
108
|
-
itemSelector: '[role="radio"]:not([aria-disabled="true"])',
|
|
109
|
-
hasRovingTabIndex: true,
|
|
110
|
-
wrap: true,
|
|
111
|
-
orientation: 'horizontal'
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
// Selection-follows-focus (APG radiogroup): useListFocus only *moves* focus,
|
|
115
|
-
// so whenever it lands focus on a new radio (arrow/Home/End, or a click) we
|
|
116
|
-
// select that radio's value. Reading the focused element's data-value here
|
|
117
|
-
// keeps selection in lockstep with focus without duplicating the navigation
|
|
118
|
-
// logic. Disabled radios are ignored (they should never become the value),
|
|
119
|
-
// and the already-selected value is skipped so an initial Tab-in (or a click
|
|
120
|
-
// on the current segment) is a no-op, matching click behavior.
|
|
121
|
-
const handleContainerFocus = useCallback(e => {
|
|
122
|
-
handleFocus(e);
|
|
97
|
+
const containerRef = useRef(null);
|
|
98
|
+
const handleKeyDown = useCallback(e => {
|
|
123
99
|
if (isDisabled) {
|
|
124
100
|
return;
|
|
125
101
|
}
|
|
126
|
-
const
|
|
127
|
-
if (!
|
|
102
|
+
const container = containerRef.current;
|
|
103
|
+
if (!container) {
|
|
128
104
|
return;
|
|
129
105
|
}
|
|
130
|
-
const
|
|
131
|
-
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) {
|
|
132
133
|
onChange(nextValue);
|
|
133
134
|
}
|
|
134
|
-
}, [
|
|
135
|
+
}, [isDisabled, onChange]);
|
|
135
136
|
const contextValue = useMemo(() => ({
|
|
136
137
|
value,
|
|
137
138
|
onChange,
|
|
@@ -139,15 +140,35 @@ export function SegmentedControl({
|
|
|
139
140
|
layout,
|
|
140
141
|
isDisabled
|
|
141
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
|
+
});
|
|
142
164
|
return /*#__PURE__*/_jsx(SegmentedControlContext, {
|
|
143
165
|
value: contextValue,
|
|
144
166
|
children: /*#__PURE__*/_jsx("div", {
|
|
145
|
-
ref: mergeRefs(ref,
|
|
167
|
+
ref: mergeRefs(ref, containerRef),
|
|
146
168
|
role: "radiogroup",
|
|
147
169
|
"aria-label": label,
|
|
148
170
|
"aria-disabled": isDisabled || undefined,
|
|
149
171
|
onKeyDown: handleKeyDown,
|
|
150
|
-
onFocus: handleContainerFocus,
|
|
151
172
|
...mergeProps(themeProps('segmented-control', {
|
|
152
173
|
size
|
|
153
174
|
}), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, isDisabled && styles.disabled, xstyle), className, style),
|
|
@@ -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;AAaf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,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;AAaf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAsJ9C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEtD,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;IACrB;;;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;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,aAAqB,EACrB,YAAwB,EACxB,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,WAAW,+BAmJb;yBA1Ke,MAAM"}
|