@cimpress-ui/react 1.8.0 → 1.9.0

package/dist/commonjs/components/table/contexts/column-collection.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-collection.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":";;AAqBA,4DAsBC;AAKD,sDAuBC;AAGD,sCAOC;AAQD,8CAcC;;AAvGD,iCAA6G;AAC7G,0FAAiF;AAgBjF,MAAM,uBAAuB,GAAG,IAAA,qBAAa,EAA0B,IAAI,CAAC,CAAC;AAE7E,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,SAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAA2B;IAC5E,qEAAqE;IACrE,0EAA0E;IAC1E,oDAAoD;IACpD,MAAM,UAAU,GAAG,IAAA,cAAM,EAA6B,YAAY,CAAC,CAAC;IACpE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAA6B,YAAY,CAAC,CAAC;IAEnF,MAAM,UAAU,GAAqB,IAAA,eAAO,EAC1C,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,OAAO;YACT,OAAO,UAAU,CAAC,OAAO,CAAC;QAC5B,CAAC;QACD,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE;YACtB,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;YAC7B,WAAW,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC;KACF,CAAC;IACF,uDAAuD;IACvD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,uBAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,QAAQ,GAAoC,CAAC;AAC5G,CAAC;AAID,gEAAgE;AAChE,SAAgB,qBAAqB;IACnC,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAAC,uBAAuB,CAAC,CAAC;IAC7D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IAED,OAAO,IAAA,iDAAoB,EAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QACxC,gBAAgB,CAAC,UAAU,CAAC;YAC1B,GAAG,gBAAgB,CAAC,OAAO;YAC3B,CAAC,GAAG,CAAC,EAAE,IAAI;SACZ,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC;YAErC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC1B,wEAAwE;gBACxE,sDAAsD;gBACtD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;gBACpB,gBAAgB,CAAC,UAAU,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED,gEAAgE;AAChE,SAAgB,aAAa,CAAC,GAAW;IACvC,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAAC,uBAAuB,CAAC,CAAC;IAC7D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AACvC,CAAC;AAOD,gEAAgE;AAChE,SAAgB,iBAAiB,CAAC,GAA2C;IAC3E,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAAC,uBAAuB,CAAC,CAAC;IAC7D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;IACpE,CAAC;IAED,gGAAgG;IAChG,MAAM,kBAAkB,GAAG,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,kBAAkB,EAAE,aAAa,CAAC,2CAA2C,CAAC,CAAC;IAEnG,OAAO;QACL,SAAS,EAAG,WAAgD,EAAE,OAAO,CAAC,aAAa,IAAI,KAAK;QAC5F,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM;KACtD,CAAC;AACJ,CAAC","sourcesContent":["import { createContext, type ReactNode, type RefObject, useContext, useMemo, useRef, useState } from 'react';\nimport { useServerEffectEvent } from '../../../utils/use-server-effect-event.js';\n\ninterface ColumnCollection {\n  columns: Record<string, ColumnData>;\n  setColumns: (columns: Record<string, ColumnData>) => void;\n}\n\ninterface ColumnData {\n  number?: number;\n  width?: string | number;\n  contentAlignment: ColumnContentAlignment;\n}\n\n/** Represents the direction of content alignment within a table column. */\nexport type ColumnContentAlignment = 'start' | 'center' | 'end';\n\nconst ColumnCollectionContext = createContext<ColumnCollection | null>(null);\n\nconst EMPTY_OBJECT = {};\n\nexport function ColumnCollectionProvider({ children }: { children: ReactNode }) {\n  // When column collection is updated, we want to trigger a re-render,\n  // but we also want immediate access to the updated collection during SSR.\n  // Hence why it is stored as both a ref and a state.\n  const columnsRef = useRef<Record<string, ColumnData>>(EMPTY_OBJECT);\n  const [_columns, _setColumns] = useState<Record<string, ColumnData>>(EMPTY_OBJECT);\n\n  const collection: ColumnCollection = useMemo(\n    () => ({\n      get columns() {\n        return columnsRef.current;\n      },\n      setColumns: (columns) => {\n        columnsRef.current = columns;\n        _setColumns(columns);\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [_columns],\n  );\n\n  return <ColumnCollectionContext.Provider value={collection}>{children}</ColumnCollectionContext.Provider>;\n}\n\ntype ColumnRegistrator = (key: string, data: ColumnData) => () => void;\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useColumnRegistration(): ColumnRegistrator {\n  const columnCollection = useContext(ColumnCollectionContext);\n  if (!columnCollection) {\n    throw new Error('Cannot use column registration outside of a table');\n  }\n\n  return useServerEffectEvent((key, data) => {\n    columnCollection.setColumns({\n      ...columnCollection.columns,\n      [key]: data,\n    });\n\n    return () => {\n      const { columns } = columnCollection;\n\n      if (columns[key] === data) {\n        // This is a temporary deletion before a context update, so this is fine\n        // eslint-disable-next-line react-hooks/react-compiler\n        delete columns[key];\n        columnCollection.setColumns({ ...columns });\n      }\n    };\n  });\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useColumnData(key: string): Readonly<ColumnData> | undefined {\n  const columnCollection = useContext(ColumnCollectionContext);\n  if (!columnCollection) {\n    throw new Error('Cannot use column data outside of a table');\n  }\n\n  return columnCollection.columns[key];\n}\n\nexport interface UseEmptyStateCell {\n  columnKey: string;\n  colSpan: number;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useEmptyStateCell(ref: RefObject<HTMLTableCellElement | null>): UseEmptyStateCell {\n  const columnCollection = useContext(ColumnCollectionContext);\n  if (!columnCollection) {\n    throw new Error('Cannot use empty state cell outside of a table');\n  }\n\n  // Empty state cell should have the same column key as the first column in the table, so find it\n  const parentTableElement = ref.current?.closest('table');\n  const firstColumn = parentTableElement?.querySelector('[data-cell-row-key][data-cell-column-key]');\n\n  return {\n    columnKey: (firstColumn as HTMLTableCellElement | undefined)?.dataset.cellColumnKey ?? '???',\n    colSpan: Object.keys(columnCollection.columns).length,\n  };\n}\n"]}
+{"version":3,"file":"column-collection.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, type ReactNode, type RefObject, useContext, useMemo, useRef, useState } from 'react';\nimport { useServerEffectEvent } from '../../../utils/use-server-effect-event.js';\n\ninterface ColumnCollection {\n  columns: Record<string, ColumnData>;\n  setColumns: (columns: Record<string, ColumnData>) => void;\n}\n\ninterface ColumnData {\n  number?: number;\n  width?: string | number;\n  contentAlignment: ColumnContentAlignment;\n}\n\n/** Represents the direction of content alignment within a table column. */\nexport type ColumnContentAlignment = 'start' | 'center' | 'end';\n\nconst ColumnCollectionContext = createContext<ColumnCollection | null>(null);\n\nconst EMPTY_OBJECT = {};\n\nexport function ColumnCollectionProvider({ children }: { children: ReactNode }) {\n  // When column collection is updated, we want to trigger a re-render,\n  // but we also want immediate access to the updated collection during SSR.\n  // Hence why it is stored as both a ref and a state.\n  const columnsRef = useRef<Record<string, ColumnData>>(EMPTY_OBJECT);\n  const [_columns, _setColumns] = useState<Record<string, ColumnData>>(EMPTY_OBJECT);\n\n  const collection: ColumnCollection = useMemo(\n    () => ({\n      get columns() {\n        return columnsRef.current;\n      },\n      setColumns: (columns) => {\n        columnsRef.current = columns;\n        _setColumns(columns);\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [_columns],\n  );\n\n  return <ColumnCollectionContext.Provider value={collection}>{children}</ColumnCollectionContext.Provider>;\n}\n\ntype ColumnRegistrator = (key: string, data: ColumnData) => () => void;\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useColumnRegistration(): ColumnRegistrator {\n  const columnCollection = useContext(ColumnCollectionContext);\n  if (!columnCollection) {\n    throw new Error('Cannot use column registration outside of a table');\n  }\n\n  return useServerEffectEvent((key, data) => {\n    columnCollection.setColumns({\n      ...columnCollection.columns,\n      [key]: data,\n    });\n\n    return () => {\n      const { columns } = columnCollection;\n\n      if (columns[key] === data) {\n        // This is a temporary deletion before a context update, so this is fine\n        delete columns[key];\n        columnCollection.setColumns({ ...columns });\n      }\n    };\n  });\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useColumnData(key: string): Readonly<ColumnData> | undefined {\n  const columnCollection = useContext(ColumnCollectionContext);\n  if (!columnCollection) {\n    throw new Error('Cannot use column data outside of a table');\n  }\n\n  return columnCollection.columns[key];\n}\n\nexport interface UseEmptyStateCell {\n  columnKey: string;\n  colSpan: number;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useEmptyStateCell(ref: RefObject<HTMLTableCellElement | null>): UseEmptyStateCell {\n  const columnCollection = useContext(ColumnCollectionContext);\n  if (!columnCollection) {\n    throw new Error('Cannot use empty state cell outside of a table');\n  }\n\n  // Empty state cell should have the same column key as the first column in the table, so find it\n  const parentTableElement = ref.current?.closest('table');\n  const firstColumn = parentTableElement?.querySelector('[data-cell-row-key][data-cell-column-key]');\n\n  return {\n    columnKey: (firstColumn as HTMLTableCellElement | undefined)?.dataset.cellColumnKey ?? '???',\n    colSpan: Object.keys(columnCollection.columns).length,\n  };\n}\n"]}

