@veeqo/ui 9.7.1 → 9.9.0

package/dist/components/ActionMenu/ActionMenu.cjs

@@ -5,6 +5,7 @@ var reactAriaComponents = require('react-aria-components');
 var Dropdown = require('../Dropdown/Dropdown.cjs');
 require('../../hooks/useFocusVisible.cjs');
 var useId = require('../../hooks/useId.cjs');
+require('lodash.throttle');
 var styled = require('./styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

package/dist/components/ActionMenu/ActionMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.cjs","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { Menu, MenuItemProps, Text } from 'react-aria-components';\nimport { Dropdown } from '../Dropdown';\nimport { useId } from '../../hooks';\nimport { ButtonProps } from '../Button/types';\nimport { MenuItem, Section } from './styled';\n\nexport type ActionMenuProps = {\n  id?: string;\n  menuLabel?: string;\n  actions?: MenuItemProps[];\n  ctaProps: ButtonProps;\n  children?: ReactNode;\n};\n\nexport const ActionMenu = ({ id, menuLabel, ctaProps, actions, children }: ActionMenuProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const idComputed = useId({ id, prefix: 'action-menu' });\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLDialogElement> = (e) => {\n    if (e.code === 'Escape' || e.code === 'Tab') setShouldShow(false);\n    e.preventDefault();\n  };\n\n  return (\n    <Dropdown\n      id={idComputed}\n      style={{ padding: '0' }}\n      shouldShow={shouldShow}\n      setShouldShow={setShouldShow}\n      ctaProps={{ size: 'sm', ...ctaProps }}\n      useAnchorWidth\n      onKeyDown={onKeyDown}\n    >\n      <Menu\n        onClose={() => setShouldShow(false)}\n        aria-label={menuLabel || ctaProps.children?.toString()}\n      >\n        {actions?.map((action) => (\n          <MenuItem {...action} key={action.id || action.children?.toString()} />\n        ))}\n\n        {children}\n      </Menu>\n    </Dropdown>\n  );\n};\n\nActionMenu.Item = MenuItem;\nActionMenu.Section = Section;\nActionMenu.Text = Text;\n"],"names":["useState","useId","React","Dropdown","Menu","MenuItem","Section","Text"],"mappings":";;;;;;;;;;;;;AAea,MAAA,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAmB,KAAI;;IAC5F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACnD,IAAA,MAAM,UAAU,GAAGC,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;AAEvD,IAAA,MAAM,SAAS,GAAkD,CAAC,CAAC,KAAI;QACrE,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK;YAAE,aAAa,CAAC,KAAK,CAAC;QACjE,CAAC,CAAC,cAAc,EAAE;AACpB,KAAC;AAED,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,iBAAQ,EACP,EAAA,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,EACrC,cAAc,EACd,IAAA,EAAA,SAAS,EAAE,SAAS,EAAA;QAEpBD,sBAAC,CAAA,aAAA,CAAAE,wBAAI,EACH,EAAA,OAAO,EAAE,MAAM,aAAa,CAAC,KAAK,CAAC,EAAA,YAAA,EACvB,SAAS,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAErD,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,SAAA,GAAA,SAAA;AAAP,YAAA,OAAO,CAAE,GAAG,CAAC,CAAC,MAAM,KAAI;;gBAAC,QACxBF,qCAACG,eAAQ,EAAA,EAAA,GAAK,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,KAAI,CAAA,EAAA,GAAA,MAAM,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAI,CAAA;aACxE,CAAC;YAED,QAAQ,CACJ,CACE;AAEf;AAEA,UAAU,CAAC,IAAI,GAAGA,eAAQ;AAC1B,UAAU,CAAC,OAAO,GAAGC,cAAO;AAC5B,UAAU,CAAC,IAAI,GAAGC,wBAAI;;;;"}
+{"version":3,"file":"ActionMenu.cjs","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { Menu, MenuItemProps, Text } from 'react-aria-components';\nimport { Dropdown } from '../Dropdown';\nimport { useId } from '../../hooks';\nimport { ButtonProps } from '../Button/types';\nimport { MenuItem, Section } from './styled';\n\nexport type ActionMenuProps = {\n  id?: string;\n  menuLabel?: string;\n  actions?: MenuItemProps[];\n  ctaProps: ButtonProps;\n  children?: ReactNode;\n};\n\nexport const ActionMenu = ({ id, menuLabel, ctaProps, actions, children }: ActionMenuProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const idComputed = useId({ id, prefix: 'action-menu' });\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLDialogElement> = (e) => {\n    if (e.code === 'Escape' || e.code === 'Tab') setShouldShow(false);\n    e.preventDefault();\n  };\n\n  return (\n    <Dropdown\n      id={idComputed}\n      style={{ padding: '0' }}\n      shouldShow={shouldShow}\n      setShouldShow={setShouldShow}\n      ctaProps={{ size: 'sm', ...ctaProps }}\n      useAnchorWidth\n      onKeyDown={onKeyDown}\n    >\n      <Menu\n        onClose={() => setShouldShow(false)}\n        aria-label={menuLabel || ctaProps.children?.toString()}\n      >\n        {actions?.map((action) => (\n          <MenuItem {...action} key={action.id || action.children?.toString()} />\n        ))}\n\n        {children}\n      </Menu>\n    </Dropdown>\n  );\n};\n\nActionMenu.Item = MenuItem;\nActionMenu.Section = Section;\nActionMenu.Text = Text;\n"],"names":["useState","useId","React","Dropdown","Menu","MenuItem","Section","Text"],"mappings":";;;;;;;;;;;;;;AAea,MAAA,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAmB,KAAI;;IAC5F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACnD,IAAA,MAAM,UAAU,GAAGC,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;AAEvD,IAAA,MAAM,SAAS,GAAkD,CAAC,CAAC,KAAI;QACrE,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK;YAAE,aAAa,CAAC,KAAK,CAAC;QACjE,CAAC,CAAC,cAAc,EAAE;AACpB,KAAC;AAED,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,iBAAQ,EACP,EAAA,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,EACrC,cAAc,EACd,IAAA,EAAA,SAAS,EAAE,SAAS,EAAA;QAEpBD,sBAAC,CAAA,aAAA,CAAAE,wBAAI,EACH,EAAA,OAAO,EAAE,MAAM,aAAa,CAAC,KAAK,CAAC,EAAA,YAAA,EACvB,SAAS,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAErD,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,SAAA,GAAA,SAAA;AAAP,YAAA,OAAO,CAAE,GAAG,CAAC,CAAC,MAAM,KAAI;;gBAAC,QACxBF,qCAACG,eAAQ,EAAA,EAAA,GAAK,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,KAAI,CAAA,EAAA,GAAA,MAAM,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAI,CAAA;aACxE,CAAC;YAED,QAAQ,CACJ,CACE;AAEf;AAEA,UAAU,CAAC,IAAI,GAAGA,eAAQ;AAC1B,UAAU,CAAC,OAAO,GAAGC,cAAO;AAC5B,UAAU,CAAC,IAAI,GAAGC,wBAAI;;;;"}

