@planningcenter/tapestry 4.1.0-rc.7 → 4.1.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/DataTable/DataTable.d.ts +18 -7
- package/dist/components/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/DataTable/DataTable.js +19 -8
- package/dist/components/DataTable/DataTable.js.map +1 -1
- package/dist/components/DataTable/ResultsCount.d.ts +4 -2
- package/dist/components/DataTable/ResultsCount.d.ts.map +1 -1
- package/dist/components/DataTable/ResultsCount.js +18 -10
- package/dist/components/DataTable/ResultsCount.js.map +1 -1
- package/dist/components/DataTable/TableActions.js +1 -0
- package/dist/components/DataTable/TableActions.js.map +1 -1
- package/dist/components/button/ActionsDropdownIconButton.d.ts +86 -0
- package/dist/components/button/ActionsDropdownIconButton.d.ts.map +1 -0
- package/dist/components/button/ActionsDropdownIconButton.js +20 -0
- package/dist/components/button/ActionsDropdownIconButton.js.map +1 -0
- package/dist/components/button/index.d.ts +2 -0
- package/dist/components/button/index.d.ts.map +1 -1
- package/dist/components/combo-box/ComboBox.d.ts +3 -1
- package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
- package/dist/components/combo-box/ComboBox.js +2 -1
- package/dist/components/combo-box/ComboBox.js.map +1 -1
- package/dist/components/link/IconLink.d.ts +5 -5
- package/dist/components/modal/ModalHeader.js +1 -0
- package/dist/components/modal/ModalHeader.js.map +1 -1
- package/dist/components/page-header/PageHeader.d.ts.map +1 -1
- package/dist/components/page-header/PageHeader.js +3 -24
- package/dist/components/page-header/PageHeader.js.map +1 -1
- package/dist/components/page-header/index.d.ts +2 -0
- package/dist/components/page-header/index.d.ts.map +1 -1
- package/dist/components/page-header/index.js +3 -0
- package/dist/components/page-header/index.js.map +1 -1
- package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.d.ts +11 -0
- package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.d.ts.map +1 -0
- package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.js +33 -0
- package/dist/components/page-header/tds-scroll-to-selected-in-unordered-list.js.map +1 -0
- package/dist/components/search-input/SearchInput.js +1 -0
- package/dist/components/search-input/SearchInput.js.map +1 -1
- package/dist/components/time-field/TimeField.d.ts +5 -3
- package/dist/components/time-field/TimeField.d.ts.map +1 -1
- package/dist/components/time-field/TimeField.js +4 -2
- package/dist/components/time-field/TimeField.js.map +1 -1
- package/dist/ext/@internationalized/date/dist/private/CalendarDate.js +39 -3
- package/dist/ext/@internationalized/date/dist/private/CalendarDate.js.map +1 -1
- package/dist/ext/@internationalized/date/dist/private/manipulation.js +9 -1
- package/dist/ext/@internationalized/date/dist/private/manipulation.js.map +1 -1
- package/dist/ext/@internationalized/date/dist/private/string.js +22 -2
- package/dist/ext/@internationalized/date/dist/private/string.js.map +1 -1
- package/dist/index.css +38 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/reactRender.css +811 -772
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +811 -772
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/unstable.css +40 -1
- package/dist/unstable.css.map +1 -1
- package/dist/unstable.js +1 -0
- package/dist/unstable.js.map +1 -1
- package/package.json +2 -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,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAIL,KAAK,aAAa,IAAI,iBAAiB,EAEvC,KAAK,GAAG,EAIR,KAAK,gBAAgB,EAErB,KAAK,YAAY,IAAI,gBAAgB,EAErC,KAAK,mBAAmB,EAGzB,MAAM,gCAAgC,CAAA;AAIvC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,MAAM,MAAM,oBAAoB,GAC5B,OAAO,GACP,WAAW,GACX,MAAM,GACN,SAAS,GACT,aAAa,GACb,SAAS,CAAA;AAEb,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI,WAAW,CACnD,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAChC,CAAA;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACtD,mCAAmC;IACnC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA;IAC7B,gGAAgG;IAChG,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mFAAmF;IACnF,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAA;IAC3D,qGAAqG;IACrG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAA;IACnC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC,CAAA;IACnE,iHAAiH;IACjH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wFAAwF;IACxF,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,SAAS,CAAC,CAAA;IAChD,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,KAAK,uBAAuB,GAAG,MAAM,CAAA;AAErC,KAAK,0BAA0B,GAC3B,uBAAuB,GACvB,mBAAmB,GACnB,cAAc,GACd,cAAc,GACd,cAAc,GACd,YAAY,GACZ,OAAO,GACP,MAAM,GACN,eAAe,GACf,eAAe,GACf,OAAO,CAAA;AAEX,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IACxD,+BAA+B,CAC7B,iBAAiB,CAAC,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC,EAC3C,aAAa,CAAC,CAAC,CAAC,EAChB,uBAAuB,EACvB,0BAA0B,CAC3B,CAAA;AAMH;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,qBAA4B,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,YAAY,EACZ,WAAqB,EACrB,QAAQ,EACR,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAA+B,EAC/B,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,oBAAoB,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,7 +22,7 @@ function resolveEmptyState(value) {
|
|
|
22
22
|
* @component
|
|
23
23
|
* @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
|
|
24
24
|
*/
|
|
25
|
-
function ComboBox({ allowsEmptyCollection = true, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger = "focus", onChange, onLoadMore, placeholder, readOnly, renderEmptyState = "No results", required, size = "md", ...restProps }) {
|
|
25
|
+
function ComboBox({ allowsEmptyCollection = true, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger = "focus", onChange, onLoadMore, placeholder, readOnly, renderEmptyState = "No results", required, showSearchIcon, size = "md", ...restProps }) {
|
|
26
26
|
const combinedClassName = classNames("tds-field tds-combo-box", {
|
|
27
27
|
"tds-combo-box--lg": size === "lg",
|
|
28
28
|
"tds-field--lg": size === "lg",
|
|
@@ -46,6 +46,7 @@ function ComboBox({ allowsEmptyCollection = true, children, className, descripti
|
|
|
46
46
|
React.createElement(ComboBox$1, { ...restProps, allowsEmptyCollection: allowsEmptyCollection, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultFilter: filter, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, menuTrigger: menuTrigger, onChange: onChange },
|
|
47
47
|
!hideLabel && React.createElement(Label, { className: "tds-field-label" }, label),
|
|
48
48
|
React.createElement(Group, { className: "tds-field-control tds-combo-box-field" },
|
|
49
|
+
showSearchIcon && (React.createElement(Icon, { "aria-hidden": true, className: "tds-combo-box-search-icon", symbol: "general#search" })),
|
|
49
50
|
React.createElement(Input, { className: "tds-combo-box-input", placeholder: placeholder }),
|
|
50
51
|
menuTrigger !== "focus" && !readOnly && (React.createElement(Button, { className: "tds-combo-box-button tds-btn tds-btn--infield" },
|
|
51
52
|
React.createElement(Icon, { "aria-hidden": true, symbol: "general#down-caret" })))),
|
|
@@ -1 +1 @@
|
|
|
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?: ReactNode\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":["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?: ReactNode\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 /** If `true`, renders a search icon before the input. */\n showSearchIcon?: 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 showSearchIcon,\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 {showSearchIcon && (\n <Icon\n aria-hidden\n className=\"tds-combo-box-search-icon\"\n symbol=\"general#search\"\n />\n )}\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":["AriaComboBox"],"mappings":"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"}
|
|
@@ -24,11 +24,8 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
|
|
|
24
24
|
slot?: string | undefined | undefined;
|
|
25
25
|
style?: React.CSSProperties | undefined;
|
|
26
26
|
title?: string | undefined | undefined;
|
|
27
|
+
dir?: string | undefined | undefined;
|
|
27
28
|
className?: string | undefined | undefined;
|
|
28
|
-
content?: string | undefined | undefined;
|
|
29
|
-
hidden?: boolean | undefined | undefined;
|
|
30
|
-
color?: string | undefined | undefined;
|
|
31
|
-
type?: string | undefined | undefined;
|
|
32
29
|
defaultChecked?: boolean | undefined | undefined;
|
|
33
30
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
34
31
|
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
@@ -37,8 +34,8 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
|
|
|
37
34
|
autoFocus?: boolean | undefined | undefined;
|
|
38
35
|
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
39
36
|
contextMenu?: string | undefined | undefined;
|
|
40
|
-
dir?: string | undefined | undefined;
|
|
41
37
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
38
|
+
hidden?: boolean | undefined | undefined;
|
|
42
39
|
id?: string | undefined | undefined;
|
|
43
40
|
lang?: string | undefined | undefined;
|
|
44
41
|
nonce?: string | undefined | undefined;
|
|
@@ -48,6 +45,7 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
|
|
|
48
45
|
radioGroup?: string | undefined | undefined;
|
|
49
46
|
role?: React.AriaRole | undefined;
|
|
50
47
|
about?: string | undefined | undefined;
|
|
48
|
+
content?: string | undefined | undefined;
|
|
51
49
|
datatype?: string | undefined | undefined;
|
|
52
50
|
inlist?: any;
|
|
53
51
|
property?: string | undefined | undefined;
|
|
@@ -59,6 +57,7 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
|
|
|
59
57
|
autoCapitalize?: string | undefined | undefined;
|
|
60
58
|
autoCorrect?: string | undefined | undefined;
|
|
61
59
|
autoSave?: string | undefined | undefined;
|
|
60
|
+
color?: string | undefined | undefined;
|
|
62
61
|
itemProp?: string | undefined | undefined;
|
|
63
62
|
itemScope?: boolean | undefined | undefined;
|
|
64
63
|
itemType?: string | undefined | undefined;
|
|
@@ -288,6 +287,7 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
|
|
|
288
287
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLAnchorElement> | undefined;
|
|
289
288
|
media?: string | undefined | undefined;
|
|
290
289
|
target?: React.HTMLAttributeAnchorTarget | undefined;
|
|
290
|
+
type?: string | undefined | undefined;
|
|
291
291
|
download?: any;
|
|
292
292
|
hrefLang?: string | undefined | undefined;
|
|
293
293
|
ping?: string | undefined | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal/ModalHeader.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes, useContext } from \"react\"\n\nimport { ModalContext } from \"./ModalContext\"\n\nexport interface ModalHeaderProps {\n /** Secondary line under the title. */\n subtitle?: string\n /** The dialog's accessible name. */\n title: string\n}\n\nexport type ModalHeaderElementProps = Omit<\n HTMLAttributes<HTMLDivElement>,\n keyof ModalHeaderProps | \"children\"\n> &\n ModalHeaderProps\n\n/**\n * The header region of a `Modal` — renders the title, an optional subtitle,\n * and the close button. `dismissible` on `Modal` controls whether the close\n * button renders here, so there's a single knob rather than a second prop to\n * keep in sync. Must be rendered inside a `Modal`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}\n */\nexport function ModalHeader({\n className,\n subtitle,\n title,\n ...restProps\n}: ModalHeaderElementProps) {\n const { dismissible, requestClose, subtitleId, titleId } =\n useContext(ModalContext) ?? {}\n const combinedClassName = classNames(\"tds-modal-header\", className)\n\n return (\n <header {...restProps} className={combinedClassName}>\n <h2 className=\"tds-modal-title\" id={titleId}>\n {title}\n </h2>\n {subtitle && (\n <p className=\"tds-modal-subtitle\" id={subtitleId}>\n {subtitle}\n </p>\n )}\n {dismissible && (\n <IconButton\n aria-label=\"Close\"\n className=\"tds-modal-close\"\n icon={<Icon aria-hidden symbol=\"general#x\" />}\n kind=\"ghost\"\n onClick={requestClose}\n size=\"sm\"\n />\n )}\n </header>\n )\n}\n\nModalHeader.displayName = \"ModalHeader\"\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal/ModalHeader.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes, useContext } from \"react\"\n\nimport { ModalContext } from \"./ModalContext\"\n\nexport interface ModalHeaderProps {\n /** Secondary line under the title. */\n subtitle?: string\n /** The dialog's accessible name. */\n title: string\n}\n\nexport type ModalHeaderElementProps = Omit<\n HTMLAttributes<HTMLDivElement>,\n keyof ModalHeaderProps | \"children\"\n> &\n ModalHeaderProps\n\n/**\n * The header region of a `Modal` — renders the title, an optional subtitle,\n * and the close button. `dismissible` on `Modal` controls whether the close\n * button renders here, so there's a single knob rather than a second prop to\n * keep in sync. Must be rendered inside a `Modal`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}\n */\nexport function ModalHeader({\n className,\n subtitle,\n title,\n ...restProps\n}: ModalHeaderElementProps) {\n const { dismissible, requestClose, subtitleId, titleId } =\n useContext(ModalContext) ?? {}\n const combinedClassName = classNames(\"tds-modal-header\", className)\n\n return (\n <header {...restProps} className={combinedClassName}>\n <h2 className=\"tds-modal-title\" id={titleId}>\n {title}\n </h2>\n {subtitle && (\n <p className=\"tds-modal-subtitle\" id={subtitleId}>\n {subtitle}\n </p>\n )}\n {dismissible && (\n <IconButton\n aria-label=\"Close\"\n className=\"tds-modal-close\"\n icon={<Icon aria-hidden symbol=\"general#x\" />}\n kind=\"ghost\"\n onClick={requestClose}\n size=\"sm\"\n />\n )}\n </header>\n )\n}\n\nModalHeader.displayName = \"ModalHeader\"\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAsBA;;;;;;;;AAQG;AACG,SAAU,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,SAAS,EACY,EAAA;AACxB,IAAA,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,GACtD,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE;IAChC,MAAM,iBAAiB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC;AAEnE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GAAY,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAA;QACjDA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iBAAiB,EAAC,EAAE,EAAE,OAAO,EAAA,EACxC,KAAK,CACH;AACJ,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,UAAU,EAAA,EAC7C,QAAQ,CACP,CACL;AACA,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EACE,OAAO,EAClB,SAAS,EAAC,iBAAiB,EAC3B,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAAa,MAAM,EAAC,WAAW,EAAA,CAAG,EAC7C,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,IAAI,EAAA,CACT,CACH,CACM;AAEb;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBA+BA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import React
|
|
2
|
+
import React from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* A page header lays out the primary title, optional navigation, and
|
|
@@ -15,7 +15,6 @@ function PageHeader({ children, actions, navigation, className, inactive = false
|
|
|
15
15
|
? React.Children.count(actions.props.children) > 1
|
|
16
16
|
: React.Children.count(actions) > 1
|
|
17
17
|
: false;
|
|
18
|
-
const nav = useScrollToSelected(navigation);
|
|
19
18
|
return (React.createElement("header", { className: classNames("tds-page-header", className, {
|
|
20
19
|
"has-multi-actions": hasMultiActions,
|
|
21
20
|
"has-nav": !!navigation,
|
|
@@ -25,28 +24,8 @@ function PageHeader({ children, actions, navigation, className, inactive = false
|
|
|
25
24
|
React.createElement("div", { className: "tds-page-header__title-bar" },
|
|
26
25
|
React.createElement("div", { className: "tds-page-header__primary" }, children),
|
|
27
26
|
actions && (React.createElement("div", { className: "tds-page-header__actions tds-no-print" }, actions))),
|
|
28
|
-
navigation && (React.createElement("nav", {
|
|
29
|
-
|
|
30
|
-
function useScrollToSelected(navigation) {
|
|
31
|
-
const nav = useRef(null);
|
|
32
|
-
useEffect(() => {
|
|
33
|
-
if (!nav.current)
|
|
34
|
-
return;
|
|
35
|
-
const ulElement = nav.current.querySelector("ul");
|
|
36
|
-
if (!ulElement)
|
|
37
|
-
return;
|
|
38
|
-
const selectedItem = ulElement.querySelector(".selected");
|
|
39
|
-
if (selectedItem) {
|
|
40
|
-
const bounds = selectedItem.getBoundingClientRect();
|
|
41
|
-
const ulBounds = ulElement.getBoundingClientRect();
|
|
42
|
-
if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {
|
|
43
|
-
ulElement.scrollTo({
|
|
44
|
-
left: ulElement.scrollLeft + bounds.left - ulBounds.left,
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}, [navigation]);
|
|
49
|
-
return nav;
|
|
27
|
+
navigation && (React.createElement("nav", { className: "tds-page-header__nav tds-no-print" },
|
|
28
|
+
React.createElement("tds-scroll-to-selected-in-unordered-list", null, navigation)))));
|
|
50
29
|
}
|
|
51
30
|
|
|
52
31
|
export { PageHeader };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React
|
|
1
|
+
{"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React from \"react\"\n\n/**\n * A page header lays out the primary title, optional navigation, and\n * action buttons at the top of a page. Use one per page to anchor the\n * page's identity and primary controls.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-page-header--docs | Storybook Documentation}\n */\nexport function PageHeader({\n children,\n actions,\n navigation,\n className,\n inactive = false,\n profile = false,\n}: {\n /**\n * Actions to be displayed on the right side of the header. Elements\n * should be styled as buttons.\n */\n actions?: React.ReactNode\n /**\n * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n */\n children: React.ReactNode\n className?: string\n /**\n * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n */\n inactive?: boolean\n /**\n * Navigation links to be displayed on the left side of the header.\n * Contents should be an unordered list with items being links or\n * buttons. Specify `selected` for the active link (as well as adding\n * `aria-current=\"page\"` for accessibility).\n */\n navigation?: React.ReactNode\n /**\n * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n */\n profile?: boolean\n}) {\n const hasMultiActions = actions\n ? React.isValidElement(actions) && actions.type === React.Fragment\n ? React.Children.count(actions.props.children) > 1\n : React.Children.count(actions) > 1\n : false\n\n return (\n <header\n className={classNames(\"tds-page-header\", className, {\n \"has-multi-actions\": hasMultiActions,\n \"has-nav\": !!navigation,\n inactive,\n \"tds-page-header--profile\": profile,\n })}\n >\n <div className=\"tds-page-header__title-bar\">\n <div className=\"tds-page-header__primary\">{children}</div>\n {actions && (\n <div className=\"tds-page-header__actions tds-no-print\">{actions}</div>\n )}\n </div>\n {navigation && (\n <nav className=\"tds-page-header__nav tds-no-print\">\n <tds-scroll-to-selected-in-unordered-list>\n {navigation}\n </tds-scroll-to-selected-in-unordered-list>\n </nav>\n )}\n </header>\n )\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GA2BhB,EAAA;IACC,MAAM,eAAe,GAAG;AACtB,UAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC;AACxD,cAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;cAC/C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;UAClC,KAAK;IAET,QACE,gCACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;AAClD,YAAA,mBAAmB,EAAE,eAAe;YACpC,SAAS,EAAE,CAAC,CAAC,UAAU;YACvB,QAAQ;AACR,YAAA,0BAA0B,EAAE,OAAO;SACpC,CAAC,EAAA;QAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO;YACzD,OAAO,KACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,EAAE,OAAO,CAAO,CACvE,CACG;AACL,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA;AAChD,YAAA,KAAA,CAAA,aAAA,CAAA,0CAAA,EAAA,IAAA,EACG,UAAU,CAC8B,CACvC,CACP,CACM;AAEb;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AACpB,OAAO,4CAA4C,CAAA;AAUnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import './tds-scroll-to-selected-in-unordered-list.js';
|
|
1
2
|
import '../../packages/tapestry-wc/dist/components/p-EYzqvkpp.js';
|
|
2
3
|
import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-page-header.js';
|
|
3
4
|
import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-page-header-nav.js';
|
|
5
|
+
import 'classnames';
|
|
6
|
+
import 'react';
|
|
4
7
|
|
|
5
8
|
defineCustomElement();
|
|
6
9
|
defineCustomElement$1();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/page-header/index.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport {\n defineCustomElementTdsPageHeader,\n defineCustomElementTdsPageHeaderNav,\n} from \"tapestry-wc\"\n\ndefineCustomElementTdsPageHeader()\ndefineCustomElementTdsPageHeaderNav()\n"],"names":["defineCustomElementTdsPageHeader","defineCustomElementTdsPageHeaderNav"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/page-header/index.tsx"],"sourcesContent":["import \"./index.css\"\nimport \"./tds-scroll-to-selected-in-unordered-list\"\n\nimport {\n defineCustomElementTdsPageHeader,\n defineCustomElementTdsPageHeaderNav,\n} from \"tapestry-wc\"\n\ndefineCustomElementTdsPageHeader()\ndefineCustomElementTdsPageHeaderNav()\n\nexport { PageHeader } from \"./PageHeader\"\n"],"names":["defineCustomElementTdsPageHeader","defineCustomElementTdsPageHeaderNav"],"mappings":";;;;;;;AAQAA,mBAAgC,EAAE;AAClCC,qBAAmC,EAAE"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type React from "react";
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
"tds-scroll-to-selected-in-unordered-list": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
|
|
6
|
+
value?: string;
|
|
7
|
+
}, HTMLElement>;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=tds-scroll-to-selected-in-unordered-list.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tds-scroll-to-selected-in-unordered-list.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/tds-scroll-to-selected-in-unordered-list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsC9B,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,0CAA0C,EAAE,KAAK,CAAC,iBAAiB,CACjE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,EACtD,WAAW,CACZ,CAAA;SACF;KACF;CACF"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A custom element that scrolls its child element with the class "selected" into view.
|
|
3
|
+
*
|
|
4
|
+
* Usage:
|
|
5
|
+
* <tds-scroll-to-selected-in-unordered-list>
|
|
6
|
+
* <ul>
|
|
7
|
+
* <li><a class="selected">Item</a></li>
|
|
8
|
+
* </ul>
|
|
9
|
+
* </tds-scroll-to-selected-in-unordered-list>
|
|
10
|
+
*/
|
|
11
|
+
if (typeof HTMLElement !== "undefined") {
|
|
12
|
+
class TdsScrollToSelectedInUnorderedList extends HTMLElement {
|
|
13
|
+
connectedCallback() {
|
|
14
|
+
const ulElement = this.querySelector("ul");
|
|
15
|
+
if (!ulElement)
|
|
16
|
+
return;
|
|
17
|
+
const selectedItem = ulElement.querySelector(".selected");
|
|
18
|
+
if (selectedItem) {
|
|
19
|
+
const bounds = selectedItem.getBoundingClientRect();
|
|
20
|
+
const ulBounds = ulElement.getBoundingClientRect();
|
|
21
|
+
if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {
|
|
22
|
+
ulElement.scrollTo({
|
|
23
|
+
left: ulElement.scrollLeft + bounds.left - ulBounds.left,
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
if (!customElements.get("tds-scroll-to-selected-in-unordered-list")) {
|
|
30
|
+
customElements.define("tds-scroll-to-selected-in-unordered-list", TdsScrollToSelectedInUnorderedList);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=tds-scroll-to-selected-in-unordered-list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tds-scroll-to-selected-in-unordered-list.js","sources":["../../../src/components/page-header/tds-scroll-to-selected-in-unordered-list.ts"],"sourcesContent":["import type React from \"react\"\n\n/**\n * A custom element that scrolls its child element with the class \"selected\" into view.\n *\n * Usage:\n * <tds-scroll-to-selected-in-unordered-list>\n * <ul>\n * <li><a class=\"selected\">Item</a></li>\n * </ul>\n * </tds-scroll-to-selected-in-unordered-list>\n */\nif (typeof HTMLElement !== \"undefined\") {\n class TdsScrollToSelectedInUnorderedList extends HTMLElement {\n connectedCallback() {\n const ulElement = this.querySelector(\"ul\")\n if (!ulElement) return\n const selectedItem = ulElement.querySelector(\".selected\")\n if (selectedItem) {\n const bounds = selectedItem.getBoundingClientRect()\n const ulBounds = ulElement.getBoundingClientRect()\n if (bounds.right > ulBounds.right || bounds.left < ulBounds.left) {\n ulElement.scrollTo({\n left: ulElement.scrollLeft + bounds.left - ulBounds.left,\n })\n }\n }\n }\n }\n\n if (!customElements.get(\"tds-scroll-to-selected-in-unordered-list\")) {\n customElements.define(\n \"tds-scroll-to-selected-in-unordered-list\",\n TdsScrollToSelectedInUnorderedList\n )\n }\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"tds-scroll-to-selected-in-unordered-list\": React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement> & { value?: string },\n HTMLElement\n >\n }\n }\n}\n"],"names":[],"mappings":"AAEA;;;;;;;;;AASG;AACH,IAAI,OAAO,WAAW,KAAK,WAAW,EAAE;IACtC,MAAM,kCAAmC,SAAQ,WAAW,CAAA;QAC1D,iBAAiB,GAAA;YACf,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC1C,YAAA,IAAI,CAAC,SAAS;gBAAE;YAChB,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;YACzD,IAAI,YAAY,EAAE;AAChB,gBAAA,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACnD,gBAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE;AAClD,gBAAA,IAAI,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE;oBAChE,SAAS,CAAC,QAAQ,CAAC;wBACjB,IAAI,EAAE,SAAS,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;AACzD,qBAAA,CAAC;gBACJ;YACF;QACF;AACD;IAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,0CAA0C,CAAC,EAAE;AACnE,QAAA,cAAc,CAAC,MAAM,CACnB,0CAA0C,EAC1C,kCAAkC,CACnC;IACH;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport { Field } from \"@components/field\"\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, {\n forwardRef,\n type InputHTMLAttributes,\n useRef,\n useState,\n} from \"react\"\n\nexport type SearchInputSize = \"lg\" | \"md\"\n\ninterface SearchInputBaseProps {\n /** Helper text below the input. Styled as an error when `invalid`. */\n description?: React.ReactNode\n /** Triggers invalid state (error border, error description, aria-invalid). */\n invalid?: boolean\n /** Visual size — cascades to the icon, input, and clear button via Field's font-size custom property. Defaults to 'md'. */\n size?: SearchInputSize\n}\n\ninterface SearchInputWithLabel extends SearchInputBaseProps {\n \"aria-labelledby\"?: never\n /** If true, the label is visually hidden but remains in the DOM/AT tree. */\n hideLabel?: boolean\n /** The visible label. */\n label: React.ReactNode\n}\n\ninterface SearchInputWithAriaLabelledBy extends SearchInputBaseProps {\n \"aria-labelledby\": string\n hideLabel?: never\n label?: never\n}\n\nexport type SearchInputProps =\n | SearchInputWithAriaLabelledBy\n | SearchInputWithLabel\n\n/**\n * Combines standard HTML input attributes with SearchInput's own props.\n * `type` is fixed to \"search\" and not exposed; `size` is redefined above.\n */\nexport type SearchInputElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof SearchInputProps | \"size\" | \"type\"\n> &\n SearchInputProps\n\n/**\n * A search-specific input with a leading search icon and a trailing clear\n * (\"x\") button, built on `type=\"search\"`. Composes `Field` directly for\n * label, description, and state layout.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-searchinput--docs | Storybook Documentation}\n */\nexport const SearchInput = forwardRef<\n HTMLInputElement,\n SearchInputElementProps\n>(function SearchInput(\n {\n \"aria-labelledby\": ariaLabelledBy,\n className,\n defaultValue,\n description,\n disabled,\n hideLabel,\n id,\n invalid,\n label,\n onChange,\n onKeyDown,\n readOnly,\n size = \"md\",\n value,\n ...restProps\n }: SearchInputElementProps,\n ref\n) {\n const innerRef = useRef<HTMLInputElement | null>(null)\n const setRefs = (node: HTMLInputElement | null) => {\n innerRef.current = node\n if (typeof ref === \"function\") ref(node)\n else if (ref) {\n ;(ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n }\n }\n\n const stableId = useId()\n const inputId = id || `tds-search-input-${stableId}`\n const descriptionId = description ? `${inputId}-description` : undefined\n\n const [uncontrolledHasValue, setUncontrolledHasValue] = useState(\n () => String(defaultValue ?? \"\").length > 0\n )\n const hasValue =\n value !== undefined ? String(value).length > 0 : uncontrolledHasValue\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (value === undefined) {\n setUncontrolledHasValue(event.target.value.length > 0)\n }\n onChange?.(event)\n }\n\n const handleClear = () => {\n const input = innerRef.current\n if (!input) return\n\n const nativeSetter = Object.getOwnPropertyDescriptor(\n input.constructor.prototype,\n \"value\"\n )?.set\n nativeSetter?.call(input, \"\")\n input.dispatchEvent(new Event(\"input\", { bubbles: true }))\n input.focus()\n if (value === undefined) {\n setUncontrolledHasValue(false)\n }\n }\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Escape\" && hasValue) {\n event.stopPropagation()\n }\n onKeyDown?.(event)\n }\n\n const fieldClassName = classNames(\n { \"tds-field--lg\": size === \"lg\" },\n className\n )\n\n const fieldLabelProps = ariaLabelledBy\n ? { \"aria-labelledby\": ariaLabelledBy }\n : { hideLabel, label }\n\n return (\n <Field\n {...fieldLabelProps}\n className={fieldClassName}\n description={description}\n id={inputId}\n >\n <div\n className={classNames(\"tds-search-input-control\", {\n \"tds-search-input-control--has-value\": hasValue,\n })}\n >\n <Icon\n aria-hidden\n className=\"tds-search-input-icon\"\n symbol=\"general#search\"\n />\n <input\n {...restProps}\n aria-describedby={descriptionId}\n aria-invalid={invalid || undefined}\n aria-labelledby={ariaLabelledBy}\n defaultValue={defaultValue}\n disabled={disabled}\n id={inputId}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n readOnly={readOnly}\n ref={setRefs}\n type=\"search\"\n value={value}\n />\n <IconButton\n aria-label=\"Clear\"\n icon={\n <Icon\n aria-hidden\n className=\"tds-search-input-clear-icon\"\n symbol=\"general#x\"\n />\n }\n kind=\"neutral-inline\"\n onClick={handleClear}\n tabIndex={-1}\n />\n </div>\n </Field>\n )\n})\n\nSearchInput.displayName = \"SearchInput\"\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport { Field } from \"@components/field\"\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, {\n forwardRef,\n type InputHTMLAttributes,\n useRef,\n useState,\n} from \"react\"\n\nexport type SearchInputSize = \"lg\" | \"md\"\n\ninterface SearchInputBaseProps {\n /** Helper text below the input. Styled as an error when `invalid`. */\n description?: React.ReactNode\n /** Triggers invalid state (error border, error description, aria-invalid). */\n invalid?: boolean\n /** Visual size — cascades to the icon, input, and clear button via Field's font-size custom property. Defaults to 'md'. */\n size?: SearchInputSize\n}\n\ninterface SearchInputWithLabel extends SearchInputBaseProps {\n \"aria-labelledby\"?: never\n /** If true, the label is visually hidden but remains in the DOM/AT tree. */\n hideLabel?: boolean\n /** The visible label. */\n label: React.ReactNode\n}\n\ninterface SearchInputWithAriaLabelledBy extends SearchInputBaseProps {\n \"aria-labelledby\": string\n hideLabel?: never\n label?: never\n}\n\nexport type SearchInputProps =\n | SearchInputWithAriaLabelledBy\n | SearchInputWithLabel\n\n/**\n * Combines standard HTML input attributes with SearchInput's own props.\n * `type` is fixed to \"search\" and not exposed; `size` is redefined above.\n */\nexport type SearchInputElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof SearchInputProps | \"size\" | \"type\"\n> &\n SearchInputProps\n\n/**\n * A search-specific input with a leading search icon and a trailing clear\n * (\"x\") button, built on `type=\"search\"`. Composes `Field` directly for\n * label, description, and state layout.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-searchinput--docs | Storybook Documentation}\n */\nexport const SearchInput = forwardRef<\n HTMLInputElement,\n SearchInputElementProps\n>(function SearchInput(\n {\n \"aria-labelledby\": ariaLabelledBy,\n className,\n defaultValue,\n description,\n disabled,\n hideLabel,\n id,\n invalid,\n label,\n onChange,\n onKeyDown,\n readOnly,\n size = \"md\",\n value,\n ...restProps\n }: SearchInputElementProps,\n ref\n) {\n const innerRef = useRef<HTMLInputElement | null>(null)\n const setRefs = (node: HTMLInputElement | null) => {\n innerRef.current = node\n if (typeof ref === \"function\") ref(node)\n else if (ref) {\n ;(ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n }\n }\n\n const stableId = useId()\n const inputId = id || `tds-search-input-${stableId}`\n const descriptionId = description ? `${inputId}-description` : undefined\n\n const [uncontrolledHasValue, setUncontrolledHasValue] = useState(\n () => String(defaultValue ?? \"\").length > 0\n )\n const hasValue =\n value !== undefined ? String(value).length > 0 : uncontrolledHasValue\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (value === undefined) {\n setUncontrolledHasValue(event.target.value.length > 0)\n }\n onChange?.(event)\n }\n\n const handleClear = () => {\n const input = innerRef.current\n if (!input) return\n\n const nativeSetter = Object.getOwnPropertyDescriptor(\n input.constructor.prototype,\n \"value\"\n )?.set\n nativeSetter?.call(input, \"\")\n input.dispatchEvent(new Event(\"input\", { bubbles: true }))\n input.focus()\n if (value === undefined) {\n setUncontrolledHasValue(false)\n }\n }\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Escape\" && hasValue) {\n event.stopPropagation()\n }\n onKeyDown?.(event)\n }\n\n const fieldClassName = classNames(\n { \"tds-field--lg\": size === \"lg\" },\n className\n )\n\n const fieldLabelProps = ariaLabelledBy\n ? { \"aria-labelledby\": ariaLabelledBy }\n : { hideLabel, label }\n\n return (\n <Field\n {...fieldLabelProps}\n className={fieldClassName}\n description={description}\n id={inputId}\n >\n <div\n className={classNames(\"tds-search-input-control\", {\n \"tds-search-input-control--has-value\": hasValue,\n })}\n >\n <Icon\n aria-hidden\n className=\"tds-search-input-icon\"\n symbol=\"general#search\"\n />\n <input\n {...restProps}\n aria-describedby={descriptionId}\n aria-invalid={invalid || undefined}\n aria-labelledby={ariaLabelledBy}\n defaultValue={defaultValue}\n disabled={disabled}\n id={inputId}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n readOnly={readOnly}\n ref={setRefs}\n type=\"search\"\n value={value}\n />\n <IconButton\n aria-label=\"Clear\"\n icon={\n <Icon\n aria-hidden\n className=\"tds-search-input-clear-icon\"\n symbol=\"general#x\"\n />\n }\n kind=\"neutral-inline\"\n onClick={handleClear}\n tabIndex={-1}\n />\n </div>\n </Field>\n )\n})\n\nSearchInput.displayName = \"SearchInput\"\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqDA;;;;;;;AAOG;MACU,WAAW,GAAG,UAAU,CAGnC,SAAS,WAAW,CACpB,EACE,iBAAiB,EAAE,cAAc,EACjC,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,SAAS,EACY,EAC1B,GAAG,EAAA;AAEH,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC;AACtD,IAAA,MAAM,OAAO,GAAG,CAAC,IAA6B,KAAI;AAChD,QAAA,QAAQ,CAAC,OAAO,GAAG,IAAI;QACvB,IAAI,OAAO,GAAG,KAAK,UAAU;YAAE,GAAG,CAAC,IAAI,CAAC;aACnC,IAAI,GAAG,EAAE;AACV,YAAA,GAAuD,CAAC,OAAO,GAAG,IAAI;QAC1E;AACF,IAAA,CAAC;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,iBAAA,EAAoB,QAAQ,EAAE;AACpD,IAAA,MAAM,aAAa,GAAG,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS;IAExE,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAC9D,MAAM,MAAM,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAC5C;IACD,MAAM,QAAQ,GACZ,KAAK,KAAK,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,oBAAoB;AAEvE,IAAA,MAAM,YAAY,GAAG,CAAC,KAA0C,KAAI;AAClE,QAAA,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACxD;AACA,QAAA,QAAQ,GAAG,KAAK,CAAC;AACnB,IAAA,CAAC;IAED,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,KAAK;YAAE;AAEZ,QAAA,MAAM,YAAY,GAAG,MAAM,CAAC,wBAAwB,CAClD,KAAK,CAAC,WAAW,CAAC,SAAS,EAC3B,OAAO,CACR,EAAE,GAAG;AACN,QAAA,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;AAC7B,QAAA,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC1D,KAAK,CAAC,KAAK,EAAE;AACb,QAAA,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB,uBAAuB,CAAC,KAAK,CAAC;QAChC;AACF,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAA4C,KAAI;QACrE,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,QAAQ,EAAE;YACtC,KAAK,CAAC,eAAe,EAAE;QACzB;AACA,QAAA,SAAS,GAAG,KAAK,CAAC;AACpB,IAAA,CAAC;AAED,IAAA,MAAM,cAAc,GAAG,UAAU,CAC/B,EAAE,eAAe,EAAE,IAAI,KAAK,IAAI,EAAE,EAClC,SAAS,CACV;IAED,MAAM,eAAe,GAAG;AACtB,UAAE,EAAE,iBAAiB,EAAE,cAAc;AACrC,UAAE,EAAE,SAAS,EAAE,KAAK,EAAE;AAExB,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAA,GACA,eAAe,EACnB,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,OAAO,EAAA;AAEX,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE;AAChD,gBAAA,qCAAqC,EAAE,QAAQ;aAChD,CAAC,EAAA;YAEF,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,uBAAuB,EACjC,MAAM,EAAC,gBAAgB,EAAA,CACvB;YACF,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,sBACK,aAAa,EAAA,cAAA,EACjB,OAAO,IAAI,SAAS,qBACjB,cAAc,EAC/B,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,OAAO,EACX,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EAAA,CACZ;AACF,YAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EACE,OAAO,EAClB,IAAI,EACF,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAEH,SAAS,EAAC,6BAA6B,EACvC,MAAM,EAAC,WAAW,EAAA,CAClB,EAEJ,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,EAAE,EAAA,CACZ,CACE,CACA;AAEZ,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import "../field/index.css";
|
|
2
2
|
import "./index.css";
|
|
3
|
-
import type
|
|
3
|
+
import { type CalendarDateTime, type Time, type ZonedDateTime } from "@internationalized/date";
|
|
4
4
|
import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
|
|
5
5
|
import React from "react";
|
|
6
6
|
import { type TimeFieldProps as AriaTimeFieldProps } from "react-aria-components/TimeField";
|
|
7
7
|
export type TimeFieldSize = "md" | "lg";
|
|
8
8
|
export type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime;
|
|
9
9
|
export interface TimeFieldProps {
|
|
10
|
+
/** The default value for the field, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `"12:00"`). */
|
|
11
|
+
defaultValue?: TimeFieldValue | string;
|
|
10
12
|
/** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */
|
|
11
13
|
description?: React.ReactNode;
|
|
12
14
|
/** Disables the field. */
|
|
@@ -31,7 +33,7 @@ export interface TimeFieldProps {
|
|
|
31
33
|
size?: TimeFieldSize;
|
|
32
34
|
}
|
|
33
35
|
type AriaTimeFieldPropsToOmit = "children" | "granularity" | "placeholderValue" | "shouldForceLeadingZeros" | "slot";
|
|
34
|
-
type AriaTimeFieldPropsToInclude = "
|
|
36
|
+
type AriaTimeFieldPropsToInclude = "hideTimeZone" | "hourCycle" | "name" | "onChange" | "value";
|
|
35
37
|
export type TimeFieldElementProps = CombineAriaPropsWithCustomProps<AriaTimeFieldProps<TimeFieldValue>, TimeFieldProps, AriaTimeFieldPropsToOmit, AriaTimeFieldPropsToInclude>;
|
|
36
38
|
/**
|
|
37
39
|
* A time field component allows users to enter and edit time values as individual
|
|
@@ -46,6 +48,6 @@ export type TimeFieldElementProps = CombineAriaPropsWithCustomProps<AriaTimeFiel
|
|
|
46
48
|
* @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-timefield--docs | Storybook Documentation}
|
|
47
49
|
* @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}
|
|
48
50
|
*/
|
|
49
|
-
export declare function TimeField({ className, description, disabled, forceLeadingZeros, hideLabel, invalid, label, max, min, readOnly, required, size, ...restProps }: TimeFieldElementProps): React.JSX.Element;
|
|
51
|
+
export declare function TimeField({ className, defaultValue, description, disabled, forceLeadingZeros, hideLabel, invalid, label, max, min, readOnly, required, size, ...restProps }: TimeFieldElementProps): React.JSX.Element;
|
|
50
52
|
export {};
|
|
51
53
|
//# sourceMappingURL=TimeField.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAEpB,OAAO,EACL,KAAK,gBAAgB,EAErB,KAAK,IAAI,EACT,KAAK,aAAa,EACnB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,cAAc,IAAI,kBAAkB,EAC1C,MAAM,iCAAiC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,IAAI,GAAG,aAAa,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,0GAA0G;IAC1G,YAAY,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IACtC,gGAAgG;IAChG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,wDAAwD;IACxD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB;AAED,KAAK,wBAAwB,GACzB,UAAU,GACV,aAAa,GACb,kBAAkB,GAClB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,2BAA2B,GAC5B,cAAc,GACd,WAAW,GACX,MAAM,GACN,UAAU,GACV,OAAO,CAAA;AAEX,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,kBAAkB,CAAC,cAAc,CAAC,EAClC,cAAc,EACd,wBAAwB,EACxB,2BAA2B,CAC5B,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB,qBAwDvB"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { parseTime as $58246871e4652552$export$c9698ec7f05a07e1 } from './../../ext/@internationalized/date/dist/private/string.js';
|
|
1
2
|
import Icon from '../../utilities/Icon.js';
|
|
2
3
|
import classNames from 'classnames';
|
|
3
4
|
import React from 'react';
|
|
@@ -16,12 +17,13 @@ import { TimeField as TimeField$1, Label, DateInput, DateSegment, Text } from 'r
|
|
|
16
17
|
* @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-timefield--docs | Storybook Documentation}
|
|
17
18
|
* @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}
|
|
18
19
|
*/
|
|
19
|
-
function TimeField({ className, description, disabled, forceLeadingZeros, hideLabel, invalid, label, max, min, readOnly, required, size = "md", ...restProps }) {
|
|
20
|
+
function TimeField({ className, defaultValue, description, disabled, forceLeadingZeros, hideLabel, invalid, label, max, min, readOnly, required, size = "md", ...restProps }) {
|
|
21
|
+
const resolvedDefaultValue = typeof defaultValue === "string" ? $58246871e4652552$export$c9698ec7f05a07e1(defaultValue) : defaultValue;
|
|
20
22
|
const combinedClassName = classNames("tds-field tds-time-field", {
|
|
21
23
|
"tds-field--lg": size === "lg",
|
|
22
24
|
"tds-time-field--lg": size === "lg",
|
|
23
25
|
}, className);
|
|
24
|
-
return (React.createElement(TimeField$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, granularity: "minute", isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: max ?? undefined, minValue: min ?? undefined, shouldForceLeadingZeros: forceLeadingZeros },
|
|
26
|
+
return (React.createElement(TimeField$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultValue: resolvedDefaultValue, granularity: "minute", isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: max ?? undefined, minValue: min ?? undefined, shouldForceLeadingZeros: forceLeadingZeros },
|
|
25
27
|
!hideLabel && React.createElement(Label, { className: "tds-field-label" }, label),
|
|
26
28
|
React.createElement(DateInput, { className: "tds-field-control tds-time-field-input" }, (segment) => (React.createElement(DateSegment, { className: segment.type === "literal"
|
|
27
29
|
? "tds-field-date-segment-separator"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"../field/index.css\"\nimport \"./index.css\"\n\nimport
|
|
1
|
+
{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"../field/index.css\"\nimport \"./index.css\"\n\nimport {\n type CalendarDateTime,\n parseTime,\n type Time,\n type ZonedDateTime,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n DateInput,\n DateSegment,\n Label,\n Text,\n TimeField as AriaTimeField,\n type TimeFieldProps as AriaTimeFieldProps,\n} from \"react-aria-components/TimeField\"\n\nexport type TimeFieldSize = \"md\" | \"lg\"\n\nexport type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime\n\nexport interface TimeFieldProps {\n /** The default value for the field, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"12:00\"`). */\n defaultValue?: TimeFieldValue | string\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: React.ReactNode\n /** Disables the field. */\n disabled?: boolean\n /** If `true`, always shows leading zeros in the hour field. */\n forceLeadingZeros?: 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 /** The maximum allowed time (e.g. `new Time(17, 0)`). */\n max?: TimeFieldValue\n /** The minimum allowed time (e.g. `new Time(9, 0)`). */\n min?: TimeFieldValue\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 time field. */\n size?: TimeFieldSize\n}\n\ntype AriaTimeFieldPropsToOmit =\n | \"children\"\n | \"granularity\"\n | \"placeholderValue\"\n | \"shouldForceLeadingZeros\"\n | \"slot\"\n\ntype AriaTimeFieldPropsToInclude =\n | \"hideTimeZone\"\n | \"hourCycle\"\n | \"name\"\n | \"onChange\"\n | \"value\"\n\nexport type TimeFieldElementProps = CombineAriaPropsWithCustomProps<\n AriaTimeFieldProps<TimeFieldValue>,\n TimeFieldProps,\n AriaTimeFieldPropsToOmit,\n AriaTimeFieldPropsToInclude\n>\n\n/**\n * A time field component allows users to enter and edit time values as individual\n * segments. Each segment supports keyboard entry, increment/decrement\n * with arrow keys, and respects the user's locale (12- vs 24-hour clock),\n * which can be overridden with `hourCycle`.\n *\n * Values are `Time`, `CalendarDateTime`, or `ZonedDateTime` from\n * `@internationalized/date`. Restrict the allowed range with `min`/`max`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-timefield--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function TimeField({\n className,\n defaultValue,\n description,\n disabled,\n forceLeadingZeros,\n hideLabel,\n invalid,\n label,\n max,\n min,\n readOnly,\n required,\n size = \"md\",\n ...restProps\n}: TimeFieldElementProps) {\n const resolvedDefaultValue =\n typeof defaultValue === \"string\" ? parseTime(defaultValue) : defaultValue\n const combinedClassName = classNames(\n \"tds-field tds-time-field\",\n {\n \"tds-field--lg\": size === \"lg\",\n \"tds-time-field--lg\": size === \"lg\",\n },\n className\n )\n\n return (\n <AriaTimeField\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n defaultValue={resolvedDefaultValue}\n granularity=\"minute\"\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={max ?? undefined}\n minValue={min ?? undefined}\n shouldForceLeadingZeros={forceLeadingZeros}\n >\n {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n <DateInput className=\"tds-field-control tds-time-field-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 {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 </AriaTimeField>\n )\n}\n"],"names":["parseTime","AriaTimeField"],"mappings":";;;;;;AA0EA;;;;;;;;;;;;AAYG;AACG,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACU,EAAA;AACtB,IAAA,MAAM,oBAAoB,GACxB,OAAO,YAAY,KAAK,QAAQ,GAAGA,yCAAS,CAAC,YAAY,CAAC,GAAG,YAAY;AAC3E,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,0BAA0B,EAC1B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,oBAAoB,EAAE,IAAI,KAAK,IAAI;KACpC,EACD,SAAS,CACV;IAED,QACE,KAAA,CAAA,aAAA,CAACC,WAAa,EAAA,EAAA,GACR,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,oBAAoB,EAClC,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,IAAI,SAAS,EAC1B,QAAQ,EAAE,GAAG,IAAI,SAAS,EAC1B,uBAAuB,EAAE,iBAAiB,EAAA;QAEzC,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;QACjE,KAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAC,wCAAwC,EAAA,EAC1D,CAAC,OAAO,MACP,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,kBAAE;kBACA,wBAAwB,EAE9B,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACS;AACX,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,aAAa,EAAA;YAElB,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { constrain as $435a2ceaa8778ed8$export$c4e2ecac49351ef2, add as $435a2ceaa8778ed8$export$e16d8520af44a096, subtract as $435a2ceaa8778ed8$export$4e2d2ead65e5f7e3, set as $435a2ceaa8778ed8$export$adaa4cf7ef1b65be, cycleDate as $435a2ceaa8778ed8$export$d52ced6badfb9a4c, addZoned as $435a2ceaa8778ed8$export$96b1d28349274637, subtractZoned as $435a2ceaa8778ed8$export$6814caac34ca03c7, setZoned as $435a2ceaa8778ed8$export$31b5430eb18be4f8, cycleZoned as $435a2ceaa8778ed8$export$9a297d111fc86b79, setTime as $435a2ceaa8778ed8$export$e5d5e1c1822b6e56, cycleTime as $435a2ceaa8778ed8$export$dd02b3e0007dfe28 } from './manipulation.js';
|
|
1
|
+
import { constrain as $435a2ceaa8778ed8$export$c4e2ecac49351ef2, add as $435a2ceaa8778ed8$export$e16d8520af44a096, subtract as $435a2ceaa8778ed8$export$4e2d2ead65e5f7e3, set as $435a2ceaa8778ed8$export$adaa4cf7ef1b65be, cycleDate as $435a2ceaa8778ed8$export$d52ced6badfb9a4c, addZoned as $435a2ceaa8778ed8$export$96b1d28349274637, subtractZoned as $435a2ceaa8778ed8$export$6814caac34ca03c7, setZoned as $435a2ceaa8778ed8$export$31b5430eb18be4f8, cycleZoned as $435a2ceaa8778ed8$export$9a297d111fc86b79, setTime as $435a2ceaa8778ed8$export$e5d5e1c1822b6e56, cycleTime as $435a2ceaa8778ed8$export$dd02b3e0007dfe28, constrainTime as $435a2ceaa8778ed8$export$7555de1e070510cb, addTime as $435a2ceaa8778ed8$export$7ed87b6bc2506470, subtractTime as $435a2ceaa8778ed8$export$fe34d3a381cd7501 } from './manipulation.js';
|
|
2
2
|
import { compareDate as $ad063034c8620db8$export$68781ddf31c0090f, compareTime as $ad063034c8620db8$export$c19a80a9721b80f6 } from './queries.js';
|
|
3
|
-
import { dateToString as $58246871e4652552$export$60dfd74aa96791bd, zonedDateTimeToString as $58246871e4652552$export$bf79f1ebf4b18792, dateTimeToString as $58246871e4652552$export$4223de14708adc63 } from './string.js';
|
|
3
|
+
import { dateToString as $58246871e4652552$export$60dfd74aa96791bd, zonedDateTimeToString as $58246871e4652552$export$bf79f1ebf4b18792, dateTimeToString as $58246871e4652552$export$4223de14708adc63, timeToString as $58246871e4652552$export$f59dee82248f5ad4 } from './string.js';
|
|
4
4
|
import { GregorianCalendar as $93635573935797de$export$80ee6245ec4f29ec } from './calendars/GregorianCalendar.js';
|
|
5
5
|
import { toDate as $d07e34cce18680fd$export$e67a095c620b86fe, zonedToDate as $d07e34cce18680fd$export$83aac07b4c37b25, toZoned as $d07e34cce18680fd$export$84c95a83c799e074, toCalendarDateTime as $d07e34cce18680fd$export$b21e0b124e224484 } from './conversion.js';
|
|
6
6
|
|
|
@@ -82,6 +82,42 @@ class $2aaf608024c21ca1$export$99faa760c7908e4f {
|
|
|
82
82
|
return ($ad063034c8620db8$export$68781ddf31c0090f)(this, b);
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
|
+
class $2aaf608024c21ca1$export$680ea196effce5f {
|
|
86
|
+
// This prevents TypeScript from allowing other types with the same fields to match.
|
|
87
|
+
// @ts-ignore
|
|
88
|
+
#type;
|
|
89
|
+
constructor(hour = 0, minute = 0, second = 0, millisecond = 0){
|
|
90
|
+
this.hour = hour;
|
|
91
|
+
this.minute = minute;
|
|
92
|
+
this.second = second;
|
|
93
|
+
this.millisecond = millisecond;
|
|
94
|
+
($435a2ceaa8778ed8$export$7555de1e070510cb)(this);
|
|
95
|
+
}
|
|
96
|
+
/** Returns a copy of this time. */ copy() {
|
|
97
|
+
return new $2aaf608024c21ca1$export$680ea196effce5f(this.hour, this.minute, this.second, this.millisecond);
|
|
98
|
+
}
|
|
99
|
+
/** Returns a new `Time` with the given duration added to it. */ add(duration) {
|
|
100
|
+
return ($435a2ceaa8778ed8$export$7ed87b6bc2506470)(this, duration);
|
|
101
|
+
}
|
|
102
|
+
/** Returns a new `Time` with the given duration subtracted from it. */ subtract(duration) {
|
|
103
|
+
return ($435a2ceaa8778ed8$export$fe34d3a381cd7501)(this, duration);
|
|
104
|
+
}
|
|
105
|
+
/** Returns a new `Time` with the given fields set to the provided values. Other fields will be constrained accordingly. */ set(fields) {
|
|
106
|
+
return ($435a2ceaa8778ed8$export$e5d5e1c1822b6e56)(this, fields);
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* Returns a new `Time` with the given field adjusted by a specified amount.
|
|
110
|
+
* When the resulting value reaches the limits of the field, it wraps around.
|
|
111
|
+
*/ cycle(field, amount, options) {
|
|
112
|
+
return ($435a2ceaa8778ed8$export$dd02b3e0007dfe28)(this, field, amount, options);
|
|
113
|
+
}
|
|
114
|
+
/** Converts the time to an ISO 8601 formatted string. */ toString() {
|
|
115
|
+
return ($58246871e4652552$export$f59dee82248f5ad4)(this);
|
|
116
|
+
}
|
|
117
|
+
/** Compares this time with another. A negative result indicates that this time is before the given one, and a positive time indicates that it is after. */ compare(b) {
|
|
118
|
+
return ($ad063034c8620db8$export$c19a80a9721b80f6)(this, b);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
85
121
|
class $2aaf608024c21ca1$export$ca871e8dbb80966f {
|
|
86
122
|
// This prevents TypeScript from allowing other types with the same fields to match.
|
|
87
123
|
// @ts-ignore
|
|
@@ -193,5 +229,5 @@ class $2aaf608024c21ca1$export$d3b7288e7994edea {
|
|
|
193
229
|
}
|
|
194
230
|
}
|
|
195
231
|
|
|
196
|
-
export { $2aaf608024c21ca1$export$99faa760c7908e4f as CalendarDate, $2aaf608024c21ca1$export$ca871e8dbb80966f as CalendarDateTime, $2aaf608024c21ca1$export$d3b7288e7994edea as ZonedDateTime };
|
|
232
|
+
export { $2aaf608024c21ca1$export$99faa760c7908e4f as CalendarDate, $2aaf608024c21ca1$export$ca871e8dbb80966f as CalendarDateTime, $2aaf608024c21ca1$export$680ea196effce5f as Time, $2aaf608024c21ca1$export$d3b7288e7994edea as ZonedDateTime };
|
|
197
233
|
//# sourceMappingURL=CalendarDate.js.map
|