@veeqo/ui 11.1.0 → 11.2.0

package/dist/components/DataGrid/DataGrid.cjs

@@ -10,6 +10,8 @@ var getAriaRoles = require('./utils/getAriaRoles.cjs');
 var Columns = require('./components/Columns/Columns.cjs');
 var Header = require('./components/Header/Header.cjs');
 var Body = require('./components/Body/Body.cjs');
+var LoadingBody = require('./components/Body/LoadingBody/LoadingBody.cjs');
+var EmptyBody = require('./components/Body/EmptyBody/EmptyBody.cjs');
 var Footer = require('./components/Footer/Footer.cjs');
 var GridContainer = require('./components/GridContainer/GridContainer.cjs');
 var useSortingState = require('./hooks/useSortingState.cjs');
@@ -42,13 +44,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, 'aria-label': ariaLabel, }) => {
     /**
      * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
      */
     const containerRef = React.useRef(null);
     const tableRef = React.useRef(null);
-    const showFooter = React.useMemo(() => columns.some((column) => column.renderFooter), [columns]);
+    const showFooter = React.useMemo(() => !isLoading && columns.some((column) => column.renderFooter), [isLoading, columns]);
     const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
     const enableColumnResizing = React.useMemo(() => resizeMode !== 'off', [resizeMode]);
     /**
@@ -129,10 +131,22 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
      */
     useDragToScroll.useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });
     useKeyboardNavigation.useKeyboardNavigation({ tableRef, enableKeyboardNavigation });
+    const renderBody = () => {
+        if (isLoading) {
+            return React__default.default.createElement(LoadingBody.LoadingBody, { table: table, loadingRowCount: loadingRowCount !== null && loadingRowCount !== undefined ? loadingRowCount : 5, striped: striped });
+        }
+        if (data.length === 0) {
+            return React__default.default.createElement(EmptyBody.EmptyBody, { table: table, emptyState: emptyState, emptySlot: emptySlot });
+        }
+        if (table.getState().columnSizingInfo.isResizingColumn) {
+            return React__default.default.createElement(Body.MemoizedBody, { table: table, ariaRoles: ariaRoles, striped: striped });
+        }
+        return React__default.default.createElement(Body.Body, { table: table, ariaRoles: ariaRoles, striped: striped });
+    };
     return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
         enableColumnResizing && React__default.default.createElement(Columns.Columns, { table: table }),
         React__default.default.createElement(Header.Header, { table: table }),
-        table.getState().columnSizingInfo.isResizingColumn ? (React__default.default.createElement(Body.MemoizedBody, { table: table, ariaRoles: ariaRoles, striped: striped })) : (React__default.default.createElement(Body.Body, { table: table, ariaRoles: ariaRoles, striped: striped })),
+        renderBody(),
         showFooter && React__default.default.createElement(Footer.Footer, { table: table, ariaRoles: ariaRoles })));
 };
 

package/dist/components/DataGrid/DataGrid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [WIP]\n *\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {table.getState().columnSizingInfo.isResizingColumn ? (\n        <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n      ) : (\n        <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n      )}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","GridContainer","Columns","Header","MemoizedBody","Body","Footer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,GAAG,MAAM,EAChB,OAAO,GAAG,IAAI,EACd,UAAU,GAAG,MAAM,EACnB,UAAU,GAAG,KAAK,EAClB,cAAc,EACd,wBAAwB,GAAG,KAAK,EAEhC,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EAEb,IAAI,EACJ,QAAQ,EAER,SAAS,EACT,aAAa,EAEb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAElB,WAAW,EAEX,YAAY,EACZ,gBAAgB,EAEhB,YAAY,EAAE,SAAS,GACT,KAAI;AAClB;;AAEG;AACH,IAAA,MAAM,YAAY,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAmB,IAAI,CAAC;IAE/C,MAAM,UAAU,GAAGC,aAAO,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAC1F,MAAM,SAAS,GAAGA,aAAO,CACvB,MAAMC,yBAAY,CAAC,EAAE,wBAAwB,EAAE,WAAW,EAAE,CAAC,EAC7D,CAAC,wBAAwB,EAAE,WAAW,CAAC,CACxC;AACD,IAAA,MAAM,oBAAoB,GAAGD,aAAO,CAAC,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC;AAE9E;;AAEG;IACH,MAAM,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,YAAY,EAAE,oBAAoB,EAAE,GACvFE,mCAAiB,CAAC;QAChB,aAAa;QACb,YAAY;QACZ,YAAY;QACZ,kBAAkB;AACnB,KAAA,CAAC;IAEJ,MAAM,EACJ,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,eAAe,GAChB,GAAGC,+BAAe,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;AAE1D,IAAA,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,GAChFC,iCAAgB,CAAC,WAAW,CAAC;AAE/B;;AAEG;IACH,MAAM,EAAE,uBAAuB,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;QAC/F,OAAO;QACP,aAAa;QACb,cAAc;QACd,aAAa;QACb,kBAAkB,EAAE,CAAC,CAAC,kBAAkB;AACzC,KAAA,CAAC;AAEF,IAAA,MAAM,EAAE,YAAY,EAAE,oBAAoB,EAAE,GAAGC,uCAAmB,CAAC;QACjE,uBAAuB;QACvB,YAAY;QACZ,gBAAgB;AACjB,KAAA,CAAC;AAEF;;;AAGG;IACH,MAAM,KAAK,GAAGC,wBAAa,CAAM;QAC/B,IAAI;AACJ,QAAA,OAAO,EAAE,uBAAuB;;QAGhC,gBAAgB,EAAE,UAAU,KAAK,KAAK,GAAG,SAAS,GAAG,UAAU;QAC/D,oBAAoB;QACpB,oBAAoB;;QAGpB,QAAQ;QACR,eAAe,EAAEC,0BAAe,EAAE;;QAGlC,aAAa;QACb,oBAAoB;QACpB,iBAAiB;QACjB,aAAa;QACb,eAAe;;AAGf,QAAA,mBAAmB,EAAE,aAAa,CAAC,IAAI,CAAC,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;;QAG/E,kBAAkB;QAClB,uBAAuB;QACvB,oBAAoB;;QAGpB,UAAU;QACV,eAAe;QACf,gBAAgB;QAChB,eAAe;QACf,mBAAmB,EAAE,eAAe,GAAGC,8BAAmB,EAAE,GAAG,SAAS;;AAGxE,QAAA,KAAK,EAAE;YACL,WAAW;YACX,gBAAgB;YAChB,aAAa;YACb,OAAO;YACP,YAAY;YACZ,QAAQ;YACR,YAAY;AACb,SAAA;AACF,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE;;AAEG;IACHC,+BAAe,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,0BAA0B,EAAE,CAAC;AACzF,IAAAC,2CAAqB,CAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE,CAAC;AAE7D,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,2BAAa,IACZ,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,EAAE,GAAG,cAAc,EAAE,GAAG,wBAAwB,EAAE,EACnE,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,oBAAoB,EAC7C,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,gBACA,SAAS,EAAA;AAGpB,QAAA,oBAAoB,IAAID,sBAAC,CAAA,aAAA,CAAAE,eAAO,IAAC,KAAK,EAAE,KAAK,EAAI,CAAA;AAGlD,QAAAF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAI,CAAA;QAGvB,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,IACjDH,sBAAC,CAAA,aAAA,CAAAI,iBAAY,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI,KAEtEJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI,CAC/D;AAGA,QAAA,UAAU,IAAIL,sBAAA,CAAA,aAAA,CAACM,aAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAI,CAAA,CAC/C;AAEpB;;;;"}
+{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [WIP]\n *\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(\n    () => !isLoading && columns.some((column) => column.renderFooter),\n    [isLoading, columns],\n  );\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  const renderBody = () => {\n    if (isLoading) {\n      return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n    }\n\n    if (data.length === 0) {\n      return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n    }\n\n    if (table.getState().columnSizingInfo.isResizingColumn) {\n      return <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />;\n    }\n\n    return <Body table={table} ariaRoles={ariaRoles} striped={striped} />;\n  };\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {renderBody()}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}

package/dist/components/DataGrid/DataGrid.d.ts

@@ -18,4 +18,4 @@ import { DataGridProps } from './types';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
+export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;

package/dist/components/DataGrid/DataGrid.js

