@cimpress-ui/react 1.20.0 → 1.22.0

package/dist/commonjs/components/table/table-header-cell.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableHeaderCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
+const react_aria_1 = require("react-aria");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const index_js_1 = require("../../icons/index.js");
 const use_server_layout_effect_js_1 = require("../../utils/use-server-layout-effect.js");
@@ -18,13 +18,13 @@ const SORT_ORDER_ICONS = {
     descending: (0, jsx_runtime_1.jsx)(index_js_1.IconSortDescending, {}),
 };
 function TableHeaderCell({ children, UNSAFE_className, UNSAFE_style, columnKey, columnNumber, columnWidth, columnContentAlignment = 'start', sortOrder, onSortOrderToggle, iconStart, iconEnd, ...props }, ref) {
-    const cellRef = (0, utils_1.useObjectRef)(ref);
+    const cellRef = (0, react_aria_1.useObjectRef)(ref);
     const { rowKey } = (0, row_state_js_1.useTableRowState)();
     const { cellProps } = (0, use_table_cell_js_1.useTableCell)(cellRef, rowKey, columnKey);
     const registerColumn = (0, column_collection_js_1.useColumnRegistration)();
     const unregisterRef = (0, react_1.useRef)(null);
     const { sortLabelId } = (0, table_state_js_1.useTableState)();
-    const contentId = (0, utils_1.useId)();
+    const contentId = (0, react_aria_1.useId)();
     const isSortable = typeof onSortOrderToggle === 'function';
     // Columns need to be registered during SSR to prevent layout shifting on hydration
     (0, use_server_layout_effect_js_1.useServerLayoutEffect)(() => {
@@ -38,7 +38,7 @@ function TableHeaderCell({ children, UNSAFE_className, UNSAFE_style, columnKey,
             unregisterRef.current = null;
         };
     }, [registerColumn, columnKey, columnNumber, columnWidth, columnContentAlignment]);
-    return ((0, jsx_runtime_1.jsx)("th", { ...(0, utils_1.mergeProps)(props, cellProps), ref: cellRef, className: UNSAFE_className, style: columnWidth ? { ...UNSAFE_style, width: columnWidth } : UNSAFE_style, scope: "col", "aria-colindex": columnNumber, "aria-sort": sortOrder, "data-alignment": columnContentAlignment, children: (0, jsx_runtime_1.jsxs)("div", { className: "cim-table-header-cell-container", children: [iconStart, (0, jsx_runtime_1.jsx)("span", { id: contentId, children: children }), iconEnd, isSortable ? ((0, jsx_runtime_1.jsx)(table_header_button_js_1.TableHeaderButton, { UNSAFE_className: "cim-table-header-sort-button", "aria-labelledby": `${sortLabelId} ${contentId}`, icon: sortOrder ? SORT_ORDER_ICONS[sortOrder] : (0, jsx_runtime_1.jsx)(index_js_1.IconSortUnsorted, {}), onPress: () => onSortOrderToggle(), "data-highlighted": !!sortOrder || undefined })) : sortOrder ? (SORT_ORDER_ICONS[sortOrder]) : undefined] }) }));
+    return ((0, jsx_runtime_1.jsx)("th", { ...(0, react_aria_1.mergeProps)(props, cellProps), ref: cellRef, className: UNSAFE_className, style: columnWidth ? { ...UNSAFE_style, width: columnWidth } : UNSAFE_style, scope: "col", "aria-colindex": columnNumber, "aria-sort": sortOrder, "data-alignment": columnContentAlignment, children: (0, jsx_runtime_1.jsxs)("div", { className: "cim-table-header-cell-container", children: [iconStart, (0, jsx_runtime_1.jsx)("span", { id: contentId, children: children }), iconEnd, isSortable ? ((0, jsx_runtime_1.jsx)(table_header_button_js_1.TableHeaderButton, { UNSAFE_className: "cim-table-header-sort-button", "aria-labelledby": `${sortLabelId} ${contentId}`, icon: sortOrder ? SORT_ORDER_ICONS[sortOrder] : (0, jsx_runtime_1.jsx)(index_js_1.IconSortUnsorted, {}), onPress: () => onSortOrderToggle(), "data-highlighted": !!sortOrder || undefined })) : sortOrder ? (SORT_ORDER_ICONS[sortOrder]) : undefined] }) }));
 }
 /**
  * Renders a header cell within a table header row.

package/dist/commonjs/components/table/table-header-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-header-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { mergeProps, useId, useObjectRef } from '@react-aria/utils';\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconSortAscending, IconSortDescending, IconSortUnsorted } from '../../icons/index.js';\nimport { useServerLayoutEffect } from '../../utils/use-server-layout-effect.js';\nimport type { CommonProps } from '../types.js';\nimport { type ColumnContentAlignment, useColumnRegistration } from './contexts/column-collection.js';\nimport { useTableRowState } from './contexts/row-state.js';\nimport { useTableState } from './contexts/table-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\nimport { TableHeaderButton } from './table-header-button.js';\n\n/** Represents the sort order of a table column. */\nexport type TableColumnSortOrder = 'ascending' | 'descending';\n\nexport interface TableHeaderCellProps extends CommonProps {\n  /** The contents of the header cell. */\n  children: ReactNode;\n  /**\n   * A unique identifier for the column that this cell belongs to.\n   * Cells that belong to the same column must have the same `columnKey`.\n   */\n  columnKey: string;\n  /**\n   * The position of the column that this cell belongs to within the full dataset.\n   *\n   * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n   *\n   * This number must be:\n   * - greater than or equal to `1`\n   * - greater than the `columnNumber` of any previous cells in the current row\n   * - less than or equal to the `totalColumnCount` of the parent `Table`\n   *\n   * Use together with `totalColumnCount` on the `Table` component.\n   */\n  columnNumber?: number;\n  /** The width of the column. Can be any valid value of the `width` CSS property. */\n  columnWidth?: string | number;\n  /**\n   * Horizontal alignment of cell content within the column.\n   * @default 'start'\n   */\n  columnContentAlignment?: ColumnContentAlignment;\n  /**\n   * The current sort order of the column.\n   */\n  sortOrder?: TableColumnSortOrder;\n  /**\n   * A function called when the column's sort order should change.\n   * If not provided, the column will not be sortable.\n   */\n  onSortOrderToggle?: () => void;\n  /** An icon displayed before the header text. */\n  iconStart?: ReactNode;\n  /** An icon displayed after the header text. */\n  iconEnd?: ReactNode;\n}\n\nconst SORT_ORDER_ICONS: Record<TableColumnSortOrder, ReactNode> = {\n  ascending: <IconSortAscending />,\n  descending: <IconSortDescending />,\n};\n\nfunction TableHeaderCell(\n  {\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    columnKey,\n    columnNumber,\n    columnWidth,\n    columnContentAlignment = 'start',\n    sortOrder,\n    onSortOrderToggle,\n    iconStart,\n    iconEnd,\n    ...props\n  }: TableHeaderCellProps,\n  ref: ForwardedRef<HTMLTableCellElement>,\n) {\n  const cellRef = useObjectRef(ref);\n  const { rowKey } = useTableRowState();\n  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n  const registerColumn = useColumnRegistration();\n  const unregisterRef = useRef<(() => void) | null>(null);\n\n  const { sortLabelId } = useTableState();\n  const contentId = useId();\n\n  const isSortable = typeof onSortOrderToggle === 'function';\n\n  // Columns need to be registered during SSR to prevent layout shifting on hydration\n  useServerLayoutEffect(() => {\n    unregisterRef.current = registerColumn(columnKey, {\n      number: columnNumber,\n      width: columnWidth,\n      contentAlignment: columnContentAlignment,\n    });\n\n    return () => {\n      unregisterRef.current?.();\n      unregisterRef.current = null;\n    };\n  }, [registerColumn, columnKey, columnNumber, columnWidth, columnContentAlignment]);\n\n  return (\n    <th\n      {...mergeProps(props, cellProps)}\n      ref={cellRef}\n      className={UNSAFE_className}\n      style={columnWidth ? { ...UNSAFE_style, width: columnWidth } : UNSAFE_style}\n      scope=\"col\"\n      aria-colindex={columnNumber}\n      aria-sort={sortOrder}\n      data-alignment={columnContentAlignment}\n    >\n      <div className=\"cim-table-header-cell-container\">\n        {iconStart}\n        <span id={contentId}>{children}</span>\n        {iconEnd}\n        {isSortable ? (\n          <TableHeaderButton\n            UNSAFE_className=\"cim-table-header-sort-button\"\n            aria-labelledby={`${sortLabelId} ${contentId}`}\n            icon={sortOrder ? SORT_ORDER_ICONS[sortOrder] : <IconSortUnsorted />}\n            onPress={() => onSortOrderToggle()}\n            data-highlighted={!!sortOrder || undefined}\n          />\n        ) : sortOrder ? (\n          SORT_ORDER_ICONS[sortOrder]\n        ) : undefined}\n      </div>\n    </th>\n  );\n}\n\n/**\n * Renders a header cell within a table header row.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeaderCell = forwardRef(TableHeaderCell, 'TableHeaderCell');\n\nexport { _TableHeaderCell as TableHeaderCell };\n"]}
+{"version":3,"file":"table-header-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { mergeProps, useId, useObjectRef } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconSortAscending, IconSortDescending, IconSortUnsorted } from '../../icons/index.js';\nimport { useServerLayoutEffect } from '../../utils/use-server-layout-effect.js';\nimport type { CommonProps } from '../types.js';\nimport { type ColumnContentAlignment, useColumnRegistration } from './contexts/column-collection.js';\nimport { useTableRowState } from './contexts/row-state.js';\nimport { useTableState } from './contexts/table-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\nimport { TableHeaderButton } from './table-header-button.js';\n\n/** Represents the sort order of a table column. */\nexport type TableColumnSortOrder = 'ascending' | 'descending';\n\nexport interface TableHeaderCellProps extends CommonProps {\n  /** The contents of the header cell. */\n  children: ReactNode;\n  /**\n   * A unique identifier for the column that this cell belongs to.\n   * Cells that belong to the same column must have the same `columnKey`.\n   */\n  columnKey: string;\n  /**\n   * The position of the column that this cell belongs to within the full dataset.\n   *\n   * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n   *\n   * This number must be:\n   * - greater than or equal to `1`\n   * - greater than the `columnNumber` of any previous cells in the current row\n   * - less than or equal to the `totalColumnCount` of the parent `Table`\n   *\n   * Use together with `totalColumnCount` on the `Table` component.\n   */\n  columnNumber?: number;\n  /** The width of the column. Can be any valid value of the `width` CSS property. */\n  columnWidth?: string | number;\n  /**\n   * Horizontal alignment of cell content within the column.\n   * @default 'start'\n   */\n  columnContentAlignment?: ColumnContentAlignment;\n  /**\n   * The current sort order of the column.\n   */\n  sortOrder?: TableColumnSortOrder;\n  /**\n   * A function called when the column's sort order should change.\n   * If not provided, the column will not be sortable.\n   */\n  onSortOrderToggle?: () => void;\n  /** An icon displayed before the header text. */\n  iconStart?: ReactNode;\n  /** An icon displayed after the header text. */\n  iconEnd?: ReactNode;\n}\n\nconst SORT_ORDER_ICONS: Record<TableColumnSortOrder, ReactNode> = {\n  ascending: <IconSortAscending />,\n  descending: <IconSortDescending />,\n};\n\nfunction TableHeaderCell(\n  {\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    columnKey,\n    columnNumber,\n    columnWidth,\n    columnContentAlignment = 'start',\n    sortOrder,\n    onSortOrderToggle,\n    iconStart,\n    iconEnd,\n    ...props\n  }: TableHeaderCellProps,\n  ref: ForwardedRef<HTMLTableCellElement>,\n) {\n  const cellRef = useObjectRef(ref);\n  const { rowKey } = useTableRowState();\n  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n  const registerColumn = useColumnRegistration();\n  const unregisterRef = useRef<(() => void) | null>(null);\n\n  const { sortLabelId } = useTableState();\n  const contentId = useId();\n\n  const isSortable = typeof onSortOrderToggle === 'function';\n\n  // Columns need to be registered during SSR to prevent layout shifting on hydration\n  useServerLayoutEffect(() => {\n    unregisterRef.current = registerColumn(columnKey, {\n      number: columnNumber,\n      width: columnWidth,\n      contentAlignment: columnContentAlignment,\n    });\n\n    return () => {\n      unregisterRef.current?.();\n      unregisterRef.current = null;\n    };\n  }, [registerColumn, columnKey, columnNumber, columnWidth, columnContentAlignment]);\n\n  return (\n    <th\n      {...mergeProps(props, cellProps)}\n      ref={cellRef}\n      className={UNSAFE_className}\n      style={columnWidth ? { ...UNSAFE_style, width: columnWidth } : UNSAFE_style}\n      scope=\"col\"\n      aria-colindex={columnNumber}\n      aria-sort={sortOrder}\n      data-alignment={columnContentAlignment}\n    >\n      <div className=\"cim-table-header-cell-container\">\n        {iconStart}\n        <span id={contentId}>{children}</span>\n        {iconEnd}\n        {isSortable ? (\n          <TableHeaderButton\n            UNSAFE_className=\"cim-table-header-sort-button\"\n            aria-labelledby={`${sortLabelId} ${contentId}`}\n            icon={sortOrder ? SORT_ORDER_ICONS[sortOrder] : <IconSortUnsorted />}\n            onPress={() => onSortOrderToggle()}\n            data-highlighted={!!sortOrder || undefined}\n          />\n        ) : sortOrder ? (\n          SORT_ORDER_ICONS[sortOrder]\n        ) : undefined}\n      </div>\n    </th>\n  );\n}\n\n/**\n * Renders a header cell within a table header row.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeaderCell = forwardRef(TableHeaderCell, 'TableHeaderCell');\n\nexport { _TableHeaderCell as TableHeaderCell };\n"]}

package/dist/commonjs/components/table/table-header-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,uDAAuD;IACvD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAeD;;;;GAIG;AACH,QAAA,MAAM,eAAe,yHAA+C,CAAC;AAErE,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}
+{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,uDAAuD;IACvD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAeD;;;;GAIG;AACH,QAAA,MAAM,eAAe,yHAA+C,CAAC;AAErE,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}

