@nulogy/components 15.2.1 → 15.2.3

package/dist/src/SortingTable/SortingTable.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useState } from "react";
 import { Table } from "../Table";
 const numericAlphabeticalSort = (a, b, numeric) => String(a).localeCompare(b, undefined, { numeric, sensitivity: "base" });
@@ -23,8 +12,7 @@ function sortRows(rows, columns, sortState) {
     const sortedRows = applySort(rows, sortState.sortColumn, columns);
     return sortState.ascending ? sortedRows : sortedRows.reverse();
 }
-function SortingTable(_a) {
-    var { columns: incomingColumns, rows: incomingRows, initialSortColumn } = _a, props = __rest(_a, ["columns", "rows", "initialSortColumn"]);
+function SortingTable({ columns: incomingColumns, rows: incomingRows, initialSortColumn, ...props }) {
     const [sortState, setSortState] = useState({
         ascending: true,
         sortColumn: initialSortColumn,
@@ -41,9 +29,12 @@ function SortingTable(_a) {
     };
     const transformColumn = (column) => {
         const isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
-        return Object.assign(Object.assign({}, column), { headerFormatter: ({ label, dataKey }) => (React.createElement(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })) });
+        return {
+            ...column,
+            headerFormatter: ({ label, dataKey }) => (React.createElement(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })),
+        };
     };
     const columns = incomingColumns.map((column) => transformColumn(column));
-    return React.createElement(Table, Object.assign({ columns: columns, rows: rows }, props));
+    return React.createElement(Table, { columns: columns, rows: rows, ...props });
 }
 export default SortingTable;

package/dist/src/StatusIndicator/StatusIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SpaceProps, TypographyProps, FlexboxProps } from "styled-system";
 export declare const StatusIndicatorValues: {
     readonly neutral: "neutral";

package/dist/src/StatusIndicator/StatusIndicator.js

@@ -47,5 +47,20 @@ const statusIndicatorStyles = (theme) => ({
         color: theme.colors.darkGrey,
     },
 });
-const StatusIndicator = styled.span(({ theme, type = StatusIndicatorValues.neutral }) => (Object.assign({ margin: theme.space.none, paddingTop: theme.space.none, paddingRight: theme.space.x1, paddingBottom: theme.space.none, paddingLeft: theme.space.x1, fontSize: theme.fontSizes.smaller, lineHeight: theme.lineHeights.smallerText, alignSelf: "center", display: "inline-block", fontWeight: theme.fontWeights.bold, textTransform: "uppercase", letterSpacing: ".05em", borderRadius: theme.space.x1 }, statusIndicatorStyles(theme)[type])), space, typography, flexbox);
+const StatusIndicator = styled.span(({ theme, type = StatusIndicatorValues.neutral }) => ({
+    margin: theme.space.none,
+    paddingTop: theme.space.none,
+    paddingRight: theme.space.x1,
+    paddingBottom: theme.space.none,
+    paddingLeft: theme.space.x1,
+    fontSize: theme.fontSizes.smaller,
+    lineHeight: theme.lineHeights.smallerText,
+    alignSelf: "center",
+    display: "inline-block",
+    fontWeight: theme.fontWeights.bold,
+    textTransform: "uppercase",
+    letterSpacing: ".05em",
+    borderRadius: theme.space.x1,
+    ...statusIndicatorStyles(theme)[type],
+}), space, typography, flexbox);
 export default StatusIndicator;

package/dist/src/Summary/Summary.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled, { useTheme } from "styled-components";
 import numberFromDimension from "../utils/numberFromDimension";
@@ -32,12 +21,11 @@ const SummaryWrapper = styled(Box)(({ theme, breakpoint }) => ({
         rowGap: 0,
     },
 }));
-const Summary = (_a) => {
-    var { breakpoint, children } = _a, rest = __rest(_a, ["breakpoint", "children"]);
+const Summary = ({ breakpoint, children, ...rest }) => {
     const theme = useTheme();
     breakpoint || (breakpoint = theme.breakpoints.medium);
     const breakpointPx = numberFromDimension(breakpoint);
     return (React.createElement(SummaryContextProvider, { breakpoint: breakpointPx },
-        React.createElement(SummaryWrapper, Object.assign({ breakpoint: breakpointPx }, rest), children)));
+        React.createElement(SummaryWrapper, { breakpoint: breakpointPx, ...rest }, children)));
 };
 export default Summary;

