@cimpress-ui/react 1.17.0 → 1.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/commonjs/components/page-layout/page-layout.js +1 -1
  2. package/dist/commonjs/components/page-layout/page-layout.js.map +1 -1
  3. package/dist/commonjs/components/table/contexts/column-collection.d.ts +2 -2
  4. package/dist/commonjs/components/table/contexts/column-collection.d.ts.map +1 -1
  5. package/dist/commonjs/components/table/contexts/column-collection.js +4 -4
  6. package/dist/commonjs/components/table/contexts/column-collection.js.map +1 -1
  7. package/dist/commonjs/components/table/contexts/loading.d.ts +7 -0
  8. package/dist/commonjs/components/table/contexts/loading.d.ts.map +1 -0
  9. package/dist/commonjs/components/table/contexts/loading.js +15 -0
  10. package/dist/commonjs/components/table/contexts/loading.js.map +1 -0
  11. package/dist/commonjs/components/table/hooks/use-selectable-row.d.ts +3 -0
  12. package/dist/commonjs/components/table/hooks/use-selectable-row.d.ts.map +1 -1
  13. package/dist/commonjs/components/table/hooks/use-selectable-row.js +2 -0
  14. package/dist/commonjs/components/table/hooks/use-selectable-row.js.map +1 -1
  15. package/dist/commonjs/components/table/table-body-row.d.ts.map +1 -1
  16. package/dist/commonjs/components/table/table-body-row.js +6 -5
  17. package/dist/commonjs/components/table/table-body-row.js.map +1 -1
  18. package/dist/commonjs/components/table/table-body.d.ts +1 -1
  19. package/dist/commonjs/components/table/table-body.d.ts.map +1 -1
  20. package/dist/commonjs/components/table/table-body.js +13 -1
  21. package/dist/commonjs/components/table/table-body.js.map +1 -1
  22. package/dist/commonjs/components/table/table-empty-state.js +1 -1
  23. package/dist/commonjs/components/table/table-empty-state.js.map +1 -1
  24. package/dist/commonjs/components/table/table.d.ts +5 -0
  25. package/dist/commonjs/components/table/table.d.ts.map +1 -1
  26. package/dist/commonjs/components/table/table.js +3 -2
  27. package/dist/commonjs/components/table/table.js.map +1 -1
  28. package/dist/commonjs/i18n/messages/en-US.js +1 -1
  29. package/dist/commonjs/i18n/messages/en-US.js.map +1 -1
  30. package/dist/commonjs/i18n/messages/types.d.ts +2 -0
  31. package/dist/commonjs/i18n/messages/types.d.ts.map +1 -1
  32. package/dist/commonjs/i18n/messages/types.js.map +1 -1
  33. package/dist/esm/components/page-layout/page-layout.js +1 -1
  34. package/dist/esm/components/page-layout/page-layout.js.map +1 -1
  35. package/dist/esm/components/table/contexts/column-collection.d.ts +2 -2
  36. package/dist/esm/components/table/contexts/column-collection.d.ts.map +1 -1
  37. package/dist/esm/components/table/contexts/column-collection.js +3 -3
  38. package/dist/esm/components/table/contexts/column-collection.js.map +1 -1
  39. package/dist/esm/components/table/contexts/loading.d.ts +7 -0
  40. package/dist/esm/components/table/contexts/loading.d.ts.map +1 -0
  41. package/dist/esm/components/table/contexts/loading.js +11 -0
  42. package/dist/esm/components/table/contexts/loading.js.map +1 -0
  43. package/dist/esm/components/table/hooks/use-selectable-row.d.ts +3 -0
  44. package/dist/esm/components/table/hooks/use-selectable-row.d.ts.map +1 -1
  45. package/dist/esm/components/table/hooks/use-selectable-row.js +2 -0
  46. package/dist/esm/components/table/hooks/use-selectable-row.js.map +1 -1
  47. package/dist/esm/components/table/table-body-row.d.ts.map +1 -1
  48. package/dist/esm/components/table/table-body-row.js +7 -6
  49. package/dist/esm/components/table/table-body-row.js.map +1 -1
  50. package/dist/esm/components/table/table-body.d.ts +1 -1
  51. package/dist/esm/components/table/table-body.d.ts.map +1 -1
  52. package/dist/esm/components/table/table-body.js +14 -2
  53. package/dist/esm/components/table/table-body.js.map +1 -1
  54. package/dist/esm/components/table/table-empty-state.js +2 -2
  55. package/dist/esm/components/table/table-empty-state.js.map +1 -1
  56. package/dist/esm/components/table/table.d.ts +5 -0
  57. package/dist/esm/components/table/table.d.ts.map +1 -1
  58. package/dist/esm/components/table/table.js +3 -2
  59. package/dist/esm/components/table/table.js.map +1 -1
  60. package/dist/esm/i18n/messages/en-US.js +1 -1
  61. package/dist/esm/i18n/messages/en-US.js.map +1 -1
  62. package/dist/esm/i18n/messages/types.d.ts +2 -0
  63. package/dist/esm/i18n/messages/types.d.ts.map +1 -1
  64. package/dist/esm/i18n/messages/types.js.map +1 -1
  65. package/dist-styles/core.css +1 -1
  66. package/dist-styles/styles.css +1 -1
  67. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"column-collection.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAQ7G,UAAU,UAAU;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gBAAgB,EAAE,sBAAsB,CAAC;CAC1C;AAED,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAMhE,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsB7E;AAED,KAAK,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,MAAM,IAAI,CAAC;AAGvE,wBAAgB,qBAAqB,IAAI,iBAAiB,CAsBzD;AAGD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,SAAS,CAO3E;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAGD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAchG"}
1
+ {"version":3,"file":"column-collection.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAQ7G,UAAU,UAAU;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gBAAgB,EAAE,sBAAsB,CAAC;CAC1C;AAED,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAMhE,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsB7E;AAED,KAAK,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,MAAM,IAAI,CAAC;AAGvE,wBAAgB,qBAAqB,IAAI,iBAAiB,CAsBzD;AAGD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,SAAS,CAO3E;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAGD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,gBAAgB,CAc9F"}
@@ -52,12 +52,12 @@ export function useColumnData(key) {
52
52
  return columnCollection.columns[key];
53
53
  }
54
54
  // eslint-disable-next-line react-refresh/only-export-components
55
- export function useEmptyStateCell(ref) {
55
+ export function useFullWidthCell(ref) {
56
56
  const columnCollection = useContext(ColumnCollectionContext);
57
57
  if (!columnCollection) {
58
- throw new Error('Cannot use empty state cell outside of a table');
58
+ throw new Error('Cannot use full width cell outside of a table');
59
59
  }
60
- // Empty state cell should have the same column key as the first column in the table, so find it
60
+ // Full width cell should have the same column key as the first column in the table, so find it
61
61
  const parentTableElement = ref.current?.closest('table');
62
62
  const firstColumn = parentTableElement?.querySelector('[data-cell-row-key][data-cell-column-key]');
63
63
  return {
@@ -1 +1 @@
1
- {"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"]}
1
+ {"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 UseFullWidthCell {\n columnKey: string;\n colSpan: number;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useFullWidthCell(ref: RefObject<HTMLTableCellElement | null>): UseFullWidthCell {\n const columnCollection = useContext(ColumnCollectionContext);\n if (!columnCollection) {\n throw new Error('Cannot use full width cell outside of a table');\n }\n\n // Full width 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"]}
@@ -0,0 +1,7 @@
1
+ import { type ReactNode } from 'react';
2
+ export declare function TableLoadingProvider({ children, isLoading }: {
3
+ children: ReactNode;
4
+ isLoading: boolean;
5
+ }): import("react/jsx-runtime").JSX.Element;
6
+ export declare function useTableLoading(): boolean;
7
+ //# sourceMappingURL=loading.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"loading.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAIlE,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,2CAExG;AAGD,wBAAgB,eAAe,IAAI,OAAO,CAEzC"}
@@ -0,0 +1,11 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { createContext, useContext } from 'react';
3
+ const TableLoadingContext = createContext(false);
4
+ export function TableLoadingProvider({ children, isLoading }) {
5
+ return _jsx(TableLoadingContext.Provider, { value: isLoading, children: children });
6
+ }
7
+ // eslint-disable-next-line react-refresh/only-export-components
8
+ export function useTableLoading() {
9
+ return useContext(TableLoadingContext);
10
+ }
11
+ //# sourceMappingURL=loading.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"loading.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/loading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,mBAAmB,GAAG,aAAa,CAAU,KAAK,CAAC,CAAC;AAE1D,MAAM,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA+C;IACvG,OAAO,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,YAAG,QAAQ,GAAgC,CAAC;AACnG,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,eAAe;IAC7B,OAAO,UAAU,CAAC,mBAAmB,CAAC,CAAC;AACzC,CAAC","sourcesContent":["import { createContext, type ReactNode, useContext } from 'react';\n\nconst TableLoadingContext = createContext<boolean>(false);\n\nexport function TableLoadingProvider({ children, isLoading }: { children: ReactNode; isLoading: boolean }) {\n return <TableLoadingContext.Provider value={isLoading}>{children}</TableLoadingContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableLoading(): boolean {\n return useContext(TableLoadingContext);\n}\n"]}
@@ -1,6 +1,9 @@
1
1
  import type { NativeElementProps } from '../../types.js';
2
+ import { type RowSelectionMode } from '../contexts/table-state.js';
2
3
  export interface UseSelectableRow {
3
4
  rowProps: NativeElementProps<HTMLTableRowElement>;
5
+ isSelected?: boolean;
6
+ rowSelectionMode: RowSelectionMode;
4
7
  }
5
8
  export declare function useSelectableRow(): UseSelectableRow;
6
9
  //# sourceMappingURL=use-selectable-row.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"use-selectable-row.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAIzD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACnD;AAED,wBAAgB,gBAAgB,IAAI,gBAAgB,CAoCnD"}
1
+ {"version":3,"file":"use-selectable-row.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,4BAA4B,CAAC;AAElF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,wBAAgB,gBAAgB,IAAI,gBAAgB,CAsCnD"}
@@ -32,6 +32,8 @@ export function useSelectableRow() {
32
32
  };
33
33
  return {
34
34
  rowProps,
35
+ isSelected,
36
+ rowSelectionMode,
35
37
  };
36
38
  }
