@planningcenter/tapestry 3.2.3-rc.8 → 3.3.0-rc.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/components/Banner/Banner.d.ts.map +1 -1
- package/dist/components/combo-box/ComboBox.d.ts +17 -6
- package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
- package/dist/components/combo-box/ComboBox.js +19 -4
- package/dist/components/combo-box/ComboBox.js.map +1 -1
- package/dist/components/combo-box/index.d.ts +1 -1
- package/dist/components/combo-box/index.d.ts.map +1 -1
- package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DatePicker.js +5 -3
- package/dist/components/date-picker/DatePicker.js.map +1 -1
- package/dist/components/page-header/index.js +1 -1
- package/dist/components/select/Select.d.ts +59 -9
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/sidenav/index.js +1 -1
- package/dist/index.css +37 -20
- package/dist/index.css.map +1 -1
- package/dist/packages/tapestry-wc/dist/components/{p-Bc3D1UhE.js → p-BTLXo236.js} +3 -3
- package/dist/packages/tapestry-wc/dist/components/p-BTLXo236.js.map +1 -0
- package/dist/packages/tapestry-wc/dist/components/{p-asSY9hZ8.js → p-CFO7nxJf.js} +3 -3
- package/dist/packages/tapestry-wc/dist/components/p-CFO7nxJf.js.map +1 -0
- package/dist/packages/tapestry-wc/dist/components/{p-CNhTorvM.js → p-CtTGh3OQ.js} +3 -3
- package/dist/packages/tapestry-wc/dist/components/p-CtTGh3OQ.js.map +1 -0
- package/dist/packages/tapestry-wc/dist/components/{p-D8qDXp6N.js → p-DZSu2isL.js} +2 -2
- package/dist/packages/tapestry-wc/dist/components/p-DZSu2isL.js.map +1 -0
- package/dist/packages/tapestry-wc/dist/components/{p-DT6EbtzB.js → p-Dfwd-mRp.js} +2 -2
- package/dist/packages/tapestry-wc/dist/components/p-Dfwd-mRp.js.map +1 -0
- package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
- package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
- package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +3 -3
- package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
- package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
- package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
- package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
- package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
- package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
- package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
- package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js +5 -5
- package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
- package/dist/reactRender.css +1192 -1104
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +1192 -1104
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/tapestry-wc/dist/components/{p-Bc3D1UhE.js → p-BTLXo236.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-BTLXo236.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-asSY9hZ8.js → p-CFO7nxJf.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-CFO7nxJf.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-CNhTorvM.js → p-CtTGh3OQ.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-CtTGh3OQ.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-D8qDXp6N.js → p-DZSu2isL.js} +2 -2
- package/dist/tapestry-wc/dist/components/p-DZSu2isL.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-DT6EbtzB.js → p-Dfwd-mRp.js} +2 -2
- package/dist/tapestry-wc/dist/components/p-Dfwd-mRp.js.map +1 -0
- package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
- package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
- package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
- package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
- package/dist/unstable.css +195 -107
- package/dist/unstable.css.map +1 -1
- package/dist/utilities/buttonLinkShared.d.ts.map +1 -1
- package/package.json +8 -4
- package/dist/packages/tapestry-wc/dist/components/p-Bc3D1UhE.js.map +0 -1
- package/dist/packages/tapestry-wc/dist/components/p-CNhTorvM.js.map +0 -1
- package/dist/packages/tapestry-wc/dist/components/p-D8qDXp6N.js.map +0 -1
- package/dist/packages/tapestry-wc/dist/components/p-DT6EbtzB.js.map +0 -1
- package/dist/packages/tapestry-wc/dist/components/p-asSY9hZ8.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-Bc3D1UhE.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-CNhTorvM.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-D8qDXp6N.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-DT6EbtzB.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-asSY9hZ8.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,WAAW,GAAG;IACjB,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;IAE7D,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAuBD,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,WAAW,GAAG;IACjB,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;IAE7D,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAuBD,eAAO,MAAM,MAAM,GAAI,oCAKpB,WAAW,sBAcb,CAAA;AAED,eAAe,MAAM,CAAA"}
|
|
@@ -2,11 +2,13 @@ import "../button/btn.css";
|
|
|
2
2
|
import "./index.css";
|
|
3
3
|
import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
|
|
4
4
|
import React, { type ReactNode } from "react";
|
|
5
|
-
import type { ComboBoxProps as AriaComboBoxProps, Key, ListBoxItemProps,
|
|
5
|
+
import type { ComboBoxProps as AriaComboBoxProps, Key, ListBoxItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps } from "react-aria-components";
|
|
6
6
|
export type ComboBoxSize = "md" | "lg";
|
|
7
|
+
export type ComboBoxLoadingState = "error" | "filtering" | "idle" | "loading" | "loadingMore" | "sorting";
|
|
8
|
+
type ComboBoxChildren<T extends object> = NonNullable<AriaListBoxProps<T>["children"]>;
|
|
7
9
|
export interface ComboBoxProps<T extends object = object> {
|
|
8
|
-
/** The
|
|
9
|
-
children:
|
|
10
|
+
/** The contents of the listbox. */
|
|
11
|
+
children: ComboBoxChildren<T>;
|
|
10
12
|
/** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */
|
|
11
13
|
description?: string;
|
|
12
14
|
/** Disables the field and trigger button. */
|
|
@@ -19,17 +21,26 @@ export interface ComboBoxProps<T extends object = object> {
|
|
|
19
21
|
invalid?: boolean;
|
|
20
22
|
/** Accessible label for the field. */
|
|
21
23
|
label: string;
|
|
24
|
+
/**
|
|
25
|
+
* Async loading state for the listbox.
|
|
26
|
+
* - `"loading"`: while the collection is empty, replaces the empty state with a spinner.
|
|
27
|
+
* - `"loadingMore"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).
|
|
28
|
+
* - Other values render as `"idle"`.
|
|
29
|
+
*/
|
|
30
|
+
loadingState?: ComboBoxLoadingState;
|
|
22
31
|
/**
|
|
23
32
|
* Called when the selected value(s) change.
|
|
24
33
|
* Receives `Key[]` when `selectionMode` is `"multiple"`, otherwise `Key | null`.
|
|
25
34
|
*/
|
|
26
35
|
onChange?: ((value: Key | null) => void) | ((value: Key[]) => void);
|
|
36
|
+
/** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */
|
|
37
|
+
onLoadMore?: () => void;
|
|
27
38
|
/** Placeholder text for the input. */
|
|
28
39
|
placeholder?: string;
|
|
29
40
|
/** If `true`, allows the value to be read but not changed. */
|
|
30
41
|
readOnly?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
renderEmptyState?: (
|
|
42
|
+
/** Content to display when there are no items in the list. Defaults to "No results". */
|
|
43
|
+
renderEmptyState?: ReactNode | (() => ReactNode);
|
|
33
44
|
/** If `true`, appends an asterisk at the end of the label text. */
|
|
34
45
|
required?: boolean;
|
|
35
46
|
/** The size of the combo box. */
|
|
@@ -38,7 +49,7 @@ export interface ComboBoxProps<T extends object = object> {
|
|
|
38
49
|
type AriaComboBoxPropsToOmit = "slot";
|
|
39
50
|
type AriaComboBoxPropsToInclude = "allowsEmptyCollection" | "defaultInputValue" | "defaultItems" | "defaultValue" | "disabledKeys" | "inputValue" | "items" | "menuTrigger" | "name" | "onInputChange" | "selectionMode" | "value";
|
|
40
51
|
export type ComboBoxElementProps<T extends object = object> = CombineAriaPropsWithCustomProps<AriaComboBoxProps<T, "single" | "multiple">, ComboBoxProps<T>, AriaComboBoxPropsToOmit, AriaComboBoxPropsToInclude>;
|
|
41
|
-
export declare function ComboBox<T extends object>({ allowsEmptyCollection, children, className, description, disabled, filter, hideLabel, invalid, label, menuTrigger, onChange, placeholder, readOnly, renderEmptyState, required, size, ...restProps }: ComboBoxElementProps<T>): React.JSX.Element;
|
|
52
|
+
export declare function ComboBox<T extends object>({ allowsEmptyCollection, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger, onChange, onLoadMore, placeholder, readOnly, renderEmptyState, required, size, ...restProps }: ComboBoxElementProps<T>): React.JSX.Element;
|
|
42
53
|
export interface ComboBoxItemProps {
|
|
43
54
|
/** Disables the item. */
|
|
44
55
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,23 @@
|
|
|
1
|
+
import LoadingSpinner from '../internal/LoadingSpinner.js';
|
|
1
2
|
import Icon from '../../utilities/Icon.js';
|
|
2
3
|
import classNames from 'classnames';
|
|
3
4
|
import React__default from 'react';
|
|
4
|
-
import { ComboBox as ComboBox$1, Label, Group, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, Header } from 'react-aria-components';
|
|
5
|
+
import { ListBoxLoadMoreItem, ComboBox as ComboBox$1, Label, Group, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, Header, Collection } from 'react-aria-components';
|
|
5
6
|
|
|
6
|
-
function
|
|
7
|
+
function resolveEmptyState(value) {
|
|
8
|
+
return typeof value === "function" ? value() : value;
|
|
9
|
+
}
|
|
10
|
+
function ComboBox({ allowsEmptyCollection = true, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger, onChange, onLoadMore, placeholder, readOnly, renderEmptyState = "No results", required, size = "md", ...restProps }) {
|
|
7
11
|
const combinedClassName = classNames("tds-combo-box", { "tds-combo-box--lg": size === "lg" }, className);
|
|
12
|
+
const loadMoreItem = onLoadMore && (React__default.createElement(ListBoxLoadMoreItem, { className: "tds-combo-box-load-more", isLoading: loadingState === "loadingMore", onLoadMore: onLoadMore },
|
|
13
|
+
React__default.createElement("div", { "aria-label": "Loading more", role: "status" },
|
|
14
|
+
React__default.createElement(LoadingSpinner, null))));
|
|
15
|
+
const renderChildren = () => {
|
|
16
|
+
if (typeof children === "function") {
|
|
17
|
+
return (React__default.createElement(Collection, { items: restProps.items ?? restProps.defaultItems }, children));
|
|
18
|
+
}
|
|
19
|
+
return children;
|
|
20
|
+
};
|
|
8
21
|
return (
|
|
9
22
|
// React Aria's ComboBox is generic over selection mode (M). We instantiate
|
|
10
23
|
// it with the union "single" | "multiple" so value/defaultValue/selectionMode
|
|
@@ -20,8 +33,10 @@ function ComboBox({ allowsEmptyCollection = true, children, className, descripti
|
|
|
20
33
|
React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#down-caret" }))),
|
|
21
34
|
React__default.createElement(Popover, { className: "tds-combo-box-popover" },
|
|
22
35
|
React__default.createElement(ListBox, { className: "tds-combo-box-list", renderEmptyState: allowsEmptyCollection
|
|
23
|
-
? (
|
|
24
|
-
: undefined },
|
|
36
|
+
? () => (React__default.createElement("div", { "aria-label": loadingState === "loading" ? "Loading" : undefined, className: "tds-combo-box-empty-state", role: loadingState === "loading" ? "status" : undefined }, loadingState === "loading" ? (React__default.createElement(LoadingSpinner, null)) : (resolveEmptyState(renderEmptyState))))
|
|
37
|
+
: undefined },
|
|
38
|
+
renderChildren(),
|
|
39
|
+
loadMoreItem)),
|
|
25
40
|
description && (React__default.createElement(Text, { className: "tds-combo-box-description", slot: "description" },
|
|
26
41
|
React__default.createElement(Icon, { "aria-hidden": true, className: "tds-combo-box-description-invalid-icon", symbol: "general#exclamation-triangle" }),
|
|
27
42
|
description))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode } from \"react\"\nimport type {\n ComboBoxProps as AriaComboBoxProps,\n Key,\n ListBoxItemProps,\n ListBoxRenderProps,\n ListBoxSectionProps,\n} from \"react-aria-components\"\nimport {\n Button,\n ComboBox as AriaComboBox,\n Group,\n Header,\n Input,\n Label,\n ListBox,\n ListBoxItem,\n ListBoxSection,\n Popover,\n Text,\n} from \"react-aria-components\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport interface ComboBoxProps<T extends object = object> {\n /** The children of the combo box (ComboBoxItem elements or a render function). */\n children: ReactNode | ((item: T) => ReactNode)\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: string\n /** Disables the field and trigger button. */\n disabled?: boolean\n /** Custom filter function for determining if an item should appear in the list. */\n filter?: (textValue: string, inputValue: string) => boolean\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 /** Accessible label for the field. */\n label: string\n /**\n * Called when the selected value(s) change.\n * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n */\n onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n /** Placeholder text for the input. */\n placeholder?: string\n /** If `true`, allows the value to be read but not changed. */\n readOnly?: boolean\n /** Provides content to display when there are no items in the list. */\n renderEmptyState?: (props: ListBoxRenderProps) => ReactNode\n /** If `true`, appends an asterisk at the end of the label text. */\n required?: boolean\n /** The size of the combo box. */\n size?: ComboBoxSize\n}\n\ntype AriaComboBoxPropsToOmit = \"slot\"\n\ntype AriaComboBoxPropsToInclude =\n | \"allowsEmptyCollection\"\n | \"defaultInputValue\"\n | \"defaultItems\"\n | \"defaultValue\"\n | \"disabledKeys\"\n | \"inputValue\"\n | \"items\"\n | \"menuTrigger\"\n | \"name\"\n | \"onInputChange\"\n | \"selectionMode\"\n | \"value\"\n\nexport type ComboBoxElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n AriaComboBoxProps<T, \"single\" | \"multiple\">,\n ComboBoxProps<T>,\n AriaComboBoxPropsToOmit,\n AriaComboBoxPropsToInclude\n >\n\nexport function ComboBox<T extends object>({\n allowsEmptyCollection = true,\n children,\n className,\n description,\n disabled,\n filter,\n hideLabel,\n invalid,\n label,\n menuTrigger,\n onChange,\n placeholder,\n readOnly,\n renderEmptyState = () => \"No results\",\n required,\n size = \"md\",\n ...restProps\n}: ComboBoxElementProps<T>) {\n const combinedClassName = classNames(\n \"tds-combo-box\",\n { \"tds-combo-box--lg\": size === \"lg\" },\n className\n )\n\n return (\n // React Aria's ComboBox is generic over selection mode (M). We instantiate\n // it with the union \"single\" | \"multiple\" so value/defaultValue/selectionMode\n // accept both shapes. onChange still needs a cast because our type is a union\n // of function types (to allow narrower handlers like\n // `setValue: (Key|null) => void`), which isn't assignable to RAC's\n // single-function signature.\n <AriaComboBox<T, \"single\" | \"multiple\">\n {...restProps}\n allowsEmptyCollection={allowsEmptyCollection}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n defaultFilter={filter}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n menuTrigger={menuTrigger}\n onChange={onChange as (value: Key | Key[] | null) => void}\n >\n {!hideLabel && <Label className=\"tds-combo-box-label\">{label}</Label>}\n <Group className=\"tds-combo-box-field\">\n <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n <Button\n className={classNames(\n \"tds-combo-box-button\",\n menuTrigger !== \"focus\" && \"tds-btn tds-btn--infield\"\n )}\n >\n <Icon aria-hidden symbol=\"general#down-caret\" />\n </Button>\n </Group>\n <Popover className=\"tds-combo-box-popover\">\n <ListBox\n className=\"tds-combo-box-list\"\n renderEmptyState={\n allowsEmptyCollection\n ? (props) => (\n <div className=\"tds-combo-box-empty-state\">\n {renderEmptyState(props)}\n </div>\n )\n : undefined\n }\n >\n {children}\n </ListBox>\n </Popover>\n {description && (\n <Text className=\"tds-combo-box-description\" slot=\"description\">\n <Icon\n aria-hidden\n className=\"tds-combo-box-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaComboBox>\n )\n}\n\nexport interface ComboBoxItemProps {\n /** Disables the item. */\n disabled?: boolean\n}\n\ntype AriaListBoxItemPropsToOmit = \"isDisabled\"\n\ntype AriaListBoxItemPropsToInclude = \"onAction\" | \"textValue\" | \"value\"\n\nexport type ComboBoxItemElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n ListBoxItemProps<T>,\n ComboBoxItemProps,\n AriaListBoxItemPropsToOmit,\n AriaListBoxItemPropsToInclude\n >\n\nexport function ComboBoxItem<T extends object>({\n className,\n disabled,\n ...restProps\n}: ComboBoxItemElementProps<T>) {\n return (\n <ListBoxItem\n {...restProps}\n className={classNames(\"tds-combo-box-list-item\", className)}\n isDisabled={disabled}\n />\n )\n}\n\nexport interface ComboBoxSectionProps {\n /** The items rendered within the section. */\n children: ReactNode\n /** Optional heading text rendered above the section's items. */\n title?: string\n}\n\ntype AriaListBoxSectionPropsToInclude = \"dependencies\"\n\nexport type ComboBoxSectionElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n ListBoxSectionProps<T>,\n ComboBoxSectionProps,\n never,\n AriaListBoxSectionPropsToInclude\n >\n\nexport function ComboBoxSection<T extends object>({\n children,\n className,\n title,\n ...restProps\n}: ComboBoxSectionElementProps<T>) {\n return (\n <ListBoxSection\n {...restProps}\n className={classNames(\"tds-combo-box-list-section\", className)}\n >\n {title && (\n <Header className=\"tds-combo-box-section-header\">{title}</Header>\n )}\n {children}\n </ListBoxSection>\n )\n}\n"],"names":["React","AriaComboBox"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"./index.css\"\n\nimport LoadingSpinner from \"@components/internal/LoadingSpinner\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode } from \"react\"\nimport type {\n ComboBoxProps as AriaComboBoxProps,\n Key,\n ListBoxItemProps,\n ListBoxProps as AriaListBoxProps,\n ListBoxSectionProps,\n} from \"react-aria-components\"\nimport {\n Button,\n Collection,\n ComboBox as AriaComboBox,\n Group,\n Header,\n Input,\n Label,\n ListBox,\n ListBoxItem,\n ListBoxLoadMoreItem,\n ListBoxSection,\n Popover,\n Text,\n} from \"react-aria-components\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport type ComboBoxLoadingState =\n | \"error\"\n | \"filtering\"\n | \"idle\"\n | \"loading\"\n | \"loadingMore\"\n | \"sorting\"\n\ntype ComboBoxChildren<T extends object> = NonNullable<\n AriaListBoxProps<T>[\"children\"]\n>\n\nexport interface ComboBoxProps<T extends object = object> {\n /** The contents of the listbox. */\n children: ComboBoxChildren<T>\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: string\n /** Disables the field and trigger button. */\n disabled?: boolean\n /** Custom filter function for determining if an item should appear in the list. */\n filter?: (textValue: string, inputValue: string) => boolean\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 /** Accessible label for the field. */\n label: string\n /**\n * Async loading state for the listbox.\n * - `\"loading\"`: while the collection is empty, replaces the empty state with a spinner.\n * - `\"loadingMore\"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).\n * - Other values render as `\"idle\"`.\n */\n loadingState?: ComboBoxLoadingState\n /**\n * Called when the selected value(s) change.\n * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n */\n onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */\n onLoadMore?: () => void\n /** Placeholder text for the input. */\n placeholder?: string\n /** If `true`, allows the value to be read but not changed. */\n readOnly?: boolean\n /** Content to display when there are no items in the list. Defaults to \"No results\". */\n renderEmptyState?: ReactNode | (() => ReactNode)\n /** If `true`, appends an asterisk at the end of the label text. */\n required?: boolean\n /** The size of the combo box. */\n size?: ComboBoxSize\n}\n\ntype AriaComboBoxPropsToOmit = \"slot\"\n\ntype AriaComboBoxPropsToInclude =\n | \"allowsEmptyCollection\"\n | \"defaultInputValue\"\n | \"defaultItems\"\n | \"defaultValue\"\n | \"disabledKeys\"\n | \"inputValue\"\n | \"items\"\n | \"menuTrigger\"\n | \"name\"\n | \"onInputChange\"\n | \"selectionMode\"\n | \"value\"\n\nexport type ComboBoxElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n AriaComboBoxProps<T, \"single\" | \"multiple\">,\n ComboBoxProps<T>,\n AriaComboBoxPropsToOmit,\n AriaComboBoxPropsToInclude\n >\n\nfunction resolveEmptyState(value: ReactNode | (() => ReactNode)): ReactNode {\n return typeof value === \"function\" ? value() : value\n}\n\nexport function ComboBox<T extends object>({\n allowsEmptyCollection = true,\n children,\n className,\n description,\n disabled,\n filter,\n hideLabel,\n invalid,\n label,\n loadingState,\n menuTrigger,\n onChange,\n onLoadMore,\n placeholder,\n readOnly,\n renderEmptyState = \"No results\",\n required,\n size = \"md\",\n ...restProps\n}: ComboBoxElementProps<T>) {\n const combinedClassName = classNames(\n \"tds-combo-box\",\n { \"tds-combo-box--lg\": size === \"lg\" },\n className\n )\n\n const loadMoreItem = onLoadMore && (\n <ListBoxLoadMoreItem\n className=\"tds-combo-box-load-more\"\n isLoading={loadingState === \"loadingMore\"}\n onLoadMore={onLoadMore}\n >\n <div aria-label=\"Loading more\" role=\"status\">\n <LoadingSpinner />\n </div>\n </ListBoxLoadMoreItem>\n )\n\n const renderChildren = () => {\n if (typeof children === \"function\") {\n return (\n <Collection items={restProps.items ?? restProps.defaultItems}>\n {children}\n </Collection>\n )\n }\n return children\n }\n\n return (\n // React Aria's ComboBox is generic over selection mode (M). We instantiate\n // it with the union \"single\" | \"multiple\" so value/defaultValue/selectionMode\n // accept both shapes. onChange still needs a cast because our type is a union\n // of function types (to allow narrower handlers like\n // `setValue: (Key|null) => void`), which isn't assignable to RAC's\n // single-function signature.\n <AriaComboBox<T, \"single\" | \"multiple\">\n {...restProps}\n allowsEmptyCollection={allowsEmptyCollection}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n defaultFilter={filter}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n menuTrigger={menuTrigger}\n onChange={onChange as (value: Key | Key[] | null) => void}\n >\n {!hideLabel && <Label className=\"tds-combo-box-label\">{label}</Label>}\n <Group className=\"tds-combo-box-field\">\n <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n <Button\n className={classNames(\n \"tds-combo-box-button\",\n menuTrigger !== \"focus\" && \"tds-btn tds-btn--infield\"\n )}\n >\n <Icon aria-hidden symbol=\"general#down-caret\" />\n </Button>\n </Group>\n <Popover className=\"tds-combo-box-popover\">\n <ListBox\n className=\"tds-combo-box-list\"\n renderEmptyState={\n allowsEmptyCollection\n ? () => (\n <div\n aria-label={\n loadingState === \"loading\" ? \"Loading\" : undefined\n }\n className=\"tds-combo-box-empty-state\"\n role={loadingState === \"loading\" ? \"status\" : undefined}\n >\n {loadingState === \"loading\" ? (\n <LoadingSpinner />\n ) : (\n resolveEmptyState(renderEmptyState)\n )}\n </div>\n )\n : undefined\n }\n >\n {renderChildren()}\n {loadMoreItem}\n </ListBox>\n </Popover>\n {description && (\n <Text className=\"tds-combo-box-description\" slot=\"description\">\n <Icon\n aria-hidden\n className=\"tds-combo-box-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaComboBox>\n )\n}\n\nexport interface ComboBoxItemProps {\n /** Disables the item. */\n disabled?: boolean\n}\n\ntype AriaListBoxItemPropsToOmit = \"isDisabled\"\n\ntype AriaListBoxItemPropsToInclude = \"onAction\" | \"textValue\" | \"value\"\n\nexport type ComboBoxItemElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n ListBoxItemProps<T>,\n ComboBoxItemProps,\n AriaListBoxItemPropsToOmit,\n AriaListBoxItemPropsToInclude\n >\n\nexport function ComboBoxItem<T extends object>({\n className,\n disabled,\n ...restProps\n}: ComboBoxItemElementProps<T>) {\n return (\n <ListBoxItem\n {...restProps}\n className={classNames(\"tds-combo-box-list-item\", className)}\n isDisabled={disabled}\n />\n )\n}\n\nexport interface ComboBoxSectionProps {\n /** The items rendered within the section. */\n children: ReactNode\n /** Optional heading text rendered above the section's items. */\n title?: string\n}\n\ntype AriaListBoxSectionPropsToInclude = \"dependencies\"\n\nexport type ComboBoxSectionElementProps<T extends object = object> =\n CombineAriaPropsWithCustomProps<\n ListBoxSectionProps<T>,\n ComboBoxSectionProps,\n never,\n AriaListBoxSectionPropsToInclude\n >\n\nexport function ComboBoxSection<T extends object>({\n children,\n className,\n title,\n ...restProps\n}: ComboBoxSectionElementProps<T>) {\n return (\n <ListBoxSection\n {...restProps}\n className={classNames(\"tds-combo-box-list-section\", className)}\n >\n {title && (\n <Header className=\"tds-combo-box-section-header\">{title}</Header>\n )}\n {children}\n </ListBoxSection>\n )\n}\n"],"names":["React","AriaComboBox"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./index.css";
|
|
2
|
-
export type { ComboBoxElementProps, ComboBoxItemElementProps, ComboBoxItemProps, ComboBoxProps, ComboBoxSectionElementProps, ComboBoxSectionProps, ComboBoxSize, } from "./ComboBox";
|
|
2
|
+
export type { ComboBoxElementProps, ComboBoxItemElementProps, ComboBoxItemProps, ComboBoxLoadingState, ComboBoxProps, ComboBoxSectionElementProps, ComboBoxSectionProps, ComboBoxSize, } from "./ComboBox";
|
|
3
3
|
export { ComboBox, ComboBoxItem, ComboBoxSection } from "./ComboBox";
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,oBAAoB,EACpB,wBAAwB,EACxB,iBAAiB,EACjB,aAAa,EACb,2BAA2B,EAC3B,oBAAoB,EACpB,YAAY,GACb,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,oBAAoB,EACpB,wBAAwB,EACxB,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,2BAA2B,EAC3B,oBAAoB,EACpB,YAAY,GACb,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,aAAa,CAAA;AAEpB,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,EAWL,KAAK,eAAe,IAAI,mBAAmB,EAS5C,MAAM,uBAAuB,CAAA;AAU9B,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAA;AAepD,MAAM,WAAW,eAAe;IAC9B,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IACtE,qGAAqG;IACrG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wFAAwF;IACxF,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAA;IAChD,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;CACnC;AAED,KAAK,yBAAyB,GAC1B,UAAU,GACV,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,GACd,WAAW,GACX,cAAc,GACd,kBAAkB,GAClB,qBAAqB,GACrB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,4BAA4B,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;AAEtE,MAAM,MAAM,sBAAsB,GAAG,+BAA+B,CAClE,mBAAmB,CAAC,SAAS,CAAC,EAC9B,eAAe,EACf,yBAAyB,EACzB,4BAA4B,CAC7B,CAAA;AAsOD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,KAAK,EACL,GAAG,SAAS,EACb,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,aAAa,CAAA;AAEpB,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,EAWL,KAAK,eAAe,IAAI,mBAAmB,EAS5C,MAAM,uBAAuB,CAAA;AAU9B,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAA;AAepD,MAAM,WAAW,eAAe;IAC9B,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IACtE,qGAAqG;IACrG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wFAAwF;IACxF,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAA;IAChD,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;CACnC;AAED,KAAK,yBAAyB,GAC1B,UAAU,GACV,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,GACd,WAAW,GACX,cAAc,GACd,kBAAkB,GAClB,qBAAqB,GACrB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,4BAA4B,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;AAEtE,MAAM,MAAM,sBAAsB,GAAG,+BAA+B,CAClE,mBAAmB,CAAC,SAAS,CAAC,EAC9B,eAAe,EACf,yBAAyB,EACzB,4BAA4B,CAC7B,CAAA;AAsOD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,KAAK,EACL,GAAG,SAAS,EACb,EAAE,sBAAsB,qBAmFxB;yBApGe,UAAU"}
|
|
@@ -57,7 +57,7 @@ function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
|
|
|
57
57
|
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)),
|
|
58
58
|
activeOverlay ? (React__default.createElement(Button, { "aria-label": `Close ${activeOverlay} picker`, className: "tds-date-picker-calendar-nav", onPress: () => setActiveOverlay(null), slot: null },
|
|
59
59
|
React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#x" }))) : (React__default.createElement(React__default.Fragment, null,
|
|
60
|
-
React__default.createElement(Button, { "aria-label": "Go to today", className: "tds-date-picker-calendar-nav", style: {
|
|
60
|
+
React__default.createElement(Button, { "aria-label": "Go to today", className: "tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg", style: {
|
|
61
61
|
visibility: focusedDate.month === today.month &&
|
|
62
62
|
focusedDate.year === today.year
|
|
63
63
|
? "hidden"
|
|
@@ -66,7 +66,7 @@ function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
|
|
|
66
66
|
state.setFocusedDate(today);
|
|
67
67
|
state.setFocused(true);
|
|
68
68
|
}, slot: null },
|
|
69
|
-
React__default.createElement("svg", { "aria-hidden": true, fill: "currentColor", viewBox: "0 0 16 16", height: "
|
|
69
|
+
React__default.createElement("svg", { "aria-hidden": true, fill: "currentColor", viewBox: "0 0 16 16", height: "0.875em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
|
|
70
70
|
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" }),
|
|
71
71
|
React__default.createElement("circle", { cx: "8", cy: "9.75", r: "2.25" }))),
|
|
72
72
|
React__default.createElement(Button, { "aria-label": "Previous month", className: "tds-date-picker-calendar-nav", slot: "previous" },
|
|
@@ -108,7 +108,9 @@ function DatePicker({ className, description, disabled, firstDayOfWeek, hideLabe
|
|
|
108
108
|
: "tds-date-picker-segment", segment: segment }))),
|
|
109
109
|
React__default.createElement(Button, { className: "tds-btn tds-btn--infield tds-date-picker-button" },
|
|
110
110
|
React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#calendar" }))),
|
|
111
|
-
React__default.createElement(Popover, { className: "tds-date-picker-popover"
|
|
111
|
+
React__default.createElement(Popover, { className: classNames("tds-date-picker-popover", {
|
|
112
|
+
"tds-date-picker-popover--lg": size === "lg",
|
|
113
|
+
}), offset: 2 },
|
|
112
114
|
React__default.createElement(Calendar, { className: "tds-date-picker-calendar", firstDayOfWeek: firstDayOfWeek },
|
|
113
115
|
React__default.createElement(DatePickerCalendarBody, { activeOverlay: activeOverlay, setActiveOverlay: setActiveOverlay }))),
|
|
114
116
|
description && (React__default.createElement(Text, { elementType: "p", className: "tds-date-picker-description", slot: "description" },
|
|
@@ -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 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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"}
|
|
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 tds-date-picker-calendar-nav--lg\"\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=\"0.875em\"\n width=\"1em\"\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\n className={classNames(\"tds-date-picker-popover\", {\n \"tds-date-picker-popover--lg\": size === \"lg\",\n })}\n offset={2}\n >\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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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '../../packages/tapestry-wc/dist/components/p-
|
|
1
|
+
import '../../packages/tapestry-wc/dist/components/p-DZSu2isL.js';
|
|
2
2
|
import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-page-header.js';
|
|
3
3
|
import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-page-header-nav.js';
|
|
4
4
|
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import "./index.css";
|
|
2
2
|
import React, { type SelectHTMLAttributes } from "react";
|
|
3
3
|
export type SelectSize = "lg" | "md";
|
|
4
|
+
/**
|
|
5
|
+
* String-labelled option variant. Valid in both native (`complex={false}`)
|
|
6
|
+
* and complex (`complex={true}`) modes. The `label` doubles as the type-ahead
|
|
7
|
+
* search target.
|
|
8
|
+
*/
|
|
4
9
|
export interface SelectOptionWithTextLabel {
|
|
10
|
+
/** Arbitrary `data-*` attributes are forwarded to the rendered option. */
|
|
5
11
|
[key: `data-${string}`]: boolean | number | string | undefined;
|
|
6
12
|
/** Whether this option is non-interactive. */
|
|
7
13
|
disabled?: boolean;
|
|
@@ -9,19 +15,40 @@ export interface SelectOptionWithTextLabel {
|
|
|
9
15
|
/** Displayed as the option content and used for type-ahead matching. */
|
|
10
16
|
label: string;
|
|
11
17
|
textValue?: never;
|
|
18
|
+
/** Unique identifier for the option. */
|
|
12
19
|
value: string;
|
|
13
20
|
}
|
|
21
|
+
/**
|
|
22
|
+
* Rich-content option variant. The popover (`complex={true}`) renders the
|
|
23
|
+
* `label` node directly; the native `<select>` (`complex={false}`) falls back
|
|
24
|
+
* to `textValue` for the visible text. Requires a plain-text `textValue` so
|
|
25
|
+
* type-ahead matching, screen reader announcements, and the native fallback
|
|
26
|
+
* all have something stable to use.
|
|
27
|
+
*/
|
|
14
28
|
export interface SelectOptionWithNodeLabel {
|
|
29
|
+
/** Arbitrary `data-*` attributes are forwarded to the rendered option. */
|
|
15
30
|
[key: `data-${string}`]: boolean | number | string | undefined;
|
|
16
31
|
/** Whether this option is non-interactive. */
|
|
17
32
|
disabled?: boolean;
|
|
18
33
|
divider?: never;
|
|
19
|
-
/**
|
|
34
|
+
/**
|
|
35
|
+
* Option content. Rendered as JSX in complex mode; in native mode, the
|
|
36
|
+
* visible text comes from `textValue` instead.
|
|
37
|
+
*/
|
|
20
38
|
label: React.ReactNode;
|
|
21
|
-
/**
|
|
39
|
+
/**
|
|
40
|
+
* Plain-text fallback for type-ahead matching, screen reader
|
|
41
|
+
* announcements, and the native `<select>`'s visible option text when
|
|
42
|
+
* `label` is a React node.
|
|
43
|
+
*/
|
|
22
44
|
textValue: string;
|
|
45
|
+
/** Unique identifier for the option. */
|
|
23
46
|
value: string;
|
|
24
47
|
}
|
|
48
|
+
/**
|
|
49
|
+
* Visual-separator option variant. Renders a divider line between options
|
|
50
|
+
* (or between groups of options). Carries no value of its own.
|
|
51
|
+
*/
|
|
25
52
|
export interface SelectOptionDivider {
|
|
26
53
|
disabled?: never;
|
|
27
54
|
/** Renders a visual separator between options. */
|
|
@@ -31,21 +58,38 @@ export interface SelectOptionDivider {
|
|
|
31
58
|
value?: never;
|
|
32
59
|
}
|
|
33
60
|
export type SelectOption = SelectOptionDivider | SelectOptionWithNodeLabel | SelectOptionWithTextLabel;
|
|
61
|
+
/**
|
|
62
|
+
* A group entry in `Select`'s `options` array. Renders a heading above its
|
|
63
|
+
* `options` and nests them visually beneath it.
|
|
64
|
+
*/
|
|
34
65
|
export interface SelectOptionsGroup {
|
|
35
|
-
/**
|
|
66
|
+
/**
|
|
67
|
+
* Whether all options in this group are non-interactive. Disables every
|
|
68
|
+
* nested option regardless of its own `disabled` flag.
|
|
69
|
+
*/
|
|
36
70
|
disabled?: boolean;
|
|
37
71
|
/** Visible heading displayed above the group's options. */
|
|
38
72
|
label: string;
|
|
39
|
-
/** The selectable options
|
|
73
|
+
/** The selectable options nested under this group. */
|
|
40
74
|
options: SelectOption[];
|
|
41
75
|
}
|
|
42
76
|
export type SelectItem = SelectOption | SelectOptionsGroup;
|
|
43
77
|
interface SelectBaseProps {
|
|
44
|
-
/**
|
|
78
|
+
/**
|
|
79
|
+
* When true, renders as a popover listbox instead of a native `<select>`.
|
|
80
|
+
* Enables rich content in options (icons, descriptions).
|
|
81
|
+
*/
|
|
45
82
|
complex?: boolean;
|
|
46
|
-
/**
|
|
83
|
+
/**
|
|
84
|
+
* Helper text displayed below the select. Styled as error text when
|
|
85
|
+
* `invalid`. Defaults to `"Please select an option"` when `invalid` is true
|
|
86
|
+
* and no description is provided.
|
|
87
|
+
*/
|
|
47
88
|
description?: string;
|
|
48
|
-
/**
|
|
89
|
+
/**
|
|
90
|
+
* Whether the select is in an invalid state. Shows the default description
|
|
91
|
+
* if none is provided.
|
|
92
|
+
*/
|
|
49
93
|
invalid?: boolean;
|
|
50
94
|
/** A flat or mixed array of options and option groups. */
|
|
51
95
|
options: SelectItem[];
|
|
@@ -57,7 +101,10 @@ interface SelectBaseProps {
|
|
|
57
101
|
interface SelectWithVisibleLabel extends SelectBaseProps {
|
|
58
102
|
/** If true, the label is visually hidden and set as aria-label. */
|
|
59
103
|
hideLabel?: false;
|
|
60
|
-
/**
|
|
104
|
+
/**
|
|
105
|
+
* The label text for the select. Required unless `aria-label` or
|
|
106
|
+
* `aria-labelledby` is provided.
|
|
107
|
+
*/
|
|
61
108
|
label: string;
|
|
62
109
|
}
|
|
63
110
|
interface SelectWithHiddenLabel extends SelectBaseProps {
|
|
@@ -73,7 +120,10 @@ interface SelectWithAriaLabel extends SelectBaseProps {
|
|
|
73
120
|
label?: never;
|
|
74
121
|
}
|
|
75
122
|
interface SelectWithAriaLabelledBy extends SelectBaseProps {
|
|
76
|
-
/**
|
|
123
|
+
/**
|
|
124
|
+
* ID of an external label element. Use instead of `label` when a visible
|
|
125
|
+
* label exists elsewhere on the page.
|
|
126
|
+
*/
|
|
77
127
|
"aria-labelledby": string;
|
|
78
128
|
hideLabel?: never;
|
|
79
129
|
label?: never;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAc,KAAK,oBAAoB,EAAU,MAAM,OAAO,CAAA;AAS5E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAA;AAEpC,MAAM,WAAW,yBAAyB;IACxC,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9D,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,yBAAyB;IACxC,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9D,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type SelectHTMLAttributes, useRef } from \"react\"\n\nimport { SelectNative } from \"./SelectNative\"\nimport { SelectPopover } from \"./SelectPopover\"\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type SelectSize = \"lg\" | \"md\"\n\nexport interface SelectOptionWithTextLabel {\n [key: `data-${string}`]: boolean | number | string | undefined\n /** Whether this option is non-interactive. */\n disabled?: boolean\n divider?: never\n /** Displayed as the option content and used for type-ahead matching. */\n label: string\n textValue?: never\n value: string\n}\n\nexport interface SelectOptionWithNodeLabel {\n [key: `data-${string}`]: boolean | number | string | undefined\n /** Whether this option is non-interactive. */\n disabled?: boolean\n divider?: never\n /** Displayed as the option content. Accepts React nodes in complex mode. */\n label: React.ReactNode\n /** Plain-text fallback for type-ahead matching when `label` is a React node. */\n textValue: string\n value: string\n}\n\nexport interface SelectOptionDivider {\n disabled?: never\n /** Renders a visual separator between options. */\n divider: true\n label?: never\n textValue?: never\n value?: never\n}\n\nexport type SelectOption =\n | SelectOptionDivider\n | SelectOptionWithNodeLabel\n | SelectOptionWithTextLabel\n\nexport interface SelectOptionsGroup {\n /** Whether all options in this group are non-interactive. */\n disabled?: boolean\n /** Visible heading displayed above the group's options. */\n label: string\n /** The selectable options within this group. */\n options: SelectOption[]\n}\n\nexport type SelectItem = SelectOption | SelectOptionsGroup\n\n// ---------------------------------------------------------------------------\n// Select component props\n// ---------------------------------------------------------------------------\n\ninterface SelectBaseProps {\n /** When true, renders as a popover listbox instead of a native `<select>`. */\n complex?: boolean\n /** Helper text displayed below the select. Styled as error text when `invalid`. */\n description?: string\n /** Whether the select is in an invalid state. */\n invalid?: boolean\n /** A flat or mixed array of options and option groups. */\n options: SelectItem[]\n /** Placeholder text shown when no option is selected. Defaults to `\"Select an option\"`. */\n placeholder?: string\n /** The size of the select. */\n size?: SelectSize\n}\n\ninterface SelectWithVisibleLabel extends SelectBaseProps {\n /** If true, the label is visually hidden and set as aria-label. */\n hideLabel?: false\n /** The label text for the select. */\n label: string\n}\n\ninterface SelectWithHiddenLabel extends SelectBaseProps {\n /** If true, the label is visually hidden and set as aria-label. */\n hideLabel: true\n /** The label text for the select. Must be a string when hidden. */\n label: string\n}\n\ninterface SelectWithAriaLabel extends SelectBaseProps {\n /** Accessible label for the select. Use when no visible label exists. */\n \"aria-label\": string\n hideLabel?: never\n label?: never\n}\n\ninterface SelectWithAriaLabelledBy extends SelectBaseProps {\n /** ID of an external label element. Use instead of `label`. */\n \"aria-labelledby\": string\n hideLabel?: never\n label?: never\n}\n\nexport type SelectProps =\n | SelectWithAriaLabel\n | SelectWithAriaLabelledBy\n | SelectWithHiddenLabel\n | SelectWithVisibleLabel\n\ntype BaseSelectElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectProps | \"multiple\" | \"size\"\n>\n\nexport type NativeSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex?: false\n }\n\nexport type ComplexSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex: true\n }\n\nexport type SelectElementProps =\n | NativeSelectElementProps\n | ComplexSelectElementProps\n\nfunction normalizeSelectValue(\n value:\n | NativeSelectElementProps[\"defaultValue\"]\n | NativeSelectElementProps[\"value\"]\n | ComplexSelectElementProps[\"defaultValue\"]\n | ComplexSelectElementProps[\"value\"]\n) {\n if (value === undefined || value === null) return undefined\n if (Array.isArray(value)) return value[0]\n return String(value)\n}\n\n// ---------------------------------------------------------------------------\n// Select (public)\n// ---------------------------------------------------------------------------\n\nexport const Select = forwardRef<HTMLSelectElement, SelectElementProps>(\n function Select(props: SelectElementProps, ref) {\n const {\n \"aria-label\": userAriaLabel,\n \"aria-labelledby\": userAriaLabelledBy,\n className,\n complex,\n defaultValue,\n description,\n hideLabel,\n id,\n invalid,\n label,\n onChange,\n options,\n placeholder,\n required,\n size,\n value,\n ...restProps\n } = props\n\n const triggerRef = useRef<HTMLButtonElement>(null)\n const stableId = useId()\n const controlId = id || `tds-select-${stableId}`\n const labelId = `${controlId}-label`\n const resolvedDescription =\n description || (invalid ? \"Please select an option\" : undefined)\n const descriptionId = resolvedDescription\n ? `${controlId}-description`\n : undefined\n const computedClassName = classNames(\n \"tds-select\",\n {\n \"tds-select--invalid\": invalid,\n \"tds-select--lg\": size === \"lg\",\n \"tds-select--required\": required,\n },\n className\n )\n\n const normalizedDefaultValue = normalizeSelectValue(defaultValue)\n const normalizedValue = normalizeSelectValue(value)\n\n const computedDefaultValue =\n normalizedDefaultValue === undefined && normalizedValue === undefined\n ? \"\"\n : normalizedDefaultValue\n const effectivePlaceholder =\n normalizedDefaultValue !== undefined && normalizedDefaultValue !== \"\"\n ? null\n : placeholder || \"Select an option\"\n const showLabel = !!label && !hideLabel\n const computedAriaLabel = userAriaLabel ?? (hideLabel ? label : undefined)\n const computedAriaLabelledBy =\n userAriaLabelledBy ??\n (computedAriaLabel || !showLabel ? undefined : labelId)\n\n const sharedControlProps = {\n ...restProps,\n \"aria-describedby\": descriptionId,\n \"aria-label\": computedAriaLabel,\n \"aria-labelledby\": computedAriaLabelledBy,\n defaultValue: computedDefaultValue,\n invalid,\n options,\n placeholder: effectivePlaceholder,\n required,\n value: normalizedValue,\n }\n\n const handleComplexLabelClick = () => triggerRef.current?.focus()\n\n const SelectComponent = complex ? SelectPopover : SelectNative\n\n return (\n <div className={computedClassName}>\n {showLabel &&\n (complex ? (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- mirrors native label click-to-focus; keyboard users interact with the combobox directly\n <div\n className=\"tds-select-label\"\n id={labelId}\n onClick={handleComplexLabelClick}\n >\n {label}\n </div>\n ) : (\n <label htmlFor={controlId} id={labelId}>\n {label}\n </label>\n ))}\n <SelectComponent\n {...sharedControlProps}\n ref={ref}\n id={controlId}\n onChange={onChange}\n {...(complex && { triggerRef })}\n />\n {resolvedDescription && descriptionId && (\n <p className=\"tds-select-description\" id={descriptionId}>\n <Icon\n aria-hidden\n className=\"tds-select-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {resolvedDescription}\n </p>\n )}\n </div>\n )\n }\n)\n\nSelect.displayName = \"Select\"\n"],"names":["React"],"mappings":";;;;;;;AAwIA,SAAS,oBAAoB,CAC3B,KAIsC,EAAA;AAEtC,IAAA,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;AAAE,QAAA,OAAO,SAAS;AAC3D,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK,CAAC,CAAC,CAAC;AACzC,IAAA,OAAO,MAAM,CAAC,KAAK,CAAC;AACtB;AAEA;AACA;AACA;AAEO,MAAM,MAAM,GAAG,UAAU,CAC9B,SAAS,MAAM,CAAC,KAAyB,EAAE,GAAG,EAAA;AAC5C,IAAA,MAAM,EACJ,YAAY,EAAE,aAAa,EAC3B,iBAAiB,EAAE,kBAAkB,EACrC,SAAS,EACT,OAAO,EACP,YAAY,EACZ,WAAW,EACX,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,SAAS,EACb,GAAG,KAAK;AAET,IAAA,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC;AAClD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,SAAS,GAAG,EAAE,IAAI,CAAA,WAAA,EAAc,QAAQ,EAAE;AAChD,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,SAAS,QAAQ;AACpC,IAAA,MAAM,mBAAmB,GACvB,WAAW,KAAK,OAAO,GAAG,yBAAyB,GAAG,SAAS,CAAC;IAClE,MAAM,aAAa,GAAG;UAClB,CAAA,EAAG,SAAS,CAAA,YAAA;UACZ,SAAS;AACb,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,YAAY,EACZ;AACE,QAAA,qBAAqB,EAAE,OAAO;QAC9B,gBAAgB,EAAE,IAAI,KAAK,IAAI;AAC/B,QAAA,sBAAsB,EAAE,QAAQ;KACjC,EACD,SAAS,CACV;AAED,IAAA,MAAM,sBAAsB,GAAG,oBAAoB,CAAC,YAAY,CAAC;AACjE,IAAA,MAAM,eAAe,GAAG,oBAAoB,CAAC,KAAK,CAAC;IAEnD,MAAM,oBAAoB,GACxB,sBAAsB,KAAK,SAAS,IAAI,eAAe,KAAK;AAC1D,UAAE;UACA,sBAAsB;IAC5B,MAAM,oBAAoB,GACxB,sBAAsB,KAAK,SAAS,IAAI,sBAAsB,KAAK;AACjE,UAAE;AACF,UAAE,WAAW,IAAI,kBAAkB;IACvC,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS;AACvC,IAAA,MAAM,iBAAiB,GAAG,aAAa,KAAK,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;IAC1E,MAAM,sBAAsB,GAC1B,kBAAkB;AAClB,SAAC,iBAAiB,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEzD,IAAA,MAAM,kBAAkB,GAAG;AACzB,QAAA,GAAG,SAAS;AACZ,QAAA,kBAAkB,EAAE,aAAa;AACjC,QAAA,YAAY,EAAE,iBAAiB;AAC/B,QAAA,iBAAiB,EAAE,sBAAsB;AACzC,QAAA,YAAY,EAAE,oBAAoB;QAClC,OAAO;QACP,OAAO;AACP,QAAA,WAAW,EAAE,oBAAoB;QACjC,QAAQ;AACR,QAAA,KAAK,EAAE,eAAe;KACvB;IAED,MAAM,uBAAuB,GAAG,MAAM,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE;IAEjE,MAAM,eAAe,GAAG,OAAO,GAAG,aAAa,GAAG,YAAY;AAE9D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC9B,SAAS;aACP,OAAO;;AAEN,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,kBAAkB,EAC5B,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,uBAAuB,EAAA,EAE/B,KAAK,CACF,KAENA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAA,EACnC,KAAK,CACA,CACT,CAAC;QACJA,cAAA,CAAA,aAAA,CAAC,eAAe,OACV,kBAAkB,EACtB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,SAAS,EACb,QAAQ,EAAE,QAAQ,EAAA,IACb,OAAO,IAAI,EAAE,UAAU,EAAE,CAAC,EAAA,CAC/B;QACD,mBAAmB,IAAI,aAAa,KACnCA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,wBAAwB,EAAC,EAAE,EAAE,aAAa,EAAA;YACrDA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,qCAAqC,EAC/C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,mBAAmB,CAClB,CACL,CACG;AAEV,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type SelectHTMLAttributes, useRef } from \"react\"\n\nimport { SelectNative } from \"./SelectNative\"\nimport { SelectPopover } from \"./SelectPopover\"\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type SelectSize = \"lg\" | \"md\"\n\n/**\n * String-labelled option variant. Valid in both native (`complex={false}`)\n * and complex (`complex={true}`) modes. The `label` doubles as the type-ahead\n * search target.\n */\nexport interface SelectOptionWithTextLabel {\n /** Arbitrary `data-*` attributes are forwarded to the rendered option. */\n [key: `data-${string}`]: boolean | number | string | undefined\n /** Whether this option is non-interactive. */\n disabled?: boolean\n divider?: never\n /** Displayed as the option content and used for type-ahead matching. */\n label: string\n textValue?: never\n /** Unique identifier for the option. */\n value: string\n}\n\n/**\n * Rich-content option variant. The popover (`complex={true}`) renders the\n * `label` node directly; the native `<select>` (`complex={false}`) falls back\n * to `textValue` for the visible text. Requires a plain-text `textValue` so\n * type-ahead matching, screen reader announcements, and the native fallback\n * all have something stable to use.\n */\nexport interface SelectOptionWithNodeLabel {\n /** Arbitrary `data-*` attributes are forwarded to the rendered option. */\n [key: `data-${string}`]: boolean | number | string | undefined\n /** Whether this option is non-interactive. */\n disabled?: boolean\n divider?: never\n /**\n * Option content. Rendered as JSX in complex mode; in native mode, the\n * visible text comes from `textValue` instead.\n */\n label: React.ReactNode\n /**\n * Plain-text fallback for type-ahead matching, screen reader\n * announcements, and the native `<select>`'s visible option text when\n * `label` is a React node.\n */\n textValue: string\n /** Unique identifier for the option. */\n value: string\n}\n\n/**\n * Visual-separator option variant. Renders a divider line between options\n * (or between groups of options). Carries no value of its own.\n */\nexport interface SelectOptionDivider {\n disabled?: never\n /** Renders a visual separator between options. */\n divider: true\n label?: never\n textValue?: never\n value?: never\n}\n\nexport type SelectOption =\n | SelectOptionDivider\n | SelectOptionWithNodeLabel\n | SelectOptionWithTextLabel\n\n/**\n * A group entry in `Select`'s `options` array. Renders a heading above its\n * `options` and nests them visually beneath it.\n */\nexport interface SelectOptionsGroup {\n /**\n * Whether all options in this group are non-interactive. Disables every\n * nested option regardless of its own `disabled` flag.\n */\n disabled?: boolean\n /** Visible heading displayed above the group's options. */\n label: string\n /** The selectable options nested under this group. */\n options: SelectOption[]\n}\n\nexport type SelectItem = SelectOption | SelectOptionsGroup\n\n// ---------------------------------------------------------------------------\n// Select component props\n// ---------------------------------------------------------------------------\n\ninterface SelectBaseProps {\n /**\n * When true, renders as a popover listbox instead of a native `<select>`.\n * Enables rich content in options (icons, descriptions).\n */\n complex?: boolean\n /**\n * Helper text displayed below the select. Styled as error text when\n * `invalid`. Defaults to `\"Please select an option\"` when `invalid` is true\n * and no description is provided.\n */\n description?: string\n /**\n * Whether the select is in an invalid state. Shows the default description\n * if none is provided.\n */\n invalid?: boolean\n /** A flat or mixed array of options and option groups. */\n options: SelectItem[]\n /** Placeholder text shown when no option is selected. Defaults to `\"Select an option\"`. */\n placeholder?: string\n /** The size of the select. */\n size?: SelectSize\n}\n\ninterface SelectWithVisibleLabel extends SelectBaseProps {\n /** If true, the label is visually hidden and set as aria-label. */\n hideLabel?: false\n /**\n * The label text for the select. Required unless `aria-label` or\n * `aria-labelledby` is provided.\n */\n label: string\n}\n\ninterface SelectWithHiddenLabel extends SelectBaseProps {\n /** If true, the label is visually hidden and set as aria-label. */\n hideLabel: true\n /** The label text for the select. Must be a string when hidden. */\n label: string\n}\n\ninterface SelectWithAriaLabel extends SelectBaseProps {\n /** Accessible label for the select. Use when no visible label exists. */\n \"aria-label\": string\n hideLabel?: never\n label?: never\n}\n\ninterface SelectWithAriaLabelledBy extends SelectBaseProps {\n /**\n * ID of an external label element. Use instead of `label` when a visible\n * label exists elsewhere on the page.\n */\n \"aria-labelledby\": string\n hideLabel?: never\n label?: never\n}\n\nexport type SelectProps =\n | SelectWithAriaLabel\n | SelectWithAriaLabelledBy\n | SelectWithHiddenLabel\n | SelectWithVisibleLabel\n\ntype BaseSelectElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectProps | \"multiple\" | \"size\"\n>\n\nexport type NativeSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex?: false\n }\n\nexport type ComplexSelectElementProps = BaseSelectElementProps &\n SelectProps & {\n complex: true\n }\n\nexport type SelectElementProps =\n | NativeSelectElementProps\n | ComplexSelectElementProps\n\nfunction normalizeSelectValue(\n value:\n | NativeSelectElementProps[\"defaultValue\"]\n | NativeSelectElementProps[\"value\"]\n | ComplexSelectElementProps[\"defaultValue\"]\n | ComplexSelectElementProps[\"value\"]\n) {\n if (value === undefined || value === null) return undefined\n if (Array.isArray(value)) return value[0]\n return String(value)\n}\n\n// ---------------------------------------------------------------------------\n// Select (public)\n// ---------------------------------------------------------------------------\n\nexport const Select = forwardRef<HTMLSelectElement, SelectElementProps>(\n function Select(props: SelectElementProps, ref) {\n const {\n \"aria-label\": userAriaLabel,\n \"aria-labelledby\": userAriaLabelledBy,\n className,\n complex,\n defaultValue,\n description,\n hideLabel,\n id,\n invalid,\n label,\n onChange,\n options,\n placeholder,\n required,\n size,\n value,\n ...restProps\n } = props\n\n const triggerRef = useRef<HTMLButtonElement>(null)\n const stableId = useId()\n const controlId = id || `tds-select-${stableId}`\n const labelId = `${controlId}-label`\n const resolvedDescription =\n description || (invalid ? \"Please select an option\" : undefined)\n const descriptionId = resolvedDescription\n ? `${controlId}-description`\n : undefined\n const computedClassName = classNames(\n \"tds-select\",\n {\n \"tds-select--invalid\": invalid,\n \"tds-select--lg\": size === \"lg\",\n \"tds-select--required\": required,\n },\n className\n )\n\n const normalizedDefaultValue = normalizeSelectValue(defaultValue)\n const normalizedValue = normalizeSelectValue(value)\n\n const computedDefaultValue =\n normalizedDefaultValue === undefined && normalizedValue === undefined\n ? \"\"\n : normalizedDefaultValue\n const effectivePlaceholder =\n normalizedDefaultValue !== undefined && normalizedDefaultValue !== \"\"\n ? null\n : placeholder || \"Select an option\"\n const showLabel = !!label && !hideLabel\n const computedAriaLabel = userAriaLabel ?? (hideLabel ? label : undefined)\n const computedAriaLabelledBy =\n userAriaLabelledBy ??\n (computedAriaLabel || !showLabel ? undefined : labelId)\n\n const sharedControlProps = {\n ...restProps,\n \"aria-describedby\": descriptionId,\n \"aria-label\": computedAriaLabel,\n \"aria-labelledby\": computedAriaLabelledBy,\n defaultValue: computedDefaultValue,\n invalid,\n options,\n placeholder: effectivePlaceholder,\n required,\n value: normalizedValue,\n }\n\n const handleComplexLabelClick = () => triggerRef.current?.focus()\n\n const SelectComponent = complex ? SelectPopover : SelectNative\n\n return (\n <div className={computedClassName}>\n {showLabel &&\n (complex ? (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- mirrors native label click-to-focus; keyboard users interact with the combobox directly\n <div\n className=\"tds-select-label\"\n id={labelId}\n onClick={handleComplexLabelClick}\n >\n {label}\n </div>\n ) : (\n <label htmlFor={controlId} id={labelId}>\n {label}\n </label>\n ))}\n <SelectComponent\n {...sharedControlProps}\n ref={ref}\n id={controlId}\n onChange={onChange}\n {...(complex && { triggerRef })}\n />\n {resolvedDescription && descriptionId && (\n <p className=\"tds-select-description\" id={descriptionId}>\n <Icon\n aria-hidden\n className=\"tds-select-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {resolvedDescription}\n </p>\n )}\n </div>\n )\n }\n)\n\nSelect.displayName = \"Select\"\n"],"names":["React"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '../../packages/tapestry-wc/dist/components/p-
|
|
1
|
+
import '../../packages/tapestry-wc/dist/components/p-DZSu2isL.js';
|
|
2
2
|
import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-sidenav.js';
|
|
3
3
|
import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-item.js';
|
|
4
4
|
import { defineCustomElement as defineCustomElement$3 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js';
|