@planningcenter/tapestry 3.5.0 → 3.6.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/combo-box/ComboBox.d.ts +1 -1
- package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
- package/dist/components/combo-box/ComboBox.js.map +1 -1
- package/dist/components/date-picker/DatePicker.d.ts +1 -1
- package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DatePicker.js.map +1 -1
- package/dist/components/flex/Flex.d.ts +69 -0
- package/dist/components/flex/Flex.d.ts.map +1 -0
- package/dist/components/flex/Flex.js +18 -0
- package/dist/components/flex/Flex.js.map +1 -0
- package/dist/components/flex/index.d.ts +3 -0
- package/dist/components/flex/index.d.ts.map +1 -0
- package/dist/components/number-stepper/NumberStepper.d.ts +1 -1
- package/dist/components/number-stepper/NumberStepper.d.ts.map +1 -1
- package/dist/components/number-stepper/NumberStepper.js.map +1 -1
- package/dist/components/select/SelectPopover.js +1 -1
- package/dist/components/select/SelectPopover.js.map +1 -1
- package/dist/components/time-field/TimeField.d.ts +1 -1
- package/dist/components/time-field/TimeField.d.ts.map +1 -1
- package/dist/components/time-field/TimeField.js.map +1 -1
- package/dist/index.css +350 -155
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/reactRender.css +2212 -1483
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +2212 -1483
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/unstable.css +1210 -481
- package/dist/unstable.css.map +1 -1
- package/dist/unstable.d.ts +1 -2
- package/dist/unstable.d.ts.map +1 -1
- package/dist/unstable.js +3 -2
- package/dist/unstable.js.map +1 -1
- package/dist/utilities/breakpoints.d.ts +9 -0
- package/dist/utilities/breakpoints.d.ts.map +1 -0
- package/dist/utilities/spacingTokens.d.ts +2 -0
- package/dist/utilities/spacingTokens.d.ts.map +1 -0
- package/package.json +3 -2
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../input-text-base/index.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 {\n Button,\n Collection,\n ComboBox as AriaComboBox,\n type ComboBoxProps as AriaComboBoxProps,\n Input,\n type Key,\n Label,\n ListBox,\n ListBoxItem,\n type ListBoxItemProps,\n ListBoxLoadMoreItem,\n type ListBoxProps as AriaListBoxProps,\n ListBoxSection,\n type ListBoxSectionProps,\n Popover,\n Text,\n} from \"react-aria-components/ComboBox\"\nimport { Group } from \"react-aria-components/Group\"\nimport { Header } from \"react-aria-components/Header\"\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 * The interaction that opens the popover.\n * - `\"input\"`: opens when the user enters text in the input.\n * - `\"focus\"`: opens when the user focuses (via click or keyboard) into the input.\n * - `\"manual\"`: opens only via the trigger button or arrow keys.\n * @default \"focus\"\n */\n menuTrigger?: \"focus\" | \"input\" | \"manual\"\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 | \"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\n/**\n * A combo box combines a text input with a filterable popover\n * listbox, allowing users to type to search and select from a list of options.\n *\n * It supports both single and multiple selection (`selectionMode`), custom filtering,\n * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).\n * Collections can be either static or dynamic, managed via the `children`, `items`,\n * or `defaultItems` props. To construct the dropdown list, compose this component\n * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\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 = \"focus\",\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-field tds-combo-box\",\n {\n \"tds-combo-box--lg\": size === \"lg\",\n \"tds-field--lg\": size === \"lg\",\n },\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-field-label\">{label}</Label>}\n <Group className=\"tds-field-control tds-combo-box-field\">\n <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n {menuTrigger !== \"focus\" && !readOnly && (\n <Button className=\"tds-combo-box-button tds-btn tds-btn--infield\">\n <Icon aria-hidden symbol=\"general#down-caret\" />\n </Button>\n )}\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-field-description\" slot=\"description\">\n <Icon\n aria-hidden\n className=\"tds-field-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\n/**\n * A selectable option within a {@link ComboBox}. Renders as a listbox item.\n *\n * Provide an `id` (or `key` when rendering from a collection) to identify the\n * option, and `textValue` when the visible children are not plain text so\n * type-ahead and screen readers have a stable label to use.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\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\n/**\n * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders\n * an optional `title` heading above its items.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\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 \"../field/index.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 {\n Button,\n Collection,\n ComboBox as AriaComboBox,\n type ComboBoxProps as AriaComboBoxProps,\n Input,\n type Key,\n Label,\n ListBox,\n ListBoxItem,\n type ListBoxItemProps,\n ListBoxLoadMoreItem,\n type ListBoxProps as AriaListBoxProps,\n ListBoxSection,\n type ListBoxSectionProps,\n Popover,\n Text,\n} from \"react-aria-components/ComboBox\"\nimport { Group } from \"react-aria-components/Group\"\nimport { Header } from \"react-aria-components/Header\"\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 * The interaction that opens the popover.\n * - `\"input\"`: opens when the user enters text in the input.\n * - `\"focus\"`: opens when the user focuses (via click or keyboard) into the input.\n * - `\"manual\"`: opens only via the trigger button or arrow keys.\n * @default \"focus\"\n */\n menuTrigger?: \"focus\" | \"input\" | \"manual\"\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 | \"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\n/**\n * A combo box combines a text input with a filterable popover\n * listbox, allowing users to type to search and select from a list of options.\n *\n * It supports both single and multiple selection (`selectionMode`), custom filtering,\n * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).\n * Collections can be either static or dynamic, managed via the `children`, `items`,\n * or `defaultItems` props. To construct the dropdown list, compose this component\n * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\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 = \"focus\",\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-field tds-combo-box\",\n {\n \"tds-combo-box--lg\": size === \"lg\",\n \"tds-field--lg\": size === \"lg\",\n },\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-field-label\">{label}</Label>}\n <Group className=\"tds-field-control tds-combo-box-field\">\n <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n {menuTrigger !== \"focus\" && !readOnly && (\n <Button className=\"tds-combo-box-button tds-btn tds-btn--infield\">\n <Icon aria-hidden symbol=\"general#down-caret\" />\n </Button>\n )}\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-field-description\" slot=\"description\">\n <Icon\n aria-hidden\n className=\"tds-field-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\n/**\n * A selectable option within a {@link ComboBox}. Renders as a listbox item.\n *\n * Provide an `id` (or `key` when rendering from a collection) to identify the\n * option, and `textValue` when the visible children are not plain text so\n * type-ahead and screen readers have a stable label to use.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\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\n/**\n * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders\n * an optional `title` heading above its items.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\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,5 +1,5 @@
|
|
|
1
1
|
import "../button/btn.css";
|
|
2
|
-
import "../
|
|
2
|
+
import "../field/index.css";
|
|
3
3
|
import "./index.css";
|
|
4
4
|
import { type DateValue } from "@internationalized/date";
|
|
5
5
|
import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,oBAAoB,CAAA;AAC3B,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;AAEnE,OAAO,EAUL,KAAK,eAAe,IAAI,mBAAmB,EAM5C,MAAM,kCAAkC,CAAA;AAYzC,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;AAoOD;;;;;;;;;;;;;;;;GAgBG;AACH,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,qBAwFxB;yBAzGe,UAAU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../input-text-base/index.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 { CalendarStateContext } from \"react-aria-components/Calendar\"\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 Label,\n Popover,\n Text,\n} from \"react-aria-components/DatePicker\"\nimport { Dialog } from \"react-aria-components/Dialog\"\nimport { ListBox, ListBoxItem } from \"react-aria-components/ListBox\"\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 <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 xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n className=\"symbol\"\n >\n <path d=\"M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555\" />\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-button\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </>\n )\n}\n\n/**\n * A date picker allows a user to select a particular date.\n * The input supports keyboard entry of individual day, month, and year segments;\n * the calendar offers month and year quick-pick overlays plus a \"go to today\" shortcut.\n *\n * The date picker automatically displays the value and calendar from the user's locale,\n * and does not require a specific date format.\n *\n * Values are exchanged as `DateValue` from `@internationalized/date`, but\n * `value`, `min`, and `max` also accept ISO date strings (`\"YYYY-MM-DD\"`) for\n * convenience. Restrict the selectable range with `min`/`max`, or mark\n * individual dates as unavailable via `isDateUnavailable`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-datepicker--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\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-field tds-date-picker\",\n {\n \"tds-date-picker--lg\": size === \"lg\",\n \"tds-field--lg\": size === \"lg\",\n },\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-field-label\">{label}</Label>}\n <Group className=\"tds-field-control tds-date-picker-field\">\n <DateInput className=\"tds-date-picker-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-field-date-segment-separator\"\n : \"tds-field-date-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 <Dialog>\n <Calendar\n className=\"tds-date-picker-calendar\"\n firstDayOfWeek={firstDayOfWeek}\n >\n <DatePickerCalendarBody\n activeOverlay={activeOverlay}\n setActiveOverlay={setActiveOverlay}\n />\n </Calendar>\n </Dialog>\n </Popover>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-field-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-field-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 \"../field/index.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 { CalendarStateContext } from \"react-aria-components/Calendar\"\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 Label,\n Popover,\n Text,\n} from \"react-aria-components/DatePicker\"\nimport { Dialog } from \"react-aria-components/Dialog\"\nimport { ListBox, ListBoxItem } from \"react-aria-components/ListBox\"\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 <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 xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n className=\"symbol\"\n >\n <path d=\"M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555\" />\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-button\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </>\n )\n}\n\n/**\n * A date picker allows a user to select a particular date.\n * The input supports keyboard entry of individual day, month, and year segments;\n * the calendar offers month and year quick-pick overlays plus a \"go to today\" shortcut.\n *\n * The date picker automatically displays the value and calendar from the user's locale,\n * and does not require a specific date format.\n *\n * Values are exchanged as `DateValue` from `@internationalized/date`, but\n * `value`, `min`, and `max` also accept ISO date strings (`\"YYYY-MM-DD\"`) for\n * convenience. Restrict the selectable range with `min`/`max`, or mark\n * individual dates as unavailable via `isDateUnavailable`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-datepicker--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\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-field tds-date-picker\",\n {\n \"tds-date-picker--lg\": size === \"lg\",\n \"tds-field--lg\": size === \"lg\",\n },\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-field-label\">{label}</Label>}\n <Group className=\"tds-field-control tds-date-picker-field\">\n <DateInput className=\"tds-date-picker-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-field-date-segment-separator\"\n : \"tds-field-date-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 <Dialog>\n <Calendar\n className=\"tds-date-picker-calendar\"\n firstDayOfWeek={firstDayOfWeek}\n >\n <DatePickerCalendarBody\n activeOverlay={activeOverlay}\n setActiveOverlay={setActiveOverlay}\n />\n </Calendar>\n </Dialog>\n </Popover>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-field-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-field-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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"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import "../../css/layout.css";
|
|
2
|
+
import { type Breakpoint } from "../../utilities/breakpoints";
|
|
3
|
+
import { type Spacing } from "../../utilities/spacingTokens";
|
|
4
|
+
import React from "react";
|
|
5
|
+
interface FlexSizingExpand {
|
|
6
|
+
basis?: never;
|
|
7
|
+
/** A convenience prop that sets `flex: 1 1 0%; min-width: 0` to fill remaining space. Mutually exclusive with `grow`, `shrink`, and `basis`. */
|
|
8
|
+
expand?: true;
|
|
9
|
+
grow?: never;
|
|
10
|
+
shrink?: never;
|
|
11
|
+
}
|
|
12
|
+
interface FlexSizing {
|
|
13
|
+
/** The initial main size of this flex item before space is distributed. */
|
|
14
|
+
basis?: 0 | "auto" | "100%";
|
|
15
|
+
expand?: never;
|
|
16
|
+
/** The flex grow factor of this flex item. */
|
|
17
|
+
grow?: 0 | 1;
|
|
18
|
+
/** The flex shrink factor of this flex item. */
|
|
19
|
+
shrink?: 0 | 1;
|
|
20
|
+
}
|
|
21
|
+
export type FlexResponsive = Partial<Record<Breakpoint, Omit<FlexBaseProps, "as" | "expand" | "inline" | "responsive">>>;
|
|
22
|
+
export type FlexElement = "article" | "aside" | "dd" | "div" | "dl" | "dt" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "ul";
|
|
23
|
+
type FlexBaseProps = {
|
|
24
|
+
/** The alignment of children along the cross axis. */
|
|
25
|
+
align?: "start" | "center" | "end" | "stretch" | "baseline";
|
|
26
|
+
/** The alignment of this flex item along the cross axis, overriding the container's `align`. */
|
|
27
|
+
alignSelf?: "auto" | "start" | "center" | "end" | "stretch" | "baseline";
|
|
28
|
+
/** The HTML element to render. */
|
|
29
|
+
as?: FlexElement;
|
|
30
|
+
/** The column gap between children. Overrides `gap` on the column axis. Tapestry spacing scale. */
|
|
31
|
+
columnGap?: Spacing;
|
|
32
|
+
/** The direction of the main axis. */
|
|
33
|
+
direction?: "row" | "row-reverse" | "column" | "column-reverse";
|
|
34
|
+
/** The gap between children. Tapestry spacing scale. */
|
|
35
|
+
gap?: Spacing;
|
|
36
|
+
/** If set, renders as `inline-flex` instead of `flex`. */
|
|
37
|
+
inline?: true;
|
|
38
|
+
/** The distribution of space between and around children along the main axis. */
|
|
39
|
+
justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
|
|
40
|
+
/** The padding on all sides. Tapestry spacing scale. */
|
|
41
|
+
padding?: Spacing;
|
|
42
|
+
/** The padding on the block axis. Overrides `padding` on the block axis. Tapestry spacing scale. */
|
|
43
|
+
paddingBlock?: Spacing;
|
|
44
|
+
/** The padding on the inline axis. Overrides `padding` on the inline axis. Tapestry spacing scale. */
|
|
45
|
+
paddingInline?: Spacing;
|
|
46
|
+
/**
|
|
47
|
+
* Responsive overrides. Mobile-first with breakpoints as keys.
|
|
48
|
+
* @example { md: { direction: "row", gap: 2 } }
|
|
49
|
+
*/
|
|
50
|
+
responsive?: FlexResponsive;
|
|
51
|
+
/** The row gap between children. Overrides `gap` on the row axis. Tapestry spacing scale. */
|
|
52
|
+
rowGap?: Spacing;
|
|
53
|
+
/** Whether children are forced onto one line or can wrap onto multiple lines. */
|
|
54
|
+
wrap?: "nowrap" | "wrap" | "wrap-reverse";
|
|
55
|
+
} & (FlexSizingExpand | FlexSizing);
|
|
56
|
+
export type FlexProps = FlexBaseProps & Omit<React.HTMLAttributes<HTMLElement>, keyof FlexBaseProps>;
|
|
57
|
+
interface FlexComponent {
|
|
58
|
+
(props: FlexProps & React.RefAttributes<HTMLElement>): React.ReactElement | null;
|
|
59
|
+
displayName?: string;
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* A flexbox layout primitive with token-constrained spacing.
|
|
63
|
+
*
|
|
64
|
+
* @component
|
|
65
|
+
* @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-flex--docs | Storybook Documentation}
|
|
66
|
+
*/
|
|
67
|
+
export declare const Flex: FlexComponent;
|
|
68
|
+
export {};
|
|
69
|
+
//# sourceMappingURL=Flex.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,gJAAgJ;IAChJ,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,MAAM,CAAC,EAAE,KAAK,CAAA;CACf;AAED,UAAU,UAAU;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACZ,gDAAgD;IAChD,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CACf;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,CAClC,MAAM,CACJ,UAAU,EACV,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,CAAC,CAC/D,CACF,CAAA;AAED,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,OAAO,GACP,IAAI,GACJ,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,QAAQ,GACR,QAAQ,GACR,IAAI,GACJ,MAAM,GACN,KAAK,GACL,IAAI,GACJ,SAAS,GACT,IAAI,CAAA;AAER,KAAK,aAAa,GAAG;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAA;IAC3D,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAA;IACxE,kCAAkC;IAClC,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,mGAAmG;IACnG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,QAAQ,GAAG,gBAAgB,CAAA;IAC/D,wDAAwD;IACxD,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,0DAA0D;IAC1D,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,iFAAiF;IACjF,OAAO,CAAC,EACJ,OAAO,GACP,QAAQ,GACR,KAAK,GACL,eAAe,GACf,cAAc,GACd,cAAc,CAAA;IAClB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oGAAoG;IACpG,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sGAAsG;IACtG,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,6FAA6F;IAC7F,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iFAAiF;IACjF,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;CAC1C,GAAG,CAAC,gBAAgB,GAAG,UAAU,CAAC,CAAA;AAEnC,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,aAAa,CAAC,CAAA;AAE9D,UAAU,aAAa;IACrB,CACE,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,GAClD,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,IAAI,EAgIA,aAAa,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import classNames from 'classnames';
|
|
2
|
+
import React__default, { forwardRef } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* A flexbox layout primitive with token-constrained spacing.
|
|
6
|
+
*
|
|
7
|
+
* @component
|
|
8
|
+
* @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-flex--docs | Storybook Documentation}
|
|
9
|
+
*/
|
|
10
|
+
const Flex = forwardRef(function Flex({ align, alignSelf, as: Element = "div", basis, className, columnGap, direction, expand, gap, grow, inline, justify, padding, paddingBlock, paddingInline, responsive, rowGap, shrink, wrap, ...rest }, ref) {
|
|
11
|
+
const { xs, sm, md, lg, xl } = responsive ?? {};
|
|
12
|
+
const Tag = Element;
|
|
13
|
+
return (React__default.createElement(Tag, { ...rest, className: classNames("tds-flex", className), ref: ref, "data-flex-align": align, "data-flex-align-self": alignSelf, "data-flex-basis": basis, "data-flex-direction": direction, "data-flex-expand": expand || undefined, "data-flex-gap": gap, "data-flex-row-gap": rowGap, "data-flex-column-gap": columnGap, "data-flex-grow": grow, "data-flex-inline": inline || undefined, "data-flex-justify": justify, "data-flex-shrink": shrink, "data-flex-wrap": wrap, "data-padding": padding, "data-padding-block": paddingBlock, "data-padding-inline": paddingInline, "data-flex-align-xs": xs?.align, "data-flex-align-self-xs": xs?.alignSelf, "data-flex-basis-xs": xs?.basis, "data-flex-direction-xs": xs?.direction, "data-flex-gap-xs": xs?.gap, "data-flex-row-gap-xs": xs?.rowGap, "data-flex-column-gap-xs": xs?.columnGap, "data-flex-grow-xs": xs?.grow, "data-flex-justify-xs": xs?.justify, "data-flex-shrink-xs": xs?.shrink, "data-flex-wrap-xs": xs?.wrap, "data-padding-xs": xs?.padding, "data-padding-block-xs": xs?.paddingBlock, "data-padding-inline-xs": xs?.paddingInline, "data-flex-align-sm": sm?.align, "data-flex-align-self-sm": sm?.alignSelf, "data-flex-basis-sm": sm?.basis, "data-flex-direction-sm": sm?.direction, "data-flex-gap-sm": sm?.gap, "data-flex-row-gap-sm": sm?.rowGap, "data-flex-column-gap-sm": sm?.columnGap, "data-flex-grow-sm": sm?.grow, "data-flex-justify-sm": sm?.justify, "data-flex-shrink-sm": sm?.shrink, "data-flex-wrap-sm": sm?.wrap, "data-padding-sm": sm?.padding, "data-padding-block-sm": sm?.paddingBlock, "data-padding-inline-sm": sm?.paddingInline, "data-flex-align-md": md?.align, "data-flex-align-self-md": md?.alignSelf, "data-flex-basis-md": md?.basis, "data-flex-direction-md": md?.direction, "data-flex-gap-md": md?.gap, "data-flex-row-gap-md": md?.rowGap, "data-flex-column-gap-md": md?.columnGap, "data-flex-grow-md": md?.grow, "data-flex-justify-md": md?.justify, "data-flex-shrink-md": md?.shrink, "data-flex-wrap-md": md?.wrap, "data-padding-md": md?.padding, "data-padding-block-md": md?.paddingBlock, "data-padding-inline-md": md?.paddingInline, "data-flex-align-lg": lg?.align, "data-flex-align-self-lg": lg?.alignSelf, "data-flex-basis-lg": lg?.basis, "data-flex-direction-lg": lg?.direction, "data-flex-gap-lg": lg?.gap, "data-flex-row-gap-lg": lg?.rowGap, "data-flex-column-gap-lg": lg?.columnGap, "data-flex-grow-lg": lg?.grow, "data-flex-justify-lg": lg?.justify, "data-flex-shrink-lg": lg?.shrink, "data-flex-wrap-lg": lg?.wrap, "data-padding-lg": lg?.padding, "data-padding-block-lg": lg?.paddingBlock, "data-padding-inline-lg": lg?.paddingInline, "data-flex-align-xl": xl?.align, "data-flex-align-self-xl": xl?.alignSelf, "data-flex-basis-xl": xl?.basis, "data-flex-direction-xl": xl?.direction, "data-flex-gap-xl": xl?.gap, "data-flex-row-gap-xl": xl?.rowGap, "data-flex-column-gap-xl": xl?.columnGap, "data-flex-grow-xl": xl?.grow, "data-flex-justify-xl": xl?.justify, "data-flex-shrink-xl": xl?.shrink, "data-flex-wrap-xl": xl?.wrap, "data-padding-xl": xl?.padding, "data-padding-block-xl": xl?.paddingBlock, "data-padding-inline-xl": xl?.paddingInline }));
|
|
14
|
+
});
|
|
15
|
+
Flex.displayName = "Flex";
|
|
16
|
+
|
|
17
|
+
export { Flex };
|
|
18
|
+
//# sourceMappingURL=Flex.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import \"../../css/layout.css\"\n\nimport { type Breakpoint } from \"@utilities/breakpoints\"\nimport { type Spacing } from \"@utilities/spacingTokens\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\ninterface FlexSizingExpand {\n basis?: never\n /** A convenience prop that sets `flex: 1 1 0%; min-width: 0` to fill remaining space. Mutually exclusive with `grow`, `shrink`, and `basis`. */\n expand?: true\n grow?: never\n shrink?: never\n}\n\ninterface FlexSizing {\n /** The initial main size of this flex item before space is distributed. */\n basis?: 0 | \"auto\" | \"100%\"\n expand?: never\n /** The flex grow factor of this flex item. */\n grow?: 0 | 1\n /** The flex shrink factor of this flex item. */\n shrink?: 0 | 1\n}\n\nexport type FlexResponsive = Partial<\n Record<\n Breakpoint,\n Omit<FlexBaseProps, \"as\" | \"expand\" | \"inline\" | \"responsive\">\n >\n>\n\nexport type FlexElement =\n | \"article\"\n | \"aside\"\n | \"dd\"\n | \"div\"\n | \"dl\"\n | \"dt\"\n | \"footer\"\n | \"header\"\n | \"li\"\n | \"main\"\n | \"nav\"\n | \"ol\"\n | \"section\"\n | \"ul\"\n\ntype FlexBaseProps = {\n /** The alignment of children along the cross axis. */\n align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"\n /** The alignment of this flex item along the cross axis, overriding the container's `align`. */\n alignSelf?: \"auto\" | \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"\n /** The HTML element to render. */\n as?: FlexElement\n /** The column gap between children. Overrides `gap` on the column axis. Tapestry spacing scale. */\n columnGap?: Spacing\n /** The direction of the main axis. */\n direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\"\n /** The gap between children. Tapestry spacing scale. */\n gap?: Spacing\n /** If set, renders as `inline-flex` instead of `flex`. */\n inline?: true\n /** The distribution of space between and around children along the main axis. */\n justify?:\n | \"start\"\n | \"center\"\n | \"end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\"\n /** The padding on all sides. Tapestry spacing scale. */\n padding?: Spacing\n /** The padding on the block axis. Overrides `padding` on the block axis. Tapestry spacing scale. */\n paddingBlock?: Spacing\n /** The padding on the inline axis. Overrides `padding` on the inline axis. Tapestry spacing scale. */\n paddingInline?: Spacing\n /**\n * Responsive overrides. Mobile-first with breakpoints as keys.\n * @example { md: { direction: \"row\", gap: 2 } }\n */\n responsive?: FlexResponsive\n /** The row gap between children. Overrides `gap` on the row axis. Tapestry spacing scale. */\n rowGap?: Spacing\n /** Whether children are forced onto one line or can wrap onto multiple lines. */\n wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\"\n} & (FlexSizingExpand | FlexSizing)\n\nexport type FlexProps = FlexBaseProps &\n Omit<React.HTMLAttributes<HTMLElement>, keyof FlexBaseProps>\n\ninterface FlexComponent {\n (\n props: FlexProps & React.RefAttributes<HTMLElement>\n ): React.ReactElement | null\n displayName?: string\n}\n\n/**\n * A flexbox layout primitive with token-constrained spacing.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-flex--docs | Storybook Documentation}\n */\nexport const Flex = forwardRef(function Flex(\n {\n align,\n alignSelf,\n as: Element = \"div\",\n basis,\n className,\n columnGap,\n direction,\n expand,\n gap,\n grow,\n inline,\n justify,\n padding,\n paddingBlock,\n paddingInline,\n responsive,\n rowGap,\n shrink,\n wrap,\n ...rest\n }: FlexProps,\n ref: React.ForwardedRef<HTMLElement>\n) {\n const { xs, sm, md, lg, xl } = responsive ?? {}\n\n const Tag = Element as unknown as React.ComponentType<\n React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n >\n return (\n <Tag\n {...rest}\n className={classNames(\"tds-flex\", className)}\n ref={ref}\n data-flex-align={align}\n data-flex-align-self={alignSelf}\n data-flex-basis={basis}\n data-flex-direction={direction}\n data-flex-expand={expand || undefined}\n data-flex-gap={gap}\n data-flex-row-gap={rowGap}\n data-flex-column-gap={columnGap}\n data-flex-grow={grow}\n data-flex-inline={inline || undefined}\n data-flex-justify={justify}\n data-flex-shrink={shrink}\n data-flex-wrap={wrap}\n data-padding={padding}\n data-padding-block={paddingBlock}\n data-padding-inline={paddingInline}\n /* Breakpoint xs */\n data-flex-align-xs={xs?.align}\n data-flex-align-self-xs={xs?.alignSelf}\n data-flex-basis-xs={xs?.basis}\n data-flex-direction-xs={xs?.direction}\n data-flex-gap-xs={xs?.gap}\n data-flex-row-gap-xs={xs?.rowGap}\n data-flex-column-gap-xs={xs?.columnGap}\n data-flex-grow-xs={xs?.grow}\n data-flex-justify-xs={xs?.justify}\n data-flex-shrink-xs={xs?.shrink}\n data-flex-wrap-xs={xs?.wrap}\n data-padding-xs={xs?.padding}\n data-padding-block-xs={xs?.paddingBlock}\n data-padding-inline-xs={xs?.paddingInline}\n /* Breakpoint sm */\n data-flex-align-sm={sm?.align}\n data-flex-align-self-sm={sm?.alignSelf}\n data-flex-basis-sm={sm?.basis}\n data-flex-direction-sm={sm?.direction}\n data-flex-gap-sm={sm?.gap}\n data-flex-row-gap-sm={sm?.rowGap}\n data-flex-column-gap-sm={sm?.columnGap}\n data-flex-grow-sm={sm?.grow}\n data-flex-justify-sm={sm?.justify}\n data-flex-shrink-sm={sm?.shrink}\n data-flex-wrap-sm={sm?.wrap}\n data-padding-sm={sm?.padding}\n data-padding-block-sm={sm?.paddingBlock}\n data-padding-inline-sm={sm?.paddingInline}\n /* Breakpoint md */\n data-flex-align-md={md?.align}\n data-flex-align-self-md={md?.alignSelf}\n data-flex-basis-md={md?.basis}\n data-flex-direction-md={md?.direction}\n data-flex-gap-md={md?.gap}\n data-flex-row-gap-md={md?.rowGap}\n data-flex-column-gap-md={md?.columnGap}\n data-flex-grow-md={md?.grow}\n data-flex-justify-md={md?.justify}\n data-flex-shrink-md={md?.shrink}\n data-flex-wrap-md={md?.wrap}\n data-padding-md={md?.padding}\n data-padding-block-md={md?.paddingBlock}\n data-padding-inline-md={md?.paddingInline}\n /* Breakpoint lg */\n data-flex-align-lg={lg?.align}\n data-flex-align-self-lg={lg?.alignSelf}\n data-flex-basis-lg={lg?.basis}\n data-flex-direction-lg={lg?.direction}\n data-flex-gap-lg={lg?.gap}\n data-flex-row-gap-lg={lg?.rowGap}\n data-flex-column-gap-lg={lg?.columnGap}\n data-flex-grow-lg={lg?.grow}\n data-flex-justify-lg={lg?.justify}\n data-flex-shrink-lg={lg?.shrink}\n data-flex-wrap-lg={lg?.wrap}\n data-padding-lg={lg?.padding}\n data-padding-block-lg={lg?.paddingBlock}\n data-padding-inline-lg={lg?.paddingInline}\n /* Breakpoint xl */\n data-flex-align-xl={xl?.align}\n data-flex-align-self-xl={xl?.alignSelf}\n data-flex-basis-xl={xl?.basis}\n data-flex-direction-xl={xl?.direction}\n data-flex-gap-xl={xl?.gap}\n data-flex-row-gap-xl={xl?.rowGap}\n data-flex-column-gap-xl={xl?.columnGap}\n data-flex-grow-xl={xl?.grow}\n data-flex-justify-xl={xl?.justify}\n data-flex-shrink-xl={xl?.shrink}\n data-flex-wrap-xl={xl?.wrap}\n data-padding-xl={xl?.padding}\n data-padding-block-xl={xl?.paddingBlock}\n data-padding-inline-xl={xl?.paddingInline}\n />\n )\n}) as unknown as FlexComponent\n\nFlex.displayName = \"Flex\"\n"],"names":["React"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/flex/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,gBAAgB,IAAI,oBAAoB,EAE9C,MAAM,mCAAmC,CAAA;AAE1C,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,iBAAiB,CAAA;CACzB;AAED,KAAK,0BAA0B,GAC3B,UAAU,GACV,QAAQ,GACR,MAAM,GACN,UAAU,GACV,oBAAoB,CAAA;AAExB,KAAK,6BAA6B,GAC9B,eAAe,GACf,MAAM,GACN,UAAU,GACV,MAAM,GACN,OAAO,CAAA;AAEX,MAAM,MAAM,yBAAyB,GAAG,+BAA+B,CACrE,oBAAoB,EACpB,kBAAkB,EAClB,0BAA0B,EAC1B,6BAA6B,CAC9B,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,yBAAyB,qBAmD3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberStepper.js","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../
|
|
1
|
+
{"version":3,"file":"NumberStepper.js","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n Button,\n Group,\n Input,\n Label,\n NumberField as AriaNumberField,\n type NumberFieldProps as AriaNumberFieldProps,\n Text,\n} from \"react-aria-components/NumberField\"\n\nexport type NumberStepperSize = \"md\" | \"lg\"\n\nexport interface NumberStepperProps {\n /** The default uncontrolled value. */\n defaultValue?: number\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: string\n /** Disables the input and stepper buttons. */\n disabled?: boolean\n /** If `true`, renders the label visually hidden. */\n hideLabel?: boolean\n /** If `true`, applies error styling to the field and description. */\n invalid?: boolean\n /** Accessible label for the field. */\n label: string\n /** Maximum allowed value. */\n max?: number\n /** Minimum allowed value. */\n min?: number\n /** Allows the value to be read but not changed. */\n readOnly?: boolean\n /** If `true`, appends an asterisk after the label text. */\n required?: boolean\n /** The size of the number stepper. */\n size?: NumberStepperSize\n}\n\ntype AriaNumberFieldPropsToOmit =\n | \"children\"\n | \"render\"\n | \"slot\"\n | \"validate\"\n | \"validationBehavior\"\n\ntype AriaNumberFieldPropsToInclude =\n | \"formatOptions\"\n | \"name\"\n | \"onChange\"\n | \"step\"\n | \"value\"\n\nexport type NumberStepperElementProps = CombineAriaPropsWithCustomProps<\n AriaNumberFieldProps,\n NumberStepperProps,\n AriaNumberFieldPropsToOmit,\n AriaNumberFieldPropsToInclude\n>\n\n/**\n * A number stepper component that pairs a numeric input with increment and\n * decrement buttons. Use it when users need to enter or adjust a number by\n * small amounts, such as quantities or counts.\n *\n * Constrain the input with `min`, `max`, and `step`, and customize display\n * (currency, percentage, decimal precision) via the `formatOptions` prop.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-numberstepper--docs | Storybook Documentation}\n */\nexport function NumberStepper({\n className,\n defaultValue,\n description,\n disabled,\n hideLabel,\n invalid,\n label,\n max,\n min,\n readOnly,\n required,\n size = \"md\",\n ...restProps\n}: NumberStepperElementProps) {\n const combinedClassName = classNames(\n \"tds-field tds-number-stepper\",\n {\n \"tds-field--lg\": size === \"lg\",\n \"tds-number-stepper--lg\": size === \"lg\",\n },\n className\n )\n\n return (\n <AriaNumberField\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n defaultValue={defaultValue}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={max}\n minValue={min}\n >\n {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n <Group className=\"tds-field-control tds-number-stepper-field\">\n <Input className=\"tds-number-stepper-input\" />\n <Button\n className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n slot=\"decrement\"\n >\n <Icon aria-hidden symbol=\"general#minus\" />\n </Button>\n <Button\n className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n slot=\"increment\"\n >\n <Icon aria-hidden symbol=\"general#plus\" />\n </Button>\n </Group>\n {description && (\n <Text className=\"tds-field-description\" slot=\"description\">\n <Icon\n aria-hidden\n className=\"tds-field-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaNumberField>\n )\n}\n"],"names":["React","AriaNumberField"],"mappings":";;;;;AAkEA;;;;;;;;;;AAUG;AACG,SAAU,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACc,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,8BAA8B,EAC9B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,wBAAwB,EAAE,IAAI,KAAK,IAAI;KACxC,EACD,SAAS,CACV;IAED,QACEA,6BAACC,WAAe,EAAA,EAAA,GACV,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,GAAG,EAAA;QAEZ,CAAC,SAAS,IAAID,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA;AAC3D,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;YAC9CA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,eAAe,GAAG,CACpC;YACTA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,cAAc,EAAA,CAAG,CACnC,CACH;QACP,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,aAAa,EAAA;YACxDA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACe;AAEtB;;;;"}
|
|
@@ -92,7 +92,7 @@ const SelectPopover = forwardRef(({ "aria-describedby": ariaDescribedBy, "aria-l
|
|
|
92
92
|
if (activeOptionId) {
|
|
93
93
|
document
|
|
94
94
|
.getElementById(activeOptionId)
|
|
95
|
-
?.scrollIntoView({ block: "
|
|
95
|
+
?.scrollIntoView({ behavior: "instant", block: "center" });
|
|
96
96
|
}
|
|
97
97
|
}, [activeOptionId]);
|
|
98
98
|
useEffect(() => () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectPopover.js","sources":["../../../src/components/select/SelectPopover.tsx"],"sourcesContent":["import {\n ComboboxAction,\n getComboboxActionFromKey,\n getUpdatedIndex,\n} from \"@utilities/keyboardUtils\"\nimport {\n getDataAttributes,\n getIndexByLetter,\n getSelectableOptionsFromSegments,\n normalizeOptions,\n type Segment,\n} from \"@utilities/selectUtils\"\nimport { useId } from \"@utilities/useId\"\nimport React, {\n forwardRef,\n type SelectHTMLAttributes,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\n\nimport type { SelectItem, SelectOption } from \"./Select\"\nimport { SelectOptions } from \"./SelectOptions\"\n\ninterface ToggleEvent extends Event {\n newState: \"closed\" | \"open\"\n oldState: \"closed\" | \"open\"\n}\n\nexport interface SelectPopoverProps {\n \"aria-describedby\"?: string\n \"aria-label\"?: string\n \"aria-labelledby\"?: string\n defaultValue?: string\n disabled?: boolean\n id?: string\n invalid?: boolean\n /** A flat or mixed array of options and option groups. */\n options: SelectItem[]\n /** Placeholder text shown in the trigger button when no option is selected. `null` suppresses the placeholder. */\n placeholder: string | null\n required?: boolean\n triggerRef?: React.RefObject<HTMLButtonElement>\n value?: string\n}\n\nexport type SelectPopoverElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectPopoverProps | \"multiple\"\n> &\n SelectPopoverProps\n\nconst Group = ({\n children,\n disabled,\n id,\n label,\n}: {\n children: React.ReactNode\n disabled?: boolean\n id: string\n label: string\n}) => (\n <ul aria-disabled={disabled || undefined} aria-labelledby={id} role=\"group\">\n <li id={id} role=\"presentation\">\n <span>{label}</span>\n </li>\n {children}\n </ul>\n)\n\nfunction renderListSegments(\n segments: Segment[],\n baseId: string,\n renderItem: (option: SelectOption, index: number) => React.ReactNode\n) {\n let flatIndex = 0\n\n return segments.map((segment, segmentIndex) => {\n const startIndex = flatIndex\n flatIndex += segment.options.length\n\n if (segment.type === \"group\") {\n return (\n <Group\n key={`${segment.label}-${segmentIndex}`}\n disabled={segment.disabled}\n id={`${baseId}-group-${segmentIndex}`}\n label={segment.label}\n >\n {segment.options.map((opt, i) => renderItem(opt, startIndex + i))}\n </Group>\n )\n }\n\n return (\n <ul key={`options-${segmentIndex}`} role=\"presentation\">\n {segment.options.map((opt, i) => renderItem(opt, startIndex + i))}\n </ul>\n )\n })\n}\n\n/**\n * Internal component. Not intended for direct use — consume `Select` instead.\n *\n * The popover listbox implementation used by `Select` when `complex` is\n * true. Renders a button trigger and a custom listbox that supports rich\n * option content (icons, descriptions) along with keyboard navigation,\n * type-ahead, and option groups.\n *\n * @internal\n */\nexport const SelectPopover = forwardRef<\n HTMLSelectElement,\n SelectPopoverElementProps\n>(\n (\n {\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n defaultValue,\n disabled,\n id,\n invalid,\n onBlur,\n onChange,\n onClick,\n onFocus,\n options,\n placeholder,\n required,\n triggerRef,\n value,\n ...props\n }: SelectPopoverElementProps,\n ref\n ) => {\n const stableId = useId()\n const baseId = id || `tds-select-popover-${stableId}`\n\n const [isOpen, setIsOpen] = useState(false)\n const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(\n defaultValue ?? null\n )\n const [activeIndex, setActiveIndex] = useState(-1)\n\n const isControlled = value !== undefined\n const selectedValue = isControlled ? (value ?? null) : uncontrolledValue\n\n const { allOptions, segments } = useMemo(() => {\n const segments = normalizeOptions(options)\n const allOptions = getSelectableOptionsFromSegments(segments)\n return { allOptions, segments }\n }, [options])\n\n const selectedOption = allOptions.find((opt) => opt.value === selectedValue)\n\n const activeOption = activeIndex >= 0 ? allOptions[activeIndex] : undefined\n const activeOptionId = activeOption\n ? `${baseId}-option-${activeOption.value}`\n : undefined\n\n const popoverRef = useRef<HTMLDivElement>(null)\n const internalTriggerRef = useRef<HTMLButtonElement | null>(null)\n const resolvedTriggerRef = triggerRef ?? internalTriggerRef\n const hiddenSelectRef = useRef<HTMLSelectElement | null>(null)\n const pendingChangeValueRef = useRef<string | null>(null)\n const searchStringRef = useRef(\"\")\n const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>()\n\n const setHiddenSelectRef = useCallback(\n (element: HTMLSelectElement | null) => {\n hiddenSelectRef.current = element\n if (typeof ref === \"function\") {\n ref(element)\n } else if (ref) {\n ref.current = element\n }\n },\n [ref]\n )\n\n useEffect(() => {\n const popoverEl = popoverRef.current\n if (!popoverEl) return\n\n const handleToggle = (e: Event) => {\n const newIsOpen = (e as ToggleEvent).newState === \"open\"\n setIsOpen(newIsOpen)\n\n if (newIsOpen) {\n const index = allOptions.findIndex(\n (opt) => opt.value === selectedValue && !opt.disabled\n )\n if (index >= 0) {\n setActiveIndex(index)\n } else {\n // Find first non-disabled option\n const firstEnabledIndexOrFirstIndex = Math.max(\n allOptions.findIndex((opt) => !opt.disabled),\n 0\n )\n setActiveIndex(firstEnabledIndexOrFirstIndex)\n }\n } else {\n setActiveIndex(-1)\n }\n }\n\n popoverEl.addEventListener(\"toggle\", handleToggle)\n return () => popoverEl.removeEventListener(\"toggle\", handleToggle)\n }, [allOptions, selectedValue])\n\n useEffect(() => {\n if (activeOptionId) {\n document\n .getElementById(activeOptionId)\n ?.scrollIntoView({ block: \"nearest\" })\n }\n }, [activeOptionId])\n\n useEffect(\n () => () => {\n clearTimeout(searchTimeoutRef.current)\n },\n []\n )\n\n const openPopover = () =>\n popoverRef.current?.showPopover({ source: resolvedTriggerRef.current! })\n\n const closePopover = () => popoverRef.current?.hidePopover()\n\n const commitSelection = useCallback(\n (nextValue: string) => {\n if (nextValue === selectedValue) {\n closePopover()\n return\n }\n\n if (!isControlled) {\n setUncontrolledValue(nextValue)\n }\n\n const hiddenEl = hiddenSelectRef.current\n if (hiddenEl) {\n pendingChangeValueRef.current = nextValue\n hiddenEl.value = nextValue\n hiddenEl.dispatchEvent(new Event(\"change\", { bubbles: true }))\n if (isControlled) {\n hiddenEl.value = value ?? \"\"\n }\n }\n\n closePopover()\n },\n [isControlled, selectedValue, value]\n )\n\n const selectActiveOption = useCallback(() => {\n if (activeOption && !activeOption.disabled) {\n commitSelection(activeOption.value!)\n return true\n }\n return false\n }, [activeOption, commitSelection])\n\n const commitActiveOptionOrClose = useCallback(() => {\n if (!selectActiveOption()) {\n closePopover()\n }\n }, [selectActiveOption])\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return\n\n // Tab must not be prevented — allow native focus movement\n if (e.key === \"Tab\" && isOpen) {\n commitActiveOptionOrClose()\n return\n }\n\n const action = getComboboxActionFromKey(e, isOpen)\n if (!action) return\n\n e.preventDefault()\n\n switch (action) {\n case ComboboxAction.OpenPopup:\n openPopover()\n break\n case ComboboxAction.CommitAndClose:\n commitActiveOptionOrClose()\n break\n case ComboboxAction.MoveFirst:\n case ComboboxAction.MoveLast:\n if (!isOpen) openPopover()\n setActiveIndex(getUpdatedIndex(activeIndex, action, allOptions))\n break\n case ComboboxAction.MoveNext:\n case ComboboxAction.MovePrevious:\n setActiveIndex(getUpdatedIndex(activeIndex, action, allOptions))\n break\n case ComboboxAction.TypeCharacter: {\n if (!isOpen) openPopover()\n\n clearTimeout(searchTimeoutRef.current)\n searchStringRef.current += e.key\n searchTimeoutRef.current = setTimeout(() => {\n searchStringRef.current = \"\"\n }, 500)\n\n const searchIndex = getIndexByLetter(\n allOptions,\n searchStringRef.current,\n activeIndex\n )\n if (searchIndex >= 0) {\n setActiveIndex(searchIndex)\n }\n break\n }\n case ComboboxAction.ClosePopup:\n closePopover()\n break\n }\n }\n\n const createStableEventTarget = (\n target: HTMLSelectElement,\n valueSnapshot: string\n ) => {\n const proxy = Object.create(target)\n Object.defineProperties(proxy, {\n disabled: {\n configurable: true,\n enumerable: true,\n value: target.disabled,\n },\n form: { configurable: true, enumerable: true, value: target.form },\n name: { configurable: true, enumerable: true, value: target.name },\n type: { configurable: true, enumerable: true, value: target.type },\n value: { configurable: true, enumerable: true, value: valueSnapshot },\n })\n return proxy as HTMLSelectElement\n }\n\n const withSelectTarget = useCallback(\n <\n SourceEvent extends React.SyntheticEvent,\n TargetEvent extends React.SyntheticEvent<HTMLSelectElement>,\n >(\n event: SourceEvent,\n target: HTMLSelectElement,\n currentTarget: HTMLSelectElement = target\n ) => {\n return Object.defineProperties(Object.create(event), {\n currentTarget: { value: currentTarget },\n target: { value: target },\n }) as TargetEvent\n },\n []\n )\n\n const handleHiddenSelectChange = useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) => {\n if (!onChange) return\n\n const valueSnapshot =\n pendingChangeValueRef.current ?? event.currentTarget.value\n pendingChangeValueRef.current = null\n\n const stableEvent = withSelectTarget<\n React.ChangeEvent<HTMLSelectElement>,\n React.ChangeEvent<HTMLSelectElement>\n >(\n event,\n createStableEventTarget(\n event.target as HTMLSelectElement,\n valueSnapshot\n ),\n createStableEventTarget(event.currentTarget, valueSnapshot)\n )\n\n onChange(stableEvent)\n },\n [onChange, withSelectTarget]\n )\n\n const forwardEventToSelect = useCallback(\n <\n ButtonEvent extends React.SyntheticEvent<HTMLButtonElement>,\n SelectEvent extends React.SyntheticEvent<HTMLSelectElement>,\n >(\n event: ButtonEvent,\n handler?: (event: SelectEvent) => void\n ) => {\n if (!handler) return\n\n const hiddenEl = hiddenSelectRef.current\n if (!hiddenEl) return\n\n const stableEvent = withSelectTarget<ButtonEvent, SelectEvent>(\n event,\n hiddenEl\n )\n\n handler(stableEvent)\n },\n [withSelectTarget]\n )\n\n const handleButtonBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.FocusEvent<HTMLButtonElement>,\n React.FocusEvent<HTMLSelectElement>\n >(event, onBlur)\n },\n [forwardEventToSelect, onBlur]\n )\n\n const handleButtonClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.MouseEvent<HTMLButtonElement>,\n React.MouseEvent<HTMLSelectElement>\n >(event, onClick)\n },\n [forwardEventToSelect, onClick]\n )\n\n const handleButtonFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.FocusEvent<HTMLButtonElement>,\n React.FocusEvent<HTMLSelectElement>\n >(event, onFocus)\n },\n [forwardEventToSelect, onFocus]\n )\n\n const renderListOption = (option: SelectOption, index: number) => {\n const { disabled, divider, label, value } = option\n if (divider) return <li key={index} role=\"separator\" />\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard events are handled on the combobox button\n <li\n key={value}\n {...getDataAttributes(option)}\n aria-disabled={disabled || undefined}\n aria-selected={value === selectedValue}\n className={\n value === activeOption?.value\n ? \"tds-select-option--active\"\n : undefined\n }\n id={`${baseId}-option-${value}`}\n onClick={disabled ? undefined : () => commitSelection(value!)}\n role=\"option\"\n >\n {label}\n </li>\n )\n }\n\n return (\n <>\n <button\n ref={resolvedTriggerRef}\n popovertarget={baseId}\n aria-activedescendant={activeOptionId}\n aria-controls={baseId}\n aria-describedby={ariaDescribedBy}\n aria-disabled={disabled ? \"true\" : undefined}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-invalid={invalid ? \"true\" : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-required={required ? \"true\" : undefined}\n disabled={disabled}\n onBlur={handleButtonBlur}\n onClick={handleButtonClick}\n onFocus={handleButtonFocus}\n onKeyDown={handleKeyDown}\n role=\"combobox\"\n type=\"button\"\n >\n {selectedOption ? selectedOption.label : placeholder}\n </button>\n <div\n ref={popoverRef}\n popover=\"\"\n id={baseId}\n role=\"listbox\"\n aria-describedby={ariaDescribedBy}\n aria-invalid={invalid ? \"true\" : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-required={required ? \"true\" : undefined}\n >\n {renderListSegments(segments, baseId, renderListOption)}\n </div>\n <select\n {...props}\n ref={setHiddenSelectRef}\n aria-hidden\n className=\"tds-select-hidden-select\"\n disabled={disabled}\n id={`${baseId}-control`}\n onChange={handleHiddenSelectChange}\n required={required}\n tabIndex={-1}\n value={selectedValue ?? \"\"}\n >\n <option value=\"\" />\n <SelectOptions items={options} />\n </select>\n </>\n )\n }\n)\n\nSelectPopover.displayName = \"SelectPopover\"\n"],"names":["React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectPopover.js","sources":["../../../src/components/select/SelectPopover.tsx"],"sourcesContent":["import {\n ComboboxAction,\n getComboboxActionFromKey,\n getUpdatedIndex,\n} from \"@utilities/keyboardUtils\"\nimport {\n getDataAttributes,\n getIndexByLetter,\n getSelectableOptionsFromSegments,\n normalizeOptions,\n type Segment,\n} from \"@utilities/selectUtils\"\nimport { useId } from \"@utilities/useId\"\nimport React, {\n forwardRef,\n type SelectHTMLAttributes,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\n\nimport type { SelectItem, SelectOption } from \"./Select\"\nimport { SelectOptions } from \"./SelectOptions\"\n\ninterface ToggleEvent extends Event {\n newState: \"closed\" | \"open\"\n oldState: \"closed\" | \"open\"\n}\n\nexport interface SelectPopoverProps {\n \"aria-describedby\"?: string\n \"aria-label\"?: string\n \"aria-labelledby\"?: string\n defaultValue?: string\n disabled?: boolean\n id?: string\n invalid?: boolean\n /** A flat or mixed array of options and option groups. */\n options: SelectItem[]\n /** Placeholder text shown in the trigger button when no option is selected. `null` suppresses the placeholder. */\n placeholder: string | null\n required?: boolean\n triggerRef?: React.RefObject<HTMLButtonElement>\n value?: string\n}\n\nexport type SelectPopoverElementProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n keyof SelectPopoverProps | \"multiple\"\n> &\n SelectPopoverProps\n\nconst Group = ({\n children,\n disabled,\n id,\n label,\n}: {\n children: React.ReactNode\n disabled?: boolean\n id: string\n label: string\n}) => (\n <ul aria-disabled={disabled || undefined} aria-labelledby={id} role=\"group\">\n <li id={id} role=\"presentation\">\n <span>{label}</span>\n </li>\n {children}\n </ul>\n)\n\nfunction renderListSegments(\n segments: Segment[],\n baseId: string,\n renderItem: (option: SelectOption, index: number) => React.ReactNode\n) {\n let flatIndex = 0\n\n return segments.map((segment, segmentIndex) => {\n const startIndex = flatIndex\n flatIndex += segment.options.length\n\n if (segment.type === \"group\") {\n return (\n <Group\n key={`${segment.label}-${segmentIndex}`}\n disabled={segment.disabled}\n id={`${baseId}-group-${segmentIndex}`}\n label={segment.label}\n >\n {segment.options.map((opt, i) => renderItem(opt, startIndex + i))}\n </Group>\n )\n }\n\n return (\n <ul key={`options-${segmentIndex}`} role=\"presentation\">\n {segment.options.map((opt, i) => renderItem(opt, startIndex + i))}\n </ul>\n )\n })\n}\n\n/**\n * Internal component. Not intended for direct use — consume `Select` instead.\n *\n * The popover listbox implementation used by `Select` when `complex` is\n * true. Renders a button trigger and a custom listbox that supports rich\n * option content (icons, descriptions) along with keyboard navigation,\n * type-ahead, and option groups.\n *\n * @internal\n */\nexport const SelectPopover = forwardRef<\n HTMLSelectElement,\n SelectPopoverElementProps\n>(\n (\n {\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n defaultValue,\n disabled,\n id,\n invalid,\n onBlur,\n onChange,\n onClick,\n onFocus,\n options,\n placeholder,\n required,\n triggerRef,\n value,\n ...props\n }: SelectPopoverElementProps,\n ref\n ) => {\n const stableId = useId()\n const baseId = id || `tds-select-popover-${stableId}`\n\n const [isOpen, setIsOpen] = useState(false)\n const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(\n defaultValue ?? null\n )\n const [activeIndex, setActiveIndex] = useState(-1)\n\n const isControlled = value !== undefined\n const selectedValue = isControlled ? (value ?? null) : uncontrolledValue\n\n const { allOptions, segments } = useMemo(() => {\n const segments = normalizeOptions(options)\n const allOptions = getSelectableOptionsFromSegments(segments)\n return { allOptions, segments }\n }, [options])\n\n const selectedOption = allOptions.find((opt) => opt.value === selectedValue)\n\n const activeOption = activeIndex >= 0 ? allOptions[activeIndex] : undefined\n const activeOptionId = activeOption\n ? `${baseId}-option-${activeOption.value}`\n : undefined\n\n const popoverRef = useRef<HTMLDivElement>(null)\n const internalTriggerRef = useRef<HTMLButtonElement | null>(null)\n const resolvedTriggerRef = triggerRef ?? internalTriggerRef\n const hiddenSelectRef = useRef<HTMLSelectElement | null>(null)\n const pendingChangeValueRef = useRef<string | null>(null)\n const searchStringRef = useRef(\"\")\n const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>()\n\n const setHiddenSelectRef = useCallback(\n (element: HTMLSelectElement | null) => {\n hiddenSelectRef.current = element\n if (typeof ref === \"function\") {\n ref(element)\n } else if (ref) {\n ref.current = element\n }\n },\n [ref]\n )\n\n useEffect(() => {\n const popoverEl = popoverRef.current\n if (!popoverEl) return\n\n const handleToggle = (e: Event) => {\n const newIsOpen = (e as ToggleEvent).newState === \"open\"\n setIsOpen(newIsOpen)\n\n if (newIsOpen) {\n const index = allOptions.findIndex(\n (opt) => opt.value === selectedValue && !opt.disabled\n )\n if (index >= 0) {\n setActiveIndex(index)\n } else {\n // Find first non-disabled option\n const firstEnabledIndexOrFirstIndex = Math.max(\n allOptions.findIndex((opt) => !opt.disabled),\n 0\n )\n setActiveIndex(firstEnabledIndexOrFirstIndex)\n }\n } else {\n setActiveIndex(-1)\n }\n }\n\n popoverEl.addEventListener(\"toggle\", handleToggle)\n return () => popoverEl.removeEventListener(\"toggle\", handleToggle)\n }, [allOptions, selectedValue])\n\n useEffect(() => {\n if (activeOptionId) {\n document\n .getElementById(activeOptionId)\n ?.scrollIntoView({ behavior: \"instant\", block: \"center\" })\n }\n }, [activeOptionId])\n\n useEffect(\n () => () => {\n clearTimeout(searchTimeoutRef.current)\n },\n []\n )\n\n const openPopover = () =>\n popoverRef.current?.showPopover({ source: resolvedTriggerRef.current! })\n\n const closePopover = () => popoverRef.current?.hidePopover()\n\n const commitSelection = useCallback(\n (nextValue: string) => {\n if (nextValue === selectedValue) {\n closePopover()\n return\n }\n\n if (!isControlled) {\n setUncontrolledValue(nextValue)\n }\n\n const hiddenEl = hiddenSelectRef.current\n if (hiddenEl) {\n pendingChangeValueRef.current = nextValue\n hiddenEl.value = nextValue\n hiddenEl.dispatchEvent(new Event(\"change\", { bubbles: true }))\n if (isControlled) {\n hiddenEl.value = value ?? \"\"\n }\n }\n\n closePopover()\n },\n [isControlled, selectedValue, value]\n )\n\n const selectActiveOption = useCallback(() => {\n if (activeOption && !activeOption.disabled) {\n commitSelection(activeOption.value!)\n return true\n }\n return false\n }, [activeOption, commitSelection])\n\n const commitActiveOptionOrClose = useCallback(() => {\n if (!selectActiveOption()) {\n closePopover()\n }\n }, [selectActiveOption])\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return\n\n // Tab must not be prevented — allow native focus movement\n if (e.key === \"Tab\" && isOpen) {\n commitActiveOptionOrClose()\n return\n }\n\n const action = getComboboxActionFromKey(e, isOpen)\n if (!action) return\n\n e.preventDefault()\n\n switch (action) {\n case ComboboxAction.OpenPopup:\n openPopover()\n break\n case ComboboxAction.CommitAndClose:\n commitActiveOptionOrClose()\n break\n case ComboboxAction.MoveFirst:\n case ComboboxAction.MoveLast:\n if (!isOpen) openPopover()\n setActiveIndex(getUpdatedIndex(activeIndex, action, allOptions))\n break\n case ComboboxAction.MoveNext:\n case ComboboxAction.MovePrevious:\n setActiveIndex(getUpdatedIndex(activeIndex, action, allOptions))\n break\n case ComboboxAction.TypeCharacter: {\n if (!isOpen) openPopover()\n\n clearTimeout(searchTimeoutRef.current)\n searchStringRef.current += e.key\n searchTimeoutRef.current = setTimeout(() => {\n searchStringRef.current = \"\"\n }, 500)\n\n const searchIndex = getIndexByLetter(\n allOptions,\n searchStringRef.current,\n activeIndex\n )\n if (searchIndex >= 0) {\n setActiveIndex(searchIndex)\n }\n break\n }\n case ComboboxAction.ClosePopup:\n closePopover()\n break\n }\n }\n\n const createStableEventTarget = (\n target: HTMLSelectElement,\n valueSnapshot: string\n ) => {\n const proxy = Object.create(target)\n Object.defineProperties(proxy, {\n disabled: {\n configurable: true,\n enumerable: true,\n value: target.disabled,\n },\n form: { configurable: true, enumerable: true, value: target.form },\n name: { configurable: true, enumerable: true, value: target.name },\n type: { configurable: true, enumerable: true, value: target.type },\n value: { configurable: true, enumerable: true, value: valueSnapshot },\n })\n return proxy as HTMLSelectElement\n }\n\n const withSelectTarget = useCallback(\n <\n SourceEvent extends React.SyntheticEvent,\n TargetEvent extends React.SyntheticEvent<HTMLSelectElement>,\n >(\n event: SourceEvent,\n target: HTMLSelectElement,\n currentTarget: HTMLSelectElement = target\n ) => {\n return Object.defineProperties(Object.create(event), {\n currentTarget: { value: currentTarget },\n target: { value: target },\n }) as TargetEvent\n },\n []\n )\n\n const handleHiddenSelectChange = useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) => {\n if (!onChange) return\n\n const valueSnapshot =\n pendingChangeValueRef.current ?? event.currentTarget.value\n pendingChangeValueRef.current = null\n\n const stableEvent = withSelectTarget<\n React.ChangeEvent<HTMLSelectElement>,\n React.ChangeEvent<HTMLSelectElement>\n >(\n event,\n createStableEventTarget(\n event.target as HTMLSelectElement,\n valueSnapshot\n ),\n createStableEventTarget(event.currentTarget, valueSnapshot)\n )\n\n onChange(stableEvent)\n },\n [onChange, withSelectTarget]\n )\n\n const forwardEventToSelect = useCallback(\n <\n ButtonEvent extends React.SyntheticEvent<HTMLButtonElement>,\n SelectEvent extends React.SyntheticEvent<HTMLSelectElement>,\n >(\n event: ButtonEvent,\n handler?: (event: SelectEvent) => void\n ) => {\n if (!handler) return\n\n const hiddenEl = hiddenSelectRef.current\n if (!hiddenEl) return\n\n const stableEvent = withSelectTarget<ButtonEvent, SelectEvent>(\n event,\n hiddenEl\n )\n\n handler(stableEvent)\n },\n [withSelectTarget]\n )\n\n const handleButtonBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.FocusEvent<HTMLButtonElement>,\n React.FocusEvent<HTMLSelectElement>\n >(event, onBlur)\n },\n [forwardEventToSelect, onBlur]\n )\n\n const handleButtonClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.MouseEvent<HTMLButtonElement>,\n React.MouseEvent<HTMLSelectElement>\n >(event, onClick)\n },\n [forwardEventToSelect, onClick]\n )\n\n const handleButtonFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n forwardEventToSelect<\n React.FocusEvent<HTMLButtonElement>,\n React.FocusEvent<HTMLSelectElement>\n >(event, onFocus)\n },\n [forwardEventToSelect, onFocus]\n )\n\n const renderListOption = (option: SelectOption, index: number) => {\n const { disabled, divider, label, value } = option\n if (divider) return <li key={index} role=\"separator\" />\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard events are handled on the combobox button\n <li\n key={value}\n {...getDataAttributes(option)}\n aria-disabled={disabled || undefined}\n aria-selected={value === selectedValue}\n className={\n value === activeOption?.value\n ? \"tds-select-option--active\"\n : undefined\n }\n id={`${baseId}-option-${value}`}\n onClick={disabled ? undefined : () => commitSelection(value!)}\n role=\"option\"\n >\n {label}\n </li>\n )\n }\n\n return (\n <>\n <button\n ref={resolvedTriggerRef}\n popovertarget={baseId}\n aria-activedescendant={activeOptionId}\n aria-controls={baseId}\n aria-describedby={ariaDescribedBy}\n aria-disabled={disabled ? \"true\" : undefined}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-invalid={invalid ? \"true\" : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-required={required ? \"true\" : undefined}\n disabled={disabled}\n onBlur={handleButtonBlur}\n onClick={handleButtonClick}\n onFocus={handleButtonFocus}\n onKeyDown={handleKeyDown}\n role=\"combobox\"\n type=\"button\"\n >\n {selectedOption ? selectedOption.label : placeholder}\n </button>\n <div\n ref={popoverRef}\n popover=\"\"\n id={baseId}\n role=\"listbox\"\n aria-describedby={ariaDescribedBy}\n aria-invalid={invalid ? \"true\" : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-required={required ? \"true\" : undefined}\n >\n {renderListSegments(segments, baseId, renderListOption)}\n </div>\n <select\n {...props}\n ref={setHiddenSelectRef}\n aria-hidden\n className=\"tds-select-hidden-select\"\n disabled={disabled}\n id={`${baseId}-control`}\n onChange={handleHiddenSelectChange}\n required={required}\n tabIndex={-1}\n value={selectedValue ?? \"\"}\n >\n <option value=\"\" />\n <SelectOptions items={options} />\n </select>\n </>\n )\n }\n)\n\nSelectPopover.displayName = \"SelectPopover\"\n"],"names":["React"],"mappings":"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"}
|