package/dist/components/ActionMenu/ActionMenu.js

@@ -3,6 +3,7 @@ import { Menu, Text } from 'react-aria-components';
 import { Dropdown } from '../Dropdown/Dropdown.js';
 import '../../hooks/useFocusVisible.js';
 import { useId } from '../../hooks/useId.js';
+import 'lodash.throttle';
 import { MenuItem, Section } from './styled.js';
 
 const ActionMenu = ({ id, menuLabel, ctaProps, actions, children }) => {

package/dist/components/ActionMenu/ActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.js","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { Menu, MenuItemProps, Text } from 'react-aria-components';\nimport { Dropdown } from '../Dropdown';\nimport { useId } from '../../hooks';\nimport { ButtonProps } from '../Button/types';\nimport { MenuItem, Section } from './styled';\n\nexport type ActionMenuProps = {\n  id?: string;\n  menuLabel?: string;\n  actions?: MenuItemProps[];\n  ctaProps: ButtonProps;\n  children?: ReactNode;\n};\n\nexport const ActionMenu = ({ id, menuLabel, ctaProps, actions, children }: ActionMenuProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const idComputed = useId({ id, prefix: 'action-menu' });\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLDialogElement> = (e) => {\n    if (e.code === 'Escape' || e.code === 'Tab') setShouldShow(false);\n    e.preventDefault();\n  };\n\n  return (\n    <Dropdown\n      id={idComputed}\n      style={{ padding: '0' }}\n      shouldShow={shouldShow}\n      setShouldShow={setShouldShow}\n      ctaProps={{ size: 'sm', ...ctaProps }}\n      useAnchorWidth\n      onKeyDown={onKeyDown}\n    >\n      <Menu\n        onClose={() => setShouldShow(false)}\n        aria-label={menuLabel || ctaProps.children?.toString()}\n      >\n        {actions?.map((action) => (\n          <MenuItem {...action} key={action.id || action.children?.toString()} />\n        ))}\n\n        {children}\n      </Menu>\n    </Dropdown>\n  );\n};\n\nActionMenu.Item = MenuItem;\nActionMenu.Section = Section;\nActionMenu.Text = Text;\n"],"names":["React"],"mappings":";;;;;;;AAea,MAAA,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAmB,KAAI;;IAC5F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACnD,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;AAEvD,IAAA,MAAM,SAAS,GAAkD,CAAC,CAAC,KAAI;QACrE,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK;YAAE,aAAa,CAAC,KAAK,CAAC;QACjE,CAAC,CAAC,cAAc,EAAE;AACpB,KAAC;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,QAAQ,EACP,EAAA,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,EACrC,cAAc,EACd,IAAA,EAAA,SAAS,EAAE,SAAS,EAAA;QAEpBA,cAAC,CAAA,aAAA,CAAA,IAAI,EACH,EAAA,OAAO,EAAE,MAAM,aAAa,CAAC,KAAK,CAAC,EAAA,YAAA,EACvB,SAAS,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAErD,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,SAAA,GAAA,SAAA;AAAP,YAAA,OAAO,CAAE,GAAG,CAAC,CAAC,MAAM,KAAI;;gBAAC,QACxBA,6BAAC,QAAQ,EAAA,EAAA,GAAK,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,KAAI,CAAA,EAAA,GAAA,MAAM,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAI,CAAA;aACxE,CAAC;YAED,QAAQ,CACJ,CACE;AAEf;AAEA,UAAU,CAAC,IAAI,GAAG,QAAQ;AAC1B,UAAU,CAAC,OAAO,GAAG,OAAO;AAC5B,UAAU,CAAC,IAAI,GAAG,IAAI;;;;"}
+{"version":3,"file":"ActionMenu.js","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { Menu, MenuItemProps, Text } from 'react-aria-components';\nimport { Dropdown } from '../Dropdown';\nimport { useId } from '../../hooks';\nimport { ButtonProps } from '../Button/types';\nimport { MenuItem, Section } from './styled';\n\nexport type ActionMenuProps = {\n  id?: string;\n  menuLabel?: string;\n  actions?: MenuItemProps[];\n  ctaProps: ButtonProps;\n  children?: ReactNode;\n};\n\nexport const ActionMenu = ({ id, menuLabel, ctaProps, actions, children }: ActionMenuProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const idComputed = useId({ id, prefix: 'action-menu' });\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLDialogElement> = (e) => {\n    if (e.code === 'Escape' || e.code === 'Tab') setShouldShow(false);\n    e.preventDefault();\n  };\n\n  return (\n    <Dropdown\n      id={idComputed}\n      style={{ padding: '0' }}\n      shouldShow={shouldShow}\n      setShouldShow={setShouldShow}\n      ctaProps={{ size: 'sm', ...ctaProps }}\n      useAnchorWidth\n      onKeyDown={onKeyDown}\n    >\n      <Menu\n        onClose={() => setShouldShow(false)}\n        aria-label={menuLabel || ctaProps.children?.toString()}\n      >\n        {actions?.map((action) => (\n          <MenuItem {...action} key={action.id || action.children?.toString()} />\n        ))}\n\n        {children}\n      </Menu>\n    </Dropdown>\n  );\n};\n\nActionMenu.Item = MenuItem;\nActionMenu.Section = Section;\nActionMenu.Text = Text;\n"],"names":["React"],"mappings":";;;;;;;;AAea,MAAA,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAmB,KAAI;;IAC5F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACnD,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;AAEvD,IAAA,MAAM,SAAS,GAAkD,CAAC,CAAC,KAAI;QACrE,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK;YAAE,aAAa,CAAC,KAAK,CAAC;QACjE,CAAC,CAAC,cAAc,EAAE;AACpB,KAAC;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,QAAQ,EACP,EAAA,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,EACrC,cAAc,EACd,IAAA,EAAA,SAAS,EAAE,SAAS,EAAA;QAEpBA,cAAC,CAAA,aAAA,CAAA,IAAI,EACH,EAAA,OAAO,EAAE,MAAM,aAAa,CAAC,KAAK,CAAC,EAAA,YAAA,EACvB,SAAS,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAErD,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,SAAA,GAAA,SAAA;AAAP,YAAA,OAAO,CAAE,GAAG,CAAC,CAAC,MAAM,KAAI;;gBAAC,QACxBA,6BAAC,QAAQ,EAAA,EAAA,GAAK,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,KAAI,CAAA,EAAA,GAAA,MAAM,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAI,CAAA;aACxE,CAAC;YAED,QAAQ,CACJ,CACE;AAEf;AAEA,UAAU,CAAC,IAAI,GAAG,QAAQ;AAC1B,UAAU,CAAC,OAAO,GAAG,OAAO;AAC5B,UAAU,CAAC,IAAI,GAAG,IAAI;;;;"}

