@nulogy/components 15.2.2 → 15.3.0

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/TableWithCustomSorting.story.js

@@ -46,7 +46,10 @@ const TableWithCustomSorting = () => {
     };
     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 = COLUMNS.map((column) => transformColumn(column));
     return React.createElement(Table, { columns: columns, rows: rows, keyField: KEY_FIELD });

package/dist/src/Table/stories/TableWithFiltering.story.js

@@ -17,7 +17,10 @@ const ROWS = [
     { name: "F. Scott Fitzgerald", description: "author" },
 ];
 const transformColumn = (column, onChange) => {
-    return Object.assign(Object.assign({}, column), { headerFormatter: ({ label, dataKey }) => (React.createElement(ColumnHeaderWithFilter, { onChange: (e) => onChange(dataKey, e), label: label })) });
+    return {
+        ...column,
+        headerFormatter: ({ label, dataKey }) => (React.createElement(ColumnHeaderWithFilter, { onChange: (e) => onChange(dataKey, e), label: label })),
+    };
 };
 const ColumnHeaderWithFilter = ({ onChange, label }) => (React.createElement(Input, { labelText: `Filter by ${label}`, onChange: onChange, name: label }));
 const TableWithFilters = ({ rowsPerPage }) => {
@@ -36,7 +39,10 @@ const TableWithFilters = ({ rowsPerPage }) => {
     }, [filter]);
     const onFilterInputChange = (dataKey, e) => {
         const filterValue = e.currentTarget.value;
-        return setFilter((state) => (Object.assign(Object.assign({}, state), { [dataKey]: filterValue })));
+        return setFilter((state) => ({
+            ...state,
+            [dataKey]: filterValue,
+        }));
     };
     const columns = COLUMNS.map((column) => transformColumn(column, onFilterInputChange));
     return React.createElement(Table, { columns: columns, rows: rows, keyField: "name", rowsPerPage: rowsPerPage });

package/dist/src/Table/stories/TableWithServerSidePagination.story.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 { Table } from "../..";
 import { Pagination } from "../../Pagination";
@@ -29,10 +18,10 @@ class TableWithServerSidePagination extends React.Component {
                 .then((json) => {
                 this.setState({
                     loading: false,
-                    rows: json.map((_a) => {
-                        var { completed } = _a, item = __rest(_a, ["completed"]);
-                        return (Object.assign(Object.assign({}, item), { completed: completed ? "Yes" : "-" }));
-                    }),
+                    rows: json.map(({ completed, ...item }) => ({
+                        ...item,
+                        completed: completed ? "Yes" : "-",
+                    })),
                 }, callback);
             });
         };