@@ -8,6 +8,8 @@ import { getAriaRoles } from './utils/getAriaRoles.js';
 import { Columns } from './components/Columns/Columns.js';
 import { Header } from './components/Header/Header.js';
 import { MemoizedBody, Body } from './components/Body/Body.js';
+import { LoadingBody } from './components/Body/LoadingBody/LoadingBody.js';
+import { EmptyBody } from './components/Body/EmptyBody/EmptyBody.js';
 import { Footer } from './components/Footer/Footer.js';
 import { GridContainer } from './components/GridContainer/GridContainer.js';
 import { useSortingState } from './hooks/useSortingState.js';
@@ -36,13 +38,13 @@ import { useExpandedState } from './hooks/useExpandedState.js';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, 'aria-label': ariaLabel, }) => {
     /**
      * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
      */
     const containerRef = useRef(null);
     const tableRef = useRef(null);
-    const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);
+    const showFooter = useMemo(() => !isLoading && columns.some((column) => column.renderFooter), [isLoading, columns]);
     const ariaRoles = useMemo(() => getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
     const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);
     /**
@@ -123,10 +125,22 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
      */
     useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });
     useKeyboardNavigation({ tableRef, enableKeyboardNavigation });
+    const renderBody = () => {
+        if (isLoading) {
+            return React__default.createElement(LoadingBody, { table: table, loadingRowCount: loadingRowCount !== null && loadingRowCount !== undefined ? loadingRowCount : 5, striped: striped });
+        }
+        if (data.length === 0) {
+            return React__default.createElement(EmptyBody, { table: table, emptyState: emptyState, emptySlot: emptySlot });
+        }
+        if (table.getState().columnSizingInfo.isResizingColumn) {
+            return React__default.createElement(MemoizedBody, { table: table, ariaRoles: ariaRoles, striped: striped });
+        }
+        return React__default.createElement(Body, { table: table, ariaRoles: ariaRoles, striped: striped });
+    };
     return (React__default.createElement(GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
         enableColumnResizing && React__default.createElement(Columns, { table: table }),
         React__default.createElement(Header, { table: table }),
-        table.getState().columnSizingInfo.isResizingColumn ? (React__default.createElement(MemoizedBody, { table: table, ariaRoles: ariaRoles, striped: striped })) : (React__default.createElement(Body, { table: table, ariaRoles: ariaRoles, striped: striped })),
+        renderBody(),
         showFooter && React__default.createElement(Footer, { table: table, ariaRoles: ariaRoles })));
 };
 

package/dist/components/DataGrid/DataGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [WIP]\n *\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {table.getState().columnSizingInfo.isResizingColumn ? (\n        <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n      ) : (\n        <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n      )}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [WIP]\n *\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(\n    () => !isLoading && columns.some((column) => column.renderFooter),\n    [isLoading, columns],\n  );\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  const renderBody = () => {\n    if (isLoading) {\n      return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n    }\n\n    if (data.length === 0) {\n      return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n    }\n\n    if (table.getState().columnSizingInfo.isResizingColumn) {\n      return <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />;\n    }\n\n    return <Body table={table} ariaRoles={ariaRoles} striped={striped} />;\n  };\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {renderBody()}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataGrid/components/Body/Body.cjs

@@ -12,7 +12,7 @@ const Body = ({ table, striped, ariaRoles }) => {
     var _a, _b;
     const enableExpanding = (_a = table.options.enableExpanding) !== null && _a !== undefined ? _a : false;
     const enableRowSelection = (_b = table.options.enableRowSelection) !== null && _b !== undefined ? _b : false;
-    return (React__default.default.createElement("tbody", { className: "data-grid-body" }, table.getRowModel().rows.map((row) => (React__default.default.createElement(Row.Row, { key: row.id, row: row, striped: striped, enableExpanding: enableExpanding }, row.getVisibleCells().map((cell) => (React__default.default.createElement(BodyCell.BodyCell, { cell: cell, key: cell.id, ariaRoles: ariaRoles, enableExpanding: enableExpanding, enableRowSelection: !!enableRowSelection }))))))));
+    return (React__default.default.createElement("tbody", { className: "data-grid-body", "aria-busy": "false" }, table.getRowModel().rows.map((row) => (React__default.default.createElement(Row.Row, { key: row.id, row: row, striped: striped, enableExpanding: enableExpanding }, row.getVisibleCells().map((cell) => (React__default.default.createElement(BodyCell.BodyCell, { cell: cell, key: cell.id, ariaRoles: ariaRoles, enableExpanding: enableExpanding, enableRowSelection: !!enableRowSelection }))))))));
 };
 /**
  * Memoized table body, used to prevent rerenders when columns are being resized.

package/dist/components/DataGrid/components/Body/Body.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Body.cjs","sources":["../../../../../src/components/DataGrid/components/Body/Body.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { BodyCell } from './BodyCell';\nimport { Row } from './Row';\nimport { AriaRoles } from '../../types';\n\ntype BodyProps = {\n  /**\n   * TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Whether the rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * ARIA roles for the table.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Body = ({ table, striped, ariaRoles }: BodyProps) => {\n  const enableExpanding = table.options.enableExpanding ?? false;\n  const enableRowSelection = table.options.enableRowSelection ?? false;\n\n  return (\n    <tbody className=\"data-grid-body\">\n      {table.getRowModel().rows.map((row) => (\n        <Row key={row.id} row={row} striped={striped} enableExpanding={enableExpanding}>\n          {row.getVisibleCells().map((cell) => (\n            <BodyCell\n              cell={cell}\n              key={cell.id}\n              ariaRoles={ariaRoles}\n              enableExpanding={enableExpanding}\n              enableRowSelection={!!enableRowSelection}\n            />\n          ))}\n        </Row>\n      ))}\n    </tbody>\n  );\n};\n\n/**\n * Memoized table body, used to prevent rerenders when columns are being resized.\n */\nexport const MemoizedBody = React.memo(\n  Body,\n  (prev, next) => prev.table.options.data === next.table.options.data,\n);\n"],"names":["React","Row","BodyCell"],"mappings":";;;;;;;;;;AAwBO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAa,KAAI;;IAC/D,MAAM,eAAe,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,eAAe,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;IAC9D,MAAM,kBAAkB,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,kBAAkB,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;AAEpE,IAAA,QACEA,sBAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,EAC9B,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,sBAAC,CAAA,aAAA,CAAAC,OAAG,IAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,IAC3E,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BD,qCAACE,iBAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,CAAC,CAAC,kBAAkB,EAAA,CACxC,CACH,CAAC,CACE,CACP,CAAC,CACI;AAEZ;AAEA;;AAEG;AACI,MAAM,YAAY,GAAGF,sBAAK,CAAC,IAAI,CACpC,IAAI,EACJ,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;"}
+{"version":3,"file":"Body.cjs","sources":["../../../../../src/components/DataGrid/components/Body/Body.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { BodyCell } from './BodyCell';\nimport { Row } from './Row';\nimport { AriaRoles } from '../../types';\n\ntype BodyProps = {\n  /**\n   * TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Whether the rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * ARIA roles for the table.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Body = ({ table, striped, ariaRoles }: BodyProps) => {\n  const enableExpanding = table.options.enableExpanding ?? false;\n  const enableRowSelection = table.options.enableRowSelection ?? false;\n\n  return (\n    <tbody className=\"data-grid-body\" aria-busy=\"false\">\n      {table.getRowModel().rows.map((row) => (\n        <Row key={row.id} row={row} striped={striped} enableExpanding={enableExpanding}>\n          {row.getVisibleCells().map((cell) => (\n            <BodyCell\n              cell={cell}\n              key={cell.id}\n              ariaRoles={ariaRoles}\n              enableExpanding={enableExpanding}\n              enableRowSelection={!!enableRowSelection}\n            />\n          ))}\n        </Row>\n      ))}\n    </tbody>\n  );\n};\n\n/**\n * Memoized table body, used to prevent rerenders when columns are being resized.\n */\nexport const MemoizedBody = React.memo(\n  Body,\n  (prev, next) => prev.table.options.data === next.table.options.data,\n);\n"],"names":["React","Row","BodyCell"],"mappings":";;;;;;;;;;AAwBO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAa,KAAI;;IAC/D,MAAM,eAAe,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,eAAe,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;IAC9D,MAAM,kBAAkB,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,kBAAkB,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;AAEpE,IAAA,QACEA,sBAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,WAAA,EAAW,OAAO,EAChD,EAAA,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,sBAAA,CAAA,aAAA,CAACC,OAAG,EAAC,EAAA,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,EAC3E,EAAA,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BD,qCAACE,iBAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,CAAC,CAAC,kBAAkB,EAAA,CACxC,CACH,CAAC,CACE,CACP,CAAC,CACI;AAEZ;AAEA;;AAEG;AACI,MAAM,YAAY,GAAGF,sBAAK,CAAC,IAAI,CACpC,IAAI,EACJ,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;"}