package/dist/components/DataGrid/DataGrid.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+var React = require('react');
+var reactTable = require('@tanstack/react-table');
+require('../../hooks/useFocusVisible.cjs');
+require('uid/secure');
+var useDragToScroll = require('../../hooks/useDragToScroll.cjs');
+require('lodash.throttle');
+var ColumnMapper = require('./utils/ColumnMapper.cjs');
+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 Footer = require('./components/Footer/Footer.cjs');
+var GridContainer = require('./components/GridContainer/GridContainer.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * [WIP]
+ *
+ * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`
+ * component, the `DataGrid` supports both flat and hierarchical (tree) data.
+ *
+ * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality
+ * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.
+ *
+ * Supported features include:
+ * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns
+ * - Selection (single and multiple) and disabling of rows.
+ * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.
+ * - In-built keyboard navigation with arrow keys, and drag to scroll.
+ * - Configurable density.
+ *
+ * *Important: This component uses CSS modules, and therefore requires a `<ThemeProvider />` to be present on your page.*
+ */
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, columns, hiddenColumns, columnOrdering, data, getRowId, 'aria-label': ariaLabel, }) => {
+    const containerRef = React.useRef(null);
+    const showFooter = React.useMemo(() => columns.some((column) => column.renderFooter), [columns]);
+    const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles(), []);
+    const enableColumnResizing = React.useMemo(() => resizeMode !== 'off', [resizeMode]);
+    /**
+     * Mapping of column definitions.
+     */
+    const columnMapper = React.useRef(new ColumnMapper.ColumnMapper());
+    const mappedColumnDefinitions = React.useMemo(() => {
+        const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));
+        return mappedColumns;
+    }, [columns]);
+    /**
+     * Stable references for column states (visibility, order).
+     */
+    // Column render order - the order of the array indicates the order on screen.
+    const columnOrder = React.useMemo(() => {
+        if (!columnOrdering || columnOrdering.length === 0) {
+            return undefined;
+        }
+        return columnOrdering;
+    }, [columnOrdering]);
+    // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.
+    const columnVisibility = React.useMemo(() => {
+        // We can't have no columns visible - if the array is empty we show them all.
+        if (!hiddenColumns || hiddenColumns.length === columns.length) {
+            return undefined;
+        }
+        return columns.reduce((acc, column) => ({
+            ...acc,
+            [column.id]: !hiddenColumns.includes(column.id),
+        }), {});
+    }, [hiddenColumns, columns]);
+    /**
+     * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as
+     * column visibility and ordering.
+     */
+    const table = reactTable.useReactTable({
+        data,
+        columns: mappedColumnDefinitions,
+        // Column settings
+        columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,
+        enableColumnResizing,
+        // Row model
+        getRowId,
+        getCoreRowModel: reactTable.getCoreRowModel(),
+        // Inject external table state
+        state: {
+            columnOrder,
+            columnVisibility,
+        },
+    });
+    /**
+     * Other hooks
+     */
+    useDragToScroll.useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });
+    return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, borderMode: borderMode, containerStyles: containerStyle, 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 })),
+        showFooter && React__default.default.createElement(Footer.Footer, { table: table, ariaRoles: ariaRoles })));
+};
+
+exports.DataGrid = DataGrid;
+//# sourceMappingURL=DataGrid.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { ColumnMapper, getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\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 `<ThemeProvider />` 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  columns,\n  hiddenColumns,\n  columnOrdering,\n  data,\n  getRowId,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  const containerRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(() => getAriaRoles(), []);\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Mapping of column definitions.\n   */\n  const columnMapper = useRef(new ColumnMapper());\n  const mappedColumnDefinitions = useMemo(() => {\n    const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n    return mappedColumns;\n  }, [columns]);\n\n  /**\n   * Stable references for column states (visibility, order).\n   */\n\n  // Column render order - the order of the array indicates the order on screen.\n  const columnOrder = useMemo(() => {\n    if (!columnOrdering || columnOrdering.length === 0) {\n      return undefined;\n    }\n\n    return columnOrdering;\n  }, [columnOrdering]);\n\n  // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n  const columnVisibility = useMemo(() => {\n    // We can't have no columns visible - if the array is empty we show them all.\n    if (!hiddenColumns || hiddenColumns.length === columns.length) {\n      return undefined;\n    }\n\n    return columns.reduce(\n      (acc, column) => ({\n        ...acc,\n        [column.id]: !hiddenColumns.includes(column.id),\n      }),\n      {},\n    );\n  }, [hiddenColumns, columns]);\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\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n    },\n  });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      borderMode={borderMode}\n      containerStyles={containerStyle}\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","ColumnMapper","useReactTable","getCoreRowModel","useDragToScroll","React","GridContainer","Columns","Header","MemoizedBody","Body","Footer"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { DataGridProps } from './types';
+/**
+ * [WIP]
+ *
+ * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`
+ * component, the `DataGrid` supports both flat and hierarchical (tree) data.
+ *
+ * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality
+ * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.
+ *
+ * Supported features include:
+ * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns
+ * - Selection (single and multiple) and disabling of rows.
+ * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.
+ * - In-built keyboard navigation with arrow keys, and drag to scroll.
+ * - Configurable density.
+ *
+ * *Important: This component uses CSS modules, and therefore requires a `<ThemeProvider />` to be present on your page.*
+ */
+export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, columns, hiddenColumns, columnOrdering, data, getRowId, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;

package/dist/components/DataGrid/DataGrid.js

@@ -0,0 +1,98 @@
+import React__default, { useRef, useMemo } from 'react';
+import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import '../../hooks/useFocusVisible.js';
+import 'uid/secure';
+import { useDragToScroll } from '../../hooks/useDragToScroll.js';
+import 'lodash.throttle';
+import { ColumnMapper } from './utils/ColumnMapper.js';
+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 { Footer } from './components/Footer/Footer.js';
+import { GridContainer } from './components/GridContainer/GridContainer.js';
+
+/**
+ * [WIP]
+ *
+ * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`
+ * component, the `DataGrid` supports both flat and hierarchical (tree) data.
+ *
+ * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality
+ * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.
+ *
+ * Supported features include:
+ * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns
+ * - Selection (single and multiple) and disabling of rows.
+ * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.
+ * - In-built keyboard navigation with arrow keys, and drag to scroll.
+ * - Configurable density.
+ *
+ * *Important: This component uses CSS modules, and therefore requires a `<ThemeProvider />` to be present on your page.*
+ */
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, columns, hiddenColumns, columnOrdering, data, getRowId, 'aria-label': ariaLabel, }) => {
+    const containerRef = useRef(null);
+    const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);
+    const ariaRoles = useMemo(() => getAriaRoles(), []);
+    const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);
+    /**
+     * Mapping of column definitions.
+     */
+    const columnMapper = useRef(new ColumnMapper());
+    const mappedColumnDefinitions = useMemo(() => {
+        const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));
+        return mappedColumns;
+    }, [columns]);
+    /**
+     * Stable references for column states (visibility, order).
+     */
+    // Column render order - the order of the array indicates the order on screen.
+    const columnOrder = useMemo(() => {
+        if (!columnOrdering || columnOrdering.length === 0) {
+            return undefined;
+        }
+        return columnOrdering;
+    }, [columnOrdering]);
+    // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.
+    const columnVisibility = useMemo(() => {
+        // We can't have no columns visible - if the array is empty we show them all.
+        if (!hiddenColumns || hiddenColumns.length === columns.length) {
+            return undefined;
+        }
+        return columns.reduce((acc, column) => ({
+            ...acc,
+            [column.id]: !hiddenColumns.includes(column.id),
+        }), {});
+    }, [hiddenColumns, columns]);
+    /**
+     * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as
+     * column visibility and ordering.
+     */
+    const table = useReactTable({
+        data,
+        columns: mappedColumnDefinitions,
+        // Column settings
+        columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,
+        enableColumnResizing,
+        // Row model
+        getRowId,
+        getCoreRowModel: getCoreRowModel(),
+        // Inject external table state
+        state: {
+            columnOrder,
+            columnVisibility,
+        },
+    });
+    /**
+     * Other hooks
+     */
+    useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });
+    return (React__default.createElement(GridContainer, { containerRef: containerRef, borderMode: borderMode, containerStyles: containerStyle, 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 })),
+        showFooter && React__default.createElement(Footer, { table: table, ariaRoles: ariaRoles })));
+};
+
+export { DataGrid };
+//# sourceMappingURL=DataGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { ColumnMapper, getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\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 `<ThemeProvider />` 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  columns,\n  hiddenColumns,\n  columnOrdering,\n  data,\n  getRowId,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  const containerRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n  const ariaRoles = useMemo(() => getAriaRoles(), []);\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Mapping of column definitions.\n   */\n  const columnMapper = useRef(new ColumnMapper());\n  const mappedColumnDefinitions = useMemo(() => {\n    const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n    return mappedColumns;\n  }, [columns]);\n\n  /**\n   * Stable references for column states (visibility, order).\n   */\n\n  // Column render order - the order of the array indicates the order on screen.\n  const columnOrder = useMemo(() => {\n    if (!columnOrdering || columnOrdering.length === 0) {\n      return undefined;\n    }\n\n    return columnOrdering;\n  }, [columnOrdering]);\n\n  // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n  const columnVisibility = useMemo(() => {\n    // We can't have no columns visible - if the array is empty we show them all.\n    if (!hiddenColumns || hiddenColumns.length === columns.length) {\n      return undefined;\n    }\n\n    return columns.reduce(\n      (acc, column) => ({\n        ...acc,\n        [column.id]: !hiddenColumns.includes(column.id),\n      }),\n      {},\n    );\n  }, [hiddenColumns, columns]);\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\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n    },\n  });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      borderMode={borderMode}\n      containerStyles={containerStyle}\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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"}

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var BodyCell = require('./BodyCell/BodyCell.cjs');
+var Row = require('./Row/Row.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Body = ({ table, striped, ariaRoles }) => {
+    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 }, row.getVisibleCells().map((cell) => (React__default.default.createElement(BodyCell.BodyCell, { cell: cell, key: cell.id, ariaRoles: ariaRoles }))))))));
+};
+/**
+ * Memoized table body, used to prevent rerenders when columns are being resized.
+ */
+const MemoizedBody = React__default.default.memo(Body, (prev, next) => prev.table.options.data === next.table.options.data);
+
+exports.Body = Body;
+exports.MemoizedBody = MemoizedBody;
+//# sourceMappingURL=Body.cjs.map

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