package/dist/commonjs/components/table/contexts/row-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"row-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/row-state.tsx"],"names":[],"mappings":";;AAWA,sDAuBC;AAGD,4CAOC;;AA5CD,6CAAmD;AACnD,iCAA2E;AAQ3E,MAAM,oBAAoB,GAAG,IAAA,qBAAa,EAAuB,IAAI,CAAC,CAAC;AAEvE,SAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,iBAAiB,GAMlB;IACC,MAAM,yBAAyB,GAAG,IAAA,sBAAc,EAAC,iBAAiB,CAAC,CAAC;IAEpE,MAAM,aAAa,GAAkB,IAAA,eAAO,EAC1C,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;QACN,UAAU;QACV,iBAAiB,EAAE,yBAAyB;KAC7C,CAAC,EACF,CAAC,MAAM,EAAE,UAAU,EAAE,yBAAyB,CAAC,CAChD,CAAC;IAEF,OAAO,uBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAAG,QAAQ,GAAiC,CAAC;AACzG,CAAC;AAED,gEAAgE;AAChE,SAAgB,gBAAgB;IAC9B,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,oBAAoB,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IAED,OAAO,aAAa,CAAC;AACvB,CAAC","sourcesContent":["import { useEffectEvent } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\n\nexport interface TableRowState {\n  rowKey: string;\n  isSelected?: boolean;\n  onSelectionToggle?: (value?: boolean) => void;\n}\n\nconst TableRowStateContext = createContext<TableRowState | null>(null);\n\nexport function TableRowStateProvider({\n  children,\n  rowKey,\n  isSelected,\n  onSelectionToggle,\n}: {\n  children: ReactNode;\n  rowKey: string;\n  isSelected?: boolean;\n  onSelectionToggle?: (value?: boolean) => void;\n}) {\n  const onSelectionToggleMemoized = useEffectEvent(onSelectionToggle);\n\n  const tableRowState: TableRowState = useMemo(\n    () => ({\n      rowKey,\n      isSelected,\n      onSelectionToggle: onSelectionToggleMemoized,\n    }),\n    [rowKey, isSelected, onSelectionToggleMemoized],\n  );\n\n  return <TableRowStateContext.Provider value={tableRowState}>{children}</TableRowStateContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableRowState(): TableRowState {\n  const tableRowState = useContext(TableRowStateContext);\n  if (!tableRowState) {\n    throw new Error('Cannot use table row state outside of a table row');\n  }\n\n  return tableRowState;\n}\n"]}
+{"version":3,"file":"row-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/row-state.tsx"],"names":[],"mappings":";;AAWA,sDAuBC;AAGD,4CAOC;;AA5CD,6CAAwE;AACxE,iCAA2E;AAQ3E,MAAM,oBAAoB,GAAG,IAAA,qBAAa,EAAuB,IAAI,CAAC,CAAC;AAEvE,SAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,iBAAiB,GAMlB;IACC,MAAM,yBAAyB,GAAG,IAAA,sBAAiB,EAAC,iBAAiB,CAAC,CAAC;IAEvE,MAAM,aAAa,GAAkB,IAAA,eAAO,EAC1C,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;QACN,UAAU;QACV,iBAAiB,EAAE,yBAAyB;KAC7C,CAAC,EACF,CAAC,MAAM,EAAE,UAAU,EAAE,yBAAyB,CAAC,CAChD,CAAC;IAEF,OAAO,uBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAAG,QAAQ,GAAiC,CAAC;AACzG,CAAC;AAED,gEAAgE;AAChE,SAAgB,gBAAgB;IAC9B,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,oBAAoB,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IAED,OAAO,aAAa,CAAC;AACvB,CAAC","sourcesContent":["import { useEffectEvent as useRACEffectEvent } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\n\nexport interface TableRowState {\n  rowKey: string;\n  isSelected?: boolean;\n  onSelectionToggle?: (value?: boolean) => void;\n}\n\nconst TableRowStateContext = createContext<TableRowState | null>(null);\n\nexport function TableRowStateProvider({\n  children,\n  rowKey,\n  isSelected,\n  onSelectionToggle,\n}: {\n  children: ReactNode;\n  rowKey: string;\n  isSelected?: boolean;\n  onSelectionToggle?: (value?: boolean) => void;\n}) {\n  const onSelectionToggleMemoized = useRACEffectEvent(onSelectionToggle);\n\n  const tableRowState: TableRowState = useMemo(\n    () => ({\n      rowKey,\n      isSelected,\n      onSelectionToggle: onSelectionToggleMemoized,\n    }),\n    [rowKey, isSelected, onSelectionToggleMemoized],\n  );\n\n  return <TableRowStateContext.Provider value={tableRowState}>{children}</TableRowStateContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableRowState(): TableRowState {\n  const tableRowState = useContext(TableRowStateContext);\n  if (!tableRowState) {\n    throw new Error('Cannot use table row state outside of a table row');\n  }\n\n  return tableRowState;\n}\n"]}

