@cimpress-ui/react 0.3.0 → 1.0.0

package/dist/esm/components/table/hooks/use-table-cell.js

@@ -10,6 +10,7 @@ export function useTableCell(ref, rowKey, columnKey) {
     const tableFocus = useTableFocus();
     const { pendingRowSelectionState, setPendingRowSelectionState } = useTableState();
     const { onSelectionToggle } = useTableRowState();
+    const { focusProps, isFocusVisible: isCellFocusVisible } = useFocusRing();
     const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;
     // Handles focusing the cell.
     // If there is a focusable child, it is focused, otherwise the cell itself is focused.
@@ -125,14 +126,13 @@ export function useTableCell(ref, rowKey, columnKey) {
         e.preventDefault();
         e.stopPropagation();
     };
-    const { focusProps, isFocused } = useFocusRing();
     const customProps = {
         tabIndex: isTabbable ? 0 : -1,
         onFocus,
         onKeyDownCapture,
         'data-cell-row-key': rowKey,
         'data-cell-column-key': columnKey,
-        'data-focused': isFocused || undefined,
+        'data-focus-visible': isCellFocusVisible || undefined,
     };
     return {
         cellProps: mergeProps(focusProps, customProps),

package/dist/esm/components/table/hooks/use-table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table-cell.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker, useFocusRing } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { mergeProps, useEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { type KeyboardEventHandler, type FocusEventHandler, type RefObject, useEffect } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { useTableFocus } from '../contexts/focus.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTableCell {\n  cellProps: NativeElementProps<HTMLTableCellElement>;\n}\n\nexport function useTableCell(\n  ref: RefObject<HTMLTableCellElement | null>,\n  rowKey: string,\n  columnKey: string,\n): UseTableCell {\n  const tableFocus = useTableFocus();\n  const { pendingRowSelectionState, setPendingRowSelectionState } = useTableState();\n  const { onSelectionToggle } = useTableRowState();\n\n  const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;\n\n  // Handles focusing the cell.\n  // If there is a focusable child, it is focused, otherwise the cell itself is focused.\n  const focusCell = () => {\n    if (!ref.current) {\n      return;\n    }\n\n    // If there's a pending selection state, apply it to this cell's row.\n    // If this cell is a header cell, `onSelectionToggle` will be undefined, but we still want to clear the pending selection state.\n    if (pendingRowSelectionState !== undefined) {\n      onSelectionToggle?.(pendingRowSelectionState);\n      setPendingRowSelectionState(undefined);\n    }\n\n    // If focus is already on a focusable child within the cell, early return so we don't shift focus\n    if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {\n      return;\n    }\n\n    const treeWalker = getFocusableTreeWalker(ref.current);\n    const focusable = tableFocus.childFocusStrategy === 'last' ? treeWalker.lastChild() : treeWalker.firstChild();\n\n    if (focusable) {\n      // Cell has focusable children, focus the child\n      focusTableChild(focusable as FocusableElement);\n    } else if (!ref.current.contains(document.activeElement)) {\n      // Cell has no focusable children and current focus is outside of the cell, focus the cell itself\n      focusTableChild(ref.current);\n    } else if (ref.current === document.activeElement && !isTabbable) {\n      // Focus is on the current cell, but table focus is elsewhere, update table focus state\n      tableFocus.setFocus(rowKey, columnKey);\n    }\n  };\n\n  // Focus the cell DOM node when table focus moves to this cell\n  useLayoutEffect(() => {\n    if (isTabbable && !ref.current!.contains(document.activeElement)) {\n      focusCell();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref, isTabbable]);\n\n  const resetIfFocused = useEffectEvent(() => {\n    if (isTabbable) {\n      tableFocus.setFocus('', '');\n    }\n  });\n\n  // Reset table focus when the focused cell unmounts\n  useEffect(\n    () => () => {\n      resetIfFocused();\n    },\n    [resetIfFocused],\n  );\n\n  const onFocus: FocusEventHandler = (e) => {\n    // Ignore focus events bubbling through portals\n    if (!e.currentTarget.contains(e.target)) {\n      return;\n    }\n\n    // If cell is already focused, return early.\n    // However, if focus happens as a result of a press, we need to re-run the child-focusing logic,\n    // otherwise `useFocusRing` will force the cell itself to become focused.\n    if (e.currentTarget.contains(e.relatedTarget) && isFocusVisible()) {\n      return;\n    }\n\n    // There are 3 scenarios for why a cell might receive focus:\n    // - focus happens through a press, we need to update table focus state to the current cell\n    // - focus happens through arrow key navigation within the table,\n    //   we do nothing as table focus state would have already been updated earlier\n    // - focus happens through tabbing into the table from outside,\n    //   we do nothing because we want to restore focus to the previously focused cell,\n    //   and overriding table focus state would make that impossible\n    if (!isFocusVisible()) {\n      tableFocus.setFocus(rowKey, columnKey);\n    }\n\n    if (e.target === ref.current) {\n      // If the cell itself receives focus, wait a frame so that focus finishes propagating\n      // up to the tree, and move focus to a focusable child if possible.\n      requestAnimationFrame(() => {\n        if (document.activeElement === ref.current) {\n          focusCell();\n        }\n      });\n    }\n  };\n\n  // Handles keyboard navigation between focusable children within the cell.\n  const onKeyDownCapture: KeyboardEventHandler = (e) => {\n    // Ignore keyboard events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {\n      return;\n    }\n\n    const walker = getFocusableTreeWalker(ref.current);\n    walker.currentNode = document.activeElement;\n\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n      // Move to the previous/next focusable element within the cell\n      const childElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n\n      if (childElementToFocus && childElementToFocus !== ref.current) {\n        focusTableChild(childElementToFocus as FocusableElement);\n      } else {\n        // If there is no previous/next focusable element within the current cell, focus should move to the previous/next cell.\n        // This is handled by `useTable`, so we need to let the event bubble up to it.\n        // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n        // Solution: re-dispatch the event from a parent element of the current cell.\n        ref.current.parentElement!.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n      }\n    } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      // Move to the previous/next cell in the current column.\n      // This is handled by `useTable`, so we need to let the event bubble up to it.\n      // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n      // Solution: re-dispatch the event from a parent element of the current cell.\n      ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n    } else {\n      // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const customProps: NativeElementProps<HTMLTableCellElement> = {\n    tabIndex: isTabbable ? 0 : -1,\n    onFocus,\n    onKeyDownCapture,\n    'data-cell-row-key': rowKey,\n    'data-cell-column-key': columnKey,\n    'data-focused': isFocused || undefined,\n  };\n\n  return {\n    cellProps: mergeProps(focusProps, customProps),\n  };\n}\n"]}
+{"version":3,"file":"use-table-cell.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker, useFocusRing } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { mergeProps, useEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { type KeyboardEventHandler, type FocusEventHandler, type RefObject, useEffect } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { useTableFocus } from '../contexts/focus.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTableCell {\n  cellProps: NativeElementProps<HTMLTableCellElement>;\n}\n\nexport function useTableCell(\n  ref: RefObject<HTMLTableCellElement | null>,\n  rowKey: string,\n  columnKey: string,\n): UseTableCell {\n  const tableFocus = useTableFocus();\n  const { pendingRowSelectionState, setPendingRowSelectionState } = useTableState();\n  const { onSelectionToggle } = useTableRowState();\n\n  const { focusProps, isFocusVisible: isCellFocusVisible } = useFocusRing();\n\n  const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;\n\n  // Handles focusing the cell.\n  // If there is a focusable child, it is focused, otherwise the cell itself is focused.\n  const focusCell = () => {\n    if (!ref.current) {\n      return;\n    }\n\n    // If there's a pending selection state, apply it to this cell's row.\n    // If this cell is a header cell, `onSelectionToggle` will be undefined, but we still want to clear the pending selection state.\n    if (pendingRowSelectionState !== undefined) {\n      onSelectionToggle?.(pendingRowSelectionState);\n      setPendingRowSelectionState(undefined);\n    }\n\n    // If focus is already on a focusable child within the cell, early return so we don't shift focus\n    if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {\n      return;\n    }\n\n    const treeWalker = getFocusableTreeWalker(ref.current);\n    const focusable = tableFocus.childFocusStrategy === 'last' ? treeWalker.lastChild() : treeWalker.firstChild();\n\n    if (focusable) {\n      // Cell has focusable children, focus the child\n      focusTableChild(focusable as FocusableElement);\n    } else if (!ref.current.contains(document.activeElement)) {\n      // Cell has no focusable children and current focus is outside of the cell, focus the cell itself\n      focusTableChild(ref.current);\n    } else if (ref.current === document.activeElement && !isTabbable) {\n      // Focus is on the current cell, but table focus is elsewhere, update table focus state\n      tableFocus.setFocus(rowKey, columnKey);\n    }\n  };\n\n  // Focus the cell DOM node when table focus moves to this cell\n  useLayoutEffect(() => {\n    if (isTabbable && !ref.current!.contains(document.activeElement)) {\n      focusCell();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref, isTabbable]);\n\n  const resetIfFocused = useEffectEvent(() => {\n    if (isTabbable) {\n      tableFocus.setFocus('', '');\n    }\n  });\n\n  // Reset table focus when the focused cell unmounts\n  useEffect(\n    () => () => {\n      resetIfFocused();\n    },\n    [resetIfFocused],\n  );\n\n  const onFocus: FocusEventHandler = (e) => {\n    // Ignore focus events bubbling through portals\n    if (!e.currentTarget.contains(e.target)) {\n      return;\n    }\n\n    // If cell is already focused, return early.\n    // However, if focus happens as a result of a press, we need to re-run the child-focusing logic,\n    // otherwise `useFocusRing` will force the cell itself to become focused.\n    if (e.currentTarget.contains(e.relatedTarget) && isFocusVisible()) {\n      return;\n    }\n\n    // There are 3 scenarios for why a cell might receive focus:\n    // - focus happens through a press, we need to update table focus state to the current cell\n    // - focus happens through arrow key navigation within the table,\n    //   we do nothing as table focus state would have already been updated earlier\n    // - focus happens through tabbing into the table from outside,\n    //   we do nothing because we want to restore focus to the previously focused cell,\n    //   and overriding table focus state would make that impossible\n    if (!isFocusVisible()) {\n      tableFocus.setFocus(rowKey, columnKey);\n    }\n\n    if (e.target === ref.current) {\n      // If the cell itself receives focus, wait a frame so that focus finishes propagating\n      // up to the tree, and move focus to a focusable child if possible.\n      requestAnimationFrame(() => {\n        if (document.activeElement === ref.current) {\n          focusCell();\n        }\n      });\n    }\n  };\n\n  // Handles keyboard navigation between focusable children within the cell.\n  const onKeyDownCapture: KeyboardEventHandler = (e) => {\n    // Ignore keyboard events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {\n      return;\n    }\n\n    const walker = getFocusableTreeWalker(ref.current);\n    walker.currentNode = document.activeElement;\n\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n      // Move to the previous/next focusable element within the cell\n      const childElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n\n      if (childElementToFocus && childElementToFocus !== ref.current) {\n        focusTableChild(childElementToFocus as FocusableElement);\n      } else {\n        // If there is no previous/next focusable element within the current cell, focus should move to the previous/next cell.\n        // This is handled by `useTable`, so we need to let the event bubble up to it.\n        // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n        // Solution: re-dispatch the event from a parent element of the current cell.\n        ref.current.parentElement!.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n      }\n    } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      // Move to the previous/next cell in the current column.\n      // This is handled by `useTable`, so we need to let the event bubble up to it.\n      // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n      // Solution: re-dispatch the event from a parent element of the current cell.\n      ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n    } else {\n      // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const customProps: NativeElementProps<HTMLTableCellElement> = {\n    tabIndex: isTabbable ? 0 : -1,\n    onFocus,\n    onKeyDownCapture,\n    'data-cell-row-key': rowKey,\n    'data-cell-column-key': columnKey,\n    'data-focus-visible': isCellFocusVisible || undefined,\n  };\n\n  return {\n    cellProps: mergeProps(focusProps, customProps),\n  };\n}\n"]}

package/dist/esm/components/table/table-empty-state.js

@@ -24,7 +24,7 @@ function TableEmptyStateInner({ props: { UNSAFE_className, UNSAFE_style, title,
     // `useTableCell` requires `TableRowStateProvider`
     const { cellProps } = useTableCell(cellRef, rowKey, columnKey);
     const columnData = useColumnData(columnKey);
-    return (_jsx("tr", { children: _jsx("td", { ...mergeProps(props, cellProps), ref: cellRef, className: clsx('cim-table-empty-state', UNSAFE_className), style: UNSAFE_style, "aria-colindex": columnData?.number, colSpan: colSpan, "data-alignment": "center", children: _jsxs("div", { className: "cim-table-empty-state-content", children: [_jsx(Text, { as: "span", variant: "title-6", tone: "title", children: title }), _jsx(Text, { as: "span", variant: "medium", tone: "base", children: description }), action && _jsx("div", { className: "cim-table-empty-state-action", children: action })] }) }) }, "__cim__internal__empty-state__"));
+    return (_jsx("tr", { children: _jsx("td", { ...mergeProps(props, cellProps), ref: cellRef, className: clsx('cim-table-empty-state', UNSAFE_className), style: UNSAFE_style, "aria-colindex": columnData?.number, colSpan: colSpan, "data-alignment": "center", children: _jsxs("div", { className: "cim-table-empty-state-content", children: [_jsx(Text, { as: "span", variant: "title-6", tone: "base", children: title }), _jsx(Text, { as: "span", variant: "medium", tone: "base", children: description }), action && _jsx("div", { className: "cim-table-empty-state-action", children: action })] }) }) }, "__cim__internal__empty-state__"));
 }
 export { _TableEmptyState as TableEmptyState };
 //# sourceMappingURL=table-empty-state.js.map

package/dist/esm/components/table/table-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-empty-state.js","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAWzD,SAAS,eAAe,CAAC,KAA2B,EAAE,GAAuC;IAC3F,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GACnC,CACzB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,UAAU,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAOxE,SAAS,oBAAoB,CAAC,EAC5B,KAAK,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAC/E,YAAY,GACc;IAC1B,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC1D,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,uBACE,gBACM,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,EAC1D,KAAK,EAAE,YAAY,mBACJ,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,eAAK,SAAS,EAAC,+BAA+B,aAC5C,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,YAC3C,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACzC,WAAW,GACP,EAEN,MAAM,IAAI,cAAK,SAAS,EAAC,8BAA8B,YAAE,MAAM,GAAO,IACnE,GACH,IArBC,gCAAgC,CAsBnC,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId, useObjectRef } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { useColumnData, useEmptyStateCell } from './contexts/column-collection.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableEmptyStateProps extends CommonProps {\n  /** The title of the empty state. */\n  title: string;\n  /** The description of the empty state. */\n  description: string;\n  /** An optional action button displayed within the empty state. */\n  action?: ReactNode;\n}\n\nfunction TableEmptyState(props: TableEmptyStateProps, ref: ForwardedRef<HTMLTableCellElement>) {\n  const rowKey = useId();\n\n  return (\n    <TableRowStateProvider rowKey={rowKey}>\n      <TableEmptyStateInner props={props} forwardedRef={ref} />\n    </TableRowStateProvider>\n  );\n}\n\n/**\n * Renders an empty state within a table that has no data.\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 _TableEmptyState = forwardRef(TableEmptyState, 'TableEmptyState');\n\ninterface TableEmptyStateInnerProps {\n  props: TableEmptyStateProps;\n  forwardedRef: ForwardedRef<HTMLTableCellElement>;\n}\n\nfunction TableEmptyStateInner({\n  props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props },\n  forwardedRef,\n}: TableEmptyStateInnerProps) {\n  const cellRef = useObjectRef(forwardedRef);\n  const { columnKey, colSpan } = useEmptyStateCell(cellRef);\n  const { rowKey } = useTableRowState();\n  // `useTableCell` requires `TableRowStateProvider`\n  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n  const columnData = useColumnData(columnKey);\n\n  return (\n    <tr key=\"__cim__internal__empty-state__\">\n      <td\n        {...mergeProps(props, cellProps)}\n        ref={cellRef}\n        className={clsx('cim-table-empty-state', UNSAFE_className)}\n        style={UNSAFE_style}\n        aria-colindex={columnData?.number}\n        colSpan={colSpan}\n        data-alignment=\"center\"\n      >\n        <div className=\"cim-table-empty-state-content\">\n          <Text as=\"span\" variant=\"title-6\" tone=\"title\">\n            {title}\n          </Text>\n\n          <Text as=\"span\" variant=\"medium\" tone=\"base\">\n            {description}\n          </Text>\n\n          {action && <div className=\"cim-table-empty-state-action\">{action}</div>}\n        </div>\n      </td>\n    </tr>\n  );\n}\n\nexport { _TableEmptyState as TableEmptyState };\n"]}
+{"version":3,"file":"table-empty-state.js","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAWzD,SAAS,eAAe,CAAC,KAA2B,EAAE,GAAuC;IAC3F,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GACnC,CACzB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,UAAU,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAOxE,SAAS,oBAAoB,CAAC,EAC5B,KAAK,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAC/E,YAAY,GACc;IAC1B,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC1D,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,uBACE,gBACM,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,EAC1D,KAAK,EAAE,YAAY,mBACJ,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,eAAK,SAAS,EAAC,+BAA+B,aAC5C,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC1C,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACzC,WAAW,GACP,EAEN,MAAM,IAAI,cAAK,SAAS,EAAC,8BAA8B,YAAE,MAAM,GAAO,IACnE,GACH,IArBC,gCAAgC,CAsBnC,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId, useObjectRef } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { useColumnData, useEmptyStateCell } from './contexts/column-collection.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableEmptyStateProps extends CommonProps {\n  /** The title of the empty state. */\n  title: string;\n  /** The description of the empty state. */\n  description: string;\n  /** An optional action button displayed within the empty state. */\n  action?: ReactNode;\n}\n\nfunction TableEmptyState(props: TableEmptyStateProps, ref: ForwardedRef<HTMLTableCellElement>) {\n  const rowKey = useId();\n\n  return (\n    <TableRowStateProvider rowKey={rowKey}>\n      <TableEmptyStateInner props={props} forwardedRef={ref} />\n    </TableRowStateProvider>\n  );\n}\n\n/**\n * Renders an empty state within a table that has no data.\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 _TableEmptyState = forwardRef(TableEmptyState, 'TableEmptyState');\n\ninterface TableEmptyStateInnerProps {\n  props: TableEmptyStateProps;\n  forwardedRef: ForwardedRef<HTMLTableCellElement>;\n}\n\nfunction TableEmptyStateInner({\n  props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props },\n  forwardedRef,\n}: TableEmptyStateInnerProps) {\n  const cellRef = useObjectRef(forwardedRef);\n  const { columnKey, colSpan } = useEmptyStateCell(cellRef);\n  const { rowKey } = useTableRowState();\n  // `useTableCell` requires `TableRowStateProvider`\n  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n  const columnData = useColumnData(columnKey);\n\n  return (\n    <tr key=\"__cim__internal__empty-state__\">\n      <td\n        {...mergeProps(props, cellProps)}\n        ref={cellRef}\n        className={clsx('cim-table-empty-state', UNSAFE_className)}\n        style={UNSAFE_style}\n        aria-colindex={columnData?.number}\n        colSpan={colSpan}\n        data-alignment=\"center\"\n      >\n        <div className=\"cim-table-empty-state-content\">\n          <Text as=\"span\" variant=\"title-6\" tone=\"base\">\n            {title}\n          </Text>\n\n          <Text as=\"span\" variant=\"medium\" tone=\"base\">\n            {description}\n          </Text>\n\n          {action && <div className=\"cim-table-empty-state-action\">{action}</div>}\n        </div>\n      </td>\n    </tr>\n  );\n}\n\nexport { _TableEmptyState as TableEmptyState };\n"]}

package/dist/esm/components/table/table-header-button.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table-header-button.d.ts.map

package/dist/esm/components/table/table-header-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-button.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-button.tsx"],"names":[],"mappings":""}

package/dist/esm/components/table/table-header-button.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Button as RACButton } from 'react-aria-components';
+/**
+ * @internal
+ */
+export function TableHeaderButton({ UNSAFE_className, UNSAFE_style, icon, ...props }) {
+    return (_jsx(RACButton, { ...props, className: clsx('cim-table-header-button', UNSAFE_className), style: UNSAFE_style, children: icon }));
+}
+//# sourceMappingURL=table-header-button.js.map

package/dist/esm/components/table/table-header-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-button.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-button.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAsC,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAQhG;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,KAAK,EAA0B;IAC1G,OAAO,CACL,KAAC,SAAS,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,yBAAyB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACpG,IAAI,GACK,CACb,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport { type ButtonProps as RACButtonProps, Button as RACButton } from 'react-aria-components';\nimport type { CommonProps, LabellableProps } from '../types.js';\n\ninterface TableHeaderButtonProps extends CommonProps, Omit<LabellableProps, 'label'>, Pick<RACButtonProps, 'onPress'> {\n  /** The icon displayed within the button. */\n  icon: ReactNode;\n}\n\n/**\n * @internal\n */\nexport function TableHeaderButton({ UNSAFE_className, UNSAFE_style, icon, ...props }: TableHeaderButtonProps) {\n  return (\n    <RACButton {...props} className={clsx('cim-table-header-button', UNSAFE_className)} style={UNSAFE_style}>\n      {icon}\n    </RACButton>\n  );\n}\n"]}

package/dist/esm/components/table/table-header-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,KAAK,sBAAsB,EAAyB,MAAM,iCAAiC,CAAC;AAIrG,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gDAAgD;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAoFD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,2HAAiD,CAAC;AAExE,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}
+{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,KAAK,sBAAsB,EAAyB,MAAM,iCAAiC,CAAC;AAMrG,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gDAAgD;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAgFD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,2HAAiD,CAAC;AAExE,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}

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