package/dist/commonjs/components/table/table-header-row.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableHeaderRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@react-aria/utils");
+const react_aria_1 = require("react-aria");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const row_state_js_1 = require("./contexts/row-state.js");
 function TableHeaderRow({ children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }, ref) {
-    const rowKey = (0, utils_1.useId)();
+    const rowKey = (0, react_aria_1.useId)();
     return ((0, jsx_runtime_1.jsx)("tr", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, children: (0, jsx_runtime_1.jsx)(row_state_js_1.TableRowStateProvider, { rowKey: rowKey, children: children }) }));
 }
 /**

package/dist/commonjs/components/table/table-header-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-header-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAA0C;AAE1C,yDAAkD;AAElD,0DAAgE;AAoBhE,SAAS,cAAc,CACrB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB,EACtF,GAAsC;IAEtC,MAAM,MAAM,GAAG,IAAA,aAAK,GAAE,CAAC;IAEvB,OAAO,CACL,kCAAQ,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,mBAAiB,SAAS,YACjG,uBAAC,oCAAqB,IAAC,MAAM,EAAE,MAAM,YAAG,QAAQ,GAAyB,GACtE,CACN,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,IAAA,2BAAU,EAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEzC,yCAAc","sourcesContent":["'use client';\n\nimport { useId } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { TableRowStateProvider } from './contexts/row-state.js';\n\nexport interface TableHeaderRowProps extends CommonProps {\n  /** The header cells that belong to this header row. */\n  children: ReactNode;\n  /**\n   * The row's position within the full dataset, including headers.\n   *\n   * Provide this value if your table presents a subset of rows, such as when using pagination.\n   *\n   * This number must be:\n   * - greater than or equal to `1`\n   * - greater than the `rowNumber` of any previous rows\n   * - less than or equal to the `totalRowCount` of the parent `Table`\n   *\n   * Use together with `totalRowCount` on the `Table` component.\n   */\n  rowNumber?: number;\n}\n\nfunction TableHeaderRow(\n  { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }: TableHeaderRowProps,\n  ref: ForwardedRef<HTMLTableRowElement>,\n) {\n  const rowKey = useId();\n\n  return (\n    <tr {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style} aria-rowindex={rowNumber}>\n      <TableRowStateProvider rowKey={rowKey}>{children}</TableRowStateProvider>\n    </tr>\n  );\n}\n\n/**\n * Renders a row within a table header.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeaderRow = forwardRef(TableHeaderRow, 'TableHeaderRow');\n\nexport { _TableHeaderRow as TableHeaderRow };\n"]}
+{"version":3,"file":"table-header-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAGb,2CAAmC;AACnC,yDAAkD;AAElD,0DAAgE;AAoBhE,SAAS,cAAc,CACrB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB,EACtF,GAAsC;IAEtC,MAAM,MAAM,GAAG,IAAA,kBAAK,GAAE,CAAC;IAEvB,OAAO,CACL,kCAAQ,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,mBAAiB,SAAS,YACjG,uBAAC,oCAAqB,IAAC,MAAM,EAAE,MAAM,YAAG,QAAQ,GAAyB,GACtE,CACN,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,IAAA,2BAAU,EAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEzC,yCAAc","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { TableRowStateProvider } from './contexts/row-state.js';\n\nexport interface TableHeaderRowProps extends CommonProps {\n  /** The header cells that belong to this header row. */\n  children: ReactNode;\n  /**\n   * The row's position within the full dataset, including headers.\n   *\n   * Provide this value if your table presents a subset of rows, such as when using pagination.\n   *\n   * This number must be:\n   * - greater than or equal to `1`\n   * - greater than the `rowNumber` of any previous rows\n   * - less than or equal to the `totalRowCount` of the parent `Table`\n   *\n   * Use together with `totalRowCount` on the `Table` component.\n   */\n  rowNumber?: number;\n}\n\nfunction TableHeaderRow(\n  { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }: TableHeaderRowProps,\n  ref: ForwardedRef<HTMLTableRowElement>,\n) {\n  const rowKey = useId();\n\n  return (\n    <tr {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style} aria-rowindex={rowNumber}>\n      <TableRowStateProvider rowKey={rowKey}>{children}</TableRowStateProvider>\n    </tr>\n  );\n}\n\n/**\n * Renders a row within a table header.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeaderRow = forwardRef(TableHeaderRow, 'TableHeaderRow');\n\nexport { _TableHeaderRow as TableHeaderRow };\n"]}

package/dist/commonjs/components/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAIlE,OAAO,EAAE,KAAK,gBAAgB,EAAqC,MAAM,2BAA2B,CAAC;AAGrG,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,iBAAiB;IAChE,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAwED;;;;GAIG;AACH,QAAA,MAAM,MAAM,6GAA6B,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAIlE,OAAO,EAAE,KAAK,gBAAgB,EAAqC,MAAM,2BAA2B,CAAC;AAGrG,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,iBAAiB;IAChE,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAwED;;;;GAIG;AACH,QAAA,MAAM,MAAM,6GAA6B,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/commonjs/components/table/table.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@react-aria/utils");
+const react_aria_1 = require("react-aria");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const column_collection_js_1 = require("./contexts/column-collection.js");
@@ -21,10 +21,10 @@ function Table({ isLoading = false, rowSelectionMode = 'none', areAllRowsSelecte
     return ((0, jsx_runtime_1.jsx)(focus_js_1.TableFocusProvider, { children: (0, jsx_runtime_1.jsx)(table_state_js_1.TableStateProvider, { rowSelectionMode: rowSelectionMode, areAllRowsSelected: areAllRowsSelected, areSomeRowsSelected: areSomeRowsSelected, onAllRowsSelectionToggle: onAllRowsSelectionToggle, children: (0, jsx_runtime_1.jsx)(loading_js_1.TableLoadingProvider, { isLoading: isLoading, children: (0, jsx_runtime_1.jsxs)(column_collection_js_1.ColumnCollectionProvider, { children: [(0, jsx_runtime_1.jsx)("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(TableInner, { props: props, forwardedRef: ref }), (0, jsx_runtime_1.jsx)("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true })] }) }) }) }));
 }
 function TableInner({ props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props }, forwardedRef, }) {
-    const tableRef = (0, utils_1.useObjectRef)(forwardedRef);
+    const tableRef = (0, react_aria_1.useObjectRef)(forwardedRef);
     const { tableProps } = (0, use_table_js_1.useTable)(tableRef);
     const { rowSelectionMode } = (0, table_state_js_1.useTableState)();
-    return ((0, jsx_runtime_1.jsx)("table", { ...(0, utils_1.mergeProps)(props, tableProps), ref: tableRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowcount": totalRowCount, "aria-colcount": totalColumnCount, "aria-multiselectable": rowSelectionMode === 'multiple' ? true : undefined, children: children }));
+    return ((0, jsx_runtime_1.jsx)("table", { ...(0, react_aria_1.mergeProps)(props, tableProps), ref: tableRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowcount": totalRowCount, "aria-colcount": totalColumnCount, "aria-multiselectable": rowSelectionMode === 'multiple' ? true : undefined, children: children }));
 }
 /**
  * Displays data in an organized, tabular way.

package/dist/commonjs/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAA6D;AAE7D,yDAAkD;AAClD,qFAA6E;AAE7E,0EAA2E;AAC3E,kDAAyD;AACzD,sDAA6D;AAC7D,8DAAqG;AACrG,uDAAgD;AAoDhD,SAAS,KAAK,CACZ,EACE,SAAS,GAAG,KAAK,EACjB,gBAAgB,GAAG,MAAM,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,GAAG,KAAK,EACG,EACb,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAC;QACvF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,uBAAC,6BAAkB,cACjB,uBAAC,mCAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,wBAAwB,EAAE,wBAAwB,YAElD,uBAAC,iCAAoB,IAAC,SAAS,EAAE,SAAS,YACxC,wBAAC,+CAAwB,eACvB,iCAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,uBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,iCAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,IAC9B,GACN,GACJ,GACF,CACtB,CAAC;AACJ,CAAC;AAUD,SAAS,UAAU,CAAC,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,EAC9F,YAAY,GACI;IAChB,MAAM,QAAQ,GAAG,IAAA,oBAAY,EAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAQ,EAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,8BAAa,GAAE,CAAC;IAE7C,OAAO,CACL,qCACM,IAAA,kBAAU,EAAC,KAAK,EAAE,UAAU,CAAC,EACjC,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,aAAa,mBACb,gBAAgB,0BACT,gBAAgB,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,YAEvE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,IAAA,2BAAU,EAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAEvB,uBAAK","sourcesContent":["'use client';\n\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ColumnCollectionProvider } from './contexts/column-collection.js';\nimport { TableFocusProvider } from './contexts/focus.js';\nimport { TableLoadingProvider } from './contexts/loading.js';\nimport { type RowSelectionMode, TableStateProvider, useTableState } from './contexts/table-state.js';\nimport { useTable } from './hooks/use-table.js';\n\nexport interface TableProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the table. */\n  children: ReactNode;\n  /**\n   * The number of rows in the full dataset, including headers.\n   *\n   * Provide this value if your table presents a subset of rows, such as when using pagination.\n   * Use `-1` if the number of rows is not known.\n   *\n   * You must provide `rowNumber` on each table row if `totalRowCount` is defined.\n   */\n  totalRowCount?: number;\n  /**\n   * The number of columns in the full dataset.\n   *\n   * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n   * Use `-1` if the number of columns is not known.\n   *\n   * You must provide `columnNumber` on each table header cell if `totalColumnCount` is defined.\n   */\n  totalColumnCount?: number;\n  /**\n   * The type of row selection that is allowed within the table.\n   * @default 'none'\n   */\n  rowSelectionMode?: RowSelectionMode;\n  /**\n   * Whether all of the table's rows are selected.\n   * The meaning of \"all rows\" is dictated by the consumer.\n   */\n  areAllRowsSelected?: boolean;\n  /**\n   * Whether some (but not all) of the table's rows are selected.\n   * The meaning of \"some rows\" is dictated by the consumer.\n   */\n  areSomeRowsSelected?: boolean;\n  /**\n   * A function called when the selection state of all rows should change.\n   *\n   * If called without an argument, you are free to pick the new selection state based on your own logic.\n   * If called with an argument, you must set the selection state to the provided value.\n   */\n  onAllRowsSelectionToggle?: (value?: boolean) => void;\n  /**\n   * Whether the table is currently in a loading state.\n   * @default false\n   */\n  isLoading?: boolean;\n}\n\nfunction Table(\n  {\n    isLoading = false,\n    rowSelectionMode = 'none',\n    areAllRowsSelected,\n    areSomeRowsSelected,\n    onAllRowsSelectionToggle,\n    ...props\n  }: TableProps,\n  ref: ForwardedRef<HTMLTableElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('Table requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  return (\n    <TableFocusProvider>\n      <TableStateProvider\n        rowSelectionMode={rowSelectionMode}\n        areAllRowsSelected={areAllRowsSelected}\n        areSomeRowsSelected={areSomeRowsSelected}\n        onAllRowsSelectionToggle={onAllRowsSelectionToggle}\n      >\n        <TableLoadingProvider isLoading={isLoading}>\n          <ColumnCollectionProvider>\n            <span tabIndex={-1} data-cim-table-guard aria-hidden />\n            <TableInner props={props} forwardedRef={ref} />\n            <span tabIndex={-1} data-cim-table-guard aria-hidden />\n          </ColumnCollectionProvider>\n        </TableLoadingProvider>\n      </TableStateProvider>\n    </TableFocusProvider>\n  );\n}\n\ninterface TableInnerProps {\n  props: Omit<\n    TableProps,\n    'isLoading' | 'rowSelectionMode' | 'areAllRowsSelected' | 'areSomeRowsSelected' | 'onAllRowsSelectionToggle'\n  >;\n  forwardedRef: ForwardedRef<HTMLTableElement>;\n}\n\nfunction TableInner({\n  props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props },\n  forwardedRef,\n}: TableInnerProps) {\n  const tableRef = useObjectRef(forwardedRef);\n  const { tableProps } = useTable(tableRef);\n  const { rowSelectionMode } = useTableState();\n\n  return (\n    <table\n      {...mergeProps(props, tableProps)}\n      ref={tableRef}\n      className={UNSAFE_className}\n      style={UNSAFE_style}\n      aria-rowcount={totalRowCount}\n      aria-colcount={totalColumnCount}\n      aria-multiselectable={rowSelectionMode === 'multiple' ? true : undefined}\n    >\n      {children}\n    </table>\n  );\n}\n\n/**\n * Displays data in an organized, tabular way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _Table = forwardRef(Table, 'Table');\n\nexport { _Table as Table };\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAGb,2CAAsD;AACtD,yDAAkD;AAClD,qFAA6E;AAE7E,0EAA2E;AAC3E,kDAAyD;AACzD,sDAA6D;AAC7D,8DAAqG;AACrG,uDAAgD;AAoDhD,SAAS,KAAK,CACZ,EACE,SAAS,GAAG,KAAK,EACjB,gBAAgB,GAAG,MAAM,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,GAAG,KAAK,EACG,EACb,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAC;QACvF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,uBAAC,6BAAkB,cACjB,uBAAC,mCAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,wBAAwB,EAAE,wBAAwB,YAElD,uBAAC,iCAAoB,IAAC,SAAS,EAAE,SAAS,YACxC,wBAAC,+CAAwB,eACvB,iCAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,uBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,iCAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,IAC9B,GACN,GACJ,GACF,CACtB,CAAC;AACJ,CAAC;AAUD,SAAS,UAAU,CAAC,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,EAC9F,YAAY,GACI;IAChB,MAAM,QAAQ,GAAG,IAAA,yBAAY,EAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAQ,EAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,8BAAa,GAAE,CAAC;IAE7C,OAAO,CACL,qCACM,IAAA,uBAAU,EAAC,KAAK,EAAE,UAAU,CAAC,EACjC,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,aAAa,mBACb,gBAAgB,0BACT,gBAAgB,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,YAEvE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,IAAA,2BAAU,EAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAEvB,uBAAK","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { mergeProps, useObjectRef } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ColumnCollectionProvider } from './contexts/column-collection.js';\nimport { TableFocusProvider } from './contexts/focus.js';\nimport { TableLoadingProvider } from './contexts/loading.js';\nimport { type RowSelectionMode, TableStateProvider, useTableState } from './contexts/table-state.js';\nimport { useTable } from './hooks/use-table.js';\n\nexport interface TableProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the table. */\n  children: ReactNode;\n  /**\n   * The number of rows in the full dataset, including headers.\n   *\n   * Provide this value if your table presents a subset of rows, such as when using pagination.\n   * Use `-1` if the number of rows is not known.\n   *\n   * You must provide `rowNumber` on each table row if `totalRowCount` is defined.\n   */\n  totalRowCount?: number;\n  /**\n   * The number of columns in the full dataset.\n   *\n   * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n   * Use `-1` if the number of columns is not known.\n   *\n   * You must provide `columnNumber` on each table header cell if `totalColumnCount` is defined.\n   */\n  totalColumnCount?: number;\n  /**\n   * The type of row selection that is allowed within the table.\n   * @default 'none'\n   */\n  rowSelectionMode?: RowSelectionMode;\n  /**\n   * Whether all of the table's rows are selected.\n   * The meaning of \"all rows\" is dictated by the consumer.\n   */\n  areAllRowsSelected?: boolean;\n  /**\n   * Whether some (but not all) of the table's rows are selected.\n   * The meaning of \"some rows\" is dictated by the consumer.\n   */\n  areSomeRowsSelected?: boolean;\n  /**\n   * A function called when the selection state of all rows should change.\n   *\n   * If called without an argument, you are free to pick the new selection state based on your own logic.\n   * If called with an argument, you must set the selection state to the provided value.\n   */\n  onAllRowsSelectionToggle?: (value?: boolean) => void;\n  /**\n   * Whether the table is currently in a loading state.\n   * @default false\n   */\n  isLoading?: boolean;\n}\n\nfunction Table(\n  {\n    isLoading = false,\n    rowSelectionMode = 'none',\n    areAllRowsSelected,\n    areSomeRowsSelected,\n    onAllRowsSelectionToggle,\n    ...props\n  }: TableProps,\n  ref: ForwardedRef<HTMLTableElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('Table requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  return (\n    <TableFocusProvider>\n      <TableStateProvider\n        rowSelectionMode={rowSelectionMode}\n        areAllRowsSelected={areAllRowsSelected}\n        areSomeRowsSelected={areSomeRowsSelected}\n        onAllRowsSelectionToggle={onAllRowsSelectionToggle}\n      >\n        <TableLoadingProvider isLoading={isLoading}>\n          <ColumnCollectionProvider>\n            <span tabIndex={-1} data-cim-table-guard aria-hidden />\n            <TableInner props={props} forwardedRef={ref} />\n            <span tabIndex={-1} data-cim-table-guard aria-hidden />\n          </ColumnCollectionProvider>\n        </TableLoadingProvider>\n      </TableStateProvider>\n    </TableFocusProvider>\n  );\n}\n\ninterface TableInnerProps {\n  props: Omit<\n    TableProps,\n    'isLoading' | 'rowSelectionMode' | 'areAllRowsSelected' | 'areSomeRowsSelected' | 'onAllRowsSelectionToggle'\n  >;\n  forwardedRef: ForwardedRef<HTMLTableElement>;\n}\n\nfunction TableInner({\n  props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props },\n  forwardedRef,\n}: TableInnerProps) {\n  const tableRef = useObjectRef(forwardedRef);\n  const { tableProps } = useTable(tableRef);\n  const { rowSelectionMode } = useTableState();\n\n  return (\n    <table\n      {...mergeProps(props, tableProps)}\n      ref={tableRef}\n      className={UNSAFE_className}\n      style={UNSAFE_style}\n      aria-rowcount={totalRowCount}\n      aria-colcount={totalColumnCount}\n      aria-multiselectable={rowSelectionMode === 'multiple' ? true : undefined}\n    >\n      {children}\n    </table>\n  );\n}\n\n/**\n * Displays data in an organized, tabular way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _Table = forwardRef(Table, 'Table');\n\nexport { _Table as Table };\n"]}