37
39
  //# sourceMappingURL=use-selectable-row.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"use-selectable-row.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAM3D,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,aAAa,EAAE,CAAC;IAC1E,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE7D,0CAA0C;IAC1C,MAAM,gBAAgB,GAAyB,CAAC,CAAC,EAAE,EAAE;QACnD,kDAAkD;QAClD,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAiB,CAAC,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;YAChC,kCAAkC;YAClC,iBAAiB,EAAE,EAAE,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;YAC3G,sCAAsC;YACtC,0FAA0F;YAC1F,mHAAmH;YACnH,2BAA2B,CAAC,UAAU,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;aAAM,CAAC;YACN,6FAA6F;YAC7F,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAA4C;QACxD,gBAAgB,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;KAC7E,CAAC;IAEF,OAAO;QACL,QAAQ;KACT,CAAC;AACJ,CAAC","sourcesContent":["import type { KeyboardEventHandler } from 'react';\nimport type { NativeElementProps } from '../../types.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\n\nexport interface UseSelectableRow {\n rowProps: NativeElementProps<HTMLTableRowElement>;\n}\n\nexport function useSelectableRow(): UseSelectableRow {\n const { rowSelectionMode, setPendingRowSelectionState } = useTableState();\n const { isSelected, onSelectionToggle } = useTableRowState();\n\n // Handles row selection using a keyboard.\n const onKeyDownCapture: KeyboardEventHandler = (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target as Element)) {\n return;\n }\n\n if (e.key === ' ' && e.shiftKey) {\n // Toggle selection of current row\n onSelectionToggle?.();\n } else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.shiftKey && rowSelectionMode === 'multiple') {\n // Extend selection up/down by one row\n // We're not going to stop propagation so that the arrow navigation handler runs as usual,\n // and we'll set a special state variable so that the selection state gets updated when the new row receives focus.\n setPendingRowSelectionState(isSelected);\n return;\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 rowProps: NativeElementProps<HTMLTableRowElement> = {\n onKeyDownCapture: rowSelectionMode !== 'none' ? onKeyDownCapture : undefined,\n };\n\n return {\n rowProps,\n };\n}\n"]}
