npm - @planningcenter/tapestry - Versions diffs - 3.2.2 → 3.2.3-qa-839.0 - Mend

@planningcenter/tapestry 3.2.2 → 3.2.3-qa-839.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.

Files changed (101) hide show

package/dist/components/date-picker/DatePicker.js CHANGED Viewed

@@ -1,11 +1,10 @@
 import { CalendarDate as $35ea8db9cb2ccb90$export$99faa760c7908e4f } from './../../ext/@internationalized/date/dist/CalendarDate.js';
 import { today as $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3, getLocalTimeZone as $14e0f24ef4ac5c92$export$aa8b41735afcabd2 } from './../../ext/@internationalized/date/dist/queries.js';
 import { parseDate as $fae977aafc393c5c$export$6b862160d295c8e } from './../../ext/@internationalized/date/dist/string.js';
-import { FocusScope as $9bf71ea28793e738$export$20e40289641fbbb6 } from './../../ext/@react-aria/focus/dist/FocusScope.js';
 import Icon from '../../utilities/Icon.js';
 import classNames from 'classnames';
-import React__default, { useState, useRef, useEffect, useLayoutEffect } from 'react';
-import { DatePicker as DatePicker$1, Label, Group, DateInput, DateSegment, Button, Popover, Calendar, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Text } from 'react-aria-components';
+import React__default, { useState, useContext } from 'react';
+import { DatePicker as DatePicker$1, Label, Group, DateInput, DateSegment, Button, Popover, Calendar, Text, CalendarStateContext, Heading, ListBox, ListBoxItem, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
 const _today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
 const MONTHS = Array.from({ length: 12 }, (_, i) => i);
@@ -14,23 +13,6 @@ const shortMonthFormatter = new Intl.DateTimeFormat(undefined, {
     month: "short",
 });
 const longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: "long" });
-function gridKeyDownHandler(cols, maxIndex, index, setIndex) {
-    return (e) => {
-        let next = index;
-        if (e.key === "ArrowLeft")
-            next = Math.max(0, index - 1);
-        else if (e.key === "ArrowRight")
-            next = Math.min(maxIndex, index + 1);
-        else if (e.key === "ArrowUp")
-            next = Math.max(0, index - cols);
-        else if (e.key === "ArrowDown")
-            next = Math.min(maxIndex, index + cols);
-        else
-            return;
-        e.preventDefault();
-        setIndex(next);
-    };
-}
 function toCalendarDate(input) {
     if (input === null)
         return null;
@@ -41,77 +23,83 @@ function toCalendarDate(input) {
     }
     return $fae977aafc393c5c$export$6b862160d295c8e(input);
 }