package/dist/components/DataGrid/components/Body/Body.js

@@ -6,7 +6,7 @@ const Body = ({ table, striped, ariaRoles }) => {
     var _a, _b;
     const enableExpanding = (_a = table.options.enableExpanding) !== null && _a !== undefined ? _a : false;
     const enableRowSelection = (_b = table.options.enableRowSelection) !== null && _b !== undefined ? _b : false;
-    return (React__default.createElement("tbody", { className: "data-grid-body" }, table.getRowModel().rows.map((row) => (React__default.createElement(Row, { key: row.id, row: row, striped: striped, enableExpanding: enableExpanding }, row.getVisibleCells().map((cell) => (React__default.createElement(BodyCell, { cell: cell, key: cell.id, ariaRoles: ariaRoles, enableExpanding: enableExpanding, enableRowSelection: !!enableRowSelection }))))))));
+    return (React__default.createElement("tbody", { className: "data-grid-body", "aria-busy": "false" }, table.getRowModel().rows.map((row) => (React__default.createElement(Row, { key: row.id, row: row, striped: striped, enableExpanding: enableExpanding }, row.getVisibleCells().map((cell) => (React__default.createElement(BodyCell, { cell: cell, key: cell.id, ariaRoles: ariaRoles, enableExpanding: enableExpanding, enableRowSelection: !!enableRowSelection }))))))));
 };
 /**
  * Memoized table body, used to prevent rerenders when columns are being resized.

package/dist/components/DataGrid/components/Body/Body.js.map

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../../../../src/components/DataGrid/components/Body/Body.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { BodyCell } from './BodyCell';\nimport { Row } from './Row';\nimport { AriaRoles } from '../../types';\n\ntype BodyProps = {\n  /**\n   * TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Whether the rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * ARIA roles for the table.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Body = ({ table, striped, ariaRoles }: BodyProps) => {\n  const enableExpanding = table.options.enableExpanding ?? false;\n  const enableRowSelection = table.options.enableRowSelection ?? false;\n\n  return (\n    <tbody className=\"data-grid-body\">\n      {table.getRowModel().rows.map((row) => (\n        <Row key={row.id} row={row} striped={striped} enableExpanding={enableExpanding}>\n          {row.getVisibleCells().map((cell) => (\n            <BodyCell\n              cell={cell}\n              key={cell.id}\n              ariaRoles={ariaRoles}\n              enableExpanding={enableExpanding}\n              enableRowSelection={!!enableRowSelection}\n            />\n          ))}\n        </Row>\n      ))}\n    </tbody>\n  );\n};\n\n/**\n * Memoized table body, used to prevent rerenders when columns are being resized.\n */\nexport const MemoizedBody = React.memo(\n  Body,\n  (prev, next) => prev.table.options.data === next.table.options.data,\n);\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAa,KAAI;;IAC/D,MAAM,eAAe,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,eAAe,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;IAC9D,MAAM,kBAAkB,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,kBAAkB,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;AAEpE,IAAA,QACEA,cAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,EAC9B,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,cAAC,CAAA,aAAA,CAAA,GAAG,IAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,IAC3E,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,CAAC,CAAC,kBAAkB,EAAA,CACxC,CACH,CAAC,CACE,CACP,CAAC,CACI;AAEZ;AAEA;;AAEG;AACI,MAAM,YAAY,GAAGA,cAAK,CAAC,IAAI,CACpC,IAAI,EACJ,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;"}
+{"version":3,"file":"Body.js","sources":["../../../../../src/components/DataGrid/components/Body/Body.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { BodyCell } from './BodyCell';\nimport { Row } from './Row';\nimport { AriaRoles } from '../../types';\n\ntype BodyProps = {\n  /**\n   * TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Whether the rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * ARIA roles for the table.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Body = ({ table, striped, ariaRoles }: BodyProps) => {\n  const enableExpanding = table.options.enableExpanding ?? false;\n  const enableRowSelection = table.options.enableRowSelection ?? false;\n\n  return (\n    <tbody className=\"data-grid-body\" aria-busy=\"false\">\n      {table.getRowModel().rows.map((row) => (\n        <Row key={row.id} row={row} striped={striped} enableExpanding={enableExpanding}>\n          {row.getVisibleCells().map((cell) => (\n            <BodyCell\n              cell={cell}\n              key={cell.id}\n              ariaRoles={ariaRoles}\n              enableExpanding={enableExpanding}\n              enableRowSelection={!!enableRowSelection}\n            />\n          ))}\n        </Row>\n      ))}\n    </tbody>\n  );\n};\n\n/**\n * Memoized table body, used to prevent rerenders when columns are being resized.\n */\nexport const MemoizedBody = React.memo(\n  Body,\n  (prev, next) => prev.table.options.data === next.table.options.data,\n);\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAa,KAAI;;IAC/D,MAAM,eAAe,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,eAAe,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;IAC9D,MAAM,kBAAkB,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,kBAAkB,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;AAEpE,IAAA,QACEA,cAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,WAAA,EAAW,OAAO,EAChD,EAAA,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAC,EAAA,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,EAC3E,EAAA,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,CAAC,CAAC,kBAAkB,EAAA,CACxC,CACH,CAAC,CACE,CACP,CAAC,CACI;AAEZ;AAEA;;AAEG;AACI,MAAM,YAAY,GAAGA,cAAK,CAAC,IAAI,CACpC,IAAI,EACJ,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;"}

package/dist/components/DataGrid/components/Body/EmptyBody/EmptyBody.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var FlexCol = require('../../../../Flex/FlexCol/FlexCol.cjs');
+var Text = require('../../../../Text/Text.cjs');
+var EmptyBody_module = require('./EmptyBody.module.scss.cjs');
+var CrossIcon = require('../../../../../icons/design-system/components/CrossIcon.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const defaultEmptyState = {
+    iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null),
+    heading: 'No results',
+};
+/**
+ * A body component for the DataGrid that displays an empty state when there are no rows.
+ *
+ * If no `emptyState` or `emptySlot` is provided, it will display a default message with an icon.
+ */
+const EmptyBody = React__default.default.memo(({ table, emptyState, emptySlot }) => {
+    const { iconSlot, heading, subHeading } = emptyState || defaultEmptyState;
+    const columnCount = table.getVisibleFlatColumns().length;
+    return (React__default.default.createElement("tbody", { "aria-busy": "false" },
+        React__default.default.createElement("tr", { "aria-rowindex": 2 },
+            React__default.default.createElement("td", { colSpan: columnCount }, emptySlot || (React__default.default.createElement(FlexCol.FlexCol, { alignItems: "center", justifyContent: "center", gap: "4", className: EmptyBody_module.contentContainer },
+                iconSlot && React__default.default.createElement("div", { className: EmptyBody_module.iconContainer }, iconSlot),
+                React__default.default.createElement(Text.Text, { variant: "headingMedium" }, heading),
+                subHeading && React__default.default.createElement(Text.Text, { variant: "subheadingMedium" }, subHeading)))))));
+});
+
+exports.EmptyBody = EmptyBody;
+//# sourceMappingURL=EmptyBody.cjs.map