package/dist/commonjs/components/tag-field/tag-field-input.js

@@ -8,23 +8,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
+const localization_provider_js_1 = require("../../i18n/localization-provider.js");
 const utils_js_1 = require("../typography/utils.js");
 /** @internal */
-function TagFieldInput({ inputRef, isReadOnly, isRequired, isInvalid, placeholder, onFocusChange, 'aria-describedby': ariaDescribedby, }) {
+function TagFieldInput({ inputRef, isReadOnly, placeholder, }) {
     const comboBoxState = (0, react_1.useContext)(react_aria_components_1.ComboBoxStateContext);
-    const inputContext = (0, react_1.useContext)(react_aria_components_1.InputContext);
-    // We use custom IDs for description and error message, so we need to manually attach them to the input
-    const { id: descriptionId } = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.TextContext, 'description');
-    const { id: errorMessageId } = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.TextContext, 'errorMessage');
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.InputContext.Provider, { value: {
-            ...inputContext,
-            // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers
-            required: false,
-            'aria-required': isRequired,
-            'aria-invalid': isInvalid || undefined,
-        }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { ref: inputRef, className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'body' })), 
-            // Ensure the popover opens when the input is clicked.
-            // By default, React Aria only opens the popover when the input is focused.
-            onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder, onFocus: () => onFocusChange(true), onBlur: () => onFocusChange(false), "aria-describedby": [descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined }) }));
+    const messages = (0, localization_provider_js_1.useLocalizedMessages)('tagField');
+    const selectedItemCount = comboBoxState?.selectedItems.length ?? 0;
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { ref: inputRef, className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'body' })), 
+        // Ensure the popover opens when the input is clicked.
+        // By default, React Aria only opens the popover when the input is focused.
+        onClick: () => !isReadOnly && comboBoxState.open(), placeholder: selectedItemCount === 0 && placeholder ? placeholder : messages.format('itemsSelected', { selectedItemCount }) }));
 }
 //# sourceMappingURL=tag-field-input.js.map

