@ostack.tech/ui 0.8.2 → 0.9.1
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/chunks/{en-BfgHKQwn.js → en-Dem8nwZz.js} +20 -6
- package/dist/chunks/en-Dem8nwZz.js.map +1 -0
- package/dist/chunks/platformUtils-C3IHCr90.js +6 -0
- package/dist/chunks/platformUtils-C3IHCr90.js.map +1 -0
- package/dist/locales/en-GB.js +4 -4
- package/dist/locales/en-GB.js.map +1 -1
- package/dist/locales/en-US.js +4 -4
- package/dist/locales/en-US.js.map +1 -1
- package/dist/locales/fr-FR.js +49 -8
- package/dist/locales/fr-FR.js.map +1 -1
- package/dist/locales/pt-PT.js +35 -8
- package/dist/locales/pt-PT.js.map +1 -1
- package/dist/ostack-ui.css +39 -10
- package/dist/ostack-ui.css.map +1 -1
- package/dist/ostack-ui.js +804 -352
- package/dist/ostack-ui.js.map +1 -1
- package/dist/types/components/Alert/Alert.d.ts +1 -1
- package/dist/types/components/Button/Button.d.ts +20 -0
- package/dist/types/components/Calendar/Calendar.d.ts +9 -6
- package/dist/types/components/Calendar/CalendarContext.d.ts +4 -1
- package/dist/types/components/Calendar/{CalendarMonthCaption.d.ts → CalendarHeader.d.ts} +1 -1
- package/dist/types/components/CheckboxGroup/CheckboxGroupContext.d.ts +62 -4
- package/dist/types/components/CommandMenu/CommandMenuItem.d.ts +1 -1
- package/dist/types/components/DateInput/DateInput.d.ts +10 -17
- package/dist/types/components/DateRangeInput/DateRangeInput.d.ts +11 -13
- package/dist/types/components/DropdownMenu/DropdownMenuCheckboxItem.d.ts +1 -1
- package/dist/types/components/DropdownMenu/DropdownMenuItem.d.ts +1 -1
- package/dist/types/components/DropdownMenu/DropdownMenuRadioItem.d.ts +1 -1
- package/dist/types/components/IconButton/IconButton.d.ts +24 -7
- package/dist/types/components/Keybinds/Key.d.ts +9 -0
- package/dist/types/components/Keybinds/KeyPress.d.ts +7 -0
- package/dist/types/components/Keybinds/Keybind.d.ts +7 -0
- package/dist/types/components/Keybinds/Keybinds.d.ts +20 -0
- package/dist/types/components/Keybinds/index.d.ts +1 -0
- package/dist/types/components/Label/Label.d.ts +0 -2
- package/dist/types/components/MenuList/MenuListItem.d.ts +15 -0
- package/dist/types/components/Spinner/Spinner.d.ts +2 -8
- package/dist/types/components/Tabs/TabList.d.ts +10 -1
- package/dist/types/components/Toast/Toast.d.ts +9 -0
- package/dist/types/components/VisuallyHidden/VisuallyHidden.d.ts +20 -2
- package/dist/types/index.d.ts +1 -0
- package/dist/types/locales/en.d.ts +1 -1
- package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts +10 -6
- package/dist/types/utils/intersperse.d.ts +8 -0
- package/dist/types/utils/keyboardShortcut.d.ts +21 -8
- package/dist/types/utils/parseDateStrict.d.ts +3 -1
- package/dist/types/utils/platformUtils.d.ts +2 -0
- package/dist/types/utils/useDateTransformer.d.ts +10 -31
- package/package.json +4 -4
- package/scss/_utils.scss +1 -0
- package/scss/components/Button/_Button.scss +5 -0
- package/scss/components/Calendar/_Calendar-variables.scss +16 -16
- package/scss/components/Calendar/_Calendar.scss +16 -16
- package/scss/components/IconButton/_IconButton.scss +5 -0
- package/scss/components/Keyboard/_Keyboard-variables.scss +18 -0
- package/scss/components/Keyboard/_Keyboard.scss +13 -10
- package/scss/components/Link/_Link-variables.scss +7 -0
- package/scss/components/Link/_Link.scss +7 -0
- package/scss/components/MenuList/_MenuList.scss +4 -0
- package/scss/components/Tooltip/_Tooltip-variables.scss +4 -0
- package/scss/components/Tooltip/_Tooltip.scss +1 -0
- package/scss/scss/helpers/_visually-hidden.scss +14 -2
- package/scss/scss/placeholders/button/_button-variables.scss +4 -0
- package/scss/scss/placeholders/button/_button.scss +4 -0
- package/scss/scss/placeholders/menu/_menu-variables.scss +92 -1
- package/scss/scss/placeholders/menu/_menu.scss +61 -1
- package/dist/chunks/en-BfgHKQwn.js.map +0 -1
package/dist/ostack-ui.js
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
import { forwardRef, createContext, useContext, useCallback, useRef, useEffect, useId, useMemo, useState, memo,
|
|
2
|
-
import { tinykeys } from "tinykeys";
|
|
1
|
+
import { forwardRef, createContext, useContext, useCallback, useRef, useEffect, useId, useMemo, useState, memo, Fragment as Fragment$1, isValidElement, cloneElement, Children, useImperativeHandle, startTransition, useLayoutEffect as useLayoutEffect$1, createElement, useDeferredValue, useSyncExternalStore } from "react";
|
|
2
|
+
import { tinykeys, parseKeybinding } from "tinykeys";
|
|
3
3
|
import fromExponential from "from-exponential";
|
|
4
4
|
import { isValid, isDate, addMonths, isAfter, isBefore, startOfMonth, setMonth, getYear, setYear, startOfYear, format, isSameYear, getMonth, max, min, lastDayOfMonth, parseISO, parse, isWithinInterval, isEqual } from "date-fns";
|
|
5
5
|
import { createStore, useStore, create } from "zustand";
|
|
6
6
|
import { shallow } from "zustand/shallow";
|
|
7
7
|
import { removeNumericFormat, numericFormatter, NumericFormat } from "react-number-format";
|
|
8
8
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
9
|
-
import { faClose, faTriangleExclamation, faCircleExclamation, faCircleCheck, faCircleInfo, faChevronUp, faChevronDown, faRedo, faCircleQuestion, faSortDown, faSortUp, faAsterisk, faMinus, faCheck, faFilter,
|
|
9
|
+
import { faArrowRight, faArrowLeft, faArrowDown, faArrowUp, faClose, faTriangleExclamation, faCircleExclamation, faCircleCheck, faCircleInfo, faChevronUp, faChevronDown, faRedo, faCircleQuestion, faSortDown, faSortUp, faAsterisk, faMinus, faCheck, faFilter, faSearch, faChevronLeft, faChevronRight, faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
|
|
10
10
|
import { ErrorBoundary as ErrorBoundary$1 } from "react-error-boundary";
|
|
11
11
|
import { useErrorBoundary } from "react-error-boundary";
|
|
12
|
-
import { AlertDialog as AlertDialog$1, Dialog as Dialog$1, Slot as Slot$1, Portal as Portal$1,
|
|
13
|
-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
12
|
+
import { AlertDialog as AlertDialog$1, Dialog as Dialog$1, Slot as Slot$1, Portal as Portal$1, Tooltip as Tooltip$1, Toast as Toast$1, Collapsible as Collapsible$1, Popover as Popover$1, Label as Label$1, Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, Separator as Separator$1, Tabs as Tabs$1 } from "radix-ui";
|
|
14
13
|
import { subscribeWithSelector } from "zustand/middleware";
|
|
14
|
+
import { I as IS_APPLE } from "./chunks/platformUtils-C3IHCr90.js";
|
|
15
|
+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
15
16
|
import { locale } from "./locales/en-GB.js";
|
|
16
17
|
import { locale as locale2 } from "./locales/en-US.js";
|
|
17
18
|
import { locale as locale3, locale as locale4 } from "./locales/fr-FR.js";
|
|
@@ -50,7 +51,7 @@ function usePrefix() {
|
|
|
50
51
|
function cx(...args) {
|
|
51
52
|
const classNames = [];
|
|
52
53
|
for (const arg of args) {
|
|
53
|
-
if (!arg) {
|
|
54
|
+
if (!arg || typeof arg === "boolean") {
|
|
54
55
|
continue;
|
|
55
56
|
}
|
|
56
57
|
if (Array.isArray(arg)) {
|
|
@@ -1296,6 +1297,127 @@ function setBoolDataAttr(element, attr, condition) {
|
|
|
1296
1297
|
delete element.dataset[attr];
|
|
1297
1298
|
}
|
|
1298
1299
|
}
|
|
1300
|
+
const FORM_CONTROLS = ["INPUT", "TEXTAREA", "SELECT"];
|
|
1301
|
+
const KEY_CLEAN_UP = /^Key|^Digit/;
|
|
1302
|
+
function registerKeyboardShortcut(keybinds, action, {
|
|
1303
|
+
target = window,
|
|
1304
|
+
eventType = "keydown",
|
|
1305
|
+
sequenceTimeout = 1e3,
|
|
1306
|
+
ignore,
|
|
1307
|
+
capture = false,
|
|
1308
|
+
preventDefault
|
|
1309
|
+
} = {}) {
|
|
1310
|
+
const ignorableAction = (event) => {
|
|
1311
|
+
if (!ignore?.(event)) {
|
|
1312
|
+
if (preventDefault) {
|
|
1313
|
+
event.preventDefault();
|
|
1314
|
+
}
|
|
1315
|
+
action(event);
|
|
1316
|
+
}
|
|
1317
|
+
};
|
|
1318
|
+
const keybindsMap = typeof keybinds === "string" ? { [keybinds]: ignorableAction } : keybinds.reduce(
|
|
1319
|
+
(keybindsMap2, shortcut) => {
|
|
1320
|
+
keybindsMap2[shortcut] = ignorableAction;
|
|
1321
|
+
return keybindsMap2;
|
|
1322
|
+
},
|
|
1323
|
+
{}
|
|
1324
|
+
);
|
|
1325
|
+
return tinykeys(target, keybindsMap, {
|
|
1326
|
+
event: eventType,
|
|
1327
|
+
timeout: sequenceTimeout,
|
|
1328
|
+
capture
|
|
1329
|
+
});
|
|
1330
|
+
}
|
|
1331
|
+
function useKeyboardShortcut(keybinds, action, {
|
|
1332
|
+
disabled,
|
|
1333
|
+
target = window,
|
|
1334
|
+
eventType = "keydown",
|
|
1335
|
+
sequenceTimeout = 1e3,
|
|
1336
|
+
ignore,
|
|
1337
|
+
capture = false,
|
|
1338
|
+
preventDefault
|
|
1339
|
+
} = {}) {
|
|
1340
|
+
const keybindsString = Array.isArray(keybinds) ? keybinds.join("__") : keybinds;
|
|
1341
|
+
const latestCallbacks = useLatestValues({ action, ignore });
|
|
1342
|
+
useEffect(() => {
|
|
1343
|
+
if (!disabled && keybindsString && target !== null) {
|
|
1344
|
+
return registerKeyboardShortcut(
|
|
1345
|
+
keybindsString.split("__"),
|
|
1346
|
+
(evt) => latestCallbacks.action(evt),
|
|
1347
|
+
{
|
|
1348
|
+
target,
|
|
1349
|
+
eventType,
|
|
1350
|
+
sequenceTimeout,
|
|
1351
|
+
ignore: (evt) => latestCallbacks.ignore?.(evt) ?? false,
|
|
1352
|
+
capture,
|
|
1353
|
+
preventDefault
|
|
1354
|
+
}
|
|
1355
|
+
);
|
|
1356
|
+
}
|
|
1357
|
+
}, [
|
|
1358
|
+
capture,
|
|
1359
|
+
disabled,
|
|
1360
|
+
eventType,
|
|
1361
|
+
latestCallbacks,
|
|
1362
|
+
preventDefault,
|
|
1363
|
+
sequenceTimeout,
|
|
1364
|
+
keybindsString,
|
|
1365
|
+
target
|
|
1366
|
+
]);
|
|
1367
|
+
}
|
|
1368
|
+
function ignoreFormControlsKeyboardShortcut(event) {
|
|
1369
|
+
return event.target !== null && event.target instanceof HTMLElement && FORM_CONTROLS.includes(event.target.tagName);
|
|
1370
|
+
}
|
|
1371
|
+
function normalizeKeybinds(keybinds) {
|
|
1372
|
+
if (keybinds == null) {
|
|
1373
|
+
return [];
|
|
1374
|
+
}
|
|
1375
|
+
if (!Array.isArray(keybinds)) {
|
|
1376
|
+
keybinds = [keybinds];
|
|
1377
|
+
}
|
|
1378
|
+
return keybinds.map(
|
|
1379
|
+
(keybind) => parseKeybinding(keybind).map((keyPress) => {
|
|
1380
|
+
const mods = keyPress[0];
|
|
1381
|
+
let key = keyPress[1];
|
|
1382
|
+
key = key.replace(KEY_CLEAN_UP, "");
|
|
1383
|
+
if (key.length === 1) {
|
|
1384
|
+
key = key.toUpperCase();
|
|
1385
|
+
} else if (key instanceof RegExp) {
|
|
1386
|
+
key = `(${key.source.slice(1, -1)})`;
|
|
1387
|
+
}
|
|
1388
|
+
return [...mods, key];
|
|
1389
|
+
})
|
|
1390
|
+
);
|
|
1391
|
+
}
|
|
1392
|
+
function keybindsToAriaKeyShortcuts(keybinds) {
|
|
1393
|
+
return normalizeKeybinds(keybinds).map(
|
|
1394
|
+
(keybind) => keybind.map(
|
|
1395
|
+
(keyPresses) => keyPresses.map((key) => key === "+" ? "plus" : key).join("+")
|
|
1396
|
+
).join(" ")
|
|
1397
|
+
).join(" ") || void 0;
|
|
1398
|
+
}
|
|
1399
|
+
const VisuallyHidden = forwardRef(function VisuallyHidden2({
|
|
1400
|
+
asChild,
|
|
1401
|
+
as = "span",
|
|
1402
|
+
focusable,
|
|
1403
|
+
className,
|
|
1404
|
+
...otherProps
|
|
1405
|
+
}, forwardedRef) {
|
|
1406
|
+
const prefix = usePrefix();
|
|
1407
|
+
const As = asChild ? Slot : as;
|
|
1408
|
+
return /* @__PURE__ */ jsx(
|
|
1409
|
+
As,
|
|
1410
|
+
{
|
|
1411
|
+
className: cx(
|
|
1412
|
+
!focusable && prefix("visually-hidden"),
|
|
1413
|
+
focusable && prefix("visually-hidden-focusable"),
|
|
1414
|
+
className
|
|
1415
|
+
),
|
|
1416
|
+
...otherProps,
|
|
1417
|
+
ref: forwardedRef
|
|
1418
|
+
}
|
|
1419
|
+
);
|
|
1420
|
+
});
|
|
1299
1421
|
const Icon = memo(
|
|
1300
1422
|
forwardRef(function Icon2({ size, color, label, flip, className, ...otherProps }, forwardedRef) {
|
|
1301
1423
|
const prefix = usePrefix();
|
|
@@ -1313,15 +1435,181 @@ const Icon = memo(
|
|
|
1313
1435
|
...otherProps
|
|
1314
1436
|
}
|
|
1315
1437
|
);
|
|
1316
|
-
return
|
|
1438
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1439
|
+
icon,
|
|
1440
|
+
label && /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
|
|
1441
|
+
] });
|
|
1317
1442
|
})
|
|
1318
1443
|
);
|
|
1319
|
-
|
|
1320
|
-
|
|
1444
|
+
function intersperse(array, separator) {
|
|
1445
|
+
return array.reduce((acc, element, i, array2) => {
|
|
1446
|
+
acc.push(element);
|
|
1447
|
+
if (i < array2.length - 1) {
|
|
1448
|
+
acc.push(
|
|
1449
|
+
typeof separator === "function" ? separator(i) : separator
|
|
1450
|
+
);
|
|
1451
|
+
}
|
|
1452
|
+
return acc;
|
|
1453
|
+
}, []);
|
|
1454
|
+
}
|
|
1455
|
+
const Keyboard = forwardRef(
|
|
1456
|
+
function Keyboard2({ asChild, className, ...otherProps }, forwardedRef) {
|
|
1321
1457
|
const prefix = usePrefix();
|
|
1322
|
-
const As = asChild ? Slot : "
|
|
1323
|
-
|
|
1458
|
+
const As = asChild ? Slot : "kbd";
|
|
1459
|
+
return /* @__PURE__ */ jsx(
|
|
1324
1460
|
As,
|
|
1461
|
+
{
|
|
1462
|
+
className: cx(prefix("keyboard"), className),
|
|
1463
|
+
ref: forwardedRef,
|
|
1464
|
+
...otherProps
|
|
1465
|
+
}
|
|
1466
|
+
);
|
|
1467
|
+
}
|
|
1468
|
+
);
|
|
1469
|
+
const DEFAULT_KEY_SYMBOLS = {
|
|
1470
|
+
Control: IS_APPLE ? "⌃" : "Ctrl",
|
|
1471
|
+
Alt: IS_APPLE ? "⌥" : "Alt",
|
|
1472
|
+
Option: IS_APPLE ? "⌥" : "Alt",
|
|
1473
|
+
Shift: IS_APPLE ? "⇧" : "Shift",
|
|
1474
|
+
Meta: IS_APPLE ? "⌘" : "Win",
|
|
1475
|
+
CapsLock: IS_APPLE ? "⇪" : "Caps Lock",
|
|
1476
|
+
Tab: IS_APPLE ? "⇥" : "Tab",
|
|
1477
|
+
ArrowUp: /* @__PURE__ */ jsx(Icon, { icon: faArrowUp }),
|
|
1478
|
+
ArrowDown: /* @__PURE__ */ jsx(Icon, { icon: faArrowDown }),
|
|
1479
|
+
ArrowLeft: /* @__PURE__ */ jsx(Icon, { icon: faArrowLeft }),
|
|
1480
|
+
ArrowRight: /* @__PURE__ */ jsx(Icon, { icon: faArrowRight }),
|
|
1481
|
+
Enter: IS_APPLE ? "⏎" : "↵",
|
|
1482
|
+
Escape: "Esc",
|
|
1483
|
+
Backspace: "⌫",
|
|
1484
|
+
Delete: IS_APPLE ? "⌦" : "Del",
|
|
1485
|
+
Insert: "Ins",
|
|
1486
|
+
PageUp: "PgUp",
|
|
1487
|
+
PageDown: "PgDn"
|
|
1488
|
+
};
|
|
1489
|
+
const DEFAULT_KEY_LABELS = {
|
|
1490
|
+
Alt: IS_APPLE ? "Option" : "Alt",
|
|
1491
|
+
Option: IS_APPLE ? "Option" : "Alt",
|
|
1492
|
+
Meta: IS_APPLE ? "Command" : "Windows",
|
|
1493
|
+
Enter: IS_APPLE ? "Return" : "Enter"
|
|
1494
|
+
};
|
|
1495
|
+
function Key({ keyName, keyLabels, keySymbols }) {
|
|
1496
|
+
const [locale7] = useLocale();
|
|
1497
|
+
const localeKeySymbols = locale7.Keybinds.keySymbols;
|
|
1498
|
+
const localeKeyLabels = locale7.Keybinds.keyLabels;
|
|
1499
|
+
const symbol = keySymbols?.[keyName] ?? localeKeySymbols?.[keyName] ?? DEFAULT_KEY_SYMBOLS[keyName];
|
|
1500
|
+
const label = keyLabels?.[keyName] ?? localeKeyLabels?.[keyName] ?? DEFAULT_KEY_LABELS[keyName] ?? keyName;
|
|
1501
|
+
return !symbol || symbol === label ? /* @__PURE__ */ jsx(Keyboard, { children: label }) : /* @__PURE__ */ jsxs(Keyboard, { children: [
|
|
1502
|
+
/* @__PURE__ */ jsx("span", { "aria-hidden": true, children: symbol }),
|
|
1503
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { children: label })
|
|
1504
|
+
] });
|
|
1505
|
+
}
|
|
1506
|
+
const KEY_SEPARATOR = IS_APPLE ? " " : " + ";
|
|
1507
|
+
function KeyPress({
|
|
1508
|
+
keyPress,
|
|
1509
|
+
keySymbols,
|
|
1510
|
+
keyLabels
|
|
1511
|
+
}) {
|
|
1512
|
+
return intersperse(
|
|
1513
|
+
keyPress.map((key, i) => /* @__PURE__ */ jsx(
|
|
1514
|
+
Key,
|
|
1515
|
+
{
|
|
1516
|
+
keyName: key,
|
|
1517
|
+
keySymbols,
|
|
1518
|
+
keyLabels
|
|
1519
|
+
},
|
|
1520
|
+
`key-${i}`
|
|
1521
|
+
)),
|
|
1522
|
+
(i) => /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: KEY_SEPARATOR }, `key-separator-${i}`)
|
|
1523
|
+
);
|
|
1524
|
+
}
|
|
1525
|
+
const KEY_PRESS_SEPARATOR = " ";
|
|
1526
|
+
function Keybind({
|
|
1527
|
+
keybind,
|
|
1528
|
+
keyPressesSeparatorLabel,
|
|
1529
|
+
keySymbols,
|
|
1530
|
+
keyLabels
|
|
1531
|
+
}) {
|
|
1532
|
+
const [locale7] = useLocale();
|
|
1533
|
+
keyPressesSeparatorLabel ??= locale7.Keybinds.keyPressesSeparatorLabel;
|
|
1534
|
+
return intersperse(
|
|
1535
|
+
keybind.map((keyPress, i) => /* @__PURE__ */ jsx(
|
|
1536
|
+
KeyPress,
|
|
1537
|
+
{
|
|
1538
|
+
keyPress,
|
|
1539
|
+
keySymbols,
|
|
1540
|
+
keyLabels
|
|
1541
|
+
},
|
|
1542
|
+
`key-press-${i}`
|
|
1543
|
+
)),
|
|
1544
|
+
(i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
1545
|
+
/* @__PURE__ */ jsx("span", { "aria-hidden": true, children: KEY_PRESS_SEPARATOR }),
|
|
1546
|
+
/* @__PURE__ */ jsxs(VisuallyHidden, { children: [
|
|
1547
|
+
" ",
|
|
1548
|
+
keyPressesSeparatorLabel,
|
|
1549
|
+
" "
|
|
1550
|
+
] })
|
|
1551
|
+
] }, `key-press-separator-${i}`)
|
|
1552
|
+
);
|
|
1553
|
+
}
|
|
1554
|
+
const KEYBIND_SEPARATOR = " / ";
|
|
1555
|
+
const Keybinds = forwardRef(
|
|
1556
|
+
function Keybinds2({
|
|
1557
|
+
keybinds,
|
|
1558
|
+
limit,
|
|
1559
|
+
keybindsSeparatorLabel,
|
|
1560
|
+
keyPressesSeparatorLabel,
|
|
1561
|
+
keySymbols,
|
|
1562
|
+
keyLabels,
|
|
1563
|
+
className,
|
|
1564
|
+
...otherProps
|
|
1565
|
+
}, forwardedRef) {
|
|
1566
|
+
if (limit != null) {
|
|
1567
|
+
if (limit < 1) {
|
|
1568
|
+
throw new RangeError("Limit must be >= 1.");
|
|
1569
|
+
}
|
|
1570
|
+
if (Array.isArray(keybinds)) {
|
|
1571
|
+
keybinds = keybinds.slice(0, limit);
|
|
1572
|
+
}
|
|
1573
|
+
}
|
|
1574
|
+
const prefix = usePrefix();
|
|
1575
|
+
const [locale7] = useLocale();
|
|
1576
|
+
keybindsSeparatorLabel ??= locale7.Keybinds.keybindsSeparatorLabel;
|
|
1577
|
+
const normalizedKeybinds = normalizeKeybinds(keybinds);
|
|
1578
|
+
return normalizedKeybinds.length === 0 ? null : /* @__PURE__ */ jsx(
|
|
1579
|
+
"span",
|
|
1580
|
+
{
|
|
1581
|
+
className: cx(prefix("keybinds"), className),
|
|
1582
|
+
...otherProps,
|
|
1583
|
+
ref: forwardedRef,
|
|
1584
|
+
children: intersperse(
|
|
1585
|
+
normalizedKeybinds.map((keybind, i) => /* @__PURE__ */ jsx(
|
|
1586
|
+
Keybind,
|
|
1587
|
+
{
|
|
1588
|
+
keybind,
|
|
1589
|
+
keyPressesSeparatorLabel,
|
|
1590
|
+
keySymbols,
|
|
1591
|
+
keyLabels
|
|
1592
|
+
},
|
|
1593
|
+
`keybind-${i}`
|
|
1594
|
+
)),
|
|
1595
|
+
(i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
1596
|
+
/* @__PURE__ */ jsx("span", { "aria-hidden": true, children: KEYBIND_SEPARATOR }),
|
|
1597
|
+
keybindsSeparatorLabel && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
|
|
1598
|
+
" ",
|
|
1599
|
+
keybindsSeparatorLabel,
|
|
1600
|
+
" "
|
|
1601
|
+
] })
|
|
1602
|
+
] }, `keybind-separator-${i}`)
|
|
1603
|
+
)
|
|
1604
|
+
}
|
|
1605
|
+
);
|
|
1606
|
+
}
|
|
1607
|
+
);
|
|
1608
|
+
const Spinner = forwardRef(
|
|
1609
|
+
function Spinner2({ size, color, label, className, ...otherProps }, forwardedRef) {
|
|
1610
|
+
const prefix = usePrefix();
|
|
1611
|
+
return /* @__PURE__ */ jsx(
|
|
1612
|
+
"span",
|
|
1325
1613
|
{
|
|
1326
1614
|
className: cx(
|
|
1327
1615
|
prefix("spinner"),
|
|
@@ -1329,13 +1617,12 @@ const Spinner = forwardRef(
|
|
|
1329
1617
|
className
|
|
1330
1618
|
),
|
|
1331
1619
|
"data-accent": color,
|
|
1332
|
-
role: "status",
|
|
1333
|
-
"aria-hidden": true,
|
|
1620
|
+
role: label ? "status" : void 0,
|
|
1334
1621
|
ref: forwardedRef,
|
|
1335
|
-
...otherProps
|
|
1622
|
+
...otherProps,
|
|
1623
|
+
children: label && /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
|
|
1336
1624
|
}
|
|
1337
1625
|
);
|
|
1338
|
-
return label ? /* @__PURE__ */ jsx(AccessibleIcon.Root, { label, children: spinner }) : spinner;
|
|
1339
1626
|
}
|
|
1340
1627
|
);
|
|
1341
1628
|
const Tooltip = forwardRef(function Tooltip2({
|
|
@@ -1357,7 +1644,7 @@ const Tooltip = forwardRef(function Tooltip2({
|
|
|
1357
1644
|
}, forwardedRef) {
|
|
1358
1645
|
const prefix = usePrefix();
|
|
1359
1646
|
const portalContext = usePortalContext();
|
|
1360
|
-
return /* @__PURE__ */ jsxs(
|
|
1647
|
+
return content == null || typeof content === "boolean" ? children : /* @__PURE__ */ jsxs(
|
|
1361
1648
|
Tooltip$1.Root,
|
|
1362
1649
|
{
|
|
1363
1650
|
defaultOpen,
|
|
@@ -1405,7 +1692,6 @@ const Tooltip = forwardRef(function Tooltip2({
|
|
|
1405
1692
|
);
|
|
1406
1693
|
});
|
|
1407
1694
|
const TooltipProvider = Tooltip$1.Provider;
|
|
1408
|
-
const VisuallyHidden = VisuallyHidden$1.Root;
|
|
1409
1695
|
const IconButton = forwardRef(function IconButton2({
|
|
1410
1696
|
as = "button",
|
|
1411
1697
|
asChild,
|
|
@@ -1420,10 +1706,13 @@ const IconButton = forwardRef(function IconButton2({
|
|
|
1420
1706
|
loading,
|
|
1421
1707
|
loadingLabel,
|
|
1422
1708
|
showSpinner = loading,
|
|
1423
|
-
|
|
1709
|
+
tooltipContent,
|
|
1710
|
+
keybinds,
|
|
1424
1711
|
iconProps,
|
|
1712
|
+
labelProps,
|
|
1425
1713
|
spinnerProps,
|
|
1426
1714
|
tooltipProps,
|
|
1715
|
+
keybindsProps,
|
|
1427
1716
|
type,
|
|
1428
1717
|
onClick,
|
|
1429
1718
|
className,
|
|
@@ -1432,7 +1721,10 @@ const IconButton = forwardRef(function IconButton2({
|
|
|
1432
1721
|
}, forwardedRef) {
|
|
1433
1722
|
const prefix = usePrefix();
|
|
1434
1723
|
const relevantLabel = loading ? loadingLabel || label : label;
|
|
1435
|
-
|
|
1724
|
+
if (tooltipContent === void 0) {
|
|
1725
|
+
tooltipContent = relevantLabel;
|
|
1726
|
+
}
|
|
1727
|
+
const labelEl = relevantLabel && /* @__PURE__ */ jsx(VisuallyHidden, { ...labelProps, children: relevantLabel });
|
|
1436
1728
|
const iconEl = icon && !showSpinner && /* @__PURE__ */ jsx(Slot, { className: cx(prefix("icon-button__icon"), iconProps?.className), children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, fixedWidth: true, ...iconProps }) });
|
|
1437
1729
|
const spinnerEl = showSpinner && /* @__PURE__ */ jsx(
|
|
1438
1730
|
Spinner,
|
|
@@ -1478,16 +1770,38 @@ const IconButton = forwardRef(function IconButton2({
|
|
|
1478
1770
|
"data-disabled": boolDataAttr(loading || !isButton && disabled),
|
|
1479
1771
|
"aria-disabled": loading || !isButton && disabled || void 0,
|
|
1480
1772
|
"data-active": boolDataAttr(active),
|
|
1773
|
+
"aria-keyshortcuts": keybindsToAriaKeyShortcuts(keybinds),
|
|
1481
1774
|
tabIndex: !isButton && disabled ? -1 : void 0,
|
|
1482
1775
|
ref: forwardedRef,
|
|
1483
1776
|
...otherProps,
|
|
1484
1777
|
children: content
|
|
1485
1778
|
}
|
|
1486
1779
|
);
|
|
1487
|
-
return
|
|
1780
|
+
return tooltipContent && typeof tooltipContent !== "boolean" || keybinds ? /* @__PURE__ */ jsx(
|
|
1781
|
+
Tooltip,
|
|
1782
|
+
{
|
|
1783
|
+
...tooltipProps,
|
|
1784
|
+
content: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1785
|
+
tooltipContent && /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: tooltipContent }),
|
|
1786
|
+
keybinds && /* @__PURE__ */ jsx(
|
|
1787
|
+
Keybinds,
|
|
1788
|
+
{
|
|
1789
|
+
"aria-hidden": true,
|
|
1790
|
+
keybinds,
|
|
1791
|
+
...keybindsProps,
|
|
1792
|
+
className: cx(
|
|
1793
|
+
prefix("icon-button__keybinds"),
|
|
1794
|
+
keybindsProps?.className
|
|
1795
|
+
)
|
|
1796
|
+
}
|
|
1797
|
+
)
|
|
1798
|
+
] }),
|
|
1799
|
+
children: button
|
|
1800
|
+
}
|
|
1801
|
+
) : button;
|
|
1488
1802
|
});
|
|
1489
1803
|
const CloseButton = forwardRef(
|
|
1490
|
-
function CloseIconButton({ icon, label,
|
|
1804
|
+
function CloseIconButton({ icon, label, tooltipContent = null, className, ...otherProps }, forwardedRef) {
|
|
1491
1805
|
const prefix = usePrefix();
|
|
1492
1806
|
const [locale7] = useLocale();
|
|
1493
1807
|
label ??= locale7.CloseButton.label;
|
|
@@ -1499,7 +1813,7 @@ const CloseButton = forwardRef(
|
|
|
1499
1813
|
circle: true,
|
|
1500
1814
|
icon: icon ?? faClose,
|
|
1501
1815
|
label,
|
|
1502
|
-
|
|
1816
|
+
tooltipContent,
|
|
1503
1817
|
...otherProps,
|
|
1504
1818
|
ref: forwardedRef
|
|
1505
1819
|
}
|
|
@@ -1690,8 +2004,12 @@ const Button = forwardRef(function Button2({
|
|
|
1690
2004
|
loading,
|
|
1691
2005
|
loadingContent,
|
|
1692
2006
|
showSpinner = loading,
|
|
2007
|
+
tooltipContent,
|
|
2008
|
+
keybinds,
|
|
1693
2009
|
iconProps,
|
|
1694
2010
|
spinnerProps,
|
|
2011
|
+
tooltipProps,
|
|
2012
|
+
keybindsProps,
|
|
1695
2013
|
type,
|
|
1696
2014
|
onClick,
|
|
1697
2015
|
className,
|
|
@@ -1734,7 +2052,7 @@ const Button = forwardRef(function Button2({
|
|
|
1734
2052
|
);
|
|
1735
2053
|
const isButton = as === "button" && !asChild;
|
|
1736
2054
|
const As = asChild ? Slot : as;
|
|
1737
|
-
|
|
2055
|
+
const buttonEl = /* @__PURE__ */ jsxs(
|
|
1738
2056
|
As,
|
|
1739
2057
|
{
|
|
1740
2058
|
type: type ?? (isButton ? "button" : void 0),
|
|
@@ -1751,6 +2069,7 @@ const Button = forwardRef(function Button2({
|
|
|
1751
2069
|
"data-disabled": boolDataAttr(loading || !isButton && disabled),
|
|
1752
2070
|
"aria-disabled": loading || !isButton && disabled || void 0,
|
|
1753
2071
|
"data-active": boolDataAttr(active),
|
|
2072
|
+
"aria-keyshortcuts": keybindsToAriaKeyShortcuts(keybinds),
|
|
1754
2073
|
tabIndex: !isButton && disabled ? -1 : void 0,
|
|
1755
2074
|
ref: forwardedRef,
|
|
1756
2075
|
...otherProps,
|
|
@@ -1763,6 +2082,28 @@ const Button = forwardRef(function Button2({
|
|
|
1763
2082
|
]
|
|
1764
2083
|
}
|
|
1765
2084
|
);
|
|
2085
|
+
return tooltipContent && typeof tooltipContent !== "boolean" || keybinds ? /* @__PURE__ */ jsx(
|
|
2086
|
+
Tooltip,
|
|
2087
|
+
{
|
|
2088
|
+
...tooltipProps,
|
|
2089
|
+
content: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2090
|
+
tooltipContent && /* @__PURE__ */ jsx("div", { children: tooltipContent }),
|
|
2091
|
+
keybinds && /* @__PURE__ */ jsx(
|
|
2092
|
+
Keybinds,
|
|
2093
|
+
{
|
|
2094
|
+
keybinds,
|
|
2095
|
+
"aria-hidden": true,
|
|
2096
|
+
...keybindsProps,
|
|
2097
|
+
className: cx(
|
|
2098
|
+
prefix("button__keybinds"),
|
|
2099
|
+
keybindsProps?.className
|
|
2100
|
+
)
|
|
2101
|
+
}
|
|
2102
|
+
)
|
|
2103
|
+
] }),
|
|
2104
|
+
children: buttonEl
|
|
2105
|
+
}
|
|
2106
|
+
) : buttonEl;
|
|
1766
2107
|
});
|
|
1767
2108
|
const AlertDialogProviderContext = createContext(void 0);
|
|
1768
2109
|
function AlertDialogProvider({ children }) {
|
|
@@ -2140,6 +2481,7 @@ const Toast = forwardRef(function Toast2({
|
|
|
2140
2481
|
action,
|
|
2141
2482
|
actionAltText,
|
|
2142
2483
|
showCloseButton = action === void 0,
|
|
2484
|
+
visuallyHidden,
|
|
2143
2485
|
rootProps,
|
|
2144
2486
|
containerProps,
|
|
2145
2487
|
iconProps,
|
|
@@ -2155,7 +2497,7 @@ const Toast = forwardRef(function Toast2({
|
|
|
2155
2497
|
const [collapsibleOpen, setCollapsibleOpen] = useState(open);
|
|
2156
2498
|
useEffect(() => setCollapsibleOpen(open), [open]);
|
|
2157
2499
|
const accent = severity === "info" ? "primary" : severity;
|
|
2158
|
-
|
|
2500
|
+
const toast = /* @__PURE__ */ jsx(
|
|
2159
2501
|
Toast$1.Root,
|
|
2160
2502
|
{
|
|
2161
2503
|
type,
|
|
@@ -2245,6 +2587,7 @@ const Toast = forwardRef(function Toast2({
|
|
|
2245
2587
|
) })
|
|
2246
2588
|
}
|
|
2247
2589
|
);
|
|
2590
|
+
return visuallyHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: toast }) : toast;
|
|
2248
2591
|
});
|
|
2249
2592
|
const ToastDescription = Toast$1.Description;
|
|
2250
2593
|
function ToastProvider({ label, ...otherProps }) {
|
|
@@ -2888,7 +3231,7 @@ function combineAriaIds(...args) {
|
|
|
2888
3231
|
if (innerIds) {
|
|
2889
3232
|
args.push(innerIds);
|
|
2890
3233
|
}
|
|
2891
|
-
} else if (arg) {
|
|
3234
|
+
} else if (arg && typeof arg !== "boolean") {
|
|
2892
3235
|
ids.push(String(arg));
|
|
2893
3236
|
}
|
|
2894
3237
|
}
|
|
@@ -3023,7 +3366,8 @@ const ControlCode = forwardRef(
|
|
|
3023
3366
|
visuallyHiddenPrefix,
|
|
3024
3367
|
" "
|
|
3025
3368
|
] }),
|
|
3026
|
-
/* @__PURE__ */ jsx(Slottable, { children })
|
|
3369
|
+
/* @__PURE__ */ jsx(Slottable, { children }),
|
|
3370
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { children: ", " })
|
|
3027
3371
|
]
|
|
3028
3372
|
}
|
|
3029
3373
|
) });
|
|
@@ -3683,21 +4027,13 @@ const Stack = forwardRef(function Stack2({
|
|
|
3683
4027
|
...dataAttrs,
|
|
3684
4028
|
ref: forwardedRef,
|
|
3685
4029
|
...otherProps,
|
|
3686
|
-
children: divider ?
|
|
4030
|
+
children: divider ? intersperse(
|
|
4031
|
+
Children.toArray(children).filter(Boolean),
|
|
4032
|
+
(i) => cloneElement(divider, { key: prefix(`stack-divider-${i}`) })
|
|
4033
|
+
) : children
|
|
3687
4034
|
}
|
|
3688
4035
|
) });
|
|
3689
4036
|
});
|
|
3690
|
-
function divideChildren(children, divider, prefix) {
|
|
3691
|
-
return Children.toArray(children).filter(Boolean).reduce((dividedChildren, child, i, children2) => {
|
|
3692
|
-
dividedChildren.push(child);
|
|
3693
|
-
if (i < children2.length - 1) {
|
|
3694
|
-
dividedChildren.push(
|
|
3695
|
-
cloneElement(divider, { key: prefix(`stack-divider-${i}`) })
|
|
3696
|
-
);
|
|
3697
|
-
}
|
|
3698
|
-
return dividedChildren;
|
|
3699
|
-
}, []);
|
|
3700
|
-
}
|
|
3701
4037
|
const DEFAULT_TABLE_ROW_HEIGHT = 41;
|
|
3702
4038
|
const TableRow = forwardRef(
|
|
3703
4039
|
function TableRow2({ className, selected, ...otherProps }, forwardedRef) {
|
|
@@ -4253,6 +4589,104 @@ function getRowKey(row, rowKey) {
|
|
|
4253
4589
|
return typeof rowKey === "function" ? rowKey(row) : row[rowKey];
|
|
4254
4590
|
}
|
|
4255
4591
|
const CheckboxGroupContext = createContext(null);
|
|
4592
|
+
function useCreateCheckboxGroupContext({
|
|
4593
|
+
defaultValue,
|
|
4594
|
+
value,
|
|
4595
|
+
onValueChange,
|
|
4596
|
+
name,
|
|
4597
|
+
required,
|
|
4598
|
+
loadingDescriptionId,
|
|
4599
|
+
errorMessageIds,
|
|
4600
|
+
descriptionIds,
|
|
4601
|
+
checkboxGroupRef
|
|
4602
|
+
}) {
|
|
4603
|
+
const prefix = usePrefix();
|
|
4604
|
+
const latest = useLatestValues({ onValueChange });
|
|
4605
|
+
const store = useConstant(
|
|
4606
|
+
() => createStore()(
|
|
4607
|
+
subscribeWithSelector((set, get) => ({
|
|
4608
|
+
value: value ?? defaultValue ?? [],
|
|
4609
|
+
firstCheckboxId: void 0,
|
|
4610
|
+
actions: {
|
|
4611
|
+
handleCheckedChange: (checkboxValue, checked) => {
|
|
4612
|
+
const newValue = checked ? [...get().value, checkboxValue] : get().value.filter((v) => v !== checkboxValue);
|
|
4613
|
+
set({ value: newValue });
|
|
4614
|
+
latest.onValueChange?.(newValue);
|
|
4615
|
+
}
|
|
4616
|
+
}
|
|
4617
|
+
}))
|
|
4618
|
+
)
|
|
4619
|
+
);
|
|
4620
|
+
useEffect(() => {
|
|
4621
|
+
if (value !== void 0) {
|
|
4622
|
+
store.setState({ value });
|
|
4623
|
+
}
|
|
4624
|
+
}, [store, value]);
|
|
4625
|
+
useEffect(() => {
|
|
4626
|
+
const checkboxGroup = checkboxGroupRef.current;
|
|
4627
|
+
if (!checkboxGroup) {
|
|
4628
|
+
return;
|
|
4629
|
+
}
|
|
4630
|
+
const setFirstCheckboxId = () => store.setState({
|
|
4631
|
+
firstCheckboxId: checkboxGroup.querySelector(`.${prefix("checkbox")}`)?.id
|
|
4632
|
+
});
|
|
4633
|
+
const observer = new MutationObserver(setFirstCheckboxId);
|
|
4634
|
+
observer.observe(checkboxGroup, { childList: true, subtree: true });
|
|
4635
|
+
setFirstCheckboxId();
|
|
4636
|
+
return () => observer.disconnect();
|
|
4637
|
+
}, [checkboxGroupRef, prefix, store]);
|
|
4638
|
+
return useMemo(
|
|
4639
|
+
() => ({
|
|
4640
|
+
name,
|
|
4641
|
+
required,
|
|
4642
|
+
loadingDescriptionId,
|
|
4643
|
+
errorMessageIds,
|
|
4644
|
+
descriptionIds,
|
|
4645
|
+
store
|
|
4646
|
+
}),
|
|
4647
|
+
[
|
|
4648
|
+
descriptionIds,
|
|
4649
|
+
errorMessageIds,
|
|
4650
|
+
loadingDescriptionId,
|
|
4651
|
+
name,
|
|
4652
|
+
required,
|
|
4653
|
+
store
|
|
4654
|
+
]
|
|
4655
|
+
);
|
|
4656
|
+
}
|
|
4657
|
+
function useCheckboxGroupContext() {
|
|
4658
|
+
return useContext(CheckboxGroupContext);
|
|
4659
|
+
}
|
|
4660
|
+
function useIsCheckedInGroup(checkboxValue) {
|
|
4661
|
+
const store = useCheckboxGroupContext()?.store ?? EMPTY_STORE;
|
|
4662
|
+
const handleCheckedChange = useStore(
|
|
4663
|
+
store,
|
|
4664
|
+
(state) => state.actions?.handleCheckedChange
|
|
4665
|
+
);
|
|
4666
|
+
return [
|
|
4667
|
+
useStore(store, (state) => state.value?.includes(checkboxValue)),
|
|
4668
|
+
useMemo(
|
|
4669
|
+
() => handleCheckedChange && ((checked) => handleCheckedChange(checkboxValue, checked)),
|
|
4670
|
+
[checkboxValue, handleCheckedChange]
|
|
4671
|
+
)
|
|
4672
|
+
];
|
|
4673
|
+
}
|
|
4674
|
+
function useIsRequiredInGroup() {
|
|
4675
|
+
const context = useCheckboxGroupContext();
|
|
4676
|
+
const store = context?.store ?? EMPTY_STORE;
|
|
4677
|
+
const required = context?.required;
|
|
4678
|
+
return useStore(store, (state) => required && state.value.length === 0);
|
|
4679
|
+
}
|
|
4680
|
+
function useCheckboxGroupDescriptionIds(checkboxId) {
|
|
4681
|
+
const context = useCheckboxGroupContext();
|
|
4682
|
+
const store = context?.store ?? EMPTY_STORE;
|
|
4683
|
+
const descriptionIds = context?.descriptionIds;
|
|
4684
|
+
const isFirstCheckbox = useStore(
|
|
4685
|
+
store,
|
|
4686
|
+
(state) => state.firstCheckboxId === checkboxId
|
|
4687
|
+
);
|
|
4688
|
+
return isFirstCheckbox ? descriptionIds : void 0;
|
|
4689
|
+
}
|
|
4256
4690
|
const NATIVE_CONTROLS = /* @__PURE__ */ new Set([
|
|
4257
4691
|
"BUTTON",
|
|
4258
4692
|
"INPUT",
|
|
@@ -4266,7 +4700,6 @@ const Label = forwardRef(function Label2({
|
|
|
4266
4700
|
asChild,
|
|
4267
4701
|
required,
|
|
4268
4702
|
helperText,
|
|
4269
|
-
requiredIconLabel,
|
|
4270
4703
|
helperButtonLabel,
|
|
4271
4704
|
htmlFor,
|
|
4272
4705
|
id,
|
|
@@ -4283,7 +4716,6 @@ const Label = forwardRef(function Label2({
|
|
|
4283
4716
|
}, forwardedRef) {
|
|
4284
4717
|
const prefix = usePrefix();
|
|
4285
4718
|
const [locale7] = useLocale();
|
|
4286
|
-
requiredIconLabel ??= locale7.Label.requiredIconLabel;
|
|
4287
4719
|
helperButtonLabel ??= locale7.Label.helperButtonLabel;
|
|
4288
4720
|
const { printHidden } = usePrintClassNames();
|
|
4289
4721
|
const labelId = useSetFieldLabel(children, id);
|
|
@@ -4337,7 +4769,6 @@ const Label = forwardRef(function Label2({
|
|
|
4337
4769
|
/* @__PURE__ */ jsx(
|
|
4338
4770
|
Icon,
|
|
4339
4771
|
{
|
|
4340
|
-
label: requiredIconLabel && ` (${requiredIconLabel})`,
|
|
4341
4772
|
...requiredIconProps,
|
|
4342
4773
|
className: cx(
|
|
4343
4774
|
prefix("label__required-icon"),
|
|
@@ -4421,7 +4852,7 @@ const Checkbox = forwardRef(function Checkbox2({
|
|
|
4421
4852
|
const [locale7] = useLocale();
|
|
4422
4853
|
loadingDescription ??= locale7.Input.loadingDescription;
|
|
4423
4854
|
const controlContext = useControlContext();
|
|
4424
|
-
const checkboxGroupContext =
|
|
4855
|
+
const checkboxGroupContext = useCheckboxGroupContext();
|
|
4425
4856
|
const fieldLabelId = useFieldLabelId();
|
|
4426
4857
|
const dataTableColumnLabelId = useDataTableColumnLabelId();
|
|
4427
4858
|
const descriptionIds = useFieldDescriptionIds();
|
|
@@ -4444,27 +4875,24 @@ const Checkbox = forwardRef(function Checkbox2({
|
|
|
4444
4875
|
disabled = controlContext?.disabled || disabled;
|
|
4445
4876
|
loading = controlContext?.loading || loading;
|
|
4446
4877
|
readOnly = controlContext?.readOnly || readOnly;
|
|
4878
|
+
const requiredInGroup = useIsRequiredInGroup();
|
|
4879
|
+
const groupDescriptionIds = useCheckboxGroupDescriptionIds(controlId);
|
|
4880
|
+
const [checkedInGroup, setCheckedInGroup] = useIsCheckedInGroup(
|
|
4881
|
+
String(value ?? "")
|
|
4882
|
+
);
|
|
4447
4883
|
const [checked, setChecked] = useControllableState(
|
|
4448
4884
|
defaultChecked ?? false,
|
|
4449
|
-
|
|
4885
|
+
checkedInGroup ?? controlledChecked
|
|
4450
4886
|
);
|
|
4451
|
-
const onContextCheckedChange = checkboxGroupContext?.onCheckedChange;
|
|
4452
4887
|
const handleCheckedChange = useCallback(
|
|
4453
4888
|
(state) => {
|
|
4454
4889
|
if (!loading && !readOnly) {
|
|
4455
4890
|
onCheckedChange?.(state);
|
|
4456
4891
|
setChecked(state);
|
|
4457
|
-
|
|
4892
|
+
setCheckedInGroup?.(state === true);
|
|
4458
4893
|
}
|
|
4459
4894
|
},
|
|
4460
|
-
[
|
|
4461
|
-
loading,
|
|
4462
|
-
onCheckedChange,
|
|
4463
|
-
onContextCheckedChange,
|
|
4464
|
-
readOnly,
|
|
4465
|
-
setChecked,
|
|
4466
|
-
value
|
|
4467
|
-
]
|
|
4895
|
+
[loading, onCheckedChange, readOnly, setChecked, setCheckedInGroup]
|
|
4468
4896
|
);
|
|
4469
4897
|
const setFieldControlFocused = useSetFieldControlFocused();
|
|
4470
4898
|
const handleFocus = useCallback(() => {
|
|
@@ -4521,7 +4949,7 @@ const Checkbox = forwardRef(function Checkbox2({
|
|
|
4521
4949
|
...rootProps,
|
|
4522
4950
|
className: cx(prefix("checkbox__root"), rootProps?.className),
|
|
4523
4951
|
children: [
|
|
4524
|
-
code && /* @__PURE__ */ jsx(
|
|
4952
|
+
code != null && typeof code !== "boolean" && /* @__PURE__ */ jsx(
|
|
4525
4953
|
ControlCode,
|
|
4526
4954
|
{
|
|
4527
4955
|
...codeProps,
|
|
@@ -4556,7 +4984,7 @@ const Checkbox = forwardRef(function Checkbox2({
|
|
|
4556
4984
|
name: name ?? checkboxGroupContext?.name,
|
|
4557
4985
|
value,
|
|
4558
4986
|
checked,
|
|
4559
|
-
required,
|
|
4987
|
+
required: requiredInGroup || required || void 0,
|
|
4560
4988
|
disabled,
|
|
4561
4989
|
"data-loading": boolDataAttr(loading),
|
|
4562
4990
|
"data-readonly": boolDataAttr(readOnly),
|
|
@@ -4575,9 +5003,8 @@ const Checkbox = forwardRef(function Checkbox2({
|
|
|
4575
5003
|
errorMessageIds,
|
|
4576
5004
|
checkboxGroupContext?.errorMessageIds,
|
|
4577
5005
|
ariaDescribedBy,
|
|
4578
|
-
checkboxGroupContext?.ariaDescribedBy,
|
|
4579
5006
|
descriptionIds,
|
|
4580
|
-
|
|
5007
|
+
groupDescriptionIds
|
|
4581
5008
|
),
|
|
4582
5009
|
...otherProps,
|
|
4583
5010
|
ref: combinedCheckboxRef,
|
|
@@ -4630,7 +5057,7 @@ const Checkbox = forwardRef(function Checkbox2({
|
|
|
4630
5057
|
)
|
|
4631
5058
|
}
|
|
4632
5059
|
),
|
|
4633
|
-
loadingDescriptionId && /* @__PURE__ */ jsx(
|
|
5060
|
+
loadingDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: loadingDescriptionId, children: loadingDescription })
|
|
4634
5061
|
]
|
|
4635
5062
|
}
|
|
4636
5063
|
)
|
|
@@ -5891,7 +6318,7 @@ const Input = forwardRef(
|
|
|
5891
6318
|
)
|
|
5892
6319
|
}
|
|
5893
6320
|
),
|
|
5894
|
-
loadingDescriptionId && /* @__PURE__ */ jsx(
|
|
6321
|
+
loadingDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: loadingDescriptionId, children: loadingDescription })
|
|
5895
6322
|
] });
|
|
5896
6323
|
}
|
|
5897
6324
|
);
|
|
@@ -6001,6 +6428,7 @@ const MenuListItem = forwardRef(
|
|
|
6001
6428
|
showSpinner = loading,
|
|
6002
6429
|
icon = null,
|
|
6003
6430
|
iconPlacement,
|
|
6431
|
+
keybinds,
|
|
6004
6432
|
href,
|
|
6005
6433
|
target,
|
|
6006
6434
|
rel,
|
|
@@ -6008,6 +6436,7 @@ const MenuListItem = forwardRef(
|
|
|
6008
6436
|
contentProps,
|
|
6009
6437
|
iconProps,
|
|
6010
6438
|
spinnerProps,
|
|
6439
|
+
keybindsProps,
|
|
6011
6440
|
className,
|
|
6012
6441
|
children,
|
|
6013
6442
|
...otherProps
|
|
@@ -6062,6 +6491,7 @@ const MenuListItem = forwardRef(
|
|
|
6062
6491
|
href,
|
|
6063
6492
|
target,
|
|
6064
6493
|
rel,
|
|
6494
|
+
"aria-keyshortcuts": type !== "text" ? keybindsToAriaKeyShortcuts(keybinds) : void 0,
|
|
6065
6495
|
tabIndex: type === "link" && disabled ? -1 : void 0,
|
|
6066
6496
|
...actionProps,
|
|
6067
6497
|
onClick: combineEventHandlers(
|
|
@@ -6088,6 +6518,19 @@ const MenuListItem = forwardRef(
|
|
|
6088
6518
|
children: loading && loadingContent ? loadingContent : asChild ? children.props.children : children
|
|
6089
6519
|
}
|
|
6090
6520
|
),
|
|
6521
|
+
keybinds && /* @__PURE__ */ jsx(
|
|
6522
|
+
Keybinds,
|
|
6523
|
+
{
|
|
6524
|
+
"aria-hidden": true,
|
|
6525
|
+
keybinds,
|
|
6526
|
+
limit: 1,
|
|
6527
|
+
...keybindsProps,
|
|
6528
|
+
className: cx(
|
|
6529
|
+
prefix("menu-list__item-keybinds"),
|
|
6530
|
+
keybindsProps?.className
|
|
6531
|
+
)
|
|
6532
|
+
}
|
|
6533
|
+
),
|
|
6091
6534
|
iconPlacement === "end" && iconEl,
|
|
6092
6535
|
iconPlacement === "end" && spinnerEl
|
|
6093
6536
|
]
|
|
@@ -6098,6 +6541,7 @@ const MenuListItem = forwardRef(
|
|
|
6098
6541
|
As,
|
|
6099
6542
|
{
|
|
6100
6543
|
className: cx(prefix("menu-list__item"), className),
|
|
6544
|
+
"aria-keyshortcuts": type === "text" ? keybindsToAriaKeyShortcuts(keybinds) : void 0,
|
|
6101
6545
|
...otherProps,
|
|
6102
6546
|
ref: forwardedRef,
|
|
6103
6547
|
children: asChild ? cloneElement(children, void 0, actionEl) : actionEl
|
|
@@ -6339,6 +6783,7 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
|
|
|
6339
6783
|
showSpinner,
|
|
6340
6784
|
icon,
|
|
6341
6785
|
iconPlacement,
|
|
6786
|
+
keybinds,
|
|
6342
6787
|
href,
|
|
6343
6788
|
target,
|
|
6344
6789
|
rel,
|
|
@@ -6347,6 +6792,7 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
|
|
|
6347
6792
|
contentProps,
|
|
6348
6793
|
iconProps,
|
|
6349
6794
|
spinnerProps,
|
|
6795
|
+
keybindsProps,
|
|
6350
6796
|
className,
|
|
6351
6797
|
children,
|
|
6352
6798
|
...otherProps
|
|
@@ -6375,6 +6821,7 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
|
|
|
6375
6821
|
showSpinner,
|
|
6376
6822
|
icon,
|
|
6377
6823
|
iconPlacement,
|
|
6824
|
+
keybinds,
|
|
6378
6825
|
href,
|
|
6379
6826
|
target,
|
|
6380
6827
|
rel,
|
|
@@ -6389,6 +6836,7 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
|
|
|
6389
6836
|
contentProps,
|
|
6390
6837
|
iconProps,
|
|
6391
6838
|
spinnerProps,
|
|
6839
|
+
keybindsProps,
|
|
6392
6840
|
asChild: true,
|
|
6393
6841
|
children: /* @__PURE__ */ jsx(
|
|
6394
6842
|
Command.Item,
|
|
@@ -7069,7 +7517,7 @@ const Select = forwardRef(function Select2({
|
|
|
7069
7517
|
const CAPTION_FORMAT = "LLLL y";
|
|
7070
7518
|
const MONTH_FORMAT = "LLLL";
|
|
7071
7519
|
const YEAR_FORMAT = "yyyy";
|
|
7072
|
-
const
|
|
7520
|
+
const CalendarHeader = memo(function CalendarHeader2({
|
|
7073
7521
|
calendarMonth,
|
|
7074
7522
|
displayIndex,
|
|
7075
7523
|
...otherProps
|
|
@@ -7078,9 +7526,12 @@ const CalendarMonthCaption = memo(function CalendarMonthCaption2({
|
|
|
7078
7526
|
const {
|
|
7079
7527
|
minAllowedDate,
|
|
7080
7528
|
maxAllowedDate,
|
|
7529
|
+
monthSelectLabel,
|
|
7530
|
+
yearSelectLabel,
|
|
7081
7531
|
previousMonthLabel,
|
|
7082
7532
|
nextMonthLabel,
|
|
7083
|
-
|
|
7533
|
+
headerProps,
|
|
7534
|
+
headerLabelProps,
|
|
7084
7535
|
previousButtonProps,
|
|
7085
7536
|
nextButtonProps,
|
|
7086
7537
|
monthSelectProps,
|
|
@@ -7163,9 +7614,12 @@ const CalendarMonthCaption = memo(function CalendarMonthCaption2({
|
|
|
7163
7614
|
const captionLabel = /* @__PURE__ */ jsx(
|
|
7164
7615
|
"span",
|
|
7165
7616
|
{
|
|
7166
|
-
className: prefix("calendar__caption-label"),
|
|
7167
7617
|
role: "status",
|
|
7168
|
-
|
|
7618
|
+
...headerLabelProps,
|
|
7619
|
+
className: cx(
|
|
7620
|
+
prefix("calendar__header-label"),
|
|
7621
|
+
headerLabelProps?.className
|
|
7622
|
+
),
|
|
7169
7623
|
children: format(displayDate, CAPTION_FORMAT, { locale: locale7 })
|
|
7170
7624
|
}
|
|
7171
7625
|
);
|
|
@@ -7224,19 +7678,20 @@ const CalendarMonthCaption = memo(function CalendarMonthCaption2({
|
|
|
7224
7678
|
[locale7, yearDates]
|
|
7225
7679
|
);
|
|
7226
7680
|
return /* @__PURE__ */ jsxs(
|
|
7227
|
-
"
|
|
7681
|
+
"header",
|
|
7228
7682
|
{
|
|
7229
7683
|
...otherProps,
|
|
7230
|
-
...
|
|
7231
|
-
className: cx(prefix("
|
|
7684
|
+
...headerProps,
|
|
7685
|
+
className: cx(prefix("calendar__header"), headerProps?.className),
|
|
7232
7686
|
children: [
|
|
7233
|
-
disableNavigation ? captionLabel : /* @__PURE__ */ jsx(VisuallyHidden, { children: captionLabel }),
|
|
7687
|
+
disableNavigation ? captionLabel : /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: captionLabel }),
|
|
7234
7688
|
!disableNavigation && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
7235
7689
|
months.length > 1 && /* @__PURE__ */ jsx("div", { className: cx(prefix("calendar__navigation")), children: isFirst && prevButton }),
|
|
7236
7690
|
/* @__PURE__ */ jsx("div", { className: prefix("calendar__selects"), children: /* @__PURE__ */ jsxs(ClearContexts, { children: [
|
|
7237
7691
|
/* @__PURE__ */ jsx(
|
|
7238
7692
|
Select,
|
|
7239
7693
|
{
|
|
7694
|
+
"aria-label": monthSelectLabel,
|
|
7240
7695
|
disabled: !allowsPrevMonth && !allowsNextMonth,
|
|
7241
7696
|
showClearButton: false,
|
|
7242
7697
|
...monthSelectProps,
|
|
@@ -7255,6 +7710,7 @@ const CalendarMonthCaption = memo(function CalendarMonthCaption2({
|
|
|
7255
7710
|
/* @__PURE__ */ jsx(
|
|
7256
7711
|
Select,
|
|
7257
7712
|
{
|
|
7713
|
+
"aria-label": yearSelectLabel,
|
|
7258
7714
|
disabled: yearDates.length < 2,
|
|
7259
7715
|
showClearButton: false,
|
|
7260
7716
|
...yearSelectProps,
|
|
@@ -7288,6 +7744,8 @@ function Calendar({
|
|
|
7288
7744
|
maxMonth,
|
|
7289
7745
|
minYear,
|
|
7290
7746
|
maxYear,
|
|
7747
|
+
monthSelectLabel,
|
|
7748
|
+
yearSelectLabel,
|
|
7291
7749
|
previousMonthLabel,
|
|
7292
7750
|
nextMonthLabel,
|
|
7293
7751
|
defaultMonth,
|
|
@@ -7299,10 +7757,10 @@ function Calendar({
|
|
|
7299
7757
|
showOutsideDays = true,
|
|
7300
7758
|
fixedWeeks = true,
|
|
7301
7759
|
disableNavigation,
|
|
7302
|
-
locale: dateFnsLocale,
|
|
7303
7760
|
disabled,
|
|
7304
7761
|
modifiers,
|
|
7305
|
-
|
|
7762
|
+
headerProps,
|
|
7763
|
+
headerLabelProps,
|
|
7306
7764
|
previousButtonProps,
|
|
7307
7765
|
nextButtonProps,
|
|
7308
7766
|
monthSelectProps,
|
|
@@ -7312,7 +7770,8 @@ function Calendar({
|
|
|
7312
7770
|
}) {
|
|
7313
7771
|
const prefix = usePrefix();
|
|
7314
7772
|
const [locale7] = useLocale();
|
|
7315
|
-
|
|
7773
|
+
monthSelectLabel ??= locale7.Calendar.monthSelectLabel;
|
|
7774
|
+
yearSelectLabel ??= locale7.Calendar.yearSelectLabel;
|
|
7316
7775
|
previousMonthLabel ??= locale7.Calendar.previousMonthLabel;
|
|
7317
7776
|
nextMonthLabel ??= locale7.Calendar.nextMonthLabel;
|
|
7318
7777
|
const minAllowedDate = useMemo(() => {
|
|
@@ -7400,9 +7859,12 @@ function Calendar({
|
|
|
7400
7859
|
value: {
|
|
7401
7860
|
minAllowedDate,
|
|
7402
7861
|
maxAllowedDate,
|
|
7862
|
+
monthSelectLabel,
|
|
7863
|
+
yearSelectLabel,
|
|
7403
7864
|
previousMonthLabel,
|
|
7404
7865
|
nextMonthLabel,
|
|
7405
|
-
|
|
7866
|
+
headerProps,
|
|
7867
|
+
headerLabelProps,
|
|
7406
7868
|
previousButtonProps,
|
|
7407
7869
|
nextButtonProps,
|
|
7408
7870
|
monthSelectProps,
|
|
@@ -7411,11 +7873,11 @@ function Calendar({
|
|
|
7411
7873
|
children: /* @__PURE__ */ jsx(
|
|
7412
7874
|
DayPicker,
|
|
7413
7875
|
{
|
|
7414
|
-
locale:
|
|
7876
|
+
locale: locale7.dayPickerLocale,
|
|
7415
7877
|
required,
|
|
7416
7878
|
disabled: composedDisabled,
|
|
7417
7879
|
components: {
|
|
7418
|
-
MonthCaption:
|
|
7880
|
+
MonthCaption: CalendarHeader,
|
|
7419
7881
|
Day: CalendarDay,
|
|
7420
7882
|
Nav: () => null
|
|
7421
7883
|
},
|
|
@@ -7480,7 +7942,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
|
|
|
7480
7942
|
disabled = false,
|
|
7481
7943
|
readOnly = false,
|
|
7482
7944
|
defaultValue,
|
|
7483
|
-
value
|
|
7945
|
+
value,
|
|
7484
7946
|
onValueChange,
|
|
7485
7947
|
onBlurToOutside,
|
|
7486
7948
|
codeProps,
|
|
@@ -7496,7 +7958,6 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
|
|
|
7496
7958
|
children,
|
|
7497
7959
|
"aria-label": ariaLabel,
|
|
7498
7960
|
"aria-labelledby": ariaLabelledBy,
|
|
7499
|
-
"aria-describedby": ariaDescribedBy,
|
|
7500
7961
|
...otherProps
|
|
7501
7962
|
}, forwardedRef) {
|
|
7502
7963
|
const prefix = usePrefix();
|
|
@@ -7518,18 +7979,6 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
|
|
|
7518
7979
|
const isInTableCell = useIsInTableCell();
|
|
7519
7980
|
inline ??= isInTableCell;
|
|
7520
7981
|
variant ??= isInTableCell ? "cell" : "default";
|
|
7521
|
-
const [value, setValue] = useControllableState(
|
|
7522
|
-
defaultValue ?? [],
|
|
7523
|
-
controlledValue
|
|
7524
|
-
);
|
|
7525
|
-
const handleCheckedChange = useCallback(
|
|
7526
|
-
(checkboxValue, checked) => {
|
|
7527
|
-
const newValue = checked ? [...value, checkboxValue] : value.filter((v) => v !== checkboxValue);
|
|
7528
|
-
setValue(newValue);
|
|
7529
|
-
onValueChange?.(newValue);
|
|
7530
|
-
},
|
|
7531
|
-
[onValueChange, setValue, value]
|
|
7532
|
-
);
|
|
7533
7982
|
const [tabIndex, setTabIndex] = useControllableState(
|
|
7534
7983
|
disabled ? -1 : 0,
|
|
7535
7984
|
controlledTabIndex ?? (disabled ? -1 : void 0)
|
|
@@ -7568,6 +8017,17 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
|
|
|
7568
8017
|
},
|
|
7569
8018
|
[onBlurToOutside, setFieldControlFocused]
|
|
7570
8019
|
);
|
|
8020
|
+
const checkboxGroupContextValue = useCreateCheckboxGroupContext({
|
|
8021
|
+
defaultValue,
|
|
8022
|
+
value,
|
|
8023
|
+
onValueChange,
|
|
8024
|
+
name,
|
|
8025
|
+
required,
|
|
8026
|
+
loadingDescriptionId,
|
|
8027
|
+
errorMessageIds,
|
|
8028
|
+
descriptionIds,
|
|
8029
|
+
checkboxGroupRef
|
|
8030
|
+
});
|
|
7571
8031
|
const combinedCheckboxGroupRef = useCombinedRef(
|
|
7572
8032
|
checkboxGroupRef,
|
|
7573
8033
|
forwardedRef
|
|
@@ -7576,101 +8036,87 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
|
|
|
7576
8036
|
ControlContext.Provider,
|
|
7577
8037
|
{
|
|
7578
8038
|
value: { variant, status, disabled, loading, readOnly },
|
|
7579
|
-
children: /* @__PURE__ */ jsx(
|
|
7580
|
-
|
|
8039
|
+
children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: checkboxGroupContextValue, children: /* @__PURE__ */ jsxs(
|
|
8040
|
+
"div",
|
|
7581
8041
|
{
|
|
7582
|
-
|
|
7583
|
-
|
|
7584
|
-
|
|
7585
|
-
|
|
7586
|
-
|
|
7587
|
-
|
|
7588
|
-
|
|
7589
|
-
|
|
7590
|
-
|
|
7591
|
-
|
|
7592
|
-
|
|
7593
|
-
|
|
7594
|
-
|
|
7595
|
-
|
|
7596
|
-
|
|
7597
|
-
|
|
7598
|
-
|
|
7599
|
-
|
|
7600
|
-
|
|
7601
|
-
|
|
7602
|
-
|
|
7603
|
-
|
|
7604
|
-
|
|
7605
|
-
|
|
7606
|
-
|
|
7607
|
-
|
|
7608
|
-
|
|
7609
|
-
|
|
7610
|
-
|
|
7611
|
-
tabIndex,
|
|
7612
|
-
ref: combinedCheckboxGroupRef,
|
|
7613
|
-
children: [
|
|
7614
|
-
code && /* @__PURE__ */ jsx(
|
|
7615
|
-
ControlCode,
|
|
7616
|
-
{
|
|
7617
|
-
status,
|
|
7618
|
-
...codeProps,
|
|
7619
|
-
id: codeId,
|
|
7620
|
-
className: cx(
|
|
7621
|
-
prefix("checkbox-group__code"),
|
|
7622
|
-
codeProps?.className
|
|
7623
|
-
),
|
|
7624
|
-
children: code
|
|
7625
|
-
}
|
|
8042
|
+
role: "group",
|
|
8043
|
+
id: controlId,
|
|
8044
|
+
...otherProps,
|
|
8045
|
+
"data-status": status,
|
|
8046
|
+
"data-accent": controlStatusToAccent(status),
|
|
8047
|
+
"data-variant": variant,
|
|
8048
|
+
className: cx(
|
|
8049
|
+
prefix("checkbox-group"),
|
|
8050
|
+
inline && prefix("checkbox-group--inline"),
|
|
8051
|
+
className
|
|
8052
|
+
),
|
|
8053
|
+
onMouseDown: combineEventHandlers(onMouseDown, handleMouseDown),
|
|
8054
|
+
onFocus: combineEventHandlers(onFocus, handleFocus),
|
|
8055
|
+
onBlur: combineEventHandlers(onBlur, handleBlur),
|
|
8056
|
+
"aria-disabled": loading || readOnly || void 0,
|
|
8057
|
+
"aria-label": ariaLabel,
|
|
8058
|
+
"aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 ? combineAriaIds(codeId, labelId ?? dataTableColumnLabelId) : void 0),
|
|
8059
|
+
tabIndex,
|
|
8060
|
+
ref: combinedCheckboxGroupRef,
|
|
8061
|
+
children: [
|
|
8062
|
+
code != null && typeof code !== "boolean" && /* @__PURE__ */ jsx(
|
|
8063
|
+
ControlCode,
|
|
8064
|
+
{
|
|
8065
|
+
status,
|
|
8066
|
+
...codeProps,
|
|
8067
|
+
id: codeId,
|
|
8068
|
+
className: cx(
|
|
8069
|
+
prefix("checkbox-group__code"),
|
|
8070
|
+
codeProps?.className
|
|
7626
8071
|
),
|
|
7627
|
-
|
|
7628
|
-
|
|
7629
|
-
|
|
7630
|
-
|
|
7631
|
-
|
|
7632
|
-
|
|
7633
|
-
|
|
7634
|
-
|
|
7635
|
-
|
|
7636
|
-
|
|
7637
|
-
|
|
7638
|
-
|
|
7639
|
-
|
|
7640
|
-
|
|
8072
|
+
children: code
|
|
8073
|
+
}
|
|
8074
|
+
),
|
|
8075
|
+
/* @__PURE__ */ jsx(
|
|
8076
|
+
"div",
|
|
8077
|
+
{
|
|
8078
|
+
"data-status": status,
|
|
8079
|
+
"data-variant": variant,
|
|
8080
|
+
"data-disabled": boolDataAttr(disabled || loading),
|
|
8081
|
+
"data-readonly": boolDataAttr(readOnly),
|
|
8082
|
+
...containerProps,
|
|
8083
|
+
className: cx(
|
|
8084
|
+
prefix("checkbox-group__container"),
|
|
8085
|
+
containerProps?.className
|
|
7641
8086
|
),
|
|
7642
|
-
|
|
7643
|
-
|
|
8087
|
+
children: /* @__PURE__ */ jsx(ClearContexts, { children })
|
|
8088
|
+
}
|
|
8089
|
+
),
|
|
8090
|
+
showSpinner && /* @__PURE__ */ jsx(
|
|
8091
|
+
"div",
|
|
8092
|
+
{
|
|
8093
|
+
"data-status": status,
|
|
8094
|
+
"data-variant": variant,
|
|
8095
|
+
"data-disabled": boolDataAttr(disabled || loading),
|
|
8096
|
+
"data-readonly": boolDataAttr(readOnly),
|
|
8097
|
+
...endContainerProps,
|
|
8098
|
+
className: cx(
|
|
8099
|
+
prefix("checkbox-group__end-container"),
|
|
8100
|
+
endContainerProps?.className
|
|
8101
|
+
),
|
|
8102
|
+
children: /* @__PURE__ */ jsx(
|
|
8103
|
+
Spinner,
|
|
7644
8104
|
{
|
|
7645
|
-
|
|
7646
|
-
"data-variant": variant,
|
|
8105
|
+
color: controlStatusToAccent(status, "neutral"),
|
|
7647
8106
|
"data-disabled": boolDataAttr(disabled || loading),
|
|
7648
|
-
|
|
7649
|
-
...endContainerProps,
|
|
8107
|
+
...spinnerProps,
|
|
7650
8108
|
className: cx(
|
|
7651
|
-
prefix("checkbox-
|
|
7652
|
-
|
|
7653
|
-
),
|
|
7654
|
-
children: /* @__PURE__ */ jsx(
|
|
7655
|
-
Spinner,
|
|
7656
|
-
{
|
|
7657
|
-
color: controlStatusToAccent(status, "neutral"),
|
|
7658
|
-
"data-disabled": boolDataAttr(disabled || loading),
|
|
7659
|
-
...spinnerProps,
|
|
7660
|
-
className: cx(
|
|
7661
|
-
prefix("checkbox-group__spinner"),
|
|
7662
|
-
spinnerProps?.className
|
|
7663
|
-
)
|
|
7664
|
-
}
|
|
8109
|
+
prefix("checkbox-group__spinner"),
|
|
8110
|
+
spinnerProps?.className
|
|
7665
8111
|
)
|
|
7666
8112
|
}
|
|
7667
|
-
)
|
|
7668
|
-
|
|
7669
|
-
|
|
7670
|
-
}
|
|
7671
|
-
|
|
8113
|
+
)
|
|
8114
|
+
}
|
|
8115
|
+
),
|
|
8116
|
+
loadingDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: loadingDescriptionId, children: loadingDescription })
|
|
8117
|
+
]
|
|
7672
8118
|
}
|
|
7673
|
-
)
|
|
8119
|
+
) })
|
|
7674
8120
|
}
|
|
7675
8121
|
) });
|
|
7676
8122
|
});
|
|
@@ -7713,37 +8159,37 @@ const Container = forwardRef(
|
|
|
7713
8159
|
);
|
|
7714
8160
|
}
|
|
7715
8161
|
);
|
|
7716
|
-
const REF_DATE = /* @__PURE__ */ new Date(0);
|
|
7717
8162
|
function parseDateStrict(dateString, dateFormat, options) {
|
|
7718
|
-
const date = parse(
|
|
8163
|
+
const date = parse(
|
|
8164
|
+
dateString,
|
|
8165
|
+
dateFormat,
|
|
8166
|
+
options?.referenceDate ?? /* @__PURE__ */ new Date(),
|
|
8167
|
+
options
|
|
8168
|
+
);
|
|
7719
8169
|
if (isNaN(+date)) {
|
|
7720
8170
|
return null;
|
|
7721
8171
|
}
|
|
7722
8172
|
return format(date, dateFormat, options) === dateString ? date : null;
|
|
7723
8173
|
}
|
|
7724
|
-
const
|
|
7725
|
-
const DEFAULT_FULL_DATE_FORMAT = "EEEE, d MMMM yyyy";
|
|
8174
|
+
const DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
|
|
7726
8175
|
function useDateTransformer({
|
|
7727
8176
|
locale: dateFnsLocale,
|
|
7728
|
-
|
|
7729
|
-
fullFormat
|
|
8177
|
+
format: format$1
|
|
7730
8178
|
} = {}) {
|
|
7731
8179
|
const [locale7] = useLocale();
|
|
7732
|
-
dateFnsLocale ??= locale7.
|
|
7733
|
-
|
|
7734
|
-
fullFormat ??= locale7.DateInput.fullFormat ?? dateFnsLocale.formatLong?.date({ width: "full" }) ?? DEFAULT_FULL_DATE_FORMAT;
|
|
8180
|
+
dateFnsLocale ??= locale7.dayPickerLocale;
|
|
8181
|
+
format$1 ??= locale7.DateInput.format ?? dateFnsLocale.formatLong?.date({ width: "short" }) ?? DEFAULT_DATE_FORMAT;
|
|
7735
8182
|
return useMemo(
|
|
7736
8183
|
() => ({
|
|
7737
|
-
parse: (formattedDate,
|
|
7738
|
-
|
|
7739
|
-
|
|
7740
|
-
|
|
7741
|
-
),
|
|
7742
|
-
|
|
7743
|
-
locale: dateFnsLocale
|
|
8184
|
+
parse: (formattedDate, options) => parseDateStrict(formattedDate, options?.format ?? format$1, {
|
|
8185
|
+
locale: options?.locale ?? dateFnsLocale,
|
|
8186
|
+
referenceDate: options?.referenceDate
|
|
8187
|
+
}),
|
|
8188
|
+
format: (date, options) => date != null ? format(date, options?.format ?? format$1, {
|
|
8189
|
+
locale: options?.locale ?? dateFnsLocale
|
|
7744
8190
|
}) : ""
|
|
7745
8191
|
}),
|
|
7746
|
-
[dateFnsLocale,
|
|
8192
|
+
[dateFnsLocale, format$1]
|
|
7747
8193
|
);
|
|
7748
8194
|
}
|
|
7749
8195
|
function DatePicker({
|
|
@@ -7794,10 +8240,10 @@ const DateInput = forwardRef(
|
|
|
7794
8240
|
maxMonth,
|
|
7795
8241
|
minYear,
|
|
7796
8242
|
maxYear,
|
|
7797
|
-
|
|
7798
|
-
|
|
7799
|
-
fullFormat,
|
|
8243
|
+
format: format2,
|
|
8244
|
+
announcedFormat,
|
|
7800
8245
|
formatDescription,
|
|
8246
|
+
selectedDateDescription,
|
|
7801
8247
|
calendarButtonLabel,
|
|
7802
8248
|
onPopoverOpenChange,
|
|
7803
8249
|
onBlurToOutside,
|
|
@@ -7812,18 +8258,19 @@ const DateInput = forwardRef(
|
|
|
7812
8258
|
}, forwardedRef) {
|
|
7813
8259
|
const prefix = usePrefix();
|
|
7814
8260
|
const [locale7] = useLocale();
|
|
7815
|
-
dateFnsLocale ??= locale7.dateFnsLocale;
|
|
7816
8261
|
placeholder ??= locale7.DateInput.placeholder;
|
|
8262
|
+
announcedFormat ??= locale7.dayPickerLocale?.formatLong.date({
|
|
8263
|
+
width: "long"
|
|
8264
|
+
});
|
|
7817
8265
|
formatDescription ??= locale7.DateInput.formatDescription;
|
|
8266
|
+
selectedDateDescription ??= locale7.DateInput.selectedDateDescription;
|
|
7818
8267
|
calendarButtonLabel ??= locale7.DateInput.calendarButtonLabel;
|
|
7819
8268
|
const { printHidden } = usePrintClassNames();
|
|
7820
8269
|
const { format: formatDate, parse: parseDate } = useDateTransformer({
|
|
7821
|
-
|
|
7822
|
-
shortFormat,
|
|
7823
|
-
fullFormat
|
|
8270
|
+
format: format2
|
|
7824
8271
|
});
|
|
7825
8272
|
const generatedId = useId();
|
|
7826
|
-
const formatDescriptionId = formatDescription && prefix(`
|
|
8273
|
+
const formatDescriptionId = formatDescription && prefix(`date-input-format-${generatedId}`);
|
|
7827
8274
|
const [formattedValue, setFormattedValue] = useControllableState(
|
|
7828
8275
|
defaultValue === null || isDate(defaultValue) ? formatDate(defaultValue) : defaultValue?.toString() ?? "",
|
|
7829
8276
|
controlledValue === null || isDate(controlledValue) ? formatDate(controlledValue) : controlledValue?.toString()
|
|
@@ -7966,10 +8413,11 @@ const DateInput = forwardRef(
|
|
|
7966
8413
|
setFormattedValue
|
|
7967
8414
|
]
|
|
7968
8415
|
);
|
|
7969
|
-
const
|
|
7970
|
-
() => formatDate(dateValue, {
|
|
7971
|
-
[dateValue, formatDate]
|
|
8416
|
+
const descriptionFormattedValue = useMemo(
|
|
8417
|
+
() => formatDate(dateValue, { format: announcedFormat }),
|
|
8418
|
+
[dateValue, announcedFormat, formatDate]
|
|
7972
8419
|
);
|
|
8420
|
+
const selectedDateDescriptionId = selectedDateDescription && descriptionFormattedValue && prefix(`date-input-selected-${generatedId}`);
|
|
7973
8421
|
const combinedClearButtonRef = useCombinedRef(
|
|
7974
8422
|
clearButtonProps?.ref,
|
|
7975
8423
|
clearButtonRef
|
|
@@ -7996,25 +8444,26 @@ const DateInput = forwardRef(
|
|
|
7996
8444
|
showClearButton,
|
|
7997
8445
|
endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
7998
8446
|
endAdornment,
|
|
7999
|
-
/* @__PURE__ */ jsx(ControlAddon, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */
|
|
8447
|
+
/* @__PURE__ */ jsx(Tooltip, { content: calendarButtonLabel, children: /* @__PURE__ */ jsx(ControlAddon, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsxs(
|
|
8000
8448
|
"button",
|
|
8001
8449
|
{
|
|
8002
8450
|
className: printHidden,
|
|
8003
|
-
"aria-label": calendarButtonLabel?.(
|
|
8004
|
-
fullFormattedValue,
|
|
8005
|
-
!disabled && !loading && !readOnly
|
|
8006
|
-
),
|
|
8007
8451
|
onClick: handleAddonButtonClick,
|
|
8008
8452
|
onBlur: handleControlBlur,
|
|
8009
8453
|
"data-state": void 0,
|
|
8010
8454
|
ref: addonButtonRef,
|
|
8011
|
-
|
|
8455
|
+
"aria-describedby": selectedDateDescriptionId,
|
|
8456
|
+
children: [
|
|
8457
|
+
/* @__PURE__ */ jsx(Icon, { icon: faCalendar }),
|
|
8458
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { children: calendarButtonLabel })
|
|
8459
|
+
]
|
|
8012
8460
|
}
|
|
8013
|
-
) }) })
|
|
8461
|
+
) }) }) })
|
|
8014
8462
|
] }),
|
|
8015
8463
|
"aria-describedby": combineAriaIds(
|
|
8464
|
+
ariaDescribedBy,
|
|
8016
8465
|
formatDescriptionId,
|
|
8017
|
-
|
|
8466
|
+
selectedDateDescriptionId
|
|
8018
8467
|
),
|
|
8019
8468
|
containerProps: {
|
|
8020
8469
|
// Propagate open state to container for styling purposes
|
|
@@ -8083,7 +8532,6 @@ const DateInput = forwardRef(
|
|
|
8083
8532
|
maxMonth,
|
|
8084
8533
|
minYear,
|
|
8085
8534
|
maxYear,
|
|
8086
|
-
locale: dateFnsLocale,
|
|
8087
8535
|
monthSelectProps: {
|
|
8088
8536
|
...datePickerProps?.monthSelectProps,
|
|
8089
8537
|
popoverProps: {
|
|
@@ -8097,13 +8545,18 @@ const DateInput = forwardRef(
|
|
|
8097
8545
|
...datePickerProps?.yearSelectProps?.popoverProps,
|
|
8098
8546
|
ref: yearSelectMenuRef
|
|
8099
8547
|
}
|
|
8548
|
+
},
|
|
8549
|
+
headerLabelProps: {
|
|
8550
|
+
role: popoverState.modal ? "status" : void 0,
|
|
8551
|
+
...datePickerProps?.headerLabelProps
|
|
8100
8552
|
}
|
|
8101
8553
|
}
|
|
8102
8554
|
)
|
|
8103
8555
|
}
|
|
8104
8556
|
)
|
|
8105
8557
|
] }),
|
|
8106
|
-
|
|
8558
|
+
formatDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: formatDescriptionId, children: formatDescription }),
|
|
8559
|
+
selectedDateDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: selectedDateDescriptionId, children: selectedDateDescription(descriptionFormattedValue) })
|
|
8107
8560
|
] });
|
|
8108
8561
|
}
|
|
8109
8562
|
);
|
|
@@ -8221,12 +8674,13 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8221
8674
|
endAdornment,
|
|
8222
8675
|
showClearButtons = "auto",
|
|
8223
8676
|
clearButtonsLabel,
|
|
8224
|
-
|
|
8225
|
-
|
|
8226
|
-
fullFormat,
|
|
8677
|
+
format: format2,
|
|
8678
|
+
announcedFormat,
|
|
8227
8679
|
formatDescription,
|
|
8228
8680
|
startInputLabel,
|
|
8229
8681
|
endInputLabel,
|
|
8682
|
+
selectedDateDescription,
|
|
8683
|
+
selectedDateRangeDescription,
|
|
8230
8684
|
calendarButtonLabel,
|
|
8231
8685
|
placeholder,
|
|
8232
8686
|
startPlaceholder,
|
|
@@ -8251,16 +8705,18 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8251
8705
|
const [locale7] = useLocale();
|
|
8252
8706
|
loadingDescription ??= locale7.Input.loadingDescription;
|
|
8253
8707
|
clearButtonsLabel ??= locale7.Input.clearButtonLabel;
|
|
8254
|
-
dateFnsLocale ??= locale7.dateFnsLocale;
|
|
8255
8708
|
placeholder ??= locale7.DateInput.placeholder;
|
|
8709
|
+
announcedFormat ??= locale7.dayPickerLocale?.formatLong.date({
|
|
8710
|
+
width: "long"
|
|
8711
|
+
});
|
|
8256
8712
|
formatDescription ??= locale7.DateInput.formatDescription;
|
|
8257
8713
|
startInputLabel ??= locale7.DateRangeInput.startInputLabel;
|
|
8258
8714
|
endInputLabel ??= locale7.DateRangeInput.endInputLabel;
|
|
8259
|
-
|
|
8715
|
+
selectedDateDescription ??= locale7.DateInput.selectedDateDescription;
|
|
8716
|
+
selectedDateRangeDescription ??= locale7.DateRangeInput.selectedDateRangeDescription;
|
|
8717
|
+
calendarButtonLabel ??= locale7.DateRangeInput.calendarButtonLabel ?? locale7.DateInput.calendarButtonLabel;
|
|
8260
8718
|
const { format: formatDate, parse: parseDate } = useDateTransformer({
|
|
8261
|
-
|
|
8262
|
-
shortFormat,
|
|
8263
|
-
fullFormat
|
|
8719
|
+
format: format2
|
|
8264
8720
|
});
|
|
8265
8721
|
const dataTableColumnLabelId = useDataTableColumnLabelId();
|
|
8266
8722
|
const labelId = useFieldLabelId();
|
|
@@ -8278,7 +8734,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8278
8734
|
const startInputLabelId = startInputLabel && prefix(`control-start-label-${generatedId}`);
|
|
8279
8735
|
const endInputLabelId = endInputLabel && prefix(`control-end-label-${generatedId}`);
|
|
8280
8736
|
const loadingDescriptionId = loading && loadingDescription && prefix(`control-loading-${generatedId}`);
|
|
8281
|
-
const formatDescriptionId = formatDescription && prefix(`control-format-${generatedId}`);
|
|
8737
|
+
const formatDescriptionId = formatDescription && typeof formatDescription !== "boolean" ? prefix(`control-format-${generatedId}`) : void 0;
|
|
8282
8738
|
const isInTableCell = useIsInTableCell();
|
|
8283
8739
|
variant ??= isInTableCell ? "cell" : "default";
|
|
8284
8740
|
const [formattedValue, setFormattedValue] = useControllableState(
|
|
@@ -8585,9 +9041,17 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8585
9041
|
"control",
|
|
8586
9042
|
{ align }
|
|
8587
9043
|
);
|
|
8588
|
-
const
|
|
8589
|
-
|
|
8590
|
-
|
|
9044
|
+
const descriptionFormattedStart = useMemo(
|
|
9045
|
+
() => formatDate(dateValue.start, { format: announcedFormat }),
|
|
9046
|
+
[dateValue.start, announcedFormat, formatDate]
|
|
9047
|
+
);
|
|
9048
|
+
const descriptionFormattedEnd = useMemo(
|
|
9049
|
+
() => formatDate(dateValue.end, { format: announcedFormat }),
|
|
9050
|
+
[dateValue.end, announcedFormat, formatDate]
|
|
9051
|
+
);
|
|
9052
|
+
const selectedStartDateDescriptionId = selectedDateDescription && descriptionFormattedStart && prefix(`date-range-input-start-selected-${generatedId}`);
|
|
9053
|
+
const selectedEndDateDescriptionId = selectedDateDescription && descriptionFormattedEnd && prefix(`date-range-input-end-selected-${generatedId}`);
|
|
9054
|
+
const selectedDateRangeDescriptionId = selectedDateRangeDescription && (descriptionFormattedStart || descriptionFormattedEnd) && prefix(`date-range-input-selected-${generatedId}`);
|
|
8591
9055
|
const combinedStartContainerRef = useCombinedRef(
|
|
8592
9056
|
startContainerRef,
|
|
8593
9057
|
startContainerProps?.ref
|
|
@@ -8633,11 +9097,17 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8633
9097
|
...otherProps,
|
|
8634
9098
|
ref: forwardedRef,
|
|
8635
9099
|
children: [
|
|
8636
|
-
startInputLabelId && /* @__PURE__ */ jsx(
|
|
8637
|
-
endInputLabelId && /* @__PURE__ */ jsx(
|
|
8638
|
-
loadingDescriptionId && /* @__PURE__ */ jsx(
|
|
8639
|
-
formatDescriptionId && /* @__PURE__ */ jsx(
|
|
8640
|
-
|
|
9100
|
+
startInputLabelId && /* @__PURE__ */ jsx("span", { hidden: true, id: startInputLabelId, children: startInputLabel }),
|
|
9101
|
+
endInputLabelId && /* @__PURE__ */ jsx("span", { hidden: true, id: endInputLabelId, children: endInputLabel }),
|
|
9102
|
+
loadingDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: loadingDescriptionId, children: loadingDescription }),
|
|
9103
|
+
formatDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: formatDescriptionId, children: formatDescription }),
|
|
9104
|
+
selectedStartDateDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: selectedStartDateDescriptionId, children: selectedDateDescription(descriptionFormattedStart) }),
|
|
9105
|
+
selectedEndDateDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: selectedEndDateDescriptionId, children: selectedDateDescription(descriptionFormattedEnd) }),
|
|
9106
|
+
selectedDateRangeDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: selectedDateRangeDescriptionId, children: selectedDateRangeDescription({
|
|
9107
|
+
start: descriptionFormattedStart,
|
|
9108
|
+
end: descriptionFormattedEnd
|
|
9109
|
+
}) }),
|
|
9110
|
+
code != null && typeof code !== "boolean" && /* @__PURE__ */ jsx(
|
|
8641
9111
|
ControlCode,
|
|
8642
9112
|
{
|
|
8643
9113
|
...codeProps,
|
|
@@ -8739,8 +9209,9 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8739
9209
|
loadingDescriptionId,
|
|
8740
9210
|
errorMessageIds,
|
|
8741
9211
|
startInputProps?.["aria-describedby"],
|
|
9212
|
+
descriptionIds,
|
|
8742
9213
|
formatDescriptionId,
|
|
8743
|
-
|
|
9214
|
+
selectedStartDateDescriptionId
|
|
8744
9215
|
),
|
|
8745
9216
|
ref: combinedStartInputRef
|
|
8746
9217
|
}
|
|
@@ -8853,8 +9324,9 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8853
9324
|
loadingDescriptionId,
|
|
8854
9325
|
errorMessageIds,
|
|
8855
9326
|
endInputProps?.["aria-describedby"],
|
|
9327
|
+
descriptionIds,
|
|
8856
9328
|
formatDescriptionId,
|
|
8857
|
-
|
|
9329
|
+
selectedEndDateDescriptionId
|
|
8858
9330
|
),
|
|
8859
9331
|
ref: combinedEndInputRef
|
|
8860
9332
|
}
|
|
@@ -8899,13 +9371,9 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8899
9371
|
}
|
|
8900
9372
|
),
|
|
8901
9373
|
endAdornment,
|
|
8902
|
-
/* @__PURE__ */ jsx(ControlAddon, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */
|
|
9374
|
+
/* @__PURE__ */ jsx(Tooltip, { content: calendarButtonLabel, children: /* @__PURE__ */ jsx(ControlAddon, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsxs(
|
|
8903
9375
|
"button",
|
|
8904
9376
|
{
|
|
8905
|
-
"aria-label": calendarButtonLabel?.(
|
|
8906
|
-
fullFormattedValue,
|
|
8907
|
-
!disabled && !loading && !readOnly
|
|
8908
|
-
),
|
|
8909
9377
|
onClick: handleAddonButtonClick,
|
|
8910
9378
|
onBlur: handleControlBlur,
|
|
8911
9379
|
"data-state": void 0,
|
|
@@ -8914,9 +9382,13 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8914
9382
|
printHidden
|
|
8915
9383
|
),
|
|
8916
9384
|
ref: addonButtonRef,
|
|
8917
|
-
|
|
9385
|
+
"aria-describedby": selectedDateRangeDescriptionId,
|
|
9386
|
+
children: [
|
|
9387
|
+
/* @__PURE__ */ jsx(Icon, { icon: faCalendar }),
|
|
9388
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { children: calendarButtonLabel })
|
|
9389
|
+
]
|
|
8918
9390
|
}
|
|
8919
|
-
) }) })
|
|
9391
|
+
) }) }) })
|
|
8920
9392
|
]
|
|
8921
9393
|
}
|
|
8922
9394
|
),
|
|
@@ -8975,7 +9447,6 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8975
9447
|
maxMonth,
|
|
8976
9448
|
minYear,
|
|
8977
9449
|
maxYear,
|
|
8978
|
-
locale: dateFnsLocale,
|
|
8979
9450
|
monthSelectProps: {
|
|
8980
9451
|
...dateRangePickerProps?.monthSelectProps,
|
|
8981
9452
|
popoverProps: {
|
|
@@ -8989,6 +9460,10 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
|
|
|
8989
9460
|
...dateRangePickerProps?.yearSelectProps?.popoverProps,
|
|
8990
9461
|
ref: yearSelectMenuRef
|
|
8991
9462
|
}
|
|
9463
|
+
},
|
|
9464
|
+
headerLabelProps: {
|
|
9465
|
+
role: popoverState.modal ? "status" : void 0,
|
|
9466
|
+
...dateRangePickerProps?.headerLabelProps
|
|
8992
9467
|
}
|
|
8993
9468
|
}
|
|
8994
9469
|
)
|
|
@@ -9014,10 +9489,12 @@ const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
|
|
|
9014
9489
|
loadingContent,
|
|
9015
9490
|
showSpinner,
|
|
9016
9491
|
iconPlacement,
|
|
9492
|
+
keybinds,
|
|
9017
9493
|
actionProps,
|
|
9018
9494
|
contentProps,
|
|
9019
9495
|
iconProps,
|
|
9020
9496
|
spinnerProps,
|
|
9497
|
+
keybindsProps,
|
|
9021
9498
|
indicatorProps,
|
|
9022
9499
|
className,
|
|
9023
9500
|
...otherProps
|
|
@@ -9056,6 +9533,7 @@ const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
|
|
|
9056
9533
|
loadingContent,
|
|
9057
9534
|
showSpinner,
|
|
9058
9535
|
iconPlacement,
|
|
9536
|
+
keybinds,
|
|
9059
9537
|
actionProps,
|
|
9060
9538
|
contentProps,
|
|
9061
9539
|
"data-hide-control": boolDataAttr(!showCheckbox),
|
|
@@ -9072,6 +9550,7 @@ const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
|
|
|
9072
9550
|
) }) }) : null,
|
|
9073
9551
|
iconProps,
|
|
9074
9552
|
spinnerProps,
|
|
9553
|
+
keybindsProps,
|
|
9075
9554
|
asChild: true,
|
|
9076
9555
|
children: /* @__PURE__ */ jsx(
|
|
9077
9556
|
DropdownMenu$1.CheckboxItem,
|
|
@@ -9179,6 +9658,7 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
|
|
|
9179
9658
|
showSpinner,
|
|
9180
9659
|
icon,
|
|
9181
9660
|
iconPlacement,
|
|
9661
|
+
keybinds,
|
|
9182
9662
|
href,
|
|
9183
9663
|
target,
|
|
9184
9664
|
rel,
|
|
@@ -9186,6 +9666,7 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
|
|
|
9186
9666
|
contentProps,
|
|
9187
9667
|
iconProps,
|
|
9188
9668
|
spinnerProps,
|
|
9669
|
+
keybindsProps,
|
|
9189
9670
|
className,
|
|
9190
9671
|
...otherProps
|
|
9191
9672
|
}, forwardedRef) {
|
|
@@ -9215,6 +9696,7 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
|
|
|
9215
9696
|
showSpinner,
|
|
9216
9697
|
icon,
|
|
9217
9698
|
iconPlacement,
|
|
9699
|
+
keybinds,
|
|
9218
9700
|
href,
|
|
9219
9701
|
target,
|
|
9220
9702
|
rel,
|
|
@@ -9222,6 +9704,7 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
|
|
|
9222
9704
|
contentProps,
|
|
9223
9705
|
iconProps,
|
|
9224
9706
|
spinnerProps,
|
|
9707
|
+
keybindsProps,
|
|
9225
9708
|
asChild: true,
|
|
9226
9709
|
children: /* @__PURE__ */ jsx(
|
|
9227
9710
|
DropdownMenu$1.Item,
|
|
@@ -9265,10 +9748,12 @@ const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({
|
|
|
9265
9748
|
loadingContent,
|
|
9266
9749
|
showSpinner,
|
|
9267
9750
|
iconPlacement,
|
|
9751
|
+
keybinds,
|
|
9268
9752
|
actionProps,
|
|
9269
9753
|
contentProps,
|
|
9270
9754
|
iconProps,
|
|
9271
9755
|
spinnerProps,
|
|
9756
|
+
keybindsProps,
|
|
9272
9757
|
indicatorProps,
|
|
9273
9758
|
className,
|
|
9274
9759
|
...otherProps
|
|
@@ -9294,6 +9779,7 @@ const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({
|
|
|
9294
9779
|
loadingContent,
|
|
9295
9780
|
showSpinner,
|
|
9296
9781
|
iconPlacement,
|
|
9782
|
+
keybinds,
|
|
9297
9783
|
actionProps,
|
|
9298
9784
|
contentProps,
|
|
9299
9785
|
"data-hide-control": boolDataAttr(!showRadio),
|
|
@@ -9309,6 +9795,7 @@ const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({
|
|
|
9309
9795
|
) }) : null,
|
|
9310
9796
|
iconProps,
|
|
9311
9797
|
spinnerProps,
|
|
9798
|
+
keybindsProps,
|
|
9312
9799
|
asChild: true,
|
|
9313
9800
|
children: /* @__PURE__ */ jsx(
|
|
9314
9801
|
DropdownMenu$1.RadioItem,
|
|
@@ -9405,14 +9892,15 @@ function useIsInFeedbackList() {
|
|
|
9405
9892
|
return useContext(FeedbackListContext);
|
|
9406
9893
|
}
|
|
9407
9894
|
const FeedbackList = forwardRef(
|
|
9408
|
-
function FeedbackList2({ className, ...otherProps }, forwardedRef) {
|
|
9895
|
+
function FeedbackList2({ className, children, ...otherProps }, forwardedRef) {
|
|
9409
9896
|
const prefix = usePrefix();
|
|
9410
|
-
return /* @__PURE__ */ jsx(FeedbackListContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
|
|
9897
|
+
return /* @__PURE__ */ jsx(FeedbackListContext.Provider, { value: true, children: (!Array.isArray(children) || children.length > 0) && /* @__PURE__ */ jsx(
|
|
9411
9898
|
"ul",
|
|
9412
9899
|
{
|
|
9413
9900
|
className: cx(prefix("feedback-list"), className),
|
|
9414
9901
|
...otherProps,
|
|
9415
|
-
ref: forwardedRef
|
|
9902
|
+
ref: forwardedRef,
|
|
9903
|
+
children
|
|
9416
9904
|
}
|
|
9417
9905
|
) });
|
|
9418
9906
|
}
|
|
@@ -9428,7 +9916,7 @@ const FEEDBACK_ICON = {
|
|
|
9428
9916
|
};
|
|
9429
9917
|
const FeedbackPopover = forwardRef(function FeedbackPopover2({
|
|
9430
9918
|
defaultOpen,
|
|
9431
|
-
open,
|
|
9919
|
+
open: controlledOpen,
|
|
9432
9920
|
onOpenChange,
|
|
9433
9921
|
modal,
|
|
9434
9922
|
icon,
|
|
@@ -9445,6 +9933,7 @@ const FeedbackPopover = forwardRef(function FeedbackPopover2({
|
|
|
9445
9933
|
const [locale7] = useLocale();
|
|
9446
9934
|
label ??= locale7.FeedbackPopover.label;
|
|
9447
9935
|
const variant = useIsInTableCell() ? "cell" : "default";
|
|
9936
|
+
const [open, setOpen] = useControllableState(defaultOpen, controlledOpen);
|
|
9448
9937
|
const [feedbacksCount, setFeedbacksCount] = useState({
|
|
9449
9938
|
success: 0,
|
|
9450
9939
|
error: 0,
|
|
@@ -9480,6 +9969,7 @@ const FeedbackPopover = forwardRef(function FeedbackPopover2({
|
|
|
9480
9969
|
);
|
|
9481
9970
|
const inField = controlFocused !== void 0;
|
|
9482
9971
|
const accent = dominantFeedbackType === "error" ? "danger" : dominantFeedbackType;
|
|
9972
|
+
const childrenIsElement = isValidElement(children);
|
|
9483
9973
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
9484
9974
|
/* @__PURE__ */ jsx(
|
|
9485
9975
|
FeedbackPopoverContext.Provider,
|
|
@@ -9488,16 +9978,15 @@ const FeedbackPopover = forwardRef(function FeedbackPopover2({
|
|
|
9488
9978
|
onAddFeedback: handleAddFeedback,
|
|
9489
9979
|
onRemoveFeedback: handleRemoveFeedback
|
|
9490
9980
|
},
|
|
9491
|
-
children: /* @__PURE__ */ jsx(
|
|
9981
|
+
children: childrenIsElement ? cloneElement(children, { hidden: true }) : /* @__PURE__ */ jsx("div", { hidden: true, children })
|
|
9492
9982
|
}
|
|
9493
9983
|
),
|
|
9494
9984
|
/* @__PURE__ */ jsxs(
|
|
9495
9985
|
Popover,
|
|
9496
9986
|
{
|
|
9497
|
-
defaultOpen,
|
|
9498
9987
|
open: hasFeedback && (controlFocused || open || false),
|
|
9499
|
-
onOpenChange,
|
|
9500
|
-
modal:
|
|
9988
|
+
onOpenChange: combineEventHandlers(onOpenChange, setOpen),
|
|
9989
|
+
modal: controlFocused ? false : modal,
|
|
9501
9990
|
children: [
|
|
9502
9991
|
hasFeedback && /* @__PURE__ */ jsx(
|
|
9503
9992
|
"div",
|
|
@@ -9545,7 +10034,7 @@ const FeedbackPopover = forwardRef(function FeedbackPopover2({
|
|
|
9545
10034
|
...otherProps,
|
|
9546
10035
|
"data-accent": accent,
|
|
9547
10036
|
ref: forwardedRef,
|
|
9548
|
-
children
|
|
10037
|
+
children: childrenIsElement ? cloneElement(children, { id: void 0 }) : children
|
|
9549
10038
|
}
|
|
9550
10039
|
) })
|
|
9551
10040
|
]
|
|
@@ -9564,14 +10053,14 @@ const Feedback = forwardRef(
|
|
|
9564
10053
|
...otherProps
|
|
9565
10054
|
}, forwardedRef) {
|
|
9566
10055
|
const prefix = usePrefix();
|
|
10056
|
+
const [locale7] = useLocale();
|
|
10057
|
+
visuallyHiddenPrefix ??= locale7.Feedback.visuallyHiddenPrefix;
|
|
9567
10058
|
const { onAddFeedback, onRemoveFeedback } = useFeedbackPopoverContext() ?? {};
|
|
9568
10059
|
useLayoutEffect(() => {
|
|
9569
10060
|
onAddFeedback?.(type);
|
|
9570
10061
|
return () => onRemoveFeedback?.(type);
|
|
9571
10062
|
}, [onAddFeedback, onRemoveFeedback, type]);
|
|
9572
10063
|
const isInFeedbackList = useIsInFeedbackList();
|
|
9573
|
-
const [locale7] = useLocale();
|
|
9574
|
-
visuallyHiddenPrefix ??= locale7.Feedback.visuallyHiddenPrefix;
|
|
9575
10064
|
const visuallyHiddenPrefixText = typeof visuallyHiddenPrefix === "function" ? visuallyHiddenPrefix(type) : visuallyHiddenPrefix;
|
|
9576
10065
|
const feedbackId = useSetFieldFeedback(id, type === "error");
|
|
9577
10066
|
const As = asChild ? Slot : isInFeedbackList ? "li" : "div";
|
|
@@ -9581,8 +10070,8 @@ const Feedback = forwardRef(
|
|
|
9581
10070
|
id: feedbackId,
|
|
9582
10071
|
className: cx(prefix("feedback"), className),
|
|
9583
10072
|
"data-accent": type === "error" ? "danger" : type,
|
|
9584
|
-
...otherProps,
|
|
9585
10073
|
"data-type": type,
|
|
10074
|
+
...otherProps,
|
|
9586
10075
|
ref: forwardedRef,
|
|
9587
10076
|
children: [
|
|
9588
10077
|
visuallyHiddenPrefixText && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
|
|
@@ -9669,7 +10158,7 @@ const FieldGroupHeader = forwardRef(function FieldGroupHeader2({
|
|
|
9669
10158
|
...otherProps,
|
|
9670
10159
|
ref: forwardedRef,
|
|
9671
10160
|
children: [
|
|
9672
|
-
code && /* @__PURE__ */ jsxs(
|
|
10161
|
+
code != null && typeof code !== "boolean" && /* @__PURE__ */ jsxs(
|
|
9673
10162
|
"span",
|
|
9674
10163
|
{
|
|
9675
10164
|
...codeProps,
|
|
@@ -9680,7 +10169,8 @@ const FieldGroupHeader = forwardRef(function FieldGroupHeader2({
|
|
|
9680
10169
|
visuallyHiddenCodePrefix,
|
|
9681
10170
|
" "
|
|
9682
10171
|
] }),
|
|
9683
|
-
code
|
|
10172
|
+
code,
|
|
10173
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { children: ", " })
|
|
9684
10174
|
]
|
|
9685
10175
|
}
|
|
9686
10176
|
),
|
|
@@ -9822,20 +10312,6 @@ const HelperText = forwardRef(
|
|
|
9822
10312
|
);
|
|
9823
10313
|
}
|
|
9824
10314
|
);
|
|
9825
|
-
const Keyboard = forwardRef(
|
|
9826
|
-
function Keyboard2({ asChild, className, ...otherProps }, forwardedRef) {
|
|
9827
|
-
const prefix = usePrefix();
|
|
9828
|
-
const As = asChild ? Slot : "kbd";
|
|
9829
|
-
return /* @__PURE__ */ jsx(
|
|
9830
|
-
As,
|
|
9831
|
-
{
|
|
9832
|
-
className: cx(prefix("keyboard"), className),
|
|
9833
|
-
ref: forwardedRef,
|
|
9834
|
-
...otherProps
|
|
9835
|
-
}
|
|
9836
|
-
);
|
|
9837
|
-
}
|
|
9838
|
-
);
|
|
9839
10315
|
const Link = forwardRef(function Link2({
|
|
9840
10316
|
as = "a",
|
|
9841
10317
|
asChild,
|
|
@@ -10314,7 +10790,7 @@ const Radio = forwardRef(function Radio2({
|
|
|
10314
10790
|
const controlContext = useControlContext();
|
|
10315
10791
|
const generatedId = useId();
|
|
10316
10792
|
const controlId = id ?? prefix(`control-${generatedId}`);
|
|
10317
|
-
const codeId = code && (codeProps?.id ?? prefix(`control-code-${generatedId}`));
|
|
10793
|
+
const codeId = code != null && typeof code !== "boolean" && (codeProps?.id ?? prefix(`control-code-${generatedId}`));
|
|
10318
10794
|
const labelId = children && (labelProps?.id ?? prefix(`radio-label-${generatedId}`));
|
|
10319
10795
|
const loadingDescriptionId = loading && loadingDescription && prefix(`control-loading-${generatedId}`);
|
|
10320
10796
|
status = controlContext?.status ?? status;
|
|
@@ -10399,7 +10875,7 @@ const Radio = forwardRef(function Radio2({
|
|
|
10399
10875
|
className: cx(prefix("radio__spinner"), spinnerProps?.className)
|
|
10400
10876
|
}
|
|
10401
10877
|
),
|
|
10402
|
-
loadingDescriptionId && /* @__PURE__ */ jsx(
|
|
10878
|
+
loadingDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: loadingDescriptionId, children: loadingDescription })
|
|
10403
10879
|
]
|
|
10404
10880
|
}
|
|
10405
10881
|
);
|
|
@@ -10533,7 +11009,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
|
|
|
10533
11009
|
...otherProps,
|
|
10534
11010
|
ref: combinedRadioGroupRef,
|
|
10535
11011
|
children: [
|
|
10536
|
-
code && /* @__PURE__ */ jsx(
|
|
11012
|
+
code != null && typeof code !== "boolean" && /* @__PURE__ */ jsx(
|
|
10537
11013
|
ControlCode,
|
|
10538
11014
|
{
|
|
10539
11015
|
status,
|
|
@@ -10613,7 +11089,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
|
|
|
10613
11089
|
]
|
|
10614
11090
|
}
|
|
10615
11091
|
),
|
|
10616
|
-
loadingDescriptionId && /* @__PURE__ */ jsx(
|
|
11092
|
+
loadingDescriptionId && /* @__PURE__ */ jsx("span", { hidden: true, id: loadingDescriptionId, children: loadingDescription })
|
|
10617
11093
|
]
|
|
10618
11094
|
}
|
|
10619
11095
|
)
|
|
@@ -10867,7 +11343,7 @@ const Tab = forwardRef(function Tab2({ value, status, tabInnerProps, className,
|
|
|
10867
11343
|
const tabRef = useRef(null);
|
|
10868
11344
|
useEffect(() => {
|
|
10869
11345
|
if (isActive) {
|
|
10870
|
-
setTimeout(() => tabRef.current
|
|
11346
|
+
setTimeout(() => tabRef.current?.scrollIntoView({ block: "nearest" }));
|
|
10871
11347
|
}
|
|
10872
11348
|
}, [isActive]);
|
|
10873
11349
|
const combinedTabRef = useCombinedRef(tabRef, forwardedRef);
|
|
@@ -10882,6 +11358,7 @@ const Tab = forwardRef(function Tab2({ value, status, tabInnerProps, className,
|
|
|
10882
11358
|
),
|
|
10883
11359
|
"data-status": status,
|
|
10884
11360
|
"data-accent": controlStatusToAccent(status),
|
|
11361
|
+
"aria-invalid": status === "invalid" || void 0,
|
|
10885
11362
|
...otherProps,
|
|
10886
11363
|
ref: combinedTabRef,
|
|
10887
11364
|
children: [
|
|
@@ -10940,8 +11417,21 @@ const TabContent = forwardRef(function TabContent2({ asChild, value, className,
|
|
|
10940
11417
|
)
|
|
10941
11418
|
] });
|
|
10942
11419
|
});
|
|
10943
|
-
const TabList = forwardRef(function TabList2({
|
|
11420
|
+
const TabList = forwardRef(function TabList2({
|
|
11421
|
+
scrollLeftButtonLabel,
|
|
11422
|
+
scrollRightButtonLabel,
|
|
11423
|
+
rootProps,
|
|
11424
|
+
containerProps,
|
|
11425
|
+
scrollLeftButtonProps,
|
|
11426
|
+
scrollRightButtonProps,
|
|
11427
|
+
className,
|
|
11428
|
+
children,
|
|
11429
|
+
...otherProps
|
|
11430
|
+
}, forwardedRef) {
|
|
10944
11431
|
const prefix = usePrefix();
|
|
11432
|
+
const [locale7] = useLocale();
|
|
11433
|
+
scrollLeftButtonLabel ??= locale7.TabList.scrollLeftButtonLabel;
|
|
11434
|
+
scrollRightButtonLabel ??= locale7.TabList.scrollRightButtonLabel;
|
|
10945
11435
|
const { variant, showAllTabsWhilePrinting, store } = useTabsContext();
|
|
10946
11436
|
const { printHidden } = usePrintClassNames();
|
|
10947
11437
|
const [rootEl, setRootEl] = useState(null);
|
|
@@ -11026,7 +11516,18 @@ const TabList = forwardRef(function TabList2({ rootProps, containerProps, classN
|
|
|
11026
11516
|
),
|
|
11027
11517
|
ref: combinedRootRef,
|
|
11028
11518
|
children: [
|
|
11029
|
-
/* @__PURE__ */ jsx(
|
|
11519
|
+
/* @__PURE__ */ jsx(
|
|
11520
|
+
TabListScrollButton,
|
|
11521
|
+
{
|
|
11522
|
+
side: "left",
|
|
11523
|
+
label: scrollLeftButtonLabel,
|
|
11524
|
+
...scrollLeftButtonProps,
|
|
11525
|
+
onClick: combineEventHandlers(
|
|
11526
|
+
scrollLeftButtonProps?.onClick,
|
|
11527
|
+
() => scrollTabs("left")
|
|
11528
|
+
)
|
|
11529
|
+
}
|
|
11530
|
+
),
|
|
11030
11531
|
/* @__PURE__ */ jsx(
|
|
11031
11532
|
"div",
|
|
11032
11533
|
{
|
|
@@ -11052,16 +11553,34 @@ const TabList = forwardRef(function TabList2({ rootProps, containerProps, classN
|
|
|
11052
11553
|
)
|
|
11053
11554
|
}
|
|
11054
11555
|
),
|
|
11055
|
-
/* @__PURE__ */ jsx(
|
|
11556
|
+
/* @__PURE__ */ jsx(
|
|
11557
|
+
TabListScrollButton,
|
|
11558
|
+
{
|
|
11559
|
+
side: "right",
|
|
11560
|
+
label: scrollRightButtonLabel,
|
|
11561
|
+
...scrollRightButtonProps,
|
|
11562
|
+
onClick: combineEventHandlers(
|
|
11563
|
+
scrollRightButtonProps?.onClick,
|
|
11564
|
+
() => scrollTabs("right")
|
|
11565
|
+
)
|
|
11566
|
+
}
|
|
11567
|
+
)
|
|
11056
11568
|
]
|
|
11057
11569
|
}
|
|
11058
11570
|
);
|
|
11059
11571
|
});
|
|
11060
|
-
function TabListScrollButton({
|
|
11572
|
+
function TabListScrollButton({
|
|
11573
|
+
side,
|
|
11574
|
+
label,
|
|
11575
|
+
onClick,
|
|
11576
|
+
disabled,
|
|
11577
|
+
className,
|
|
11578
|
+
...otherProps
|
|
11579
|
+
}) {
|
|
11061
11580
|
const prefix = usePrefix();
|
|
11062
11581
|
const { store } = useTabsContext();
|
|
11063
11582
|
const showScrollButtons = useStore(store, (state) => state.showScrollButtons);
|
|
11064
|
-
const
|
|
11583
|
+
const shouldDisable = useStore(
|
|
11065
11584
|
store,
|
|
11066
11585
|
({ scrollPosition }) => scrollPosition && (side === "left" ? scrollPosition.left === 0 : scrollPosition.right <= 1)
|
|
11067
11586
|
);
|
|
@@ -11070,15 +11589,16 @@ function TabListScrollButton({ side, onClick }) {
|
|
|
11070
11589
|
{
|
|
11071
11590
|
variant: "ghost",
|
|
11072
11591
|
icon: side === "left" ? faChevronLeft : faChevronRight,
|
|
11073
|
-
label
|
|
11592
|
+
label,
|
|
11074
11593
|
className: cx(
|
|
11075
11594
|
prefix("tabs__scroll-button"),
|
|
11076
|
-
prefix(`tabs__scroll-button--${side}`)
|
|
11595
|
+
prefix(`tabs__scroll-button--${side}`),
|
|
11596
|
+
className
|
|
11077
11597
|
),
|
|
11078
|
-
disabled,
|
|
11598
|
+
disabled: shouldDisable || disabled,
|
|
11079
11599
|
onClick,
|
|
11080
11600
|
tabIndex: -1,
|
|
11081
|
-
|
|
11601
|
+
...otherProps
|
|
11082
11602
|
}
|
|
11083
11603
|
);
|
|
11084
11604
|
}
|
|
@@ -11178,76 +11698,6 @@ function useMediaBreakpointDown(breakpoint, options) {
|
|
|
11178
11698
|
options
|
|
11179
11699
|
);
|
|
11180
11700
|
}
|
|
11181
|
-
const FORM_CONTROLS = ["INPUT", "TEXTAREA", "SELECT"];
|
|
11182
|
-
function registerKeyboardShortcut(keybinds, action, {
|
|
11183
|
-
target = window,
|
|
11184
|
-
eventType = "keydown",
|
|
11185
|
-
sequenceTimeout = 1e3,
|
|
11186
|
-
ignore,
|
|
11187
|
-
capture = false,
|
|
11188
|
-
preventDefault
|
|
11189
|
-
} = {}) {
|
|
11190
|
-
const ignorableAction = (event) => {
|
|
11191
|
-
if (!ignore?.(event)) {
|
|
11192
|
-
if (preventDefault) {
|
|
11193
|
-
event.preventDefault();
|
|
11194
|
-
}
|
|
11195
|
-
action(event);
|
|
11196
|
-
}
|
|
11197
|
-
};
|
|
11198
|
-
const keybindsMap = typeof keybinds === "string" ? { [keybinds]: ignorableAction } : keybinds.reduce(
|
|
11199
|
-
(keybindsMap2, shortcut) => {
|
|
11200
|
-
keybindsMap2[shortcut] = ignorableAction;
|
|
11201
|
-
return keybindsMap2;
|
|
11202
|
-
},
|
|
11203
|
-
{}
|
|
11204
|
-
);
|
|
11205
|
-
return tinykeys(target, keybindsMap, {
|
|
11206
|
-
event: eventType,
|
|
11207
|
-
timeout: sequenceTimeout,
|
|
11208
|
-
capture
|
|
11209
|
-
});
|
|
11210
|
-
}
|
|
11211
|
-
function useKeyboardShortcut(keybinds, action, {
|
|
11212
|
-
enabled = true,
|
|
11213
|
-
target = window,
|
|
11214
|
-
eventType = "keydown",
|
|
11215
|
-
sequenceTimeout = 1e3,
|
|
11216
|
-
ignore,
|
|
11217
|
-
capture = false,
|
|
11218
|
-
preventDefault
|
|
11219
|
-
} = {}) {
|
|
11220
|
-
const shortcutsString = Array.isArray(keybinds) ? keybinds.join("__") : keybinds;
|
|
11221
|
-
const latestCallbacks = useLatestValues({ action, ignore });
|
|
11222
|
-
useEffect(() => {
|
|
11223
|
-
if (enabled && shortcutsString && target !== null) {
|
|
11224
|
-
return registerKeyboardShortcut(
|
|
11225
|
-
shortcutsString.split("__"),
|
|
11226
|
-
(evt) => latestCallbacks.action(evt),
|
|
11227
|
-
{
|
|
11228
|
-
target,
|
|
11229
|
-
eventType,
|
|
11230
|
-
sequenceTimeout,
|
|
11231
|
-
ignore: (evt) => latestCallbacks.ignore?.(evt) ?? false,
|
|
11232
|
-
capture,
|
|
11233
|
-
preventDefault
|
|
11234
|
-
}
|
|
11235
|
-
);
|
|
11236
|
-
}
|
|
11237
|
-
}, [
|
|
11238
|
-
capture,
|
|
11239
|
-
enabled,
|
|
11240
|
-
eventType,
|
|
11241
|
-
latestCallbacks,
|
|
11242
|
-
preventDefault,
|
|
11243
|
-
sequenceTimeout,
|
|
11244
|
-
shortcutsString,
|
|
11245
|
-
target
|
|
11246
|
-
]);
|
|
11247
|
-
}
|
|
11248
|
-
function ignoreFormControlsKeyboardShortcut(event) {
|
|
11249
|
-
return event.target !== null && event.target instanceof HTMLElement && FORM_CONTROLS.includes(event.target.tagName);
|
|
11250
|
-
}
|
|
11251
11701
|
function navigate(url, options) {
|
|
11252
11702
|
history[options?.replace ? "replaceState" : "pushState"](
|
|
11253
11703
|
options?.state,
|
|
@@ -11429,10 +11879,9 @@ export {
|
|
|
11429
11879
|
ControlCode,
|
|
11430
11880
|
ControlContext,
|
|
11431
11881
|
DATA_TABLE_SELECTION_COLUMN_WIDTH,
|
|
11882
|
+
DEFAULT_DATE_FORMAT,
|
|
11432
11883
|
DEFAULT_DOCUMENT_TITLE_BASE_SEPARATOR,
|
|
11433
11884
|
DEFAULT_DOCUMENT_TITLE_BREADCRUMBS_SEPARATOR,
|
|
11434
|
-
DEFAULT_FULL_DATE_FORMAT,
|
|
11435
|
-
DEFAULT_SHORT_DATE_FORMAT,
|
|
11436
11885
|
DEFAULT_TABLE_COLUMN_WIDTH,
|
|
11437
11886
|
DEFAULT_TABLE_ROW_HEIGHT,
|
|
11438
11887
|
DataTable,
|
|
@@ -11490,6 +11939,7 @@ export {
|
|
|
11490
11939
|
IconButton,
|
|
11491
11940
|
Input,
|
|
11492
11941
|
InputWithContainerRef,
|
|
11942
|
+
Keybinds,
|
|
11493
11943
|
Keyboard,
|
|
11494
11944
|
Label,
|
|
11495
11945
|
Link,
|
|
@@ -11568,8 +12018,10 @@ export {
|
|
|
11568
12018
|
locale4 as frFR,
|
|
11569
12019
|
ignoreFormControlsKeyboardShortcut,
|
|
11570
12020
|
isNumericStringNegative,
|
|
12021
|
+
keybindsToAriaKeyShortcuts,
|
|
11571
12022
|
matchAgainstFilter,
|
|
11572
12023
|
navigate,
|
|
12024
|
+
normalizeKeybinds,
|
|
11573
12025
|
normalizeNumericString,
|
|
11574
12026
|
numericStringFloatToInt,
|
|
11575
12027
|
numericStringIntToFloat,
|