package/dist/components/DataGrid/components/Body/EmptyBody/EmptyBody.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyBody.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/EmptyBody/EmptyBody.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { EmptyState } from '../../../types';\nimport { FlexCol } from '../../../../Flex/FlexCol';\nimport { Text } from '../../../../Text';\n\nimport styles from './EmptyBody.module.scss';\nimport { CrossIcon } from '../../../../../icons';\n\ntype EmptyBodyProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Optional empty state configuration.\n   */\n  emptyState?: EmptyState;\n\n  /**\n   * Optional slot for custom content in the empty body.\n   */\n  emptySlot?: React.ReactElement;\n};\n\nconst defaultEmptyState: EmptyState = {\n  iconSlot: <CrossIcon />,\n  heading: 'No results',\n};\n\n/**\n * A body component for the DataGrid that displays an empty state when there are no rows.\n *\n * If no `emptyState` or `emptySlot` is provided, it will display a default message with an icon.\n */\nexport const EmptyBody = React.memo(({ table, emptyState, emptySlot }: EmptyBodyProps) => {\n  const { iconSlot, heading, subHeading } = emptyState || defaultEmptyState;\n  const columnCount = table.getVisibleFlatColumns().length;\n\n  return (\n    <tbody aria-busy=\"false\">\n      <tr aria-rowindex={2}>\n        <td colSpan={columnCount}>\n          {emptySlot || (\n            <FlexCol\n              alignItems=\"center\"\n              justifyContent=\"center\"\n              gap=\"4\"\n              className={styles.contentContainer}\n            >\n              {iconSlot && <div className={styles.iconContainer}>{iconSlot}</div>}\n\n              <Text variant=\"headingMedium\">{heading}</Text>\n              {subHeading && <Text variant=\"subheadingMedium\">{subHeading}</Text>}\n            </FlexCol>\n          )}\n        </td>\n      </tr>\n    </tbody>\n  );\n});\n"],"names":["React","CrossIcon","FlexCol","styles","Text"],"mappings":";;;;;;;;;;;;AA2BA,MAAM,iBAAiB,GAAe;IACpC,QAAQ,EAAEA,sBAAC,CAAA,aAAA,CAAAC,wBAAS,EAAG,IAAA,CAAA;AACvB,IAAA,OAAO,EAAE,YAAY;CACtB;AAED;;;;AAIG;AACU,MAAA,SAAS,GAAGD,sBAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAkB,KAAI;IACvF,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,UAAU,IAAI,iBAAiB;IACzE,MAAM,WAAW,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM;IAExD,QACEA,6DAAiB,OAAO,EAAA;AACtB,QAAAA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,eAAA,EAAmB,CAAC,EAAA;YAClBA,sBAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,OAAO,EAAE,WAAW,EACrB,EAAA,SAAS,KACRA,sBAAC,CAAA,aAAA,CAAAE,eAAO,EACN,EAAA,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,GAAG,EACP,SAAS,EAAEC,gBAAM,CAAC,gBAAgB,EAAA;gBAEjC,QAAQ,IAAIH,8CAAK,SAAS,EAAEG,gBAAM,CAAC,aAAa,EAAG,EAAA,QAAQ,CAAO;AAEnE,gBAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAC,EAAA,OAAO,EAAC,eAAe,EAAA,EAAE,OAAO,CAAQ;AAC7C,gBAAA,UAAU,IAAIJ,sBAAC,CAAA,aAAA,CAAAI,SAAI,EAAC,EAAA,OAAO,EAAC,kBAAkB,EAAA,EAAE,UAAU,CAAQ,CAC3D,CACX,CACE,CACF,CACC;AAEZ,CAAC;;;;"}

package/dist/components/DataGrid/components/Body/EmptyBody/EmptyBody.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Table } from '@tanstack/react-table';
+import { EmptyState } from '../../../types';
+type EmptyBodyProps = {
+    /**
+     * The TanStack table instance.
+     */
+    table: Table<any>;
+    /**
+     * Optional empty state configuration.
+     */
+    emptyState?: EmptyState;
+    /**
+     * Optional slot for custom content in the empty body.
+     */
+    emptySlot?: React.ReactElement;
+};
+/**
+ * A body component for the DataGrid that displays an empty state when there are no rows.
+ *
+ * If no `emptyState` or `emptySlot` is provided, it will display a default message with an icon.
+ */
+export declare const EmptyBody: React.MemoExoticComponent<({ table, emptyState, emptySlot }: EmptyBodyProps) => React.JSX.Element>;
+export {};

package/dist/components/DataGrid/components/Body/EmptyBody/EmptyBody.js

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { FlexCol } from '../../../../Flex/FlexCol/FlexCol.js';
+import { Text } from '../../../../Text/Text.js';
+import styles from './EmptyBody.module.scss.js';
+import { ReactComponent as CrossIcon } from '../../../../../icons/design-system/components/CrossIcon.js';
+
+const defaultEmptyState = {
+    iconSlot: React__default.createElement(CrossIcon, null),
+    heading: 'No results',
+};
+/**
+ * A body component for the DataGrid that displays an empty state when there are no rows.
+ *
+ * If no `emptyState` or `emptySlot` is provided, it will display a default message with an icon.
+ */
+const EmptyBody = React__default.memo(({ table, emptyState, emptySlot }) => {
+    const { iconSlot, heading, subHeading } = emptyState || defaultEmptyState;
+    const columnCount = table.getVisibleFlatColumns().length;
+    return (React__default.createElement("tbody", { "aria-busy": "false" },
+        React__default.createElement("tr", { "aria-rowindex": 2 },
+            React__default.createElement("td", { colSpan: columnCount }, emptySlot || (React__default.createElement(FlexCol, { alignItems: "center", justifyContent: "center", gap: "4", className: styles.contentContainer },
+                iconSlot && React__default.createElement("div", { className: styles.iconContainer }, iconSlot),
+                React__default.createElement(Text, { variant: "headingMedium" }, heading),
+                subHeading && React__default.createElement(Text, { variant: "subheadingMedium" }, subHeading)))))));
+});
+
+export { EmptyBody };
+//# sourceMappingURL=EmptyBody.js.map