package/dist/commonjs/components/tag-field/tag-field-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";;;;;AAYA,sCA+CC;;AA3DD,gDAAwB;AACxB,iCAA0D;AAC1D,iEAM+B;AAC/B,qDAAmD;AAEnD,gBAAgB;AAChB,SAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,aAAa,EACb,kBAAkB,EAAE,eAAe,GASpC;IACC,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,4CAAuB,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,IAAA,kBAAU,EAAC,oCAAe,CAAC,CAAC;IAEjD,uGAAuG;IACvG,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,IAAA,yCAAiB,EAAC,mCAAc,EAAE,aAAa,CAAE,CAAC;IAChF,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,IAAA,yCAAiB,EAAC,mCAAc,EAAE,cAAc,CAAE,CAAC;IAElF,OAAO,CACL,uBAAC,oCAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,GAAG,YAAY;YACf,sIAAsI;YACtI,QAAQ,EAAE,KAAK;YACf,eAAe,EAAE,UAAU;YAC3B,cAAc,EAAE,SAAS,IAAI,SAAS;SACvC,YAED,uBAAC,6BAAQ,IACP,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;YACtE,sDAAsD;YACtD,2EAA2E;YAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,sBAChB,CAAC,aAAa,EAAE,cAAc,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,GACzG,GACuB,CAC5B,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { type MutableRefObject, useContext } from 'react';\nimport {\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Input as RACInput,\n  InputContext as RACInputContext,\n  TextContext as RACTextContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport { textStyle } from '../typography/utils.js';\n\n/** @internal */\nexport function TagFieldInput({\n  inputRef,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  placeholder,\n  onFocusChange,\n  'aria-describedby': ariaDescribedby,\n}: {\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n  isReadOnly: boolean | undefined;\n  isRequired: boolean | undefined;\n  isInvalid: boolean | undefined;\n  placeholder: string | undefined;\n  onFocusChange: (isFocused: boolean) => void;\n  'aria-describedby': string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const inputContext = useContext(RACInputContext);\n\n  // We use custom IDs for description and error message, so we need to manually attach them to the input\n  const { id: descriptionId } = useSlottedContext(RACTextContext, 'description')!;\n  const { id: errorMessageId } = useSlottedContext(RACTextContext, 'errorMessage')!;\n\n  return (\n    <RACInputContext.Provider\n      value={{\n        ...inputContext,\n        // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers\n        required: false,\n        'aria-required': isRequired,\n        'aria-invalid': isInvalid || undefined,\n      }}\n    >\n      <RACInput\n        ref={inputRef}\n        className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n        // Ensure the popover opens when the input is clicked.\n        // By default, React Aria only opens the popover when the input is focused.\n        onClick={() => !isReadOnly && comboBoxState!.open()}\n        placeholder={placeholder}\n        onFocus={() => onFocusChange(true)}\n        onBlur={() => onFocusChange(false)}\n        aria-describedby={[descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined}\n      />\n    </RACInputContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";;;;;AAOA,sCA0BC;;AAjCD,gDAAwB;AACxB,iCAA0D;AAC1D,iEAA2G;AAC3G,kFAA2E;AAC3E,qDAAmD;AAEnD,gBAAgB;AAChB,SAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,WAAW,GAKZ;IACC,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,4CAAuB,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,IAAA,+CAAoB,EAAC,UAAU,CAAC,CAAC;IAElD,MAAM,iBAAiB,GAAG,aAAa,EAAE,aAAa,CAAC,MAAM,IAAI,CAAC,CAAC;IAEnE,OAAO,CACL,uBAAC,6BAAQ,IACP,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;QACtE,sDAAsD;QACtD,2EAA2E;QAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EACT,iBAAiB,KAAK,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,iBAAiB,EAAE,CAAC,GAEhH,CACH,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { type MutableRefObject, useContext } from 'react';\nimport { ComboBoxStateContext as RACComboBoxStateContext, Input as RACInput } from 'react-aria-components';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { textStyle } from '../typography/utils.js';\n\n/** @internal */\nexport function TagFieldInput({\n  inputRef,\n  isReadOnly,\n  placeholder,\n}: {\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const messages = useLocalizedMessages('tagField');\n\n  const selectedItemCount = comboBoxState?.selectedItems.length ?? 0;\n\n  return (\n    <RACInput\n      ref={inputRef}\n      className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n      // Ensure the popover opens when the input is clicked.\n      // By default, React Aria only opens the popover when the input is focused.\n      onClick={() => !isReadOnly && comboBoxState!.open()}\n      placeholder={\n        selectedItemCount === 0 && placeholder ? placeholder : messages.format('itemsSelected', { selectedItemCount })\n      }\n    />\n  );\n}\n"]}

package/dist/commonjs/components/tag-field/tag-field-list-box.js

@@ -12,44 +12,10 @@ const VIRTUAL_LAYOUT_OPTIONS = {
     gap: 0,
 };
 /** @internal */
-function TagFieldListBox({ children, inputId, selectedKeys, setSelectedKeys, items, onScroll, isVirtualized, }) {
+function TagFieldListBox({ children, items, onScroll, isVirtualized, }) {
     const comboBoxState = (0, react_1.useContext)(react_aria_components_1.ComboBoxStateContext);
-    const listState = (0, react_1.useContext)(react_aria_components_1.ListStateContext);
     (0, react_aria_1.usePreventScroll)({ isDisabled: !comboBoxState?.isOpen });
-    // Override RACListStateContext to allow multiple selection within the list
-    const updatedListState = (0, react_1.useMemo)(() => {
-        if (!listState || !listState.selectionManager) {
-            return listState;
-        }
-        // This is a temporary mutation before a context update, so this is fine
-        // @ts-expect-error `selectionManager.state` is private
-        // eslint-disable-next-line react-hooks/immutability
-        listState.selectionManager.state.selectionMode = 'multiple';
-        // @ts-expect-error `selectionManager.state` is private
-        // eslint-disable-next-line react-hooks/immutability
-        listState.selectionManager.state.selectedKeys = selectedKeys;
-        // @ts-expect-error `selectionManager.state` is private
-        // eslint-disable-next-line react-hooks/immutability
-        listState.selectionManager.state.setSelectedKeys = (keys) => {
-            if (keys === 'all') {
-                // When the end-user presses Ctrl/Cmd + A on a list which has `selectionMode` set to `'multiple'`,
-                // the selection manager emits the `'all'` string as an indication to select all items.
-                // We don't want to do that - instead, we select the contents of the input field.
-                // Querying by ID because RACInputContext has a null ref for some reason.
-                document.getElementById(inputId)?.select();
-            }
-            else {
-                setSelectedKeys(keys);
-            }
-        };
-        // @ts-expect-error `selectionManager.state` is private
-        // eslint-disable-next-line react-hooks/immutability
-        listState.selectionManager.state.disallowEmptySelection = false;
-        return {
-            ...listState,
-        };
-    }, [listState, selectedKeys, setSelectedKeys, inputId]);
     const listBox = ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }));
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListStateContext.Provider, { value: updatedListState, children: isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) }));
+    return isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox);
 }
 //# sourceMappingURL=tag-field-list-box.js.map

