@planningcenter/tapestry 4.5.0-rc.2 → 4.5.0-rc.3

package/dist/components/combo-box/ComboBox.d.ts

@@ -52,6 +52,11 @@ export interface ComboBoxProps<T extends object = object> {
     renderEmptyState?: ReactNode | (() => ReactNode);
     /** If `true`, appends an asterisk at the end of the label text. */
     required?: boolean;
+    /**
+     * If `true`, renders a button after the input that clears its text. Only
+     * applies when `menuTrigger` is `"focus"`, where no trigger button is rendered.
+     */
+    showClearButton?: boolean;
     /** If `true`, renders a search icon before the input. */
     showSearchIcon?: boolean;
     /** The size of the combo box. */
@@ -73,7 +78,7 @@ export type ComboBoxElementProps<T extends object = object> = CombineAriaPropsWi
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
  */
-export declare function ComboBox<T extends object>({ allowsEmptyCollection, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger, onChange, onLoadMore, placeholder, readOnly, renderEmptyState, required, showSearchIcon, size, ...restProps }: ComboBoxElementProps<T>): React.JSX.Element;
+export declare function ComboBox<T extends object>({ allowsEmptyCollection, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger, onChange, onLoadMore, placeholder, readOnly, renderEmptyState, required, showClearButton, showSearchIcon, size, ...restProps }: ComboBoxElementProps<T>): React.JSX.Element;
 export interface ComboBoxItemProps {
     /** Disables the item. */
     disabled?: boolean;

package/dist/components/combo-box/ComboBox.d.ts.map

@@ -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,yDAAyD;IACzD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,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,cAAc,EACd,IAAW,EACX,GAAG,SAAS,EACb,EAAE,oBAAoB,CAAC,CAAC,CAAC,qBA+GzB;AAED,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,KAAK,0BAA0B,GAAG,YAAY,CAAA;AAE9C,KAAK,6BAA6B,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAA;AAEvE,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAC5D,+BAA+B,CAC7B,gBAAgB,CAAC,CAAC,CAAC,EACnB,iBAAiB,EACjB,0BAA0B,EAC1B,6BAA6B,CAC9B,CAAA;AAEH;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,EAC7C,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,wBAAwB,CAAC,CAAC,CAAC,qBAQ7B;AAED,MAAM,WAAW,oBAAoB;IACnC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAA;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,KAAK,gCAAgC,GAAG,cAAc,CAAA;AAEtD,MAAM,MAAM,2BAA2B,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAC/D,+BAA+B,CAC7B,mBAAmB,CAAC,CAAC,CAAC,EACtB,oBAAoB,EACpB,KAAK,EACL,gCAAgC,CACjC,CAAA;AAEH;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,2BAA2B,CAAC,CAAC,CAAC,qBAYhC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"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"}

package/dist/components/combo-box/ComboBox.js

@@ -1,14 +1,25 @@
+import '../button/ActionsDropdownIconButton.js';
+import '../button/Button.js';
+import '../button/DropdownButton.js';
+import '../button/DropdownIconButton.js';
+import { IconButton } from '../button/IconButton.js';
+import '../button/LoadingButton.js';
+import '../button/PageHeaderActionsDropdownButton.js';
 import LoadingSpinner from '../internal/LoadingSpinner.js';
 import Icon from '../../utilities/Icon.js';
 import classNames from 'classnames';
-import React from 'react';
-import { ListBoxLoadMoreItem, ComboBox as ComboBox$1, Label, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, Collection } from 'react-aria-components/ComboBox';
+import React, { useContext } from 'react';
+import { ListBoxLoadMoreItem, ComboBox as ComboBox$1, Label, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, ComboBoxStateContext, Collection } from 'react-aria-components/ComboBox';
 import { Group } from 'react-aria-components/Group';
 import { Header } from 'react-aria-components/Header';
 
 function resolveEmptyState(value) {
     return typeof value === "function" ? value() : value;
 }
+function ClearButton() {
+    const state = useContext(ComboBoxStateContext);
+    return (React.createElement(IconButton, { "aria-label": "Clear", className: "tds-combo-box-clear-button", "data-input-empty": !state?.inputValue ? true : undefined, icon: React.createElement(Icon, { "aria-hidden": true, className: "tds-combo-box-clear-icon", symbol: "general#x" }), kind: "neutral-inline", onClick: () => state?.setInputValue(""), onMouseDown: (event) => event.preventDefault(), tabIndex: -1 }));
+}
 /**
  * A combo box combines a text input with a filterable popover
  * listbox, allowing users to type to search and select from a list of options.
@@ -22,7 +33,7 @@ function resolveEmptyState(value) {
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
  */
-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 }) {
+function ComboBox({ allowsEmptyCollection = true, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger = "focus", onChange, onLoadMore, placeholder, readOnly, renderEmptyState = "No results", required, showClearButton, showSearchIcon, size = "md", ...restProps }) {
     const combinedClassName = classNames("tds-field tds-combo-box", {
         "tds-combo-box--lg": size === "lg",
         "tds-field--lg": size === "lg",
@@ -49,7 +60,11 @@ function ComboBox({ allowsEmptyCollection = true, children, className, descripti
             showSearchIcon && (React.createElement(Icon, { "aria-hidden": true, className: "tds-combo-box-search-icon", symbol: "general#search" })),
             React.createElement(Input, { "aria-invalid": invalid || undefined, className: "tds-combo-box-input", placeholder: placeholder }),
             menuTrigger !== "focus" && !readOnly && (React.createElement(Button, { className: "tds-combo-box-button tds-btn tds-btn--infield" },
-                React.createElement(Icon, { "aria-hidden": true, symbol: "general#down-caret" })))),
+                React.createElement(Icon, { "aria-hidden": true, symbol: "general#down-caret" }))),
+            showClearButton &&
+                menuTrigger === "focus" &&
+                !readOnly &&
+                !disabled && React.createElement(ClearButton, null)),
         React.createElement(Popover, { className: "tds-combo-box-popover" },
             React.createElement(ListBox, { className: "tds-combo-box-list", renderEmptyState: allowsEmptyCollection
                     ? () => (React.createElement("div", { "aria-label": loadingState === "loading" ? "Loading" : undefined, className: "tds-combo-box-empty-state", role: loadingState === "loading" ? "status" : undefined }, loadingState === "loading" ? (React.createElement(LoadingSpinner, null)) : (resolveEmptyState(renderEmptyState))))

package/dist/components/combo-box/ComboBox.js.map

@@ -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  /** 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      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\n          aria-invalid={invalid || undefined}\n          className=\"tds-combo-box-input\"\n          placeholder={placeholder}\n        />\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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"}
+{"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 { IconButton } from \"@components/button\"\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, useContext } from \"react\"\nimport {\n  Button,\n  Collection,\n  ComboBox as AriaComboBox,\n  type ComboBoxProps as AriaComboBoxProps,\n  ComboBoxStateContext,\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  /**\n   * If `true`, renders a button after the input that clears its text. Only\n   * applies when `menuTrigger` is `\"focus\"`, where no trigger button is rendered.\n   */\n  showClearButton?: 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\nfunction ClearButton() {\n  const state = useContext(ComboBoxStateContext)\n\n  return (\n    <IconButton\n      aria-label=\"Clear\"\n      className=\"tds-combo-box-clear-button\"\n      data-input-empty={!state?.inputValue ? true : undefined}\n      icon={\n        <Icon\n          aria-hidden\n          className=\"tds-combo-box-clear-icon\"\n          symbol=\"general#x\"\n        />\n      }\n      kind=\"neutral-inline\"\n      onClick={() => state?.setInputValue(\"\")}\n      onMouseDown={(event) => event.preventDefault()}\n      tabIndex={-1}\n    />\n  )\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  showClearButton,\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      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\n          aria-invalid={invalid || undefined}\n          className=\"tds-combo-box-input\"\n          placeholder={placeholder}\n        />\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        {showClearButton &&\n          menuTrigger === \"focus\" &&\n          !readOnly &&\n          !disabled && <ClearButton />}\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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"}

package/dist/index.css

@@ -3198,7 +3198,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
   display:none;
 }
-.tds-combo-box-field:has(.tds-combo-box-search-icon){
+.tds-combo-box-field:has(.tds-combo-box-search-icon, .tds-combo-box-clear-button){
   position:relative;
 }
 .tds-combo-box-search-icon{
@@ -3236,6 +3236,9 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 .tds-combo-box-input:has( + .tds-combo-box-button){
     padding-inline-end:0;
   }
+.tds-combo-box-input:has( + .tds-combo-box-clear-button){
+    padding-inline-end:calc(var(--tds-field-padding-inline) + var(--tds-field-min-height));
+  }
 .tds-combo-box-input::-moz-placeholder{
     color:var(--tds-field-placeholder-color);
     -moz-user-select:none;
@@ -3260,6 +3263,28 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     block-size:var(--tds-field-font-size);
     transition:transform var(--t-duration-300) var(--t-ease-in-out);
   }
+.tds-combo-box-clear-button{
+  --tds-btn-color:var(--t-icon-color-dim);
+  --tds-btn-padding-truncated-x:0;
+  --tds-combo-box-clear-button-visibility:hidden;
+
+  position:absolute;
+  inset-block:0;
+  inset-inline-end:var(--tds-combo-box-button-offset);
+  visibility:var(--tds-combo-box-clear-button-visibility);
+  inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
+  block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
+  margin-block:auto;
+}
+
+.tds-combo-box-field:is(:hover, :has(input:focus)) .tds-combo-box-clear-button:not([data-input-empty]){
+  --tds-combo-box-clear-button-visibility:visible;
+}
+
+.tds-combo-box-clear-icon{
+  inline-size:calc(var(--tds-field-font-size) * .8);
+  block-size:calc(var(--tds-field-font-size) * .8);
+}
 .tds-combo-box-popover{
   width:var(--trigger-width);
   max-block-size:inherit;