@datatechsolutions/tympan 0.3.1 → 0.4.0
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/{Avatar-P14MVkK1.js → Avatar-CU7B1WsX.js} +61 -1
- package/dist/{Avatar-P14MVkK1.js.map → Avatar-CU7B1WsX.js.map} +1 -1
- package/dist/avatars.js +1 -1
- package/dist/flow.d.ts +1 -1
- package/dist/flow.js +2 -2
- package/dist/{index-6wR5ThnX.d.ts → index-J-7EBkCL.d.ts} +172 -6
- package/dist/index.d.ts +2 -2
- package/dist/index.js +3 -3
- package/dist/{src-C9whlpC7.js → src-uCyIE-Te.js} +909 -379
- package/dist/src-uCyIE-Te.js.map +1 -0
- package/dist/styles.css +476 -0
- package/package.json +2 -2
- package/src/components/calendar/Calendar.css +260 -0
- package/src/components/calendar/Calendar.test.tsx +178 -0
- package/src/components/calendar/Calendar.tsx +341 -0
- package/src/components/date-range-field/DateRangeField.css +140 -0
- package/src/components/date-range-field/DateRangeField.test.tsx +187 -0
- package/src/components/date-range-field/DateRangeField.tsx +231 -0
- package/src/components/tooltip/Tooltip.css +70 -0
- package/src/components/tooltip/Tooltip.test.tsx +209 -0
- package/src/components/tooltip/Tooltip.tsx +102 -0
- package/src/index.ts +3 -0
- package/src/internal/messages/core-es.ts +17 -0
- package/src/internal/messages.ts +51 -0
- package/src/styles.css +3 -0
- package/dist/src-C9whlpC7.js.map +0 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { h as substitute, i as useMessages, m as formatMessage, n as devWarning, t as Avatar } from "./Avatar-
|
|
2
|
+
import { h as substitute, i as useMessages, m as formatMessage, n as devWarning, t as Avatar } from "./Avatar-CU7B1WsX.js";
|
|
3
3
|
import { t as cx } from "./cx-Bn-0YiVq.js";
|
|
4
4
|
import { a as fuzzyHit, c as isDigit, i as recordChoice, l as localeDigits, n as orderChoices, o as markPieces, r as readChoices, s as asciiDigits, t as readBlocks, u as withLocaleDigits } from "./parse-Dq4x3Wet.js";
|
|
5
|
-
import { Children, Suspense, createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, version } from "react";
|
|
6
|
-
import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Cell, Checkbox, CheckboxGroup, Column, ComboBox, ComboBoxStateContext, Dialog, DialogTrigger, Disclosure, DisclosureGroup, DisclosurePanel, DropZone, Focusable, Form, GridList, GridListItem, Group, Header, Heading, I18nProvider, Input, Keyboard, Label, Link, ListBox, ListBoxItem, ListBoxSection, Menu, MenuItem, MenuSection, MenuTrigger, Modal, ModalOverlay, OverlayArrow, Popover, ProgressBar, Radio, RadioGroup, RouterProvider, Row, SearchField, Select, SelectValue, Separator, Switch, Tab, TabList, TabPanel, Table, TableBody, TableHeader, Tabs, Tag, TagGroup, TagList, Text, TextArea, TextField, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, useLocale } from "react-aria-components";
|
|
5
|
+
import { Children, Suspense, cloneElement, createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, version } from "react";
|
|
6
|
+
import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Cell, Checkbox, CheckboxGroup, Column, ComboBox, ComboBoxStateContext, DateInput, DateRangePicker, DateSegment, Dialog, DialogTrigger, Disclosure, DisclosureGroup, DisclosurePanel, DropZone, Focusable, Form, GridList, GridListItem, Group, Header, Heading, I18nProvider, Input, Keyboard, Label, Link, ListBox, ListBoxItem, ListBoxSection, Menu, MenuItem, MenuSection, MenuTrigger, Modal, ModalOverlay, OverlayArrow, Popover, ProgressBar, Radio, RadioGroup, RangeCalendar, RangeCalendarStateContext, RouterProvider, Row, SearchField, Select, SelectValue, Separator, Switch, Tab, TabList, TabPanel, Table, TableBody, TableHeader, Tabs, Tag, TagGroup, TagList, Text, TextArea, TextField, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, useLocale } from "react-aria-components";
|
|
7
7
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { PRINT_THEME_ALIASES, resolvePrintThemeName } from "@datatechsolutions/tympan-tokens/print-aliases";
|
|
9
9
|
import { Archive, ArrowDown, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpRight, BadgeCheck, Bell, BellOff, Boxes, CalendarDays, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CircleDashed, CircleDot, CircleHelp, CircleMinus, CirclePause, CircleX, Clock, Copy, Cpu, Database, Download, Ellipsis, ExternalLink, Eye, EyeOff, FileQuestion, Filter, GitMerge, Hourglass, Inbox, Info, KeyRound, Languages, Layers, Lightbulb, ListFilter, LoaderCircle, Lock, LockKeyhole, LogOut, Menu as Menu$1, Minus, Moon, Palette, PanelLeftClose, PanelLeftOpen, Pencil, Plus, Search, SearchX, Server, ServerCrash, SlidersHorizontal, Star, Sun, Trash2, TriangleAlert, User, UserRound, WifiOff, X } from "lucide-react";
|
|
10
|
+
import { CalendarDate, endOfMonth, getLocalTimeZone, getWeeksInMonth, startOfMonth, startOfWeek, today } from "@internationalized/date";
|
|
10
11
|
import { presets, printThemePresets } from "@datatechsolutions/tympan-tokens";
|
|
11
|
-
import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
|
|
12
12
|
import { createPortal } from "react-dom";
|
|
13
13
|
import { geoArea, geoBounds, geoCentroid, geoContains, geoEqualEarth, geoMercator, geoPath } from "d3-geo";
|
|
14
14
|
import { values } from "@datatechsolutions/tympan-tokens/values";
|
|
@@ -1629,6 +1629,390 @@ function FieldStack({ className, children, ...rest }) {
|
|
|
1629
1629
|
});
|
|
1630
1630
|
}
|
|
1631
1631
|
//#endregion
|
|
1632
|
+
//#region src/components/listbox-select/ListboxSelect.tsx
|
|
1633
|
+
function Option({ option }) {
|
|
1634
|
+
return /* @__PURE__ */ jsx(ListBoxItem, {
|
|
1635
|
+
id: option.value,
|
|
1636
|
+
textValue: option.label,
|
|
1637
|
+
isDisabled: option.disabled,
|
|
1638
|
+
className: "ty-listbox-select__option",
|
|
1639
|
+
children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
1640
|
+
option.icon ? /* @__PURE__ */ jsx("span", {
|
|
1641
|
+
className: "ty-listbox-select__option-icon",
|
|
1642
|
+
"aria-hidden": "true",
|
|
1643
|
+
children: option.icon
|
|
1644
|
+
}) : null,
|
|
1645
|
+
/* @__PURE__ */ jsxs("span", {
|
|
1646
|
+
className: "ty-listbox-select__option-text",
|
|
1647
|
+
children: [/* @__PURE__ */ jsx(Text, {
|
|
1648
|
+
slot: "label",
|
|
1649
|
+
className: "ty-listbox-select__option-label",
|
|
1650
|
+
children: option.label
|
|
1651
|
+
}), option.description ? /* @__PURE__ */ jsx(Text, {
|
|
1652
|
+
slot: "description",
|
|
1653
|
+
className: "ty-listbox-select__option-description",
|
|
1654
|
+
children: option.description
|
|
1655
|
+
}) : null]
|
|
1656
|
+
}),
|
|
1657
|
+
/* @__PURE__ */ jsx("span", {
|
|
1658
|
+
className: "ty-listbox-select__check",
|
|
1659
|
+
"aria-hidden": "true",
|
|
1660
|
+
children: isSelected ? /* @__PURE__ */ jsx(Check, {
|
|
1661
|
+
className: "ty-icon",
|
|
1662
|
+
focusable: "false"
|
|
1663
|
+
}) : null
|
|
1664
|
+
})
|
|
1665
|
+
] })
|
|
1666
|
+
});
|
|
1667
|
+
}
|
|
1668
|
+
/** One value from a custom listbox popover (spec: wave-1/listbox-select.md). */
|
|
1669
|
+
function ListboxSelect(props) {
|
|
1670
|
+
const { label, accessibleLabel, options = [], sections, value, defaultValue, onChange, placeholder, errorMessage, hint, disabled, required, name, open, onOpenChange, id, className } = props;
|
|
1671
|
+
const messages = useMessages();
|
|
1672
|
+
const base = useId();
|
|
1673
|
+
const hintId = hint != null ? `${base}-hint` : void 0;
|
|
1674
|
+
const errorId = errorMessage ? `${base}-error` : void 0;
|
|
1675
|
+
const wiring = useFieldControl({
|
|
1676
|
+
id,
|
|
1677
|
+
describedBy: [hintId, errorId].filter(Boolean).join(" ") || void 0,
|
|
1678
|
+
invalid: !!errorMessage,
|
|
1679
|
+
required,
|
|
1680
|
+
disabled
|
|
1681
|
+
});
|
|
1682
|
+
const errorAppeared = useAppearedAfterMount(!!errorMessage);
|
|
1683
|
+
const narrow = useMediaQuery("(max-width: 639.98px)");
|
|
1684
|
+
devWarning(!label && !accessibleLabel && !wiring.labelledBy, "ListboxSelect: provide `label`, `accessibleLabel` or a surrounding Field label.");
|
|
1685
|
+
const disabledKeys = [...options, ...(sections ?? []).flatMap((s) => s.options)].filter((o) => o.disabled).map((o) => o.value);
|
|
1686
|
+
const list = /* @__PURE__ */ jsxs(ListBox, {
|
|
1687
|
+
className: "ty-listbox-select__list",
|
|
1688
|
+
children: [options.map((o) => /* @__PURE__ */ jsx(Option, { option: o }, o.value)), sections?.map((s) => /* @__PURE__ */ jsxs(ListBoxSection, {
|
|
1689
|
+
id: s.title,
|
|
1690
|
+
className: "ty-listbox-select__section",
|
|
1691
|
+
children: [/* @__PURE__ */ jsx(Header, {
|
|
1692
|
+
className: "ty-listbox-select__section-title",
|
|
1693
|
+
children: s.title
|
|
1694
|
+
}), s.options.map((o) => /* @__PURE__ */ jsx(Option, { option: o }, o.value))]
|
|
1695
|
+
}, s.title))]
|
|
1696
|
+
});
|
|
1697
|
+
return /* @__PURE__ */ jsxs(Select, {
|
|
1698
|
+
id: wiring.id,
|
|
1699
|
+
className: cx("ty-listbox-select", className),
|
|
1700
|
+
value: value === void 0 ? void 0 : value,
|
|
1701
|
+
defaultValue: defaultValue ?? void 0,
|
|
1702
|
+
onChange: (key) => {
|
|
1703
|
+
if (key != null) onChange?.(String(key));
|
|
1704
|
+
},
|
|
1705
|
+
placeholder: placeholder ?? messages.select.placeholder,
|
|
1706
|
+
isDisabled: wiring.disabled,
|
|
1707
|
+
isRequired: wiring.required,
|
|
1708
|
+
isInvalid: wiring.invalid,
|
|
1709
|
+
disabledKeys,
|
|
1710
|
+
name,
|
|
1711
|
+
isOpen: open,
|
|
1712
|
+
onOpenChange,
|
|
1713
|
+
"aria-label": label ? void 0 : accessibleLabel,
|
|
1714
|
+
"aria-labelledby": !label && !accessibleLabel ? wiring.labelledBy : void 0,
|
|
1715
|
+
"aria-describedby": wiring.describedBy,
|
|
1716
|
+
"data-presentation": narrow ? "tray" : "popover",
|
|
1717
|
+
children: [
|
|
1718
|
+
label ? /* @__PURE__ */ jsx(Label, {
|
|
1719
|
+
className: "ty-listbox-select__label",
|
|
1720
|
+
children: label
|
|
1721
|
+
}) : null,
|
|
1722
|
+
hint != null ? /* @__PURE__ */ jsx("p", {
|
|
1723
|
+
id: hintId,
|
|
1724
|
+
className: "ty-listbox-select__hint",
|
|
1725
|
+
children: hint
|
|
1726
|
+
}) : null,
|
|
1727
|
+
/* @__PURE__ */ jsxs(Button, {
|
|
1728
|
+
className: "ty-listbox-select__trigger",
|
|
1729
|
+
"aria-describedby": wiring.describedBy,
|
|
1730
|
+
children: [/* @__PURE__ */ jsx(SelectValue, { className: "ty-listbox-select__value" }), /* @__PURE__ */ jsx(ChevronDown, {
|
|
1731
|
+
className: "ty-icon ty-listbox-select__chevron",
|
|
1732
|
+
"aria-hidden": "true",
|
|
1733
|
+
focusable: "false"
|
|
1734
|
+
})]
|
|
1735
|
+
}),
|
|
1736
|
+
errorMessage ? /* @__PURE__ */ jsxs("p", {
|
|
1737
|
+
id: errorId,
|
|
1738
|
+
className: "ty-listbox-select__error",
|
|
1739
|
+
"aria-live": errorAppeared ? "polite" : void 0,
|
|
1740
|
+
children: [/* @__PURE__ */ jsx(CircleAlert, {
|
|
1741
|
+
className: "ty-icon",
|
|
1742
|
+
"aria-hidden": "true",
|
|
1743
|
+
focusable: "false"
|
|
1744
|
+
}), /* @__PURE__ */ jsx("span", { children: errorMessage })]
|
|
1745
|
+
}) : null,
|
|
1746
|
+
/* @__PURE__ */ jsx(Popover, {
|
|
1747
|
+
className: narrow ? "ty-listbox-select__tray" : "ty-listbox-select__popover",
|
|
1748
|
+
offset: 4,
|
|
1749
|
+
"data-presentation": narrow ? "tray" : "popover",
|
|
1750
|
+
children: list
|
|
1751
|
+
})
|
|
1752
|
+
]
|
|
1753
|
+
});
|
|
1754
|
+
}
|
|
1755
|
+
//#endregion
|
|
1756
|
+
//#region src/components/calendar/Calendar.tsx
|
|
1757
|
+
const fromDate$2 = (d) => new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate());
|
|
1758
|
+
const toDate$3 = (c) => new Date(c.year, c.month - 1, c.day);
|
|
1759
|
+
/** ISO-8601 week number: week 1 is the week holding the year's first Thursday. */
|
|
1760
|
+
function isoWeekNumber(date) {
|
|
1761
|
+
const target = new Date(Date.UTC(date.year, date.month - 1, date.day));
|
|
1762
|
+
const weekday = target.getUTCDay() || 7;
|
|
1763
|
+
target.setUTCDate(target.getUTCDate() + 4 - weekday);
|
|
1764
|
+
const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1));
|
|
1765
|
+
return Math.ceil(((target.getTime() - yearStart.getTime()) / 864e5 + 1) / 7);
|
|
1766
|
+
}
|
|
1767
|
+
/**
|
|
1768
|
+
* Cancels a pending range start on Escape (spec: wave-5-general/calendar.md,
|
|
1769
|
+
* keyboard section). Listens on the calendar root so the key bubbles from the
|
|
1770
|
+
* focused day cell, and stops propagation so an enclosing popover stays open.
|
|
1771
|
+
*/
|
|
1772
|
+
function RangeEscapeCancel() {
|
|
1773
|
+
const state = useContext(RangeCalendarStateContext);
|
|
1774
|
+
const ref = useRef(null);
|
|
1775
|
+
useEffect(() => {
|
|
1776
|
+
const root = ref.current?.parentElement;
|
|
1777
|
+
if (!root || !state) return;
|
|
1778
|
+
const onKey = (e) => {
|
|
1779
|
+
if (e.key !== "Escape" || !state.anchorDate) return;
|
|
1780
|
+
e.stopPropagation();
|
|
1781
|
+
state.setAnchorDate(null);
|
|
1782
|
+
};
|
|
1783
|
+
root.addEventListener("keydown", onKey);
|
|
1784
|
+
return () => root.removeEventListener("keydown", onKey);
|
|
1785
|
+
}, [state]);
|
|
1786
|
+
return /* @__PURE__ */ jsx("span", {
|
|
1787
|
+
ref,
|
|
1788
|
+
"aria-hidden": "true",
|
|
1789
|
+
hidden: true
|
|
1790
|
+
});
|
|
1791
|
+
}
|
|
1792
|
+
/**
|
|
1793
|
+
* A month grid for picking a date or a date range directly on the page
|
|
1794
|
+
* (spec: wave-5-general/calendar.md). Single mode rides RAC Calendar, range
|
|
1795
|
+
* mode RAC RangeCalendar; both follow the APG Date Picker Dialog grid.
|
|
1796
|
+
*/
|
|
1797
|
+
function Calendar$1(props) {
|
|
1798
|
+
const t = useMessages().calendar;
|
|
1799
|
+
const { locale: contextLocale } = useLocale();
|
|
1800
|
+
const locale = props.locale ?? contextLocale;
|
|
1801
|
+
const mode = props.mode ?? "single";
|
|
1802
|
+
const months = props.visibleMonths ?? 1;
|
|
1803
|
+
const now = today(getLocalTimeZone());
|
|
1804
|
+
const [innerValue, setInnerValue] = useState(() => props.value ?? props.defaultValue ?? null);
|
|
1805
|
+
const value = props.value !== void 0 ? props.value : innerValue;
|
|
1806
|
+
const valueStart = value && "start" in value ? value.start : value;
|
|
1807
|
+
const [innerFocused, setInnerFocused] = useState(() => valueStart ? fromDate$2(valueStart) : now);
|
|
1808
|
+
const focused = props.focusedValue ? fromDate$2(props.focusedValue) : innerFocused;
|
|
1809
|
+
const setFocused = (d) => {
|
|
1810
|
+
if (!props.focusedValue) setInnerFocused(d);
|
|
1811
|
+
props.onFocusChange?.(toDate$3(d));
|
|
1812
|
+
};
|
|
1813
|
+
const report = (next) => {
|
|
1814
|
+
if (props.value === void 0) setInnerValue(next);
|
|
1815
|
+
props.onChange(next);
|
|
1816
|
+
};
|
|
1817
|
+
const min = props.minValue ? fromDate$2(props.minValue) : void 0;
|
|
1818
|
+
const max = props.maxValue ? fromDate$2(props.maxValue) : void 0;
|
|
1819
|
+
const baseUnavailable = (d) => props.isDateUnavailable ? props.isDateUnavailable(toDate$3(d)) : false;
|
|
1820
|
+
const monthYearFmt = new Intl.DateTimeFormat(locale, {
|
|
1821
|
+
month: "long",
|
|
1822
|
+
year: "numeric"
|
|
1823
|
+
});
|
|
1824
|
+
const monthFmt = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
1825
|
+
const headings = Array.from({ length: months }, (_, i) => toDate$3(startOfMonth(focused).add({ months: i })));
|
|
1826
|
+
const heading = headings.map((d, i) => i === 0 || d.getFullYear() !== headings[i - 1].getFullYear() ? monthYearFmt.format(d) : monthFmt.format(d)).join(" – ");
|
|
1827
|
+
const step = props.pageBehavior === "single" ? 1 : months;
|
|
1828
|
+
const prevTarget = startOfMonth(focused).subtract({ months: step });
|
|
1829
|
+
const nextTarget = startOfMonth(focused).add({ months: step });
|
|
1830
|
+
const baseId = useId();
|
|
1831
|
+
const headingId = `${baseId}-heading`;
|
|
1832
|
+
const pickerYears = (() => {
|
|
1833
|
+
const from = Math.max(focused.year - 30, min?.year ?? focused.year - 30);
|
|
1834
|
+
const to = Math.min(focused.year + 30, max?.year ?? focused.year + 30);
|
|
1835
|
+
const list = [];
|
|
1836
|
+
for (let y = from; y <= to; y++) list.push(y);
|
|
1837
|
+
return list;
|
|
1838
|
+
})();
|
|
1839
|
+
const monthAllowed = (monthIndex) => {
|
|
1840
|
+
const first = new CalendarDate(focused.year, monthIndex + 1, 1);
|
|
1841
|
+
const last = endOfMonth(first);
|
|
1842
|
+
return (!max || first.compare(max) <= 0) && (!min || last.compare(min) >= 0);
|
|
1843
|
+
};
|
|
1844
|
+
const invalid = !!props.isInvalid || !!props.errorMessage;
|
|
1845
|
+
const errorId = invalid && props.errorMessage ? `${baseId}-error` : void 0;
|
|
1846
|
+
const renderGrid = (offsetMonths) => {
|
|
1847
|
+
const anchor = startOfMonth(focused).add({ months: offsetMonths });
|
|
1848
|
+
const weeks = getWeeksInMonth(anchor, locale);
|
|
1849
|
+
const weekStarts = Array.from({ length: weeks }, (_, w) => startOfWeek(anchor.add({ weeks: w }), locale));
|
|
1850
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1851
|
+
className: "ty-calendar__month",
|
|
1852
|
+
children: [props.showWeekNumbers ? /* @__PURE__ */ jsx("div", {
|
|
1853
|
+
className: "ty-calendar__weeks",
|
|
1854
|
+
"aria-hidden": "true",
|
|
1855
|
+
children: weekStarts.map((week) => /* @__PURE__ */ jsx("span", {
|
|
1856
|
+
className: "ty-calendar__week",
|
|
1857
|
+
children: isoWeekNumber(week)
|
|
1858
|
+
}, week.toString()))
|
|
1859
|
+
}) : null, /* @__PURE__ */ jsxs(CalendarGrid, {
|
|
1860
|
+
className: "ty-calendar__grid",
|
|
1861
|
+
weekdayStyle: "short",
|
|
1862
|
+
offset: offsetMonths ? { months: offsetMonths } : void 0,
|
|
1863
|
+
children: [/* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, {
|
|
1864
|
+
className: "ty-calendar__weekday",
|
|
1865
|
+
children: day
|
|
1866
|
+
}) }), /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
|
|
1867
|
+
date,
|
|
1868
|
+
className: "ty-calendar__day",
|
|
1869
|
+
children: ({ formattedDate, isToday, isSelected, isSelectionStart, isSelectionEnd, isUnavailable, isDisabled, isOutsideMonth, isFocused }) => /* @__PURE__ */ jsxs("span", {
|
|
1870
|
+
className: "ty-calendar__day-box",
|
|
1871
|
+
"data-today": isToday || void 0,
|
|
1872
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
1873
|
+
className: "ty-calendar__day-number",
|
|
1874
|
+
children: formattedDate
|
|
1875
|
+
}), props.renderDay ? props.renderDay(toDate$3(date), {
|
|
1876
|
+
isToday,
|
|
1877
|
+
isSelected,
|
|
1878
|
+
isSelectionStart,
|
|
1879
|
+
isSelectionEnd,
|
|
1880
|
+
isUnavailable,
|
|
1881
|
+
isDisabled,
|
|
1882
|
+
isOutsideMonth,
|
|
1883
|
+
isFocused
|
|
1884
|
+
}) : null]
|
|
1885
|
+
})
|
|
1886
|
+
}) })]
|
|
1887
|
+
})]
|
|
1888
|
+
});
|
|
1889
|
+
};
|
|
1890
|
+
const header = props.headerMode === "pickers" ? /* @__PURE__ */ jsxs("div", {
|
|
1891
|
+
className: "ty-calendar__pickers",
|
|
1892
|
+
children: [/* @__PURE__ */ jsx(ListboxSelect, {
|
|
1893
|
+
accessibleLabel: t.monthPicker,
|
|
1894
|
+
className: "ty-calendar__picker",
|
|
1895
|
+
value: String(focused.month),
|
|
1896
|
+
onChange: (key) => setFocused(focused.set({ month: Number(key) })),
|
|
1897
|
+
options: Array.from({ length: 12 }, (_, m) => ({
|
|
1898
|
+
value: String(m + 1),
|
|
1899
|
+
label: monthFmt.format(new Date(2020, m, 15)),
|
|
1900
|
+
disabled: !monthAllowed(m)
|
|
1901
|
+
}))
|
|
1902
|
+
}), /* @__PURE__ */ jsx(ListboxSelect, {
|
|
1903
|
+
accessibleLabel: t.yearPicker,
|
|
1904
|
+
className: "ty-calendar__picker",
|
|
1905
|
+
value: String(focused.year),
|
|
1906
|
+
onChange: (key) => setFocused(focused.set({
|
|
1907
|
+
year: Number(key),
|
|
1908
|
+
day: 1
|
|
1909
|
+
})),
|
|
1910
|
+
options: pickerYears.map((y) => ({
|
|
1911
|
+
value: String(y),
|
|
1912
|
+
label: String(y)
|
|
1913
|
+
}))
|
|
1914
|
+
})]
|
|
1915
|
+
}) : /* @__PURE__ */ jsx("span", {
|
|
1916
|
+
className: "ty-calendar__heading",
|
|
1917
|
+
id: headingId,
|
|
1918
|
+
"aria-live": "polite",
|
|
1919
|
+
children: heading
|
|
1920
|
+
});
|
|
1921
|
+
const stepper = /* @__PURE__ */ jsxs("div", {
|
|
1922
|
+
className: "ty-calendar__stepper",
|
|
1923
|
+
children: [
|
|
1924
|
+
/* @__PURE__ */ jsx(Button, {
|
|
1925
|
+
slot: "previous",
|
|
1926
|
+
className: "ty-calendar__nav",
|
|
1927
|
+
"aria-label": t.previousMonth(monthYearFmt.format(toDate$3(prevTarget))),
|
|
1928
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, {
|
|
1929
|
+
className: "ty-icon ty-mirror-rtl",
|
|
1930
|
+
"aria-hidden": "true",
|
|
1931
|
+
focusable: "false"
|
|
1932
|
+
})
|
|
1933
|
+
}),
|
|
1934
|
+
header,
|
|
1935
|
+
/* @__PURE__ */ jsx(Button, {
|
|
1936
|
+
slot: "next",
|
|
1937
|
+
className: "ty-calendar__nav",
|
|
1938
|
+
"aria-label": t.nextMonth(monthYearFmt.format(toDate$3(nextTarget))),
|
|
1939
|
+
children: /* @__PURE__ */ jsx(ChevronRight, {
|
|
1940
|
+
className: "ty-icon ty-mirror-rtl",
|
|
1941
|
+
"aria-hidden": "true",
|
|
1942
|
+
focusable: "false"
|
|
1943
|
+
})
|
|
1944
|
+
})
|
|
1945
|
+
]
|
|
1946
|
+
});
|
|
1947
|
+
const shared = {
|
|
1948
|
+
"aria-label": props.label,
|
|
1949
|
+
minValue: min,
|
|
1950
|
+
maxValue: max,
|
|
1951
|
+
isDisabled: props.disabled,
|
|
1952
|
+
isReadOnly: props.readOnly,
|
|
1953
|
+
pageBehavior: props.pageBehavior ?? "visible",
|
|
1954
|
+
firstDayOfWeek: props.firstDayOfWeek,
|
|
1955
|
+
visibleDuration: { months },
|
|
1956
|
+
focusedValue: focused,
|
|
1957
|
+
onFocusChange: setFocused,
|
|
1958
|
+
isInvalid: invalid || void 0
|
|
1959
|
+
};
|
|
1960
|
+
return /* @__PURE__ */ jsx(I18nProvider, {
|
|
1961
|
+
locale,
|
|
1962
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
1963
|
+
className: cx("ty-calendar", props.className),
|
|
1964
|
+
"data-mode": mode,
|
|
1965
|
+
"data-months": months,
|
|
1966
|
+
"data-outside-days": props.showOutsideDays === false ? void 0 : "",
|
|
1967
|
+
"data-invalid": invalid || void 0,
|
|
1968
|
+
children: [
|
|
1969
|
+
/* @__PURE__ */ jsx("div", {
|
|
1970
|
+
className: "ty-calendar__body",
|
|
1971
|
+
children: mode === "range" ? /* @__PURE__ */ jsxs(RangeCalendar, {
|
|
1972
|
+
...shared,
|
|
1973
|
+
className: "ty-calendar__rac",
|
|
1974
|
+
value: value && "start" in value ? {
|
|
1975
|
+
start: fromDate$2(value.start),
|
|
1976
|
+
end: fromDate$2(value.end)
|
|
1977
|
+
} : null,
|
|
1978
|
+
onChange: (range) => {
|
|
1979
|
+
if (!range) return report(null);
|
|
1980
|
+
report({
|
|
1981
|
+
start: toDate$3(range.start),
|
|
1982
|
+
end: toDate$3(range.end)
|
|
1983
|
+
});
|
|
1984
|
+
},
|
|
1985
|
+
isDateUnavailable: baseUnavailable,
|
|
1986
|
+
allowsNonContiguousRanges: props.allowsNonContiguousRanges,
|
|
1987
|
+
children: [
|
|
1988
|
+
/* @__PURE__ */ jsx(RangeEscapeCancel, {}),
|
|
1989
|
+
stepper,
|
|
1990
|
+
Array.from({ length: months }, (_, i) => renderGrid(i))
|
|
1991
|
+
]
|
|
1992
|
+
}) : /* @__PURE__ */ jsxs(Calendar, {
|
|
1993
|
+
...shared,
|
|
1994
|
+
className: "ty-calendar__rac",
|
|
1995
|
+
value: value && "start" in value ? null : value ? fromDate$2(value) : null,
|
|
1996
|
+
onChange: (d) => report(d ? toDate$3(d) : null),
|
|
1997
|
+
isDateUnavailable: baseUnavailable,
|
|
1998
|
+
children: [stepper, Array.from({ length: months }, (_, i) => renderGrid(i))]
|
|
1999
|
+
})
|
|
2000
|
+
}),
|
|
2001
|
+
errorId ? /* @__PURE__ */ jsx("p", {
|
|
2002
|
+
className: "ty-calendar__error",
|
|
2003
|
+
id: errorId,
|
|
2004
|
+
role: "alert",
|
|
2005
|
+
children: props.errorMessage
|
|
2006
|
+
}) : null,
|
|
2007
|
+
props.footer ? /* @__PURE__ */ jsx("div", {
|
|
2008
|
+
className: "ty-calendar__footer",
|
|
2009
|
+
children: props.footer
|
|
2010
|
+
}) : null
|
|
2011
|
+
]
|
|
2012
|
+
})
|
|
2013
|
+
});
|
|
2014
|
+
}
|
|
2015
|
+
//#endregion
|
|
1632
2016
|
//#region src/components/checkbox/Checkbox.tsx
|
|
1633
2017
|
/** Whole-row checkbox with label and description (spec: wave-1/checkbox.md). */
|
|
1634
2018
|
const Checkbox$1 = forwardRef(function Checkbox$2(props, ref) {
|
|
@@ -2074,53 +2458,409 @@ function InteractiveTable({ caption, columns, rows, sortColumn, sortDirection =
|
|
|
2074
2458
|
});
|
|
2075
2459
|
}
|
|
2076
2460
|
//#endregion
|
|
2077
|
-
//#region src/
|
|
2078
|
-
/**
|
|
2079
|
-
const
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
}
|
|
2461
|
+
//#region src/internal/forms-b/parts.tsx
|
|
2462
|
+
/** Space-separated id list without empty entries (or undefined). */
|
|
2463
|
+
const joinIds = (...ids) => ids.filter(Boolean).join(" ") || void 0;
|
|
2464
|
+
/** True below 640 px, where floating pickers become a bottom tray. */
|
|
2465
|
+
function usePhoneWidth() {
|
|
2466
|
+
return useMediaQuery("(max-width: 639.98px)");
|
|
2467
|
+
}
|
|
2468
|
+
/** One text line of a field: label (above), hint (below the label) or error (below the control). */
|
|
2469
|
+
function FieldLine({ kind, id, htmlFor, children }) {
|
|
2470
|
+
if (kind === "label") return htmlFor ? /* @__PURE__ */ jsx("label", {
|
|
2471
|
+
className: "ty-fb-line",
|
|
2472
|
+
"data-line": "label",
|
|
2473
|
+
id,
|
|
2474
|
+
htmlFor,
|
|
2475
|
+
children
|
|
2476
|
+
}) : /* @__PURE__ */ jsx("span", {
|
|
2477
|
+
className: "ty-fb-line",
|
|
2478
|
+
"data-line": "label",
|
|
2479
|
+
id,
|
|
2480
|
+
children
|
|
2481
|
+
});
|
|
2482
|
+
return /* @__PURE__ */ jsxs("p", {
|
|
2483
|
+
className: "ty-fb-line",
|
|
2484
|
+
"data-line": kind,
|
|
2485
|
+
id,
|
|
2486
|
+
children: [kind === "error" ? /* @__PURE__ */ jsx(CircleAlert, {
|
|
2487
|
+
className: "ty-icon",
|
|
2488
|
+
"aria-hidden": "true",
|
|
2489
|
+
focusable: "false"
|
|
2490
|
+
}) : null, /* @__PURE__ */ jsx("span", { children })]
|
|
2491
|
+
});
|
|
2492
|
+
}
|
|
2493
|
+
/** Non-modal floating dialog; below 640 px the same popover is laid out as a bottom tray. */
|
|
2494
|
+
function FloatSurface(props) {
|
|
2495
|
+
const phone = usePhoneWidth();
|
|
2496
|
+
return /* @__PURE__ */ jsx(Popover, {
|
|
2497
|
+
className: cx("ty-fb-float", props.className),
|
|
2498
|
+
placement: props.side ?? "bottom",
|
|
2499
|
+
offset: 6,
|
|
2500
|
+
"data-presentation": phone ? "tray" : "popover",
|
|
2501
|
+
children: /* @__PURE__ */ jsx(Dialog, {
|
|
2502
|
+
className: "ty-fb-float__dialog",
|
|
2503
|
+
"aria-label": props.labelledBy ? void 0 : props.label,
|
|
2504
|
+
"aria-labelledby": props.labelledBy,
|
|
2505
|
+
children: props.children
|
|
2506
|
+
})
|
|
2507
|
+
});
|
|
2508
|
+
}
|
|
2509
|
+
/** Previous / heading / next row; the heading is a polite live region. */
|
|
2510
|
+
function StepperHeader(props) {
|
|
2511
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
2512
|
+
className: "ty-fb-stepper",
|
|
2513
|
+
children: [
|
|
2514
|
+
/* @__PURE__ */ jsx(Button, {
|
|
2515
|
+
className: "ty-fb-nav",
|
|
2516
|
+
"aria-label": props.previousLabel,
|
|
2517
|
+
isDisabled: props.previousDisabled,
|
|
2518
|
+
onPress: props.onPrevious,
|
|
2519
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, {
|
|
2520
|
+
className: "ty-icon ty-mirror-rtl",
|
|
2521
|
+
"aria-hidden": "true",
|
|
2522
|
+
focusable: "false"
|
|
2523
|
+
})
|
|
2524
|
+
}),
|
|
2525
|
+
/* @__PURE__ */ jsx("span", {
|
|
2526
|
+
className: "ty-fb-stepper__heading",
|
|
2527
|
+
id: props.headingId,
|
|
2528
|
+
"aria-live": "polite",
|
|
2529
|
+
children: props.heading
|
|
2530
|
+
}),
|
|
2531
|
+
/* @__PURE__ */ jsx(Button, {
|
|
2532
|
+
className: "ty-fb-nav",
|
|
2533
|
+
"aria-label": props.nextLabel,
|
|
2534
|
+
isDisabled: props.nextDisabled,
|
|
2535
|
+
onPress: props.onNext,
|
|
2536
|
+
children: /* @__PURE__ */ jsx(ChevronRight, {
|
|
2537
|
+
className: "ty-icon ty-mirror-rtl",
|
|
2538
|
+
"aria-hidden": "true",
|
|
2539
|
+
focusable: "false"
|
|
2540
|
+
})
|
|
2541
|
+
})
|
|
2542
|
+
]
|
|
2543
|
+
});
|
|
2544
|
+
}
|
|
2545
|
+
/** Localised month names, January first. */
|
|
2546
|
+
function monthNames(locale, width = "long") {
|
|
2547
|
+
const fmt = new Intl.DateTimeFormat(locale, {
|
|
2548
|
+
month: width,
|
|
2549
|
+
timeZone: "UTC"
|
|
2550
|
+
});
|
|
2551
|
+
return Array.from({ length: 12 }, (_, m) => fmt.format(Date.UTC(2020, m, 15)));
|
|
2552
|
+
}
|
|
2553
|
+
/** "YYYY-MM" key of a year and a zero-based month. */
|
|
2554
|
+
const monthKey = (year, monthIndex) => `${year}-${String(monthIndex + 1).padStart(2, "0")}`;
|
|
2555
|
+
/**
|
|
2556
|
+
* Twelve months of one year as a grid list (APG grid-like navigation);
|
|
2557
|
+
* unavailable months stay visible but disabled. PageUp/PageDown step years.
|
|
2558
|
+
*/
|
|
2559
|
+
function MonthGrid(props) {
|
|
2560
|
+
const names = monthNames(props.locale, "short");
|
|
2561
|
+
const longNames = monthNames(props.locale, "long");
|
|
2562
|
+
const cells = names.map((short, m) => ({
|
|
2563
|
+
key: monthKey(props.year, m),
|
|
2564
|
+
short,
|
|
2565
|
+
long: longNames[m]
|
|
2566
|
+
}));
|
|
2567
|
+
const disabled = cells.filter((c) => !props.isAvailable(c.key)).map((c) => c.key);
|
|
2568
|
+
const pick = (keys) => {
|
|
2569
|
+
if (keys === "all") return;
|
|
2570
|
+
const [first] = [...keys];
|
|
2571
|
+
if (first != null) props.onChoose(String(first));
|
|
2572
|
+
};
|
|
2573
|
+
return /* @__PURE__ */ jsx("div", {
|
|
2574
|
+
className: "ty-fb-months",
|
|
2575
|
+
onKeyDown: (e) => {
|
|
2576
|
+
if (!props.onYearStep || e.key !== "PageUp" && e.key !== "PageDown") return;
|
|
2577
|
+
e.preventDefault();
|
|
2578
|
+
props.onYearStep(e.key === "PageUp" ? -1 : 1);
|
|
2579
|
+
},
|
|
2580
|
+
children: /* @__PURE__ */ jsx(GridList, {
|
|
2581
|
+
"aria-label": props.label,
|
|
2582
|
+
layout: "grid",
|
|
2583
|
+
className: "ty-fb-months__grid",
|
|
2584
|
+
items: cells,
|
|
2585
|
+
selectionMode: "single",
|
|
2586
|
+
disallowEmptySelection: true,
|
|
2587
|
+
selectedKeys: props.selected ? [props.selected] : [],
|
|
2588
|
+
disabledKeys: disabled,
|
|
2589
|
+
onSelectionChange: pick,
|
|
2590
|
+
children: (cell) => /* @__PURE__ */ jsx(GridListItem, {
|
|
2591
|
+
id: cell.key,
|
|
2592
|
+
textValue: `${cell.long} ${props.year}`,
|
|
2593
|
+
className: "ty-fb-months__cell",
|
|
2594
|
+
children: cell.short
|
|
2595
|
+
})
|
|
2596
|
+
})
|
|
2597
|
+
});
|
|
2598
|
+
}
|
|
2599
|
+
//#endregion
|
|
2600
|
+
//#region src/components/date-range-field/DateRangeField.tsx
|
|
2601
|
+
const fromDate$1 = (d) => d ? new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate()) : null;
|
|
2602
|
+
const toDate$2 = (c) => c ? new Date(c.year, c.month - 1, c.day) : null;
|
|
2603
|
+
const daysBetween = (a, b) => Math.round((b.getTime() - a.getTime()) / 864e5);
|
|
2604
|
+
/**
|
|
2605
|
+
* Enter a start and end date by typing into segmented date inputs or by
|
|
2606
|
+
* picking in a Calendar popover (spec: wave-5-general/date-range-field.md).
|
|
2607
|
+
* Built on RAC DateRangePicker; APG Date Picker Dialog.
|
|
2608
|
+
*/
|
|
2609
|
+
function DateRangeField(props) {
|
|
2610
|
+
const t = useMessages().dateRangeField;
|
|
2611
|
+
const { locale: contextLocale } = useLocale();
|
|
2612
|
+
const now = today(getLocalTimeZone());
|
|
2613
|
+
const [innerValue, setInnerValue] = useState(() => props.value ?? props.defaultValue ?? null);
|
|
2614
|
+
const value = props.value !== void 0 ? props.value : innerValue;
|
|
2615
|
+
const [open, setOpen] = useState(false);
|
|
2616
|
+
const [draft, setDraft] = useState(null);
|
|
2617
|
+
const months = usePhoneWidth() ? 1 : props.visibleMonths ?? 2;
|
|
2618
|
+
const confirmation = props.confirmation ?? "immediate";
|
|
2619
|
+
const commit = (next) => {
|
|
2620
|
+
if (props.value === void 0) setInnerValue(next);
|
|
2621
|
+
props.onChange(next);
|
|
2622
|
+
};
|
|
2623
|
+
const shown = open && confirmation === "apply" ? draft : value;
|
|
2624
|
+
const shownRange = shown && (shown.start || shown.end) ? {
|
|
2625
|
+
start: fromDate$1(shown.start),
|
|
2626
|
+
end: fromDate$1(shown.end)
|
|
2627
|
+
} : null;
|
|
2628
|
+
const racValue = shownRange && shownRange.start && shownRange.end ? {
|
|
2629
|
+
start: shownRange.start,
|
|
2630
|
+
end: shownRange.end
|
|
2631
|
+
} : null;
|
|
2632
|
+
const computedInvalid = (() => {
|
|
2633
|
+
const start = value?.start;
|
|
2634
|
+
const end = value?.end;
|
|
2635
|
+
if (!start || !end) return null;
|
|
2636
|
+
if (end.getTime() < start.getTime()) return t.endBeforeStart;
|
|
2637
|
+
if (props.maxDays != null && daysBetween(start, end) + 1 > props.maxDays) return t.tooManyDays(props.maxDays);
|
|
2638
|
+
if (props.minValue && start.getTime() < props.minValue.getTime()) return t.outOfBounds;
|
|
2639
|
+
if (props.maxValue && end.getTime() > props.maxValue.getTime()) return t.outOfBounds;
|
|
2640
|
+
if (props.isDateUnavailable) {
|
|
2641
|
+
const cursor = new Date(start.getTime());
|
|
2642
|
+
while (cursor.getTime() <= end.getTime()) {
|
|
2643
|
+
if (props.isDateUnavailable(cursor)) return t.unavailableDay;
|
|
2644
|
+
cursor.setDate(cursor.getDate() + 1);
|
|
2645
|
+
}
|
|
2646
|
+
}
|
|
2647
|
+
return null;
|
|
2648
|
+
})();
|
|
2649
|
+
const errorMessage = props.errorText ?? computedInvalid ?? void 0;
|
|
2650
|
+
const invalid = !!errorMessage;
|
|
2651
|
+
const base = useId();
|
|
2652
|
+
const labelId = `${base}-label`;
|
|
2653
|
+
const hintId = props.hint != null && !errorMessage ? `${base}-hint` : void 0;
|
|
2654
|
+
const errorId = errorMessage ? `${base}-error` : void 0;
|
|
2655
|
+
const openChange = (next) => {
|
|
2656
|
+
if (next) setDraft(value ? { ...value } : null);
|
|
2657
|
+
setOpen(next);
|
|
2658
|
+
};
|
|
2659
|
+
const pickFromCalendar = (range) => {
|
|
2660
|
+
if (confirmation === "apply") {
|
|
2661
|
+
setDraft(range);
|
|
2662
|
+
return;
|
|
2663
|
+
}
|
|
2664
|
+
commit(range);
|
|
2665
|
+
setOpen(false);
|
|
2666
|
+
};
|
|
2667
|
+
const typed = (range) => {
|
|
2668
|
+
const next = range && (range.start || range.end) ? {
|
|
2669
|
+
start: toDate$2(range.start),
|
|
2670
|
+
end: toDate$2(range.end)
|
|
2671
|
+
} : null;
|
|
2672
|
+
if (open && confirmation === "apply") setDraft(next);
|
|
2673
|
+
else commit(next);
|
|
2674
|
+
};
|
|
2675
|
+
const applyPreset = (preset) => {
|
|
2676
|
+
if (confirmation === "apply") {
|
|
2677
|
+
setDraft({ ...preset.range });
|
|
2678
|
+
return;
|
|
2679
|
+
}
|
|
2680
|
+
commit({ ...preset.range });
|
|
2681
|
+
setOpen(false);
|
|
2682
|
+
};
|
|
2683
|
+
const calendar = /* @__PURE__ */ jsx(Calendar$1, {
|
|
2684
|
+
label: props.label,
|
|
2685
|
+
mode: "range",
|
|
2686
|
+
value: draft && draft.start && draft.end ? {
|
|
2687
|
+
start: draft.start,
|
|
2688
|
+
end: draft.end
|
|
2689
|
+
} : null,
|
|
2690
|
+
onChange: (next) => pickFromCalendar(next),
|
|
2691
|
+
minValue: props.minValue,
|
|
2692
|
+
maxValue: props.maxValue,
|
|
2693
|
+
isDateUnavailable: props.isDateUnavailable,
|
|
2694
|
+
visibleMonths: months,
|
|
2695
|
+
focusedValue: draft?.start ?? value?.start ?? new Date(now.year, now.month - 1, now.day),
|
|
2696
|
+
isInvalid: invalid
|
|
2697
|
+
});
|
|
2698
|
+
return /* @__PURE__ */ jsx(I18nProvider, {
|
|
2699
|
+
locale: props.locale ?? contextLocale,
|
|
2700
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
2701
|
+
className: cx("ty-date-range-field", props.className),
|
|
2702
|
+
"data-invalid": invalid || void 0,
|
|
2703
|
+
children: [
|
|
2704
|
+
/* @__PURE__ */ jsx(FieldLine, {
|
|
2705
|
+
kind: "label",
|
|
2706
|
+
id: labelId,
|
|
2707
|
+
children: /* @__PURE__ */ jsx("span", { children: props.label })
|
|
2708
|
+
}),
|
|
2709
|
+
hintId ? /* @__PURE__ */ jsx(FieldLine, {
|
|
2710
|
+
kind: "hint",
|
|
2711
|
+
id: hintId,
|
|
2712
|
+
children: props.hint
|
|
2713
|
+
}) : null,
|
|
2714
|
+
/* @__PURE__ */ jsxs(DateRangePicker, {
|
|
2715
|
+
className: "ty-date-range-field__picker",
|
|
2716
|
+
value: racValue,
|
|
2717
|
+
onChange: typed,
|
|
2718
|
+
isOpen: open,
|
|
2719
|
+
onOpenChange: openChange,
|
|
2720
|
+
shouldCloseOnSelect: false,
|
|
2721
|
+
startName: props.startName,
|
|
2722
|
+
endName: props.endName,
|
|
2723
|
+
minValue: fromDate$1(props.minValue ?? null) ?? void 0,
|
|
2724
|
+
maxValue: fromDate$1(props.maxValue ?? null) ?? void 0,
|
|
2725
|
+
isDateUnavailable: (d) => props.isDateUnavailable ? props.isDateUnavailable(toDate$2(d)) : false,
|
|
2726
|
+
isDisabled: props.disabled,
|
|
2727
|
+
isReadOnly: props.readOnly,
|
|
2728
|
+
isRequired: props.required,
|
|
2729
|
+
isInvalid: invalid || void 0,
|
|
2730
|
+
"aria-labelledby": labelId,
|
|
2731
|
+
"aria-describedby": joinIds(hintId, errorId),
|
|
2732
|
+
children: [/* @__PURE__ */ jsxs(Group, {
|
|
2733
|
+
className: "ty-date-range-field__group",
|
|
2734
|
+
children: [
|
|
2735
|
+
/* @__PURE__ */ jsx(DateInput, {
|
|
2736
|
+
slot: "start",
|
|
2737
|
+
className: "ty-date-range-field__input",
|
|
2738
|
+
"aria-label": `${props.label}: ${t.start}`,
|
|
2739
|
+
children: (segment) => /* @__PURE__ */ jsx(DateSegment, {
|
|
2740
|
+
segment,
|
|
2741
|
+
className: "ty-date-range-field__segment"
|
|
2742
|
+
})
|
|
2743
|
+
}),
|
|
2744
|
+
/* @__PURE__ */ jsx("span", {
|
|
2745
|
+
className: "ty-date-range-field__dash",
|
|
2746
|
+
"aria-hidden": "true",
|
|
2747
|
+
children: "–"
|
|
2748
|
+
}),
|
|
2749
|
+
/* @__PURE__ */ jsx(DateInput, {
|
|
2750
|
+
slot: "end",
|
|
2751
|
+
className: "ty-date-range-field__input",
|
|
2752
|
+
"aria-label": `${props.label}: ${t.end}`,
|
|
2753
|
+
children: (segment) => /* @__PURE__ */ jsx(DateSegment, {
|
|
2754
|
+
segment,
|
|
2755
|
+
className: "ty-date-range-field__segment"
|
|
2756
|
+
})
|
|
2757
|
+
}),
|
|
2758
|
+
/* @__PURE__ */ jsx(Button, {
|
|
2759
|
+
className: "ty-date-range-field__trigger",
|
|
2760
|
+
"aria-label": props.label,
|
|
2761
|
+
children: /* @__PURE__ */ jsx(CalendarDays, {
|
|
2762
|
+
className: "ty-icon",
|
|
2763
|
+
"aria-hidden": "true",
|
|
2764
|
+
focusable: "false"
|
|
2765
|
+
})
|
|
2766
|
+
})
|
|
2767
|
+
]
|
|
2768
|
+
}), /* @__PURE__ */ jsx(FloatSurface, {
|
|
2769
|
+
labelledBy: labelId,
|
|
2770
|
+
className: "ty-date-range-field__surface",
|
|
2771
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
2772
|
+
className: "ty-date-range-field__panel",
|
|
2773
|
+
children: [
|
|
2774
|
+
props.presets?.length ? /* @__PURE__ */ jsx("div", {
|
|
2775
|
+
className: "ty-date-range-field__presets",
|
|
2776
|
+
role: "group",
|
|
2777
|
+
"aria-label": t.presets,
|
|
2778
|
+
children: props.presets.map((preset) => /* @__PURE__ */ jsx(Button$1, {
|
|
2779
|
+
variant: "quiet",
|
|
2780
|
+
size: "compact",
|
|
2781
|
+
onPress: () => applyPreset(preset),
|
|
2782
|
+
children: preset.label
|
|
2783
|
+
}, preset.id))
|
|
2784
|
+
}) : null,
|
|
2785
|
+
calendar,
|
|
2786
|
+
confirmation === "apply" ? /* @__PURE__ */ jsxs("div", {
|
|
2787
|
+
className: "ty-date-range-field__actions",
|
|
2788
|
+
children: [/* @__PURE__ */ jsx(Button$1, {
|
|
2789
|
+
variant: "quiet",
|
|
2790
|
+
size: "compact",
|
|
2791
|
+
onPress: () => openChange(false),
|
|
2792
|
+
children: t.cancel
|
|
2793
|
+
}), /* @__PURE__ */ jsx(Button$1, {
|
|
2794
|
+
variant: "primary",
|
|
2795
|
+
size: "compact",
|
|
2796
|
+
onPress: () => {
|
|
2797
|
+
commit(draft);
|
|
2798
|
+
setOpen(false);
|
|
2799
|
+
},
|
|
2800
|
+
children: t.apply
|
|
2801
|
+
})]
|
|
2802
|
+
}) : null
|
|
2803
|
+
]
|
|
2804
|
+
})
|
|
2805
|
+
})]
|
|
2806
|
+
}),
|
|
2807
|
+
errorId ? /* @__PURE__ */ jsx(FieldLine, {
|
|
2808
|
+
kind: "error",
|
|
2809
|
+
id: errorId,
|
|
2810
|
+
children: errorMessage
|
|
2811
|
+
}) : null
|
|
2812
|
+
]
|
|
2813
|
+
})
|
|
2814
|
+
});
|
|
2815
|
+
}
|
|
2816
|
+
//#endregion
|
|
2817
|
+
//#region src/components/drawer/Drawer.tsx
|
|
2818
|
+
/** Distance (px) or velocity (px/ms) past which a released drag closes the drawer. */
|
|
2819
|
+
const DRAWER_DRAG_DISTANCE = 120;
|
|
2820
|
+
const DRAWER_DRAG_VELOCITY = .6;
|
|
2821
|
+
/** Modal panel attached to the bottom or end edge (spec: wave-1/drawer.md). */
|
|
2822
|
+
function Drawer(props) {
|
|
2823
|
+
const { open, onOpenChange, title, placement = "bottom", width = "medium", maxHeight, showHandle = true, dismissible = true, children, className } = props;
|
|
2824
|
+
const messages = useMessages();
|
|
2825
|
+
const [drag, setDrag] = useState(0);
|
|
2826
|
+
const start = useRef(null);
|
|
2827
|
+
const canDrag = placement === "bottom" && dismissible;
|
|
2828
|
+
const onPointerDown = (e) => {
|
|
2829
|
+
if (!canDrag || e.button !== void 0 && e.button > 0) return;
|
|
2830
|
+
if (e.target.closest("button")) return;
|
|
2831
|
+
start.current = {
|
|
2832
|
+
y: e.clientY,
|
|
2833
|
+
t: e.timeStamp || performance.now()
|
|
2834
|
+
};
|
|
2835
|
+
e.currentTarget.setPointerCapture?.(e.pointerId);
|
|
2836
|
+
};
|
|
2837
|
+
const onPointerMove = (e) => {
|
|
2838
|
+
if (!start.current) return;
|
|
2839
|
+
setDrag(Math.max(0, e.clientY - start.current.y));
|
|
2840
|
+
};
|
|
2841
|
+
const onPointerUp = (e) => {
|
|
2842
|
+
if (!start.current) return;
|
|
2843
|
+
const distance = Math.max(0, e.clientY - start.current.y);
|
|
2844
|
+
const elapsed = Math.max(1, (e.timeStamp || performance.now()) - start.current.t);
|
|
2845
|
+
start.current = null;
|
|
2846
|
+
setDrag(0);
|
|
2847
|
+
if (distance >= 120 || distance / elapsed >= .6) onOpenChange(false);
|
|
2848
|
+
};
|
|
2849
|
+
const dragging = drag > 0;
|
|
2850
|
+
const panelStyle = {
|
|
2851
|
+
...maxHeight && placement === "bottom" ? { maxBlockSize: maxHeight } : {},
|
|
2852
|
+
...dragging ? {
|
|
2853
|
+
transform: `translateY(${drag}px)`,
|
|
2854
|
+
transition: "none"
|
|
2855
|
+
} : {}
|
|
2856
|
+
};
|
|
2857
|
+
const overlayStyle = dragging ? { opacity: Math.max(.2, 1 - drag / 400) } : void 0;
|
|
2858
|
+
const dragHandlers = canDrag ? {
|
|
2859
|
+
onPointerDown,
|
|
2860
|
+
onPointerMove,
|
|
2861
|
+
onPointerUp,
|
|
2862
|
+
onPointerCancel: onPointerUp
|
|
2863
|
+
} : {};
|
|
2124
2864
|
return /* @__PURE__ */ jsx(ModalOverlay, {
|
|
2125
2865
|
isOpen: open,
|
|
2126
2866
|
onOpenChange: (o) => {
|
|
@@ -2319,195 +3059,71 @@ const toneIcons$1 = {
|
|
|
2319
3059
|
danger: CircleAlert,
|
|
2320
3060
|
warning: TriangleAlert,
|
|
2321
3061
|
info: Info,
|
|
2322
|
-
success: CircleCheck
|
|
2323
|
-
};
|
|
2324
|
-
const focusableSelector = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
|
|
2325
|
-
/** Short message about the state of a form, section or page (spec: wave-1/inline-notice.md). */
|
|
2326
|
-
function InlineNotice({ tone = "info", title, titleAs = "p", children, icon, actions, dismissible = false, onDismiss, align = "start", urgency, className }) {
|
|
2327
|
-
const messages = useMessages();
|
|
2328
|
-
const rootRef = useRef(null);
|
|
2329
|
-
const level = urgency ?? (tone === "danger" || tone === "warning" ? "assertive" : "polite");
|
|
2330
|
-
const role = level === "assertive" ? "alert" : level === "polite" ? "status" : void 0;
|
|
2331
|
-
const Icon = toneIcons$1[tone];
|
|
2332
|
-
const TitleTag = titleAs;
|
|
2333
|
-
const dismiss = () => {
|
|
2334
|
-
const root = rootRef.current;
|
|
2335
|
-
let next = null;
|
|
2336
|
-
if (root) {
|
|
2337
|
-
const all = Array.from(document.querySelectorAll(focusableSelector));
|
|
2338
|
-
next = all.find((el) => !root.contains(el) && root.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) ?? [...all].reverse().find((el) => !root.contains(el)) ?? null;
|
|
2339
|
-
}
|
|
2340
|
-
onDismiss?.();
|
|
2341
|
-
if (next) setTimeout(() => next?.isConnected && next.focus(), 0);
|
|
2342
|
-
};
|
|
2343
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
2344
|
-
ref: rootRef,
|
|
2345
|
-
className: cx("ty-notice", className),
|
|
2346
|
-
"data-tone": tone,
|
|
2347
|
-
"data-align": align,
|
|
2348
|
-
role,
|
|
2349
|
-
children: [
|
|
2350
|
-
/* @__PURE__ */ jsx("span", {
|
|
2351
|
-
className: "ty-notice__icon",
|
|
2352
|
-
"aria-hidden": "true",
|
|
2353
|
-
children: icon ?? /* @__PURE__ */ jsx(Icon, {})
|
|
2354
|
-
}),
|
|
2355
|
-
/* @__PURE__ */ jsxs("div", {
|
|
2356
|
-
className: "ty-notice__body",
|
|
2357
|
-
children: [
|
|
2358
|
-
title ? /* @__PURE__ */ jsxs(TitleTag, {
|
|
2359
|
-
className: "ty-notice__title",
|
|
2360
|
-
children: [/* @__PURE__ */ jsxs("span", {
|
|
2361
|
-
className: "ty-visually-hidden",
|
|
2362
|
-
children: [messages.notice.toneWord[tone], " "]
|
|
2363
|
-
}), title]
|
|
2364
|
-
}) : null,
|
|
2365
|
-
/* @__PURE__ */ jsxs("div", {
|
|
2366
|
-
className: "ty-notice__message",
|
|
2367
|
-
children: [title ? null : /* @__PURE__ */ jsxs("span", {
|
|
2368
|
-
className: "ty-visually-hidden",
|
|
2369
|
-
children: [messages.notice.toneWord[tone], " "]
|
|
2370
|
-
}), children]
|
|
2371
|
-
}),
|
|
2372
|
-
actions ? /* @__PURE__ */ jsx("div", {
|
|
2373
|
-
className: "ty-notice__actions",
|
|
2374
|
-
children: actions
|
|
2375
|
-
}) : null
|
|
2376
|
-
]
|
|
2377
|
-
}),
|
|
2378
|
-
dismissible ? /* @__PURE__ */ jsx(Button$1, {
|
|
2379
|
-
className: "ty-notice__dismiss",
|
|
2380
|
-
variant: "quiet",
|
|
2381
|
-
size: "compact",
|
|
2382
|
-
iconOnly: true,
|
|
2383
|
-
accessibleLabel: messages.dismiss,
|
|
2384
|
-
leadingIcon: /* @__PURE__ */ jsx(X, {}),
|
|
2385
|
-
onPress: dismiss
|
|
2386
|
-
}) : null
|
|
2387
|
-
]
|
|
2388
|
-
});
|
|
2389
|
-
}
|
|
2390
|
-
//#endregion
|
|
2391
|
-
//#region src/components/listbox-select/ListboxSelect.tsx
|
|
2392
|
-
function Option({ option }) {
|
|
2393
|
-
return /* @__PURE__ */ jsx(ListBoxItem, {
|
|
2394
|
-
id: option.value,
|
|
2395
|
-
textValue: option.label,
|
|
2396
|
-
isDisabled: option.disabled,
|
|
2397
|
-
className: "ty-listbox-select__option",
|
|
2398
|
-
children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
2399
|
-
option.icon ? /* @__PURE__ */ jsx("span", {
|
|
2400
|
-
className: "ty-listbox-select__option-icon",
|
|
2401
|
-
"aria-hidden": "true",
|
|
2402
|
-
children: option.icon
|
|
2403
|
-
}) : null,
|
|
2404
|
-
/* @__PURE__ */ jsxs("span", {
|
|
2405
|
-
className: "ty-listbox-select__option-text",
|
|
2406
|
-
children: [/* @__PURE__ */ jsx(Text, {
|
|
2407
|
-
slot: "label",
|
|
2408
|
-
className: "ty-listbox-select__option-label",
|
|
2409
|
-
children: option.label
|
|
2410
|
-
}), option.description ? /* @__PURE__ */ jsx(Text, {
|
|
2411
|
-
slot: "description",
|
|
2412
|
-
className: "ty-listbox-select__option-description",
|
|
2413
|
-
children: option.description
|
|
2414
|
-
}) : null]
|
|
2415
|
-
}),
|
|
2416
|
-
/* @__PURE__ */ jsx("span", {
|
|
2417
|
-
className: "ty-listbox-select__check",
|
|
2418
|
-
"aria-hidden": "true",
|
|
2419
|
-
children: isSelected ? /* @__PURE__ */ jsx(Check, {
|
|
2420
|
-
className: "ty-icon",
|
|
2421
|
-
focusable: "false"
|
|
2422
|
-
}) : null
|
|
2423
|
-
})
|
|
2424
|
-
] })
|
|
2425
|
-
});
|
|
2426
|
-
}
|
|
2427
|
-
/** One value from a custom listbox popover (spec: wave-1/listbox-select.md). */
|
|
2428
|
-
function ListboxSelect(props) {
|
|
2429
|
-
const { label, accessibleLabel, options = [], sections, value, defaultValue, onChange, placeholder, errorMessage, hint, disabled, required, name, open, onOpenChange, id, className } = props;
|
|
2430
|
-
const messages = useMessages();
|
|
2431
|
-
const base = useId();
|
|
2432
|
-
const hintId = hint != null ? `${base}-hint` : void 0;
|
|
2433
|
-
const errorId = errorMessage ? `${base}-error` : void 0;
|
|
2434
|
-
const wiring = useFieldControl({
|
|
2435
|
-
id,
|
|
2436
|
-
describedBy: [hintId, errorId].filter(Boolean).join(" ") || void 0,
|
|
2437
|
-
invalid: !!errorMessage,
|
|
2438
|
-
required,
|
|
2439
|
-
disabled
|
|
2440
|
-
});
|
|
2441
|
-
const errorAppeared = useAppearedAfterMount(!!errorMessage);
|
|
2442
|
-
const narrow = useMediaQuery("(max-width: 639.98px)");
|
|
2443
|
-
devWarning(!label && !accessibleLabel && !wiring.labelledBy, "ListboxSelect: provide `label`, `accessibleLabel` or a surrounding Field label.");
|
|
2444
|
-
const disabledKeys = [...options, ...(sections ?? []).flatMap((s) => s.options)].filter((o) => o.disabled).map((o) => o.value);
|
|
2445
|
-
const list = /* @__PURE__ */ jsxs(ListBox, {
|
|
2446
|
-
className: "ty-listbox-select__list",
|
|
2447
|
-
children: [options.map((o) => /* @__PURE__ */ jsx(Option, { option: o }, o.value)), sections?.map((s) => /* @__PURE__ */ jsxs(ListBoxSection, {
|
|
2448
|
-
id: s.title,
|
|
2449
|
-
className: "ty-listbox-select__section",
|
|
2450
|
-
children: [/* @__PURE__ */ jsx(Header, {
|
|
2451
|
-
className: "ty-listbox-select__section-title",
|
|
2452
|
-
children: s.title
|
|
2453
|
-
}), s.options.map((o) => /* @__PURE__ */ jsx(Option, { option: o }, o.value))]
|
|
2454
|
-
}, s.title))]
|
|
2455
|
-
});
|
|
2456
|
-
return /* @__PURE__ */ jsxs(Select, {
|
|
2457
|
-
id: wiring.id,
|
|
2458
|
-
className: cx("ty-listbox-select", className),
|
|
2459
|
-
value: value === void 0 ? void 0 : value,
|
|
2460
|
-
defaultValue: defaultValue ?? void 0,
|
|
2461
|
-
onChange: (key) => {
|
|
2462
|
-
if (key != null) onChange?.(String(key));
|
|
2463
|
-
},
|
|
2464
|
-
placeholder: placeholder ?? messages.select.placeholder,
|
|
2465
|
-
isDisabled: wiring.disabled,
|
|
2466
|
-
isRequired: wiring.required,
|
|
2467
|
-
isInvalid: wiring.invalid,
|
|
2468
|
-
disabledKeys,
|
|
2469
|
-
name,
|
|
2470
|
-
isOpen: open,
|
|
2471
|
-
onOpenChange,
|
|
2472
|
-
"aria-label": label ? void 0 : accessibleLabel,
|
|
2473
|
-
"aria-labelledby": !label && !accessibleLabel ? wiring.labelledBy : void 0,
|
|
2474
|
-
"aria-describedby": wiring.describedBy,
|
|
2475
|
-
"data-presentation": narrow ? "tray" : "popover",
|
|
3062
|
+
success: CircleCheck
|
|
3063
|
+
};
|
|
3064
|
+
const focusableSelector = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
|
|
3065
|
+
/** Short message about the state of a form, section or page (spec: wave-1/inline-notice.md). */
|
|
3066
|
+
function InlineNotice({ tone = "info", title, titleAs = "p", children, icon, actions, dismissible = false, onDismiss, align = "start", urgency, className }) {
|
|
3067
|
+
const messages = useMessages();
|
|
3068
|
+
const rootRef = useRef(null);
|
|
3069
|
+
const level = urgency ?? (tone === "danger" || tone === "warning" ? "assertive" : "polite");
|
|
3070
|
+
const role = level === "assertive" ? "alert" : level === "polite" ? "status" : void 0;
|
|
3071
|
+
const Icon = toneIcons$1[tone];
|
|
3072
|
+
const TitleTag = titleAs;
|
|
3073
|
+
const dismiss = () => {
|
|
3074
|
+
const root = rootRef.current;
|
|
3075
|
+
let next = null;
|
|
3076
|
+
if (root) {
|
|
3077
|
+
const all = Array.from(document.querySelectorAll(focusableSelector));
|
|
3078
|
+
next = all.find((el) => !root.contains(el) && root.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) ?? [...all].reverse().find((el) => !root.contains(el)) ?? null;
|
|
3079
|
+
}
|
|
3080
|
+
onDismiss?.();
|
|
3081
|
+
if (next) setTimeout(() => next?.isConnected && next.focus(), 0);
|
|
3082
|
+
};
|
|
3083
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
3084
|
+
ref: rootRef,
|
|
3085
|
+
className: cx("ty-notice", className),
|
|
3086
|
+
"data-tone": tone,
|
|
3087
|
+
"data-align": align,
|
|
3088
|
+
role,
|
|
2476
3089
|
children: [
|
|
2477
|
-
|
|
2478
|
-
className: "ty-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
hint != null ? /* @__PURE__ */ jsx("p", {
|
|
2482
|
-
id: hintId,
|
|
2483
|
-
className: "ty-listbox-select__hint",
|
|
2484
|
-
children: hint
|
|
2485
|
-
}) : null,
|
|
2486
|
-
/* @__PURE__ */ jsxs(Button, {
|
|
2487
|
-
className: "ty-listbox-select__trigger",
|
|
2488
|
-
"aria-describedby": wiring.describedBy,
|
|
2489
|
-
children: [/* @__PURE__ */ jsx(SelectValue, { className: "ty-listbox-select__value" }), /* @__PURE__ */ jsx(ChevronDown, {
|
|
2490
|
-
className: "ty-icon ty-listbox-select__chevron",
|
|
2491
|
-
"aria-hidden": "true",
|
|
2492
|
-
focusable: "false"
|
|
2493
|
-
})]
|
|
3090
|
+
/* @__PURE__ */ jsx("span", {
|
|
3091
|
+
className: "ty-notice__icon",
|
|
3092
|
+
"aria-hidden": "true",
|
|
3093
|
+
children: icon ?? /* @__PURE__ */ jsx(Icon, {})
|
|
2494
3094
|
}),
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
3095
|
+
/* @__PURE__ */ jsxs("div", {
|
|
3096
|
+
className: "ty-notice__body",
|
|
3097
|
+
children: [
|
|
3098
|
+
title ? /* @__PURE__ */ jsxs(TitleTag, {
|
|
3099
|
+
className: "ty-notice__title",
|
|
3100
|
+
children: [/* @__PURE__ */ jsxs("span", {
|
|
3101
|
+
className: "ty-visually-hidden",
|
|
3102
|
+
children: [messages.notice.toneWord[tone], " "]
|
|
3103
|
+
}), title]
|
|
3104
|
+
}) : null,
|
|
3105
|
+
/* @__PURE__ */ jsxs("div", {
|
|
3106
|
+
className: "ty-notice__message",
|
|
3107
|
+
children: [title ? null : /* @__PURE__ */ jsxs("span", {
|
|
3108
|
+
className: "ty-visually-hidden",
|
|
3109
|
+
children: [messages.notice.toneWord[tone], " "]
|
|
3110
|
+
}), children]
|
|
3111
|
+
}),
|
|
3112
|
+
actions ? /* @__PURE__ */ jsx("div", {
|
|
3113
|
+
className: "ty-notice__actions",
|
|
3114
|
+
children: actions
|
|
3115
|
+
}) : null
|
|
3116
|
+
]
|
|
3117
|
+
}),
|
|
3118
|
+
dismissible ? /* @__PURE__ */ jsx(Button$1, {
|
|
3119
|
+
className: "ty-notice__dismiss",
|
|
3120
|
+
variant: "quiet",
|
|
3121
|
+
size: "compact",
|
|
3122
|
+
iconOnly: true,
|
|
3123
|
+
accessibleLabel: messages.dismiss,
|
|
3124
|
+
leadingIcon: /* @__PURE__ */ jsx(X, {}),
|
|
3125
|
+
onPress: dismiss
|
|
3126
|
+
}) : null
|
|
2511
3127
|
]
|
|
2512
3128
|
});
|
|
2513
3129
|
}
|
|
@@ -4598,6 +5214,59 @@ function ToastItem({ toast, onDismiss }) {
|
|
|
4598
5214
|
});
|
|
4599
5215
|
}
|
|
4600
5216
|
//#endregion
|
|
5217
|
+
//#region src/components/tooltip/Tooltip.tsx
|
|
5218
|
+
/** Warm-up (and cool-down) of the shared tooltip timing, in ms. */
|
|
5219
|
+
const WARM_UP_MS = 300;
|
|
5220
|
+
/**
|
|
5221
|
+
* Short, non-interactive hint for a control, on hover or keyboard focus
|
|
5222
|
+
* (spec: wave-5-general/tooltip.md).
|
|
5223
|
+
*/
|
|
5224
|
+
function Tooltip$1(props) {
|
|
5225
|
+
const { content, children, placement = "top", showArrow = true, delay = "default", disabled = false, open, defaultOpen, onOpenChange, role = "description", className } = props;
|
|
5226
|
+
devWarning(!isValidElement(children), "Tooltip: `children` must be one focusable element.");
|
|
5227
|
+
const labelId = useId();
|
|
5228
|
+
const asLabel = role === "label";
|
|
5229
|
+
const child = children;
|
|
5230
|
+
const trigger = asLabel && isValidElement(child) ? cloneElement(child, {
|
|
5231
|
+
"aria-labelledby": labelId,
|
|
5232
|
+
...child.props["aria-describedby"] === void 0 ? { "aria-describedby": void 0 } : {}
|
|
5233
|
+
}) : children;
|
|
5234
|
+
return /* @__PURE__ */ jsxs(TooltipTrigger, {
|
|
5235
|
+
delay: delay === "immediate" ? 0 : WARM_UP_MS,
|
|
5236
|
+
closeDelay: delay === "immediate" ? 0 : WARM_UP_MS,
|
|
5237
|
+
isDisabled: disabled,
|
|
5238
|
+
...open !== void 0 ? { isOpen: open } : {},
|
|
5239
|
+
...defaultOpen !== void 0 ? { defaultOpen } : {},
|
|
5240
|
+
onOpenChange,
|
|
5241
|
+
children: [
|
|
5242
|
+
trigger,
|
|
5243
|
+
asLabel ? /* @__PURE__ */ jsx(VisuallyHidden, {
|
|
5244
|
+
id: labelId,
|
|
5245
|
+
children: content
|
|
5246
|
+
}) : null,
|
|
5247
|
+
/* @__PURE__ */ jsxs(Tooltip, {
|
|
5248
|
+
className: cx("ty-tooltip", className),
|
|
5249
|
+
placement,
|
|
5250
|
+
offset: showArrow ? 8 : 6,
|
|
5251
|
+
containerPadding: 12,
|
|
5252
|
+
children: [showArrow ? /* @__PURE__ */ jsx(OverlayArrow, {
|
|
5253
|
+
className: "ty-tooltip__arrow",
|
|
5254
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
5255
|
+
width: 10,
|
|
5256
|
+
height: 6,
|
|
5257
|
+
viewBox: "0 0 10 6",
|
|
5258
|
+
"aria-hidden": "true",
|
|
5259
|
+
children: /* @__PURE__ */ jsx("path", { d: "M0 0 L5 6 L10 0" })
|
|
5260
|
+
})
|
|
5261
|
+
}) : null, /* @__PURE__ */ jsx("span", {
|
|
5262
|
+
className: "ty-tooltip__content",
|
|
5263
|
+
children: content
|
|
5264
|
+
})]
|
|
5265
|
+
})
|
|
5266
|
+
]
|
|
5267
|
+
});
|
|
5268
|
+
}
|
|
5269
|
+
//#endregion
|
|
4601
5270
|
//#region src/components/theme-switcher/ThemeSwitcher.tsx
|
|
4602
5271
|
const flip = (m) => m === "dark" ? "light" : "dark";
|
|
4603
5272
|
function Glyph({ of, active }) {
|
|
@@ -6411,145 +7080,6 @@ function CategoryLabel({ code, name, marker, size = "medium", className }) {
|
|
|
6411
7080
|
});
|
|
6412
7081
|
}
|
|
6413
7082
|
//#endregion
|
|
6414
|
-
//#region src/internal/forms-b/parts.tsx
|
|
6415
|
-
/** Space-separated id list without empty entries (or undefined). */
|
|
6416
|
-
const joinIds = (...ids) => ids.filter(Boolean).join(" ") || void 0;
|
|
6417
|
-
/** True below 640 px, where floating pickers become a bottom tray. */
|
|
6418
|
-
function usePhoneWidth() {
|
|
6419
|
-
return useMediaQuery("(max-width: 639.98px)");
|
|
6420
|
-
}
|
|
6421
|
-
/** One text line of a field: label (above), hint (below the label) or error (below the control). */
|
|
6422
|
-
function FieldLine({ kind, id, htmlFor, children }) {
|
|
6423
|
-
if (kind === "label") return htmlFor ? /* @__PURE__ */ jsx("label", {
|
|
6424
|
-
className: "ty-fb-line",
|
|
6425
|
-
"data-line": "label",
|
|
6426
|
-
id,
|
|
6427
|
-
htmlFor,
|
|
6428
|
-
children
|
|
6429
|
-
}) : /* @__PURE__ */ jsx("span", {
|
|
6430
|
-
className: "ty-fb-line",
|
|
6431
|
-
"data-line": "label",
|
|
6432
|
-
id,
|
|
6433
|
-
children
|
|
6434
|
-
});
|
|
6435
|
-
return /* @__PURE__ */ jsxs("p", {
|
|
6436
|
-
className: "ty-fb-line",
|
|
6437
|
-
"data-line": kind,
|
|
6438
|
-
id,
|
|
6439
|
-
children: [kind === "error" ? /* @__PURE__ */ jsx(CircleAlert, {
|
|
6440
|
-
className: "ty-icon",
|
|
6441
|
-
"aria-hidden": "true",
|
|
6442
|
-
focusable: "false"
|
|
6443
|
-
}) : null, /* @__PURE__ */ jsx("span", { children })]
|
|
6444
|
-
});
|
|
6445
|
-
}
|
|
6446
|
-
/** Non-modal floating dialog; below 640 px the same popover is laid out as a bottom tray. */
|
|
6447
|
-
function FloatSurface(props) {
|
|
6448
|
-
const phone = usePhoneWidth();
|
|
6449
|
-
return /* @__PURE__ */ jsx(Popover, {
|
|
6450
|
-
className: cx("ty-fb-float", props.className),
|
|
6451
|
-
placement: props.side ?? "bottom",
|
|
6452
|
-
offset: 6,
|
|
6453
|
-
"data-presentation": phone ? "tray" : "popover",
|
|
6454
|
-
children: /* @__PURE__ */ jsx(Dialog, {
|
|
6455
|
-
className: "ty-fb-float__dialog",
|
|
6456
|
-
"aria-label": props.labelledBy ? void 0 : props.label,
|
|
6457
|
-
"aria-labelledby": props.labelledBy,
|
|
6458
|
-
children: props.children
|
|
6459
|
-
})
|
|
6460
|
-
});
|
|
6461
|
-
}
|
|
6462
|
-
/** Previous / heading / next row; the heading is a polite live region. */
|
|
6463
|
-
function StepperHeader(props) {
|
|
6464
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
6465
|
-
className: "ty-fb-stepper",
|
|
6466
|
-
children: [
|
|
6467
|
-
/* @__PURE__ */ jsx(Button, {
|
|
6468
|
-
className: "ty-fb-nav",
|
|
6469
|
-
"aria-label": props.previousLabel,
|
|
6470
|
-
isDisabled: props.previousDisabled,
|
|
6471
|
-
onPress: props.onPrevious,
|
|
6472
|
-
children: /* @__PURE__ */ jsx(ChevronLeft, {
|
|
6473
|
-
className: "ty-icon ty-mirror-rtl",
|
|
6474
|
-
"aria-hidden": "true",
|
|
6475
|
-
focusable: "false"
|
|
6476
|
-
})
|
|
6477
|
-
}),
|
|
6478
|
-
/* @__PURE__ */ jsx("span", {
|
|
6479
|
-
className: "ty-fb-stepper__heading",
|
|
6480
|
-
id: props.headingId,
|
|
6481
|
-
"aria-live": "polite",
|
|
6482
|
-
children: props.heading
|
|
6483
|
-
}),
|
|
6484
|
-
/* @__PURE__ */ jsx(Button, {
|
|
6485
|
-
className: "ty-fb-nav",
|
|
6486
|
-
"aria-label": props.nextLabel,
|
|
6487
|
-
isDisabled: props.nextDisabled,
|
|
6488
|
-
onPress: props.onNext,
|
|
6489
|
-
children: /* @__PURE__ */ jsx(ChevronRight, {
|
|
6490
|
-
className: "ty-icon ty-mirror-rtl",
|
|
6491
|
-
"aria-hidden": "true",
|
|
6492
|
-
focusable: "false"
|
|
6493
|
-
})
|
|
6494
|
-
})
|
|
6495
|
-
]
|
|
6496
|
-
});
|
|
6497
|
-
}
|
|
6498
|
-
/** Localised month names, January first. */
|
|
6499
|
-
function monthNames(locale, width = "long") {
|
|
6500
|
-
const fmt = new Intl.DateTimeFormat(locale, {
|
|
6501
|
-
month: width,
|
|
6502
|
-
timeZone: "UTC"
|
|
6503
|
-
});
|
|
6504
|
-
return Array.from({ length: 12 }, (_, m) => fmt.format(Date.UTC(2020, m, 15)));
|
|
6505
|
-
}
|
|
6506
|
-
/** "YYYY-MM" key of a year and a zero-based month. */
|
|
6507
|
-
const monthKey = (year, monthIndex) => `${year}-${String(monthIndex + 1).padStart(2, "0")}`;
|
|
6508
|
-
/**
|
|
6509
|
-
* Twelve months of one year as a grid list (APG grid-like navigation);
|
|
6510
|
-
* unavailable months stay visible but disabled. PageUp/PageDown step years.
|
|
6511
|
-
*/
|
|
6512
|
-
function MonthGrid(props) {
|
|
6513
|
-
const names = monthNames(props.locale, "short");
|
|
6514
|
-
const longNames = monthNames(props.locale, "long");
|
|
6515
|
-
const cells = names.map((short, m) => ({
|
|
6516
|
-
key: monthKey(props.year, m),
|
|
6517
|
-
short,
|
|
6518
|
-
long: longNames[m]
|
|
6519
|
-
}));
|
|
6520
|
-
const disabled = cells.filter((c) => !props.isAvailable(c.key)).map((c) => c.key);
|
|
6521
|
-
const pick = (keys) => {
|
|
6522
|
-
if (keys === "all") return;
|
|
6523
|
-
const [first] = [...keys];
|
|
6524
|
-
if (first != null) props.onChoose(String(first));
|
|
6525
|
-
};
|
|
6526
|
-
return /* @__PURE__ */ jsx("div", {
|
|
6527
|
-
className: "ty-fb-months",
|
|
6528
|
-
onKeyDown: (e) => {
|
|
6529
|
-
if (!props.onYearStep || e.key !== "PageUp" && e.key !== "PageDown") return;
|
|
6530
|
-
e.preventDefault();
|
|
6531
|
-
props.onYearStep(e.key === "PageUp" ? -1 : 1);
|
|
6532
|
-
},
|
|
6533
|
-
children: /* @__PURE__ */ jsx(GridList, {
|
|
6534
|
-
"aria-label": props.label,
|
|
6535
|
-
layout: "grid",
|
|
6536
|
-
className: "ty-fb-months__grid",
|
|
6537
|
-
items: cells,
|
|
6538
|
-
selectionMode: "single",
|
|
6539
|
-
disallowEmptySelection: true,
|
|
6540
|
-
selectedKeys: props.selected ? [props.selected] : [],
|
|
6541
|
-
disabledKeys: disabled,
|
|
6542
|
-
onSelectionChange: pick,
|
|
6543
|
-
children: (cell) => /* @__PURE__ */ jsx(GridListItem, {
|
|
6544
|
-
id: cell.key,
|
|
6545
|
-
textValue: `${cell.long} ${props.year}`,
|
|
6546
|
-
className: "ty-fb-months__cell",
|
|
6547
|
-
children: cell.short
|
|
6548
|
-
})
|
|
6549
|
-
})
|
|
6550
|
-
});
|
|
6551
|
-
}
|
|
6552
|
-
//#endregion
|
|
6553
7083
|
//#region src/components/currency-field/CurrencyField.tsx
|
|
6554
7084
|
function separatorsOf(locale) {
|
|
6555
7085
|
const parts = new Intl.NumberFormat(locale).formatToParts(1234567.5);
|
|
@@ -20596,6 +21126,6 @@ function StatStrip({ items, label, locale, className }) {
|
|
|
20596
21126
|
});
|
|
20597
21127
|
}
|
|
20598
21128
|
//#endregion
|
|
20599
|
-
export { eventTypeFromContract as $, DRAWER_DRAG_DISTANCE as $a, themePaletteGroups as $i, registerRegionTheme as $n, ListRow as $r, LegalDocumentFrame as $t, CascadeGrid as A,
|
|
21129
|
+
export { eventTypeFromContract as $, DRAWER_DRAG_DISTANCE as $a, themePaletteGroups as $i, registerRegionTheme as $n, ListRow as $r, LegalDocumentFrame as $t, CascadeGrid as A, TabPanel$1 as Aa, TimeField as Ai, register$1 as An, Button$1 as Ao, InsightCard as Ar, animateChange as At, EdgeSwipeBack as B, SectionHeading as Ba, FormContainer as Bi, validateCountryProfile as Bn, useMediaQuery as Bo, recoveryCodesFile as Br, duration as Bt, FeatureShowcaseMosaic as C, Code$1 as Ca, filterByPermission as Ci, brand as Cn, SkipLink as Co, TweenedNumber as Cr, RoutingProvider as Ct, Kicker as D, TextArea$1 as Da, orderTiles as Di, brazilProfile as Dn, ActorChip as Do, RecordCard as Dr, useRouting as Dt, RevealNumber as E, TextField$1 as Ea, AppLauncherGrid as Ei, AmbientBackdrop as En, Skeleton as Eo, RecordActions as Er, useRouteHost as Et, SafeAreaInset as F, StatusPill as Fa, LocalePicker as Fi, formatProfileMoney as Fn, ThemeScope as Fo, ContactOfficeCard as Fr, hapticsSupported as Ft, SwipeRow as G, pageSlots as Ga, DateField as Gi, getFlagUrl as Gn, shortenIdentifier as Gr, resolveTransition as Gt, PULL_THRESHOLD as H, ProgressBar$1 as Ha, FramedForm as Hi, createRegionThemeRegistry as Hn, HistoryList as Hr, getPreset as Ht, SafeAreaScreen as I, builtInStatusMap as Ia, DEFAULT_IMAGE_TYPES as Ii, getCountryProfile as In, ThemeProvider as Io, ContactSection as Ir, playHaptic as It, HttpResponseError as J, ModalDialog as Ja, CategoryTabs as Ji, getLabelPoint as Jn, NotificationCenterProvider as Jr, plateGeometry as Jt, useSwipeActionPresets as K, PageHeader as Ka, CurrencyField as Ki, getIdentityColours as Kn, ProfileAvatar as Kr, useDecorativeMotion as Kt, SafeAreaSpacer as L, Spinner as La, ImagePicker as Li, listCountryProfiles as Ln, themeInitScript as Lo, AgentOutputCard as Lr, useHaptics as Lt, GLASS_CHECK_MARKER as M, Switch$1 as Ma, TagField as Mi, labelPointOf as Mn, requestHaptic as Mo, DeltaMark as Mr, useAnimatedChange as Mt, GlassCheckToggle as N, SwitchGroup as Na, SchemaRequestForm as Ni, flagEmoji as Nn, variants as No, deltaSentiment as Nr, HapticsPreference as Nt, Lead as O, Tag$1 as Oa, WheelPicker as Oi, register as On, ActionMenu as Oo, ProfileSummary as Or, useVisitKey as Ot, SafeAreaBottomBar as P, Surface as Pa, MonthField as Pi, formatProfileAddress as Pn, VisuallyHidden as Po, ContactChannelCard as Pr, cancelHaptic as Pt, createRunEventConsumer as Q, ErrorState as Qa, fuzzyScore as Qi, listSubdivisions as Qn, describeCount as Qr, RouteProgress as Qt, EDGE_COMMIT as R, Separator$1 as Ra, FieldGrid as Ri, registerCountryProfile as Rn, useTheme as Ro, MarkdownView as Rr, DECORATIVE_MOTION_DEFAULT as Rt, FeatureShowcaseCard as S, useToast as Sa, buildLauncherTiles as Si, BrandMark as Sn, useAppFrame as So, TWEEN_BASE_MS as Sr, PlainAnchor as St, ShowcaseBackdrop as T, Text$1 as Ta, filterDestinations as Ti, BrandPanel as Tn, PageLoadingState as To, StatTile as Tr, useRouteAnchor as Tt, PullToRefresh as U, Popover$1 as Ua, InlineRow as Ui, defaultRegionThemeRegistry as Un, COPY_CONFIRMATION_MS as Ur, motionPresets as Ut, PULL_MAX as V, ProofBadge as Va, FormSection as Vi, RegionThemeProvider as Vn, useReducedMotion as Vo, GroupedDisclosureList as Vr, ease as Vt, usePullToRefresh as W, Pagination as Wa, FormActions as Wi, getCountryView as Wn, CopyIdentifier as Wr, prefersReducedMotion as Wt, ProblemError as X, Heading$3 as Xa, ThemePaletteTrigger as Xi, getSubdivision as Xn, useNotificationCenter as Xr, SkeletonBlock as Xt, KNOWN_RUN_EVENT_TYPES as Y, InlineNotice as Ya, ThemePalette as Yi, getMacroRegions as Yn, relativeNoticeTime as Yr, UpgradeGate as Yt, codeOf as Z, Subheading as Za, ThemeSwatch as Zi, isKnownSubdivision as Zn, CountBadge as Zr, skeletonFill as Zt, FeatureTileGrid as _, StateSwitch as _a, CommandPalette as _i, defaultLoaderPreset as _n, useFieldControl as _o, phaseOf as _r, createFormatter as _t, shares as a, ChoiceCard as aa, ToolbarTrigger as ai, ThirdPartyMarkGlyph as an, Checkbox$1 as ao, RegionMap as ar, DEFAULT_PLACEHOLDER as at, RuledGridCell as b, ToastProvider as ba, buildFloatingActions as bi, useLoaderPreset as bn, AppFrame as bo, validateReport as br, useLocale$1 as bt, EVIDENCE_WIDTH as c, FilterTileGrid as ca, SettingsDialog as ci, defaultProviderRules as cn, ListboxSelect as co, isToneName as cr, formatMoney as ct, RailContextButton as d, SearchBar as da, LongPressMenu as di, EnvironmentBanner as dn, FieldHint as do, toneNames as dr, listCountries as dt, FlagSetPicker as ea, SummaryRow as ei, slugForHeading as en, DRAWER_DRAG_VELOCITY as eo, unregisterRegionTheme as er, isApiError as et, RailNavItem as f, FilterChips as fa, FloatingActionButton as fi, ConsentBanner as fn, FieldLabel as fo, LiveReportView as fr, registerCountry as ft, FeatureTile as g, OneTimeCodeField as ga, CompactConfirm as gi, createLoaderPresets as gn, useField as go, mergeReport as gr, I18nAdapterProvider as gt, relativePhrase as h, evaluatePassword as ha, useConfirm as hi, LoaderPresetProvider as hn, useAppearedAfterMount as ho, isTerminal as hr, useEntityListLoader as ht, PhaseBar as i, ChoiceTile as ia, WizardPage as ii, ProviderMark as in, EmptyState as io, validateRegionThemeEntry as ir, statusOf as it, entranceSchedule as j, Tabs$1 as ja, formatTimeOfDay as ji, deriveGeometry as jn, buttonVariants as jo, DeltaIndicator as jr, canAnimateChanges as jt, ShowcaseHeading as k, TagList$1 as ka, WheelPickerGroup as ki, brazilRegionTheme as kn, clampToViewport as ko, MetricTile as kr, CHANGE_STYLE_ATTRIBUTE as kt, EvidencePanel as l, FilterTileGroupHeading as la, SectionedModal as li, resolveProvider as ln, Field as lo, resolveTint as lr, formatPercent as lt, ActivityFeed as m, defaultPasswordPolicy as ma, ConfirmProvider as mi, BrandLoader as mn, Fieldset as mo, initialRunView as mr, useFormatters as mt, StageStrip as n, chipIdFromText as na, ListPanelRow as ni, FederatedSignIn as nn, DateRangeField as no, RegionThemeError as nr, nodeStatusFromContract as nt, ACTION_BAR_SHORTCUT as o, ChoiceCardGroup as oa, StepList as oi, ThirdPartyMarkSlot as on, CheckboxGroup$1 as oo, useRegionMapState as or, formatAddress as ot, RailNavSection as p, PasswordStrength as pa, DetailsPopover as pi, DEFAULT_CONSENT_KEY as pn, FieldStack as po, useRunEventStream as pr, toneForStatus as pt, ApiError as q, NativeSelect as qa, CategoryLabel as qi, getIdentityTone as qn, NotificationCenter as qr, ProductMark as qt, ResizableSplit as r, ChoiceGrid as ra, SectionPanel as ri, MarkRegistryProvider as rn, DataTable as ro, SUBDIVISION_KINDS as rr, runStatusFromContract as rt, FloatingActionBar as s, FilterTile as sa, PreferenceGroup as si, createMarkRegistry as sn, Calendar$1 as so, checkToneUsage as sr, formatDateTime as st, StatStrip as t, ChipGroup as ta, ListPanel as ti, HttpErrorPage as tn, Drawer as to, useRegionThemeRegistry as tr, isKnownRunEvent as tt, AttentionList as u, FilterField as ua, PageDots as ui, stripRoutingPrefix as un, FieldError$1 as uo, tintStyle as ur, getCountry as ut, HighlightStat as v, ThemeSwitcher as va, AppNavigation as vi, loaderToneColour as vn, Breadcrumbs as vo, reduceRunEvent as vr, createI18nValue as vt, AccentBand as w, Strong as wa, NavigationFlyout as wi, AuthFrame as wn, focusSkipTarget as wo, TickerCard as wr, useCurrentPath as wt, RuledGridRow as x, toastDurations as xa, buildFlyoutDestinations as xi, BrandLogo as xn, FrameNavLabel as xo, Chart as xr, useTranslations as xt, RuledGrid as y, Tooltip$1 as ya, activeEntryId as yi, loaderToneNames as yn, Link$1 as yo, ReportView as yr, useFormatter as yt, EDGE_ZONE as z, SegmentedControl as za, FieldGridItem as zi, unregisterCountryProfile as zn, breakpoints as zo, RecoveryCodeList as zr, DecorativeMotion as zt };
|
|
20600
21130
|
|
|
20601
|
-
//# sourceMappingURL=src-
|
|
21131
|
+
//# sourceMappingURL=src-uCyIE-Te.js.map
|