package/dist/src/Summary/SummaryDivider.js

@@ -16,6 +16,6 @@ const Divider = styled(Box)(({ theme, breakpoint }) => ({
 }));
 const SummaryDivider = (props) => {
     const { breakpoint } = useSummaryContext();
-    return React.createElement(Divider, Object.assign({ breakpoint: numberFromDimension(breakpoint) }, props));
+    return React.createElement(Divider, { breakpoint: numberFromDimension(breakpoint), ...props });
 };
 export default SummaryDivider;

package/dist/src/Summary/SummaryItem.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled from "styled-components";
 import { Flex } from "../Flex";
@@ -22,12 +11,11 @@ const SummaryItemWrapper = styled(Flex)(({ theme, breakpoint }) => ({
         flexDirection: "row",
     },
 }));
-const SummaryItem = (_a) => {
-    var { value, status } = _a, rest = __rest(_a, ["value", "status"]);
+const SummaryItem = ({ value, status, ...rest }) => {
     const { breakpoint } = useSummaryContext();
     const matches = useMediaQuery(`(max-width: ${breakpoint}px)`);
     delete rest["children"];
-    return (React.createElement(SummaryItemWrapper, Object.assign({ breakpoint: breakpoint }, rest),
+    return (React.createElement(SummaryItemWrapper, { breakpoint: breakpoint, ...rest },
         React.createElement(Text, { fontWeight: "medium", fontSize: !matches ? "heading4" : undefined }, value),
         status));
 };

package/dist/src/Switcher/Switch.js

@@ -1,30 +1,34 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
 import numberFromDimension from "../utils/numberFromDimension";
-const Switch = React.forwardRef((_a, ref) => {
-    var { children } = _a, rest = __rest(_a, ["children"]);
-    return (React.createElement(SwitchButton, Object.assign({}, rest, { ref: ref }), children));
+const Switch = React.forwardRef(({ children, ...rest }, ref) => {
+    return (React.createElement(SwitchButton, { ...rest, ref: ref }, children));
 });
-const SwitchButton = styled.button(({ selected, theme }) => (Object.assign(Object.assign(Object.assign({ margin: 1, background: selected ? theme.colors.white : "none", color: selected ? theme.colors.darkBlue : theme.colors.darkGrey, cursor: "pointer", border: "none", borderRadius: theme.radii.rounded, fontSize: theme.fontSizes.base, fontWeight: theme.fontWeights.medium, lineHeight: theme.lineHeights.base, textDecoration: "none", whiteSpace: "nowrap", padding: `${numberFromDimension(theme.space.half) - 1}px ${theme.space.x2}` }, (selected && { boxShadow: theme.shadows.small })), { "&:focus": {
+const SwitchButton = styled.button(({ selected, theme }) => ({
+    margin: 1,
+    background: selected ? theme.colors.white : "none",
+    color: selected ? theme.colors.darkBlue : theme.colors.darkGrey,
+    cursor: "pointer",
+    border: "none",
+    borderRadius: theme.radii.rounded,
+    fontSize: theme.fontSizes.base,
+    fontWeight: theme.fontWeights.medium,
+    lineHeight: theme.lineHeights.base,
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+    padding: `${numberFromDimension(theme.space.half) - 1}px ${theme.space.x2}`,
+    ...(selected && { boxShadow: theme.shadows.small }),
+    "&:focus": {
         outline: "none",
         boxShadow: theme.shadows.focus,
-    } }), (!selected && {
-    "&:hover": {
-        backgroundColor: theme.colors.lightGrey,
     },
-}))), variant({
+    ...(!selected && {
+        "&:hover": {
+            backgroundColor: theme.colors.lightGrey,
+        },
+    }),
+}), variant({
     variants: {
         touch: {
             fontSize: "md",

package/dist/src/Switcher/Switcher.js

@@ -1,20 +1,8 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { Box } from "../Box";
 import FocusManager from "../utils/ts/FocusManager";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
-const Switcher = (_a) => {
-    var { variant, selected, onChange } = _a, rest = __rest(_a, ["variant", "selected", "onChange"]);
+const Switcher = ({ variant, selected, onChange, ...rest }) => {
     const componentVariant = useComponentVariant(variant);
     const optionRefs = [];
     const isSelected = (value, index) => {
@@ -23,7 +11,7 @@ const Switcher = (_a) => {
         return value === selected;
     };
     const getSelectedIndex = () => {
-        return React.Children.toArray(rest.children).findIndex((child) => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.value) === selected; });
+        return React.Children.toArray(rest.children).findIndex((child) => child?.props?.value === selected);
     };
     const options = (focusedIndex, setFocusedIndex, handleArrowNavigation) => {
         return React.Children.map(rest.children, (child, index) => {
@@ -42,12 +30,12 @@ const Switcher = (_a) => {
                 onClick: (e) => {
                     setFocusedIndex(index);
                     if (onChange)
-                        onChange(e.target.value);
+                        onChange(e.currentTarget.value);
                 },
             });
         });
     };
-    return (React.createElement(Box, Object.assign({ display: "inline-flex", bg: "whiteGrey", borderRadius: "9999px" }, rest),
+    return (React.createElement(Box, { display: "inline-flex", bg: "whiteGrey", borderRadius: "9999px", ...rest },
         React.createElement(FocusManager, { refs: optionRefs, defaultFocusedIndex: getSelectedIndex() }, ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => options(focusedIndex, setFocusedIndex, handleArrowNavigation))));
 };
 export default Switcher;

package/dist/src/Table/BaseTable.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled from "styled-components";
 import { space } from "styled-system";
@@ -21,9 +10,8 @@ const StyledTable = styled.table(space, {
     background: "white",
     position: "relative",
 });
-function BaseTable(_a) {
-    var { noRowsContent = "No records have been created for this table.", keyField = "id", loading = false, footerRows = [], rowHovers = true, compact = false, stickyHeader = false, onRowMouseEnter = () => { }, onRowMouseLeave = () => { }, columns, rows, id, className, rowBorder = false } = _a, props = __rest(_a, ["noRowsContent", "keyField", "loading", "footerRows", "rowHovers", "compact", "stickyHeader", "onRowMouseEnter", "onRowMouseLeave", "columns", "rows", "id", "className", "rowBorder"]);
-    return (React.createElement(StyledTable, Object.assign({ id: id, className: className }, props),
+function BaseTable({ noRowsContent = "No records have been created for this table.", keyField = "id", loading = false, footerRows = [], rowHovers = true, compact = false, stickyHeader = false, onRowMouseEnter = () => { }, onRowMouseLeave = () => { }, columns, rows, id, className, rowBorder = false, ...props }) {
+    return (React.createElement(StyledTable, { id: id, className: className, ...props },
         React.createElement(TableHead, { columns: columns, compact: compact, sticky: stickyHeader }),
         React.createElement(TableBody, { columns: columns, rows: rows, keyField: keyField, noRowsContent: noRowsContent, loading: loading, rowHovers: rowHovers, compact: compact, onRowMouseLeave: onRowMouseLeave, onRowMouseEnter: onRowMouseEnter, rowBorder: rowBorder }),
         footerRows && (React.createElement(TableFoot, { columns: columns, rows: footerRows, keyField: keyField, loading: loading, compact: compact }))));

package/dist/src/Table/StatefulTable.d.ts

@@ -85,7 +85,7 @@ declare class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps
         onRowMouseLeave?: (...args: any[]) => any;
         onMouseEnter?: any;
         onMouseLeave?: any;
-        rowBorder?: boolean;
+        rowBorder?: import("./Table.types").RowBorder;
         selectedRows?: string[];
         onRowSelectionChange?: (...args: any[]) => any;
         onRowExpansionChange?: (...args: any[]) => any;

package/dist/src/Table/StatefulTable.js

@@ -106,9 +106,12 @@ class StatefulTable extends Component {
         this.goToPage = (pageNumber) => {
             const { selectedRows } = this.state;
             const { hasSelectableRows } = this.props;
-            this.setState(Object.assign({ currentPage: pageNumber }, (hasSelectableRows && {
-                isHeaderSelected: this.areAllRowsSelectedOnPage(selectedRows, pageNumber),
-            })), this.onPageSelectionChangeHandler);
+            this.setState({
+                currentPage: pageNumber,
+                ...(hasSelectableRows && {
+                    isHeaderSelected: this.areAllRowsSelectedOnPage(selectedRows, pageNumber),
+                }),
+            }, this.onPageSelectionChangeHandler);
         };
         this.currentRowsByPageSelector = (rows, pageNumber) => {
             const currentRows = this.rowsByPageSelector(pageNumber);
@@ -150,11 +153,16 @@ class StatefulTable extends Component {
                 onRowExpansionChange: this.onExpandRow,
                 expandedRows,
             };
-            const props = Object.assign(Object.assign(Object.assign(Object.assign({}, this.props), { rows: this.rowsByPageSelector(currentPage) || [] }), (hasSelectableRows && selectionConfig)), (hasExpandableRows && expandableConfig));
-            const selectableProps = Object.assign(Object.assign({}, props), addSelectableControl(props));
-            const expandableProps = Object.assign(Object.assign({}, props), addExpandableControl(props));
+            const props = {
+                ...this.props,
+                rows: this.rowsByPageSelector(currentPage) || [],
+                ...(hasSelectableRows && selectionConfig),
+                ...(hasExpandableRows && expandableConfig),
+            };
+            const selectableProps = { ...props, ...addSelectableControl(props) };
+            const expandableProps = { ...props, ...addExpandableControl(props) };
             if (hasSelectableRows && hasExpandableRows)
-                return Object.assign(Object.assign({}, props), addExpandableControl(selectableProps));
+                return { ...props, ...addExpandableControl(selectableProps) };
             if (hasSelectableRows)
                 return selectableProps;
             if (hasExpandableRows)
@@ -185,8 +193,8 @@ class StatefulTable extends Component {
         const { rowsPerPage, paginationProps, paginationCss } = this.props;
         const baseTableProps = pick(this.getControlProps(), ...propNames);
         return (React.createElement(React.Fragment, null,
-            React.createElement(BaseTable, Object.assign({}, baseTableProps)),
-            rowsPerPage && (React.createElement(Pagination, Object.assign({ pt: "x2", currentPage: currentPage, totalPages: paginatedRows.length || 1, onSelectPage: this.goToPage, onNext: this.goToNextPage, onPrevious: this.goToPrevPage, justifyContent: "flex-end", css: paginationCss }, paginationProps)))));
+            React.createElement(BaseTable, { ...baseTableProps }),
+            rowsPerPage && (React.createElement(Pagination, { pt: "x2", currentPage: currentPage, totalPages: paginatedRows.length || 1, onSelectPage: this.goToPage, onNext: this.goToNextPage, onPrevious: this.goToPrevPage, justifyContent: "flex-end", css: paginationCss, ...paginationProps }))));
     }
 }
 StatefulTable.defaultProps = {

package/dist/src/Table/StyledTh.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type StyledThProps = {
     width?: any;
     compact?: boolean;

package/dist/src/Table/StyledTh.js

@@ -8,8 +8,17 @@ const stickyStyles = (theme) => ({
 });
 const StyledTh = styled.th(({ compact, theme, sticky, width }) => {
     const padding = compact ? theme.space.x1 : theme.space.x2;
-    return Object.assign(Object.assign({ fontWeight: "normal", textAlign: "left", padding: `${padding} 0`, paddingRight: padding, color: theme.colors.darkGrey }, (sticky && stickyStyles(theme))), { "&:first-child": {
+    return {
+        fontWeight: "normal",
+        textAlign: "left",
+        padding: `${padding} 0`,
+        paddingRight: padding,
+        color: theme.colors.darkGrey,
+        ...(sticky && stickyStyles(theme)),
+        "&:first-child": {
             paddingLeft: padding,
-        }, width: width || "auto" });
+        },
+        width: width || "auto",
+    };
 });
 export default StyledTh;

package/dist/src/Table/Table.js

@@ -1,21 +1,9 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import StatefulTable from "./StatefulTable";
 import BaseTable from "./BaseTable";
 import SortingColumnHeader from "./SortingColumnHeader";
-function Table(_a) {
-    var { hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps } = _a, props = __rest(_a, ["hasSelectableRows", "rowsPerPage", "hasExpandableRows", "selectedRows", "onRowSelectionChange", "onRowExpansionChange", "onPageChange", "selectAllAriaLabel", "deselectAllAriaLabel", "paginationCss", "paginationProps"]);
-    return hasSelectableRows || rowsPerPage || hasExpandableRows ? (React.createElement(StatefulTable, Object.assign({ hasExpandableRows: hasExpandableRows, hasSelectableRows: hasSelectableRows, onRowExpansionChange: onRowExpansionChange, onRowSelectionChange: onRowSelectionChange, selectedRows: selectedRows, rowsPerPage: rowsPerPage, onPageChange: onPageChange, selectAllAriaLabel: selectAllAriaLabel, deselectAllAriaLabel: deselectAllAriaLabel, paginationCss: paginationCss, paginationProps: paginationProps }, props))) : (React.createElement(BaseTable, Object.assign({}, props)));
+function Table({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }) {
+    return hasSelectableRows || rowsPerPage || hasExpandableRows ? (React.createElement(StatefulTable, { hasExpandableRows: hasExpandableRows, hasSelectableRows: hasSelectableRows, onRowExpansionChange: onRowExpansionChange, onRowSelectionChange: onRowSelectionChange, selectedRows: selectedRows, rowsPerPage: rowsPerPage, onPageChange: onPageChange, selectAllAriaLabel: selectAllAriaLabel, deselectAllAriaLabel: deselectAllAriaLabel, paginationCss: paginationCss, paginationProps: paginationProps, ...props })) : (React.createElement(BaseTable, { ...props }));
 }
 Table.SortingHeader = SortingColumnHeader;
 export default Table;

package/dist/src/Table/Table.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Key = string | number;
 export type RowType = any;
 export interface CellInfoType<ColumnMetadata> {

package/dist/src/Table/TableBody.js

@@ -7,23 +7,23 @@ const StyledMessageContainer = styled(Box)(({ theme }) => ({
     fontSize: theme.fontSizes.small,
     color: theme.colors.darkGrey,
 }));
-const StyledTr = styled.tr(({ rowHovers, rowBorder, theme }) => (Object.assign({ "&:hover": {
+const StyledTr = styled.tr(({ rowHovers, rowBorder, theme }) => ({
+    "&:hover": {
         backgroundColor: rowHovers ? theme.colors.whiteGrey : null,
-    } }, (rowBorder && {
-    borderBottomWidth: 1,
-    borderBottomStyle: "solid",
-    borderBottomColor: theme.colors.lightGrey,
-    borderCollapse: "collapse",
-}))));
+    },
+    ...(rowBorder && {
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: theme.colors.lightGrey,
+        borderCollapse: "collapse",
+    }),
+}));
 const renderRows = (rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) => rows.length > 0 ? (rows.map((row, rowIndex) => {
     const rowKey = row[keyField] !== undefined ? row[keyField] : rowIndex;
     return (React.createElement(TableBodyRow, { key: rowKey, row: row, columns: columns, keyField: keyField, rowHovers: rowHovers, compact: compact, rowClassName: row.rowClassName, onMouseEnter: (e) => onRowMouseEnter({ row, e }), onMouseLeave: (e) => onRowMouseLeave({ row, e }), rowBorder: rowBorder }));
 })) : (React.createElement(TableMessageContainer, { colSpan: columns.length }, noRowsContent));
 const TableBodyRow = ({ row, columns, rowHovers, compact, rowClassName, onMouseLeave, onMouseEnter, rowBorder, }) => {
-    const renderAllCells = () => columns.map((column, index) => {
-        var _a, _b;
-        return (React.createElement(TableCell, { key: (_b = (_a = column.dataKey) !== null && _a !== void 0 ? _a : column.key) !== null && _b !== void 0 ? _b : index, row: row, column: column, cellData: row[column.dataKey], compact: compact }));
-    });
+    const renderAllCells = () => columns.map((column, index) => (React.createElement(TableCell, { key: column.dataKey ?? column.key ?? index, row: row, column: column, cellData: row[column.dataKey], compact: compact })));
     return (React.createElement(React.Fragment, null,
         React.createElement(StyledTr, { rowHovers: rowHovers, "data-testid": "table-row", className: rowClassName, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, rowBorder: rowBorder }, row.heading ? (React.createElement(TableCell, { row: row, colSpan: columns.length, cellData: row.heading, compact: compact })) : (renderAllCells())),
         row.expandedContent && row.expanded && (React.createElement("tr", { "data-testid": "expanded-table-row" },

package/dist/src/Table/TableFoot.js

@@ -11,14 +11,11 @@ const renderRows = (rows, columns, keyField, loading, compact) => rows.map((row)
 const TableFooterRow = ({ row, columns, loading, compact }) => {
     const columnsWithoutControls = columns.filter((column) => column.dataKey !== "selected" && column.dataKey !== "expanded");
     const numberOfControlColumns = columns.length - columnsWithoutControls.length;
-    return (React.createElement(StyledFooterRow, null, columnsWithoutControls.map((column, index) => {
-        var _a, _b;
-        return index === 0 ? (React.createElement(StyledTh, { key: column.dataKey, scope: "row", colSpan: numberOfControlColumns + 1, compact: compact }, row[column.dataKey])) : (!loading && (React.createElement(TableCell, { key: (_b = (_a = column.dataKey) !== null && _a !== void 0 ? _a : column.key) !== null && _b !== void 0 ? _b : index, row: row, column: {
-                dataKey: column.dataKey,
-                label: column.label,
-                align: column.align,
-            }, cellData: row[column.dataKey], compact: compact })));
-    })));
+    return (React.createElement(StyledFooterRow, null, columnsWithoutControls.map((column, index) => index === 0 ? (React.createElement(StyledTh, { key: column.dataKey, scope: "row", colSpan: numberOfControlColumns + 1, compact: compact }, row[column.dataKey])) : (!loading && (React.createElement(TableCell, { key: column.dataKey ?? column.key ?? index, row: row, column: {
+            dataKey: column.dataKey,
+            label: column.label,
+            align: column.align,
+        }, cellData: row[column.dataKey], compact: compact }))))));
 };
 function TableFoot({ columns, rows, keyField = "id", loading = false, compact = false, }) {
     return React.createElement("tfoot", null, renderRows(rows, columns, keyField, loading, compact));

package/dist/src/Table/TableHead.js

@@ -11,10 +11,7 @@ function renderHeaderCellContent({ headerFormatter = ({ label }) => label, align
         : headerFormatter({ align, label, width, metadata, dataKey });
 }
 function TableHead({ columns, compact, sticky }) {
-    const renderColumns = (allColumns) => allColumns.map((column, index) => {
-        var _a, _b;
-        return (React.createElement(StyledTh, { scope: "col", key: (_b = (_a = column.dataKey) !== null && _a !== void 0 ? _a : column.key) !== null && _b !== void 0 ? _b : index, width: column.width, compact: compact, "data-testid": "table-head", sticky: sticky }, renderHeaderCellContent(column)));
-    });
+    const renderColumns = (allColumns) => allColumns.map((column, index) => (React.createElement(StyledTh, { scope: "col", key: column.dataKey ?? column.key ?? index, width: column.width, compact: compact, "data-testid": "table-head", sticky: sticky }, renderHeaderCellContent(column))));
     return (React.createElement("thead", null,
         React.createElement(StyledHeaderRow, null, renderColumns(columns))));
 }

package/dist/src/Table/addExpandableControl.js

@@ -10,7 +10,7 @@ const ExpandCell = ({ row, onRowExpansionChange }) => {
     const expandLabel = row.expandAriaLabel || t("expand row");
     return (React.createElement(React.Fragment, null, row.expandedContent && (React.createElement(ControlIcon, { icon: row[EXPANDABLE_COLUMN_DATA_KEY] ? "upArrow" : "downArrow", label: row[EXPANDABLE_COLUMN_DATA_KEY] ? collapseLabel : expandLabel, onClick: expandRowHandler }))));
 };
-const expandCellRenderer = (onRowExpansionChange) => (props) => (React.createElement(ExpandCell, Object.assign({ onRowExpansionChange: onRowExpansionChange }, props)));
+const expandCellRenderer = (onRowExpansionChange) => (props) => (React.createElement(ExpandCell, { onRowExpansionChange: onRowExpansionChange, ...props }));
 const addExpandableColumn = ({ columns, onRowExpansionChange }) => {
     const expandableColumn = {
         dataKey: EXPANDABLE_COLUMN_DATA_KEY,
@@ -29,7 +29,10 @@ const addExpandableCell = ({ rows, keyField, expandedRows }) => {
             [EXPANDABLE_COLUMN_DATA_KEY]: expandedRows ? expandedRows.includes(rowKey) : false,
         };
     };
-    const transformedRows = rows.map((row) => (Object.assign(Object.assign({}, expandableCellData(row[keyField])), row)));
+    const transformedRows = rows.map((row) => ({
+        ...expandableCellData(row[keyField]),
+        ...row,
+    }));
     return transformedRows;
 };
 export const addExpandableControl = (props) => ({

package/dist/src/Table/addSelectableControl.js

@@ -18,7 +18,7 @@ const SelectCell = ({ row, onSelectRow }) => {
     const ariaLabel = checked ? checkedAriaLabel : uncheckedAriaLabel;
     return React.createElement(Checkbox, { "aria-label": ariaLabel, checked: checked, onChange: selectRowHandler });
 };
-const selectCellRenderer = (onSelectRow) => (props) => React.createElement(SelectCell, Object.assign({ onSelectRow: onSelectRow }, props));
+const selectCellRenderer = (onSelectRow) => (props) => React.createElement(SelectCell, { onSelectRow: onSelectRow, ...props });
 export const addSelectableControl = ({ columns, rows, onSelectRow, onSelectHeader, keyField, selectedRows, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel, }) => {
     const selectableColumn = {
         dataKey: SELECTABLE_COLUMN_DATA_KEY,
@@ -30,7 +30,10 @@ export const addSelectableControl = ({ columns, rows, onSelectRow, onSelectHeade
         [SELECTABLE_COLUMN_DATA_KEY]: selectedRows.includes(rowKey),
     });
     const transformedColumns = [selectableColumn, ...columns];
-    const transformedRows = rows.map((row) => (Object.assign(Object.assign({}, selectableCellData(row[keyField])), row)));
+    const transformedRows = rows.map((row) => ({
+        ...selectableCellData(row[keyField]),
+        ...row,
+    }));
     return {
         rows: transformedRows,
         columns: transformedColumns,

package/dist/src/Table/stories/BaseTable.story.d.ts

@@ -1,12 +1,16 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { Table } from "..";
 declare const _default: {
     title: string;
+    component: typeof Table;
 };
 export default _default;
-export declare const WithData: () => React.JSX.Element;
-export declare const WithNoData: () => React.JSX.Element;
-export declare const WithStickyHeader: () => React.JSX.Element;
-export declare const WithLotsOfRowsAndColumns: () => React.JSX.Element;
+type Story = StoryObj<typeof Table>;
+export declare const WithData: Story;
+export declare const WithNoData: Story;
+export declare const WithStickyHeader: Story;
+export declare const WithLotsOfRowsAndColumns: Story;
 export declare const WithCustomColumnWidths: () => React.JSX.Element;
 export declare const WithACustomCellComponent: () => React.JSX.Element;
 export declare const WithCellAlignment: () => React.JSX.Element;
@@ -14,6 +18,6 @@ export declare const WithACellFormatter: () => React.JSX.Element;
 export declare const WithACustomColumnLabelComponent: () => React.JSX.Element;
 export declare const WithMetadata: () => React.JSX.Element;
 export declare const WithFullWidthSection: () => React.JSX.Element;
-export declare const WithAFooter: () => React.JSX.Element;
-export declare const WithRowBorder: () => React.JSX.Element;
-export declare const WithVerticalAlignment: () => React.JSX.Element;
+export declare const WithAFooter: Story;
+export declare const WithRowBorder: Story;
+export declare const WithVerticalAlignment: Story;