@neo4j-ndl/react 3.9.17 → 4.0.0-alpha.0.608161c

package/lib/esm/data-grid/Components.js

@@ -9,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -32,11 +31,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { useMergeRefs } from '@floating-ui/react';
 import { flexRender, } from '@tanstack/react-table';
-import { forwardRef, Fragment, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { classNames } from '../_common/defaultImports';
+import { CleanIconButton } from '../clean-icon-button';
 import { Menu } from '../context-menu';
-import { IconButton } from '../icon-button';
 import { Bars3CenterLeftIconOutline, BarsArrowDownIconOutline, BarsArrowUpIconOutline, ChevronDownIconSolid, ChevronLeftIconOutline, ChevronRightIconOutline, DatagridNodataIcon, EllipsisHorizontalIconOutline, } from '../icons';
 import { LoadingSpinner } from '../loading-spinner';
 import { Select } from '../select';
@@ -44,7 +44,6 @@ import { Skeleton } from '../skeleton';
 import { Typography } from '../typography';
 import { useDataGridContext } from './DataGridContext';
 import { resizeColumn, ResizeDirection, userFriendlyPagination, } from './helpers';
-import NoDataIllustration from './illustrations/NoData';
 /** Table results per page, with the first option being the default */
 const TABLE_RESULTS = {
     DEFAULT: 10,
@@ -54,29 +53,29 @@ const getPaginationOptions = (pageSize) => {
     return [...new Set([...TABLE_RESULTS.values, pageSize])]
         .sort((a, b) => a - b)
         .map((option) => ({
-        value: option,
         label: `${option}`,
+        value: option,
     }));
 };
 export const DEFAULT_SORT_ACTIONS = (cell) => ({
     asc: {
-        title: 'Sort ascending',
         icon: _jsx(BarsArrowUpIconOutline, {}),
         onClick: () => cell.column.toggleSorting(false),
-    },
-    desc: {
-        title: 'Sort descending',
-        icon: _jsx(BarsArrowDownIconOutline, {}),
-        onClick: () => cell.column.toggleSorting(true),
+        title: 'Sort ascending',
     },
     default: {
-        title: 'Default sort',
         icon: _jsx(Bars3CenterLeftIconOutline, {}),
         onClick: () => cell.column.clearSorting(),
+        title: 'Default sort',
+    },
+    desc: {
+        icon: _jsx(BarsArrowDownIconOutline, {}),
+        onClick: () => cell.column.toggleSorting(true),
+        title: 'Sort descending',
     },
 });
-const ResizingBar = ({ header, children, innerProps, }) => {
-    const _a = innerProps || {}, { className = undefined, htmlAttributes = undefined } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
+const ResizingBar = (_a) => {
+    var { header, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["header", "className", "style", "htmlAttributes", "ref"]);
     const { isKeyboardNavigationEnabled } = useDataGridContext();
     const handleKeyDown = (event) => {
         if (event.key === 'ArrowLeft') {
@@ -90,36 +89,35 @@ const ResizingBar = ({ header, children, innerProps, }) => {
             resizeColumn(ResizeDirection.RIGHT, header);
         }
     };
-    return (_jsx(_Fragment, { children: children || (_jsx("button", Object.assign({}, restInnerProps, { type: "button", className: classNames('ndl-data-grid-resizer', className, {
-                'ndl-data-grid-is-resizing': header.column.getIsResizing(),
-            }), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onKeyDown: handleKeyDown, "aria-label": "Resizing bar", tabIndex: isKeyboardNavigationEnabled ? -1 : 0 }, htmlAttributes))) }));
+    return (_jsx("button", Object.assign({ ref: ref, type: "button", className: classNames('ndl-data-grid-resizer', className, {
+            'ndl-data-grid-is-resizing': header.column.getIsResizing(),
+        }), style: style, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onKeyDown: handleKeyDown, "aria-label": "Resizing bar", tabIndex: isKeyboardNavigationEnabled ? -1 : 0 }, restProps, htmlAttributes)));
 };
-const Scrollable = forwardRef(function Scrollable({ children, innerProps }, ref) {
-    const _a = innerProps || {}, { className, htmlAttributes = undefined } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
-    return (_jsx("div", Object.assign({ ref: ref }, restInnerProps, { className: classNames('ndl-data-grid-scrollable', className) }, htmlAttributes, { children: children })));
-});
-const Header = ({ children, innerProps }) => {
+const Scrollable = (_a) => {
+    var { children, ref, className, style, htmlAttributes } = _a, restProps = __rest(_a, ["children", "ref", "className", "style", "htmlAttributes"]);
+    return (_jsx("div", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-scrollable', className) }, restProps, htmlAttributes, { children: children })));
+};
+const Header = (_a) => {
+    var { children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "style", "htmlAttributes", "ref"]);
     const { tableProps, components } = useDataGridContext();
     const { getHeaderGroups, getState } = tableProps;
-    const _a = innerProps || {}, { className = undefined, htmlAttributes = undefined } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
-    return (_jsx("div", Object.assign({}, restInnerProps, { role: "rowgroup", className: classNames('ndl-data-grid-thead', className, {
+    return (_jsx("div", Object.assign({ role: "rowgroup", className: classNames('ndl-data-grid-thead', className, {
             'ndl-data-grid-is-resizing': getState().columnSizingInfo.isResizingColumn,
-        }) }, htmlAttributes, { children: children || (_jsx(_Fragment, { children: getHeaderGroups().map((headerGroup) => (_jsx("div", { className: "ndl-data-grid-tr", role: "row", children: headerGroup.headers.map((header) => components.HeaderCell && (_jsx(components.HeaderCell, { cell: header }, header.id))) }, headerGroup.id))) })) })));
+        }), style: style, ref: ref }, restProps, htmlAttributes, { children: children || (_jsx(_Fragment, { children: getHeaderGroups().map((headerGroup) => (_jsx("div", { className: "ndl-data-grid-tr", role: "row", children: headerGroup.headers.map((header) => components.HeaderCell && (_jsx(components.HeaderCell, { cell: header }, header.id))) }, headerGroup.id))) })) })));
 };
-export const ActionButton = ({ action, children, onClose, innerProps, }) => {
-    const _a = innerProps || {}, { className, htmlAttributes = undefined } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
-    const { onClick } = action;
+export const ActionButton = (_a) => {
+    var { action, onClose, as, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["action", "onClose", "as", "className", "style", "htmlAttributes", "ref"]);
+    const { onClick } = action, restAction = __rest(action, ["onClick"]);
     const interceptedOnClick = useCallback((e) => {
-        const providedOnClick = onClick || (innerProps === null || innerProps === void 0 ? void 0 : innerProps.onClick);
+        const providedOnClick = onClick !== null && onClick !== void 0 ? onClick : action.onClick;
         if (typeof providedOnClick === 'function') {
             providedOnClick(e);
         }
-        onClose();
-    }, [innerProps === null || innerProps === void 0 ? void 0 : innerProps.onClick, onClick, onClose]);
-    const commonProps = Object.assign(Object.assign(Object.assign(Object.assign({}, restInnerProps), action), { className: classNames('ndl-data-grid-column-action', className), onClick: interceptedOnClick }), htmlAttributes);
-    return _jsx(_Fragment, { children: children || _jsx(Menu.Item, Object.assign({}, commonProps)) });
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [action.onClick, onClick, onClose]);
+    return (_jsx(Menu.Item, Object.assign({ onClick: interceptedOnClick, as: as, className: className, style: style, htmlAttributes: htmlAttributes, ref: ref }, restAction, restProps)));
 };
-const RowActionCell = ({ cell, innerIconButtonProps, innerMenuProps, }) => {
+const ActionCell = ({ cell, innerCleanIconButtonProps, innerMenuProps, }) => {
     var _a, _b;
     const { components, isSkeletonLoading, portalTarget } = useDataGridContext();
     const actionsButtonRef = useRef(null);
@@ -131,10 +129,10 @@ const RowActionCell = ({ cell, innerIconButtonProps, innerMenuProps, }) => {
     const { actions, onOpenChange } = cell.column.columnDef.meta.isActionCell;
     if (isSkeletonLoading)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ as: "button", isClean: true, size: "medium", ariaLabel: `Row actions for row id: ${cell.row.id}`, ref: actionsButtonRef, isActive: isActionsOpen, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(CleanIconButton, Object.assign({ as: "button", size: "medium", tooltip: `Actions`, ref: actionsButtonRef, isActive: isActionsOpen, onClick: () => {
                     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isActionsOpen);
                     setIsActionsOpen(!isActionsOpen);
-                } }, innerIconButtonProps, { htmlAttributes: Object.assign({ tabIndex: 0 }, innerIconButtonProps === null || innerIconButtonProps === void 0 ? void 0 : innerIconButtonProps.htmlAttributes), children: (innerIconButtonProps === null || innerIconButtonProps === void 0 ? void 0 : innerIconButtonProps.children) || _jsx(EllipsisHorizontalIconOutline, {}) })), _jsx(Menu, Object.assign({ isOpen: isActionsOpen, anchorRef: actionsButtonRef, onClose: () => {
+                } }, innerCleanIconButtonProps, { htmlAttributes: Object.assign({ tabIndex: 0 }, innerCleanIconButtonProps === null || innerCleanIconButtonProps === void 0 ? void 0 : innerCleanIconButtonProps.htmlAttributes), children: (innerCleanIconButtonProps === null || innerCleanIconButtonProps === void 0 ? void 0 : innerCleanIconButtonProps.children) || (_jsx(EllipsisHorizontalIconOutline, {})) })), _jsx(Menu, Object.assign({ isOpen: isActionsOpen, anchorRef: actionsButtonRef, onClose: () => {
                     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
                     setIsActionsOpen(false);
                 } }, innerMenuProps, { portalTarget: portalTarget, children: (innerMenuProps === null || innerMenuProps === void 0 ? void 0 : innerMenuProps.children) || (_jsx(Menu.Items, { children: actions.map((action, i) => components.ActionButton && (_jsx(components.ActionButton, { action: Object.assign(Object.assign({}, action), { onClick: (e) => {
@@ -142,13 +140,13 @@ const RowActionCell = ({ cell, innerIconButtonProps, innerMenuProps, }) => {
                                 (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e, cell);
                             } }), onClose: () => setIsActionsOpen(false) }, `${cell.column.id}-action-${i}`))) })) }))] }));
 };
-export const ColumnControls = ({ cell, children, innerProps, }) => {
-    var _a;
-    const _b = innerProps || {}, { className, htmlAttributes } = _b, restInnerProps = __rest(_b, ["className", "htmlAttributes"]);
+export const ColumnControls = (_a) => {
+    var _b;
+    var { cell, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["cell", "children", "className", "style", "htmlAttributes", "ref"]);
     const { components, portalTarget } = useDataGridContext();
     const sort = cell.column.getIsSorted();
     const canSort = cell.column.getCanSort();
-    const { hasDefaultSortingActions = true, actions } = ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnActions) || {};
+    const { hasDefaultSortingActions = true, actions } = ((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.columnActions) || {};
     const sortingActions = useMemo(() => {
         if (canSort) {
             if (sort !== 'asc' && sort !== 'desc') {
@@ -181,19 +179,15 @@ export const ColumnControls = ({ cell, children, innerProps, }) => {
     const [isActionsOpen, setIsActionsOpen] = useState(false);
     if (!actions || actions.length === 0)
         return null;
-    return newActions.length > 0 ? (_jsx("div", Object.assign({}, restInnerProps, { className: classNames('ndl-header-action-group', className), style: {
-            zIndex: 100000,
-            position: 'relative',
-            right: '0px',
-        } }, htmlAttributes, { children: children || (_jsxs(Fragment, { children: [_jsx(IconButton, { isClean: true, size: "small", ariaLabel: `Column actions for ${cell.column.id} column`, ref: actionsButtonRef, isActive: isActionsOpen, onClick: () => {
+    return newActions.length > 0 ? (_jsx("div", Object.assign({ ref: ref, className: classNames('ndl-header-action-group', className), style: style }, restProps, htmlAttributes, { children: children || (_jsxs(Fragment, { children: [_jsx(CleanIconButton, { size: "small", tooltip: `Actions`, ref: actionsButtonRef, isActive: isActionsOpen, onClick: () => {
                         setIsActionsOpen(!isActionsOpen);
                     }, htmlAttributes: {
                         tabIndex: 0,
                     }, children: _jsx(ChevronDownIconSolid, {}) }), _jsx(Menu, { isOpen: isActionsOpen, anchorRef: actionsButtonRef, onClose: () => setIsActionsOpen(false), portalTarget: portalTarget, children: _jsx(Menu.Items, { children: newActions.map((action, i) => components.ActionButton && (_jsx(components.ActionButton, { action: action, onClose: () => setIsActionsOpen(false) }, `${cell.column.id}-action-${i}`))) }) })] })) }))) : null;
 };
-const HeaderCell = ({ cell, children, innerProps, }) => {
+const HeaderCell = (_a) => {
+    var { cell, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["cell", "children", "className", "style", "htmlAttributes", "ref"]);
     const { components, isResizable, isKeyboardNavigationEnabled } = useDataGridContext();
-    const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
     const sort = cell.column.getIsSorted();
     const canSort = cell.column.getCanSort();
     const ariaSortRole = useMemo(() => {
@@ -221,25 +215,21 @@ const HeaderCell = ({ cell, children, innerProps, }) => {
             ? `Press ENTER or SPACE to sort column ${cell.column.id}`
             : `Column id: ${cell.column.id}`;
     }, [canSort, cell.column.id]);
-    const ref = useRef(null);
     const isActionColumn = useMemo(() => { var _a; return typeof ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isActionCell) === 'object'; }, [cell.column.columnDef.meta]);
     const Tag = canSort ? 'button' : 'div';
     const InnerHeaderCell = () => (_jsxs("div", { className: "ndl-header-cell", children: [cell.isPlaceholder
                 ? null
                 : flexRender(cell.column.columnDef.header, cell.getContext()), canSort && Icon] }));
-    return (_jsx("div", Object.assign({ tabIndex: isKeyboardNavigationEnabled && !isActionColumn ? 0 : undefined, role: "columnheader" }, restInnerProps, { className: classNames('ndl-data-grid-th', className, {
+    return (_jsx("div", Object.assign({ ref: ref, tabIndex: isKeyboardNavigationEnabled && !isActionColumn ? 0 : undefined, role: "columnheader", className: classNames('ndl-data-grid-th', className, {
             'ndl-focusable-cell': isKeyboardNavigationEnabled,
             'ndl-data-grid-row-action': isActionColumn,
             'ndl-data-grid-pinned-cell': cell.column.getIsPinned(),
             'ndl-data-grid-pinned-cell-right': cell.column.getIsPinned() === 'right',
             'ndl-data-grid-pinned-cell-left': cell.column.getIsPinned() === 'left',
             'ndl-data-grid-is-resizing': cell.column.getIsResizing(),
-        }), "aria-sort": ariaSortRole, style: {
-            width: isActionColumn ? 40 : cell.getSize(),
-            maxWidth: cell.column.columnDef.maxSize
+        }), "aria-sort": ariaSortRole, style: Object.assign(Object.assign({}, style), { width: isActionColumn ? 40 : cell.getSize(), maxWidth: cell.column.columnDef.maxSize
                 ? `${cell.column.columnDef.maxSize}px`
-                : 'none',
-        } }, (isKeyboardNavigationEnabled
+                : 'none' }) }, (isKeyboardNavigationEnabled
         ? {
             onKeyDown: (e) => {
                 if (isResizable &&
@@ -255,37 +245,37 @@ const HeaderCell = ({ cell, children, innerProps, }) => {
                 }
             },
         }
-        : {}), htmlAttributes, { ref: ref, children: children || (_jsxs(_Fragment, { children: [_jsx(Tag, { className: "ndl-header-group", style: {
+        : {}), restProps, htmlAttributes, { children: children || (_jsxs(_Fragment, { children: [_jsx(Tag, { className: "ndl-header-group", style: {
                         cursor: canSort ? 'pointer' : 'default',
                     }, "aria-describedby": ariaDescription, onClick: () => canSort && cell.column.toggleSorting(), tabIndex: canSort ? 0 : undefined, children: components.HeaderTitle ? (_jsx(components.HeaderTitle, { cell: cell, children: _jsx(InnerHeaderCell, {}) })) : (_jsx(InnerHeaderCell, {})) }), components.ColumnControls && (_jsx(components.ColumnControls, { cell: cell })), isResizable &&
                     cell.column.getCanResize() &&
                     components.ResizingBar && _jsx(components.ResizingBar, { header: cell })] })) }), cell.id));
 };
-const HeaderTitle = ({ cell, children, innerProps, }) => {
-    const _a = innerProps || {}, { htmlAttributes } = _a, restInnerProps = __rest(_a, ["htmlAttributes"]);
+const HeaderTitle = (_a) => {
+    var { cell, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["cell", "children", "className", "style", "htmlAttributes", "ref"]);
     const { column, id } = cell;
     const title = typeof column.columnDef.header === 'string' ? column.columnDef.header : id;
-    return (_jsx("div", Object.assign({}, restInnerProps, { title: title }, htmlAttributes, { children: children })));
+    return (_jsx("div", Object.assign({ ref: ref, className: className, title: title, style: style }, restProps, htmlAttributes, { children: children })));
 };
-const Body = ({ children, innerProps }) => {
+const Body = (_a) => {
+    var { children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "style", "htmlAttributes", "ref"]);
     const { tableProps, components, isLoading } = useDataGridContext();
     const { getRowModel } = tableProps;
-    const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
-    return (_jsx("div", Object.assign({}, restInnerProps, { className: classNames('ndl-data-grid-tbody', className), role: "rowgroup", "aria-busy": isLoading ? 'true' : 'false' }, htmlAttributes, { children: children || (_jsxs(_Fragment, { children: [isLoading && components.LoadingPlaceholder && (_jsx(components.LoadingPlaceholder, {})), !isLoading &&
+    return (_jsx("div", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-tbody', className), role: "rowgroup", "aria-busy": isLoading ? 'true' : 'false' }, restProps, htmlAttributes, { children: children || (_jsxs(_Fragment, { children: [isLoading && components.LoadingPlaceholder && (_jsx(components.LoadingPlaceholder, {})), !isLoading &&
                     getRowModel().rows.length === 0 &&
                     components.NoDataPlaceholder && _jsx(components.NoDataPlaceholder, {}), !isLoading &&
                     getRowModel().rows.map((row, idx) => components.BodyRow && (_jsx(components.BodyRow, { row: row }, `table-row-${idx}`)))] })) })));
 };
-const BodyCell = ({ cell, children, innerProps, }) => {
-    var _a, _b, _c;
+const BodyCell = (_a) => {
+    var _b, _c, _d;
+    var { cell, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["cell", "children", "className", "style", "htmlAttributes", "ref"]);
     const isResizing = cell.column.getIsResizing();
-    const _d = innerProps || {}, { className, htmlAttributes } = _d, restInnerProps = __rest(_d, ["className", "htmlAttributes"]);
-    const isActionColumn = Boolean((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isActionCell);
-    const isInlineEditCell = Boolean((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.isInlineEditCell);
-    const isDropDownCell = Boolean((_c = cell.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.isDropDownCell);
+    const isActionColumn = Boolean((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.isActionCell);
+    const isInlineEditCell = Boolean((_c = cell.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.isInlineEditCell);
+    const isDropDownCell = Boolean((_d = cell.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.isDropDownCell);
     const isCustomCell = isActionColumn || isDropDownCell;
     const { isKeyboardNavigationEnabled, isSkeletonLoading, skeletonProps } = useDataGridContext();
-    return (_jsx("div", Object.assign({}, restInnerProps, { className: classNames('ndl-data-grid-td', className, {
+    return (_jsx("div", Object.assign({ ref: ref, className: classNames('ndl-data-grid-td', className, {
             'ndl-focusable-cell': isKeyboardNavigationEnabled,
             'ndl-data-grid-is-resizing': isResizing,
             'ndl-data-grid-custom-cell': isCustomCell,
@@ -295,16 +285,17 @@ const BodyCell = ({ cell, children, innerProps, }) => {
             'ndl-data-grid-pinned-cell': cell.column.getIsPinned(),
             'ndl-data-grid-pinned-cell-right': cell.column.getIsPinned() === 'right',
             'ndl-data-grid-pinned-cell-left': cell.column.getIsPinned() === 'left',
-        }), role: "cell", tabIndex: isKeyboardNavigationEnabled ? 0 : undefined, style: Object.assign(Object.assign({}, innerProps === null || innerProps === void 0 ? void 0 : innerProps.style), { width: isActionColumn ? 40 : cell.column.getSize() }) }, htmlAttributes, { children: _jsx(Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular", width: "100%" }, skeletonProps, { isLoading: isSkeletonLoading && !isActionColumn, children: children || flexRender(cell.column.columnDef.cell, cell.getContext()) })) }), cell.id));
+        }), role: "cell", tabIndex: isKeyboardNavigationEnabled ? 0 : undefined, style: Object.assign(Object.assign({}, style), { width: isActionColumn ? 40 : cell.column.getSize() }) }, restProps, htmlAttributes, { children: _jsx(Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular", width: "100%" }, skeletonProps, { isLoading: isSkeletonLoading && !isActionColumn, children: children || flexRender(cell.column.columnDef.cell, cell.getContext()) })) }), cell.id));
 };
-const BodyRow = ({ row, children, innerProps, }) => {
+const BodyRow = (_a) => {
+    var { row, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["row", "children", "className", "style", "htmlAttributes", "ref"]);
     const { components } = useDataGridContext();
-    const _a = innerProps || {}, { className, style = {}, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "style", "htmlAttributes"]);
-    return (_createElement("div", Object.assign({}, restInnerProps, { key: row.id, className: classNames('ndl-data-grid-tr', className), role: "row", style: Object.assign({ display: 'flex', flexDirection: 'row' }, style) }, htmlAttributes), children || (_jsx(_Fragment, { children: row
-            .getVisibleCells()
-            .map((cell) => components.BodyCell && (_jsx(components.BodyCell, { cell: cell }, cell.id))) }))));
+    return (_jsx("div", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-tr', className), role: "row" }, restProps, htmlAttributes, { children: children || (_jsx(_Fragment, { children: row
+                .getVisibleCells()
+                .map((cell) => components.BodyCell && (_jsx(components.BodyCell, { cell: cell }, cell.id))) })) }), row.id));
 };
-const TableResults = ({ children, innerProps, manualPagination, }) => {
+const TableResults = (_a) => {
+    var { manualPagination, children, className, style, htmlAttributes, ref, resultsLabel = 'results' } = _a, restProps = __rest(_a, ["manualPagination", "children", "className", "style", "htmlAttributes", "ref", "resultsLabel"]);
     const { tableProps, isSkeletonLoading, skeletonProps } = useDataGridContext();
     const { getState, getRowModel, getCoreRowModel } = tableProps;
     const { pagination: { pageSize, pageIndex }, } = getState();
@@ -314,29 +305,28 @@ const TableResults = ({ children, innerProps, manualPagination, }) => {
         to: rows.length + pageIndex * pageSize,
         totalRows: getCoreRowModel().rows.length,
     }, [pageIndex, pageSize, manualPagination, rows, getCoreRowModel]);
-    const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
-    return (_jsx(Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsx("span", Object.assign({}, restInnerProps, { className: classNames('ndl-data-grid-results', className) }, htmlAttributes, { children: children || (_jsxs("span", { children: ["Showing", ' ', _jsx("b", { children: totalRows ? `${from}${to !== from ? `-${to}` : ''}` : 0 }), " of", ' ', _jsx("b", { children: totalRows }), " results"] })) })) })));
+    return (_jsx(Skeleton, Object.assign({ as: "span", onBackground: "weak", variant: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsx("span", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-results', className) }, restProps, htmlAttributes, { children: children || (_jsxs("span", { children: ["Showing", ' ', _jsx("b", { children: totalRows ? `${from}${to !== from ? `-${to}` : ''}` : 0 }), " of", ' ', _jsx("b", { children: totalRows }), " ", resultsLabel] })) })) })));
 };
-const RowsPerPage = ({ children, innerProps, menuPortalTarget: menuPortalTargetProp, }) => {
+const RowsPerPage = (_a) => {
+    var { portalTarget: portalTargetProp, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["portalTarget", "children", "className", "style", "htmlAttributes", "ref"]);
     const { tableProps, portalTarget } = useDataGridContext();
     const { setPageSize, getState } = tableProps;
-    const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
     const { pagination: { pageSize }, } = getState();
     const paginationOptions = getPaginationOptions(pageSize);
     const defaultPaginationOption = paginationOptions.find((option) => option.value === pageSize);
-    const menuPortalTarget = menuPortalTargetProp === undefined ? portalTarget : menuPortalTargetProp;
-    return (_jsx("div", Object.assign({}, restInnerProps, { className: classNames('ndl-data-grid-rows-per-page', className) }, htmlAttributes, { children: children || (_jsxs(_Fragment, { children: ["Show", _jsx(Select, { type: "select", size: "medium", selectProps: {
+    const menuPortalTarget = portalTargetProp === undefined ? portalTarget : portalTargetProp;
+    return (_jsx("div", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-rows-per-page', className) }, restProps, htmlAttributes, { children: children || (_jsxs(_Fragment, { children: ["Show", _jsx(Select, { type: "select", size: "medium", selectProps: {
                         'aria-label': 'Select page size',
                         defaultValue: defaultPaginationOption,
-                        options: paginationOptions,
                         isSearchable: false,
-                        menuPosition: 'fixed',
                         menuPortalTarget: menuPortalTarget,
+                        menuPosition: 'fixed',
                         onChange: (option) => {
                             if (option) {
                                 setPageSize(option.value);
                             }
                         },
+                        options: paginationOptions,
                         styles: {
                             container: () => ({
                                 width: '100%',
@@ -344,20 +334,20 @@ const RowsPerPage = ({ children, innerProps, menuPortalTarget: menuPortalTargetP
                         },
                     } })] })) })));
 };
-const PaginationArrowButton = ({ action, children, innerProps, }) => {
-    const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
+const PaginationArrowButton = (_a) => {
+    var { action, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["action", "children", "className", "style", "htmlAttributes", "ref"]);
     const PaginationIcon = action === 'previous' ? ChevronLeftIconOutline : ChevronRightIconOutline;
-    const ariaLabel = action === 'previous' ? 'Previous table page' : 'Next table page';
+    const ariaLabel = action === 'previous' ? 'Previous page' : 'Next page';
     const classes = classNames('ndl-data-grid-pagination-icon-button', className);
-    return (_jsx(IconButton, Object.assign({}, restInnerProps, { className: classes, ariaLabel: ariaLabel, isClean: true }, htmlAttributes, { children: children || _jsx(PaginationIcon, { className: "ndl-data-grid-pagination-icon" }) })));
+    return (_jsx(CleanIconButton, Object.assign({ ref: ref, style: style, className: classes, tooltip: ariaLabel, htmlAttributes: htmlAttributes }, restProps, { children: children || _jsx(PaginationIcon, {}) })));
 };
-const PaginationNumericButton = ({ currentIndex, isSelected, children, innerProps, }) => {
-    const _a = innerProps || {}, { className, onClick, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "onClick", "htmlAttributes"]);
-    return (_jsx("button", Object.assign({}, restInnerProps, { type: "button", "data-testid": `ndl-table-${currentIndex}`, className: classNames('ndl-data-grid-pagination-numeric-button', className, {
-            'ndl-not-selected-numeric': typeof currentIndex === 'number' && !isSelected,
+const PaginationNumericButton = (_a) => {
+    var { currentIndex, isSelected, children, className, style, htmlAttributes, onClick, ref } = _a, restProps = __rest(_a, ["currentIndex", "isSelected", "children", "className", "style", "htmlAttributes", "onClick", "ref"]);
+    return (_jsx("button", Object.assign({ ref: ref, style: style, type: "button", "data-testid": `ndl-table-${currentIndex}`, className: classNames('ndl-data-grid-pagination-numeric-button', className, {
             'ndl-is-selected': isSelected,
             'ndl-not-selected': !isSelected,
-        }), onClick: (e) => typeof currentIndex === 'number' && onClick && onClick(e), tabIndex: typeof currentIndex === 'number' ? 0 : -1 }, htmlAttributes, { children: children || currentIndex })));
+            'ndl-not-selected-numeric': typeof currentIndex === 'number' && !isSelected,
+        }), onClick: (e) => typeof currentIndex === 'number' && onClick && onClick(e), tabIndex: typeof currentIndex === 'number' ? 0 : -1 }, restProps, htmlAttributes, { children: children || currentIndex })));
 };
 const PaginationNumericButtons = () => {
     const { tableProps, components } = useDataGridContext();
@@ -365,55 +355,48 @@ const PaginationNumericButtons = () => {
     const { pagination: { pageIndex }, } = getState();
     return (_jsx(_Fragment, { children: userFriendlyPagination(pageIndex + 1, getPageCount()).map((option, idx) => components.PaginationNumericButton && (_jsx(components.PaginationNumericButton
         /** Use index to avoid situations where two "..." values will appear, causing a key conflict */
-        , { innerProps: {
-                onClick: () => typeof option === 'number' && setPageIndex(option - 1),
-            }, currentIndex: option, isSelected: option === pageIndex + 1 }, `${option}-${idx}`))) }));
+        , { onClick: () => typeof option === 'number' && setPageIndex(option - 1), currentIndex: option, isSelected: option === pageIndex + 1 }, `${option}-${idx}`))) }));
 };
-const Pagination = ({ children, innerProps, }) => {
+const Pagination = (_a) => {
+    var { children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "style", "htmlAttributes", "ref"]);
     const { tableProps, components } = useDataGridContext();
     const { getCanPreviousPage, getCanNextPage, previousPage, nextPage } = tableProps;
-    const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
-    return (_jsx("nav", Object.assign({}, restInnerProps, { className: classNames('ndl-data-grid-nav', className), "aria-label": "Pagination" }, htmlAttributes, { children: children || (_jsxs(_Fragment, { children: [getCanPreviousPage()
-                    ? components.PaginationArrowButton && (_jsx(components.PaginationArrowButton, { action: "previous", innerProps: {
-                            htmlAttributes: {
-                                onClick: previousPage,
-                            },
-                        } }))
+    return (_jsx("nav", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-nav', className), "aria-label": "Pagination" }, restProps, htmlAttributes, { children: children || (_jsxs(_Fragment, { children: [getCanPreviousPage()
+                    ? components.PaginationArrowButton && (_jsx(components.PaginationArrowButton, { action: "previous", onClick: previousPage }))
                     : null, components.PaginationNumericButtons && (_jsx(components.PaginationNumericButtons, {})), getCanNextPage()
-                    ? components.PaginationArrowButton && (_jsx(components.PaginationArrowButton, { action: "next", innerProps: {
-                            onClick: nextPage,
-                        } }))
+                    ? components.PaginationArrowButton && (_jsx(components.PaginationArrowButton, { action: "next", onClick: nextPage }))
                     : null] })) })));
 };
-const Navigation = ({ children, innerProps, }) => {
+const Navigation = (_a) => {
+    var { children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "style", "htmlAttributes", "ref"]);
     const { tableProps, components, isSkeletonLoading, skeletonProps } = useDataGridContext();
     const { getPageCount } = tableProps;
-    const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
-    return (_jsx("div", Object.assign({}, restInnerProps, { className: classNames('ndl-data-grid-navigation', className) }, htmlAttributes, { children: _jsx(_Fragment, { children: children || (_jsxs(_Fragment, { children: [components.TableResults && _jsx(components.TableResults, {}), _jsx(Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular", height: "36px" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-data-grid-navigation-right-items", children: [getPageCount() > 1 && components.Pagination && (_jsx(components.Pagination, {})), components.RowsPerPage && _jsx(components.RowsPerPage, {})] }) }))] })) }) })));
+    return (_jsx("div", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-navigation', className) }, restProps, htmlAttributes, { children: _jsx(_Fragment, { children: children || (_jsxs(_Fragment, { children: [components.TableResults && _jsx(components.TableResults, {}), _jsx(Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular", height: "36px" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-data-grid-navigation-right-items", children: [getPageCount() > 1 && components.Pagination && (_jsx(components.Pagination, {})), components.RowsPerPage && _jsx(components.RowsPerPage, {})] }) }))] })) }) })));
 };
-const LoadingPlaceholder = ({ children, innerProps, }) => {
-    const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
-    return (_jsx("div", Object.assign({}, restInnerProps, { className: classNames('nld-table-placeholder-wrapper', className), role: "row" }, htmlAttributes, { children: children || (_jsx("div", { role: "cell", className: "ndl-data-grid-placeholder", children: _jsxs("div", { className: "ndl-data-grid-loading-placeholder", children: [_jsx(LoadingSpinner, {}), _jsx("h6", { children: "Loading data" })] }) })) })));
+const LoadingPlaceholder = (_a) => {
+    var { children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "style", "htmlAttributes", "ref"]);
+    return (_jsx("div", Object.assign({ ref: ref, style: style, className: classNames('nld-table-placeholder-wrapper', className), role: "row" }, restProps, htmlAttributes, { children: children || (_jsx("div", { role: "cell", className: "ndl-data-grid-placeholder", children: _jsxs("div", { className: "ndl-data-grid-loading-placeholder", children: [_jsx(LoadingSpinner, {}), _jsx("h6", { children: "Loading data" })] }) })) })));
 };
-const NoDataPlaceholder = ({ children, innerProps, }) => {
-    const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
-    return (_jsx("div", Object.assign({}, restInnerProps, { className: classNames('nld-table-placeholder-wrapper', className), role: "row" }, htmlAttributes, { children: children || (_jsxs(NoDataPlaceholderContentWrapper, { children: [_jsx(NoDataIcon, {}), _jsx(Typography, { variant: "subheading-small", children: "No data available" })] })) })));
+const NoDataPlaceholder = (_a) => {
+    var { children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "style", "htmlAttributes", "ref"]);
+    return (_jsx("div", Object.assign({ ref: ref, style: style, className: classNames('nld-table-placeholder-wrapper', className), role: "row" }, restProps, htmlAttributes, { children: children || (_jsxs(NoDataPlaceholderContentWrapper, { children: [_jsx(NoDataIcon, {}), _jsx(Typography, { variant: "subheading-small", children: "No data available" })] })) })));
 };
-export const NoDataPlaceholderContentWrapper = ({ children, innerProps, }) => {
-    const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
-    return (_jsx("div", Object.assign({ role: "cell", className: classNames('ndl-data-grid-placeholder', className) }, restInnerProps, htmlAttributes, { children: children })));
+export const NoDataPlaceholderContentWrapper = (_a) => {
+    var { children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "style", "htmlAttributes", "ref"]);
+    return (_jsx("div", Object.assign({ role: "cell", className: classNames('ndl-data-grid-placeholder', className), ref: ref, style: style }, restProps, htmlAttributes, { children: children })));
 };
-const InlineEditCell = ({ cell, value, ariaLabel, }) => {
-    var _a;
+const InlineEditCell = (_a) => {
+    var _b;
+    var { cell, value, ariaLabel, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["cell", "value", "ariaLabel", "className", "style", "htmlAttributes", "ref"]);
     const [inputValue, setInputValue] = useState(value);
     useEffect(() => {
         setInputValue(value);
     }, [value]);
     const { dataGridNav } = useDataGridContext();
-    if (!((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isInlineEditCell)) {
+    if (!((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.isInlineEditCell)) {
         return null;
     }
-    return (_jsx("input", { onChange: (e) => setInputValue(e.target.value), value: inputValue, onFocus: () => {
+    return (_jsx("input", Object.assign({ ref: ref, style: style, className: className, onChange: (e) => setInputValue(e.target.value), value: inputValue, onFocus: () => {
             dataGridNav.disable();
         }, onKeyDown: (e) => {
             var _a, _b, _c, _d;
@@ -429,32 +412,24 @@ const InlineEditCell = ({ cell, value, ariaLabel, }) => {
         }, onBlur: () => {
             setInputValue(value);
             dataGridNav.enable();
-        }, "aria-label": ariaLabel }));
+        }, "aria-label": ariaLabel }, restProps, htmlAttributes)));
 };
-const DropDownCell = ({ cell, options, 
-// TODO v4: remove default value, default should be on the DataGrid root component
-portalTarget: portalTargetProp = document.body, ariaLabel, }) => {
-    var _a;
+const DropDownCell = (_a) => {
+    var _b;
+    var { cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef } = _a, restProps = __rest(_a, ["cell", "options", "portalTarget", "ariaLabel", "className", "style", "htmlAttributes", "ref"]);
     const { dataGridNav, portalTarget } = useDataGridContext();
     const ref = useRef(null);
-    if (!((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isDropDownCell)) {
+    const mergedRef = useMergeRefs([ref, forwardRef]);
+    if (!((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.isDropDownCell)) {
         return null;
     }
     const defaultOption = options.find((option) => { var _a; return option.value === ((_a = cell.getValue()) === null || _a === void 0 ? void 0 : _a.toString()); });
     const menuPortalTarget = portalTargetProp === undefined ? portalTarget : portalTargetProp;
-    return (_jsx(Select, { ref: ref, isFluid: true, hasBorder: false, style: { width: '100%', height: '100%' }, type: "select", size: "medium", selectProps: {
+    return (_jsx(Select, Object.assign({ ref: mergedRef, className: className, isFluid: true, isClean: true, style: Object.assign(Object.assign({}, style), { height: '100%', width: '100%' }), type: "select", size: "medium", selectProps: {
+            'aria-label': ariaLabel,
             defaultValue: defaultOption,
-            options: options,
             menuPortalTarget: menuPortalTarget,
             menuPosition: 'fixed',
-            styles: {
-                container: () => ({ width: '100%', height: '100%' }),
-                control: () => ({
-                    backgroundColor: 'transparent',
-                    height: '100%',
-                    borderRadius: 0,
-                }),
-            },
             onChange: (e) => {
                 var _a, _b;
                 const value = e === null || e === void 0 ? void 0 : e.value;
@@ -465,14 +440,21 @@ portalTarget: portalTargetProp = document.body, ariaLabel, }) => {
             onMenuOpen: () => {
                 dataGridNav.disable();
             },
-            'aria-label': ariaLabel,
-        } }));
+            options: options,
+            styles: {
+                container: () => ({ height: '100%', width: '100%' }),
+                control: () => ({
+                    backgroundColor: 'transparent',
+                    borderRadius: 0,
+                    height: '100%',
+                }),
+            },
+        }, htmlAttributes: htmlAttributes }, restProps)));
 };
-const NoDataIcon = forwardRef((props, ref) => {
-    const { className } = props, restProps = __rest(props, ["className"]);
-    const classes = classNames('n-size-token-10', className);
-    return _jsx(DatagridNodataIcon, Object.assign({ ref: ref, className: classes }, restProps));
-});
-NoDataIcon.displayName = 'NoDataIcon';
-export { ResizingBar, Header, Body, BodyCell, BodyRow, InlineEditCell, DropDownCell, RowActionCell, HeaderCell, HeaderTitle, Navigation, TableResults, RowsPerPage, Pagination, PaginationNumericButtons, PaginationArrowButton, PaginationNumericButton, NoDataPlaceholder, NoDataIllustration, NoDataIcon, LoadingPlaceholder, Scrollable, };
+const NoDataIcon = (_a) => {
+    var { className } = _a, restProps = __rest(_a, ["className"]);
+    const classes = classNames('n-size-token-64', className);
+    return _jsx(DatagridNodataIcon, Object.assign({ className: classes }, restProps));
+};
+export { ResizingBar, Header, Body, BodyCell, BodyRow, InlineEditCell, DropDownCell, ActionCell, HeaderCell, HeaderTitle, Navigation, TableResults, RowsPerPage, Pagination, PaginationNumericButtons, PaginationArrowButton, PaginationNumericButton, NoDataPlaceholder, NoDataIcon, LoadingPlaceholder, Scrollable, };
 //# sourceMappingURL=Components.js.map