-const DATE_PICKER_OVERLAY_MAP = {
-    month: {
-        ariaLabel: "Months",
-        className: "tds-date-picker-overlay--month",
-    },
-    year: { ariaLabel: "Years", className: "tds-date-picker-overlay--year" },
-};
-function DatePickerOverlay({ children, gridRef, onClose, onKeyDown, title, variant, }) {
-    return (React__default.createElement($9bf71ea28793e738$export$20e40289641fbbb6, { contain: true, restoreFocus: true },
-        React__default.createElement("div", { "aria-label": `Select ${variant}`, "aria-modal": "true", className: classNames("tds-date-picker-overlay", DATE_PICKER_OVERLAY_MAP[variant].className), role: "dialog" },
-            React__default.createElement("div", { className: "tds-date-picker-overlay-header" },
-                React__default.createElement("span", { className: "tds-date-picker-calendar-title" }, title),
-                React__default.createElement(Button, { "aria-label": `Close ${variant} picker`, className: "tds-date-picker-overlay-close", onPress: onClose }, "\u00D7")),
-            React__default.createElement("div", { "aria-label": DATE_PICKER_OVERLAY_MAP[variant].ariaLabel, className: "tds-date-picker-overlay-grid", onKeyDown: onKeyDown, ref: gridRef, role: "listbox", tabIndex: -1 }, children))));
+function DatePickerOverlay({ children, variant, }) {
+    return (React__default.createElement("div", { "aria-label": `Select ${variant}`, "aria-modal": "true", className: `tds-date-picker-overlay tds-date-picker-overlay--${variant}`, role: "dialog" }, children));
 }
-function DatePicker({ className, description, disabled, firstDayOfWeek, hideLabel, invalid, isDateUnavailable, label, max, min, onChange, readOnly, required, size = "md", value, ...restProps }) {
-    const convertedValue = toCalendarDate(value);
-    const convertedMin = toCalendarDate(min) ?? undefined;
-    const convertedMax = toCalendarDate(max) ?? undefined;
-    const combinedClassName = classNames("tds-date-picker", { "tds-date-picker--lg": size === "lg" }, className);
-    const [focusedDate, setFocusedDate] = useState(() => {
-        return (toCalendarDate(value) ??
-            $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()));
-    });
-    const [activeOverlay, setActiveOverlay] = useState(null);
-    const overlayTitle = `${longMonthFormatter.format(new Date(2000, focusedDate.month - 1, 1))} ${focusedDate.year}`;
-    const [focusedMonthIndex, setFocusedMonthIndex] = useState(() => focusedDate.month - 1);
-    const [focusedYearIndex, setFocusedYearIndex] = useState(() => Math.max(0, YEARS.indexOf(focusedDate.year)));
-    const calendarRef = useRef(null);
-    const monthGridRef = useRef(null);
-    const yearGridRef = useRef(null);
-    // Close on Escape. FocusScope handles trapping and focus restoration.
-    useEffect(() => {
-        if (!activeOverlay)
+function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
+    // Read and drive Calendar's focused date through its state context. This
+    // lets react-aria-components own the "open to selected month" behavior:
+    // when the popover opens, Calendar mounts and auto-focuses the DatePicker's
+    // current value (whether typed into the input segments or set via `value`).
+    const state = useContext(CalendarStateContext);
+    const focusedDate = state.focusedDate;
+    const today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
+    function handleOverlaySelectionChange(keys, onSelect) {
+        if (keys === "all")
             return;
-        function handleKeyDown(e) {
-            if (e.key === "Escape")
-                setActiveOverlay(null);
-        }
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [activeOverlay]);
+        const [first] = Array.from(keys);
+        if (first !== undefined)
+            onSelect(Number(first));
+    }
     function handleMonthSelect(monthIndex) {
-        setFocusedDate(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(focusedDate.year, monthIndex + 1, 1));
+        state.setFocusedDate(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(focusedDate.year, monthIndex + 1, 1));
         setActiveOverlay(null);
     }
-    useLayoutEffect(() => {
-        if (activeOverlay !== "month")
-            return;
-        const buttons = monthGridRef.current?.querySelectorAll("button");
-        buttons?.[focusedMonthIndex]?.focus();
-    }, [focusedMonthIndex, activeOverlay]);
     function handleYearSelect(year) {
-        setFocusedDate(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(year, focusedDate.month, 1));
+        state.setFocusedDate(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(year, focusedDate.month, 1));
         setActiveOverlay(null);
     }
-    useLayoutEffect(() => {
-        if (activeOverlay !== "year")
-            return;
-        const cell = yearGridRef.current?.querySelectorAll("button")[focusedYearIndex];
-        cell?.scrollIntoView({ block: "nearest" });
-        cell?.focus();
-    }, [focusedYearIndex, activeOverlay]);
-    const handleMonthKeyDown = gridKeyDownHandler(3, 11, focusedMonthIndex, setFocusedMonthIndex);
-    const handleYearKeyDown = gridKeyDownHandler(4, YEARS.length - 1, focusedYearIndex, setFocusedYearIndex);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("header", { className: "tds-date-picker-calendar-header" },
+            React__default.createElement(Heading, { className: "tds-date-picker-calendar-title tds-date-picker-calendar-title--visually-hidden" }),
+            React__default.createElement("div", { className: "tds-date-picker-calendar-heading" },
+                React__default.createElement(Button, { "aria-expanded": activeOverlay === "month", "aria-haspopup": "dialog", className: "tds-date-picker-calendar-overlay-trigger", onPress: () => setActiveOverlay(activeOverlay === "month" ? null : "month"), slot: null }, longMonthFormatter.format(new Date(2000, focusedDate.month - 1, 1))),
+                React__default.createElement(Button, { "aria-expanded": activeOverlay === "year", "aria-haspopup": "dialog", className: "tds-date-picker-calendar-overlay-trigger", onPress: () => setActiveOverlay(activeOverlay === "year" ? null : "year"), slot: null }, focusedDate.year)),
+            activeOverlay ? (React__default.createElement(Button, { "aria-label": `Close ${activeOverlay} picker`, className: "tds-date-picker-calendar-nav", onPress: () => setActiveOverlay(null), slot: null },
+                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#x" }))) : (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Button, { "aria-label": "Go to today", className: "tds-date-picker-calendar-nav", style: {
+                        visibility: focusedDate.month === today.month &&
+                            focusedDate.year === today.year
+                            ? "hidden"
+                            : undefined,
+                    }, onPress: () => {
+                        state.setFocusedDate(today);
+                        state.setFocused(true);
+                    }, slot: null },
+                    React__default.createElement("svg", { "aria-hidden": true, fill: "currentColor", viewBox: "0 0 16 16", height: "14", width: "16", xmlns: "http://www.w3.org/2000/svg" },
+                        React__default.createElement("path", { d: "M13.444 14.222H2.556V5.667H13.444V14.222ZM13.444 1.778H12.667V0.222H11.111V1.778H4.889V0.222H3.333V1.778H2.556C2.35212 1.778 2.15025 1.81827 1.96199 1.8965C1.77372 1.97473 1.60275 2.08938 1.45892 2.23387C1.31508 2.37836 1.2012 2.54984 1.12382 2.73846C1.04644 2.92708 1.00708 3.12913 1.008 3.333L1 14.222C0.999869 14.4264 1.04003 14.6288 1.11818 14.8176C1.19633 15.0065 1.31093 15.178 1.45545 15.3226C1.59996 15.4671 1.77155 15.5817 1.96039 15.6598C2.14923 15.738 2.35163 15.7781 2.556 15.778H13.444C13.8564 15.7769 14.2515 15.6127 14.5431 15.3211C14.8347 15.0295 14.9989 14.6344 15 14.222V3.333C14.9987 2.92082 14.8343 2.52592 14.5427 2.23455C14.2512 1.94319 13.8562 1.77905 13.444 1.778Z" }),
+                        React__default.createElement("circle", { cx: "8", cy: "9.75", r: "2.25" }))),
+                React__default.createElement(Button, { "aria-label": "Previous month", className: "tds-date-picker-calendar-nav", slot: "previous" },
+                    React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#left-chevron" })),
+                React__default.createElement(Button, { "aria-label": "Next month", className: "tds-date-picker-calendar-nav", slot: "next" },
+                    React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#right-chevron" }))))),
+        React__default.createElement("div", { className: "tds-date-picker-calendar-body" },
+            activeOverlay === "month" && (React__default.createElement(DatePickerOverlay, { variant: "month" },
+                React__default.createElement(ListBox, { "aria-label": "Months",
+                    // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices
+                    autoFocus: true, className: "tds-date-picker-overlay-list", disallowEmptySelection: true, escapeKeyBehavior: "none", layout: "grid", onSelectionChange: (keys) => handleOverlaySelectionChange(keys, handleMonthSelect), selectedKeys: [String(focusedDate.month - 1)], selectionMode: "single" }, MONTHS.map((i) => {
+                    const date = new Date(2000, i, 1);
+                    const shortMonth = shortMonthFormatter.format(date);
+                    const longMonth = longMonthFormatter.format(date);
+                    return (React__default.createElement(ListBoxItem, { className: "tds-date-picker-overlay-cell", id: String(i), key: i, "aria-label": longMonth, textValue: longMonth }, shortMonth));
+                })))),
+            activeOverlay === "year" && (React__default.createElement(DatePickerOverlay, { variant: "year" },
+                React__default.createElement(ListBox, { "aria-label": "Years",
+                    // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices
+                    autoFocus: true, className: "tds-date-picker-overlay-list", disallowEmptySelection: true, escapeKeyBehavior: "none", layout: "grid", onSelectionChange: (keys) => handleOverlaySelectionChange(keys, handleYearSelect), selectedKeys: [String(focusedDate.year)], selectionMode: "single" }, YEARS.map((year) => (React__default.createElement(ListBoxItem, { className: "tds-date-picker-overlay-cell", id: String(year), key: year, textValue: String(year) }, year)))))),
+            React__default.createElement(CalendarGrid, { className: "tds-date-picker-calendar-grid" },
+                React__default.createElement(CalendarGridHeader, { className: "tds-date-picker-calendar-grid-header" }, (day) => (React__default.createElement(CalendarHeaderCell, { className: "tds-date-picker-calendar-header-cell" }, day))),
+                React__default.createElement(CalendarGridBody, { className: "tds-date-picker-calendar-grid-body" }, (date) => (React__default.createElement(CalendarCell, { className: "tds-date-picker-calendar-cell", date: date })))))));
+}
+function DatePicker({ className, description, disabled, firstDayOfWeek, hideLabel, invalid, isDateUnavailable, label, max, min, onChange, readOnly, required, size = "md", value, ...restProps }) {
+    const convertedValue = toCalendarDate(value);
+    const convertedMin = toCalendarDate(min) ?? undefined;
+    const convertedMax = toCalendarDate(max) ?? undefined;
+    const combinedClassName = classNames("tds-date-picker", { "tds-date-picker--lg": size === "lg" }, className);
+    const [activeOverlay, setActiveOverlay] = useState(null);
     return (React__default.createElement(DatePicker$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, isDateUnavailable: isDateUnavailable, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: convertedMax, minValue: convertedMin, onChange: onChange ?? undefined, onOpenChange: (isOpen) => {
-            if (!isOpen) {
+            if (!isOpen)
                 setActiveOverlay(null);
-                setFocusedDate(toCalendarDate(value) ??
-                    $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()));
-            }
         }, value: convertedValue },
         !hideLabel && React__default.createElement(Label, { className: "tds-date-picker-label" }, label),
         React__default.createElement(Group, { className: "tds-date-picker-field" },
@@ -121,47 +109,8 @@ function DatePicker({ className, description, disabled, firstDayOfWeek, hideLabe
             React__default.createElement(Button, { className: "tds-btn tds-btn--infield tds-date-picker-button" },
                 React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#calendar" }))),
         React__default.createElement(Popover, { className: "tds-date-picker-popover" },
-            activeOverlay === "month" && (React__default.createElement(DatePickerOverlay, { gridRef: monthGridRef, onClose: () => setActiveOverlay(null), onKeyDown: handleMonthKeyDown, title: overlayTitle, variant: "month" }, MONTHS.map((i) => {
-                const monthLabel = shortMonthFormatter.format(new Date(2000, i, 1));
-                return (React__default.createElement("button", { "aria-selected": focusedDate.month === i + 1, className: "tds-date-picker-overlay-cell", key: monthLabel, onClick: () => handleMonthSelect(i), role: "option", tabIndex: focusedMonthIndex === i ? 0 : -1, type: "button" }, monthLabel));
-            }))),
-            activeOverlay === "year" && (React__default.createElement(DatePickerOverlay, { gridRef: yearGridRef, onClose: () => setActiveOverlay(null), onKeyDown: handleYearKeyDown, title: overlayTitle, variant: "year" }, YEARS.map((year, i) => (React__default.createElement("button", { "aria-selected": focusedDate.year === year, className: "tds-date-picker-overlay-cell", key: year, onClick: () => handleYearSelect(year), role: "option", tabIndex: focusedYearIndex === i ? 0 : -1, type: "button" }, year))))),
-            React__default.createElement(Calendar, { className: "tds-date-picker-calendar", firstDayOfWeek: firstDayOfWeek, focusedValue: focusedDate, onFocusChange: (date) => setFocusedDate(date), ref: calendarRef },
-                React__default.createElement("header", { className: "tds-date-picker-calendar-header" },
-                    React__default.createElement(Heading, { className: "tds-date-picker-calendar-title tds-date-picker-calendar-title--visually-hidden" }),
-                    React__default.createElement("div", { className: "tds-date-picker-calendar-heading" },
-                        React__default.createElement(Button, { "aria-expanded": activeOverlay === "month", "aria-haspopup": "dialog", className: "tds-date-picker-calendar-overlay-trigger", onPress: () => {
-                                setFocusedMonthIndex(focusedDate.month - 1);
-                                setActiveOverlay("month");
-                            }, slot: null }, longMonthFormatter.format(new Date(2000, focusedDate.month - 1, 1))),
-                        React__default.createElement(Button, { "aria-expanded": activeOverlay === "year", "aria-haspopup": "dialog", className: "tds-date-picker-calendar-overlay-trigger", onPress: () => {
-                                setFocusedYearIndex(Math.max(0, YEARS.indexOf(focusedDate.year)));
-                                setActiveOverlay("year");
-                            }, slot: null }, focusedDate.year)),
-                    React__default.createElement(Button, { "aria-label": "Go to today", className: "tds-date-picker-calendar-nav", style: {
-                            visibility: focusedDate.month === _today.month &&
-                                focusedDate.year === _today.year
-                                ? "hidden"
-                                : undefined,
-                        }, onPress: () => {
-                            const today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
-                            setFocusedDate(today);
-                            requestAnimationFrame(() => {
-                                calendarRef.current
-                                    ?.querySelector("[data-today]")
-                                    ?.focus();
-                            });
-                        }, slot: null },
-                        React__default.createElement("svg", { "aria-hidden": true, fill: "currentColor", viewBox: "0 0 16 16", height: "14", width: "16", xmlns: "http://www.w3.org/2000/svg" },
-                            React__default.createElement("path", { d: "M13.444 14.222H2.556V5.667H13.444V14.222ZM13.444 1.778H12.667V0.222H11.111V1.778H4.889V0.222H3.333V1.778H2.556C2.35212 1.778 2.15025 1.81827 1.96199 1.8965C1.77372 1.97473 1.60275 2.08938 1.45892 2.23387C1.31508 2.37836 1.2012 2.54984 1.12382 2.73846C1.04644 2.92708 1.00708 3.12913 1.008 3.333L1 14.222C0.999869 14.4264 1.04003 14.6288 1.11818 14.8176C1.19633 15.0065 1.31093 15.178 1.45545 15.3226C1.59996 15.4671 1.77155 15.5817 1.96039 15.6598C2.14923 15.738 2.35163 15.7781 2.556 15.778H13.444C13.8564 15.7769 14.2515 15.6127 14.5431 15.3211C14.8347 15.0295 14.9989 14.6344 15 14.222V3.333C14.9987 2.92082 14.8343 2.52592 14.5427 2.23455C14.2512 1.94319 13.8562 1.77905 13.444 1.778Z" }),
-                            React__default.createElement("circle", { cx: "8", cy: "9.75", r: "2.25" }))),
-                    React__default.createElement(Button, { "aria-label": "Previous month", className: "tds-date-picker-calendar-nav", slot: "previous" },
-                        React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#left-chevron" })),
-                    React__default.createElement(Button, { "aria-label": "Next month", className: "tds-date-picker-calendar-nav", slot: "next" },
-                        React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#right-chevron" }))),
-                React__default.createElement(CalendarGrid, { className: "tds-date-picker-calendar-grid" },
-                    React__default.createElement(CalendarGridHeader, { className: "tds-date-picker-calendar-grid-header" }, (day) => (React__default.createElement(CalendarHeaderCell, { className: "tds-date-picker-calendar-header-cell" }, day))),
-                    React__default.createElement(CalendarGridBody, { className: "tds-date-picker-calendar-grid-body" }, (date) => (React__default.createElement(CalendarCell, { className: "tds-date-picker-calendar-cell", date: date })))))),
+            React__default.createElement(Calendar, { className: "tds-date-picker-calendar", firstDayOfWeek: firstDayOfWeek },
+                React__default.createElement(DatePickerCalendarBody, { activeOverlay: activeOverlay, setActiveOverlay: setActiveOverlay }))),
         description && (React__default.createElement(Text, { elementType: "p", className: "tds-date-picker-description", slot: "description" },
             React__default.createElement(Icon, { "aria-hidden": true, className: "tds-date-picker-description-invalid-icon", symbol: "general#exclamation-triangle" }),
             description))));

package/dist/components/date-picker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"./index.css\"\n\nimport {\n CalendarDate,\n type DateValue,\n getLocalTimeZone,\n parseDate,\n today as todayCalendar,\n} from \"@internationalized/date\"\nimport { FocusScope } from \"@react-aria/focus\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, {\n type ReactNode,\n type RefObject,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\"\nimport {\n Button,\n Calendar,\n CalendarCell,\n CalendarGrid,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCell,\n DateInput,\n DatePicker as AriaDatePicker,\n type DatePickerProps as AriaDatePickerProps,\n DateSegment,\n Group,\n Heading,\n Label,\n Popover,\n Text,\n} from \"react-aria-components\"\n\nconst _today = todayCalendar(getLocalTimeZone())\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i)\nconst shortMonthFormatter = new Intl.DateTimeFormat(undefined, {\n month: \"short\",\n})\nconst longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: \"long\" })\n\nfunction gridKeyDownHandler(\n cols: number,\n maxIndex: number,\n index: number,\n setIndex: (n: number) => void\n) {\n return (e: React.KeyboardEvent) => {\n let next = index\n if (e.key === \"ArrowLeft\") next = Math.max(0, index - 1)\n else if (e.key === \"ArrowRight\") next = Math.min(maxIndex, index + 1)\n else if (e.key === \"ArrowUp\") next = Math.max(0, index - cols)\n else if (e.key === \"ArrowDown\") next = Math.min(maxIndex, index + cols)\n else return\n e.preventDefault()\n setIndex(next)\n }\n}\n\nexport type DatePickerSize = \"md\" \| \"lg\"\n\nexport type DatePickerDateValue = DateValue \| string\n\nfunction toCalendarDate(\n input: DatePickerDateValue \| null \| undefined\n): DateValue \| null \| undefined {\n if (input === null) return null\n if (input === undefined) return undefined\n\n if (typeof input === \"object\" && \"calendar\" in input) {\n return input\n }\n\n return parseDate(input)\n}\n\nexport interface DatePickerProps {\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. /\n description?: string\n /* Disables the input and calendar button. /\n disabled?: boolean\n /* Sets the first day of the week in the calendar. Defaults to locale-appropriate value. /\n firstDayOfWeek?: \"fri\" \| \"mon\" \| \"sat\" \| \"sun\" \| \"thu\" \| \"tue\" \| \"wed\"\n /* If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. /\n hideLabel?: boolean\n /* Whether the input is in an invalid state. /\n invalid?: boolean\n /* Callback that returns `true` for dates that should be visible but not selectable. /\n isDateUnavailable?: (date: DateValue) => boolean\n /* Accessible label for the field. /\n label: string\n /* Maximum selectable date. Accepts a DateValue or ISO date string. /\n max?: DatePickerDateValue\n /* Minimum selectable date. Accepts a DateValue or ISO date string. /\n min?: DatePickerDateValue\n /* Called when the selected date changes. /\n onChange?: (value: DateValue \| null) => void\n /* If `true`, allows the value to be read but not changed. /\n readOnly?: boolean\n /* If `true`, appends an asterisk at the end of the label text. /\n required?: boolean\n /* The size of the date picker. /\n size?: DatePickerSize\n /* The controlled value. Accepts a DateValue or ISO date string. /\n value?: DatePickerDateValue \| null\n}\n\ntype AriaDatePickerPropsToOmit =\n \| \"children\"\n \| \"defaultOpen\"\n \| \"defaultValue\"\n \| \"granularity\"\n \| \"hideTimeZone\"\n \| \"hourCycle\"\n \| \"pageBehavior\"\n \| \"placeholderValue\"\n \| \"shouldCloseOnSelect\"\n \| \"shouldForceLeadingZeros\"\n \| \"slot\"\n\ntype AriaDatePickerPropsToInclude = \"isOpen\" \| \"name\" \| \"onOpenChange\"\n\nexport type DatePickerElementProps = CombineAriaPropsWithCustomProps<\n AriaDatePickerProps<DateValue>,\n DatePickerProps,\n AriaDatePickerPropsToOmit,\n AriaDatePickerPropsToInclude\n>\n\nconst DATE_PICKER_OVERLAY_MAP = {\n month: {\n ariaLabel: \"Months\",\n className: \"tds-date-picker-overlay--month\",\n },\n year: { ariaLabel: \"Years\", className: \"tds-date-picker-overlay--year\" },\n}\n\nfunction DatePickerOverlay({\n children,\n gridRef,\n onClose,\n onKeyDown,\n title,\n variant,\n}: {\n children: ReactNode\n gridRef?: RefObject<HTMLDivElement>\n onClose: () => void\n onKeyDown: React.KeyboardEventHandler\n title: string\n variant: \"month\" \| \"year\"\n}) {\n return (\n <FocusScope contain restoreFocus>\n <div\n aria-label={`Select ${variant}`}\n aria-modal=\"true\"\n className={classNames(\n \"tds-date-picker-overlay\",\n DATE_PICKER_OVERLAY_MAP[variant].className\n )}\n role=\"dialog\"\n >\n <div className=\"tds-date-picker-overlay-header\">\n <span className=\"tds-date-picker-calendar-title\">{title}</span>\n <Button\n aria-label={`Close ${variant} picker`}\n className=\"tds-date-picker-overlay-close\"\n onPress={onClose}\n >\n ×\n </Button>\n </div>\n <div\n aria-label={DATE_PICKER_OVERLAY_MAP[variant].ariaLabel}\n className=\"tds-date-picker-overlay-grid\"\n onKeyDown={onKeyDown}\n ref={gridRef}\n role=\"listbox\"\n tabIndex={-1}\n >\n {children}\n </div>\n </div>\n </FocusScope>\n )\n}\n\nexport function DatePicker({\n className,\n description,\n disabled,\n firstDayOfWeek,\n hideLabel,\n invalid,\n isDateUnavailable,\n label,\n max,\n min,\n onChange,\n readOnly,\n required,\n size = \"md\",\n value,\n ...restProps\n}: DatePickerElementProps) {\n const convertedValue = toCalendarDate(value)\n const convertedMin = toCalendarDate(min) ?? undefined\n const convertedMax = toCalendarDate(max) ?? undefined\n\n const combinedClassName = classNames(\n \"tds-date-picker\",\n { \"tds-date-picker--lg\": size === \"lg\" },\n className\n )\n\n const [focusedDate, setFocusedDate] = useState<CalendarDate>(() => {\n return (\n (toCalendarDate(value) as CalendarDate) ??\n todayCalendar(getLocalTimeZone())\n )\n })\n const [activeOverlay, setActiveOverlay] = useState<\"month\" \| \"year\" \| null>(\n null\n )\n const overlayTitle = `${longMonthFormatter.format(new Date(2000, focusedDate.month - 1, 1))} ${focusedDate.year}`\n const [focusedMonthIndex, setFocusedMonthIndex] = useState(\n () => focusedDate.month - 1\n )\n const [focusedYearIndex, setFocusedYearIndex] = useState(() =>\n Math.max(0, YEARS.indexOf(focusedDate.year))\n )\n const calendarRef = useRef<HTMLDivElement>(null)\n const monthGridRef = useRef<HTMLDivElement>(null)\n const yearGridRef = useRef<HTMLDivElement>(null)\n\n // Close on Escape. FocusScope handles trapping and focus restoration.\n useEffect(() => {\n if (!activeOverlay) return\n function handleKeyDown(e: KeyboardEvent) {\n if (e.key === \"Escape\") setActiveOverlay(null)\n }\n document.addEventListener(\"keydown\", handleKeyDown)\n return () => document.removeEventListener(\"keydown\", handleKeyDown)\n }, [activeOverlay])\n\n function handleMonthSelect(monthIndex: number) {\n setFocusedDate(new CalendarDate(focusedDate.year, monthIndex + 1, 1))\n setActiveOverlay(null)\n }\n\n useLayoutEffect(() => {\n if (activeOverlay !== \"month\") return\n const buttons =\n monthGridRef.current?.querySelectorAll<HTMLElement>(\"button\")\n buttons?.[focusedMonthIndex]?.focus()\n }, [focusedMonthIndex, activeOverlay])\n\n function handleYearSelect(year: number) {\n setFocusedDate(new CalendarDate(year, focusedDate.month, 1))\n setActiveOverlay(null)\n }\n\n useLayoutEffect(() => {\n if (activeOverlay !== \"year\") return\n const cell =\n yearGridRef.current?.querySelectorAll<HTMLElement>(\"button\")[\n focusedYearIndex\n ]\n cell?.scrollIntoView({ block: \"nearest\" })\n cell?.focus()\n }, [focusedYearIndex, activeOverlay])\n\n const handleMonthKeyDown = gridKeyDownHandler(\n 3,\n 11,\n focusedMonthIndex,\n setFocusedMonthIndex\n )\n const handleYearKeyDown = gridKeyDownHandler(\n 4,\n YEARS.length - 1,\n focusedYearIndex,\n setFocusedYearIndex\n )\n\n return (\n <AriaDatePicker\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n isDateUnavailable={isDateUnavailable}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={convertedMax}\n minValue={convertedMin}\n onChange={onChange ?? undefined}\n onOpenChange={(isOpen) => {\n if (!isOpen) {\n setActiveOverlay(null)\n setFocusedDate(\n (toCalendarDate(value) as CalendarDate) ??\n todayCalendar(getLocalTimeZone())\n )\n }\n }}\n value={convertedValue}\n >\n {!hideLabel && <Label className=\"tds-date-picker-label\">{label}</Label>}\n <Group className=\"tds-date-picker-field\">\n <DateInput className=\"tds-date-picker-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-date-picker-segment-separator\"\n : \"tds-date-picker-segment\"\n }\n segment={segment}\n />\n )}\n </DateInput>\n <Button className=\"tds-btn tds-btn--infield tds-date-picker-button\">\n <Icon aria-hidden symbol=\"general#calendar\" />\n </Button>\n </Group>\n <Popover className=\"tds-date-picker-popover\">\n {activeOverlay === \"month\" && (\n <DatePickerOverlay\n gridRef={monthGridRef}\n onClose={() => setActiveOverlay(null)}\n onKeyDown={handleMonthKeyDown}\n title={overlayTitle}\n variant=\"month\"\n >\n {MONTHS.map((i) => {\n const monthLabel = shortMonthFormatter.format(\n new Date(2000, i, 1)\n )\n return (\n <button\n aria-selected={focusedDate.month === i + 1}\n className=\"tds-date-picker-overlay-cell\"\n key={monthLabel}\n onClick={() => handleMonthSelect(i)}\n role=\"option\"\n tabIndex={focusedMonthIndex === i ? 0 : -1}\n type=\"button\"\n >\n {monthLabel}\n </button>\n )\n })}\n </DatePickerOverlay>\n )}\n {activeOverlay === \"year\" && (\n <DatePickerOverlay\n gridRef={yearGridRef}\n onClose={() => setActiveOverlay(null)}\n onKeyDown={handleYearKeyDown}\n title={overlayTitle}\n variant=\"year\"\n >\n {YEARS.map((year, i) => (\n <button\n aria-selected={focusedDate.year === year}\n className=\"tds-date-picker-overlay-cell\"\n key={year}\n onClick={() => handleYearSelect(year)}\n role=\"option\"\n tabIndex={focusedYearIndex === i ? 0 : -1}\n type=\"button\"\n >\n {year}\n </button>\n ))}\n </DatePickerOverlay>\n )}\n <Calendar\n className=\"tds-date-picker-calendar\"\n firstDayOfWeek={firstDayOfWeek}\n focusedValue={focusedDate}\n onFocusChange={(date) => setFocusedDate(date)}\n ref={calendarRef}\n >\n <header className=\"tds-date-picker-calendar-header\">\n <Heading className=\"tds-date-picker-calendar-title tds-date-picker-calendar-title--visually-hidden\" />\n <div className=\"tds-date-picker-calendar-heading\">\n <Button\n aria-expanded={activeOverlay === \"month\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() => {\n setFocusedMonthIndex(focusedDate.month - 1)\n setActiveOverlay(\"month\")\n }}\n slot={null}\n >\n {longMonthFormatter.format(\n new Date(2000, focusedDate.month - 1, 1)\n )}\n </Button>\n <Button\n aria-expanded={activeOverlay === \"year\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() => {\n setFocusedYearIndex(\n Math.max(0, YEARS.indexOf(focusedDate.year))\n )\n setActiveOverlay(\"year\")\n }}\n slot={null}\n >\n {focusedDate.year}\n </Button>\n </div>\n <Button\n aria-label=\"Go to today\"\n className=\"tds-date-picker-calendar-nav\"\n style={{\n visibility:\n focusedDate.month === _today.month &&\n focusedDate.year === _today.year\n ? \"hidden\"\n : undefined,\n }}\n onPress={() => {\n const today = todayCalendar(getLocalTimeZone())\n setFocusedDate(today)\n requestAnimationFrame(() => {\n calendarRef.current\n ?.querySelector<HTMLElement>(\"[data-today]\")\n ?.focus()\n })\n }}\n slot={null}\n >\n {/ TODO: Add to icon library and use Icon once icon is decided on */}\n <svg\n aria-hidden\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n height=\"14\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M13.444 14.222H2.556V5.667H13.444V14.222ZM13.444 1.778H12.667V0.222H11.111V1.778H4.889V0.222H3.333V1.778H2.556C2.35212 1.778 2.15025 1.81827 1.96199 1.8965C1.77372 1.97473 1.60275 2.08938 1.45892 2.23387C1.31508 2.37836 1.2012 2.54984 1.12382 2.73846C1.04644 2.92708 1.00708 3.12913 1.008 3.333L1 14.222C0.999869 14.4264 1.04003 14.6288 1.11818 14.8176C1.19633 15.0065 1.31093 15.178 1.45545 15.3226C1.59996 15.4671 1.77155 15.5817 1.96039 15.6598C2.14923 15.738 2.35163 15.7781 2.556 15.778H13.444C13.8564 15.7769 14.2515 15.6127 14.5431 15.3211C14.8347 15.0295 14.9989 14.6344 15 14.222V3.333C14.9987 2.92082 14.8343 2.52592 14.5427 2.23455C14.2512 1.94319 13.8562 1.77905 13.444 1.778Z\" />\n <circle cx=\"8\" cy=\"9.75\" r=\"2.25\" />\n </svg>\n </Button>\n <Button\n aria-label=\"Previous month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"previous\"\n >\n <Icon aria-hidden symbol=\"general#left-chevron\" />\n </Button>\n <Button\n aria-label=\"Next month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"next\"\n >\n <Icon aria-hidden symbol=\"general#right-chevron\" />\n </Button>\n </header>\n <CalendarGrid className=\"tds-date-picker-calendar-grid\">\n <CalendarGridHeader className=\"tds-date-picker-calendar-grid-header\">\n {(day) => (\n <CalendarHeaderCell className=\"tds-date-picker-calendar-header-cell\">\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody className=\"tds-date-picker-calendar-grid-body\">\n {(date) => (\n <CalendarCell\n className=\"tds-date-picker-calendar-cell\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </Calendar>\n </Popover>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-date-picker-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-date-picker-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaDatePicker>\n )\n}\n\nDatePicker.displayName = \"DatePicker\"\n"],"names":["todayCalendar","getLocalTimeZone","parseDate","React","FocusScope","CalendarDate","AriaDatePicker"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"./index.css\"\n\nimport {\n CalendarDate,\n type DateValue,\n getLocalTimeZone,\n parseDate,\n today as todayCalendar,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext, useState } from \"react\"\nimport {\n Button,\n Calendar,\n CalendarCell,\n CalendarGrid,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCell,\n CalendarStateContext,\n DateInput,\n DatePicker as AriaDatePicker,\n type DatePickerProps as AriaDatePickerProps,\n DateSegment,\n Group,\n Heading,\n Label,\n ListBox,\n ListBoxItem,\n Popover,\n Text,\n} from \"react-aria-components\"\n\nconst _today = todayCalendar(getLocalTimeZone())\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i)\nconst shortMonthFormatter = new Intl.DateTimeFormat(undefined, {\n month: \"short\",\n})\nconst longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: \"long\" })\n\nexport type DatePickerSize = \"md\" \| \"lg\"\n\nexport type DatePickerDateValue = DateValue \| string\n\nfunction toCalendarDate(\n input: DatePickerDateValue \| null \| undefined\n): DateValue \| null \| undefined {\n if (input === null) return null\n if (input === undefined) return undefined\n\n if (typeof input === \"object\" && \"calendar\" in input) {\n return input\n }\n\n return parseDate(input)\n}\n\nexport interface DatePickerProps {\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. /\n description?: string\n /* Disables the input and calendar button. /\n disabled?: boolean\n /* Sets the first day of the week in the calendar. Defaults to locale-appropriate value. /\n firstDayOfWeek?: \"fri\" \| \"mon\" \| \"sat\" \| \"sun\" \| \"thu\" \| \"tue\" \| \"wed\"\n /* If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. /\n hideLabel?: boolean\n /* Whether the input is in an invalid state. /\n invalid?: boolean\n /* Callback that returns `true` for dates that should be visible but not selectable. /\n isDateUnavailable?: (date: DateValue) => boolean\n /* Accessible label for the field. /\n label: string\n /* Maximum selectable date. Accepts a DateValue or ISO date string. /\n max?: DatePickerDateValue\n /* Minimum selectable date. Accepts a DateValue or ISO date string. /\n min?: DatePickerDateValue\n /* Called when the selected date changes. /\n onChange?: (value: DateValue \| null) => void\n /* If `true`, allows the value to be read but not changed. /\n readOnly?: boolean\n /* If `true`, appends an asterisk at the end of the label text. /\n required?: boolean\n /* The size of the date picker. /\n size?: DatePickerSize\n /* The controlled value. Accepts a DateValue or ISO date string. /\n value?: DatePickerDateValue \| null\n}\n\ntype AriaDatePickerPropsToOmit =\n \| \"children\"\n \| \"defaultOpen\"\n \| \"defaultValue\"\n \| \"granularity\"\n \| \"hideTimeZone\"\n \| \"hourCycle\"\n \| \"pageBehavior\"\n \| \"placeholderValue\"\n \| \"shouldCloseOnSelect\"\n \| \"shouldForceLeadingZeros\"\n \| \"slot\"\n\ntype AriaDatePickerPropsToInclude = \"isOpen\" \| \"name\" \| \"onOpenChange\"\n\nexport type DatePickerElementProps = CombineAriaPropsWithCustomProps<\n AriaDatePickerProps<DateValue>,\n DatePickerProps,\n AriaDatePickerPropsToOmit,\n AriaDatePickerPropsToInclude\n>\n\nfunction DatePickerOverlay({\n children,\n variant,\n}: {\n children: ReactNode\n variant: \"month\" \| \"year\"\n}) {\n return (\n <div\n aria-label={`Select ${variant}`}\n aria-modal=\"true\"\n className={`tds-date-picker-overlay tds-date-picker-overlay--${variant}`}\n role=\"dialog\"\n >\n {children}\n </div>\n )\n}\n\nfunction DatePickerCalendarBody({\n activeOverlay,\n setActiveOverlay,\n}: {\n activeOverlay: \"month\" \| \"year\" \| null\n setActiveOverlay: (overlay: \"month\" \| \"year\" \| null) => void\n}) {\n // Read and drive Calendar's focused date through its state context. This\n // lets react-aria-components own the \"open to selected month\" behavior:\n // when the popover opens, Calendar mounts and auto-focuses the DatePicker's\n // current value (whether typed into the input segments or set via `value`).\n const state = useContext(CalendarStateContext)!\n const focusedDate = state.focusedDate\n const today = todayCalendar(getLocalTimeZone())\n\n function handleOverlaySelectionChange(\n keys: \"all\" \| Set<number \| string>,\n onSelect: (key: number) => void\n ) {\n if (keys === \"all\") return\n const [first] = Array.from(keys)\n if (first !== undefined) onSelect(Number(first))\n }\n\n function handleMonthSelect(monthIndex: number) {\n state.setFocusedDate(new CalendarDate(focusedDate.year, monthIndex + 1, 1))\n setActiveOverlay(null)\n }\n\n function handleYearSelect(year: number) {\n state.setFocusedDate(new CalendarDate(year, focusedDate.month, 1))\n setActiveOverlay(null)\n }\n\n return (\n <>\n <header className=\"tds-date-picker-calendar-header\">\n <Heading className=\"tds-date-picker-calendar-title tds-date-picker-calendar-title--visually-hidden\" />\n <div className=\"tds-date-picker-calendar-heading\">\n <Button\n aria-expanded={activeOverlay === \"month\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() =>\n setActiveOverlay(activeOverlay === \"month\" ? null : \"month\")\n }\n slot={null}\n >\n {longMonthFormatter.format(\n new Date(2000, focusedDate.month - 1, 1)\n )}\n </Button>\n <Button\n aria-expanded={activeOverlay === \"year\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() =>\n setActiveOverlay(activeOverlay === \"year\" ? null : \"year\")\n }\n slot={null}\n >\n {focusedDate.year}\n </Button>\n </div>\n {activeOverlay ? (\n <Button\n aria-label={`Close ${activeOverlay} picker`}\n className=\"tds-date-picker-calendar-nav\"\n onPress={() => setActiveOverlay(null)}\n slot={null}\n >\n <Icon aria-hidden symbol=\"general#x\" />\n </Button>\n ) : (\n <>\n <Button\n aria-label=\"Go to today\"\n className=\"tds-date-picker-calendar-nav\"\n style={{\n visibility:\n focusedDate.month === today.month &&\n focusedDate.year === today.year\n ? \"hidden\"\n : undefined,\n }}\n onPress={() => {\n state.setFocusedDate(today)\n state.setFocused(true)\n }}\n slot={null}\n >\n {/ TODO: Add to icon library and use Icon once icon is decided on */}\n <svg\n aria-hidden\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n height=\"14\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M13.444 14.222H2.556V5.667H13.444V14.222ZM13.444 1.778H12.667V0.222H11.111V1.778H4.889V0.222H3.333V1.778H2.556C2.35212 1.778 2.15025 1.81827 1.96199 1.8965C1.77372 1.97473 1.60275 2.08938 1.45892 2.23387C1.31508 2.37836 1.2012 2.54984 1.12382 2.73846C1.04644 2.92708 1.00708 3.12913 1.008 3.333L1 14.222C0.999869 14.4264 1.04003 14.6288 1.11818 14.8176C1.19633 15.0065 1.31093 15.178 1.45545 15.3226C1.59996 15.4671 1.77155 15.5817 1.96039 15.6598C2.14923 15.738 2.35163 15.7781 2.556 15.778H13.444C13.8564 15.7769 14.2515 15.6127 14.5431 15.3211C14.8347 15.0295 14.9989 14.6344 15 14.222V3.333C14.9987 2.92082 14.8343 2.52592 14.5427 2.23455C14.2512 1.94319 13.8562 1.77905 13.444 1.778Z\" />\n <circle cx=\"8\" cy=\"9.75\" r=\"2.25\" />\n </svg>\n </Button>\n <Button\n aria-label=\"Previous month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"previous\"\n >\n <Icon aria-hidden symbol=\"general#left-chevron\" />\n </Button>\n <Button\n aria-label=\"Next month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"next\"\n >\n <Icon aria-hidden symbol=\"general#right-chevron\" />\n </Button>\n </>\n )}\n </header>\n <div className=\"tds-date-picker-calendar-body\">\n {activeOverlay === \"month\" && (\n <DatePickerOverlay variant=\"month\">\n <ListBox\n aria-label=\"Months\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n autoFocus\n className=\"tds-date-picker-overlay-list\"\n disallowEmptySelection\n escapeKeyBehavior=\"none\"\n layout=\"grid\"\n onSelectionChange={(keys) =>\n handleOverlaySelectionChange(keys, handleMonthSelect)\n }\n selectedKeys={[String(focusedDate.month - 1)]}\n selectionMode=\"single\"\n >\n {MONTHS.map((i) => {\n const date = new Date(2000, i, 1)\n const shortMonth = shortMonthFormatter.format(date)\n const longMonth = longMonthFormatter.format(date)\n\n return (\n <ListBoxItem\n className=\"tds-date-picker-overlay-cell\"\n id={String(i)}\n key={i}\n aria-label={longMonth}\n textValue={longMonth}\n >\n {shortMonth}\n </ListBoxItem>\n )\n })}\n </ListBox>\n </DatePickerOverlay>\n )}\n {activeOverlay === \"year\" && (\n <DatePickerOverlay variant=\"year\">\n <ListBox\n aria-label=\"Years\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n autoFocus\n className=\"tds-date-picker-overlay-list\"\n disallowEmptySelection\n escapeKeyBehavior=\"none\"\n layout=\"grid\"\n onSelectionChange={(keys) =>\n handleOverlaySelectionChange(keys, handleYearSelect)\n }\n selectedKeys={[String(focusedDate.year)]}\n selectionMode=\"single\"\n >\n {YEARS.map((year) => (\n <ListBoxItem\n className=\"tds-date-picker-overlay-cell\"\n id={String(year)}\n key={year}\n textValue={String(year)}\n >\n {year}\n </ListBoxItem>\n ))}\n </ListBox>\n </DatePickerOverlay>\n )}\n <CalendarGrid className=\"tds-date-picker-calendar-grid\">\n <CalendarGridHeader className=\"tds-date-picker-calendar-grid-header\">\n {(day) => (\n <CalendarHeaderCell className=\"tds-date-picker-calendar-header-cell\">\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody className=\"tds-date-picker-calendar-grid-body\">\n {(date) => (\n <CalendarCell\n className=\"tds-date-picker-calendar-cell\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </>\n )\n}\n\nexport function DatePicker({\n className,\n description,\n disabled,\n firstDayOfWeek,\n hideLabel,\n invalid,\n isDateUnavailable,\n label,\n max,\n min,\n onChange,\n readOnly,\n required,\n size = \"md\",\n value,\n ...restProps\n}: DatePickerElementProps) {\n const convertedValue = toCalendarDate(value)\n const convertedMin = toCalendarDate(min) ?? undefined\n const convertedMax = toCalendarDate(max) ?? undefined\n\n const combinedClassName = classNames(\n \"tds-date-picker\",\n { \"tds-date-picker--lg\": size === \"lg\" },\n className\n )\n\n const [activeOverlay, setActiveOverlay] = useState<\"month\" \| \"year\" \| null>(\n null\n )\n\n return (\n <AriaDatePicker\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n isDateUnavailable={isDateUnavailable}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={convertedMax}\n minValue={convertedMin}\n onChange={onChange ?? undefined}\n onOpenChange={(isOpen) => {\n if (!isOpen) setActiveOverlay(null)\n }}\n value={convertedValue}\n >\n {!hideLabel && <Label className=\"tds-date-picker-label\">{label}</Label>}\n <Group className=\"tds-date-picker-field\">\n <DateInput className=\"tds-date-picker-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-date-picker-segment-separator\"\n : \"tds-date-picker-segment\"\n }\n segment={segment}\n />\n )}\n </DateInput>\n <Button className=\"tds-btn tds-btn--infield tds-date-picker-button\">\n <Icon aria-hidden symbol=\"general#calendar\" />\n </Button>\n </Group>\n <Popover className=\"tds-date-picker-popover\">\n <Calendar\n className=\"tds-date-picker-calendar\"\n firstDayOfWeek={firstDayOfWeek}\n >\n <DatePickerCalendarBody\n activeOverlay={activeOverlay}\n setActiveOverlay={setActiveOverlay}\n />\n </Calendar>\n </Popover>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-date-picker-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-date-picker-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaDatePicker>\n )\n}\n\nDatePicker.displayName = \"DatePicker\"\n"],"names":["todayCalendar","getLocalTimeZone","parseDate","React","CalendarDate","AriaDatePicker"],"mappings":"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"}

package/dist/components/link/BaseLink.js CHANGED Viewed

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import React__default, { forwardRef } from 'react';
 const buildComponentClassName = (size, kind, fullWidth, className) => {
-    return classNames("tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", className);
+    return classNames(kind && "tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", className);
 };
 const BaseLink = forwardRef(({ children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
     const combinedClassName = buildComponentClassName(size, kind, fullWidth, className);

package/dist/components/link/BaseLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"@utilities/buttonLinkShared\"\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\nexport interface BaseLinkElementProps\n extends BaseComponentProps,\n Omit<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n keyof BaseComponentProps \| \"children\"\n > {\n children?: React.ReactNode\n external?: boolean\n href: string\n kind?: ComponentKind\n label?: React.ReactNode\n}\n\nconst buildComponentClassName = (\n size?: ComponentSize,\n kind?: ComponentKind,\n fullWidth?: boolean,\n className?: string\n): string => {\n return classNames(\n \"tds-btn\",\n size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n fullWidth && \"tds-btn--full-width\",\n className\n )\n}\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n (\n {\n children,\n className,\n external = false,\n fullWidth,\n href,\n kind,\n label,\n prefix,\n size,\n suffix,\n ...restProps\n }: BaseLinkElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName(\n size,\n kind,\n fullWidth,\n className\n )\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n const externalProps = external\n ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n : {}\n\n return (\n <a\n href={href}\n className={combinedClassName}\n ref={ref}\n {...restProps}\n {...externalProps}\n >\n {prefixElement}\n {label \|\| children}\n {suffixElement}\n </a>\n )\n }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":["React"],"mappings":";;;;AA0BA,MAAM,uBAAuB,GAAG,CAC9B,IAAoB,EACpB,IAAoB,EACpB,SAAmB,EACnB,SAAkB,KACR;AACV,IAAA,OAAO,UAAU,CACf,SAAS,~~EACT~~,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,SAAS,CACV;AACH,CAAC;AAEM,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACS,EACvB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,uBAAuB,CAC/C,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,SAAS,CACV;IAED,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ;UAC9C,EAAE;AAEN,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,KACT,aAAa,EAAA;QAEhB,aAAa;AACb,QAAA,KAAK,IAAI,QAAQ;QACjB,aAAa,CACZ;AAER,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
1	+ {"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"@utilities/buttonLinkShared\"\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\nexport interface BaseLinkElementProps\n extends BaseComponentProps,\n Omit<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n keyof BaseComponentProps \| \"children\"\n > {\n children?: React.ReactNode\n external?: boolean\n href: string\n kind?: ComponentKind\n label?: React.ReactNode\n}\n\nconst buildComponentClassName = (\n size?: ComponentSize,\n kind?: ComponentKind,\n fullWidth?: boolean,\n className?: string\n): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n fullWidth && \"tds-btn--full-width\",\n className\n )\n}\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n (\n {\n children,\n className,\n external = false,\n fullWidth,\n href,\n kind,\n label,\n prefix,\n size,\n suffix,\n ...restProps\n }: BaseLinkElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName(\n size,\n kind,\n fullWidth,\n className\n )\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n const externalProps = external\n ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n : {}\n\n return (\n <a\n href={href}\n className={combinedClassName}\n ref={ref}\n {...restProps}\n {...externalProps}\n >\n {prefixElement}\n {label \|\| children}\n {suffixElement}\n </a>\n )\n }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":["React"],"mappings":";;;;AA0BA,MAAM,uBAAuB,GAAG,CAC9B,IAAoB,EACpB,IAAoB,EACpB,SAAmB,EACnB,SAAkB,KACR;AACV,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,SAAS,CACV;AACH,CAAC;AAEM,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACS,EACvB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,uBAAuB,CAC/C,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,SAAS,CACV;IAED,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ;UAC9C,EAAE;AAEN,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,KACT,aAAa,EAAA;QAEhB,aAAa;AACb,QAAA,KAAK,IAAI,QAAQ;QACjB,aAAa,CACZ;AAER,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/link/IconLink.d.ts CHANGED Viewed

@@ -3,10 +3,12 @@ import React from "react";
 import { BaseLinkElementProps } from "./BaseLink";
 export type IconLinkProps = Omit<BaseLinkElementProps, "label" | "children"> & {
     "aria-label": string;
+    /** The icon element to display. */
     icon: React.ReactNode;
 };
 export declare const IconLink: React.ForwardRefExoticComponent<Omit<BaseLinkElementProps, "label" | "children"> & {
     "aria-label": string;
+    /** The icon element to display. */
     icon: React.ReactNode;
 } & React.RefAttributes<HTMLAnchorElement>>;
 //# sourceMappingURL=IconLink.d.ts.map

package/dist/components/link/IconLink.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/IconLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAY,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC7E,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,QAAQ;~~kBAJL~~,MAAM;~~UACd~~,KAAK,CAAC,SAAS;2CAiBtB,CAAA"}
1	+ {"version":3,"file":"IconLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/IconLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAY,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC7E,YAAY,EAAE,MAAM,CAAA;IACpB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,QAAQ;kBALL,MAAM;IACpB,mCAAmC;UAC7B,KAAK,CAAC,SAAS;2CAiBtB,CAAA"}

package/dist/components/link/IconLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" \| \"children\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseLink\n href={href}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n {...restProps}\n />\n )\n }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":["React"],"mappings":";;;;~~MAYa~~,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,QACEA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,CACb;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
1	+ {"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" \| \"children\"> & {\n \"aria-label\": string\n /** The icon element to display. */\n icon: React.ReactNode\n}\n\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseLink\n href={href}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n {...restProps}\n />\n )\n }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":["React"],"mappings":";;;;MAaa,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,QACEA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,CACb;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/page-header/PageHeader.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import React from "react";
 export declare function PageHeader({ children, actions, navigation, className, inactive, profile, }: {
     /**
-     * Additional content (typically actions) that complements the primary slot.
+     * Actions to be displayed on the right side of the header. Elements
+     * should be styled as buttons.
      */
     actions?: React.ReactNode;
     /**
@@ -14,8 +15,10 @@ export declare function PageHeader({ children, actions, navigation, className, i
      */
     inactive?: boolean;
     /**
-     * Navigation for the page. Should contain an unstyled unordered list (ul)
-     * that contains a list of links or buttons.
+     * Navigation links to be displayed on the left side of the header.
+     * Contents should be an unordered list with items being links or
+     * buttons. Specify `selected` for the active link (as well as adding
+     * `aria-current="page"` for accessibility).
      */
     navigation?: React.ReactNode;
     /**

package/dist/components/page-header/PageHeader.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD~~;;OAEG~~;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB~~;;;OAGG~~;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBA+BA"}
1	+ {"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBA+BA"}

package/dist/components/page-header/PageHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { useEffect, useRef } from \"react\"\n\nexport function PageHeader({\n children,\n actions,\n navigation,\n className,\n inactive = false,\n profile = false,\n}: {\n /*\n ~~Additional~~ ~~content~~ ~~(typically~~ ~~actions)~~ ~~that~~ ~~complements~~ the ~~primary~~ ~~slot~~.\n /\n actions?: React.ReactNode\n /\n The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n /\n children: React.ReactNode\n className?: string\n /\n Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n /\n inactive?: boolean\n /\n Navigation ~~for~~ the ~~page.~~ ~~Should~~ ~~contain~~ an ~~unstyled~~ unordered list ~~(ul)~~\n * ~~that~~ ~~contains~~ a ~~list~~ of ~~links~~ or ~~buttons~~.\n /\n navigation?: React.ReactNode\n /\n Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n */\n profile?: boolean\n}) {\n const hasMultiActions = actions\n ? React.isValidElement(actions) && actions.type === React.Fragment\n ? React.Children.count(actions.props.children) > 1\n : React.Children.count(actions) > 1\n : false\n\n const nav = useScrollToSelected(navigation)\n\n return (\n <header\n className={classNames(\"tds-page-header\", className, {\n \"has-multi-actions\": hasMultiActions,\n \"has-nav\": !!navigation,\n inactive,\n \"tds-page-header--profile\": profile,\n })}\n >\n <div className=\"tds-page-header__title-bar\">\n <div className=\"tds-page-header__primary\">{children}</div>\n {actions && (\n <div className=\"tds-page-header__actions tds-no-print\">{actions}</div>\n )}\n </div>\n {navigation && (\n <nav ref={nav} className=\"tds-page-header__nav tds-no-print\">\n {navigation}\n </nav>\n )}\n </header>\n )\n}\n\nfunction useScrollToSelected(navigation: React.ReactNode) {\n const nav = useRef<HTMLElement>(null)\n useEffect(() => {\n if (!nav.current) return\n const ulElement = nav.current.querySelector(\"ul\")\n if (!ulElement) return\n const selectedItem = ulElement.querySelector(\".selected\")\n if (selectedItem) {\n const bounds = selectedItem.getBoundingClientRect()\n const ulBounds = ulElement.getBoundingClientRect()\n if (bounds.right > ulBounds.right \|\| bounds.left < ulBounds.left) {\n ulElement.scrollTo({\n left: ulElement.scrollLeft + bounds.left - ulBounds.left,\n })\n }\n }\n }, [navigation])\n return nav\n}\n"],"names":[],"mappings":";;;SAGgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,~~GAwBhB~~,EAAA;IACC,MAAM,eAAe,GAAG;AACtB,UAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC;AACxD,cAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;cAC/C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;UAClC,KAAK;AAET,IAAA,MAAM,GAAG,GAAG,mBAAmB,CAAC,UAAU,CAAC;IAE3C,QACE,gCACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;AAClD,YAAA,mBAAmB,EAAE,eAAe;YACpC,SAAS,EAAE,CAAC,CAAC,UAAU;YACvB,QAAQ;AACR,YAAA,0BAA0B,EAAE,OAAO;SACpC,CAAC,EAAA;QAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO;YACzD,OAAO,KACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,EAAE,OAAO,CAAO,CACvE,CACG;AACL,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mCAAmC,IACzD,UAAU,CACP,CACP,CACM;AAEb;AAEA,SAAS,mBAAmB,CAAC,UAA2B,EAAA;AACtD,IAAA,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC;IACrC,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE;QAClB,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;AACjD,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;QACzD,IAAI,YAAY,EAAE;AAChB,YAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,YAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;gBAChE,SAAS,CAAC,QAAQ,CAAC;oBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,iBAAA,CAAC;YACJ;QACF;AACF,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAChB,IAAA,OAAO,GAAG;AACZ;;;;"}
1	+ {"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { useEffect, useRef } from \"react\"\n\nexport function PageHeader({\n children,\n actions,\n navigation,\n className,\n inactive = false,\n profile = false,\n}: {\n /*\n Actions to be displayed on the right side of the header. Elements\n * should be styled as buttons.\n /\n actions?: React.ReactNode\n /\n The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n /\n children: React.ReactNode\n className?: string\n /\n Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n /\n inactive?: boolean\n /\n Navigation links to be displayed on the left side of the header.\n * Contents should be an unordered list with items being links or\n * buttons. Specify `selected` for the active link (as well as adding\n * `aria-current=\"page\"` for accessibility).\n /\n navigation?: React.ReactNode\n /\n Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n */\n profile?: boolean\n}) {\n const hasMultiActions = actions\n ? React.isValidElement(actions) && actions.type === React.Fragment\n ? React.Children.count(actions.props.children) > 1\n : React.Children.count(actions) > 1\n : false\n\n const nav = useScrollToSelected(navigation)\n\n return (\n <header\n className={classNames(\"tds-page-header\", className, {\n \"has-multi-actions\": hasMultiActions,\n \"has-nav\": !!navigation,\n inactive,\n \"tds-page-header--profile\": profile,\n })}\n >\n <div className=\"tds-page-header__title-bar\">\n <div className=\"tds-page-header__primary\">{children}</div>\n {actions && (\n <div className=\"tds-page-header__actions tds-no-print\">{actions}</div>\n )}\n </div>\n {navigation && (\n <nav ref={nav} className=\"tds-page-header__nav tds-no-print\">\n {navigation}\n </nav>\n )}\n </header>\n )\n}\n\nfunction useScrollToSelected(navigation: React.ReactNode) {\n const nav = useRef<HTMLElement>(null)\n useEffect(() => {\n if (!nav.current) return\n const ulElement = nav.current.querySelector(\"ul\")\n if (!ulElement) return\n const selectedItem = ulElement.querySelector(\".selected\")\n if (selectedItem) {\n const bounds = selectedItem.getBoundingClientRect()\n const ulBounds = ulElement.getBoundingClientRect()\n if (bounds.right > ulBounds.right \|\| bounds.left < ulBounds.left) {\n ulElement.scrollTo({\n left: ulElement.scrollLeft + bounds.left - ulBounds.left,\n })\n }\n }\n }, [navigation])\n return nav\n}\n"],"names":[],"mappings":";;;SAGgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GA2BhB,EAAA;IACC,MAAM,eAAe,GAAG;AACtB,UAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC;AACxD,cAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;cAC/C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;UAClC,KAAK;AAET,IAAA,MAAM,GAAG,GAAG,mBAAmB,CAAC,UAAU,CAAC;IAE3C,QACE,gCACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;AAClD,YAAA,mBAAmB,EAAE,eAAe;YACpC,SAAS,EAAE,CAAC,CAAC,UAAU;YACvB,QAAQ;AACR,YAAA,0BAA0B,EAAE,OAAO;SACpC,CAAC,EAAA;QAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO;YACzD,OAAO,KACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,EAAE,OAAO,CAAO,CACvE,CACG;AACL,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mCAAmC,IACzD,UAAU,CACP,CACP,CACM;AAEb;AAEA,SAAS,mBAAmB,CAAC,UAA2B,EAAA;AACtD,IAAA,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC;IACrC,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE;QAClB,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;AACjD,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;QACzD,IAAI,YAAY,EAAE;AAChB,YAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,YAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;gBAChE,SAAS,CAAC,QAAQ,CAAC;oBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,iBAAA,CAAC;YACJ;QACF;AACF,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAChB,IAAA,OAAO,GAAG;AACZ;;;;"}

package/dist/components/radio/Radio.d.ts CHANGED Viewed

@@ -2,8 +2,11 @@ import "./index.css";
 import React, { InputHTMLAttributes } from "react";
 export type RadioSize = "md" | "sm";
 interface RadioBaseProps {
+    /** Optional description text that appears below the radio label. */
     description?: string;
+    /** The name of the radio group. All radios in the group must have the same name. */
     name: string;
+    /** The size of the radio. */
     size?: RadioSize;
 }
 interface RadioWithLabel extends RadioBaseProps {

package/dist/components/radio/Radio.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,cAAe,SAAQ,cAAc;IAC7C,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,uBAAuB,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK,4FAuCjB,CAAA"}
1	+ {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,UAAU,cAAc;IACtB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oFAAoF;IACpF,IAAI,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,cAAe,SAAQ,cAAc;IAC7C,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,uBAAuB,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK,4FAuCjB,CAAA"}

package/dist/components/radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type RadioSize = \"md\" \| \"sm\"\n\ninterface RadioBaseProps {\n description?: string\n name: string\n size?: RadioSize\n}\n\ninterface RadioWithLabel extends RadioBaseProps {\n \"aria-labelledby\"?: never\n /*\n Label content for the radio. When using non-string content\n * (e.g. JSX), it must not contain interactive elements. This\n * includes native HTML elements such as `<a>` and `<button>`, as\n * well as Tapestry or Tapestry-React interactive components.\n /\n label: React.ReactNode\n}\n\ninterface RadioWithAriaLabelledBy extends RadioBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type RadioProps = RadioWithLabel \| RadioWithAriaLabelledBy\n\nexport type RadioElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof RadioProps \| \"type\"\n> &\n RadioProps\n\n/\n A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n \n Required: You must provide either:\n * - `label` - Label content for the radio\n * - `aria-labelledby` - ID of an external element that provides the label\n \n When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n \n @component\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n (\n {\n className,\n description,\n id,\n label,\n size = \"md\",\n ...restProps\n }: RadioElementProps,\n ref\n ) => {\n const combinedClassName = classNames(\n \"tds-radio\",\n size && size === \"sm\" && `tds-radio--sm`,\n className\n )\n\n const stableId = useId()\n const radioId = id \|\| `tds-radio-${stableId}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={description ? `${radioId}-description` : undefined}\n id={radioId}\n ref={ref}\n type=\"radio\"\n />\n {label && <label htmlFor={radioId}>{label}</label>}\n {description && (\n <p id={`${radioId}-description`} className=\"tds-radio-description\">\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":["React"],"mappings":";;;;~~AAsCA~~;;;;;;;;;;;;;;AAcG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACD,QAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
1	+ {"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type RadioSize = \"md\" \| \"sm\"\n\ninterface RadioBaseProps {\n /** Optional description text that appears below the radio label. /\n description?: string\n /* The name of the radio group. All radios in the group must have the same name. /\n name: string\n /* The size of the radio. /\n size?: RadioSize\n}\n\ninterface RadioWithLabel extends RadioBaseProps {\n \"aria-labelledby\"?: never\n /\n Label content for the radio. When using non-string content\n * (e.g. JSX), it must not contain interactive elements. This\n * includes native HTML elements such as `<a>` and `<button>`, as\n * well as Tapestry or Tapestry-React interactive components.\n /\n label: React.ReactNode\n}\n\ninterface RadioWithAriaLabelledBy extends RadioBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type RadioProps = RadioWithLabel \| RadioWithAriaLabelledBy\n\nexport type RadioElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof RadioProps \| \"type\"\n> &\n RadioProps\n\n/\n A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n \n Required: You must provide either:\n * - `label` - Label content for the radio\n * - `aria-labelledby` - ID of an external element that provides the label\n \n When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n \n @component\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n (\n {\n className,\n description,\n id,\n label,\n size = \"md\",\n ...restProps\n }: RadioElementProps,\n ref\n ) => {\n const combinedClassName = classNames(\n \"tds-radio\",\n size && size === \"sm\" && `tds-radio--sm`,\n className\n )\n\n const stableId = useId()\n const radioId = id \|\| `tds-radio-${stableId}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={description ? `${radioId}-description` : undefined}\n id={radioId}\n ref={ref}\n type=\"radio\"\n />\n {label && <label htmlFor={radioId}>{label}</label>}\n {description && (\n <p id={`${radioId}-description`} className=\"tds-radio-description\">\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":["React"],"mappings":";;;;AAyCA;;;;;;;;;;;;;;AAcG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACD,QAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/radio-group/RadioGroup.d.ts CHANGED Viewed

@@ -2,9 +2,13 @@ import "./index.css";
 import React, { FieldsetHTMLAttributes } from "react";
 export type RadioGroupSize = "md" | "sm";
 export interface RadioGroupProps {
+    /** Optional description text that appears below the label. */
     description?: string;
+    /** Is invalid. If true, include a description to explain why; and if no description is provided, description defaults to "Please select an option". */
     invalid?: boolean;
+    /** The label text (required). Renders as `<legend>` (not `<label>`) because `RadioGroup` is a `<fieldset>`. */
     label: string;
+    /** The size. Does not affect child radios. */
     size?: RadioGroupSize;
 }
 export type RadioGroupElementProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, keyof RadioGroupProps> & RadioGroupProps;

package/dist/components/radio-group/RadioGroup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;+EAQpB,sBAAsB;;CAiCxB,CAAA"}
1	+ {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uJAAuJ;IACvJ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+GAA+G;IAC/G,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;+EAQpB,sBAAsB;;CAiCxB,CAAA"}

package/dist/components/radio-group/RadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type RadioGroupSize = \"md\" \| \"sm\"\n\nexport interface RadioGroupProps {\n description?: string\n invalid?: boolean\n label: string\n size?: RadioGroupSize\n}\n\nexport type RadioGroupElementProps = Omit<\n FieldsetHTMLAttributes<HTMLFieldSetElement>,\n keyof RadioGroupProps\n> &\n RadioGroupProps\n\n/*\n A radio group component that renders as a fieldset with legend.\n * Use to group two or more Radio components.\n * Supports label and description text, sizes, invalid, and disabled state.\n * Label is required and must be a string. Renders as <legend>.\n \n @component\n */\nexport const RadioGroup = ({\n children,\n className,\n description,\n invalid,\n label,\n size = \"md\",\n ...restProps\n}: RadioGroupElementProps) => {\n const combinedClassName = classNames(\n \"tds-radio-group\",\n size && size === \"sm\" && \"tds-radio-group--sm\",\n className\n )\n const stableId = useId()\n\n const displayDescription =\n description \|\| (invalid ? \"Please select an option\" : undefined)\n const descriptionId = `tds-radio-group-${stableId}-description`\n\n return (\n <fieldset\n {...restProps}\n aria-describedby={displayDescription ? descriptionId : undefined}\n aria-invalid={invalid ? \"true\" : undefined}\n className={combinedClassName}\n >\n <legend>{label}</legend>\n {displayDescription && (\n <p id={descriptionId} className=\"tds-radio-group-description\">\n <Icon\n className=\"tds-radio-group-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {displayDescription}\n </p>\n )}\n <div className=\"tds-radio-group-fields\">{children}</div>\n </fieldset>\n )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":["React"],"mappings":";;;;;~~AAsBA~~;;;;;;;AAOG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACW,KAAI;AAC3B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,iBAAiB,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,qBAAqB,EAC9C,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,yBAAyB,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,QAAQ,cAAc;IAE/D,QACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,6BAA6B,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,0CAA0C,EACpD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,kBAAkB,CACjB,CACL;QACDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,EAAE,QAAQ,CAAO,CAC/C;AAEf;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1	+ {"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type RadioGroupSize = \"md\" \| \"sm\"\n\nexport interface RadioGroupProps {\n /** Optional description text that appears below the label. /\n description?: string\n /* Is invalid. If true, include a description to explain why; and if no description is provided, description defaults to \"Please select an option\". /\n invalid?: boolean\n /* The label text (required). Renders as `<legend>` (not `<label>`) because `RadioGroup` is a `<fieldset>`. /\n label: string\n /* The size. Does not affect child radios. /\n size?: RadioGroupSize\n}\n\nexport type RadioGroupElementProps = Omit<\n FieldsetHTMLAttributes<HTMLFieldSetElement>,\n keyof RadioGroupProps\n> &\n RadioGroupProps\n\n/\n A radio group component that renders as a fieldset with legend.\n * Use to group two or more Radio components.\n * Supports label and description text, sizes, invalid, and disabled state.\n * Label is required and must be a string. Renders as <legend>.\n \n @component\n */\nexport const RadioGroup = ({\n children,\n className,\n description,\n invalid,\n label,\n size = \"md\",\n ...restProps\n}: RadioGroupElementProps) => {\n const combinedClassName = classNames(\n \"tds-radio-group\",\n size && size === \"sm\" && \"tds-radio-group--sm\",\n className\n )\n const stableId = useId()\n\n const displayDescription =\n description \|\| (invalid ? \"Please select an option\" : undefined)\n const descriptionId = `tds-radio-group-${stableId}-description`\n\n return (\n <fieldset\n {...restProps}\n aria-describedby={displayDescription ? descriptionId : undefined}\n aria-invalid={invalid ? \"true\" : undefined}\n className={combinedClassName}\n >\n <legend>{label}</legend>\n {displayDescription && (\n <p id={descriptionId} className=\"tds-radio-group-description\">\n <Icon\n className=\"tds-radio-group-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {displayDescription}\n </p>\n )}\n <div className=\"tds-radio-group-fields\">{children}</div>\n </fieldset>\n )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":["React"],"mappings":";;;;;AA0BA;;;;;;;AAOG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACW,KAAI;AAC3B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,iBAAiB,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,qBAAqB,EAC9C,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,yBAAyB,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,QAAQ,cAAc;IAE/D,QACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,6BAA6B,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,0CAA0C,EACpD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,kBAAkB,CACjB,CACL;QACDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,EAAE,QAAQ,CAAO,CAC/C;AAEf;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}