package/dist/src/Tabs/Tab.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 { variant } from "styled-system";
@@ -41,7 +30,10 @@ const getBarHoverStyles = (selected, disabled, theme) => {
     if (disabled || selected) {
         return null;
     }
-    return Object.assign(Object.assign({}, barStyles(theme).expanded), { backgroundColor: theme.colors.lightBlue });
+    return {
+        ...barStyles(theme).expanded,
+        backgroundColor: theme.colors.lightBlue,
+    };
 };
 const TabButton = styled.button(({ selected, disabled, fullWidth, theme }) => ({
     width: fullWidth ? "100%" : undefined,
@@ -68,9 +60,13 @@ const TabButton = styled.button(({ selected, disabled, fullWidth, theme }) => ({
     "&:disabled": {
         opacity: ".5",
     },
-    "&:before": Object.assign({}, getBarStyles(selected, theme)),
+    "&:before": {
+        ...getBarStyles(selected, theme),
+    },
     "&:hover": {
-        "&:before": Object.assign({}, getBarHoverStyles(selected, disabled, theme)),
+        "&:before": {
+            ...getBarHoverStyles(selected, disabled, theme),
+        },
     },
 }), variant({
     variants: {
@@ -80,8 +76,5 @@ const TabButton = styled.button(({ selected, disabled, fullWidth, theme }) => ({
         },
     },
 }));
-const Tab = React.forwardRef((_a, ref) => {
-    var { label } = _a, props = __rest(_a, ["label"]);
-    return (React.createElement(TabButton, Object.assign({ role: "tab", type: "button", ref: ref }, props), label));
-});
+const Tab = React.forwardRef(({ label, ...props }, ref) => (React.createElement(TabButton, { role: "tab", type: "button", ref: ref, ...props }, label)));
 export default Tab;

package/dist/src/Tabs/TabContainer.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const TabContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, never>> & string;
 export default TabContainer;

package/dist/src/Tabs/TabScrollIndicator.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 styled from "styled-components";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -47,15 +36,14 @@ const TabScrollIndicatorButton = styled.button(({ side, width, theme }) => ({
         opacity: ".5",
     },
 }));
-const TabScrollIndicator = (_a) => {
-    var { side = "left", width = 40, ariaLabelLeft, ariaLabelRight, onClick } = _a, props = __rest(_a, ["side", "width", "ariaLabelLeft", "ariaLabelRight", "onClick"]);
+const TabScrollIndicator = ({ side = "left", width = 40, ariaLabelLeft, ariaLabelRight, onClick, ...props }) => {
     const { t } = useTranslation();
     const rightArrowLabel = ariaLabelRight || t("next");
     const leftArrowLabel = ariaLabelLeft || t("previous");
     function preventFocusMovement(event) {
         event.preventDefault();
     }
-    return (React.createElement(TabScrollIndicatorButton, Object.assign({}, props, { width: width, tabIndex: -1, onClick: onClick, onMouseDown: preventFocusMovement, side: side, "aria-label": side === "right" ? rightArrowLabel : leftArrowLabel }),
+    return (React.createElement(TabScrollIndicatorButton, { ...props, width: width, tabIndex: -1, onClick: onClick, onMouseDown: preventFocusMovement, side: side, "aria-label": side === "right" ? rightArrowLabel : leftArrowLabel },
         React.createElement(Icon, { icon: side === "right" ? "rightArrow" : "leftArrow" })));
 };
 export default TabScrollIndicator;

package/dist/src/Tabs/Tabs.js

@@ -28,7 +28,7 @@ class Tabs extends React.Component {
     }
     getTabs(setFocusToTab, focusedIndex, handleArrowNavigation) {
         const { fitted, children, onTabClick, variant } = this.props;
-        const componentVariant = variant !== null && variant !== void 0 ? variant : this.context.size;
+        const componentVariant = variant ?? this.context.size;
         const selectedIndex = this.getSelectedIndex();
         const tabs = React.Children.toArray(children);
         return tabs
@@ -36,10 +36,9 @@ class Tabs extends React.Component {
             .map((tab, index) => {
             return React.cloneElement(tab, {
                 onClick: (e) => {
-                    var _a, _b;
                     setFocusToTab(index);
-                    if ((_a = tab === null || tab === void 0 ? void 0 : tab.props) === null || _a === void 0 ? void 0 : _a.onClick) {
-                        (_b = tab === null || tab === void 0 ? void 0 : tab.props) === null || _b === void 0 ? void 0 : _b.onClick(e);
+                    if (tab?.props?.onClick) {
+                        tab?.props?.onClick(e);
                     }
                     if (onTabClick) {
                         onTabClick(e, index);
@@ -71,13 +70,12 @@ class Tabs extends React.Component {
         const tabContent = tabs
             .filter((tab) => Boolean(tab))
             .map((tab, index) => {
-            var _a;
             const selected = index === selectedIndex;
             if (renderTabContentOnlyWhenSelected && !selected) {
                 return null;
             }
             else {
-                return (React.createElement("div", { "aria-hidden": !selected, hidden: !selected, selected: selected, key: tab.key || tab.label }, (_a = tab === null || tab === void 0 ? void 0 : tab.props) === null || _a === void 0 ? void 0 : _a.children));
+                return (React.createElement("div", { "aria-hidden": !selected, hidden: !selected, selected: selected, key: tab.key || tab.label }, tab?.props?.children));
             }
         });
         return tabContent;
@@ -91,7 +89,7 @@ class Tabs extends React.Component {
         const { className } = this.props;
         const spaceProps = getSubset(this.props, propTypes.space);
         return (React.createElement(Box, { position: "relative" },
-            React.createElement(FocusManager, { refs: this.tabRefs, defaultFocusedIndex: this.getSelectedIndex() }, ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => (React.createElement(TabScrollIndicators, { tabRefs: this.tabRefs, tabContainerRef: this.tabContainerRef }, ({ handleScroll, handleResize }) => (React.createElement(TabContainer, Object.assign({ className: className, role: "tablist", onScroll: handleScroll, ref: this.tabContainerRef }, spaceProps),
+            React.createElement(FocusManager, { refs: this.tabRefs, defaultFocusedIndex: this.getSelectedIndex() }, ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => (React.createElement(TabScrollIndicators, { tabRefs: this.tabRefs, tabContainerRef: this.tabContainerRef }, ({ handleScroll, handleResize }) => (React.createElement(TabContainer, { className: className, role: "tablist", onScroll: handleScroll, ref: this.tabContainerRef, ...spaceProps },
                 React.createElement(ReactResizeDetector, { handleWidth: true, onResize: handleResize }),
                 this.getTabs(setFocusedIndex, focusedIndex, handleArrowNavigation)))))),
             this.getTabContent()));

package/dist/src/Textarea/Textarea.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, { forwardRef } from "react";
 import propTypes from "@styled-system/prop-types";
 import { Field } from "../Form";
@@ -17,14 +6,13 @@ import { InlineValidation } from "../Validation";
 import { getSubset, omitSubset } from "../utils/subset";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import StyledTextarea from "./StyledTextarea";
-const Textarea = forwardRef((_a, ref) => {
-    var { disabled = false, required = false, rows = 3, errorMessage, errorList, error = !!(errorMessage || errorList), labelText, requirementText, helpText, id, className, isResizeable = true, variant } = _a, props = __rest(_a, ["disabled", "required", "rows", "errorMessage", "errorList", "error", "labelText", "requirementText", "helpText", "id", "className", "isResizeable", "variant"]);
+const Textarea = forwardRef(({ disabled = false, required = false, rows = 3, errorMessage, errorList, error = !!(errorMessage || errorList), labelText, requirementText, helpText, id, className, isResizeable = true, variant, ...props }, ref) => {
     const componentVariant = useComponentVariant(variant);
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
-    return (React.createElement(Field, Object.assign({ className: className }, spaceProps),
+    return (React.createElement(Field, { className: className, ...spaceProps },
         React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
-            React.createElement(StyledTextarea, Object.assign({ "aria-invalid": error, "aria-required": required, required: required, id: id, ref: ref, errorMessage: errorMessage, errorList: errorList, error: error, rows: rows, isResizeable: isResizeable, variant: componentVariant, disabled: disabled }, restProps))),
+            React.createElement(StyledTextarea, { "aria-invalid": error, "aria-required": required, required: required, id: id, ref: ref, errorMessage: errorMessage, errorList: errorList, error: error, rows: rows, isResizeable: isResizeable, variant: componentVariant, disabled: disabled, ...restProps })),
         React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
 });
 export default Textarea;

package/dist/src/TimePicker/TimePicker.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;
-};
 // @ts-nocheck
 import React, { useState, useContext, useEffect, forwardRef, useRef, useCallback } from "react";
 import { setMinutes } from "date-fns";
@@ -100,8 +89,7 @@ export const getTimeOptions = (interval, timeFormat, minTime, maxTime, locale) =
         .sort((a, b) => getIntervalFromTime(a.value, interval) - getIntervalFromTime(b.value, interval))
         .slice(startingInterval, finalInterval);
 };
-const TimePicker = forwardRef((_a, inputRef) => {
-    var { timeFormat, interval, className, minTime, maxTime, defaultValue, onInputChange, onBlur, onFocus, errorMessage, errorList, labelText, placeholder, onClick, onChange, "aria-label": ariaLabel, value, error, disabled, variant } = _a, props = __rest(_a, ["timeFormat", "interval", "className", "minTime", "maxTime", "defaultValue", "onInputChange", "onBlur", "onFocus", "errorMessage", "errorList", "labelText", "placeholder", "onClick", "onChange", "aria-label", "value", "error", "disabled", "variant"]);
+const TimePicker = forwardRef(({ timeFormat, interval, className, minTime, maxTime, defaultValue, onInputChange, onBlur, onFocus, errorMessage, errorList, labelText, placeholder, onClick, onChange, "aria-label": ariaLabel, value, error, disabled, variant, ...props }, inputRef) => {
     const [input, setInput] = useState(defaultValue ? defaultValue : "");
     const [currentOptionRef, setCurrentOptionRef] = useState(null);
     const [dropdownIsOpen, setDropdownIsOpen] = useState(false);
@@ -196,7 +184,7 @@ const TimePicker = forwardRef((_a, inputRef) => {
     };
     const displayValue = value ? value : input || "";
     return (React.createElement(React.Fragment, null,
-        React.createElement(Box, Object.assign({ className: `nds-time-picker ${className || ""}`, position: "relative", ref: onRefChange, width: componentVariant === "touch" ? "208px" : "130px", "data-testid": "select-container" }, props),
+        React.createElement(Box, { className: `nds-time-picker ${className || ""}`, position: "relative", ref: onRefChange, width: componentVariant === "touch" ? "208px" : "130px", "data-testid": "select-container", ...props },
             React.createElement(TimePickerInput, { labelText: labelText, error: hasError, dropdownIsOpen: dropdownIsOpen, onChange: handleInputChange, onFocus: handleFocus, value: displayValue, placeholder: placeholder, iconRight: "queryBuilder", onClick: handleClickInput, onKeyDown: (e) => handleKeyDown(e), "aria-label": ariaLabel || t("Select a time"), inputWidth: componentVariant === "touch" ? "208px" : "130px", iconRightSize: "x2", "data-testid": "select-input", type: "text", ref: inputRef, disabled: disabled, autoComplete: "off", variant: componentVariant }),
             React.createElement(TimePickerDropdown, { isOpen: dropdownIsOpen, "aria-expanded": dropdownIsOpen, role: "listbox", "data-testid": "select-dropdown", ref: dropdownRef }, dropdownOptions.map((option, i) => {
                 const isClosest = matchingIndex === i;

package/dist/src/TimePicker/TimePickerDropdown.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const TimePickerDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 export default TimePickerDropdown;

package/dist/src/TimePicker/TimePickerInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputFieldProps } from "../Input/InputField";
 type TimePickerInputProps = InputFieldProps & {
     dropdownIsOpen: boolean;

package/dist/src/TimePicker/TimePickerInput.js

@@ -1,7 +1,9 @@
 import styled from "styled-components";
 import { InputField } from "../Input/InputField";
-const TimePickerInput = styled(InputField)(({ dropdownIsOpen }) => (Object.assign({}, (dropdownIsOpen && {
-    borderBottomLeftRadius: "0px",
-    borderBottomRightRadius: "0px",
-}))));
+const TimePickerInput = styled(InputField)(({ dropdownIsOpen }) => ({
+    ...(dropdownIsOpen && {
+        borderBottomLeftRadius: "0px",
+        borderBottomRightRadius: "0px",
+    }),
+}));
 export default TimePickerInput;