@@ -0,0 +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  return (\n    <tbody className=\"data-grid-body\">\n      {table.getRowModel().rows.map((row) => (\n        <Row key={row.id} row={row} striped={striped}>\n          {row.getVisibleCells().map((cell) => (\n            <BodyCell cell={cell} key={cell.id} ariaRoles={ariaRoles} />\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;AAC/D,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,gBAAgB,EAC9B,EAAA,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,sBAAA,CAAA,aAAA,CAACC,OAAG,EAAA,EAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EACzC,EAAA,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BD,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAI,CAAA,CAC7D,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.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Table } from '@tanstack/react-table';
+import { AriaRoles } from '../../types';
+type BodyProps = {
+    /**
+     * TanStack table instance.
+     */
+    table: Table<any>;
+    /**
+     * Whether the rows should be striped or not.
+     */
+    striped: boolean;
+    /**
+     * ARIA roles for the table.
+     */
+    ariaRoles: AriaRoles;
+};
+export declare const Body: ({ table, striped, ariaRoles }: BodyProps) => React.JSX.Element;
+/**
+ * Memoized table body, used to prevent rerenders when columns are being resized.
+ */
+export declare const MemoizedBody: React.MemoExoticComponent<({ table, striped, ariaRoles }: BodyProps) => React.JSX.Element>;
+export {};

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { BodyCell } from './BodyCell/BodyCell.js';
+import { Row } from './Row/Row.js';
+
+const Body = ({ table, striped, ariaRoles }) => {
+    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 }, row.getVisibleCells().map((cell) => (React__default.createElement(BodyCell, { cell: cell, key: cell.id, ariaRoles: ariaRoles }))))))));
+};
+/**
+ * Memoized table body, used to prevent rerenders when columns are being resized.
+ */
+const MemoizedBody = React__default.memo(Body, (prev, next) => prev.table.options.data === next.table.options.data);
+
+export { Body, MemoizedBody };
+//# sourceMappingURL=Body.js.map

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