package/dist/components/DataGrid/components/Body/EmptyBody/EmptyBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyBody.js","sources":["../../../../../../src/components/DataGrid/components/Body/EmptyBody/EmptyBody.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { EmptyState } from '../../../types';\nimport { FlexCol } from '../../../../Flex/FlexCol';\nimport { Text } from '../../../../Text';\n\nimport styles from './EmptyBody.module.scss';\nimport { CrossIcon } from '../../../../../icons';\n\ntype EmptyBodyProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Optional empty state configuration.\n   */\n  emptyState?: EmptyState;\n\n  /**\n   * Optional slot for custom content in the empty body.\n   */\n  emptySlot?: React.ReactElement;\n};\n\nconst defaultEmptyState: EmptyState = {\n  iconSlot: <CrossIcon />,\n  heading: 'No results',\n};\n\n/**\n * A body component for the DataGrid that displays an empty state when there are no rows.\n *\n * If no `emptyState` or `emptySlot` is provided, it will display a default message with an icon.\n */\nexport const EmptyBody = React.memo(({ table, emptyState, emptySlot }: EmptyBodyProps) => {\n  const { iconSlot, heading, subHeading } = emptyState || defaultEmptyState;\n  const columnCount = table.getVisibleFlatColumns().length;\n\n  return (\n    <tbody aria-busy=\"false\">\n      <tr aria-rowindex={2}>\n        <td colSpan={columnCount}>\n          {emptySlot || (\n            <FlexCol\n              alignItems=\"center\"\n              justifyContent=\"center\"\n              gap=\"4\"\n              className={styles.contentContainer}\n            >\n              {iconSlot && <div className={styles.iconContainer}>{iconSlot}</div>}\n\n              <Text variant=\"headingMedium\">{heading}</Text>\n              {subHeading && <Text variant=\"subheadingMedium\">{subHeading}</Text>}\n            </FlexCol>\n          )}\n        </td>\n      </tr>\n    </tbody>\n  );\n});\n"],"names":["React"],"mappings":";;;;;;AA2BA,MAAM,iBAAiB,GAAe;IACpC,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAG,IAAA,CAAA;AACvB,IAAA,OAAO,EAAE,YAAY;CACtB;AAED;;;;AAIG;AACU,MAAA,SAAS,GAAGA,cAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAkB,KAAI;IACvF,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,UAAU,IAAI,iBAAiB;IACzE,MAAM,WAAW,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM;IAExD,QACEA,qDAAiB,OAAO,EAAA;AACtB,QAAAA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,eAAA,EAAmB,CAAC,EAAA;YAClBA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,OAAO,EAAE,WAAW,EACrB,EAAA,SAAS,KACRA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,GAAG,EACP,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA;gBAEjC,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAG,EAAA,QAAQ,CAAO;AAEnE,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,eAAe,EAAA,EAAE,OAAO,CAAQ;AAC7C,gBAAA,UAAU,IAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,kBAAkB,EAAA,EAAE,UAAU,CAAQ,CAC3D,CACX,CACE,CACF,CACC;AAEZ,CAAC;;;;"}

package/dist/components/DataGrid/components/Body/EmptyBody/EmptyBody.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._contentContainer_14bns_1 {\n  padding: var(--sizes-md);\n}\n\n._iconContainer_14bns_5 {\n  display: flex;\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n}\n._iconContainer_14bns_5 svg {\n  width: var(--sizes-12);\n  height: var(--sizes-12);\n}");
+var styles = {"contentContainer":"_contentContainer_14bns_1","iconContainer":"_iconContainer_14bns_5"};
+
+module.exports = styles;
+//# sourceMappingURL=EmptyBody.module.scss.cjs.map

package/dist/components/DataGrid/components/Body/EmptyBody/EmptyBody.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyBody.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/EmptyBody/EmptyBody.module.scss"],"sourcesContent":[".contentContainer {\n  padding: var(--sizes-md);\n}\n\n.iconContainer {\n  display: flex;\n\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n\n  svg {\n    width: var(--sizes-12);\n    height: var(--sizes-12);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mUAAA;;;;;"}

package/dist/components/DataGrid/components/Body/EmptyBody/EmptyBody.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../../_virtual/____insertStyle.js';
+
+insertStyle("._contentContainer_14bns_1 {\n  padding: var(--sizes-md);\n}\n\n._iconContainer_14bns_5 {\n  display: flex;\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n}\n._iconContainer_14bns_5 svg {\n  width: var(--sizes-12);\n  height: var(--sizes-12);\n}");
+var styles = {"contentContainer":"_contentContainer_14bns_1","iconContainer":"_iconContainer_14bns_5"};
+
+export { styles as default };
+//# sourceMappingURL=EmptyBody.module.scss.js.map

package/dist/components/DataGrid/components/Body/EmptyBody/EmptyBody.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyBody.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/EmptyBody/EmptyBody.module.scss"],"sourcesContent":[".contentContainer {\n  padding: var(--sizes-md);\n}\n\n.iconContainer {\n  display: flex;\n\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n\n  svg {\n    width: var(--sizes-12);\n    height: var(--sizes-12);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mUAAA;;;;;"}

package/dist/components/DataGrid/components/Body/EmptyBody/index.d.ts

@@ -0,0 +1 @@
+export { EmptyBody } from './EmptyBody';

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBody.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var Row = require('../Row/Row.cjs');
+var LoadingBodyCell = require('./LoadingBodyCell.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * A body component for the DataGrid that displays a set number of skeleton loading rows.
+ */
+const LoadingBody = React__default.default.memo(({ table, loadingRowCount, striped }) => (React__default.default.createElement("tbody", { "aria-busy": "true" }, Array.from({ length: loadingRowCount }, (_, index) => {
+    // Since we don't have actual row data, we'll just pass a placeholder row object.
+    const row = { id: `loading-row-${index}`, index, depth: 0 };
+    return (React__default.default.createElement(Row.Row, { row: row, striped: striped, key: row.id, enableExpanding: false }, table.getVisibleFlatColumns().map((column) => (React__default.default.createElement(LoadingBodyCell.LoadingBodyCell, { key: column.id, column: column })))));
+}))));
+
+exports.LoadingBody = LoadingBody;
+//# sourceMappingURL=LoadingBody.cjs.map

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBody.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBody.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBody.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { Row } from '../Row';\nimport { LoadingBodyCell } from './LoadingBodyCell';\n\ntype LoadingBodyProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The number of loading rows to display.\n   */\n  loadingRowCount: number;\n\n  /**\n   * Whether striped rows are enabled or not.\n   */\n  striped: boolean;\n};\n\n/**\n * A body component for the DataGrid that displays a set number of skeleton loading rows.\n */\nexport const LoadingBody = React.memo(({ table, loadingRowCount, striped }: LoadingBodyProps) => (\n  <tbody aria-busy=\"true\">\n    {Array.from({ length: loadingRowCount }, (_, index) => {\n      // Since we don't have actual row data, we'll just pass a placeholder row object.\n      const row = { id: `loading-row-${index}`, index, depth: 0 };\n\n      return (\n        <Row row={row} striped={striped} key={row.id} enableExpanding={false}>\n          {table.getVisibleFlatColumns().map((column) => (\n            <LoadingBodyCell key={column.id} column={column} />\n          ))}\n        </Row>\n      );\n    })}\n  </tbody>\n));\n"],"names":["React","Row","LoadingBodyCell"],"mappings":";;;;;;;;;;AAuBA;;AAEG;AACU,MAAA,WAAW,GAAGA,sBAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAoB,MAC1FA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,WAAA,EAAiB,MAAM,EACpB,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;;AAEpD,IAAA,MAAM,GAAG,GAAG,EAAE,EAAE,EAAE,CAAe,YAAA,EAAA,KAAK,CAAE,CAAA,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;IAE3D,QACEA,sBAAC,CAAA,aAAA,CAAAC,OAAG,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,eAAe,EAAE,KAAK,EAAA,EACjE,KAAK,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,MACxCD,sBAAA,CAAA,aAAA,CAACE,+BAAe,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CACpD,CAAC,CACE;AAEV,CAAC,CAAC,CACI,CACT;;;;"}

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBody.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Table } from '@tanstack/react-table';
+type LoadingBodyProps = {
+    /**
+     * The TanStack Table instance.
+     */
+    table: Table<any>;
+    /**
+     * The number of loading rows to display.
+     */
+    loadingRowCount: number;
+    /**
+     * Whether striped rows are enabled or not.
+     */
+    striped: boolean;
+};
+/**
+ * A body component for the DataGrid that displays a set number of skeleton loading rows.
+ */
+export declare const LoadingBody: React.MemoExoticComponent<({ table, loadingRowCount, striped }: LoadingBodyProps) => React.JSX.Element>;
+export {};

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBody.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { Row } from '../Row/Row.js';
+import { LoadingBodyCell } from './LoadingBodyCell.js';
+
+/**
+ * A body component for the DataGrid that displays a set number of skeleton loading rows.
+ */
+const LoadingBody = React__default.memo(({ table, loadingRowCount, striped }) => (React__default.createElement("tbody", { "aria-busy": "true" }, Array.from({ length: loadingRowCount }, (_, index) => {
+    // Since we don't have actual row data, we'll just pass a placeholder row object.
+    const row = { id: `loading-row-${index}`, index, depth: 0 };
+    return (React__default.createElement(Row, { row: row, striped: striped, key: row.id, enableExpanding: false }, table.getVisibleFlatColumns().map((column) => (React__default.createElement(LoadingBodyCell, { key: column.id, column: column })))));
+}))));
+
+export { LoadingBody };
+//# sourceMappingURL=LoadingBody.js.map

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBody.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBody.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { Row } from '../Row';\nimport { LoadingBodyCell } from './LoadingBodyCell';\n\ntype LoadingBodyProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The number of loading rows to display.\n   */\n  loadingRowCount: number;\n\n  /**\n   * Whether striped rows are enabled or not.\n   */\n  striped: boolean;\n};\n\n/**\n * A body component for the DataGrid that displays a set number of skeleton loading rows.\n */\nexport const LoadingBody = React.memo(({ table, loadingRowCount, striped }: LoadingBodyProps) => (\n  <tbody aria-busy=\"true\">\n    {Array.from({ length: loadingRowCount }, (_, index) => {\n      // Since we don't have actual row data, we'll just pass a placeholder row object.\n      const row = { id: `loading-row-${index}`, index, depth: 0 };\n\n      return (\n        <Row row={row} striped={striped} key={row.id} enableExpanding={false}>\n          {table.getVisibleFlatColumns().map((column) => (\n            <LoadingBodyCell key={column.id} column={column} />\n          ))}\n        </Row>\n      );\n    })}\n  </tbody>\n));\n"],"names":["React"],"mappings":";;;;AAuBA;;AAEG;AACU,MAAA,WAAW,GAAGA,cAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAoB,MAC1FA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,WAAA,EAAiB,MAAM,EACpB,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;;AAEpD,IAAA,MAAM,GAAG,GAAG,EAAE,EAAE,EAAE,CAAe,YAAA,EAAA,KAAK,CAAE,CAAA,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;IAE3D,QACEA,cAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,eAAe,EAAE,KAAK,EAAA,EACjE,KAAK,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,MACxCA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CACpD,CAAC,CACE;AAEV,CAAC,CAAC,CACI,CACT;;;;"}

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+var Skeleton = require('../../../../Skeleton/Skeleton.cjs');
+var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
+require('@tanstack/react-table');
+require('../../../../Stack/Stack.cjs');
+require('../../../../Stack/types.cjs');
+var index = require('../../../../../theme/index.cjs');
+require('../../../../Choice/components/styled.cjs');
+require('../../../../Text/Text.cjs');
+require('../../../../Checkbox/styled.cjs');
+require('../../../../Radio/Radio.cjs');
+var CellContent = require('../../CellContent/CellContent.cjs');
+var BodyCell_module = require('../BodyCell/BodyCell.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * A cell component for the DataGrid that displays a skeleton loader.
+ */
+const LoadingBodyCell = ({ column }) => {
+    const { justifyContent, textAlign } = column.columnDef.meta;
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({
+        column,
+    });
+    const loadingCellClassname = buildClassnames.buildClassnames([
+        BodyCell_module.bodyCell,
+        pinnedCellClassName,
+        'data-grid-cell',
+        'data-grid-cell-loading',
+    ]);
+    return (React__default.default.createElement("td", { className: loadingCellClassname, style: pinnedCellStyles, "aria-colindex": column.getIndex() + 1 },
+        React__default.default.createElement(CellContent.CellContent, { contentStyle: {
+                justifyContent,
+                textAlign,
+            } },
+            React__default.default.createElement(Skeleton.Skeleton, { width: "75%", height: index.theme.sizes[3] }))));
+};
+
+exports.LoadingBodyCell = LoadingBodyCell;
+//# sourceMappingURL=LoadingBodyCell.cjs.map

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n  /**\n   * The TanStack Table column instance.\n   */\n  column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n  const { justifyContent, textAlign } = column.columnDef.meta!;\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column,\n  });\n\n  const loadingCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n    'data-grid-cell-loading',\n  ]);\n\n  return (\n    <td\n      className={loadingCellClassname}\n      style={pinnedCellStyles}\n      aria-colindex={column.getIndex() + 1}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        <Skeleton width=\"75%\" height={theme.sizes[3]} />\n      </CellContent>\n    </td>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","Skeleton","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAGC,+BAAe,CAAC;AAC3C,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAC,EAAA,KAAK,EAAC,KAAK,EAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Column } from '@tanstack/react-table';
+type LoadingBodyCellProps = {
+    /**
+     * The TanStack Table column instance.
+     */
+    column: Column<any, any>;
+};
+/**
+ * A cell component for the DataGrid that displays a skeleton loader.
+ */
+export declare const LoadingBodyCell: ({ column }: LoadingBodyCellProps) => React.JSX.Element;
+export {};

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import { Skeleton } from '../../../../Skeleton/Skeleton.js';
+import { buildClassnames } from '../../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
+import '@tanstack/react-table';
+import '../../../../Stack/Stack.js';
+import '../../../../Stack/types.js';
+import { theme } from '../../../../../theme/index.js';
+import '../../../../Choice/components/styled.js';
+import '../../../../Text/Text.js';
+import '../../../../Checkbox/styled.js';
+import '../../../../Radio/Radio.js';
+import { CellContent } from '../../CellContent/CellContent.js';
+import styles from '../BodyCell/BodyCell.module.scss.js';
+
+/**
+ * A cell component for the DataGrid that displays a skeleton loader.
+ */
+const LoadingBodyCell = ({ column }) => {
+    const { justifyContent, textAlign } = column.columnDef.meta;
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({
+        column,
+    });
+    const loadingCellClassname = buildClassnames([
+        styles.bodyCell,
+        pinnedCellClassName,
+        'data-grid-cell',
+        'data-grid-cell-loading',
+    ]);
+    return (React__default.createElement("td", { className: loadingCellClassname, style: pinnedCellStyles, "aria-colindex": column.getIndex() + 1 },
+        React__default.createElement(CellContent, { contentStyle: {
+                justifyContent,
+                textAlign,
+            } },
+            React__default.createElement(Skeleton, { width: "75%", height: theme.sizes[3] }))));
+};
+
+export { LoadingBodyCell };
+//# sourceMappingURL=LoadingBodyCell.js.map

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n  /**\n   * The TanStack Table column instance.\n   */\n  column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n  const { justifyContent, textAlign } = column.columnDef.meta!;\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column,\n  });\n\n  const loadingCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n    'data-grid-cell-loading',\n  ]);\n\n  return (\n    <td\n      className={loadingCellClassname}\n      style={pinnedCellStyles}\n      aria-colindex={column.getIndex() + 1}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        <Skeleton width=\"75%\" height={theme.sizes[3]} />\n      </CellContent>\n    </td>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAC3C,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAC,KAAK,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Body/LoadingBody/index.d.ts

@@ -0,0 +1 @@
+export { LoadingBody } from './LoadingBody';

package/dist/components/DataGrid/components/Body/Row/Row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;AA4BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}
+{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * Row information, including id, index, and depth (typically the TanStack table row).\n   */\n  row: {\n    id: string;\n    index: number;\n    depth: number;\n  };\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;AA8BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}