package/dist/commonjs/components/tag-field/tag-field-list-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";;AAqBA,0CAsEC;;AA3FD,iCAA4C;AAC5C,2CAA8C;AAC9C,iEAO+B;AAI/B,MAAM,sBAAsB,GAAyB;IACnD,kBAAkB,EAAE,EAAE;IACtB,sBAAsB,EAAE,EAAE;IAC1B,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,gBAAgB;AAChB,SAAgB,eAAe,CAA2B,EACxD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,EACR,aAAa,GAKd;IACC,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,4CAAuB,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,wCAAmB,CAAC,CAAC;IAElD,IAAA,6BAAgB,EAAC,EAAE,UAAU,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAEzD,2EAA2E;IAC3E,MAAM,gBAAgB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACpC,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;YAC9C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,wEAAwE;QACxE,uDAAuD;QACvD,oDAAoD;QACpD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAAa,GAAG,UAAU,CAAC;QAC5D,uDAAuD;QACvD,oDAAoD;QACpD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;QAC7D,uDAAuD;QACvD,oDAAoD;QACpD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,eAAe,GAAG,CAAC,IAAsB,EAAE,EAAE;YAC5E,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;gBACnB,kGAAkG;gBAClG,uFAAuF;gBACvF,iFAAiF;gBACjF,yEAAyE;gBACxE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAA6B,EAAE,MAAM,EAAE,CAAC;YAC1E,CAAC;iBAAM,CAAC;gBACN,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QACF,uDAAuD;QACvD,oDAAoD;QACpD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,sBAAsB,GAAG,KAAK,CAAC;QAEhE,OAAO;YACL,GAAG,SAAS;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC;IAExD,MAAM,OAAO,GAAG,CACd,uBAAC,+BAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,CACd,CAAC;IAEF,OAAO,CACL,uBAAC,wCAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YAClD,aAAa,CAAC,CAAC,CAAC,CACf,uBAAC,mCAAc,IAAC,MAAM,EAAE,kCAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GAC4B,CAChC,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport { usePreventScroll } from 'react-aria';\nimport {\n  ComboBoxStateContext as RACComboBoxStateContext,\n  ListBox as RACListBox,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  ListStateContext as RACListStateContext,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  estimatedRowHeight: 36,\n  estimatedHeadingHeight: 32,\n  padding: 0,\n  gap: 0,\n};\n\n/** @internal */\nexport function TagFieldListBox<T extends CollectionItem>({\n  children,\n  inputId,\n  selectedKeys,\n  setSelectedKeys,\n  items,\n  onScroll,\n  isVirtualized,\n}: Pick<TagFieldProps<T>, 'children' | 'items' | 'onScroll' | 'isVirtualized'> & {\n  inputId: string;\n  selectedKeys: Set<Key>;\n  setSelectedKeys: (keys: Set<Key>) => void;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const listState = useContext(RACListStateContext);\n\n  usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n  // Override RACListStateContext to allow multiple selection within the list\n  const updatedListState = useMemo(() => {\n    if (!listState || !listState.selectionManager) {\n      return listState;\n    }\n\n    // This is a temporary mutation before a context update, so this is fine\n    // @ts-expect-error `selectionManager.state` is private\n    // eslint-disable-next-line react-hooks/immutability\n    listState.selectionManager.state.selectionMode = 'multiple';\n    // @ts-expect-error `selectionManager.state` is private\n    // eslint-disable-next-line react-hooks/immutability\n    listState.selectionManager.state.selectedKeys = selectedKeys;\n    // @ts-expect-error `selectionManager.state` is private\n    // eslint-disable-next-line react-hooks/immutability\n    listState.selectionManager.state.setSelectedKeys = (keys: Set<Key> | 'all') => {\n      if (keys === 'all') {\n        // When the end-user presses Ctrl/Cmd + A on a list which has `selectionMode` set to `'multiple'`,\n        // the selection manager emits the `'all'` string as an indication to select all items.\n        // We don't want to do that - instead, we select the contents of the input field.\n        // Querying by ID because RACInputContext has a null ref for some reason.\n        (document.getElementById(inputId) as HTMLInputElement | null)?.select();\n      } else {\n        setSelectedKeys(keys);\n      }\n    };\n    // @ts-expect-error `selectionManager.state` is private\n    // eslint-disable-next-line react-hooks/immutability\n    listState.selectionManager.state.disallowEmptySelection = false;\n\n    return {\n      ...listState,\n    };\n  }, [listState, selectedKeys, setSelectedKeys, inputId]);\n\n  const listBox = (\n    <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n      {children}\n    </RACListBox>\n  );\n\n  return (\n    <RACListStateContext.Provider value={updatedListState}>\n      {isVirtualized ? (\n        <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n          {listBox}\n        </RACVirtualizer>\n      ) : (\n        listBox\n      )}\n    </RACListStateContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";;AAoBA,0CAuBC;;AA3CD,iCAAmC;AACnC,2CAA8C;AAC9C,iEAM+B;AAI/B,MAAM,sBAAsB,GAAyB;IACnD,kBAAkB,EAAE,EAAE;IACtB,sBAAsB,EAAE,EAAE;IAC1B,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,gBAAgB;AAChB,SAAgB,eAAe,CAA2B,EACxD,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,GAC+D;IAC5E,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,4CAAuB,CAAC,CAAC;IAE1D,IAAA,6BAAgB,EAAC,EAAE,UAAU,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAEzD,MAAM,OAAO,GAAG,CACd,uBAAC,+BAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,CACd,CAAC;IAEF,OAAO,aAAa,CAAC,CAAC,CAAC,CACrB,uBAAC,mCAAc,IAAC,MAAM,EAAE,kCAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { useContext } from 'react';\nimport { usePreventScroll } from 'react-aria';\nimport {\n  ComboBoxStateContext as RACComboBoxStateContext,\n  ListBox as RACListBox,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport type { CollectionItem } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  estimatedRowHeight: 36,\n  estimatedHeadingHeight: 32,\n  padding: 0,\n  gap: 0,\n};\n\n/** @internal */\nexport function TagFieldListBox<T extends CollectionItem>({\n  children,\n  items,\n  onScroll,\n  isVirtualized,\n}: Pick<TagFieldProps<T>, 'children' | 'items' | 'onScroll' | 'isVirtualized'>) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n\n  usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n  const listBox = (\n    <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n      {children}\n    </RACListBox>\n  );\n\n  return isVirtualized ? (\n    <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n      {listBox}\n    </RACVirtualizer>\n  ) : (\n    listBox\n  );\n}\n"]}