package/dist/commonjs/components/table/contexts/table-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":";;AAoBA,gDA0DC;AAGD,sCAOC;;AAxFD,6CAA0D;AAC1D,iCAA6F;AAC7F,qFAA8E;AAgB9E,MAAM,iBAAiB,GAAG,IAAA,qBAAa,EAAoB,IAAI,CAAC,CAAC;AAEjE,SAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GAOzB;IACC,+EAA+E;IAC/E,sDAAsD;IACtD,oDAAoD;IACpD,MAAM,2BAA2B,GAAG,IAAA,cAAM,EAAsB,SAAS,CAAC,CAAC;IAC3E,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,IAAA,gBAAQ,EAAsB,SAAS,CAAC,CAAC;IAE3G,MAAM,WAAW,GAAG,IAAA,aAAK,GAAE,CAAC;IAC5B,MAAM,QAAQ,GAAG,IAAA,+CAAoB,EAAC,OAAO,CAAC,CAAC;IAE/C,MAAM,gCAAgC,GAAG,IAAA,sBAAc,EAAC,wBAAwB,CAAC,CAAC;IAElF,MAAM,UAAU,GAAe,IAAA,eAAO,EACpC,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,wBAAwB,EAAE,gCAAgC;QAC1D,IAAI,wBAAwB;YAC1B,OAAO,2BAA2B,CAAC,OAAO,CAAC;QAC7C,CAAC;QACD,2BAA2B,CAAC,wBAA6C;YACvE,2BAA2B,CAAC,OAAO,GAAG,wBAAwB,CAAC;YAC/D,4BAA4B,CAAC,wBAAwB,CAAC,CAAC;QACzD,CAAC;KACF,CAAC;IACF,uDAAuD;IACvD;QACE,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,gCAAgC;QAChC,yBAAyB;KAC1B,CACF,CAAC;IAEF,OAAO,CACL,wBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,aAC1C,QAAQ,EACT,iCAAM,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,WAAW,YAC9C,QAAQ,CAAC,MAAM,CAAC,uBAAuB,CAAC,GACpC,IACoB,CAC9B,CAAC;AACJ,CAAC;AAED,gEAAgE;AAChE,SAAgB,aAAa;IAC3B,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["import { useEffectEvent, useId } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo, useRef, useState } from 'react';\nimport { useLocalizedMessages } from '../../../i18n/localization-provider.js';\n\n/** Represents the type of row selection allowed within a table. */\nexport type RowSelectionMode = 'single' | 'multiple' | 'none';\n\nexport interface TableState {\n  sortLabelId: string;\n  rowSelectionMode: RowSelectionMode;\n  areAllRowsSelected?: boolean;\n  areSomeRowsSelected?: boolean;\n  onAllRowsSelectionToggle?: (value?: boolean) => void;\n  /** The selection state that will be applied to the next focused row. */\n  pendingRowSelectionState?: boolean;\n  setPendingRowSelectionState: (value: boolean | undefined) => void;\n}\n\nconst TableStateContext = createContext<TableState | null>(null);\n\nexport function TableStateProvider({\n  children,\n  rowSelectionMode,\n  areAllRowsSelected,\n  areSomeRowsSelected,\n  onAllRowsSelectionToggle,\n}: {\n  children: ReactNode;\n  rowSelectionMode: RowSelectionMode;\n  areAllRowsSelected?: boolean;\n  areSomeRowsSelected?: boolean;\n  onAllRowsSelectionToggle?: (value?: boolean) => void;\n}) {\n  // When the pending selection state is updated, we want to trigger a re-render,\n  // but we also want immediate access to the new value.\n  // Hence why it is stored as both a ref and a state.\n  const pendingRowSelectionStateRef = useRef<boolean | undefined>(undefined);\n  const [_pendingRowSelectionState, _setPendingRowSelectionState] = useState<boolean | undefined>(undefined);\n\n  const sortLabelId = useId();\n  const messages = useLocalizedMessages('table');\n\n  const onAllRowsSelectionToggleMemoized = useEffectEvent(onAllRowsSelectionToggle);\n\n  const tableState: TableState = useMemo(\n    () => ({\n      sortLabelId,\n      rowSelectionMode,\n      areAllRowsSelected,\n      areSomeRowsSelected,\n      onAllRowsSelectionToggle: onAllRowsSelectionToggleMemoized,\n      get pendingRowSelectionState() {\n        return pendingRowSelectionStateRef.current;\n      },\n      setPendingRowSelectionState(pendingRowSelectionState: boolean | undefined) {\n        pendingRowSelectionStateRef.current = pendingRowSelectionState;\n        _setPendingRowSelectionState(pendingRowSelectionState);\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      sortLabelId,\n      rowSelectionMode,\n      areAllRowsSelected,\n      areSomeRowsSelected,\n      onAllRowsSelectionToggleMemoized,\n      _pendingRowSelectionState,\n    ],\n  );\n\n  return (\n    <TableStateContext.Provider value={tableState}>\n      {children}\n      <span style={{ display: 'none' }} id={sortLabelId}>\n        {messages.format('toggleColumnSortOrder')}\n      </span>\n    </TableStateContext.Provider>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableState(): TableState {\n  const tableState = useContext(TableStateContext);\n  if (!tableState) {\n    throw new Error('Cannot use table state outside of a table');\n  }\n\n  return tableState;\n}\n"]}
+{"version":3,"file":"table-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":";;AAoBA,gDA0DC;AAGD,sCAOC;;AAxFD,6CAA+E;AAC/E,iCAA6F;AAC7F,qFAA8E;AAgB9E,MAAM,iBAAiB,GAAG,IAAA,qBAAa,EAAoB,IAAI,CAAC,CAAC;AAEjE,SAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GAOzB;IACC,+EAA+E;IAC/E,sDAAsD;IACtD,oDAAoD;IACpD,MAAM,2BAA2B,GAAG,IAAA,cAAM,EAAsB,SAAS,CAAC,CAAC;IAC3E,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,IAAA,gBAAQ,EAAsB,SAAS,CAAC,CAAC;IAE3G,MAAM,WAAW,GAAG,IAAA,aAAK,GAAE,CAAC;IAC5B,MAAM,QAAQ,GAAG,IAAA,+CAAoB,EAAC,OAAO,CAAC,CAAC;IAE/C,MAAM,gCAAgC,GAAG,IAAA,sBAAiB,EAAC,wBAAwB,CAAC,CAAC;IAErF,MAAM,UAAU,GAAe,IAAA,eAAO,EACpC,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,wBAAwB,EAAE,gCAAgC;QAC1D,IAAI,wBAAwB;YAC1B,OAAO,2BAA2B,CAAC,OAAO,CAAC;QAC7C,CAAC;QACD,2BAA2B,CAAC,wBAA6C;YACvE,2BAA2B,CAAC,OAAO,GAAG,wBAAwB,CAAC;YAC/D,4BAA4B,CAAC,wBAAwB,CAAC,CAAC;QACzD,CAAC;KACF,CAAC;IACF,uDAAuD;IACvD;QACE,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,gCAAgC;QAChC,yBAAyB;KAC1B,CACF,CAAC;IAEF,OAAO,CACL,wBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,aAC1C,QAAQ,EACT,iCAAM,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,WAAW,YAC9C,QAAQ,CAAC,MAAM,CAAC,uBAAuB,CAAC,GACpC,IACoB,CAC9B,CAAC;AACJ,CAAC;AAED,gEAAgE;AAChE,SAAgB,aAAa;IAC3B,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["import { useEffectEvent as useRACEffectEvent, useId } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo, useRef, useState } from 'react';\nimport { useLocalizedMessages } from '../../../i18n/localization-provider.js';\n\n/** Represents the type of row selection allowed within a table. */\nexport type RowSelectionMode = 'single' | 'multiple' | 'none';\n\nexport interface TableState {\n  sortLabelId: string;\n  rowSelectionMode: RowSelectionMode;\n  areAllRowsSelected?: boolean;\n  areSomeRowsSelected?: boolean;\n  onAllRowsSelectionToggle?: (value?: boolean) => void;\n  /** The selection state that will be applied to the next focused row. */\n  pendingRowSelectionState?: boolean;\n  setPendingRowSelectionState: (value: boolean | undefined) => void;\n}\n\nconst TableStateContext = createContext<TableState | null>(null);\n\nexport function TableStateProvider({\n  children,\n  rowSelectionMode,\n  areAllRowsSelected,\n  areSomeRowsSelected,\n  onAllRowsSelectionToggle,\n}: {\n  children: ReactNode;\n  rowSelectionMode: RowSelectionMode;\n  areAllRowsSelected?: boolean;\n  areSomeRowsSelected?: boolean;\n  onAllRowsSelectionToggle?: (value?: boolean) => void;\n}) {\n  // When the pending selection state is updated, we want to trigger a re-render,\n  // but we also want immediate access to the new value.\n  // Hence why it is stored as both a ref and a state.\n  const pendingRowSelectionStateRef = useRef<boolean | undefined>(undefined);\n  const [_pendingRowSelectionState, _setPendingRowSelectionState] = useState<boolean | undefined>(undefined);\n\n  const sortLabelId = useId();\n  const messages = useLocalizedMessages('table');\n\n  const onAllRowsSelectionToggleMemoized = useRACEffectEvent(onAllRowsSelectionToggle);\n\n  const tableState: TableState = useMemo(\n    () => ({\n      sortLabelId,\n      rowSelectionMode,\n      areAllRowsSelected,\n      areSomeRowsSelected,\n      onAllRowsSelectionToggle: onAllRowsSelectionToggleMemoized,\n      get pendingRowSelectionState() {\n        return pendingRowSelectionStateRef.current;\n      },\n      setPendingRowSelectionState(pendingRowSelectionState: boolean | undefined) {\n        pendingRowSelectionStateRef.current = pendingRowSelectionState;\n        _setPendingRowSelectionState(pendingRowSelectionState);\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      sortLabelId,\n      rowSelectionMode,\n      areAllRowsSelected,\n      areSomeRowsSelected,\n      onAllRowsSelectionToggleMemoized,\n      _pendingRowSelectionState,\n    ],\n  );\n\n  return (\n    <TableStateContext.Provider value={tableState}>\n      {children}\n      <span style={{ display: 'none' }} id={sortLabelId}>\n        {messages.format('toggleColumnSortOrder')}\n      </span>\n    </TableStateContext.Provider>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableState(): TableState {\n  const tableState = useContext(TableStateContext);\n  if (!tableState) {\n    throw new Error('Cannot use table state outside of a table');\n  }\n\n  return tableState;\n}\n"]}

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

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

package/dist/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":"AAAA,YAAY,CAAC;;;;;;;;AAEb,8CAA6D;AAC7D,gDAA0D;AAC1D,gDAAwB;AACxB,iCAAgD;AAEhD,2CAAkD;AAClD,iEAO+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,qFAA6E;AAC7E,mEAA2D;AAC3D,wEAA4G;AAC5G,wDAAkD;AAElD,8EAAkG;AAClG,6CAA4F;AAiB5F,SAAS,iBAAiB,CACxB,EACE,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,UAAU,EACV,YAAY,EAAE,oBAAoB,EAClC,mBAAmB,EAAE,2BAA2B,EAChD,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAC3B,GAAG,KAAK,EACe,EACzB,GAAiC;IAEjC,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,0FAA0F,CAAC,CAAC;QAC3G,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,aAAa,GAAG,IAAA,+BAAoB,EAAC,OAAO,CAAC,CAAC;IAEpD,QAAQ;IAER,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,0BAAkB,EACxD,oBAAoB,EACpB,2BAA2B,IAAI,EAAE,EACjC,CAAC,eAAe,EAAE,EAAE;QAClB,iBAAiB,EAAE,CAAC,IAAI,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC;QAC9C,2HAA2H;QAC3H,kEAAkE;QAClE,oDAAoD;QACpD,eAAe,CAAC,gBAAgB,EAAE,CAAC;IACrC,CAAC,CACF,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAM,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE9E,aAAa;IAEb,MAAM,eAAe,GAAG,IAAA,6BAAsB,EAAC;QAC7C,KAAK,EAAE,WAAW;QAClB,SAAS;QACT,UAAU;QACV,IAAI;QACJ,QAAQ;QACR,kBAAkB,EAAE,QAAQ;KAC7B,CAAC,CAAC;IAEH,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GAAG,IAAA,qBAAQ,EAAC;QAC/E,YAAY,EAAE,SAAS;QACvB,iBAAiB,EAAE,cAAc;QACjC,kBAAkB,EAAE,eAAe;QACnC,cAAc,EAAE,WAAW;QAC3B,WAAW;QACX,YAAY,EAAE,YAAY,IAAI,eAAe,CAAC,iBAAiB,CAAC,gBAAgB;QAChF,SAAS,EAAE,SAAS,IAAI,eAAe,CAAC,iBAAiB,CAAC,SAAS;QACnE,KAAK;QACL,gBAAgB,EAAE,MAAM;QACxB,QAAQ;QACR,kBAAkB,EAAE,QAAQ;KAC7B,CAAC,CAAC;IAEH,kDAAkD;IAClD,MAAM,EAAE,EAAE,EAAE,GAAG,kBAAkB,EAAE,GAAG,UAAU,CAAC;IAEjD,MAAM,wBAAwB,GAAkC;QAC9D,IAAI;QACJ,IAAI;QACJ,SAAS,EAAE,SAAS,IAAI,eAAe,CAAC,iBAAiB,CAAC,SAAS;QACnE,UAAU,EAAE,UAAU,IAAI,WAAW,CAAC,IAAI,KAAK,CAAC;QAChD,eAAe;KAChB,CAAC;IAEF,OAAO,CACL,uBAAC,yCAAoB,OACf,IAAA,uBAAU,EAAC,KAAK,EAAE,kBAAkB,CAAC,EACzC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,yBAAyB,EAAE,gBAAgB,CAAC,EAC5D,KAAK,EAAE,YAAY,EACnB,YAAY,EAAE,YAAY,EAC1B,iBAAiB,EAAE,eAAe,YAElC,wBAAC,gCAAW,IACV,MAAM,EAAE;gBACN,CAAC,oCAAe,EAAE,EAAE,GAAG,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;gBACzD,CAAC,mCAAc,EAAE,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,iBAAiB,EAAE,EAAE,CAAC;gBAC/F,CAAC,yCAAoB,EAAE,eAAe,CAAC,iBAAiB,CAAC;gBACzD,CAAC,qCAAwB,EAAE,wBAAwB,CAAC;aACrD,aAED,wBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,aACnC,KAAK,EAKL,UAAU,IAAI,uBAAC,4CAAc,cAAE,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,GAAkB,IACnE,EACjB,uBAAC,gBAAK,IAAC,GAAG,EAAE,CAAC,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,kBACvC,QAAQ,GACH,EACR,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC9C,GACO,CACxB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,kBAAkB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC,CAAC;AAE/D,+CAAiB","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/commonjs/components/typography/link.js

@@ -14,7 +14,7 @@ const utils_js_1 = require("./utils.js");
 // Used to prevent word wrap between icons and text
 const WORD_JOINER = '\u2060';
 function Link({ children, iconStart, iconEnd, UNSAFE_className, UNSAFE_style, variant, fontStyle, alignment, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { ...props, ref: ref, className: (0, clsx_1.default)('cim-link', (0, utils_js_1.textStyle)({ variant, fontStyle, alignment }), UNSAFE_className), style: UNSAFE_style, children: [iconStart && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "cim-link-icon", children: iconStart }), WORD_JOINER] })), (0, jsx_runtime_1.jsx)("span", { className: "cim-link-text", children: children }), iconEnd && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [WORD_JOINER, (0, jsx_runtime_1.jsx)("span", { className: "cim-link-icon", children: iconEnd })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { ...props, ref: ref, className: (0, clsx_1.default)('cim-link', (0, utils_js_1.textStyle)({ tone: 'accent', variant, fontStyle, alignment }), UNSAFE_className), style: UNSAFE_style, children: [iconStart && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "cim-link-icon", children: iconStart }), WORD_JOINER] })), (0, jsx_runtime_1.jsx)("span", { className: "cim-link-text", children: children }), iconEnd && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [WORD_JOINER, (0, jsx_runtime_1.jsx)("span", { className: "cim-link-icon", children: iconEnd })] }))] }));
 }
 /**
  * Displays a textual link that allows users to navigate to another page or resource.

package/dist/commonjs/components/typography/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../src/components/typography/link.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAG3D,yCAAuC;AAEvC,mDAAmD;AACnD,MAAM,WAAW,GAAG,QAAQ,CAAC;AAa7B,SAAS,IAAI,CACX,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa,EACpH,GAAoC;IAEpC,OAAO,CACL,wBAAC,4BAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,gBAAgB,CAAC,EAC3F,KAAK,EAAE,YAAY,aAElB,SAAS,IAAI,CACZ,6DACE,iCAAM,SAAS,EAAC,eAAe,YAAE,SAAS,GAAQ,EACjD,WAAW,IACX,CACJ,EACD,iCAAM,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAQ,EAChD,OAAO,IAAI,CACV,6DACG,WAAW,EACZ,iCAAM,SAAS,EAAC,eAAe,YAAE,OAAO,GAAQ,IAC/C,CACJ,IACO,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,qBAAI","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport type { BaseTypographyProps, TextStyleOptions } from './types.js';\nimport { textStyle } from './utils.js';\n\n// Used to prevent word wrap between icons and text\nconst WORD_JOINER = '\\u2060';\n\nexport interface LinkProps\n  extends Omit<BaseTypographyProps, 'id'>,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<TextStyleOptions, 'variant' | 'fontStyle' | 'alignment'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** An icon displayed before the link text. */\n  iconStart?: ReactNode;\n  /** An icon displayed after the link text. */\n  iconEnd?: ReactNode;\n}\n\nfunction Link(\n  { children, iconStart, iconEnd, UNSAFE_className, UNSAFE_style, variant, fontStyle, alignment, ...props }: LinkProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-link', textStyle({ variant, fontStyle, alignment }), UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      {iconStart && (\n        <>\n          <span className=\"cim-link-icon\">{iconStart}</span>\n          {WORD_JOINER}\n        </>\n      )}\n      <span className=\"cim-link-text\">{children}</span>\n      {iconEnd && (\n        <>\n          {WORD_JOINER}\n          <span className=\"cim-link-icon\">{iconEnd}</span>\n        </>\n      )}\n    </RACLink>\n  );\n}\n\n/**\n * Displays a textual link that allows users to navigate to another page or resource.\n *\n * See [link usage guidelines](https://ui.cimpress.io/components/link/).\n */\nconst _Link = withStyleProps(forwardRef(Link), 'Link');\n\nexport { _Link as Link };\n"]}
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../src/components/typography/link.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAG3D,yCAAuC;AAEvC,mDAAmD;AACnD,MAAM,WAAW,GAAG,QAAQ,CAAC;AAa7B,SAAS,IAAI,CACX,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa,EACpH,GAAoC;IAEpC,OAAO,CACL,wBAAC,4BAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,EAAE,IAAA,oBAAS,EAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,gBAAgB,CAAC,EAC3G,KAAK,EAAE,YAAY,aAElB,SAAS,IAAI,CACZ,6DACE,iCAAM,SAAS,EAAC,eAAe,YAAE,SAAS,GAAQ,EACjD,WAAW,IACX,CACJ,EACD,iCAAM,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAQ,EAChD,OAAO,IAAI,CACV,6DACG,WAAW,EACZ,iCAAM,SAAS,EAAC,eAAe,YAAE,OAAO,GAAQ,IAC/C,CACJ,IACO,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,qBAAI","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport type { BaseTypographyProps, TextStyleOptions } from './types.js';\nimport { textStyle } from './utils.js';\n\n// Used to prevent word wrap between icons and text\nconst WORD_JOINER = '\\u2060';\n\nexport interface LinkProps\n  extends Omit<BaseTypographyProps, 'id'>,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<TextStyleOptions, 'variant' | 'fontStyle' | 'alignment'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** An icon displayed before the link text. */\n  iconStart?: ReactNode;\n  /** An icon displayed after the link text. */\n  iconEnd?: ReactNode;\n}\n\nfunction Link(\n  { children, iconStart, iconEnd, UNSAFE_className, UNSAFE_style, variant, fontStyle, alignment, ...props }: LinkProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-link', textStyle({ tone: 'accent', variant, fontStyle, alignment }), UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      {iconStart && (\n        <>\n          <span className=\"cim-link-icon\">{iconStart}</span>\n          {WORD_JOINER}\n        </>\n      )}\n      <span className=\"cim-link-text\">{children}</span>\n      {iconEnd && (\n        <>\n          {WORD_JOINER}\n          <span className=\"cim-link-icon\">{iconEnd}</span>\n        </>\n      )}\n    </RACLink>\n  );\n}\n\n/**\n * Displays a textual link that allows users to navigate to another page or resource.\n *\n * See [link usage guidelines](https://ui.cimpress.io/components/link/).\n */\nconst _Link = withStyleProps(forwardRef(Link), 'Link');\n\nexport { _Link as Link };\n"]}

package/dist/commonjs/icons/align-horizontal-center.d.ts

@@ -0,0 +1,8 @@
+import type { IconProps } from '../components/types.js';
+/** Renders an SVG icon. */
+declare const SvgAlignHorizontalCenter: {
+    ({ size, "aria-hidden": ariaHidden, tone, UNSAFE_className, UNSAFE_style, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SvgAlignHorizontalCenter;
+//# sourceMappingURL=align-horizontal-center.d.ts.map

package/dist/commonjs/icons/align-horizontal-center.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"align-horizontal-center.d.ts","sourceRoot":"","sources":["../../../src/icons/align-horizontal-center.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGxD,2BAA2B;AAC3B,QAAA,MAAM,wBAAwB;yFAO3B,SAAS;;CAmBX,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/commonjs/icons/align-horizontal-center.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const tone_js_1 = require("../utils/style/tone.js");
+const displayName = 'IconAlignHorizontalCenter';
+/** Renders an SVG icon. */
+const SvgAlignHorizontalCenter = ({ size, 'aria-hidden': ariaHidden, tone, UNSAFE_className, UNSAFE_style, ...rest }) => {
+    const props = {
+        ...rest,
+        'aria-hidden': ariaHidden ?? (rest['aria-label'] == null && rest['aria-labelledby'] == null),
+        className: (0, clsx_1.default)('cim-icon', tone && (0, tone_js_1.fgTone)(tone), UNSAFE_className),
+        style: UNSAFE_style,
+        width: size != null ? size + 'px' : '1em',
+        height: size != null ? size + 'px' : '1em',
+    };
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "data-icon": "true", fill: "currentColor", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", d: "M26 25a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-9v-2h4a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-4V4a1 1 0 1 0-2 0v3h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v2H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h9v3a1 1 0 1 0 2 0v-3zm0-6v4H6v-4zM21 9v4H11V9z", clipRule: "evenodd" }) }));
+};
+SvgAlignHorizontalCenter.displayName = displayName;
+exports.default = SvgAlignHorizontalCenter;
+//# sourceMappingURL=align-horizontal-center.js.map

package/dist/commonjs/icons/align-horizontal-center.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"align-horizontal-center.js","sourceRoot":"","sources":["../../../src/icons/align-horizontal-center.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAwB;AAExB,oDAAgD;AAChD,MAAM,WAAW,GAAG,2BAA2B,CAAC;AAChD,2BAA2B;AAC3B,MAAM,wBAAwB,GAAG,CAAC,EAChC,IAAI,EACJ,aAAa,EAAE,UAAU,EACzB,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,GAAG,IAAI,EACG,EAAE,EAAE;IACd,MAAM,KAAK,GAAG;QACZ,GAAG,IAAI;QACP,aAAa,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC;QAC5F,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,EAAE,IAAI,IAAI,IAAA,gBAAM,EAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;QACnE,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK;QACzC,MAAM,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK;KAC3C,CAAC;IACF,OAAO,CACL,gCAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,eAAW,MAAM,EAAC,IAAI,EAAC,cAAc,KAAK,KAAK,YACxG,iCACE,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,sNAAsN,EACxN,QAAQ,EAAC,SAAS,GAClB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AACF,wBAAwB,CAAC,WAAW,GAAG,WAAW,CAAC;AACnD,kBAAe,wBAAwB,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { IconProps } from '../components/types.js';\nimport { fgTone } from '../utils/style/tone.js';\nconst displayName = 'IconAlignHorizontalCenter';\n/** Renders an SVG icon. */\nconst SvgAlignHorizontalCenter = ({\n  size,\n  'aria-hidden': ariaHidden,\n  tone,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...rest\n}: IconProps) => {\n  const props = {\n    ...rest,\n    'aria-hidden': ariaHidden ?? (rest['aria-label'] == null && rest['aria-labelledby'] == null),\n    className: clsx('cim-icon', tone && fgTone(tone), UNSAFE_className),\n    style: UNSAFE_style,\n    width: size != null ? size + 'px' : '1em',\n    height: size != null ? size + 'px' : '1em',\n  };\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" data-icon=\"true\" fill=\"currentColor\" {...props}>\n      <path\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        d=\"M26 25a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-9v-2h4a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-4V4a1 1 0 1 0-2 0v3h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v2H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h9v3a1 1 0 1 0 2 0v-3zm0-6v4H6v-4zM21 9v4H11V9z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n};\nSvgAlignHorizontalCenter.displayName = displayName;\nexport default SvgAlignHorizontalCenter;\n"]}

package/dist/commonjs/icons/align-horizontal-left.d.ts

@@ -0,0 +1,8 @@
+import type { IconProps } from '../components/types.js';
+/** Renders an SVG icon. */
+declare const SvgAlignHorizontalLeft: {
+    ({ size, "aria-hidden": ariaHidden, tone, UNSAFE_className, UNSAFE_style, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SvgAlignHorizontalLeft;
+//# sourceMappingURL=align-horizontal-left.d.ts.map

package/dist/commonjs/icons/align-horizontal-left.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"align-horizontal-left.d.ts","sourceRoot":"","sources":["../../../src/icons/align-horizontal-left.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGxD,2BAA2B;AAC3B,QAAA,MAAM,sBAAsB;yFAOzB,SAAS;;CAmBX,CAAC;AAEF,eAAe,sBAAsB,CAAC"}