1
+ {"version":3,"file":"use-selectable-row.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAyB,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQlF,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,aAAa,EAAE,CAAC;IAC1E,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE7D,0CAA0C;IAC1C,MAAM,gBAAgB,GAAyB,CAAC,CAAC,EAAE,EAAE;QACnD,kDAAkD;QAClD,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAiB,CAAC,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;YAChC,kCAAkC;YAClC,iBAAiB,EAAE,EAAE,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;YAC3G,sCAAsC;YACtC,0FAA0F;YAC1F,mHAAmH;YACnH,2BAA2B,CAAC,UAAU,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;aAAM,CAAC;YACN,6FAA6F;YAC7F,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAA4C;QACxD,gBAAgB,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;KAC7E,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,UAAU;QACV,gBAAgB;KACjB,CAAC;AACJ,CAAC","sourcesContent":["import type { KeyboardEventHandler } from 'react';\nimport type { NativeElementProps } from '../../types.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { type RowSelectionMode, useTableState } from '../contexts/table-state.js';\n\nexport interface UseSelectableRow {\n rowProps: NativeElementProps<HTMLTableRowElement>;\n isSelected?: boolean;\n rowSelectionMode: RowSelectionMode;\n}\n\nexport function useSelectableRow(): UseSelectableRow {\n const { rowSelectionMode, setPendingRowSelectionState } = useTableState();\n const { isSelected, onSelectionToggle } = useTableRowState();\n\n // Handles row selection using a keyboard.\n const onKeyDownCapture: KeyboardEventHandler = (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target as Element)) {\n return;\n }\n\n if (e.key === ' ' && e.shiftKey) {\n // Toggle selection of current row\n onSelectionToggle?.();\n } else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.shiftKey && rowSelectionMode === 'multiple') {\n // Extend selection up/down by one row\n // We're not going to stop propagation so that the arrow navigation handler runs as usual,\n // and we'll set a special state variable so that the selection state gets updated when the new row receives focus.\n setPendingRowSelectionState(isSelected);\n return;\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 rowProps: NativeElementProps<HTMLTableRowElement> = {\n onKeyDownCapture: rowSelectionMode !== 'none' ? onKeyDownCapture : undefined,\n };\n\n return {\n rowProps,\n isSelected,\n rowSelectionMode,\n };\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAoBD;;;;GAIG;AACH,QAAA,MAAM,aAAa,uHAA2C,CAAC;AAwB/D,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC"}
1
+ {"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAoBD;;;;GAIG;AACH,QAAA,MAAM,aAAa,uHAA2C,CAAC;AA6B/D,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC"}
@@ -1,9 +1,10 @@
1
1
  'use client';
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import { mergeProps, useId } from '@react-aria/utils';
4
+ import { useHover } from 'react-aria';
4
5
  import { forwardRef } from '../../forward-ref.js';
5
- import { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';
6
- import { useTableState } from './contexts/table-state.js';
6
+ import { useTableLoading } from './contexts/loading.js';
7
+ import { TableRowStateProvider } from './contexts/row-state.js';
7
8
  import { useSelectableRow } from './hooks/use-selectable-row.js';
8
9
  function TableBodyRow({ isSelected, onSelectionToggle, ...props }, ref) {
9
10
  const rowKey = useId();
@@ -16,10 +17,10 @@ function TableBodyRow({ isSelected, onSelectionToggle, ...props }, ref) {
16
17
  */
17
18
  const _TableBodyRow = forwardRef(TableBodyRow, 'TableBodyRow');
18
19
  function TableBodyRowInner({ props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }, forwardedRef, }) {
19
- const { rowSelectionMode } = useTableState();
20
- const { isSelected } = useTableRowState();
21
- const { rowProps } = useSelectableRow();
22
- return (_jsx("tr", { ...mergeProps(rowProps, props), ref: forwardedRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, "aria-selected": rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined, children: children }));
20
+ const { rowProps, isSelected, rowSelectionMode } = useSelectableRow();
21
+ const { hoverProps, isHovered } = useHover({});
22
+ const isLoading = useTableLoading();
23
+ return (_jsx("tr", { ...mergeProps(rowProps, hoverProps, props), inert: isLoading ? '' : undefined, ref: forwardedRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, "aria-selected": rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined, "data-hovered": isHovered || undefined, "data-selected": isSelected || undefined, children: children }));
23
24
  }
24
25
  export { _TableBodyRow as TableBodyRow };
25
26
  //# sourceMappingURL=table-body-row.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"table-body-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAiCjE,SAAS,YAAY,CACnB,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAqB,EAC9D,GAAsC;IAEtC,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,YACjG,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GAChC,CACzB,CAAC;AACJ,CAAC;AAOD;;;;GAIG;AACH,MAAM,aAAa,GAAG,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAE/D,SAAS,iBAAiB,CAAC,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACxE,YAAY,GACW;IACvB,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAC7C,MAAM,EAAE,UAAU,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC1C,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAExC,OAAO,CACL,gBACM,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,EAC/B,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,SAAS,mBACT,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,YAE7E,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableState } from './contexts/table-state.js';\nimport { useSelectableRow } from './hooks/use-selectable-row.js';\n\nexport interface TableBodyRowProps extends CommonProps {\n /** The cells that belong to this row. */\n children: ReactNode;\n /**\n * The row's position within the full dataset, including headers.\n *\n * Provide this value if your table presents a subset of rows, such as when using pagination.\n *\n * This number must be:\n * - greater than or equal to `1`\n * - greater than the `rowNumber` of any previous rows\n * - less than or equal to the `totalRowCount` of the parent `Table`\n *\n * Use together with `totalRowCount` on the `Table` component.\n */\n rowNumber?: number;\n /**\n * Whether the row is selected.\n *\n * This value will be ignored if `rowSelectionMode` on the `Table` component is set to `'none'`.\n */\n isSelected?: boolean;\n /**\n * A function called when the row's selection state should change.\n *\n * If called without an argument, you are free to pick the new selection state based on your own logic.\n * If called with an argument, you must set the selection state to the provided value.\n */\n onSelectionToggle?: (value?: boolean) => void;\n}\n\nfunction TableBodyRow(\n { isSelected, onSelectionToggle, ...props }: TableBodyRowProps,\n ref: ForwardedRef<HTMLTableRowElement>,\n) {\n const rowKey = useId();\n\n return (\n <TableRowStateProvider rowKey={rowKey} isSelected={isSelected} onSelectionToggle={onSelectionToggle}>\n <TableBodyRowInner props={props} forwardedRef={ref} />\n </TableRowStateProvider>\n );\n}\n\ninterface TableBodyRowInnerProps {\n props: Omit<TableBodyRowProps, 'isSelected' | 'onSelectionToggle'>;\n forwardedRef: ForwardedRef<HTMLTableRowElement>;\n}\n\n/**\n * Renders a row within a table body.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBodyRow = forwardRef(TableBodyRow, 'TableBodyRow');\n\nfunction TableBodyRowInner({\n props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props },\n forwardedRef,\n}: TableBodyRowInnerProps) {\n const { rowSelectionMode } = useTableState();\n const { isSelected } = useTableRowState();\n const { rowProps } = useSelectableRow();\n\n return (\n <tr\n {...mergeProps(rowProps, props)}\n ref={forwardedRef}\n className={UNSAFE_className}\n style={UNSAFE_style}\n aria-rowindex={rowNumber}\n aria-selected={rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined}\n >\n {children}\n </tr>\n );\n}\n\nexport { _TableBodyRow as TableBodyRow };\n"]}
1
+ {"version":3,"file":"table-body-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAiCjE,SAAS,YAAY,CACnB,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAqB,EAC9D,GAAsC;IAEtC,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,YACjG,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GAChC,CACzB,CAAC;AACJ,CAAC;AAOD;;;;GAIG;AACH,MAAM,aAAa,GAAG,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAE/D,SAAS,iBAAiB,CAAC,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACxE,YAAY,GACW;IACvB,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;IAEpC,OAAO,CACL,gBACM,UAAU,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,EAGrC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACvC,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,SAAS,mBACT,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,kBAChE,SAAS,IAAI,SAAS,mBACrB,UAAU,IAAI,SAAS,YAErC,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { useHover } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useTableLoading } from './contexts/loading.js';\nimport { TableRowStateProvider } from './contexts/row-state.js';\nimport { useSelectableRow } from './hooks/use-selectable-row.js';\n\nexport interface TableBodyRowProps extends CommonProps {\n /** The cells that belong to this row. */\n children: ReactNode;\n /**\n * The row's position within the full dataset, including headers.\n *\n * Provide this value if your table presents a subset of rows, such as when using pagination.\n *\n * This number must be:\n * - greater than or equal to `1`\n * - greater than the `rowNumber` of any previous rows\n * - less than or equal to the `totalRowCount` of the parent `Table`\n *\n * Use together with `totalRowCount` on the `Table` component.\n */\n rowNumber?: number;\n /**\n * Whether the row is selected.\n *\n * This value will be ignored if `rowSelectionMode` on the `Table` component is set to `'none'`.\n */\n isSelected?: boolean;\n /**\n * A function called when the row's selection state should change.\n *\n * If called without an argument, you are free to pick the new selection state based on your own logic.\n * If called with an argument, you must set the selection state to the provided value.\n */\n onSelectionToggle?: (value?: boolean) => void;\n}\n\nfunction TableBodyRow(\n { isSelected, onSelectionToggle, ...props }: TableBodyRowProps,\n ref: ForwardedRef<HTMLTableRowElement>,\n) {\n const rowKey = useId();\n\n return (\n <TableRowStateProvider rowKey={rowKey} isSelected={isSelected} onSelectionToggle={onSelectionToggle}>\n <TableBodyRowInner props={props} forwardedRef={ref} />\n </TableRowStateProvider>\n );\n}\n\ninterface TableBodyRowInnerProps {\n props: Omit<TableBodyRowProps, 'isSelected' | 'onSelectionToggle'>;\n forwardedRef: ForwardedRef<HTMLTableRowElement>;\n}\n\n/**\n * Renders a row within a table body.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBodyRow = forwardRef(TableBodyRow, 'TableBodyRow');\n\nfunction TableBodyRowInner({\n props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props },\n forwardedRef,\n}: TableBodyRowInnerProps) {\n const { rowProps, isSelected, rowSelectionMode } = useSelectableRow();\n const { hoverProps, isHovered } = useHover({});\n const isLoading = useTableLoading();\n\n return (\n <tr\n {...mergeProps(rowProps, hoverProps, props)}\n // Workaround for React not having type definitions for the `inert` attribute\n // eslint-disable-next-line internal/no-extra-props-in-spread\n {...{ inert: isLoading ? '' : undefined }}\n ref={forwardedRef}\n className={UNSAFE_className}\n style={UNSAFE_style}\n aria-rowindex={rowNumber}\n aria-selected={rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined}\n data-hovered={isHovered || undefined}\n data-selected={isSelected || undefined}\n >\n {children}\n </tr>\n );\n}\n\nexport { _TableBodyRow as TableBodyRow };\n"]}
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from 'react';
1
+ import { type ReactNode } from 'react';
2
2
  import type { CommonProps } from '../types.js';
3
3
  export interface TableBodyProps extends CommonProps {
4
4
  /** The rows that belong to this table body. */
@@ -1 +1 @@
1
- {"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAaD;;;;GAIG;AACH,QAAA,MAAM,UAAU,wHAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
1
+ {"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,UAAU,wHAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
@@ -1,8 +1,14 @@
1
1
  'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { useRef } from 'react';
3
4
  import { forwardRef } from '../../forward-ref.js';
5
+ import { useLocalizedMessages } from '../../i18n/localization-provider.js';
6
+ import { Spinner } from '../spinner/spinner.js';
7
+ import { useFullWidthCell } from './contexts/column-collection.js';
8
+ import { useTableLoading } from './contexts/loading.js';
4
9
  function TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
5
- return (_jsx("tbody", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: children }));
10
+ const isLoading = useTableLoading();
11
+ return (_jsxs("tbody", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: [isLoading && _jsx(TableLoader, {}), children] }));
6
12
  }
7
13
  /**
8
14
  * Renders a body section within a table.
@@ -11,4 +17,10 @@ function TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref)
11
17
  */
12
18
  const _TableBody = forwardRef(TableBody, 'TableBody');
13
19
  export { _TableBody as TableBody };
20
+ function TableLoader() {
21
+ const loaderCellRef = useRef(null);
22
+ const { colSpan } = useFullWidthCell(loaderCellRef);
23
+ const messages = useLocalizedMessages('table');
24
+ return (_jsx("tr", { children: _jsx("td", { ref: loaderCellRef, className: "cim-table-loading-state", colSpan: colSpan, "data-alignment": "center", children: _jsx("div", { className: "cim-table-loading-state-overlay", children: _jsx(Spinner, { size: "medium", "aria-label": messages.format('loadingData'), UNSAFE_style: { height: 'min(70%, 48px)' } }) }) }) }, "__cim__internal__loading-state__"));
25
+ }
14
26
  //# sourceMappingURL=table-body.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAQlD,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACtE,GAA0C;IAE1C,OAAO,CACL,mBAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YACzE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TableBodyProps extends CommonProps {\n /** The rows that belong to this table body. */\n children: ReactNode;\n}\n\nfunction TableBody(\n { children, UNSAFE_className, UNSAFE_style, ...props }: TableBodyProps,\n ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n return (\n <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n {children}\n </tbody>\n );\n}\n\n/**\n * Renders a body section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBody = forwardRef(TableBody, 'TableBody');\n\nexport { _TableBody as TableBody };\n"]}
1
+ {"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAqC,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAOxD,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACtE,GAA0C;IAE1C,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;IAEpC,OAAO,CACL,oBAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,aACzE,SAAS,IAAI,KAAC,WAAW,KAAG,EAC5B,QAAQ,IACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC;AAEnC,SAAS,WAAW;IAClB,MAAM,aAAa,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE/C,OAAO,CACL,uBACE,aAAI,GAAG,EAAE,aAAa,EAAE,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,OAAO,oBAAiB,QAAQ,YACnG,cAAK,SAAS,EAAC,iCAAiC,YAC9C,KAAC,OAAO,IACN,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,EAC1C,YAAY,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAC1C,GACE,GACH,IATC,kCAAkC,CAUrC,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type { CommonProps } from '../types.js';\nimport { useFullWidthCell } from './contexts/column-collection.js';\nimport { useTableLoading } from './contexts/loading.js';\n\nexport interface TableBodyProps extends CommonProps {\n /** The rows that belong to this table body. */\n children: ReactNode;\n}\n\nfunction TableBody(\n { children, UNSAFE_className, UNSAFE_style, ...props }: TableBodyProps,\n ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n const isLoading = useTableLoading();\n\n return (\n <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n {isLoading && <TableLoader />}\n {children}\n </tbody>\n );\n}\n\n/**\n * Renders a body section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBody = forwardRef(TableBody, 'TableBody');\n\nexport { _TableBody as TableBody };\n\nfunction TableLoader() {\n const loaderCellRef = useRef<HTMLTableCellElement>(null);\n const { colSpan } = useFullWidthCell(loaderCellRef);\n const messages = useLocalizedMessages('table');\n\n return (\n <tr key=\"__cim__internal__loading-state__\">\n <td ref={loaderCellRef} className=\"cim-table-loading-state\" colSpan={colSpan} data-alignment=\"center\">\n <div className=\"cim-table-loading-state-overlay\">\n <Spinner\n size=\"medium\"\n aria-label={messages.format('loadingData')}\n UNSAFE_style={{ height: 'min(70%, 48px)' }}\n />\n </div>\n </td>\n </tr>\n );\n}\n"]}
@@ -4,7 +4,7 @@ import { mergeProps, useId, useObjectRef } from '@react-aria/utils';
4
4
  import clsx from 'clsx';
5
5
  import { forwardRef } from '../../forward-ref.js';
6
6
  import { Text } from '../typography/text.js';
7
- import { useColumnData, useEmptyStateCell } from './contexts/column-collection.js';
7
+ import { useColumnData, useFullWidthCell } from './contexts/column-collection.js';
8
8
  import { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';
9
9
  import { useTableCell } from './hooks/use-table-cell.js';
10
10
  function TableEmptyState(props, ref) {
@@ -19,7 +19,7 @@ function TableEmptyState(props, ref) {
19
19
  const _TableEmptyState = forwardRef(TableEmptyState, 'TableEmptyState');
20
20
  function TableEmptyStateInner({ props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props }, forwardedRef, }) {
21
21
  const cellRef = useObjectRef(forwardedRef);
22
- const { columnKey, colSpan } = useEmptyStateCell(cellRef);
22
+ const { columnKey, colSpan } = useFullWidthCell(cellRef);
23
23
  const { rowKey } = useTableRowState();
24
24
  // `useTableCell` requires `TableRowStateProvider`
25
25
  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);
@@ -1 +1 @@
1
- {"version":3,"file":"table-empty-state.js","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAWzD,SAAS,eAAe,CAAC,KAA2B,EAAE,GAAuC;IAC3F,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GACnC,CACzB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,UAAU,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAOxE,SAAS,oBAAoB,CAAC,EAC5B,KAAK,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAC/E,YAAY,GACc;IAC1B,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC1D,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,uBACE,gBACM,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,EAC1D,KAAK,EAAE,YAAY,mBACJ,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,eAAK,SAAS,EAAC,+BAA+B,aAC5C,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC1C,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACzC,WAAW,GACP,EAEN,MAAM,IAAI,cAAK,SAAS,EAAC,8BAA8B,YAAE,MAAM,GAAO,IACnE,GACH,IArBC,gCAAgC,CAsBnC,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId, useObjectRef } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { useColumnData, useEmptyStateCell } from './contexts/column-collection.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableEmptyStateProps extends CommonProps {\n /** The title of the empty state. */\n title: string;\n /** The description of the empty state. */\n description: string;\n /** An optional action button displayed within the empty state. */\n action?: ReactNode;\n}\n\nfunction TableEmptyState(props: TableEmptyStateProps, ref: ForwardedRef<HTMLTableCellElement>) {\n const rowKey = useId();\n\n return (\n <TableRowStateProvider rowKey={rowKey}>\n <TableEmptyStateInner props={props} forwardedRef={ref} />\n </TableRowStateProvider>\n );\n}\n\n/**\n * Renders an empty state within a table that has no data.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableEmptyState = forwardRef(TableEmptyState, 'TableEmptyState');\n\ninterface TableEmptyStateInnerProps {\n props: TableEmptyStateProps;\n forwardedRef: ForwardedRef<HTMLTableCellElement>;\n}\n\nfunction TableEmptyStateInner({\n props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props },\n forwardedRef,\n}: TableEmptyStateInnerProps) {\n const cellRef = useObjectRef(forwardedRef);\n const { columnKey, colSpan } = useEmptyStateCell(cellRef);\n const { rowKey } = useTableRowState();\n // `useTableCell` requires `TableRowStateProvider`\n const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n const columnData = useColumnData(columnKey);\n\n return (\n <tr key=\"__cim__internal__empty-state__\">\n <td\n {...mergeProps(props, cellProps)}\n ref={cellRef}\n className={clsx('cim-table-empty-state', UNSAFE_className)}\n style={UNSAFE_style}\n aria-colindex={columnData?.number}\n colSpan={colSpan}\n data-alignment=\"center\"\n >\n <div className=\"cim-table-empty-state-content\">\n <Text as=\"span\" variant=\"title-6\" tone=\"base\">\n {title}\n </Text>\n\n <Text as=\"span\" variant=\"medium\" tone=\"base\">\n {description}\n </Text>\n\n {action && <div className=\"cim-table-empty-state-action\">{action}</div>}\n </div>\n </td>\n </tr>\n );\n}\n\nexport { _TableEmptyState as TableEmptyState };\n"]}
1
+ {"version":3,"file":"table-empty-state.js","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAWzD,SAAS,eAAe,CAAC,KAA2B,EAAE,GAAuC;IAC3F,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GACnC,CACzB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,UAAU,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAOxE,SAAS,oBAAoB,CAAC,EAC5B,KAAK,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAC/E,YAAY,GACc;IAC1B,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,uBACE,gBACM,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,EAC1D,KAAK,EAAE,YAAY,mBACJ,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,eAAK,SAAS,EAAC,+BAA+B,aAC5C,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC1C,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACzC,WAAW,GACP,EAEN,MAAM,IAAI,cAAK,SAAS,EAAC,8BAA8B,YAAE,MAAM,GAAO,IACnE,GACH,IArBC,gCAAgC,CAsBnC,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId, useObjectRef } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { useColumnData, useFullWidthCell } from './contexts/column-collection.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableEmptyStateProps extends CommonProps {\n /** The title of the empty state. */\n title: string;\n /** The description of the empty state. */\n description: string;\n /** An optional action button displayed within the empty state. */\n action?: ReactNode;\n}\n\nfunction TableEmptyState(props: TableEmptyStateProps, ref: ForwardedRef<HTMLTableCellElement>) {\n const rowKey = useId();\n\n return (\n <TableRowStateProvider rowKey={rowKey}>\n <TableEmptyStateInner props={props} forwardedRef={ref} />\n </TableRowStateProvider>\n );\n}\n\n/**\n * Renders an empty state within a table that has no data.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableEmptyState = forwardRef(TableEmptyState, 'TableEmptyState');\n\ninterface TableEmptyStateInnerProps {\n props: TableEmptyStateProps;\n forwardedRef: ForwardedRef<HTMLTableCellElement>;\n}\n\nfunction TableEmptyStateInner({\n props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props },\n forwardedRef,\n}: TableEmptyStateInnerProps) {\n const cellRef = useObjectRef(forwardedRef);\n const { columnKey, colSpan } = useFullWidthCell(cellRef);\n const { rowKey } = useTableRowState();\n // `useTableCell` requires `TableRowStateProvider`\n const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n const columnData = useColumnData(columnKey);\n\n return (\n <tr key=\"__cim__internal__empty-state__\">\n <td\n {...mergeProps(props, cellProps)}\n ref={cellRef}\n className={clsx('cim-table-empty-state', UNSAFE_className)}\n style={UNSAFE_style}\n aria-colindex={columnData?.number}\n colSpan={colSpan}\n data-alignment=\"center\"\n >\n <div className=\"cim-table-empty-state-content\">\n <Text as=\"span\" variant=\"title-6\" tone=\"base\">\n {title}\n </Text>\n\n <Text as=\"span\" variant=\"medium\" tone=\"base\">\n {description}\n </Text>\n\n {action && <div className=\"cim-table-empty-state-action\">{action}</div>}\n </div>\n </td>\n </tr>\n );\n}\n\nexport { _TableEmptyState as TableEmptyState };\n"]}
@@ -44,6 +44,11 @@ export interface TableProps extends CommonProps, AriaLabelingProps {
44
44
  * If called with an argument, you must set the selection state to the provided value.
45
45
  */
46
46
  onAllRowsSelectionToggle?: (value?: boolean) => void;
47
+ /**
48
+ * Whether the table is currently in a loading state.
49
+ * @default false
50
+ */
51
+ isLoading?: boolean;
47
52
  }
48
53
  /**
49
54
  * Displays data in an organized, tabular way.
@@ -1 +1 @@
1
- {"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,OAAO,EAAE,KAAK,gBAAgB,EAAqC,MAAM,2BAA2B,CAAC;AAGrG,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,iBAAiB;IAChE,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACtD;AAqED;;;;GAIG;AACH,QAAA,MAAM,MAAM,6GAA6B,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}
1
+ {"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAIlE,OAAO,EAAE,KAAK,gBAAgB,EAAqC,MAAM,2BAA2B,CAAC;AAGrG,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,iBAAiB;IAChE,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAwED;;;;GAIG;AACH,QAAA,MAAM,MAAM,6GAA6B,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}
@@ -5,16 +5,17 @@ import { forwardRef } from '../../forward-ref.js';
5
5
  import { useProductionWarning } from '../../utils/use-production-warning.js';
6
6
  import { ColumnCollectionProvider } from './contexts/column-collection.js';
7
7
  import { TableFocusProvider } from './contexts/focus.js';
8
+ import { TableLoadingProvider } from './contexts/loading.js';
8
9
  import { TableStateProvider, useTableState } from './contexts/table-state.js';
9
10
  import { useTable } from './hooks/use-table.js';
10
- function Table({ rowSelectionMode = 'none', areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, ...props }, ref) {
11
+ function Table({ isLoading = false, rowSelectionMode = 'none', areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, ...props }, ref) {
11
12
  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
12
13
  useProductionWarning(() => {
13
14
  if (!ariaLabel && !ariaLabelledBy) {
14
15
  console.warn('Table requires one of aria-label / aria-labelledby for accessibility');
15
16
  }
16
17
  }, [ariaLabel, ariaLabelledBy]);
17
- return (_jsx(TableFocusProvider, { children: _jsx(TableStateProvider, { rowSelectionMode: rowSelectionMode, areAllRowsSelected: areAllRowsSelected, areSomeRowsSelected: areSomeRowsSelected, onAllRowsSelectionToggle: onAllRowsSelectionToggle, children: _jsxs(ColumnCollectionProvider, { children: [_jsx("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true }), _jsx(TableInner, { props: props, forwardedRef: ref }), _jsx("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true })] }) }) }));
18
+ return (_jsx(TableFocusProvider, { children: _jsx(TableStateProvider, { rowSelectionMode: rowSelectionMode, areAllRowsSelected: areAllRowsSelected, areSomeRowsSelected: areSomeRowsSelected, onAllRowsSelectionToggle: onAllRowsSelectionToggle, children: _jsx(TableLoadingProvider, { isLoading: isLoading, children: _jsxs(ColumnCollectionProvider, { children: [_jsx("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true }), _jsx(TableInner, { props: props, forwardedRef: ref }), _jsx("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true })] }) }) }) }));
18
19
  }
19
20
  function TableInner({ props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props }, forwardedRef, }) {
20
21
  const tableRef = useObjectRef(forwardedRef);
@@ -1 +1 @@
1
- {"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAE7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAyB,kBAAkB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrG,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AA+ChD,SAAS,KAAK,CACZ,EACE,gBAAgB,GAAG,MAAM,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,GAAG,KAAK,EACG,EACb,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAC;QACvF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,KAAC,kBAAkB,cACjB,KAAC,kBAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,wBAAwB,EAAE,wBAAwB,YAElD,MAAC,wBAAwB,eACvB,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,IAC9B,GACR,GACF,CACtB,CAAC;AACJ,CAAC;AAUD,SAAS,UAAU,CAAC,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,EAC9F,YAAY,GACI;IAChB,MAAM,QAAQ,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAE7C,OAAO,CACL,mBACM,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,EACjC,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,aAAa,mBACb,gBAAgB,0BACT,gBAAgB,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,YAEvE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ColumnCollectionProvider } from './contexts/column-collection.js';\nimport { TableFocusProvider } from './contexts/focus.js';\nimport { type RowSelectionMode, TableStateProvider, useTableState } from './contexts/table-state.js';\nimport { useTable } from './hooks/use-table.js';\n\nexport interface TableProps extends CommonProps, AriaLabelingProps {\n /** The contents of the table. */\n children: ReactNode;\n /**\n * The number of rows in the full dataset, including headers.\n *\n * Provide this value if your table presents a subset of rows, such as when using pagination.\n * Use `-1` if the number of rows is not known.\n *\n * You must provide `rowNumber` on each table row if `totalRowCount` is defined.\n */\n totalRowCount?: number;\n /**\n * The number of columns in the full dataset.\n *\n * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n * Use `-1` if the number of columns is not known.\n *\n * You must provide `columnNumber` on each table header cell if `totalColumnCount` is defined.\n */\n totalColumnCount?: number;\n /**\n * The type of row selection that is allowed within the table.\n * @default 'none'\n */\n rowSelectionMode?: RowSelectionMode;\n /**\n * Whether all of the table's rows are selected.\n * The meaning of \"all rows\" is dictated by the consumer.\n */\n areAllRowsSelected?: boolean;\n /**\n * Whether some (but not all) of the table's rows are selected.\n * The meaning of \"some rows\" is dictated by the consumer.\n */\n areSomeRowsSelected?: boolean;\n /**\n * A function called when the selection state of all rows should change.\n *\n * If called without an argument, you are free to pick the new selection state based on your own logic.\n * If called with an argument, you must set the selection state to the provided value.\n */\n onAllRowsSelectionToggle?: (value?: boolean) => void;\n}\n\nfunction Table(\n {\n rowSelectionMode = 'none',\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle,\n ...props\n }: TableProps,\n ref: ForwardedRef<HTMLTableElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!ariaLabel && !ariaLabelledBy) {\n console.warn('Table requires one of aria-label / aria-labelledby for accessibility');\n }\n }, [ariaLabel, ariaLabelledBy]);\n\n return (\n <TableFocusProvider>\n <TableStateProvider\n rowSelectionMode={rowSelectionMode}\n areAllRowsSelected={areAllRowsSelected}\n areSomeRowsSelected={areSomeRowsSelected}\n onAllRowsSelectionToggle={onAllRowsSelectionToggle}\n >\n <ColumnCollectionProvider>\n <span tabIndex={-1} data-cim-table-guard aria-hidden />\n <TableInner props={props} forwardedRef={ref} />\n <span tabIndex={-1} data-cim-table-guard aria-hidden />\n </ColumnCollectionProvider>\n </TableStateProvider>\n </TableFocusProvider>\n );\n}\n\ninterface TableInnerProps {\n props: Omit<\n TableProps,\n 'rowSelectionMode' | 'areAllRowsSelected' | 'areSomeRowsSelected' | 'onAllRowsSelectionToggle'\n >;\n forwardedRef: ForwardedRef<HTMLTableElement>;\n}\n\nfunction TableInner({\n props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props },\n forwardedRef,\n}: TableInnerProps) {\n const tableRef = useObjectRef(forwardedRef);\n const { tableProps } = useTable(tableRef);\n const { rowSelectionMode } = useTableState();\n\n return (\n <table\n {...mergeProps(props, tableProps)}\n ref={tableRef}\n className={UNSAFE_className}\n style={UNSAFE_style}\n aria-rowcount={totalRowCount}\n aria-colcount={totalColumnCount}\n aria-multiselectable={rowSelectionMode === 'multiple' ? true : undefined}\n >\n {children}\n </table>\n );\n}\n\n/**\n * Displays data in an organized, tabular way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _Table = forwardRef(Table, 'Table');\n\nexport { _Table as Table };\n"]}
1
+ {"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAE7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAyB,kBAAkB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrG,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAoDhD,SAAS,KAAK,CACZ,EACE,SAAS,GAAG,KAAK,EACjB,gBAAgB,GAAG,MAAM,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,GAAG,KAAK,EACG,EACb,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAC;QACvF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,KAAC,kBAAkB,cACjB,KAAC,kBAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,wBAAwB,EAAE,wBAAwB,YAElD,KAAC,oBAAoB,IAAC,SAAS,EAAE,SAAS,YACxC,MAAC,wBAAwB,eACvB,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,IAC9B,GACN,GACJ,GACF,CACtB,CAAC;AACJ,CAAC;AAUD,SAAS,UAAU,CAAC,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,EAC9F,YAAY,GACI;IAChB,MAAM,QAAQ,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAE7C,OAAO,CACL,mBACM,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,EACjC,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,aAAa,mBACb,gBAAgB,0BACT,gBAAgB,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,YAEvE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ColumnCollectionProvider } from './contexts/column-collection.js';\nimport { TableFocusProvider } from './contexts/focus.js';\nimport { TableLoadingProvider } from './contexts/loading.js';\nimport { type RowSelectionMode, TableStateProvider, useTableState } from './contexts/table-state.js';\nimport { useTable } from './hooks/use-table.js';\n\nexport interface TableProps extends CommonProps, AriaLabelingProps {\n /** The contents of the table. */\n children: ReactNode;\n /**\n * The number of rows in the full dataset, including headers.\n *\n * Provide this value if your table presents a subset of rows, such as when using pagination.\n * Use `-1` if the number of rows is not known.\n *\n * You must provide `rowNumber` on each table row if `totalRowCount` is defined.\n */\n totalRowCount?: number;\n /**\n * The number of columns in the full dataset.\n *\n * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n * Use `-1` if the number of columns is not known.\n *\n * You must provide `columnNumber` on each table header cell if `totalColumnCount` is defined.\n */\n totalColumnCount?: number;\n /**\n * The type of row selection that is allowed within the table.\n * @default 'none'\n */\n rowSelectionMode?: RowSelectionMode;\n /**\n * Whether all of the table's rows are selected.\n * The meaning of \"all rows\" is dictated by the consumer.\n */\n areAllRowsSelected?: boolean;\n /**\n * Whether some (but not all) of the table's rows are selected.\n * The meaning of \"some rows\" is dictated by the consumer.\n */\n areSomeRowsSelected?: boolean;\n /**\n * A function called when the selection state of all rows should change.\n *\n * If called without an argument, you are free to pick the new selection state based on your own logic.\n * If called with an argument, you must set the selection state to the provided value.\n */\n onAllRowsSelectionToggle?: (value?: boolean) => void;\n /**\n * Whether the table is currently in a loading state.\n * @default false\n */\n isLoading?: boolean;\n}\n\nfunction Table(\n {\n isLoading = false,\n rowSelectionMode = 'none',\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle,\n ...props\n }: TableProps,\n ref: ForwardedRef<HTMLTableElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!ariaLabel && !ariaLabelledBy) {\n console.warn('Table requires one of aria-label / aria-labelledby for accessibility');\n }\n }, [ariaLabel, ariaLabelledBy]);\n\n return (\n <TableFocusProvider>\n <TableStateProvider\n rowSelectionMode={rowSelectionMode}\n areAllRowsSelected={areAllRowsSelected}\n areSomeRowsSelected={areSomeRowsSelected}\n onAllRowsSelectionToggle={onAllRowsSelectionToggle}\n >\n <TableLoadingProvider isLoading={isLoading}>\n <ColumnCollectionProvider>\n <span tabIndex={-1} data-cim-table-guard aria-hidden />\n <TableInner props={props} forwardedRef={ref} />\n <span tabIndex={-1} data-cim-table-guard aria-hidden />\n </ColumnCollectionProvider>\n </TableLoadingProvider>\n </TableStateProvider>\n </TableFocusProvider>\n );\n}\n\ninterface TableInnerProps {\n props: Omit<\n TableProps,\n 'isLoading' | 'rowSelectionMode' | 'areAllRowsSelected' | 'areSomeRowsSelected' | 'onAllRowsSelectionToggle'\n >;\n forwardedRef: ForwardedRef<HTMLTableElement>;\n}\n\nfunction TableInner({\n props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props },\n forwardedRef,\n}: TableInnerProps) {\n const tableRef = useObjectRef(forwardedRef);\n const { tableProps } = useTable(tableRef);\n const { rowSelectionMode } = useTableState();\n\n return (\n <table\n {...mergeProps(props, tableProps)}\n ref={tableRef}\n className={UNSAFE_className}\n style={UNSAFE_style}\n aria-rowcount={totalRowCount}\n aria-colcount={totalColumnCount}\n aria-multiselectable={rowSelectionMode === 'multiple' ? true : undefined}\n >\n {children}\n </table>\n );\n}\n\n/**\n * Displays data in an organized, tabular way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _Table = forwardRef(Table, 'Table');\n\nexport { _Table as Table };\n"]}
@@ -31,7 +31,7 @@ export const enUS = {
31
31
  noFilesSelected: (args, formatter) => `${formatter.select({ true: `No files selected`, other: `No file selected` }, args.allowsMultiple)}`,
32
32
  multipleFilesSelected: (args, formatter) => `${formatter.number(args.fileCount)} files`,
33
33
  },
34
- table: { toggleColumnSortOrder: `Toggle sort order of column:` },
34
+ table: { loadingData: `Loading data`, toggleColumnSortOrder: `Toggle sort order of column:` },
35
35
  simpleAuthTool: {
36
36
  logIn: `Log in`,
37
37
  logOut: `Log out`,
@@ -1 +1 @@
1
- {"version":3,"file":"en-US.js","sourceRoot":"","sources":["../../../../src/i18n/messages/en-US.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\n\nimport type { LocalizedMessages } from './types.js';\n\n/** Strings used by Cimpress UI components, localized in the `en-US` locale. */\nexport const enUS: LocalizedMessages = {\n common: { clearValue: `Clear`, dismiss: `Dismiss`, clearValueDescription: `Press Escape to clear text.` },\n copyToClipboard: { success: `Copied to clipboard.`, failure: `Failed to copy to clipboard.` },\n label: { required: `(required)` },\n datePicker: {\n clearValue: `Clear`,\n openCalendar: `Open calendar`,\n previousMonth: `Previous month`,\n nextMonth: `Next month`,\n switchToYearView: `Year view`,\n previousYear: `Previous year`,\n nextYear: `Next year`,\n switchToMultiYearView: `Multi-year view`,\n previousMultiYearSection: (args, formatter) => `Previous ${formatter.number(args.yearCount)} years`,\n nextMultiYearSection: (args, formatter) => `Next ${formatter.number(args.yearCount)} years`,\n },\n numberField: { decrement: `Decrement`, increment: `Increment` },\n pagination: {\n goToPage: (args, formatter) => `Page ${formatter.number(args.pageNumber)}`,\n previousPage: `Previous page`,\n nextPage: `Next page`,\n selectedPageAnnouncement: (args, formatter) => `Selected page: ${formatter.number(args.pageNumber)}`,\n },\n tagField: {\n itemsSelected: (args, formatter) =>\n `${formatter.plural(args.selectedItemCount, { one: () => `${formatter.number(args.selectedItemCount)} item selected`, other: () => `${formatter.number(args.selectedItemCount)} items selected` })}`,\n },\n filePicker: {\n chooseFile: `Choose file`,\n noFilesSelected: (args, formatter) =>\n `${formatter.select({ true: `No files selected`, other: `No file selected` }, args.allowsMultiple)}`,\n multipleFilesSelected: (args, formatter) => `${formatter.number(args.fileCount)} files`,\n },\n table: { toggleColumnSortOrder: `Toggle sort order of column:` },\n simpleAuthTool: {\n logIn: `Log in`,\n logOut: `Log out`,\n profileDetails: (args) => `Profile details for ${args.userFullName}`,\n unknownUser: `Unknown User`,\n },\n UNSTABLE_collection: {\n loading: `Loading items`,\n loadingMore: `Loading more items`,\n itemsSelected: (args, formatter) =>\n `${formatter.plural(args.selectedItemCount, { one: () => `${formatter.number(args.selectedItemCount)} item selected`, other: () => `${formatter.number(args.selectedItemCount)} items selected` })}`,\n },\n};\n"]}
1
+ {"version":3,"file":"en-US.js","sourceRoot":"","sources":["../../../../src/i18n/messages/en-US.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\n\nimport type { LocalizedMessages } from './types.js';\n\n/** Strings used by Cimpress UI components, localized in the `en-US` locale. */\nexport const enUS: LocalizedMessages = {\n common: { clearValue: `Clear`, dismiss: `Dismiss`, clearValueDescription: `Press Escape to clear text.` },\n copyToClipboard: { success: `Copied to clipboard.`, failure: `Failed to copy to clipboard.` },\n label: { required: `(required)` },\n datePicker: {\n clearValue: `Clear`,\n openCalendar: `Open calendar`,\n previousMonth: `Previous month`,\n nextMonth: `Next month`,\n switchToYearView: `Year view`,\n previousYear: `Previous year`,\n nextYear: `Next year`,\n switchToMultiYearView: `Multi-year view`,\n previousMultiYearSection: (args, formatter) => `Previous ${formatter.number(args.yearCount)} years`,\n nextMultiYearSection: (args, formatter) => `Next ${formatter.number(args.yearCount)} years`,\n },\n numberField: { decrement: `Decrement`, increment: `Increment` },\n pagination: {\n goToPage: (args, formatter) => `Page ${formatter.number(args.pageNumber)}`,\n previousPage: `Previous page`,\n nextPage: `Next page`,\n selectedPageAnnouncement: (args, formatter) => `Selected page: ${formatter.number(args.pageNumber)}`,\n },\n tagField: {\n itemsSelected: (args, formatter) =>\n `${formatter.plural(args.selectedItemCount, { one: () => `${formatter.number(args.selectedItemCount)} item selected`, other: () => `${formatter.number(args.selectedItemCount)} items selected` })}`,\n },\n filePicker: {\n chooseFile: `Choose file`,\n noFilesSelected: (args, formatter) =>\n `${formatter.select({ true: `No files selected`, other: `No file selected` }, args.allowsMultiple)}`,\n multipleFilesSelected: (args, formatter) => `${formatter.number(args.fileCount)} files`,\n },\n table: { loadingData: `Loading data`, toggleColumnSortOrder: `Toggle sort order of column:` },\n simpleAuthTool: {\n logIn: `Log in`,\n logOut: `Log out`,\n profileDetails: (args) => `Profile details for ${args.userFullName}`,\n unknownUser: `Unknown User`,\n },\n UNSTABLE_collection: {\n loading: `Loading items`,\n loadingMore: `Loading more items`,\n itemsSelected: (args, formatter) =>\n `${formatter.plural(args.selectedItemCount, { one: () => `${formatter.number(args.selectedItemCount)} item selected`, other: () => `${formatter.number(args.selectedItemCount)} items selected` })}`,\n },\n};\n"]}
@@ -75,6 +75,8 @@ export type LocalizedMessages = {
75
75
  multipleFilesSelected: LocalizedString;
76
76
  };