@@ -0,0 +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  return (\n    <tbody className=\"data-grid-body\">\n      {table.getRowModel().rows.map((row) => (\n        <Row key={row.id} row={row} striped={striped}>\n          {row.getVisibleCells().map((cell) => (\n            <BodyCell cell={cell} key={cell.id} ariaRoles={ariaRoles} />\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;AAC/D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,gBAAgB,EAC9B,EAAA,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EACzC,EAAA,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAI,CAAA,CAC7D,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/BodyCell/BodyCell.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var reactTable = require('@tanstack/react-table');
+var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var CellContent = require('../../CellContent/CellContent.cjs');
+var BodyCell_module = require('./BodyCell.module.css.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const bodyCellClassname = buildClassnames.buildClassnames([BodyCell_module.bodyCell, 'data-grid-cell']);
+/**
+ * Renders a cell element, and its content, for a given column and row, within the grid body.
+ */
+const BodyCell = ({ cell, ariaRoles }) => {
+    const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
+    const CellElement = rowHeader ? 'th' : 'td';
+    return (React__default.default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell },
+        React__default.default.createElement(CellContent.CellContent, { contentStyle: {
+                justifyContent,
+                textAlign,
+            } }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))));
+};
+
+exports.BodyCell = BodyCell;
+//# sourceMappingURL=BodyCell.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport { bodyCell } from './BodyCell.module.css';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nconst bodyCellClassname = buildClassnames([bodyCell, 'data-grid-cell']);\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["buildClassnames","bodyCell","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,iBAAiB,GAAGA,+BAAe,CAAC,CAACC,wBAAQ,EAAE,gBAAgB,CAAC,CAAC;AAEvE;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAA,WAAW,IACV,SAAS,EAAE,iBAAiB,EACb,eAAA,EAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAAA;QAE9CA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzBC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Cell } from '@tanstack/react-table';
+import { AriaRoles } from '../../../types';
+type ColumnCellProps = {
+    /**
+     * Cell within the TanStack Table instance.
+     */
+    cell: Cell<any, any>;
+    /**
+     * ARIA roles for the grid.
+     */
+    ariaRoles: AriaRoles;
+};
+/**
+ * Renders a cell element, and its content, for a given column and row, within the grid body.
+ */
+export declare const BodyCell: ({ cell, ariaRoles }: ColumnCellProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { flexRender } from '@tanstack/react-table';
+import { buildClassnames } from '../../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { CellContent } from '../../CellContent/CellContent.js';
+import { bodyCell } from './BodyCell.module.css.js';
+
+const bodyCellClassname = buildClassnames([bodyCell, 'data-grid-cell']);
+/**
+ * Renders a cell element, and its content, for a given column and row, within the grid body.
+ */
+const BodyCell = ({ cell, ariaRoles }) => {
+    const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
+    const CellElement = rowHeader ? 'th' : 'td';
+    return (React__default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell },
+        React__default.createElement(CellContent, { contentStyle: {
+                justifyContent,
+                textAlign,
+            } }, flexRender(cell.column.columnDef.cell, cell.getContext()))));
+};
+
+export { BodyCell };
+//# sourceMappingURL=BodyCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport { bodyCell } from './BodyCell.module.css';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nconst bodyCellClassname = buildClassnames([bodyCell, 'data-grid-cell']);\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAuBA,MAAM,iBAAiB,GAAG,eAAe,CAAC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;AAEvE;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,SAAS,EAAE,iBAAiB,EACb,eAAA,EAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAAA;QAE9CA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const cssContents = `._baseCell_1w2bt_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._bodyCell_w9phy_1{background-color:#fff;color:var(--text-body-small-color);font-family:var(--text-body-small-font-family);font-size:var(--text-body-small-font-size);font-weight:var(--text-body-small-font-weight);line-height:var(--text-body-small-line-height)}.data-grid-row.striped:nth-of-type(odd)>._bodyCell_w9phy_1{background-color:var(--colors-neutral-grey-lightest)}.data-grid-row.selected>._bodyCell_w9phy_1{background-color:var(--colors-brand-blue-lightest)}.data-grid-row+.data-grid-row>._bodyCell_w9phy_1{border-top:1px solid var(--colors-neutral-grey-base)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiQm9keUNlbGwubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtQkFBQSxzQkFBQSxrQkFBQSx3QkFBQSwySEFBQSwwQkFBQSxDQUFBLEFDQUEsbUJBR0UscUJBQXVCLENBRXZCLGtDQUFtQyxDQUNuQyw4Q0FBK0MsQ0FDL0MsMENBQTJDLENBQzNDLDhDQUErQyxDQUMvQyw4Q0FDRixDQUVBLDJEQUNFLG9EQUNGLENBRUEsMkNBQ0Usa0RBQ0YsQ0FFQSxpREFDRSxvREFDRiIsImZpbGUiOiJCb2R5Q2VsbC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCIuYm9keUNlbGwge1xuICBjb21wb3NlczogYmFzZUNlbGwgZnJvbSAnLi4vLi4vLi4vRGF0YUdyaWQubW9kdWxlLmNzcyc7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG5cbiAgY29sb3I6IHZhcigtLXRleHQtYm9keS1zbWFsbC1jb2xvcik7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS10ZXh0LWJvZHktc21hbGwtZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLXRleHQtYm9keS1zbWFsbC1mb250LXNpemUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtYm9keS1zbWFsbC1saW5lLWhlaWdodCk7XG59XG5cbjpnbG9iYWwoLmRhdGEtZ3JpZC1yb3cuc3RyaXBlZDpudGgtb2YtdHlwZShvZGQpKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktbGlnaHRlc3QpO1xufVxuXG46Z2xvYmFsKC5kYXRhLWdyaWQtcm93LnNlbGVjdGVkKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1icmFuZC1ibHVlLWxpZ2h0ZXN0KTtcbn1cblxuOmdsb2JhbCguZGF0YS1ncmlkLXJvdyArIC5kYXRhLWdyaWQtcm93KSA+IC5ib2R5Q2VsbCB7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWJhc2UpO1xufVxuIl19 */`;
+const style = document.createElement('style');
+style.innerHTML = cssContents;
+document.head.appendChild(style);
+const bodyCell = '_bodyCell_w9phy_1 _baseCell_1w2bt_1';
+
+exports.bodyCell = bodyCell;
+//# sourceMappingURL=BodyCell.module.css.cjs.map

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodyCell.module.css.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.css"],"sourcesContent":[".bodyCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,64CAA64C,CAAC;AAC94C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,QAAQ,GAAG;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.js