package/dist/commonjs/components/tag-field/tag-field.d.ts

@@ -1,6 +1,6 @@
 import { type UIEventHandler } from 'react';
 import { type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACListBoxItemProps } from 'react-aria-components';
-import type { TagGroupProps } from '../tag/tag-group.js';
+import { type TagGroupProps } from '../tag/tag-group.js';
 import type { ApiProps, CollectionItem, CollectionProps, CommonProps, FieldWithPlaceholderProps, Key, StringLikeChildren } from '../types.js';
 /** Represents the state of the `TagField` component for validation purposes. */
 export interface TagFieldValidationValue {

package/dist/commonjs/components/tag-field/tag-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAqB,KAAK,cAAc,EAAkD,MAAM,OAAO,CAAC;AAC/G,OAAO,EAUL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;AAU/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAMrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC9B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SACE,WAAW,EACX,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,QAAQ,CAAC,WAAW,CAAC,EACrB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAC5C,kEAAkE;IAClE,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AA8PD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAjQG,CAAC,SAAS,cAAc,iKAiQwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAEjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACvE,mBAAmB,CAAC,CAAC,CAAC,EACtB,YAAY,GAAG,cAAc,GAAG,YAAY,CAC7C;IACC,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}
+{"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AAE5F,OAAO,EASL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAS/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,KAAK,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAKrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC9B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SACE,WAAW,EACX,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,QAAQ,CAAC,WAAW,CAAC,EACrB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAC5C,kEAAkE;IAClE,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAgID;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAnIG,CAAC,SAAS,cAAc,iKAmIwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAEjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACvE,mBAAmB,CAAC,CAAC,CAAC,EACtB,YAAY,GAAG,cAAc,GAAG,YAAY,CAC7C;IACC,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}

package/dist/commonjs/components/tag-field/tag-field.js

@@ -8,15 +8,11 @@ exports.TagField = void 0;
 exports.TagFieldItem = TagFieldItem;
 exports.TagFieldSection = TagFieldSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const form_1 = require("@react-aria/form");
-const utils_1 = require("@react-aria/utils");
-const form_2 = require("@react-stately/form");
-const utils_2 = require("@react-stately/utils");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
+const react_aria_1 = require("react-aria");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
-const localization_provider_js_1 = require("../../i18n/localization-provider.js");
 const index_js_1 = require("../../icons/index.js");
 const is_production_js_1 = require("../../utils/is-production.js");
 const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
@@ -24,13 +20,14 @@ const with_style_props_js_1 = require("../../with-style-props.js");
 const checkbox_indicator_js_1 = require("../internal/checkbox-indicator/checkbox-indicator.js");
 const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
+const tag_group_js_1 = require("../tag/tag-group.js");
+const tag_js_1 = require("../tag/tag.js");
 const utils_js_1 = require("../typography/utils.js");
 const tag_field_input_js_1 = require("./tag-field-input.js");
 const tag_field_list_box_js_1 = require("./tag-field-list-box.js");
-const tag_field_tags_js_1 = require("./tag-field-tags.js");
-function TagField({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, inputValue: consumerInputValue, defaultInputValue: defaultConsumerInputValue, onInputChange, form, name, validate, onScroll, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: defaultConsumerSelectedKeys, onSelectionChange, id, renderEmptyState, isVirtualized = false, apiRef, ...props }, ref) {
+function TagField({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, validate, isReadOnly, onScroll, selectedKeys, defaultSelectedKeys, onSelectionChange, id, renderEmptyState, isVirtualized = false, apiRef, ...props }, ref) {
     const inputRef = (0, react_1.useRef)(null);
-    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled, isInvalid } = props;
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled } = props;
     (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
             console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');
@@ -39,93 +36,21 @@ function TagField({ label, description, error, items, children, placeholder, UNS
     if (!(0, is_production_js_1.isProduction)() && items != null && typeof children !== 'function') {
         console.warn('`TagField` requires `children` to be a function when using `items` prop');
     }
-    const messages = (0, localization_provider_js_1.useLocalizedMessages)('tagField');
+    const inputId = (0, react_aria_1.useId)(id);
     (0, react_1.useImperativeHandle)(apiRef, () => ({
         focus: () => inputRef.current?.focus(),
     }), []);
-    // State
-    const [defaultSelectedKeys] = (0, react_1.useState)(() => defaultConsumerSelectedKeys ?? new Set());
-    const [selectedKeys, setSelectedKeys] = (0, utils_2.useControlledState)(consumerSelectedKeys, defaultSelectedKeys, onSelectionChange);
-    const [inputValue, setInputValue] = (0, utils_2.useControlledState)(consumerInputValue, defaultConsumerInputValue ?? '', onInputChange);
-    const selectedSet = (0, react_1.useMemo)(() => {
-        // eslint-disable-next-line unicorn/no-instanceof-builtins
-        if (selectedKeys instanceof Set) {
-            return new Set(selectedKeys.values());
-        }
-        return new Set(selectedKeys);
-    }, [selectedKeys]);
-    // Validation
-    const inputId = (0, utils_1.useId)(id);
-    const formInputRef = (0, react_1.useRef)(null);
-    const validationState = (0, form_2.useFormValidationState)({
-        name,
-        value: (0, react_1.useMemo)(() => ({ selectedKeys: selectedSet, inputValue }), [selectedSet, inputValue]),
-        isInvalid,
-        isRequired,
-        validate,
-        validationBehavior: 'native',
-    });
-    const [initialSelectedKeys] = (0, react_1.useState)(selectedKeys);
-    const [initialInputValue] = (0, react_1.useState)(inputValue);
-    (0, utils_1.useFormReset)(formInputRef, [defaultConsumerSelectedKeys ?? initialSelectedKeys, defaultConsumerInputValue ?? initialInputValue], ([a, b]) => {
-        setSelectedKeys(a);
-        setInputValue(b);
-    });
-    (0, form_1.useFormValidation)({
-        focus: () => {
-            // Querying by element ID because a ref is always null here, I don't know why :(
-            document.getElementById(inputId)?.focus();
-        },
-        isInvalid,
-        isRequired,
-        validate,
-        validationBehavior: 'native',
-    }, validationState, formInputRef);
-    // Event handlers
-    // Commit validation on input blur if the values have changed
-    const inputValueOnFocus = (0, react_1.useRef)(inputValue);
-    const selectedSetOnFocus = (0, react_1.useRef)(selectedSet);
-    const onFocusChange = (isFocused) => {
-        if (isFocused) {
-            inputValueOnFocus.current = inputValue;
-            selectedSetOnFocus.current = selectedSet;
-        }
-        else if (inputValue !== inputValueOnFocus.current || selectedSet !== selectedSetOnFocus.current) {
-            validationState.commitValidation();
-        }
-    };
-    const onItemSelectionChange = (key) => {
-        if (selectedSet.has(key)) {
-            // This is a temporary mutation followed immediately by a state update, so this is fine
-            // eslint-disable-next-line react-hooks/immutability
-            selectedSet.delete(key);
-        }
-        else {
-            selectedSet.add(key);
-        }
-        setSelectedKeys(new Set(selectedSet.values()));
-        validationState.commitValidation();
-    };
-    // Text slots
-    const descriptionId = (0, utils_1.useSlotId)([Boolean(description)]);
-    const errorMessageId = (0, utils_1.useSlotId)([
-        Boolean(error || validationState.displayValidation.validationErrors),
-        validationState.displayValidation.isInvalid,
-    ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.ComboBox, { ...props, ref: ref, id: inputId, className: (0, clsx_1.default)('cim-combo-box', 'cim-tag-field', UNSAFE_className), style: UNSAFE_style, 
-                // Force no internal selection - we handle selection manually
-                selectedKey: null, inputValue: inputValue, onInputChange: setInputValue, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, onSelectionChange: (key) => {
-                    if (key) {
-                        onItemSelectionChange(key);
-                    }
-                }, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Provider, { values: [
-                        [react_aria_components_1.TextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],
-                        [react_aria_components_1.GroupContext, { isInvalid: validationState.displayValidation.isInvalid, isDisabled }],
-                        [react_aria_components_1.FieldErrorContext, validationState.displayValidation],
-                    ], children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-combo-box-input-group", children: [(0, jsx_runtime_1.jsx)(tag_field_input_js_1.TagFieldInput, { inputRef: inputRef, "aria-describedby": props['aria-describedby'], isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: validationState.displayValidation.isInvalid, placeholder: selectedSet.size === 0 && placeholder
-                                        ? placeholder
-                                        : messages.format('itemsSelected', { selectedItemCount: selectedSet.size }), onFocusChange: onFocusChange }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(tag_field_tags_js_1.TagFieldTags, { inputId: inputId, selectedKeys: selectedSet, isDisabled: isDisabled, isReadOnly: isReadOnly, renderEmptyState: renderEmptyState, onRemove: onItemSelectionChange }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(tag_field_list_box_js_1.TagFieldListBox, { inputId: inputId, items: items, selectedKeys: selectedSet, setSelectedKeys: setSelectedKeys, onScroll: onScroll, isVirtualized: isVirtualized, children: children }) })] }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { ref: formInputRef, style: { display: 'none' }, value: selectedSet.size || '', required: isRequired, "aria-invalid": validationState.displayValidation.isInvalid || undefined, onChange: () => { } }), name &&
-                [...selectedSet].map((value) => (0, jsx_runtime_1.jsx)("input", { type: "hidden", form: form, name: name, value: value }, value))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', 'cim-tag-field', UNSAFE_className), style: UNSAFE_style, id: inputId, selectionMode: "multiple", value: selectedKeys ? Array.from(selectedKeys) : undefined, defaultValue: defaultSelectedKeys ? Array.from(defaultSelectedKeys) : undefined, onChange: (keys) => onSelectionChange?.(new Set(keys)), menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, validate: validate
+            ? ({ inputValue, value }) => {
+                return validate({ inputValue, selectedKeys: new Set(value) });
+            }
+            : undefined, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-combo-box-input-group", children: [(0, jsx_runtime_1.jsx)(tag_field_input_js_1.TagFieldInput, { inputRef: inputRef, "aria-describedby": props['aria-describedby'], isReadOnly: isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(react_aria_components_1.ComboBoxValue, { children: ({ state }) => ((0, jsx_runtime_1.jsx)(tag_group_js_1.TagGroup, { "aria-labelledby": inputId, disabledKeys: isDisabled ? state.selectedItems.map((item) => item.key) : undefined, renderEmptyState: renderEmptyState, onRemove: isReadOnly
+                        ? undefined
+                        : (keys) => {
+                            if (Array.isArray(state.value)) {
+                                state.setValue(state.value.filter((k) => !keys.has(k)));
+                            }
+                        }, children: state.selectedItems.map((item) => ((0, jsx_runtime_1.jsx)(tag_js_1.Tag, { id: item.key, isDisabled: item.props.isDisabled, children: item.textValue }, item.key))) })) }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(tag_field_list_box_js_1.TagFieldListBox, { items: items, onScroll: onScroll, isVirtualized: isVirtualized, children: children }) })] }));
 }
 /**
  * Allows users to filter a collapsible list and select multiple items from it.

package/dist/commonjs/components/tag-field/tag-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useId, useSlotId } from '@react-aria/utils';\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  Group as RACGroup,\n  Header as RACHeader,\n  Input as RACInput,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  Provider as RACProvider,\n  TextContext as RACTextContext,\n  GroupContext as RACGroupContext,\n  FieldErrorContext as RACFieldErrorContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { TagGroupProps } from '../tag/tag-group.js';\nimport type {\n  ApiProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\nimport { TagFieldTags } from './tag-field-tags.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface TagFieldValidationValue {\n  /** The selected keys in the TagField. */\n  selectedKeys: Set<Key> | null;\n  /** The value of the TagField input. */\n  inputValue: string;\n}\n\nexport interface TagFieldProps<T extends CollectionItem = CollectionItem>\n  extends\n    CommonProps,\n    FieldWithPlaceholderProps<TagFieldValidationValue>,\n    CollectionProps<T>,\n    ApiProps<TagFieldApi>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'isRequired'\n      | 'isDisabled'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<TagGroupProps<T>, 'renderEmptyState'> {\n  /** The currently selected keys in the collection (controlled). */\n  selectedKeys?: Iterable<Key>;\n  /** The initial selected keys in the collection (uncontrolled). */\n  defaultSelectedKeys?: Iterable<Key>;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (keys: Set<Key>) => void;\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `TagField` component. */\nexport interface TagFieldApi {\n  /** Focuses the input field and opens the list of items. */\n  focus: () => void;\n}\n\nfunction TagField<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    items,\n    children,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    isReadOnly,\n    inputValue: consumerInputValue,\n    defaultInputValue: defaultConsumerInputValue,\n    onInputChange,\n    form,\n    name,\n    validate,\n    onScroll,\n    selectedKeys: consumerSelectedKeys,\n    defaultSelectedKeys: defaultConsumerSelectedKeys,\n    onSelectionChange,\n    id,\n    renderEmptyState,\n    isVirtualized = false,\n    apiRef,\n    ...props\n  }: TagFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled, isInvalid } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`TagField` requires `children` to be a function when using `items` prop');\n  }\n\n  const messages = useLocalizedMessages('tagField');\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => inputRef.current?.focus(),\n    }),\n    [],\n  );\n\n  // State\n\n  const [defaultSelectedKeys] = useState(() => defaultConsumerSelectedKeys ?? new Set<Key>());\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    consumerSelectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange,\n  );\n  const [inputValue, setInputValue] = useControlledState(\n    consumerInputValue,\n    defaultConsumerInputValue ?? '',\n    onInputChange,\n  );\n\n  const selectedSet = useMemo(() => {\n    // eslint-disable-next-line unicorn/no-instanceof-builtins\n    if (selectedKeys instanceof Set) {\n      return new Set<Key>(selectedKeys.values());\n    }\n\n    return new Set<Key>(selectedKeys);\n  }, [selectedKeys]);\n\n  // Validation\n\n  const inputId = useId(id);\n  const formInputRef = useRef<HTMLInputElement>(null);\n\n  const validationState = useFormValidationState({\n    name,\n    value: useMemo(() => ({ selectedKeys: selectedSet, inputValue }), [selectedSet, inputValue]),\n    isInvalid,\n    isRequired,\n    validate,\n    validationBehavior: 'native',\n  });\n\n  const [initialSelectedKeys] = useState(selectedKeys);\n  const [initialInputValue] = useState(inputValue);\n\n  useFormReset<[Iterable<Key>, string]>(\n    formInputRef,\n    [defaultConsumerSelectedKeys ?? initialSelectedKeys, defaultConsumerInputValue ?? initialInputValue],\n    ([a, b]) => {\n      setSelectedKeys(a);\n      setInputValue(b);\n    },\n  );\n\n  useFormValidation(\n    {\n      focus: () => {\n        // Querying by element ID because a ref is always null here, I don't know why :(\n        document.getElementById(inputId)?.focus();\n      },\n      isInvalid,\n      isRequired,\n      validate,\n      validationBehavior: 'native',\n    },\n    validationState,\n    formInputRef,\n  );\n\n  // Event handlers\n\n  // Commit validation on input blur if the values have changed\n  const inputValueOnFocus = useRef(inputValue);\n  const selectedSetOnFocus = useRef(selectedSet);\n\n  const onFocusChange = (isFocused: boolean) => {\n    if (isFocused) {\n      inputValueOnFocus.current = inputValue;\n      selectedSetOnFocus.current = selectedSet;\n    } else if (inputValue !== inputValueOnFocus.current || selectedSet !== selectedSetOnFocus.current) {\n      validationState.commitValidation();\n    }\n  };\n\n  const onItemSelectionChange = (key: Key) => {\n    if (selectedSet.has(key)) {\n      // This is a temporary mutation followed immediately by a state update, so this is fine\n      // eslint-disable-next-line react-hooks/immutability\n      selectedSet.delete(key);\n    } else {\n      selectedSet.add(key);\n    }\n\n    setSelectedKeys(new Set(selectedSet.values()));\n    validationState.commitValidation();\n  };\n\n  // Text slots\n\n  const descriptionId = useSlotId([Boolean(description)]);\n\n  const errorMessageId = useSlotId([\n    Boolean(error || validationState.displayValidation.validationErrors),\n    validationState.displayValidation.isInvalid,\n  ]);\n\n  return (\n    <>\n      <RACComboBox\n        {...props}\n        ref={ref}\n        id={inputId}\n        className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n        style={UNSAFE_style}\n        // Force no internal selection - we handle selection manually\n        selectedKey={null}\n        inputValue={inputValue}\n        onInputChange={setInputValue}\n        menuTrigger=\"focus\"\n        isReadOnly={isReadOnly}\n        data-readonly={isReadOnly ? true : undefined}\n        onSelectionChange={(key) => {\n          if (key) {\n            onItemSelectionChange(key);\n          }\n        }}\n      >\n        <RACProvider\n          values={[\n            [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],\n            [RACGroupContext, { isInvalid: validationState.displayValidation.isInvalid, isDisabled }],\n            [RACFieldErrorContext, validationState.displayValidation],\n          ]}\n        >\n          <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n            {label}\n          </FormFieldLabel>\n\n          <RACGroup className=\"cim-combo-box-input-group\">\n            <TagFieldInput\n              inputRef={inputRef}\n              aria-describedby={props['aria-describedby']}\n              isReadOnly={isReadOnly}\n              isRequired={isRequired}\n              isInvalid={validationState.displayValidation.isInvalid}\n              placeholder={\n                selectedSet.size === 0 && placeholder\n                  ? placeholder\n                  : messages.format('itemsSelected', { selectedItemCount: selectedSet.size })\n              }\n              onFocusChange={onFocusChange}\n            />\n            <RACButton className=\"cim-combo-box-button\">\n              <IconChevronDown />\n            </RACButton>\n          </RACGroup>\n\n          <FormFieldError>{error}</FormFieldError>\n          <FormFieldDescription>{description}</FormFieldDescription>\n\n          <TagFieldTags<T>\n            inputId={inputId}\n            selectedKeys={selectedSet}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            renderEmptyState={renderEmptyState}\n            onRemove={onItemSelectionChange}\n          />\n\n          <CollapsibleList\n            offset={5} // 1px border + 4px actual offset\n            maxHeight={315}\n          >\n            <TagFieldListBox<T>\n              inputId={inputId}\n              items={items}\n              selectedKeys={selectedSet}\n              setSelectedKeys={setSelectedKeys}\n              onScroll={onScroll}\n              isVirtualized={isVirtualized}\n            >\n              {children}\n            </TagFieldListBox>\n          </CollapsibleList>\n        </RACProvider>\n      </RACComboBox>\n\n      {/* This input is used for native form validation. We can't use the combo box input because its value has no relation to the selected values. */}\n      <RACInput\n        ref={formInputRef}\n        style={{ display: 'none' }}\n        value={selectedSet.size || ''}\n        required={isRequired}\n        aria-invalid={validationState.displayValidation.isInvalid || undefined}\n        onChange={() => {}}\n      />\n\n      {/* These hidden inputs provide values when a form is submitted. */}\n      {name &&\n        [...selectedSet].map((value) => <input type=\"hidden\" key={value} form={form} name={name} value={value} />)}\n    </>\n  );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.io/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem> extends Pick<\n  RACListBoxItemProps<T>,\n  'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `TagField`. */\nexport function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-tag-field-item cim-checkbox-indicator-wrapper\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <CheckboxIndicator />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nTagFieldItem.displayName = 'TagFieldItem';\n\nexport interface TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `TagField` into a section. */\nexport function TagFieldSection<T extends CollectionItem>({\n  title,\n  children,\n  items,\n  ...props\n}: TagFieldSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader\n        className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nTagFieldSection.displayName = 'TagFieldSection';\n"]}
+{"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  Group as RACGroup,\n  Header as RACHeader,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  ComboBoxValue as RACComboBoxValue,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { TagGroup, type TagGroupProps } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type {\n  ApiProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface TagFieldValidationValue {\n  /** The selected keys in the TagField. */\n  selectedKeys: Set<Key> | null;\n  /** The value of the TagField input. */\n  inputValue: string;\n}\n\nexport interface TagFieldProps<T extends CollectionItem = CollectionItem>\n  extends\n    CommonProps,\n    FieldWithPlaceholderProps<TagFieldValidationValue>,\n    CollectionProps<T>,\n    ApiProps<TagFieldApi>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'isRequired'\n      | 'isDisabled'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<TagGroupProps<T>, 'renderEmptyState'> {\n  /** The currently selected keys in the collection (controlled). */\n  selectedKeys?: Iterable<Key>;\n  /** The initial selected keys in the collection (uncontrolled). */\n  defaultSelectedKeys?: Iterable<Key>;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (keys: Set<Key>) => void;\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `TagField` component. */\nexport interface TagFieldApi {\n  /** Focuses the input field and opens the list of items. */\n  focus: () => void;\n}\n\nfunction TagField<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    items,\n    children,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    validate,\n    isReadOnly,\n    onScroll,\n    selectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange,\n    id,\n    renderEmptyState,\n    isVirtualized = false,\n    apiRef,\n    ...props\n  }: TagFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`TagField` requires `children` to be a function when using `items` prop');\n  }\n\n  const inputId = useId(id);\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => inputRef.current?.focus(),\n    }),\n    [],\n  );\n\n  return (\n    <RACComboBox\n      {...props}\n      ref={ref}\n      className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n      style={UNSAFE_style}\n      id={inputId}\n      selectionMode=\"multiple\"\n      value={selectedKeys ? Array.from(selectedKeys) : undefined}\n      defaultValue={defaultSelectedKeys ? Array.from(defaultSelectedKeys) : undefined}\n      onChange={(keys) => onSelectionChange?.(new Set(keys))}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n      validate={\n        validate\n          ? ({ inputValue, value }) => {\n              return validate({ inputValue, selectedKeys: new Set(value as unknown as Key[]) });\n            }\n          : undefined\n      }\n    >\n      <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n        {label}\n      </FormFieldLabel>\n\n      <RACGroup className=\"cim-combo-box-input-group\">\n        <TagFieldInput\n          inputRef={inputRef}\n          aria-describedby={props['aria-describedby']}\n          isReadOnly={isReadOnly}\n          placeholder={placeholder}\n        />\n        <RACButton className=\"cim-combo-box-button\">\n          <IconChevronDown />\n        </RACButton>\n      </RACGroup>\n\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n\n      <RACComboBoxValue>\n        {({ state }) => (\n          <TagGroup\n            aria-labelledby={inputId}\n            disabledKeys={isDisabled ? state.selectedItems.map((item) => item.key) : undefined}\n            renderEmptyState={renderEmptyState}\n            onRemove={\n              isReadOnly\n                ? undefined\n                : (keys) => {\n                    if (Array.isArray(state.value)) {\n                      state.setValue(state.value.filter((k) => !keys.has(k)));\n                    }\n                  }\n            }\n          >\n            {state.selectedItems.map((item) => (\n              <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n                {item.textValue}\n              </Tag>\n            ))}\n          </TagGroup>\n        )}\n      </RACComboBoxValue>\n\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <TagFieldListBox<T> items={items} onScroll={onScroll} isVirtualized={isVirtualized}>\n          {children}\n        </TagFieldListBox>\n      </CollapsibleList>\n    </RACComboBox>\n  );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.io/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem> extends Pick<\n  RACListBoxItemProps<T>,\n  'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `TagField`. */\nexport function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-tag-field-item cim-checkbox-indicator-wrapper\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <CheckboxIndicator />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nTagFieldItem.displayName = 'TagFieldItem';\n\nexport interface TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `TagField` into a section. */\nexport function TagFieldSection<T extends CollectionItem>({\n  title,\n  children,\n  items,\n  ...props\n}: TagFieldSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader\n        className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nTagFieldSection.displayName = 'TagFieldSection';\n"]}