package/dist/components/DataGrid/components/Body/Row/Row.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
-import { Row as RowItem } from '@tanstack/react-table';
 type RowProps = {
     /**
-     * The row within the TanStack Table instance.
+     * Row information, including id, index, and depth (typically the TanStack table row).
      */
-    row: RowItem<any>;
+    row: {
+        id: string;
+        index: number;
+        depth: number;
+    };
     /**
      * Whether rows should be striped or not.
      */

package/dist/components/DataGrid/components/Body/Row/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;AA4BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}
+{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * Row information, including id, index, and depth (typically the TanStack table row).\n   */\n  row: {\n    id: string;\n    index: number;\n    depth: number;\n  };\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;AA8BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}

package/dist/components/DataGrid/components/Body/index.d.ts

@@ -1 +1,3 @@
 export { Body, MemoizedBody } from './Body';
+export { LoadingBody } from './LoadingBody';
+export { EmptyBody } from './EmptyBody';

package/dist/components/DataGrid/components/Footer/Footer.cjs

@@ -11,7 +11,7 @@ const Footer = ({ table, ariaRoles }) => {
     // We're not making use of column grouping, so we only need the first footer group.
     const [footer] = table.getFooterGroups();
     return (React__default.default.createElement("tfoot", { className: "data-grid-footer" },
-        React__default.default.createElement("tr", { className: "data-grid-footer-row" }, footer.headers.map((header) => (React__default.default.createElement(FooterCell.FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
+        React__default.default.createElement("tr", { className: "data-grid-footer-row", "aria-rowindex": table.getRowCount() + 1 }, footer.headers.map((header) => (React__default.default.createElement(FooterCell.FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
 };
 
 exports.Footer = Footer;

package/dist/components/DataGrid/components/Footer/Footer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.cjs","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\">\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React","FooterCell"],"mappings":";;;;;;;;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;AACjC,QAAAA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sBAAsB,EACjC,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,qCAACC,qBAAU,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}
+{"version":3,"file":"Footer.cjs","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\" aria-rowindex={table.getRowCount() + 1}>\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React","FooterCell"],"mappings":";;;;;;;;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;QACjCA,sBAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,eAAA,EAAgB,KAAK,CAAC,WAAW,EAAE,GAAG,CAAC,IACxE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,sBAAC,CAAA,aAAA,CAAAC,qBAAU,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}

package/dist/components/DataGrid/components/Footer/Footer.js

@@ -5,7 +5,7 @@ const Footer = ({ table, ariaRoles }) => {
     // We're not making use of column grouping, so we only need the first footer group.
     const [footer] = table.getFooterGroups();
     return (React__default.createElement("tfoot", { className: "data-grid-footer" },
-        React__default.createElement("tr", { className: "data-grid-footer-row" }, footer.headers.map((header) => (React__default.createElement(FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
+        React__default.createElement("tr", { className: "data-grid-footer-row", "aria-rowindex": table.getRowCount() + 1 }, footer.headers.map((header) => (React__default.createElement(FooterCell, { key: header.id, ariaRoles: ariaRoles, header: header }))))));
 };
 
 export { Footer };

package/dist/components/DataGrid/components/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\">\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React"],"mappings":";;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;AACjC,QAAAA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sBAAsB,EACjC,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,6BAAC,UAAU,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}
+{"version":3,"file":"Footer.js","sources":["../../../../../src/components/DataGrid/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { AriaRoles } from '../../types';\nimport { FooterCell } from './FooterCell';\n\ntype FooterProps = {\n  /**\n   * The TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Footer = ({ table, ariaRoles }: FooterProps) => {\n  // We're not making use of column grouping, so we only need the first footer group.\n  const [footer] = table.getFooterGroups();\n\n  return (\n    <tfoot className=\"data-grid-footer\">\n      <tr className=\"data-grid-footer-row\" aria-rowindex={table.getRowCount() + 1}>\n        {footer.headers.map((header) => (\n          <FooterCell key={header.id} ariaRoles={ariaRoles} header={header} />\n        ))}\n      </tr>\n    </tfoot>\n  );\n};\n"],"names":["React"],"mappings":";;;AAkBa,MAAA,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAe,KAAI;;IAE1D,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE;AAExC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;QACjCA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,eAAA,EAAgB,KAAK,CAAC,WAAW,EAAE,GAAG,CAAC,IACxE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,CACrE,CAAC,CACC,CACC;AAEZ;;;;"}

package/dist/components/DataGrid/types/DataGridProps.d.ts

@@ -6,6 +6,7 @@ import { SortState } from './SortState';
 import { PinnedColumnState } from './PinnedColumnState';
 import { RowGroupingConfiguration } from './RowGroupingConfiguration';
 import { ColumnWidths } from './ColumnWidths';
+import { EmptyState } from './EmptyState';
 export type CustomState = {
     iconSlot: ReactElement;
     heading: string;
@@ -120,4 +121,24 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Callback which is raised when the column widths change.
      */
     onColumnsResized?: (columnWidths: ColumnWidths) => void;
+    /** Empty/Loading State */
+    /**
+     * Show the loading state.
+     */
+    isLoading?: boolean;
+    /**
+     * Number of rows to be rendered in the loading state.
+     * @default 5
+     */
+    loadingRowCount?: number;
+    /**
+     * Settings for the empty state, rendered when there are no rows.
+     *
+     * If none is provided, a default empty state will be displayed.
+     */
+    emptyState?: EmptyState;
+    /**
+     * Optional slot for custom content in the empty body, overrides empty state.
+     */
+    emptySlot?: React.ReactElement;
 };

package/dist/components/DataGrid/types/EmptyState.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type EmptyState = {
+    iconSlot?: React.ReactElement;
+    heading?: string;
+    subHeading?: string;
+};

package/dist/components/DataGrid/types/index.d.ts

@@ -5,3 +5,4 @@ export { ColumnDefinition } from './ColumnDefinition';
 export { SortState } from './SortState';
 export { PinnedColumnState } from './PinnedColumnState';
 export { RowGroupingConfiguration, ExpandedRows } from './RowGroupingConfiguration';
+export { EmptyState } from './EmptyState';

package/dist/components/Skeleton/Skeleton.cjs

@@ -1,21 +1,16 @@
 'use strict';
 
-var styled = require('styled-components');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var React = require('react');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var Skeleton_module = require('./Skeleton.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Skeleton = styled__default.default(BaseContainer.BaseContainer).attrs(() => ({
-    'aria-hidden': true,
-})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--7bl1ak" }) `display:block;background:#f6f7f8;background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:2500px 104px;cursor:progress;border-radius:4px;${({ width = '', height = '' }) => `
-    width: ${width || '100%'};
-    min-width: ${width};
-    height: ${height || '20px'};
-    min-height: ${height};
-  `};@media (prefers-reduced-motion: no-preference){animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;}@keyframes placeHolderShimmer{0%{background-position:-1080px 0;}100%{background-position:1080px 0;}}`;
-Skeleton.displayName = 'Skeleton';
+const Skeleton = ({ width, height }) => {
+    return (React__default.default.createElement("div", { "aria-hidden": "true", style: assignCssVars.assignCssVars({ width, height }), className: Skeleton_module.skeleton }));
+};
 
 exports.Skeleton = Skeleton;
 //# sourceMappingURL=Skeleton.cjs.map

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\n\nexport type SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = styled(BaseContainer).attrs(() => ({\n  'aria-hidden': true,\n}))<SkeletonProps>`\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n\n  border-radius: 4px;\n  ${({ width = '', height = '' }) => `\n    width: ${width || '100%'};\n    min-width: ${width};\n    height: ${height || '20px'};\n    min-height: ${height};\n  `};\n\n  // Animation\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n`;\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["styled","BaseContainer"],"mappings":";;;;;;;;;AAQO,MAAM,QAAQ,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACzD,IAAA,aAAa,EAAE,IAAI;AACpB,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2KAAA,EAYC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK;AACxB,WAAA,EAAA,KAAK,IAAI,MAAM,CAAA;iBACX,KAAK,CAAA;AACR,YAAA,EAAA,MAAM,IAAI,MAAM,CAAA;kBACZ,MAAM,CAAA;AACrB,EAAA,CAAA,CAAA,8SAAA;AAsBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height }: SkeletonProps) => {\n  return (\n    <div aria-hidden=\"true\" style={assignCssVars({ width, height })} className={styles.skeleton} />\n  );\n};\n"],"names":["React","assignCssVars","styles"],"mappings":";;;;;;;;;;AAWa,MAAA,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAiB,KAAI;IAC3D,QACEA,6DAAiB,MAAM,EAAC,KAAK,EAAEC,2BAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAEC,eAAM,CAAC,QAAQ,EAAI,CAAA;AAEnG;;;;"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
-export type SkeletonProps = {
+import React from 'react';
+type SkeletonProps = {
     width?: string;
     height?: string;
 };
-export declare const Skeleton: import("styled-components").StyledComponent<"div", any, {
-    'aria-hidden': true;
-} & SkeletonProps, "aria-hidden">;
+export declare const Skeleton: ({ width, height }: SkeletonProps) => React.JSX.Element;
+export {};

package/dist/components/Skeleton/Skeleton.js

@@ -1,15 +1,10 @@
-import styled from 'styled-components';
-import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import React__default from 'react';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import styles from './Skeleton.module.scss.js';
 
-const Skeleton = styled(BaseContainer).attrs(() => ({
-    'aria-hidden': true,
-})).withConfig({ displayName: "vui--Skeleton", componentId: "vui--7bl1ak" }) `display:block;background:#f6f7f8;background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:2500px 104px;cursor:progress;border-radius:4px;${({ width = '', height = '' }) => `
-    width: ${width || '100%'};
-    min-width: ${width};
-    height: ${height || '20px'};
-    min-height: ${height};
-  `};@media (prefers-reduced-motion: no-preference){animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;}@keyframes placeHolderShimmer{0%{background-position:-1080px 0;}100%{background-position:1080px 0;}}`;
-Skeleton.displayName = 'Skeleton';
+const Skeleton = ({ width, height }) => {
+    return (React__default.createElement("div", { "aria-hidden": "true", style: assignCssVars({ width, height }), className: styles.skeleton }));
+};
 
 export { Skeleton };
 //# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\n\nexport type SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = styled(BaseContainer).attrs(() => ({\n  'aria-hidden': true,\n}))<SkeletonProps>`\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n\n  border-radius: 4px;\n  ${({ width = '', height = '' }) => `\n    width: ${width || '100%'};\n    min-width: ${width};\n    height: ${height || '20px'};\n    min-height: ${height};\n  `};\n\n  // Animation\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n`;\n\nSkeleton.displayName = 'Skeleton';\n"],"names":[],"mappings":";;;AAQO,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACzD,IAAA,aAAa,EAAE,IAAI;AACpB,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2KAAA,EAYC,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK;AACxB,WAAA,EAAA,KAAK,IAAI,MAAM,CAAA;iBACX,KAAK,CAAA;AACR,YAAA,EAAA,MAAM,IAAI,MAAM,CAAA;kBACZ,MAAM,CAAA;AACrB,EAAA,CAAA,CAAA,8SAAA;AAsBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height }: SkeletonProps) => {\n  return (\n    <div aria-hidden=\"true\" style={assignCssVars({ width, height })} className={styles.skeleton} />\n  );\n};\n"],"names":["React"],"mappings":";;;;AAWa,MAAA,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAiB,KAAI;IAC3D,QACEA,qDAAiB,MAAM,EAAC,KAAK,EAAE,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAI,CAAA;AAEnG;;;;"}

package/dist/components/Skeleton/Skeleton.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._skeleton_1w7c5_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n  cursor: progress;\n  border-radius: var(--sizes-1);\n  width: var(--width, \"100%\");\n  min-width: var(--width, \"100%\");\n  height: var(--height, \"20px\");\n  min-height: var(--height, \"20px\");\n}\n@keyframes _placeHolderShimmer_1w7c5_1 {\n  0% {\n    background-position: -1080px 0;\n  }\n  100% {\n    background-position: 1080px 0;\n  }\n}\n@media (prefers-reduced-motion: no-preference) {\n  ._skeleton_1w7c5_1 {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: _placeHolderShimmer_1w7c5_1;\n    animation-timing-function: linear;\n  }\n}");
+var styles = {"skeleton":"_skeleton_1w7c5_1","placeHolderShimmer":"_placeHolderShimmer_1w7c5_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Skeleton.module.scss.cjs.map

package/dist/components/Skeleton/Skeleton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.scss.cjs","sources":["../../../src/components/Skeleton/Skeleton.module.scss"],"sourcesContent":[".skeleton {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n  border-radius: var(--sizes-1);\n\n  width: var(--width, '100%');\n  min-width: var(--width, '100%');\n\n  height: var(--height, '20px');\n  min-height: var(--height, '20px');\n\n  // Animation\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n}\n\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,y5BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,6BAAA;;;;"}

package/dist/components/Skeleton/Skeleton.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._skeleton_1w7c5_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n  cursor: progress;\n  border-radius: var(--sizes-1);\n  width: var(--width, \"100%\");\n  min-width: var(--width, \"100%\");\n  height: var(--height, \"20px\");\n  min-height: var(--height, \"20px\");\n}\n@keyframes _placeHolderShimmer_1w7c5_1 {\n  0% {\n    background-position: -1080px 0;\n  }\n  100% {\n    background-position: 1080px 0;\n  }\n}\n@media (prefers-reduced-motion: no-preference) {\n  ._skeleton_1w7c5_1 {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: _placeHolderShimmer_1w7c5_1;\n    animation-timing-function: linear;\n  }\n}");
+var styles = {"skeleton":"_skeleton_1w7c5_1","placeHolderShimmer":"_placeHolderShimmer_1w7c5_1"};
+
+export { styles as default };
+//# sourceMappingURL=Skeleton.module.scss.js.map

package/dist/components/Skeleton/Skeleton.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.scss.js","sources":["../../../src/components/Skeleton/Skeleton.module.scss"],"sourcesContent":[".skeleton {\n  box-sizing: border-box;\n  position: relative;\n  margin: var(--sizes-none);\n  padding: var(--sizes-none);\n\n  // General\n  display: block;\n  background: #f6f7f8;\n  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);\n  background-size: 2500px 104px;\n\n  cursor: progress;\n\n  // Sizing\n  border-radius: var(--sizes-1);\n\n  width: var(--width, '100%');\n  min-width: var(--width, '100%');\n\n  height: var(--height, '20px');\n  min-height: var(--height, '20px');\n\n  // Animation\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -1080px 0;\n    }\n    100% {\n      background-position: 1080px 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation-duration: 2s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: placeHolderShimmer;\n    animation-timing-function: linear;\n  }\n}\n\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,y5BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,6BAAA;;;;"}

package/dist/utils/assignCssVars.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var utils = require('../components/ThemeInjector/utils.cjs');
+
+/**
+ * Utility function which converts an object of properties into a style object with CSS variables, for use when
+ * working with CSS modules.
+ *
+ * Property names are converted from camelCase to kebab-case.
+ *
+ * @param props An object containing props to pass though as CSS variables.
+ * @returns A style object containing the CSS variables.
+ */
+const assignCssVars = (props) => {
+    const styleObject = {};
+    Object.entries(props).forEach(([propName, value]) => {
+        if (value === undefined) {
+            return;
+        }
+        styleObject[`--${utils.camelToKebab(propName)}`] = value.toString();
+    });
+    return styleObject;
+};
+
+exports.assignCssVars = assignCssVars;
+//# sourceMappingURL=assignCssVars.cjs.map

package/dist/utils/assignCssVars.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignCssVars.cjs","sources":["../../src/utils/assignCssVars.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { camelToKebab } from '../components/ThemeInjector/utils';\n\ntype ValidCssVariableType = string | number | undefined;\n\n/**\n * Utility function which converts an object of properties into a style object with CSS variables, for use when\n * working with CSS modules.\n *\n * Property names are converted from camelCase to kebab-case.\n *\n * @param props An object containing props to pass though as CSS variables.\n * @returns A style object containing the CSS variables.\n */\nexport const assignCssVars = (props: Record<string, ValidCssVariableType>) => {\n  const styleObject: Record<string, string> = {};\n\n  Object.entries(props).forEach(([propName, value]) => {\n    if (value === undefined) {\n      return;\n    }\n\n    styleObject[`--${camelToKebab(propName)}`] = value.toString();\n  });\n\n  return styleObject as CSSProperties;\n};\n"],"names":["camelToKebab"],"mappings":";;;;AAKA;;;;;;;;AAQG;AACU,MAAA,aAAa,GAAG,CAAC,KAA2C,KAAI;IAC3E,MAAM,WAAW,GAA2B,EAAE;AAE9C,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAI;QAClD,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB;AACD;AAED,QAAA,WAAW,CAAC,CAAA,EAAA,EAAKA,kBAAY,CAAC,QAAQ,CAAC,CAAE,CAAA,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE;AAC/D,KAAC,CAAC;AAEF,IAAA,OAAO,WAA4B;AACrC;;;;"}

package/dist/utils/assignCssVars.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+type ValidCssVariableType = string | number | undefined;
+/**
+ * Utility function which converts an object of properties into a style object with CSS variables, for use when
+ * working with CSS modules.
+ *
+ * Property names are converted from camelCase to kebab-case.
+ *
+ * @param props An object containing props to pass though as CSS variables.
+ * @returns A style object containing the CSS variables.
+ */
+export declare const assignCssVars: (props: Record<string, ValidCssVariableType>) => CSSProperties;
+export {};

package/dist/utils/assignCssVars.js

@@ -0,0 +1,24 @@
+import { camelToKebab } from '../components/ThemeInjector/utils.js';
+
+/**
+ * Utility function which converts an object of properties into a style object with CSS variables, for use when
+ * working with CSS modules.
+ *
+ * Property names are converted from camelCase to kebab-case.
+ *
+ * @param props An object containing props to pass though as CSS variables.
+ * @returns A style object containing the CSS variables.
+ */
+const assignCssVars = (props) => {
+    const styleObject = {};
+    Object.entries(props).forEach(([propName, value]) => {
+        if (value === undefined) {
+            return;
+        }
+        styleObject[`--${camelToKebab(propName)}`] = value.toString();
+    });
+    return styleObject;
+};
+
+export { assignCssVars };
+//# sourceMappingURL=assignCssVars.js.map

package/dist/utils/assignCssVars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignCssVars.js","sources":["../../src/utils/assignCssVars.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { camelToKebab } from '../components/ThemeInjector/utils';\n\ntype ValidCssVariableType = string | number | undefined;\n\n/**\n * Utility function which converts an object of properties into a style object with CSS variables, for use when\n * working with CSS modules.\n *\n * Property names are converted from camelCase to kebab-case.\n *\n * @param props An object containing props to pass though as CSS variables.\n * @returns A style object containing the CSS variables.\n */\nexport const assignCssVars = (props: Record<string, ValidCssVariableType>) => {\n  const styleObject: Record<string, string> = {};\n\n  Object.entries(props).forEach(([propName, value]) => {\n    if (value === undefined) {\n      return;\n    }\n\n    styleObject[`--${camelToKebab(propName)}`] = value.toString();\n  });\n\n  return styleObject as CSSProperties;\n};\n"],"names":[],"mappings":";;AAKA;;;;;;;;AAQG;AACU,MAAA,aAAa,GAAG,CAAC,KAA2C,KAAI;IAC3E,MAAM,WAAW,GAA2B,EAAE;AAE9C,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAI;QAClD,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB;AACD;AAED,QAAA,WAAW,CAAC,CAAA,EAAA,EAAK,YAAY,CAAC,QAAQ,CAAC,CAAE,CAAA,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE;AAC/D,KAAC,CAAC;AAEF,IAAA,OAAO,WAA4B;AACrC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",