@cimpress-ui/react 1.8.0 → 1.8.1

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

@@ -21,13 +21,15 @@ function TagFieldListBox({ children, inputId, selectedKeys, setSelectedKeys, ite
         if (!listState || !listState.selectionManager) {
             return listState;
         }
-        // @ts-expect-error `selectionManager.state` is private
         // This is a temporary mutation before a context update, so this is fine
-        // eslint-disable-next-line react-hooks/react-compiler
+        // @ts-expect-error `selectionManager.state` is private
+        // eslint-disable-next-line react-hooks/immutability
         listState.selectionManager.state.selectionMode = 'multiple';
         // @ts-expect-error `selectionManager.state` is private
+        // eslint-disable-next-line react-hooks/immutability
         listState.selectionManager.state.selectedKeys = selectedKeys;
         // @ts-expect-error `selectionManager.state` is private
+        // eslint-disable-next-line react-hooks/immutability
         listState.selectionManager.state.setSelectedKeys = (keys) => {
             if (keys === 'all') {
                 // When the end-user presses Ctrl/Cmd + A on a list which has `selectionMode` set to `'multiple'`,
@@ -41,6 +43,7 @@ function TagFieldListBox({ children, inputId, selectedKeys, setSelectedKeys, ite
             }
         };
         // @ts-expect-error `selectionManager.state` is private
+        // eslint-disable-next-line react-hooks/immutability
         listState.selectionManager.state.disallowEmptySelection = false;
         return {
             ...listState,

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

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

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

@@ -9,6 +9,8 @@ const tag_js_1 = require("../tag/tag.js");
 /** @internal */
 function TagFieldTags({ inputId, selectedKeys, isDisabled, isReadOnly, renderEmptyState, onRemove, }) {
     const listState = (0, react_1.useContext)(react_aria_components_1.ListStateContext);
+    // The plugin doesn't see `selectedKeys` as a legitimate dependency
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     const selectedItems = (0, react_1.useMemo)(() => {
         return [...selectedKeys.values()]
             .map((key) => listState?.selectionManager.collection.getItem(key))

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

@@ -1 +1 @@
-{"version":3,"file":"tag-field-tags.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-tags.tsx"],"names":[],"mappings":";;AAcA,oCAkDC;;AAhED,iCAA4C;AAC5C,iEAM+B;AAC/B,sDAA+C;AAC/C,0CAAmD;AAInD,gBAAgB;AAChB,SAAgB,YAAY,CAA2B,EACrD,OAAO,EACP,YAAY,EACZ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAKT;IACC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,wCAAmB,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,OAAO,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC;aAC9B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;aACjE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,uBAAC,gCAAW,IACV,MAAM,EAAE;YACN,4EAA4E;YAC5E,CAAC,oCAAe,EAAE,IAAI,CAAC;YACvB,CAAC,qCAAgB,EAAE,IAAI,CAAC;YACxB,CAAC,mCAAc,EAAE,IAAI,CAAC;YACtB,CAAC,wCAAmB,EAAE,IAAI,CAAC;SAC5B,YAED,uBAAC,uBAAQ,uBACU,OAAO,EACxB,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACnD,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EACN,UAAU;gBACR,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE;oBACP,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;gBACzB,CAAC,YAGN,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,uBAAC,YAAG,IAAgB,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,UAAU,EAAG,IAAI,CAAC,KAAkB,CAAC,UAAU,YAC9E,IAAI,CAAC,SAAS,IADP,IAAI,CAAC,GAAG,CAEZ,CACP,CAAC,GACO,GACC,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport {\n  ButtonContext as RACButtonContext,\n  LabelContext as RACLabelContext,\n  ListStateContext as RACListStateContext,\n  Provider as RACProvider,\n  TextContext as RACTextContext,\n} from 'react-aria-components';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\n/** @internal */\nexport function TagFieldTags<T extends CollectionItem>({\n  inputId,\n  selectedKeys,\n  isDisabled,\n  isReadOnly,\n  renderEmptyState,\n  onRemove,\n}: Pick<TagFieldProps<T>, 'isDisabled' | 'isReadOnly' | 'renderEmptyState'> & {\n  inputId: string;\n  selectedKeys: Set<Key>;\n  onRemove: (key: Key) => void;\n}) {\n  const listState = useContext(RACListStateContext);\n\n  const selectedItems = useMemo(() => {\n    return [...selectedKeys.values()]\n      .map((key) => listState?.selectionManager.collection.getItem(key))\n      .filter((value) => !!value);\n  }, [selectedKeys, listState?.selectionManager.collection]);\n\n  return (\n    <RACProvider\n      values={[\n        // Reset contexts so that TagGroup doesn't inherit any data from RACComboBox\n        [RACLabelContext, null],\n        [RACButtonContext, null],\n        [RACTextContext, null],\n        [RACListStateContext, null],\n      ]}\n    >\n      <TagGroup\n        aria-labelledby={inputId}\n        disabledKeys={isDisabled ? selectedKeys : undefined}\n        renderEmptyState={renderEmptyState}\n        onRemove={\n          isReadOnly\n            ? undefined\n            : (keys) => {\n                keys.forEach(onRemove);\n              }\n        }\n      >\n        {selectedItems.map((item) => (\n          <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n            {item.textValue}\n          </Tag>\n        ))}\n      </TagGroup>\n    </RACProvider>\n  );\n}\n"]}
+{"version":3,"file":"tag-field-tags.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-tags.tsx"],"names":[],"mappings":";;AAcA,oCAoDC;;AAlED,iCAA4C;AAC5C,iEAM+B;AAC/B,sDAA+C;AAC/C,0CAAmD;AAInD,gBAAgB;AAChB,SAAgB,YAAY,CAA2B,EACrD,OAAO,EACP,YAAY,EACZ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAKT;IACC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,wCAAmB,CAAC,CAAC;IAElD,mEAAmE;IACnE,mEAAmE;IACnE,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,OAAO,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC;aAC9B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;aACjE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,uBAAC,gCAAW,IACV,MAAM,EAAE;YACN,4EAA4E;YAC5E,CAAC,oCAAe,EAAE,IAAI,CAAC;YACvB,CAAC,qCAAgB,EAAE,IAAI,CAAC;YACxB,CAAC,mCAAc,EAAE,IAAI,CAAC;YACtB,CAAC,wCAAmB,EAAE,IAAI,CAAC;SAC5B,YAED,uBAAC,uBAAQ,uBACU,OAAO,EACxB,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACnD,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EACN,UAAU;gBACR,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE;oBACP,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;gBACzB,CAAC,YAGN,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,uBAAC,YAAG,IAAgB,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,UAAU,EAAG,IAAI,CAAC,KAAkB,CAAC,UAAU,YAC9E,IAAI,CAAC,SAAS,IADP,IAAI,CAAC,GAAG,CAEZ,CACP,CAAC,GACO,GACC,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport {\n  ButtonContext as RACButtonContext,\n  LabelContext as RACLabelContext,\n  ListStateContext as RACListStateContext,\n  Provider as RACProvider,\n  TextContext as RACTextContext,\n} from 'react-aria-components';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\n/** @internal */\nexport function TagFieldTags<T extends CollectionItem>({\n  inputId,\n  selectedKeys,\n  isDisabled,\n  isReadOnly,\n  renderEmptyState,\n  onRemove,\n}: Pick<TagFieldProps<T>, 'isDisabled' | 'isReadOnly' | 'renderEmptyState'> & {\n  inputId: string;\n  selectedKeys: Set<Key>;\n  onRemove: (key: Key) => void;\n}) {\n  const listState = useContext(RACListStateContext);\n\n  // The plugin doesn't see `selectedKeys` as a legitimate dependency\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\n  const selectedItems = useMemo(() => {\n    return [...selectedKeys.values()]\n      .map((key) => listState?.selectionManager.collection.getItem(key))\n      .filter((value) => !!value);\n  }, [selectedKeys, listState?.selectionManager.collection]);\n\n  return (\n    <RACProvider\n      values={[\n        // Reset contexts so that TagGroup doesn't inherit any data from RACComboBox\n        [RACLabelContext, null],\n        [RACButtonContext, null],\n        [RACTextContext, null],\n        [RACListStateContext, null],\n      ]}\n    >\n      <TagGroup\n        aria-labelledby={inputId}\n        disabledKeys={isDisabled ? selectedKeys : undefined}\n        renderEmptyState={renderEmptyState}\n        onRemove={\n          isReadOnly\n            ? undefined\n            : (keys) => {\n                keys.forEach(onRemove);\n              }\n        }\n      >\n        {selectedItems.map((item) => (\n          <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n            {item.textValue}\n          </Tag>\n        ))}\n      </TagGroup>\n    </RACProvider>\n  );\n}\n"]}

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

@@ -96,7 +96,7 @@ function TagField({ label, description, error, items, children, placeholder, UNS
     const onItemSelectionChange = (key) => {
         if (selectedSet.has(key)) {
             // This is a temporary mutation followed immediately by a state update, so this is fine
-            // eslint-disable-next-line react-hooks/react-compiler
+            // eslint-disable-next-line react-hooks/immutability
             selectedSet.delete(key);
         }
         else {

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

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

package/dist/commonjs/components/toggle-button/internal-toggle-button.js

@@ -20,6 +20,13 @@ function InternalToggleButton({ buttonRef: ref, children, size = 'medium', isDis
     const toggleGroupState = (0, react_1.useContext)(react_aria_components_1.ToggleGroupStateContext);
     const descriptionProps = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.TextContext, 'description');
     const errorMessageProps = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.TextContext, 'errorMessage');
+    const validationState = (0, form_2.useFormValidationState)({
+        // If part of a group, validation is handled at group level
+        name: toggleButtonGroupContext ? undefined : name,
+        value,
+        validationBehavior: 'native',
+        [form_2.privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,
+    });
     const [isSelected, setIsSelected] = (0, utils_2.useControlledState)(toggleGroupState && value ? toggleGroupState.selectedKeys.has(value) : consumerIsSelected, consumerDefaultSelected ?? false, (newIsSelected) => {
         onChange?.(newIsSelected);
         if (toggleGroupState && value) {
@@ -31,13 +38,6 @@ function InternalToggleButton({ buttonRef: ref, children, size = 'medium', isDis
     const buttonRef = (0, utils_1.useObjectRef)(ref);
     const formInputRef = (0, react_1.useRef)(null);
     const formInputName = toggleButtonGroupContext?.name ?? name;
-    const validationState = (0, form_2.useFormValidationState)({
-        // If part of a group, validation is handled at group level
-        name: toggleButtonGroupContext ? undefined : name,
-        value,
-        validationBehavior: 'native',
-        [form_2.privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,
-    });
     const [initialSelected] = (0, react_1.useState)(isSelected);
     (0, utils_1.useFormReset)(formInputRef, consumerDefaultSelected ?? initialSelected, setIsSelected);
     (0, form_1.useFormValidation)({

package/dist/commonjs/components/toggle-button/internal-toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useObjectRef } from '@react-aria/utils';\nimport { privateValidationStateProp, useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, useContext, useRef, useState, type Ref } from 'react';\nimport {\n  TextContext as RACTextContext,\n  ToggleButton as RACToggleButton,\n  type ToggleButtonProps as RACToggleButtonProps,\n  ToggleGroupStateContext as RACToggleGroupStateContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport type { BaseButtonProps } from '../button/types.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ToggleButtonGroupContext } from './context.js';\n\n/** @internal */\nexport interface BaseToggleButtonProps\n  extends Omit<CommonProps, 'id'>,\n    AriaLabelingProps,\n    Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n    Pick<\n      RACToggleButtonProps,\n      | 'defaultSelected'\n      | 'isSelected'\n      | 'onPress'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onChange'\n      | 'isDisabled'\n      | 'autoFocus'\n    > {\n  /**\n   * The `<form>` element to associate the input with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n  /**\n   * The name of the input element, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n   */\n  name?: string;\n  /**\n   * The value of the input element, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#value).\n   *\n   * When used in a `ToggleButtonGroup`, `value` serves as an identifier for this button, and has to be unique across all buttons in the group.\n   */\n  value?: string;\n}\n\ninterface InternalToggleButtonProps extends BaseToggleButtonProps {\n  children?: ReactNode;\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\n/** @internal */\nexport function InternalToggleButton({\n  buttonRef: ref,\n  children,\n  size = 'medium',\n  isDisabled,\n  fullWidth,\n  UNSAFE_className,\n  UNSAFE_style,\n  form,\n  name,\n  value,\n  isSelected: consumerIsSelected,\n  defaultSelected: consumerDefaultSelected,\n  onChange,\n  ...props\n}: InternalToggleButtonProps) {\n  // State\n\n  const toggleButtonGroupContext = useContext(ToggleButtonGroupContext);\n  const toggleGroupState = useContext(RACToggleGroupStateContext);\n  const descriptionProps = useSlottedContext(RACTextContext, 'description');\n  const errorMessageProps = useSlottedContext(RACTextContext, 'errorMessage');\n\n  const [isSelected, setIsSelected] = useControlledState(\n    toggleGroupState && value ? toggleGroupState.selectedKeys.has(value) : consumerIsSelected,\n    consumerDefaultSelected ?? false,\n    (newIsSelected) => {\n      onChange?.(newIsSelected);\n\n      if (toggleGroupState && value) {\n        toggleGroupState.setSelected(value, newIsSelected);\n      }\n\n      validationState.commitValidation();\n    },\n  );\n\n  // Validation\n\n  const buttonRef = useObjectRef(ref);\n  const formInputRef = useRef<HTMLInputElement>(null);\n  const formInputName = toggleButtonGroupContext?.name ?? name;\n\n  const validationState = useFormValidationState({\n    // If part of a group, validation is handled at group level\n    name: toggleButtonGroupContext ? undefined : name,\n    value,\n    validationBehavior: 'native',\n    [privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,\n  });\n\n  const [initialSelected] = useState(isSelected);\n  useFormReset(formInputRef, consumerDefaultSelected ?? initialSelected, setIsSelected);\n\n  useFormValidation(\n    {\n      focus: () => buttonRef.current?.focus(),\n      validationBehavior: 'native',\n    },\n    validationState,\n    formInputRef,\n  );\n\n  return (\n    <>\n      <RACToggleButton\n        {...props}\n        ref={buttonRef}\n        className={clsx('cim-toggle-button', UNSAFE_className)}\n        style={UNSAFE_style}\n        id={toggleButtonGroupContext ? value : undefined}\n        isDisabled={isDisabled}\n        isSelected={isSelected}\n        onChange={setIsSelected}\n        aria-describedby={\n          [\n            props['aria-describedby'],\n            toggleButtonGroupContext?.isInvalid ? errorMessageProps?.id : null,\n            descriptionProps?.id,\n          ]\n            .filter(Boolean)\n            .join(' ') || undefined\n        }\n        data-variant=\"secondary\"\n        data-tone=\"base\"\n        data-size={size}\n        data-full-width={fullWidth || undefined}\n      >\n        {children}\n      </RACToggleButton>\n\n      {formInputName && (\n        <input\n          ref={formInputRef}\n          style={{ display: 'none' }}\n          type=\"checkbox\"\n          form={toggleButtonGroupContext?.form ?? form}\n          name={formInputName}\n          checked={isSelected}\n          value={value}\n          required={toggleButtonGroupContext?.isRequired}\n          aria-invalid={\n            toggleButtonGroupContext?.validationState.displayValidation.isInvalid ??\n            validationState.displayValidation.isInvalid ??\n            undefined\n          }\n          onChange={() => {}}\n        />\n      )}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"internal-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useObjectRef } from '@react-aria/utils';\nimport { privateValidationStateProp, useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, useContext, useRef, useState, type Ref } from 'react';\nimport {\n  TextContext as RACTextContext,\n  ToggleButton as RACToggleButton,\n  type ToggleButtonProps as RACToggleButtonProps,\n  ToggleGroupStateContext as RACToggleGroupStateContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport type { BaseButtonProps } from '../button/types.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ToggleButtonGroupContext } from './context.js';\n\n/** @internal */\nexport interface BaseToggleButtonProps\n  extends Omit<CommonProps, 'id'>,\n    AriaLabelingProps,\n    Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n    Pick<\n      RACToggleButtonProps,\n      | 'defaultSelected'\n      | 'isSelected'\n      | 'onPress'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onChange'\n      | 'isDisabled'\n      | 'autoFocus'\n    > {\n  /**\n   * The `<form>` element to associate the input with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n  /**\n   * The name of the input element, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n   */\n  name?: string;\n  /**\n   * The value of the input element, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#value).\n   *\n   * When used in a `ToggleButtonGroup`, `value` serves as an identifier for this button, and has to be unique across all buttons in the group.\n   */\n  value?: string;\n}\n\ninterface InternalToggleButtonProps extends BaseToggleButtonProps {\n  children?: ReactNode;\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\n/** @internal */\nexport function InternalToggleButton({\n  buttonRef: ref,\n  children,\n  size = 'medium',\n  isDisabled,\n  fullWidth,\n  UNSAFE_className,\n  UNSAFE_style,\n  form,\n  name,\n  value,\n  isSelected: consumerIsSelected,\n  defaultSelected: consumerDefaultSelected,\n  onChange,\n  ...props\n}: InternalToggleButtonProps) {\n  // State\n\n  const toggleButtonGroupContext = useContext(ToggleButtonGroupContext);\n  const toggleGroupState = useContext(RACToggleGroupStateContext);\n  const descriptionProps = useSlottedContext(RACTextContext, 'description');\n  const errorMessageProps = useSlottedContext(RACTextContext, 'errorMessage');\n\n  const validationState = useFormValidationState({\n    // If part of a group, validation is handled at group level\n    name: toggleButtonGroupContext ? undefined : name,\n    value,\n    validationBehavior: 'native',\n    [privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,\n  });\n\n  const [isSelected, setIsSelected] = useControlledState(\n    toggleGroupState && value ? toggleGroupState.selectedKeys.has(value) : consumerIsSelected,\n    consumerDefaultSelected ?? false,\n    (newIsSelected) => {\n      onChange?.(newIsSelected);\n\n      if (toggleGroupState && value) {\n        toggleGroupState.setSelected(value, newIsSelected);\n      }\n\n      validationState.commitValidation();\n    },\n  );\n\n  // Validation\n\n  const buttonRef = useObjectRef(ref);\n  const formInputRef = useRef<HTMLInputElement>(null);\n  const formInputName = toggleButtonGroupContext?.name ?? name;\n\n  const [initialSelected] = useState(isSelected);\n  useFormReset(formInputRef, consumerDefaultSelected ?? initialSelected, setIsSelected);\n\n  useFormValidation(\n    {\n      focus: () => buttonRef.current?.focus(),\n      validationBehavior: 'native',\n    },\n    validationState,\n    formInputRef,\n  );\n\n  return (\n    <>\n      <RACToggleButton\n        {...props}\n        ref={buttonRef}\n        className={clsx('cim-toggle-button', UNSAFE_className)}\n        style={UNSAFE_style}\n        id={toggleButtonGroupContext ? value : undefined}\n        isDisabled={isDisabled}\n        isSelected={isSelected}\n        onChange={setIsSelected}\n        aria-describedby={\n          [\n            props['aria-describedby'],\n            toggleButtonGroupContext?.isInvalid ? errorMessageProps?.id : null,\n            descriptionProps?.id,\n          ]\n            .filter(Boolean)\n            .join(' ') || undefined\n        }\n        data-variant=\"secondary\"\n        data-tone=\"base\"\n        data-size={size}\n        data-full-width={fullWidth || undefined}\n      >\n        {children}\n      </RACToggleButton>\n\n      {formInputName && (\n        <input\n          ref={formInputRef}\n          style={{ display: 'none' }}\n          type=\"checkbox\"\n          form={toggleButtonGroupContext?.form ?? form}\n          name={formInputName}\n          checked={isSelected}\n          value={value}\n          required={toggleButtonGroupContext?.isRequired}\n          aria-invalid={\n            toggleButtonGroupContext?.validationState.displayValidation.isInvalid ??\n            validationState.displayValidation.isInvalid ??\n            undefined\n          }\n          onChange={() => {}}\n        />\n      )}\n    </>\n  );\n}\n"]}

package/dist/commonjs/components/toggle-button/toggle-button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAML,KAAK,sBAAsB,IAAI,yBAAyB,EACzD,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI9E,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,EAC3C,IAAI,CACF,yBAAyB,EACzB,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,GAAG,eAAe,GAAG,YAAY,CAC9F;IACH,2FAA2F;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAsHD;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wKAAqE,CAAC;AAE9F,OAAO,EAAE,kBAAkB,IAAI,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAML,KAAK,sBAAsB,IAAI,yBAAyB,EACzD,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI9E,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,EAC3C,IAAI,CACF,yBAAyB,EACzB,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,GAAG,eAAe,GAAG,YAAY,CAC9F;IACH,2FAA2F;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAyHD;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wKAAqE,CAAC;AAE9F,OAAO,EAAE,kBAAkB,IAAI,iBAAiB,EAAE,CAAC"}

package/dist/commonjs/components/toggle-button/toggle-button-group.js

@@ -30,6 +30,9 @@ function ToggleButtonGroup({ children, label, description, error: errorMessage,
     // State
     const [selectedKeys, setSelectedKeys] = (0, utils_1.useControlledState)(consumerSelectedKeys, consumerDefaultSelectedKeys ?? [], (newSelectedKeys) => {
         onSelectionChange?.(new Set(newSelectedKeys));
+        // `validationState` is technically accessed before its declaration, but there's no way to write this in a different order,
+        // and this is a callback anyway so it won't be called immediately
+        // eslint-disable-next-line react-hooks/immutability
         validationState.commitValidation();
     });
     const selectedSet = (0, react_1.useMemo)(() => new Set(selectedKeys), [selectedKeys]);

package/dist/commonjs/components/toggle-button/toggle-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { useMemo, type ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport { mergeProps, useField } from 'react-aria';\nimport {\n  LabelContext as RACLabelContext,\n  FieldErrorContext as RACFieldErrorContext,\n  Provider as RACProvider,\n  TextContext as RACTextContext,\n  ToggleButtonGroup as RACToggleButtonGroup,\n  type ToggleButtonGroupProps as RACToggleButtonGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { CommonProps, FieldProps, Key, WithRequired } from '../types.js';\nimport { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';\nimport { ToggleButtonGroupContext, type ToggleButtonGroupContextValue } from './context.js';\n\nexport interface ToggleButtonGroupProps\n  extends Omit<CommonProps, 'id'>,\n    WithRequired<FieldProps<Set<Key>>, 'label'>,\n    Pick<\n      RACToggleButtonGroupProps,\n      'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'\n    > {\n  /** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */\n  children: ReactNode;\n  /** Whether the current selection is invalid. */\n  isInvalid?: boolean;\n  /** Whether a selection is required before form submission. */\n  isRequired?: boolean;\n}\n\nfunction ToggleButtonGroup(\n  {\n    children,\n    label,\n    description,\n    error: errorMessage,\n    validate,\n    form,\n    name,\n    isInvalid,\n    isRequired,\n    selectedKeys: consumerSelectedKeys,\n    defaultSelectedKeys: consumerDefaultSelectedKeys,\n    onSelectionChange,\n    UNSAFE_className,\n    UNSAFE_style,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    ...props\n  }: ToggleButtonGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ToggleButtonGroup requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const labelMessages = useLocalizedMessages('label');\n\n  // State\n\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    consumerSelectedKeys,\n    consumerDefaultSelectedKeys ?? [],\n    (newSelectedKeys) => {\n      onSelectionChange?.(new Set(newSelectedKeys));\n      validationState.commitValidation();\n    },\n  );\n\n  const selectedSet = useMemo(() => new Set<Key>(selectedKeys), [selectedKeys]);\n\n  // Validation\n\n  const validationState = useFormValidationState({\n    value: selectedSet,\n    isInvalid,\n    isRequired,\n    name,\n    validate,\n    validationBehavior: 'native',\n  });\n\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    description,\n    errorMessage: errorMessage || validationState.displayValidation.validationErrors,\n    isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n    label,\n    labelElementType: 'span',\n    validate,\n    validationBehavior: 'native',\n  });\n\n  // Remove props that we don't want from fieldProps\n  const { id, ...filteredFieldProps } = fieldProps;\n\n  const toggleButtonGroupContext: ToggleButtonGroupContextValue = {\n    form,\n    name,\n    isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n    isRequired: isRequired && selectedSet.size === 0,\n    validationState,\n  };\n\n  return (\n    <RACToggleButtonGroup\n      {...mergeProps(props, filteredFieldProps)}\n      ref={ref}\n      className={clsx('cim-toggle-button-group', UNSAFE_className)}\n      style={UNSAFE_style}\n      selectedKeys={selectedKeys}\n      onSelectionChange={setSelectedKeys}\n    >\n      <RACProvider\n        values={[\n          [RACLabelContext, { ...labelProps, elementType: 'span' }],\n          [RACTextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],\n          [RACFieldErrorContext, validationState.displayValidation],\n          [ToggleButtonGroupContext, toggleButtonGroupContext],\n        ]}\n      >\n        <FormFieldLabel isRequired={isRequired}>\n          {label}\n          {/*\n           * Button elements don't support `aria-required`, so we need to add visually hidden text to indicate that the field is required.\n           * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required#examples:~:text=Note%3A%20If%20the%20field%27s%20label%20already%20contains%20the%20word%20%22required%22%2C%20it%20is%20recommended%20to%20leave%20out%20the%20aria%2Drequired%20attribute.%20This%20avoids%20that%20screen%20readers%20read%20out%20the%20term%20%22required%22%20twice.\n           */}\n          {isRequired && <VisuallyHidden>{labelMessages.format('required')}</VisuallyHidden>}\n        </FormFieldLabel>\n        <Stack gap={8} direction=\"horizontal\" wrap>\n          {children}\n        </Stack>\n        <FormFieldError>{errorMessage}</FormFieldError>\n        <FormFieldDescription>{description}</FormFieldDescription>\n      </RACProvider>\n    </RACToggleButtonGroup>\n  );\n}\n\n/**\n * Allows users to toggle multiple options, with single or multiple selection.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _ToggleButtonGroup = withStyleProps(forwardRef(ToggleButtonGroup), 'ToggleButtonGroup');\n\nexport { _ToggleButtonGroup as ToggleButtonGroup };\n"]}
+{"version":3,"file":"toggle-button-group.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { useMemo, type ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport { mergeProps, useField } from 'react-aria';\nimport {\n  LabelContext as RACLabelContext,\n  FieldErrorContext as RACFieldErrorContext,\n  Provider as RACProvider,\n  TextContext as RACTextContext,\n  ToggleButtonGroup as RACToggleButtonGroup,\n  type ToggleButtonGroupProps as RACToggleButtonGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { CommonProps, FieldProps, Key, WithRequired } from '../types.js';\nimport { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';\nimport { ToggleButtonGroupContext, type ToggleButtonGroupContextValue } from './context.js';\n\nexport interface ToggleButtonGroupProps\n  extends Omit<CommonProps, 'id'>,\n    WithRequired<FieldProps<Set<Key>>, 'label'>,\n    Pick<\n      RACToggleButtonGroupProps,\n      'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'\n    > {\n  /** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */\n  children: ReactNode;\n  /** Whether the current selection is invalid. */\n  isInvalid?: boolean;\n  /** Whether a selection is required before form submission. */\n  isRequired?: boolean;\n}\n\nfunction ToggleButtonGroup(\n  {\n    children,\n    label,\n    description,\n    error: errorMessage,\n    validate,\n    form,\n    name,\n    isInvalid,\n    isRequired,\n    selectedKeys: consumerSelectedKeys,\n    defaultSelectedKeys: consumerDefaultSelectedKeys,\n    onSelectionChange,\n    UNSAFE_className,\n    UNSAFE_style,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    ...props\n  }: ToggleButtonGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ToggleButtonGroup requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const labelMessages = useLocalizedMessages('label');\n\n  // State\n\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    consumerSelectedKeys,\n    consumerDefaultSelectedKeys ?? [],\n    (newSelectedKeys) => {\n      onSelectionChange?.(new Set(newSelectedKeys));\n      // `validationState` is technically accessed before its declaration, but there's no way to write this in a different order,\n      // and this is a callback anyway so it won't be called immediately\n      // eslint-disable-next-line react-hooks/immutability\n      validationState.commitValidation();\n    },\n  );\n\n  const selectedSet = useMemo(() => new Set<Key>(selectedKeys), [selectedKeys]);\n\n  // Validation\n\n  const validationState = useFormValidationState({\n    value: selectedSet,\n    isInvalid,\n    isRequired,\n    name,\n    validate,\n    validationBehavior: 'native',\n  });\n\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    description,\n    errorMessage: errorMessage || validationState.displayValidation.validationErrors,\n    isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n    label,\n    labelElementType: 'span',\n    validate,\n    validationBehavior: 'native',\n  });\n\n  // Remove props that we don't want from fieldProps\n  const { id, ...filteredFieldProps } = fieldProps;\n\n  const toggleButtonGroupContext: ToggleButtonGroupContextValue = {\n    form,\n    name,\n    isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n    isRequired: isRequired && selectedSet.size === 0,\n    validationState,\n  };\n\n  return (\n    <RACToggleButtonGroup\n      {...mergeProps(props, filteredFieldProps)}\n      ref={ref}\n      className={clsx('cim-toggle-button-group', UNSAFE_className)}\n      style={UNSAFE_style}\n      selectedKeys={selectedKeys}\n      onSelectionChange={setSelectedKeys}\n    >\n      <RACProvider\n        values={[\n          [RACLabelContext, { ...labelProps, elementType: 'span' }],\n          [RACTextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],\n          [RACFieldErrorContext, validationState.displayValidation],\n          [ToggleButtonGroupContext, toggleButtonGroupContext],\n        ]}\n      >\n        <FormFieldLabel isRequired={isRequired}>\n          {label}\n          {/*\n           * Button elements don't support `aria-required`, so we need to add visually hidden text to indicate that the field is required.\n           * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required#examples:~:text=Note%3A%20If%20the%20field%27s%20label%20already%20contains%20the%20word%20%22required%22%2C%20it%20is%20recommended%20to%20leave%20out%20the%20aria%2Drequired%20attribute.%20This%20avoids%20that%20screen%20readers%20read%20out%20the%20term%20%22required%22%20twice.\n           */}\n          {isRequired && <VisuallyHidden>{labelMessages.format('required')}</VisuallyHidden>}\n        </FormFieldLabel>\n        <Stack gap={8} direction=\"horizontal\" wrap>\n          {children}\n        </Stack>\n        <FormFieldError>{errorMessage}</FormFieldError>\n        <FormFieldDescription>{description}</FormFieldDescription>\n      </RACProvider>\n    </RACToggleButtonGroup>\n  );\n}\n\n/**\n * Allows users to toggle multiple options, with single or multiple selection.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _ToggleButtonGroup = withStyleProps(forwardRef(ToggleButtonGroup), 'ToggleButtonGroup');\n\nexport { _ToggleButtonGroup as ToggleButtonGroup };\n"]}

package/dist/esm/components/app-header/app-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-header.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEzF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,sGAAsG;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,SAAS,EAAE,IAAI,GAAG,uBAAuB,CAAC;IAC1C,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,SAAS,CAAC;CAChC;AA4BD;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"app-header.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEzF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,sGAAsG;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,SAAS,EAAE,IAAI,GAAG,uBAAuB,CAAC;IAC1C,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,SAAS,CAAC;CAChC;AA0BD;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/esm/components/app-header/app-header.js

@@ -8,7 +8,7 @@ import { Text } from '../typography/text.js';
 import { CimpressLogo } from './cimpress-logo.js';
 function AppHeader({ title, titleLink, tools, UNSTABLE_navButton: navButton, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };
-    return (_jsx("div", { className: "cim-app-header-container", children: _jsxs("header", { ...props, ref: ref, className: clsx('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [navButton, _jsxs("div", { className: "cim-app-header-title", children: [_jsx(CimpressLogo, { height: 18 }), _jsx(Divider, { orientation: "vertical" }), _jsx(Text, { as: "h1", variant: "title-5", tone: "base", children: _jsx(Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) })] }), _jsx("div", { className: "cim-app-header-tools", children: tools })] }) }));
+    return (_jsxs("header", { ...props, ref: ref, className: clsx('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [navButton, _jsxs("div", { className: "cim-app-header-title", children: [_jsx(CimpressLogo, { height: 18 }), _jsx(Divider, { orientation: "vertical" }), _jsx(Text, { as: "h1", variant: "title-5", tone: "base", children: _jsx(Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) })] }), _jsx("div", { className: "cim-app-header-tools", children: tools })] }));
 }
 /**
  * Displays a basic application header.

package/dist/esm/components/app-header/app-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAclD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACpH,GAAiC;IAEjC,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,cAAK,SAAS,EAAC,0BAA0B,YACvC,qBAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,SAAS,EACV,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,YAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,KAAC,IAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,IACH,EAEN,cAAK,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAO,IAC5C,GACL,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { Divider } from '../divider/divider.js';\nimport type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\nimport { CimpressLogo } from './cimpress-logo.js';\n\nexport interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {}\n\nexport interface AppHeaderProps extends CommonProps {\n  /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */\n  title: string;\n  /** The props of the link that is rendered around the header title. */\n  titleLink: Href | AppHeaderTitleLinkProps;\n  /** The tools to render at the end of the header. */\n  tools?: ReactNode;\n  UNSTABLE_navButton?: ReactNode;\n}\n\nfunction AppHeader(\n  { title, titleLink, tools, UNSTABLE_navButton: navButton, UNSAFE_className, UNSAFE_style, ...props }: AppHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n  return (\n    <div className=\"cim-app-header-container\">\n      <header {...props} ref={ref} className={clsx('cim-app-header', UNSAFE_className)} style={UNSAFE_style}>\n        {navButton}\n        <div className=\"cim-app-header-title\">\n          <CimpressLogo height={18} />\n          <Divider orientation=\"vertical\" />\n          <Text as=\"h1\" variant=\"title-5\" tone=\"base\">\n            <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n              {title}\n            </Link>\n          </Text>\n        </div>\n\n        <div className=\"cim-app-header-tools\">{tools}</div>\n      </header>\n    </div>\n  );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}
+{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAclD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACpH,GAAiC;IAEjC,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,qBAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,SAAS,EACV,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,YAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,KAAC,IAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,IACH,EAEN,cAAK,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAO,IAC5C,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { Divider } from '../divider/divider.js';\nimport type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\nimport { CimpressLogo } from './cimpress-logo.js';\n\nexport interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {}\n\nexport interface AppHeaderProps extends CommonProps {\n  /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */\n  title: string;\n  /** The props of the link that is rendered around the header title. */\n  titleLink: Href | AppHeaderTitleLinkProps;\n  /** The tools to render at the end of the header. */\n  tools?: ReactNode;\n  UNSTABLE_navButton?: ReactNode;\n}\n\nfunction AppHeader(\n  { title, titleLink, tools, UNSTABLE_navButton: navButton, UNSAFE_className, UNSAFE_style, ...props }: AppHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n  return (\n    <header {...props} ref={ref} className={clsx('cim-app-header', UNSAFE_className)} style={UNSAFE_style}>\n      {navButton}\n      <div className=\"cim-app-header-title\">\n        <CimpressLogo height={18} />\n        <Divider orientation=\"vertical\" />\n        <Text as=\"h1\" variant=\"title-5\" tone=\"base\">\n          <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n            {title}\n          </Link>\n        </Text>\n      </div>\n\n      <div className=\"cim-app-header-tools\">{tools}</div>\n    </header>\n  );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}

package/dist/esm/components/copy/copy-button.d.ts

@@ -3,8 +3,15 @@ import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../type
 export interface UNSTABLE_CopyButtonProps extends CommonProps, AriaLabelingProps, Pick<BaseButtonProps, 'size'>, Pick<ActionButtonProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
     /** The text displayed on the button. */
     children?: StringLikeChildren;
+    /**
+     * Determines the visual appearance of the button.
+     * @default 'secondary'
+     */
+    variant?: 'secondary' | 'tertiary';
     /** The content to be copied. */
     value: string;
+    /** The help text that appears in a tooltip when the user hovers or focuses the button. */
+    helpText?: string;
     /** A handler that gets called when the user triggers the copying. */
     onCopy?: () => void;
 }

package/dist/esm/components/copy/copy-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../../src/components/copy/copy-button.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,wBACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,EAC7B,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,wCAAwC;IACxC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AA0CD,QAAA,MAAM,oBAAoB,6KAAgE,CAAC;AAE3F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../../src/components/copy/copy-button.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,wBACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,EAC7B,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,wCAAwC;IACxC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACnC,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAyDD,QAAA,MAAM,oBAAoB,6KAAgE,CAAC;AAE3F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}

package/dist/esm/components/copy/copy-button.js

@@ -1,5 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
+import { TooltipTriggerStateContext as RACTooltipTriggerStateContext } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { IconCheckCircle, IconCopy } from '../../icons/index.js';
 import { useProductionWarning } from '../../utils/use-production-warning.js';
@@ -8,23 +10,56 @@ import { Button } from '../button/button.js';
 import { IconButton } from '../button/icon-button.js';
 import { Tooltip } from '../tooltip/tooltip.js';
 import { useCopyToClipboard } from './use-copy.js';
-function UNSTABLE_CopyButton({ UNSAFE_className, UNSAFE_style, children, value, onCopy, ...props }, ref) {
+function UNSTABLE_CopyButton({ onCopy, helpText, ...props }, ref) {
     const [copyStatus, showCopyFeedback, copyToClipboard] = useCopyToClipboard();
-    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    const [showCopyFeedbackLabel, setShowCopyFeedbackLabel] = useState(showCopyFeedback);
+    useEffect(() => {
+        let labelChangeTimeout;
+        if (showCopyFeedback) {
+            setShowCopyFeedbackLabel(true);
+        }
+        else {
+            // Wait until the tooltip has animated away before changing the label
+            labelChangeTimeout = setTimeout(() => setShowCopyFeedbackLabel(false), 200);
+        }
+        return () => {
+            if (labelChangeTimeout) {
+                clearTimeout(labelChangeTimeout);
+            }
+        };
+    }, [showCopyFeedback]);
+    const { children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     useProductionWarning(() => {
         if (!children && !ariaLabel && !ariaLabelledBy) {
             console.warn('CopyButton requires one of children / aria-label / aria-labelledby for accessibility');
         }
     }, [children, ariaLabel, ariaLabelledBy]);
-    const icon = showCopyFeedback ? _jsx(IconCheckCircle, {}) : _jsx(IconCopy, {});
     const onPress = () => {
-        copyToClipboard(value);
+        copyToClipboard(props.value);
         onCopy?.();
     };
-    return (_jsx(Tooltip, { isOpen: showCopyFeedback, isDisabled: props.isDisabled, 
-        // TODO: i18n
-        label: copyStatus?.success ? 'Copied to clipboard.' : 'Failed to copy to clipboard.', placement: "top", children: children ? (_jsx(Button, { ...props, ref: ref, iconEnd: icon, variant: "secondary", tone: "base", onPress: onPress, children: children })) : (_jsx(IconButton, { ...props, ref: ref, icon: icon, "aria-label": ariaLabel ?? '', onPress: onPress })) }));
+    return (_jsx(Tooltip, { isDisabled: props.isDisabled || (!showCopyFeedback && !helpText), label: showCopyFeedbackLabel
+            ? copyStatus?.success
+                ? // TODO: i18n
+                    'Copied to clipboard.'
+                : 'Failed to copy to clipboard.'
+            : (helpText ?? ''), placement: "top", children: _jsx(CopyButtonInner, { ...props, buttonRef: ref, onCopy: onPress, showCopyFeedback: showCopyFeedback }) }));
 }
 const _UNSTABLE_CopyButton = withStyleProps(forwardRef(UNSTABLE_CopyButton), 'CopyButton');
 export { _UNSTABLE_CopyButton as UNSTABLE_CopyButton };
+// eslint-disable-next-line react-refresh/only-export-components
+function CopyButtonInner({ UNSAFE_className, UNSAFE_style, children, value, onCopy, buttonRef, showCopyFeedback, ...props }) {
+    const tooltipTriggerState = useContext(RACTooltipTriggerStateContext);
+    const icon = showCopyFeedback ? _jsx(IconCheckCircle, {}) : _jsx(IconCopy, {});
+    useEffect(() => {
+        if (showCopyFeedback) {
+            tooltipTriggerState?.open(true);
+        }
+        else {
+            tooltipTriggerState?.close(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showCopyFeedback]);
+    return children ? (_jsx(Button, { ...props, ref: buttonRef, iconStart: icon, tone: "base", onPress: onCopy, children: children })) : (_jsx(IconButton, { ...props, ref: buttonRef, icon: icon, tone: "base", "aria-label": props['aria-label'] ?? '', onPress: onCopy }));
+}
 //# sourceMappingURL=copy-button.js.map

package/dist/esm/components/copy/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","sourceRoot":"","sources":["../../../../src/components/copy/copy-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAenD,SAAS,mBAAmB,CAC1B,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAA4B,EAC/F,GAAoC;IAEpC,MAAM,CAAC,UAAU,EAAE,gBAAgB,EAAE,eAAe,CAAC,GAAG,kBAAkB,EAAE,CAAC;IAE7E,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,sFAAsF,CAAC,CAAC;QACvG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,gBAAgB,CAAC,CAAC,CAAC,KAAC,eAAe,KAAG,CAAC,CAAC,CAAC,KAAC,QAAQ,KAAG,CAAC;IAEnE,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,gBAAgB,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,aAAa;QACb,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,8BAA8B,EACpF,SAAS,EAAC,KAAK,YAEd,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,YACzF,QAAQ,GACF,CACV,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,gBAAc,SAAS,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,GAAI,CAC/F,GACO,CACX,CAAC;AACJ,CAAC;AAED,MAAM,oBAAoB,GAAG,cAAc,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,YAAY,CAAC,CAAC;AAE3F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckCircle, IconCopy } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { ActionButtonProps, BaseButtonProps } from '../button/types.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { useCopyToClipboard } from './use-copy.js';\n\nexport interface UNSTABLE_CopyButtonProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<BaseButtonProps, 'size'>,\n    Pick<ActionButtonProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The text displayed on the button. */\n  children?: StringLikeChildren;\n  /** The content to be copied. */\n  value: string;\n  /** A handler that gets called when the user triggers the copying. */\n  onCopy?: () => void;\n}\n\nfunction UNSTABLE_CopyButton(\n  { UNSAFE_className, UNSAFE_style, children, value, onCopy, ...props }: UNSTABLE_CopyButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const [copyStatus, showCopyFeedback, copyToClipboard] = useCopyToClipboard();\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('CopyButton requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  const icon = showCopyFeedback ? <IconCheckCircle /> : <IconCopy />;\n\n  const onPress = () => {\n    copyToClipboard(value);\n    onCopy?.();\n  };\n\n  return (\n    <Tooltip\n      isOpen={showCopyFeedback}\n      isDisabled={props.isDisabled}\n      // TODO: i18n\n      label={copyStatus?.success ? 'Copied to clipboard.' : 'Failed to copy to clipboard.'}\n      placement=\"top\"\n    >\n      {children ? (\n        <Button {...props} ref={ref} iconEnd={icon} variant=\"secondary\" tone=\"base\" onPress={onPress}>\n          {children}\n        </Button>\n      ) : (\n        <IconButton {...props} ref={ref} icon={icon} aria-label={ariaLabel ?? ''} onPress={onPress} />\n      )}\n    </Tooltip>\n  );\n}\n\nconst _UNSTABLE_CopyButton = withStyleProps(forwardRef(UNSTABLE_CopyButton), 'CopyButton');\n\nexport { _UNSTABLE_CopyButton as UNSTABLE_CopyButton };\n"]}
+{"version":3,"file":"copy-button.js","sourceRoot":"","sources":["../../../../src/components/copy/copy-button.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useContext, useEffect, useState, type ForwardedRef } from 'react';\nimport { TooltipTriggerStateContext as RACTooltipTriggerStateContext } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckCircle, IconCopy } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { ActionButtonProps, BaseButtonProps } from '../button/types.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { useCopyToClipboard } from './use-copy.js';\n\nexport interface UNSTABLE_CopyButtonProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<BaseButtonProps, 'size'>,\n    Pick<ActionButtonProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The text displayed on the button. */\n  children?: StringLikeChildren;\n  /**\n   * Determines the visual appearance of the button.\n   * @default 'secondary'\n   */\n  variant?: 'secondary' | 'tertiary';\n  /** The content to be copied. */\n  value: string;\n  /** The help text that appears in a tooltip when the user hovers or focuses the button. */\n  helpText?: string;\n  /** A handler that gets called when the user triggers the copying. */\n  onCopy?: () => void;\n}\n\nfunction UNSTABLE_CopyButton(\n  { onCopy, helpText, ...props }: UNSTABLE_CopyButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const [copyStatus, showCopyFeedback, copyToClipboard] = useCopyToClipboard();\n  const [showCopyFeedbackLabel, setShowCopyFeedbackLabel] = useState(showCopyFeedback);\n\n  useEffect(() => {\n    let labelChangeTimeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (showCopyFeedback) {\n      setShowCopyFeedbackLabel(true);\n    } else {\n      // Wait until the tooltip has animated away before changing the label\n      labelChangeTimeout = setTimeout(() => setShowCopyFeedbackLabel(false), 200);\n    }\n\n    return () => {\n      if (labelChangeTimeout) {\n        clearTimeout(labelChangeTimeout);\n      }\n    };\n  }, [showCopyFeedback]);\n\n  const { children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('CopyButton requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  const onPress = () => {\n    copyToClipboard(props.value);\n    onCopy?.();\n  };\n\n  return (\n    <Tooltip\n      isDisabled={props.isDisabled || (!showCopyFeedback && !helpText)}\n      label={\n        showCopyFeedbackLabel\n          ? copyStatus?.success\n            ? // TODO: i18n\n              'Copied to clipboard.'\n            : 'Failed to copy to clipboard.'\n          : (helpText ?? '')\n      }\n      placement=\"top\"\n    >\n      <CopyButtonInner {...props} buttonRef={ref} onCopy={onPress} showCopyFeedback={showCopyFeedback} />\n    </Tooltip>\n  );\n}\n\nconst _UNSTABLE_CopyButton = withStyleProps(forwardRef(UNSTABLE_CopyButton), 'CopyButton');\n\nexport { _UNSTABLE_CopyButton as UNSTABLE_CopyButton };\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction CopyButtonInner({\n  UNSAFE_className,\n  UNSAFE_style,\n  children,\n  value,\n  onCopy,\n  buttonRef,\n  showCopyFeedback,\n  ...props\n}: Omit<UNSTABLE_CopyButtonProps, 'helpText'> & {\n  buttonRef: ForwardedRef<HTMLButtonElement>;\n  showCopyFeedback: boolean;\n}) {\n  const tooltipTriggerState = useContext(RACTooltipTriggerStateContext);\n\n  const icon = showCopyFeedback ? <IconCheckCircle /> : <IconCopy />;\n\n  useEffect(() => {\n    if (showCopyFeedback) {\n      tooltipTriggerState?.open(true);\n    } else {\n      tooltipTriggerState?.close(true);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showCopyFeedback]);\n\n  return children ? (\n    <Button {...props} ref={buttonRef} iconStart={icon} tone=\"base\" onPress={onCopy}>\n      {children}\n    </Button>\n  ) : (\n    <IconButton\n      {...props}\n      ref={buttonRef}\n      icon={icon}\n      tone=\"base\"\n      aria-label={props['aria-label'] ?? ''}\n      onPress={onCopy}\n    />\n  );\n}\n"]}

package/dist/esm/components/copy/use-copy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-copy.d.ts","sourceRoot":"","sources":["../../../../src/components/copy/use-copy.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,kBAAkB,IAAI;IACpC,UAAU,EAAE,UAAU,GAAG,SAAS;IAClC,gBAAgB,EAAE,OAAO;IACzB,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;CACxC,CA8BA"}
+{"version":3,"file":"use-copy.d.ts","sourceRoot":"","sources":["../../../../src/components/copy/use-copy.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,kBAAkB,IAAI;IACpC,UAAU,EAAE,UAAU,GAAG,SAAS;IAClC,gBAAgB,EAAE,OAAO;IACzB,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;CACxC,CA2BA"}

package/dist/esm/components/copy/use-copy.js

@@ -1,8 +1,12 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 export function useCopyToClipboard() {
     const [copyStatus, setCopyStatus] = useState(undefined);
     const [showCopyFeedback, setShowCopyFeedback] = useState(false);
+    const timeoutRef = useRef(undefined);
     const copyToClipboard = useCallback((text) => {
+        setCopyStatus(undefined);
+        setShowCopyFeedback(false);
+        clearTimeout(timeoutRef.current);
         navigator.clipboard
             .writeText(text)
             .then(() => {
@@ -10,18 +14,14 @@ export function useCopyToClipboard() {
         })
             .catch(() => {
             setCopyStatus({ success: false, timestamp: Date.now() });
+        })
+            .finally(() => {
+            setShowCopyFeedback(true);
+            timeoutRef.current = setTimeout(() => {
+                setShowCopyFeedback(false);
+            }, 2000);
         });
     }, []);
-    useEffect(() => {
-        if (!copyStatus) {
-            return;
-        }
-        setShowCopyFeedback(true);
-        const timeout = setTimeout(() => {
-            setShowCopyFeedback(false);
-        }, 2000);
-        return () => clearTimeout(timeout);
-    }, [copyStatus]);
     return [copyStatus, showCopyFeedback, copyToClipboard];
 }
 //# sourceMappingURL=use-copy.js.map

package/dist/esm/components/copy/use-copy.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-copy.js","sourceRoot":"","sources":["../../../../src/components/copy/use-copy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOzD,MAAM,UAAU,kBAAkB;IAKhC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAyB,SAAS,CAAC,CAAC;IAChF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;QACnD,SAAS,CAAC,SAAS;aAChB,SAAS,CAAC,IAAI,CAAC;aACf,IAAI,CAAC,GAAG,EAAE;YACT,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC1D,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QAED,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAE1B,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CAAC,UAAU,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC;AACzD,CAAC","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nexport interface CopyStatus {\n  success: boolean;\n  timestamp: number;\n}\n\nexport function useCopyToClipboard(): [\n  copyStatus: CopyStatus | undefined,\n  showCopyFeedback: boolean,\n  copyToClipboard: (text: string) => void,\n] {\n  const [copyStatus, setCopyStatus] = useState<CopyStatus | undefined>(undefined);\n  const [showCopyFeedback, setShowCopyFeedback] = useState(false);\n\n  const copyToClipboard = useCallback((text: string) => {\n    navigator.clipboard\n      .writeText(text)\n      .then(() => {\n        setCopyStatus({ success: true, timestamp: Date.now() });\n      })\n      .catch(() => {\n        setCopyStatus({ success: false, timestamp: Date.now() });\n      });\n  }, []);\n\n  useEffect(() => {\n    if (!copyStatus) {\n      return;\n    }\n\n    setShowCopyFeedback(true);\n\n    const timeout = setTimeout(() => {\n      setShowCopyFeedback(false);\n    }, 2000);\n\n    return () => clearTimeout(timeout);\n  }, [copyStatus]);\n\n  return [copyStatus, showCopyFeedback, copyToClipboard];\n}\n"]}
+{"version":3,"file":"use-copy.js","sourceRoot":"","sources":["../../../../src/components/copy/use-copy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOtD,MAAM,UAAU,kBAAkB;IAKhC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAyB,SAAS,CAAC,CAAC;IAChF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,MAAM,CAA4C,SAAS,CAAC,CAAC;IAEhF,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;QACnD,aAAa,CAAC,SAAS,CAAC,CAAC;QACzB,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC3B,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAEjC,SAAS,CAAC,SAAS;aAChB,SAAS,CAAC,IAAI,CAAC;aACf,IAAI,CAAC,GAAG,EAAE;YACT,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC1D,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC3D,CAAC,CAAC;aACD,OAAO,CAAC,GAAG,EAAE;YACZ,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC1B,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CAAC,UAAU,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC;AACzD,CAAC","sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport interface CopyStatus {\n  success: boolean;\n  timestamp: number;\n}\n\nexport function useCopyToClipboard(): [\n  copyStatus: CopyStatus | undefined,\n  showCopyFeedback: boolean,\n  copyToClipboard: (text: string) => void,\n] {\n  const [copyStatus, setCopyStatus] = useState<CopyStatus | undefined>(undefined);\n  const [showCopyFeedback, setShowCopyFeedback] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const copyToClipboard = useCallback((text: string) => {\n    setCopyStatus(undefined);\n    setShowCopyFeedback(false);\n    clearTimeout(timeoutRef.current);\n\n    navigator.clipboard\n      .writeText(text)\n      .then(() => {\n        setCopyStatus({ success: true, timestamp: Date.now() });\n      })\n      .catch(() => {\n        setCopyStatus({ success: false, timestamp: Date.now() });\n      })\n      .finally(() => {\n        setShowCopyFeedback(true);\n        timeoutRef.current = setTimeout(() => {\n          setShowCopyFeedback(false);\n        }, 2000);\n      });\n  }, []);\n\n  return [copyStatus, showCopyFeedback, copyToClipboard];\n}\n"]}