@@ -1,17 +1,18 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeProps, useObjectRef } from '@react-aria/utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps, useId, useObjectRef } from '@react-aria/utils';
 import { useRef } from 'react';
-import { Button as RACButton } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { IconSortAscending, IconSortDescending, IconSortUnsorted } from '../../icons/index.js';
 import { useServerLayoutEffect } from '../../utils/use-server-layout-effect.js';
 import { useColumnRegistration } from './contexts/column-collection.js';
 import { useTableRowState } from './contexts/row-state.js';
+import { useTableState } from './contexts/table-state.js';
 import { useTableCell } from './hooks/use-table-cell.js';
+import { TableHeaderButton } from './table-header-button.js';
 const SORT_ORDER_ICONS = {
-    ascending: _jsx(IconSortAscending, { UNSAFE_className: "cim-table-sort-icon" }),
-    descending: _jsx(IconSortDescending, { UNSAFE_className: "cim-table-sort-icon" }),
+    ascending: _jsx(IconSortAscending, {}),
+    descending: _jsx(IconSortDescending, {}),
 };
 function TableHeaderCell({ children, UNSAFE_className, UNSAFE_style, columnKey, columnNumber, columnWidth, columnContentAlignment = 'start', sortOrder, onSortOrderToggle, iconStart, iconEnd, ...props }, ref) {
     const cellRef = useObjectRef(ref);
@@ -19,6 +20,8 @@ function TableHeaderCell({ children, UNSAFE_className, UNSAFE_style, columnKey,
     const { cellProps } = useTableCell(cellRef, rowKey, columnKey);
     const registerColumn = useColumnRegistration();
     const unregisterRef = useRef(null);
+    const { sortLabelId } = useTableState();
+    const contentId = useId();
     const isSortable = typeof onSortOrderToggle === 'function';
     // Columns need to be registered during SSR to prevent layout shifting on hydration
     useServerLayoutEffect(() => {
@@ -32,8 +35,7 @@ function TableHeaderCell({ children, UNSAFE_className, UNSAFE_style, columnKey,
             unregisterRef.current = null;
         };
     }, [registerColumn, columnKey, columnNumber, columnWidth, columnContentAlignment]);
-    const content = (_jsxs(_Fragment, { children: [iconStart, _jsx("span", { children: children }), iconEnd, sortOrder ? (SORT_ORDER_ICONS[sortOrder]) : isSortable ? (_jsx(IconSortUnsorted, { UNSAFE_className: "cim-table-sort-icon" })) : undefined] }));
-    return (_jsx("th", { ...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: isSortable ? (_jsx(RACButton, { className: "cim-table-sort-button cim-table-header-cell-container", onPress: () => onSortOrderToggle(), children: content })) : (_jsx("div", { className: "cim-table-header-cell-container", children: content })) }));
+    return (_jsx("th", { ...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: _jsxs("div", { className: "cim-table-header-cell-container", children: [iconStart, _jsx("span", { id: contentId, children: children }), iconEnd, isSortable ? (_jsx(TableHeaderButton, { UNSAFE_className: "cim-table-header-sort-button", "aria-labelledby": `${sortLabelId} ${contentId}`, icon: sortOrder ? SORT_ORDER_ICONS[sortOrder] : _jsx(IconSortUnsorted, {}), onPress: () => onSortOrderToggle(), "data-highlighted": !!sortOrder || undefined })) : sortOrder ? (SORT_ORDER_ICONS[sortOrder]) : undefined] }) }));
 }
 /**
  * Renders a header cell within a table header row.

package/dist/esm/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, useObjectRef } from '@react-aria/utils';\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\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 { useTableCell } from './hooks/use-table-cell.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 UNSAFE_className=\"cim-table-sort-icon\" />,\n  descending: <IconSortDescending UNSAFE_className=\"cim-table-sort-icon\" />,\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 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  const content = (\n    <>\n      {iconStart}\n      <span>{children}</span>\n      {iconEnd}\n      {sortOrder ? (\n        SORT_ORDER_ICONS[sortOrder]\n      ) : isSortable ? (\n        <IconSortUnsorted UNSAFE_className=\"cim-table-sort-icon\" />\n      ) : undefined}\n    </>\n  );\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      {isSortable ? (\n        <RACButton\n          className=\"cim-table-sort-button cim-table-header-cell-container\"\n          onPress={() => onSortOrderToggle()}\n        >\n          {content}\n        </RACButton>\n      ) : (\n        <div className=\"cim-table-header-cell-container\">{content}</div>\n      )}\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 { 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"]}

package/dist/esm/components/table/table.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { AriaLabelingProps, CommonProps } from '../types.js';
 import { type RowSelectionMode } from './contexts/table-state.js';
 export interface TableProps extends CommonProps, AriaLabelingProps {

package/dist/esm/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,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,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;CACtD;AAqED;;;;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":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,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;CACtD;AAqED;;;;GAIG;AACH,QAAA,MAAM,MAAM,6GAA6B,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/esm/components/table/table.js

@@ -1,15 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { mergeProps, useObjectRef } from '@react-aria/utils';
-import { useEffect } from 'react';
 import { forwardRef } from '../../forward-ref.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
 import { ColumnCollectionProvider } from './contexts/column-collection.js';
 import { TableFocusProvider } from './contexts/focus.js';
 import { TableStateProvider, useTableState } from './contexts/table-state.js';
 import { useTable } from './hooks/use-table.js';
 function Table({ rowSelectionMode = 'none', areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    useEffect(() => {
+    useProductionWarning(() => {
         if (!ariaLabel && !ariaLabelledBy) {
             console.warn('Table requires one of aria-label / aria-labelledby for accessibility');
         }

package/dist/esm/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,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAqC,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAyB,kBAAkB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrG,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AA+ChD,SAAS,KAAK,CACZ,EACE,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,SAAS,CAAC,GAAG,EAAE;QACb,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,KAAC,kBAAkB,cACjB,KAAC,kBAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,wBAAwB,EAAE,wBAAwB,YAElD,MAAC,wBAAwB,eACvB,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,IAC9B,GACR,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,YAAY,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAE7C,OAAO,CACL,mBACM,UAAU,CAAC,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,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { useEffect, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ColumnCollectionProvider } from './contexts/column-collection.js';\nimport { TableFocusProvider } from './contexts/focus.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\nfunction Table(\n  {\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  useEffect(() => {\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        <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      </TableStateProvider>\n    </TableFocusProvider>\n  );\n}\n\ninterface TableInnerProps {\n  props: Omit<\n    TableProps,\n    '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;;AAEb,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAE7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAyB,kBAAkB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrG,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AA+ChD,SAAS,KAAK,CACZ,EACE,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,oBAAoB,CAAC,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,KAAC,kBAAkB,cACjB,KAAC,kBAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,wBAAwB,EAAE,wBAAwB,YAElD,MAAC,wBAAwB,eACvB,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,IAC9B,GACR,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,YAAY,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAE7C,OAAO,CACL,mBACM,UAAU,CAAC,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,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","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 { 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\nfunction Table(\n  {\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        <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      </TableStateProvider>\n    </TableFocusProvider>\n  );\n}\n\ninterface TableInnerProps {\n  props: Omit<\n    TableProps,\n    '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/esm/components/tabs/tabs.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { type TabsProps as RACTabsProps, type TabProps as RACTabProps } from 'react-aria-components';
+import type { AriaLabelingProps, CollectionItem, CollectionProps, CommonProps, Key, StringLikeChildren } from '../types.js';
+export interface TabsProps extends CommonProps, AriaLabelingProps, Pick<RACTabsProps, 'selectedKey' | 'defaultSelectedKey' | 'disabledKeys' | 'onSelectionChange'> {
+    /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */
+    children: ReactNode;
+}
+/**
+ * Organizes content into multiple sections that users can switch between.
+ *
+ * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).
+ */
+declare const _Tabs: (props: TabsProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Tabs as Tabs };
+export interface TabListProps<T extends CollectionItem> extends CollectionProps<T> {
+}
+/** Renders a collection of `Tab` components within `Tabs`. */
+export declare function TabList<T extends CollectionItem>({ children, ...props }: TabListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabList {
+    var displayName: string;
+}
+export interface TabProps extends Pick<RACTabProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+    /** The text to display as the tab title. */
+    children: StringLikeChildren;
+    /** An icon displayed before the tab title. */
+    iconStart?: ReactNode;
+    /** A badge displayed after the tab title. */
+    badge?: ReactNode;
+}
+/** Renders a single tab within `TabList`. */
+export declare function Tab({ children, iconStart, badge, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tab {
+    var displayName: string;
+}
+export interface TabPanelsProps<T extends CollectionItem> extends CollectionProps<T> {
+}
+/** Renders a collection of `TabPanel` components within `Tabs`. */
+export declare function TabPanels<T extends CollectionItem>({ ...props }: TabPanelsProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabPanels {
+    var displayName: string;
+}
+export interface TabPanelProps {
+    /** The content to display in the tab panel. */
+    children: ReactNode;
+    /** The unique id of the associated tab. */
+    id?: Key;
+}
+/** Renders a single tab panel within `TabPanels`. */
+export declare function TabPanel({ children, id, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabPanel {
+    var displayName: string;
+}
+//# sourceMappingURL=tabs.d.ts.map

package/dist/esm/components/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAML,KAAK,SAAS,IAAI,YAAY,EAC9B,KAAK,QAAQ,IAAI,WAAW,EAC7B,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,WAAW,EACX,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AASrB,MAAM,WAAW,SACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,YAAY,EAAE,aAAa,GAAG,oBAAoB,GAAG,cAAc,GAAG,mBAAmB,CAAC;IACjG,mGAAmG;IACnG,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgDD;;;;GAIG;AACH,QAAA,MAAM,KAAK,2JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;CAAG;AAErF,8DAA8D;AAC9D,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,2CAqBxF;yBArBe,OAAO;;;AAyBvB,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACtG,4CAA4C;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,6CAA6C;AAC7C,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAUrE;yBAVe,GAAG;;;AAcnB,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;CAAG;AAEvF,mEAAmE;AACnE,wBAAgB,SAAS,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,2CAElF;yBAFe,SAAS;;;AAMzB,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAG3C,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAED,qDAAqD;AACrD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAWjE;yBAXe,QAAQ"}

package/dist/esm/components/tabs/tabs.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { createContext, useContext } from 'react';
+import { Collection as RACCollection, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, Tabs as RACTabs, } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { Text } from '../typography/text.js';
+const TabsContext = createContext({});
+function Tabs({ children, UNSAFE_className, UNSAFE_style, 
+// Aria labeling props
+'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, ...props }, ref) {
+    useProductionWarning(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('Tabs requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    return (_jsx(TabsContext.Provider, { value: {
+            tabsProps: {
+                'aria-label': ariaLabel,
+                'aria-labelledby': ariaLabelledBy,
+                'aria-describedby': ariaDescribedBy,
+                'aria-details': ariaDetails,
+            },
+        }, children: _jsx(RACTabs, { ...props, ref: ref, className: clsx('cim-tabs', UNSAFE_className), style: UNSAFE_style, keyboardActivation: "manual", children: children }) }));
+}
+/**
+ * Organizes content into multiple sections that users can switch between.
+ *
+ * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).
+ */
+const _Tabs = withStyleProps(forwardRef(Tabs), 'Tabs');
+export { _Tabs as Tabs };
+/** Renders a collection of `Tab` components within `Tabs`. */
+export function TabList({ children, ...props }) {
+    const { tabsProps } = useContext(TabsContext);
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, } = tabsProps ?? {};
+    return (_jsx(RACTabList, { ...props, className: "cim-tab-list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, children: children }));
+}
+TabList.displayName = 'TabList';
+/** Renders a single tab within `TabList`. */
+export function Tab({ children, iconStart, badge, ...props }) {
+    return (_jsxs(RACTab, { ...props, className: "cim-tab-item", children: [iconStart, _jsx(Text, { as: "span", variant: "medium-semibold", alignment: "center", children: children }), badge] }));
+}
+Tab.displayName = 'Tab';
+/** Renders a collection of `TabPanel` components within `Tabs`. */
+export function TabPanels({ ...props }) {
+    return _jsx(RACCollection, { ...props });
+}
+TabPanels.displayName = 'TabPanels';
+/** Renders a single tab panel within `TabPanels`. */
+export function TabPanel({ children, id, ...props }) {
+    return (_jsx(RACTabPanel, { ...props, className: "cim-tab-panel", 
+        // @ts-expect-error -- https://github.com/adobe/react-spectrum/issues/8422
+        id: id, children: children }));
+}
+TabPanel.displayName = 'TabPanel';
+//# sourceMappingURL=tabs.js.map

package/dist/esm/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { createContext, useContext, type ForwardedRef, type ReactNode } from 'react';\nimport {\n  Collection as RACCollection,\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  type TabsProps as RACTabsProps,\n  type TabProps as RACTabProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type {\n  AriaLabelingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\n\ninterface TabsContextValue {\n  tabsProps?: AriaLabelingProps;\n}\n\nconst TabsContext = createContext<TabsContextValue>({});\n\nexport interface TabsProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<RACTabsProps, 'selectedKey' | 'defaultSelectedKey' | 'disabledKeys' | 'onSelectionChange'> {\n  /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */\n  children: ReactNode;\n}\n\nfunction Tabs(\n  {\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n\n    // Aria labeling props\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n\n    ...props\n  }: TabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  useProductionWarning(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('Tabs requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  return (\n    <TabsContext.Provider\n      value={{\n        tabsProps: {\n          'aria-label': ariaLabel,\n          'aria-labelledby': ariaLabelledBy,\n          'aria-describedby': ariaDescribedBy,\n          'aria-details': ariaDetails,\n        },\n      }}\n    >\n      <RACTabs\n        {...props}\n        ref={ref}\n        className={clsx('cim-tabs', UNSAFE_className)}\n        style={UNSAFE_style}\n        keyboardActivation=\"manual\"\n      >\n        {children}\n      </RACTabs>\n    </TabsContext.Provider>\n  );\n}\n\n/**\n * Organizes content into multiple sections that users can switch between.\n *\n * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).\n */\nconst _Tabs = withStyleProps(forwardRef(Tabs), 'Tabs');\n\nexport { _Tabs as Tabs };\n\nexport interface TabListProps<T extends CollectionItem> extends CollectionProps<T> {}\n\n/** Renders a collection of `Tab` components within `Tabs`. */\nexport function TabList<T extends CollectionItem>({ children, ...props }: TabListProps<T>) {\n  const { tabsProps } = useContext(TabsContext);\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n  } = tabsProps ?? {};\n\n  return (\n    <RACTabList\n      {...props}\n      className=\"cim-tab-list\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-details={ariaDetails}\n    >\n      {children}\n    </RACTabList>\n  );\n}\n\nTabList.displayName = 'TabList';\n\nexport interface TabProps extends Pick<RACTabProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The text to display as the tab title. */\n  children: StringLikeChildren;\n  /** An icon displayed before the tab title. */\n  iconStart?: ReactNode;\n  /** A badge displayed after the tab title. */\n  badge?: ReactNode;\n}\n\n/** Renders a single tab within `TabList`. */\nexport function Tab({ children, iconStart, badge, ...props }: TabProps) {\n  return (\n    <RACTab {...props} className=\"cim-tab-item\">\n      {iconStart}\n      <Text as=\"span\" variant=\"medium-semibold\" alignment=\"center\">\n        {children}\n      </Text>\n      {badge}\n    </RACTab>\n  );\n}\n\nTab.displayName = 'Tab';\n\nexport interface TabPanelsProps<T extends CollectionItem> extends CollectionProps<T> {}\n\n/** Renders a collection of `TabPanel` components within `Tabs`. */\nexport function TabPanels<T extends CollectionItem>({ ...props }: TabPanelsProps<T>) {\n  return <RACCollection {...props} />;\n}\n\nTabPanels.displayName = 'TabPanels';\n\nexport interface TabPanelProps {\n  /** The content to display in the tab panel. */\n  children: ReactNode;\n  /** The unique id of the associated tab. */\n  // `id` is not typed correctly in `react-aria-components`\n  // https://github.com/adobe/react-spectrum/issues/8422\n  id?: Key;\n}\n\n/** Renders a single tab panel within `TabPanels`. */\nexport function TabPanel({ children, id, ...props }: TabPanelProps) {\n  return (\n    <RACTabPanel\n      {...props}\n      className=\"cim-tab-panel\"\n      // @ts-expect-error -- https://github.com/adobe/react-spectrum/issues/8422\n      id={id}\n    >\n      {children}\n    </RACTabPanel>\n  );\n}\n\nTabPanel.displayName = 'TabPanel';\n"]}

package/dist/esm/components/tag/tag-group.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { type TagGroupProps as RACTagGroupProps, type TagListProps as RACTagListProps } from 'react-aria-components';
 import type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';
-export interface TagGroupProps<T extends CollectionItem = CollectionItem> extends CommonProps, Omit<FieldProps<Key[]>, 'validate' | 'error'>, Pick<RACTagGroupProps, 'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'>, Pick<RACTagListProps<T>, 'children' | 'items'> {
+export interface TagGroupProps<T extends CollectionItem = CollectionItem> extends CommonProps, Omit<FieldProps<Key[]>, 'validate' | 'error' | 'name'>, Pick<RACTagGroupProps, 'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'>, Pick<RACTagListProps<T>, 'children' | 'items'> {
     /** Whether the tag group is required. */
     isRequired?: boolean;
     /** The error message to display. */

package/dist/esm/components/tag/tag-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEhF,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EAEjB,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EAC7C,IAAI,CACF,gBAAgB,EAChB,eAAe,GAAG,qBAAqB,GAAG,cAAc,GAAG,cAAc,GAAG,mBAAmB,GAAG,UAAU,CAC7G,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChD,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,SAAS,CAAC;CACpC;AAwCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA3CG,CAAC,SAAS,cAAc,iKA2CwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEhF,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EAEjB,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC,EACtD,IAAI,CACF,gBAAgB,EAChB,eAAe,GAAG,qBAAqB,GAAG,cAAc,GAAG,cAAc,GAAG,mBAAmB,GAAG,UAAU,CAC7G,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChD,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,SAAS,CAAC;CACpC;AAwCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA3CG,CAAC,SAAS,cAAc,iKA2CwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}

package/dist/esm/components/tag/tag-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-group.js","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,OAAO,IAAI,UAAU,GAGtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAsBhH,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,IAAI,KAAK,CAAC,aAAa,IAAI,IAAI,IAAI,KAAK,CAAC,aAAa,KAAK,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC;QAC5F,OAAO,CAAC,KAAK,CAAC,yFAAyF,CAAC,CAAC;IAC3G,CAAC;IAED,OAAO,CACL,MAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,eACR,IAAI,aAEf,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,YAAG,KAAK,GAAkB,EAChE,KAAC,UAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,YACxF,QAAQ,GACE,EACZ,KAAK,IAAI,KAAC,kBAAkB,cAAE,KAAK,GAAsB,EAC1D,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC9C,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  TagGroup as RACTagGroup,\n  TagList as RACTagList,\n  type TagGroupProps as RACTagGroupProps,\n  type TagListProps as RACTagListProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldErrorText, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';\n\nexport interface TagGroupProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    // `TagGroup` doesn't support `validate` or `error` because it's not a form field\n    Omit<FieldProps<Key[]>, 'validate' | 'error'>,\n    Pick<\n      RACTagGroupProps,\n      'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'\n    >,\n    Pick<RACTagListProps<T>, 'children' | 'items'> {\n  /** Whether the tag group is required. */\n  isRequired?: boolean;\n  /** The error message to display. */\n  error?: string;\n  /** The size of the tags. */\n  size?: 'medium' | 'large';\n  /** Provides content to display when there are no tags in the group. */\n  renderEmptyState?: () => ReactNode;\n}\n\nfunction TagGroup<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    children,\n    isRequired,\n    items,\n    renderEmptyState,\n    size = 'medium',\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TagGroupProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  if (props.selectionMode != null && props.selectionMode !== 'none' && props.onRemove != null) {\n    console.error('`onRemove` is not supported when `selectionMode` is set to anything other than `\"none\"`');\n  }\n\n  return (\n    <RACTagGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag-group', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-size={size}\n    >\n      <FormFieldLabel isRequired={isRequired}>{label}</FormFieldLabel>\n      <RACTagList className=\"cim-tag-group-list\" items={items} renderEmptyState={renderEmptyState}>\n        {children}\n      </RACTagList>\n      {error && <FormFieldErrorText>{error}</FormFieldErrorText>}\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACTagGroup>\n  );\n}\n\n/**\n * Displays a group of tags. Allows for selecting or removing tags.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _TagGroup = withStyleProps(forwardRef(TagGroup), 'TagGroup');\n\nexport { _TagGroup as TagGroup };\n"]}
+{"version":3,"file":"tag-group.js","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,OAAO,IAAI,UAAU,GAGtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAsBhH,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,IAAI,KAAK,CAAC,aAAa,IAAI,IAAI,IAAI,KAAK,CAAC,aAAa,KAAK,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC;QAC5F,OAAO,CAAC,KAAK,CAAC,yFAAyF,CAAC,CAAC;IAC3G,CAAC;IAED,OAAO,CACL,MAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,eACR,IAAI,aAEf,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,YAAG,KAAK,GAAkB,EAChE,KAAC,UAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,YACxF,QAAQ,GACE,EACZ,KAAK,IAAI,KAAC,kBAAkB,cAAE,KAAK,GAAsB,EAC1D,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC9C,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  TagGroup as RACTagGroup,\n  TagList as RACTagList,\n  type TagGroupProps as RACTagGroupProps,\n  type TagListProps as RACTagListProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldErrorText, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';\n\nexport interface TagGroupProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    // `TagGroup` doesn't support `validate` or `error` because it's not a form field\n    Omit<FieldProps<Key[]>, 'validate' | 'error' | 'name'>,\n    Pick<\n      RACTagGroupProps,\n      'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'\n    >,\n    Pick<RACTagListProps<T>, 'children' | 'items'> {\n  /** Whether the tag group is required. */\n  isRequired?: boolean;\n  /** The error message to display. */\n  error?: string;\n  /** The size of the tags. */\n  size?: 'medium' | 'large';\n  /** Provides content to display when there are no tags in the group. */\n  renderEmptyState?: () => ReactNode;\n}\n\nfunction TagGroup<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    children,\n    isRequired,\n    items,\n    renderEmptyState,\n    size = 'medium',\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TagGroupProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  if (props.selectionMode != null && props.selectionMode !== 'none' && props.onRemove != null) {\n    console.error('`onRemove` is not supported when `selectionMode` is set to anything other than `\"none\"`');\n  }\n\n  return (\n    <RACTagGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag-group', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-size={size}\n    >\n      <FormFieldLabel isRequired={isRequired}>{label}</FormFieldLabel>\n      <RACTagList className=\"cim-tag-group-list\" items={items} renderEmptyState={renderEmptyState}>\n        {children}\n      </RACTagList>\n      {error && <FormFieldErrorText>{error}</FormFieldErrorText>}\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACTagGroup>\n  );\n}\n\n/**\n * Displays a group of tags. Allows for selecting or removing tags.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _TagGroup = withStyleProps(forwardRef(TagGroup), 'TagGroup');\n\nexport { _TagGroup as TagGroup };\n"]}

package/dist/esm/components/tag/tag.js

@@ -7,7 +7,7 @@ import { IconCloseBold } from '../../icons/index.js';
 import { withStyleProps } from '../../with-style-props.js';
 function Tag({ children, iconStart, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return (_jsx(RACTag, { ...props, ref: ref, className: clsx('cim-tag', UNSAFE_className), style: UNSAFE_style, textValue: textValue, children: ({ allowsRemoving }) => (_jsxs(_Fragment, { children: [iconStart && _jsx("div", { className: "cim-tag-icon", children: iconStart }), _jsx("span", { className: "cim-tag-text", children: children }), allowsRemoving && (_jsx(RACButton, { slot: "remove", children: _jsx(IconCloseBold, {}) }))] })) }));
+    return (_jsx(RACTag, { ...props, ref: ref, className: clsx('cim-tag', UNSAFE_className), style: UNSAFE_style, textValue: textValue, children: ({ allowsRemoving }) => (_jsxs(_Fragment, { children: [iconStart && _jsx("div", { className: "cim-tag-icon", children: iconStart }), _jsx("span", { className: "cim-tag-text", children: children }), allowsRemoving && (_jsx(RACButton, { slot: "remove", excludeFromTabOrder: true, children: _jsx(IconCloseBold, {}) }))] })) }));
 }
 /**
  * Displays a single tag within a tag group.

package/dist/esm/components/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,GAAG,IAAI,MAAM,EAAgC,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAW3D,SAAS,GAAG,CACV,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAC3E,GAA8B;IAE9B,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,KAAC,MAAM,OACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,EAC5C,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACvB,8BACG,SAAS,IAAI,cAAK,SAAS,EAAC,cAAc,YAAE,SAAS,GAAO,EAC7D,eAAM,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAQ,EAC/C,cAAc,IAAI,CACjB,KAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,YACtB,KAAC,aAAa,KAAG,GACP,CACb,IACA,CACJ,GACM,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Tag as RACTag, type TagProps as RACTagProps, Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCloseBold } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { StringLikeChildren } from '../types.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TagProps extends Omit<CommonProps, 'id'>, Pick<RACTagProps, 'id' | 'isDisabled'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** The icon to display at the start of the tag. */\n  iconStart?: ReactNode;\n}\n\nfunction Tag(\n  { children, iconStart, UNSAFE_className, UNSAFE_style, ...props }: TagProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACTag\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag', UNSAFE_className)}\n      style={UNSAFE_style}\n      textValue={textValue}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {iconStart && <div className=\"cim-tag-icon\">{iconStart}</div>}\n          <span className=\"cim-tag-text\">{children}</span>\n          {allowsRemoving && (\n            <RACButton slot=\"remove\">\n              <IconCloseBold />\n            </RACButton>\n          )}\n        </>\n      )}\n    </RACTag>\n  );\n}\n\n/**\n * Displays a single tag within a tag group.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _Tag = withStyleProps(forwardRef(Tag), 'Tag');\n\nexport { _Tag as Tag };\n"]}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,GAAG,IAAI,MAAM,EAAgC,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAW3D,SAAS,GAAG,CACV,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAC3E,GAA8B;IAE9B,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,KAAC,MAAM,OACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,EAC5C,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACvB,8BACG,SAAS,IAAI,cAAK,SAAS,EAAC,cAAc,YAAE,SAAS,GAAO,EAC7D,eAAM,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAQ,EAC/C,cAAc,IAAI,CACjB,KAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,mBAAmB,kBAC1C,KAAC,aAAa,KAAG,GACP,CACb,IACA,CACJ,GACM,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Tag as RACTag, type TagProps as RACTagProps, Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCloseBold } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { StringLikeChildren } from '../types.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TagProps extends Omit<CommonProps, 'id'>, Pick<RACTagProps, 'id' | 'isDisabled'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** The icon to display at the start of the tag. */\n  iconStart?: ReactNode;\n}\n\nfunction Tag(\n  { children, iconStart, UNSAFE_className, UNSAFE_style, ...props }: TagProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACTag\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag', UNSAFE_className)}\n      style={UNSAFE_style}\n      textValue={textValue}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {iconStart && <div className=\"cim-tag-icon\">{iconStart}</div>}\n          <span className=\"cim-tag-text\">{children}</span>\n          {allowsRemoving && (\n            <RACButton slot=\"remove\" excludeFromTabOrder>\n              <IconCloseBold />\n            </RACButton>\n          )}\n        </>\n      )}\n    </RACTag>\n  );\n}\n\n/**\n * Displays a single tag within a tag group.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _Tag = withStyleProps(forwardRef(Tag), 'Tag');\n\nexport { _Tag as Tag };\n"]}

package/dist/esm/components/tag-field/tag-field-input.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tag-field-input.d.ts.map

package/dist/esm/components/tag-field/tag-field-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field-input.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useContext } from 'react';
+import { ComboBoxStateContext as RACComboBoxStateContext, Input as RACInput, InputContext as RACInputContext, TextContext as RACTextContext, useSlottedContext, } from 'react-aria-components';
+import { textStyle } from '../typography/utils.js';
+/** @internal */
+export function TagFieldInput({ isReadOnly, isRequired, isInvalid, placeholder, onFocusChange, 'aria-describedby': ariaDescribedby, }) {
+    const comboBoxState = useContext(RACComboBoxStateContext);
+    const inputContext = useContext(RACInputContext);
+    // We use custom IDs for description and error message, so we need to manually attach them to the input
+    const { id: descriptionId } = useSlottedContext(RACTextContext, 'description');
+    const { id: errorMessageId } = useSlottedContext(RACTextContext, 'errorMessage');
+    return (_jsx(RACInputContext.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: _jsx(RACInput, { className: clsx('cim-combo-box-input', 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 }) }));
+}
+//# sourceMappingURL=tag-field-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EACL,oBAAoB,IAAI,uBAAuB,EAC/C,KAAK,IAAI,QAAQ,EACjB,YAAY,IAAI,eAAe,EAC/B,WAAW,IAAI,cAAc,EAC7B,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,aAAa,EACb,kBAAkB,EAAE,eAAe,GAQpC;IACC,MAAM,aAAa,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,uGAAuG;IACvG,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC,cAAc,EAAE,aAAa,CAAE,CAAC;IAChF,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAAE,CAAC;IAElF,OAAO,CACL,KAAC,eAAe,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,KAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,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 { 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  isReadOnly,\n  isRequired,\n  isInvalid,\n  placeholder,\n  onFocusChange,\n  'aria-describedby': ariaDescribedby,\n}: {\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        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"]}

package/dist/esm/components/tag-field/tag-field-list-box.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tag-field-list-box.d.ts.map