77
77
  table: {
78
+ /** An ARIA label for a spinner displayed when data is being loaded into a table. */
79
+ loadingData: LocalizedString;
78
80
  /** An ARIA label for a button that toggles the sort order of a specific column in a data table. This label will be followed by the name of the column. */
79
81
  toggleColumnSortOrder: LocalizedString;
80
82
  };
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/i18n/messages/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAE3D;;;GAGG;AACH,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,CAAC,CACC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,EAChD,SAAS,CAAC,EAAE,wBAAwB,CAAC,MAAM,EAAE,eAAe,CAAC,KAC1D,MAAM,CAAC,CAAC;AAEjB,wEAAwE;AACxE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE;QACN,mEAAmE;QACnE,UAAU,EAAE,eAAe,CAAC;QAC5B,uNAAuN;QACvN,OAAO,EAAE,eAAe,CAAC;QACzB,oJAAoJ;QACpJ,qBAAqB,EAAE,eAAe,CAAC;KACxC,CAAC;IACF,eAAe,EAAE;QACf,2FAA2F;QAC3F,OAAO,EAAE,eAAe,CAAC;QACzB,uFAAuF;QACvF,OAAO,EAAE,eAAe,CAAC;KAC1B,CAAC;IACF,KAAK,EAAE;QACL,mKAAmK;QACnK,QAAQ,EAAE,eAAe,CAAC;KAC3B,CAAC;IACF,UAAU,EAAE;QACV,+EAA+E;QAC/E,UAAU,EAAE,eAAe,CAAC;QAC5B,qFAAqF;QACrF,YAAY,EAAE,eAAe,CAAC;QAC9B,8GAA8G;QAC9G,aAAa,EAAE,eAAe,CAAC;QAC/B,0GAA0G;QAC1G,SAAS,EAAE,eAAe,CAAC;QAC3B,+GAA+G;QAC/G,gBAAgB,EAAE,eAAe,CAAC;QAClC,6GAA6G;QAC7G,YAAY,EAAE,eAAe,CAAC;QAC9B,yGAAyG;QACzG,QAAQ,EAAE,eAAe,CAAC;QAC1B,8GAA8G;QAC9G,qBAAqB,EAAE,eAAe,CAAC;QACvC,8KAA8K;QAC9K,wBAAwB,EAAE,eAAe,CAAC;QAC1C,0KAA0K;QAC1K,oBAAoB,EAAE,eAAe,CAAC;KACvC,CAAC;IACF,WAAW,EAAE;QACX,8EAA8E;QAC9E,SAAS,EAAE,eAAe,CAAC;QAC3B,8EAA8E;QAC9E,SAAS,EAAE,eAAe,CAAC;KAC5B,CAAC;IACF,UAAU,EAAE;QACV,+GAA+G;QAC/G,QAAQ,EAAE,eAAe,CAAC;QAC1B,iHAAiH;QACjH,YAAY,EAAE,eAAe,CAAC;QAC9B,6GAA6G;QAC7G,QAAQ,EAAE,eAAe,CAAC;QAC1B,kHAAkH;QAClH,wBAAwB,EAAE,eAAe,CAAC;KAC3C,CAAC;IACF,QAAQ,EAAE;QACR,kGAAkG;QAClG,aAAa,EAAE,eAAe,CAAC;KAChC,CAAC;IACF,UAAU,EAAE;QACV,uEAAuE;QACvE,UAAU,EAAE,eAAe,CAAC;QAC5B,8CAA8C;QAC9C,eAAe,EAAE,eAAe,CAAC;QACjC,oDAAoD;QACpD,qBAAqB,EAAE,eAAe,CAAC;KACxC,CAAC;IACF,KAAK,EAAE;QACL,0JAA0J;QAC1J,qBAAqB,EAAE,eAAe,CAAC;KACxC,CAAC;IACF,cAAc,EAAE;QACd,gEAAgE;QAChE,KAAK,EAAE,eAAe,CAAC;QACvB,gEAAgE;QAChE,MAAM,EAAE,eAAe,CAAC;QACxB,sFAAsF;QACtF,cAAc,EAAE,eAAe,CAAC;QAChC,uEAAuE;QACvE,WAAW,EAAE,eAAe,CAAC;KAC9B,CAAC;IACF,mBAAmB,EAAE;QACnB,0GAA0G;QAC1G,OAAO,EAAE,eAAe,CAAC;QACzB,gGAAgG;QAChG,WAAW,EAAE,eAAe,CAAC;QAC7B,+FAA+F;QAC/F,aAAa,EAAE,eAAe,CAAC;KAChC,CAAC;CACH,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/i18n/messages/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAE3D;;;GAGG;AACH,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,CAAC,CACC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,EAChD,SAAS,CAAC,EAAE,wBAAwB,CAAC,MAAM,EAAE,eAAe,CAAC,KAC1D,MAAM,CAAC,CAAC;AAEjB,wEAAwE;AACxE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE;QACN,mEAAmE;QACnE,UAAU,EAAE,eAAe,CAAC;QAC5B,uNAAuN;QACvN,OAAO,EAAE,eAAe,CAAC;QACzB,oJAAoJ;QACpJ,qBAAqB,EAAE,eAAe,CAAC;KACxC,CAAC;IACF,eAAe,EAAE;QACf,2FAA2F;QAC3F,OAAO,EAAE,eAAe,CAAC;QACzB,uFAAuF;QACvF,OAAO,EAAE,eAAe,CAAC;KAC1B,CAAC;IACF,KAAK,EAAE;QACL,mKAAmK;QACnK,QAAQ,EAAE,eAAe,CAAC;KAC3B,CAAC;IACF,UAAU,EAAE;QACV,+EAA+E;QAC/E,UAAU,EAAE,eAAe,CAAC;QAC5B,qFAAqF;QACrF,YAAY,EAAE,eAAe,CAAC;QAC9B,8GAA8G;QAC9G,aAAa,EAAE,eAAe,CAAC;QAC/B,0GAA0G;QAC1G,SAAS,EAAE,eAAe,CAAC;QAC3B,+GAA+G;QAC/G,gBAAgB,EAAE,eAAe,CAAC;QAClC,6GAA6G;QAC7G,YAAY,EAAE,eAAe,CAAC;QAC9B,yGAAyG;QACzG,QAAQ,EAAE,eAAe,CAAC;QAC1B,8GAA8G;QAC9G,qBAAqB,EAAE,eAAe,CAAC;QACvC,8KAA8K;QAC9K,wBAAwB,EAAE,eAAe,CAAC;QAC1C,0KAA0K;QAC1K,oBAAoB,EAAE,eAAe,CAAC;KACvC,CAAC;IACF,WAAW,EAAE;QACX,8EAA8E;QAC9E,SAAS,EAAE,eAAe,CAAC;QAC3B,8EAA8E;QAC9E,SAAS,EAAE,eAAe,CAAC;KAC5B,CAAC;IACF,UAAU,EAAE;QACV,+GAA+G;QAC/G,QAAQ,EAAE,eAAe,CAAC;QAC1B,iHAAiH;QACjH,YAAY,EAAE,eAAe,CAAC;QAC9B,6GAA6G;QAC7G,QAAQ,EAAE,eAAe,CAAC;QAC1B,kHAAkH;QAClH,wBAAwB,EAAE,eAAe,CAAC;KAC3C,CAAC;IACF,QAAQ,EAAE;QACR,kGAAkG;QAClG,aAAa,EAAE,eAAe,CAAC;KAChC,CAAC;IACF,UAAU,EAAE;QACV,uEAAuE;QACvE,UAAU,EAAE,eAAe,CAAC;QAC5B,8CAA8C;QAC9C,eAAe,EAAE,eAAe,CAAC;QACjC,oDAAoD;QACpD,qBAAqB,EAAE,eAAe,CAAC;KACxC,CAAC;IACF,KAAK,EAAE;QACL,oFAAoF;QACpF,WAAW,EAAE,eAAe,CAAC;QAC7B,0JAA0J;QAC1J,qBAAqB,EAAE,eAAe,CAAC;KACxC,CAAC;IACF,cAAc,EAAE;QACd,gEAAgE;QAChE,KAAK,EAAE,eAAe,CAAC;QACvB,gEAAgE;QAChE,MAAM,EAAE,eAAe,CAAC;QACxB,sFAAsF;QACtF,cAAc,EAAE,eAAe,CAAC;QAChC,uEAAuE;QACvE,WAAW,EAAE,eAAe,CAAC;KAC9B,CAAC;IACF,mBAAmB,EAAE;QACnB,0GAA0G;QAC1G,OAAO,EAAE,eAAe,CAAC;QACzB,gGAAgG;QAChG,WAAW,EAAE,eAAe,CAAC;QAC7B,+FAA+F;QAC/F,aAAa,EAAE,eAAe,CAAC;KAChC,CAAC;CACH,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/i18n/messages/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { LocalizedStringFormatter } from 'react-aria';\n\n/**\n * Represents a localized piece of text used within a component.\n * It can either be a plain string, or a function that returns a plain string based on provided context.\n */\nexport type LocalizedString =\n | string\n | ((\n args?: Record<string, string | number | boolean>,\n formatter?: LocalizedStringFormatter<string, LocalizedString>,\n ) => string);\n\n/** A collection of localized strings used by Cimpress UI components. */\nexport type LocalizedMessages = {\n common: {\n /** An ARIA label for a button that clears the value of a field. */\n clearValue: LocalizedString;\n /** An ARIA label for a button that closes or dismisses an alert, a callout, a dialog, or other overlay component. Used for accessibility purposes to clearly indicate the button's function to screen reader users. */\n dismiss: LocalizedString;\n /** A visually hidden label that indicates a text field can be cleared by pressing the Escape key. This text is only announced by screen readers. */\n clearValueDescription: LocalizedString;\n };\n copyToClipboard: {\n /** The message displayed in a tooltip when a value is successfully copied to clipboard. */\n success: LocalizedString;\n /** The message displayed in a tooltip when a value fails to be copied to clipboard. */\n failure: LocalizedString;\n };\n label: {\n /** A visually hidden label that indicates a form field is required. This text is appended to the field's visible label and is only announced by screen readers. */\n required: LocalizedString;\n };\n datePicker: {\n /** An ARIA label for a button that clears the value of a date picker field. */\n clearValue: LocalizedString;\n /** An ARIA label for a button that opens a calendar popup. Part of a date picker. */\n openCalendar: LocalizedString;\n /** An ARIA label for a button that displays the previous month in a calendar popup. Part of a date picker. */\n previousMonth: LocalizedString;\n /** An ARIA label for a button that displays the next month in a calendar popup. Part of a date picker. */\n nextMonth: LocalizedString;\n /** An ARIA label for a button that changes the calendar popup to a single-year view. Part of a date picker. */\n switchToYearView: LocalizedString;\n /** An ARIA label for a button that displays the previous year in a calendar popup. Part of a date picker. */\n previousYear: LocalizedString;\n /** An ARIA label for a button that displays the next year in a calendar popup. Part of a date picker. */\n nextYear: LocalizedString;\n /** An ARIA label for a button that changes the calendar popup to a multi-year view. Part of a date picker. */\n switchToMultiYearView: LocalizedString;\n /** An ARIA label for a button that displays the previous section of a multi-year view in a calendar popup. Year count will always be larger than 1. Part of a date picker. */\n previousMultiYearSection: LocalizedString;\n /** An ARIA label for a button that displays the next section of a multi-year view in a calendar popup. Year count will always be larger than 1. Part of a date picker. */\n nextMultiYearSection: LocalizedString;\n };\n numberField: {\n /** An ARIA label for a button that decrements the value of a number field. */\n decrement: LocalizedString;\n /** An ARIA label for a button that increments the value of a number field. */\n increment: LocalizedString;\n };\n pagination: {\n /** An ARIA label for a button that navigates to a specific page. Part of a pagination navigation structure. */\n goToPage: LocalizedString;\n /** An ARIA label for a button that navigates to the previous page. Part of a pagination navigation structure. */\n previousPage: LocalizedString;\n /** An ARIA label for a button that navigates to the next page. Part of a pagination navigation structure. */\n nextPage: LocalizedString;\n /** A screen reader announcement for when the selected page changes. Part of a pagination navigation structure. */\n selectedPageAnnouncement: LocalizedString;\n };\n tagField: {\n /** A label displayed within a tag field to inform the user about the number of selected items. */\n itemsSelected: LocalizedString;\n };\n filePicker: {\n /** A label for the button that opens the native file picker dialog. */\n chooseFile: LocalizedString;\n /** A label for when no files are selected. */\n noFilesSelected: LocalizedString;\n /** A label for when multiple files are selected. */\n multipleFilesSelected: LocalizedString;\n };\n table: {\n /** An ARIA label for a button that toggles the sort order of a specific column in a data table. This label will be followed by the name of the column. */\n toggleColumnSortOrder: LocalizedString;\n };\n simpleAuthTool: {\n /** A label used for a button that redirects to a login flow. */\n logIn: LocalizedString;\n /** A label used for a button that logs the current user out. */\n logOut: LocalizedString;\n /** An ARIA label for a popover that contains information about the logged in user. */\n profileDetails: LocalizedString;\n /** A name that's displayed when the current user's name is unknown. */\n unknownUser: LocalizedString;\n };\n UNSTABLE_collection: {\n /** An ARIA label for a spinner displayed when the list of items is first being loaded in a collection. */\n loading: LocalizedString;\n /** An ARIA label for a spinner displayed when more items are being loaded into a collection. */\n loadingMore: LocalizedString;\n /** A label displayed within a select to inform the user about the number of selected items. */\n itemsSelected: LocalizedString;\n };\n};\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/i18n/messages/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { LocalizedStringFormatter } from 'react-aria';\n\n/**\n * Represents a localized piece of text used within a component.\n * It can either be a plain string, or a function that returns a plain string based on provided context.\n */\nexport type LocalizedString =\n | string\n | ((\n args?: Record<string, string | number | boolean>,\n formatter?: LocalizedStringFormatter<string, LocalizedString>,\n ) => string);\n\n/** A collection of localized strings used by Cimpress UI components. */\nexport type LocalizedMessages = {\n common: {\n /** An ARIA label for a button that clears the value of a field. */\n clearValue: LocalizedString;\n /** An ARIA label for a button that closes or dismisses an alert, a callout, a dialog, or other overlay component. Used for accessibility purposes to clearly indicate the button's function to screen reader users. */\n dismiss: LocalizedString;\n /** A visually hidden label that indicates a text field can be cleared by pressing the Escape key. This text is only announced by screen readers. */\n clearValueDescription: LocalizedString;\n };\n copyToClipboard: {\n /** The message displayed in a tooltip when a value is successfully copied to clipboard. */\n success: LocalizedString;\n /** The message displayed in a tooltip when a value fails to be copied to clipboard. */\n failure: LocalizedString;\n };\n label: {\n /** A visually hidden label that indicates a form field is required. This text is appended to the field's visible label and is only announced by screen readers. */\n required: LocalizedString;\n };\n datePicker: {\n /** An ARIA label for a button that clears the value of a date picker field. */\n clearValue: LocalizedString;\n /** An ARIA label for a button that opens a calendar popup. Part of a date picker. */\n openCalendar: LocalizedString;\n /** An ARIA label for a button that displays the previous month in a calendar popup. Part of a date picker. */\n previousMonth: LocalizedString;\n /** An ARIA label for a button that displays the next month in a calendar popup. Part of a date picker. */\n nextMonth: LocalizedString;\n /** An ARIA label for a button that changes the calendar popup to a single-year view. Part of a date picker. */\n switchToYearView: LocalizedString;\n /** An ARIA label for a button that displays the previous year in a calendar popup. Part of a date picker. */\n previousYear: LocalizedString;\n /** An ARIA label for a button that displays the next year in a calendar popup. Part of a date picker. */\n nextYear: LocalizedString;\n /** An ARIA label for a button that changes the calendar popup to a multi-year view. Part of a date picker. */\n switchToMultiYearView: LocalizedString;\n /** An ARIA label for a button that displays the previous section of a multi-year view in a calendar popup. Year count will always be larger than 1. Part of a date picker. */\n previousMultiYearSection: LocalizedString;\n /** An ARIA label for a button that displays the next section of a multi-year view in a calendar popup. Year count will always be larger than 1. Part of a date picker. */\n nextMultiYearSection: LocalizedString;\n };\n numberField: {\n /** An ARIA label for a button that decrements the value of a number field. */\n decrement: LocalizedString;\n /** An ARIA label for a button that increments the value of a number field. */\n increment: LocalizedString;\n };\n pagination: {\n /** An ARIA label for a button that navigates to a specific page. Part of a pagination navigation structure. */\n goToPage: LocalizedString;\n /** An ARIA label for a button that navigates to the previous page. Part of a pagination navigation structure. */\n previousPage: LocalizedString;\n /** An ARIA label for a button that navigates to the next page. Part of a pagination navigation structure. */\n nextPage: LocalizedString;\n /** A screen reader announcement for when the selected page changes. Part of a pagination navigation structure. */\n selectedPageAnnouncement: LocalizedString;\n };\n tagField: {\n /** A label displayed within a tag field to inform the user about the number of selected items. */\n itemsSelected: LocalizedString;\n };\n filePicker: {\n /** A label for the button that opens the native file picker dialog. */\n chooseFile: LocalizedString;\n /** A label for when no files are selected. */\n noFilesSelected: LocalizedString;\n /** A label for when multiple files are selected. */\n multipleFilesSelected: LocalizedString;\n };\n table: {\n /** An ARIA label for a spinner displayed when data is being loaded into a table. */\n loadingData: LocalizedString;\n /** An ARIA label for a button that toggles the sort order of a specific column in a data table. This label will be followed by the name of the column. */\n toggleColumnSortOrder: LocalizedString;\n };\n simpleAuthTool: {\n /** A label used for a button that redirects to a login flow. */\n logIn: LocalizedString;\n /** A label used for a button that logs the current user out. */\n logOut: LocalizedString;\n /** An ARIA label for a popover that contains information about the logged in user. */\n profileDetails: LocalizedString;\n /** A name that's displayed when the current user's name is unknown. */\n unknownUser: LocalizedString;\n };\n UNSTABLE_collection: {\n /** An ARIA label for a spinner displayed when the list of items is first being loaded in a collection. */\n loading: LocalizedString;\n /** An ARIA label for a spinner displayed when more items are being loaded into a collection. */\n loadingMore: LocalizedString;\n /** A label displayed within a select to inform the user about the number of selected items. */\n itemsSelected: LocalizedString;\n };\n};\n"]}