@@ -0,0 +1,9 @@
+const cssContents = `._baseCell_1w2bt_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._bodyCell_w9phy_1{background-color:#fff;color:var(--text-body-small-color);font-family:var(--text-body-small-font-family);font-size:var(--text-body-small-font-size);font-weight:var(--text-body-small-font-weight);line-height:var(--text-body-small-line-height)}.data-grid-row.striped:nth-of-type(odd)>._bodyCell_w9phy_1{background-color:var(--colors-neutral-grey-lightest)}.data-grid-row.selected>._bodyCell_w9phy_1{background-color:var(--colors-brand-blue-lightest)}.data-grid-row+.data-grid-row>._bodyCell_w9phy_1{border-top:1px solid var(--colors-neutral-grey-base)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiQm9keUNlbGwubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtQkFBQSxzQkFBQSxrQkFBQSx3QkFBQSwySEFBQSwwQkFBQSxDQUFBLEFDQUEsbUJBR0UscUJBQXVCLENBRXZCLGtDQUFtQyxDQUNuQyw4Q0FBK0MsQ0FDL0MsMENBQTJDLENBQzNDLDhDQUErQyxDQUMvQyw4Q0FDRixDQUVBLDJEQUNFLG9EQUNGLENBRUEsMkNBQ0Usa0RBQ0YsQ0FFQSxpREFDRSxvREFDRiIsImZpbGUiOiJCb2R5Q2VsbC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCIuYm9keUNlbGwge1xuICBjb21wb3NlczogYmFzZUNlbGwgZnJvbSAnLi4vLi4vLi4vRGF0YUdyaWQubW9kdWxlLmNzcyc7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG5cbiAgY29sb3I6IHZhcigtLXRleHQtYm9keS1zbWFsbC1jb2xvcik7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS10ZXh0LWJvZHktc21hbGwtZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLXRleHQtYm9keS1zbWFsbC1mb250LXNpemUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtYm9keS1zbWFsbC1saW5lLWhlaWdodCk7XG59XG5cbjpnbG9iYWwoLmRhdGEtZ3JpZC1yb3cuc3RyaXBlZDpudGgtb2YtdHlwZShvZGQpKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktbGlnaHRlc3QpO1xufVxuXG46Z2xvYmFsKC5kYXRhLWdyaWQtcm93LnNlbGVjdGVkKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1icmFuZC1ibHVlLWxpZ2h0ZXN0KTtcbn1cblxuOmdsb2JhbCguZGF0YS1ncmlkLXJvdyArIC5kYXRhLWdyaWQtcm93KSA+IC5ib2R5Q2VsbCB7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWJhc2UpO1xufVxuIl19 */`;
+const style = document.createElement('style');
+style.innerHTML = cssContents;
+document.head.appendChild(style);
+const bodyCell = '_bodyCell_w9phy_1 _baseCell_1w2bt_1';
+
+export { bodyCell };
+//# sourceMappingURL=BodyCell.module.css.js.map

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodyCell.module.css.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.css"],"sourcesContent":[".bodyCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,64CAA64C,CAAC;AAC94C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,QAAQ,GAAG;;;;"}

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

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

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Row = ({ row, striped, children }) => (React__default.default.createElement("tr", { className: buildClassnames.buildClassnames(['data-grid-row', striped ? 'striped' : undefined]), key: row.id, "aria-rowindex": row.index + 2 }, children));
+
+exports.Row = Row;
+//# sourceMappingURL=Row.cjs.map

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

@@ -0,0 +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   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, 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  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;MAuBa,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAY,MACtDA,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,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,EAE3B,EAAA,QAAQ,CACN;;;;"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Row as RowItem } from '@tanstack/react-table';
+type RowProps = {
+    /**
+     * The row within the TanStack Table instance.
+     */
+    row: RowItem<any>;
+    /**
+     * Whether rows should be striped or not.
+     */
+    striped: boolean;
+    /**
+     * Child elements (table cells).
+     */
+    children: React.ReactNode;
+};
+export declare const Row: ({ row, striped, children }: RowProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import React__default from 'react';
+import { buildClassnames } from '../../../../../utils/buildClassnames.js';
+import 'uid/secure';
+
+const Row = ({ row, striped, children }) => (React__default.createElement("tr", { className: buildClassnames(['data-grid-row', striped ? 'striped' : undefined]), key: row.id, "aria-rowindex": row.index + 2 }, children));
+
+export { Row };
+//# sourceMappingURL=Row.js.map

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

@@ -0,0 +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   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, 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  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;MAuBa,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAY,MACtDA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,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,EAE3B,EAAA,QAAQ,CACN;;;;"}

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

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

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

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