@nulogy/components 14.8.2 → 15.0.1

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

@@ -1,16 +1,16 @@
-import React from "react";
-import { RowBorder } from "./Table.types";
-type TableBodyProps = {
-    rows: any[];
-    columns: any[];
-    keyField?: string;
-    noRowsContent?: any;
-    loading?: boolean;
-    rowHovers?: boolean;
-    compact?: boolean;
-    onRowMouseLeave?: any;
-    onRowMouseEnter?: any;
-    rowBorder?: RowBorder;
-};
-declare const TableBody: ({ rows, columns, keyField, noRowsContent, loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }: TableBodyProps) => React.JSX.Element;
-export default TableBody;
+import React from "react";
+import { RowBorder } from "./Table.types";
+type TableBodyProps = {
+    rows: any[];
+    columns: any[];
+    keyField?: string;
+    noRowsContent?: any;
+    loading?: boolean;
+    rowHovers?: boolean;
+    compact?: boolean;
+    onRowMouseLeave?: any;
+    onRowMouseEnter?: any;
+    rowBorder?: RowBorder;
+};
+declare const TableBody: ({ rows, columns, keyField, noRowsContent, loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }: TableBodyProps) => React.JSX.Element;
+export default TableBody;

package/dist/src/Table/TableBody.js

@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+import { Box } from "../Box";
+import TableCell from "./TableCell";
+const StyledMessageContainer = styled(Box)(({ theme }) => ({
+    padding: `${theme.space.x3} 0`,
+    fontSize: theme.fontSizes.small,
+    color: theme.colors.darkGrey,
+}));
+const StyledTr = styled.tr(({ rowHovers, rowBorder, theme }) => (Object.assign({ "&:hover": {
+        backgroundColor: rowHovers ? theme.colors.whiteGrey : null,
+    } }, (rowBorder && {
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: theme.colors.lightGrey,
+    borderCollapse: "collapse",
+}))));
+const renderRows = (rows, columns, keyField, noRowsContent, rowHovers, 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 }));
+    });
+    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" },
+            React.createElement("td", { colSpan: columns.length }, row.expandedContent({ row }))))));
+};
+const TableMessageContainer = ({ colSpan, children }) => (React.createElement("tr", { "data-testid": "table-message-container" },
+    React.createElement("td", { colSpan: colSpan },
+        React.createElement(StyledMessageContainer, { className: "nds-table__no-rows-content" }, children))));
+const LoadingContent = ({ colSpan }) => (React.createElement(TableMessageContainer, { colSpan: colSpan }, "Loading..."));
+const TableBody = ({ rows, columns, keyField = "id", noRowsContent = "No records have been created for this table.", loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }) => (React.createElement("tbody", { "data-testid": "table-body" }, !loading ? (renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder)) : (React.createElement(LoadingContent, { colSpan: columns.length }))));
+export default TableBody;

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

@@ -1,10 +1,10 @@
-import React from "react";
-type TableCellProps = {
-    column?: any;
-    row?: any;
-    colSpan?: number;
-    cellData?: Record<string, unknown> | React.ReactNode | boolean;
-    compact?: boolean;
-};
-declare const TableCell: ({ column, row, cellData, colSpan, compact }: TableCellProps) => React.JSX.Element;
-export default TableCell;
+import React from "react";
+type TableCellProps = {
+    column?: any;
+    row?: any;
+    colSpan?: number;
+    cellData?: Record<string, unknown> | React.ReactNode | boolean;
+    compact?: boolean;
+};
+declare const TableCell: ({ column, row, cellData, colSpan, compact }: TableCellProps) => React.JSX.Element;
+export default TableCell;

package/dist/src/Table/TableCell.js

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+const StyledTableCell = styled.td(({ align, compact, verticalAlign, theme }) => {
+    const padding = compact ? theme.space.x1 : theme.space.x2;
+    return {
+        paddingTop: padding,
+        paddingBottom: padding,
+        textAlign: align,
+        paddingRight: padding,
+        verticalAlign: verticalAlign || "middle",
+        "&:first-child": {
+            paddingLeft: padding,
+        },
+    };
+});
+const TableCell = ({ column = {}, row = {}, cellData = "", colSpan = undefined, compact = false }) => {
+    const cellRenderer = row.cellRenderer || column.cellRenderer;
+    const { cellFormatter } = column;
+    const isCustomCell = Boolean(cellRenderer);
+    const cellContent = cellFormatter ? cellFormatter({ cellData, column, row }) : cellData;
+    if (isCustomCell) {
+        return React.createElement("td", { colSpan: colSpan }, cellRenderer ? cellRenderer({ cellData, column, row }) : cellData);
+    }
+    return (React.createElement(StyledTableCell, { align: column.align, compact: compact, verticalAlign: row.verticalAlign }, cellContent));
+};
+export default TableCell;

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

@@ -1,10 +1,10 @@
-import React from "react";
-import { RowType, Columns } from "./Table.types";
-declare function TableFoot<ColumnMetadata>({ columns, rows, keyField, loading, compact, }: {
-    columns: Columns<ColumnMetadata>;
-    rows: RowType[];
-    keyField?: string;
-    loading?: boolean;
-    compact?: boolean;
-}): React.JSX.Element;
-export default TableFoot;
+import React from "react";
+import { RowType, Columns } from "./Table.types";
+declare function TableFoot<ColumnMetadata>({ columns, rows, keyField, loading, compact, }: {
+    columns: Columns<ColumnMetadata>;
+    rows: RowType[];
+    keyField?: string;
+    loading?: boolean;
+    compact?: boolean;
+}): React.JSX.Element;
+export default TableFoot;

package/dist/src/Table/TableFoot.js

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+import TableCell from "./TableCell";
+import StyledTh from "./StyledTh";
+const StyledFooterRow = styled.tr(({ theme }) => ({
+    "&:first-of-type": {
+        borderTop: `1px solid ${theme.colors.lightGrey}`,
+    },
+}));
+const renderRows = (rows, columns, keyField, loading, compact) => rows.map((row) => (React.createElement(TableFooterRow, { row: row, columns: columns, key: row[keyField], loading: loading, compact: compact })));
+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 })));
+    })));
+};
+function TableFoot({ columns, rows, keyField = "id", loading = false, compact = false, }) {
+    return React.createElement("tfoot", null, renderRows(rows, columns, keyField, loading, compact));
+}
+export default TableFoot;

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

@@ -1,9 +1,9 @@
-import React from "react";
-import type { Columns } from "./Table.types";
-interface TableHeadProps<ColumnMetadata> {
-    columns: Columns<ColumnMetadata>;
-    compact?: boolean;
-    sticky?: boolean;
-}
-declare function TableHead<ColumnMetadata>({ columns, compact, sticky }: TableHeadProps<ColumnMetadata>): React.JSX.Element;
-export default TableHead;
+import React from "react";
+import type { Columns } from "./Table.types";
+interface TableHeadProps<ColumnMetadata> {
+    columns: Columns<ColumnMetadata>;
+    compact?: boolean;
+    sticky?: boolean;
+}
+declare function TableHead<ColumnMetadata>({ columns, compact, sticky }: TableHeadProps<ColumnMetadata>): React.JSX.Element;
+export default TableHead;

package/dist/src/Table/TableHead.js

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+import StyledTh from "./StyledTh";
+const StyledHeaderRow = styled.tr(({ theme }) => ({
+    color: theme.colors.darkGrey,
+    borderBottom: `1px solid ${theme.colors.lightGrey}`,
+}));
+function renderHeaderCellContent({ headerFormatter = ({ label }) => label, align, label, width, metadata, dataKey, key, }) {
+    return key
+        ? headerFormatter({ align, label, width, metadata, key })
+        : 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)));
+    });
+    return (React.createElement("thead", null,
+        React.createElement(StyledHeaderRow, null, renderColumns(columns))));
+}
+export default TableHead;

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

@@ -1,4 +1,4 @@
-export declare const addExpandableControl: (props: any) => {
-    rows: any;
-    columns: any[];
-};
+export declare const addExpandableControl: (props: any) => {
+    rows: any;
+    columns: any[];
+};

package/dist/src/Table/addExpandableControl.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ControlIcon } from "../Button";
+import { SELECTABLE_COLUMN_DATA_KEY } from "./addSelectableControl";
+const EXPANDABLE_COLUMN_DATA_KEY = "expanded";
+const ExpandCell = ({ row, onRowExpansionChange }) => {
+    const expandRowHandler = () => onRowExpansionChange(row);
+    const { t } = useTranslation();
+    const collapseLabel = row.collapseAriaLabel || t("collapse row");
+    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 addExpandableColumn = ({ columns, onRowExpansionChange }) => {
+    const expandableColumn = {
+        dataKey: EXPANDABLE_COLUMN_DATA_KEY,
+        cellFormatter: expandCellRenderer(onRowExpansionChange),
+        width: "30px",
+    };
+    const hasSelectableColumn = columns[0].dataKey === SELECTABLE_COLUMN_DATA_KEY;
+    const transformedColumns = hasSelectableColumn
+        ? [columns[0], expandableColumn, ...columns.slice(1)]
+        : [expandableColumn, ...columns];
+    return transformedColumns;
+};
+const addExpandableCell = ({ rows, keyField, expandedRows }) => {
+    const expandableCellData = (rowKey) => {
+        return {
+            [EXPANDABLE_COLUMN_DATA_KEY]: expandedRows ? expandedRows.includes(rowKey) : false,
+        };
+    };
+    const transformedRows = rows.map((row) => (Object.assign(Object.assign({}, expandableCellData(row[keyField])), row)));
+    return transformedRows;
+};
+export const addExpandableControl = (props) => ({
+    rows: addExpandableCell(props),
+    columns: addExpandableColumn(props),
+});

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

@@ -1,15 +1,15 @@
-export declare const SELECTABLE_COLUMN_DATA_KEY = "selected";
-export declare const addSelectableControl: ({ columns, rows, onSelectRow, onSelectHeader, keyField, selectedRows, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel, }: {
-    columns: any;
-    rows: any;
-    onSelectRow: any;
-    onSelectHeader: any;
-    keyField: any;
-    selectedRows: any;
-    isHeaderSelected: any;
-    selectAllAriaLabel: any;
-    deselectAllAriaLabel: any;
-}) => {
-    rows: any;
-    columns: any[];
-};
+export declare const SELECTABLE_COLUMN_DATA_KEY = "selected";
+export declare const addSelectableControl: ({ columns, rows, onSelectRow, onSelectHeader, keyField, selectedRows, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel, }: {
+    columns: any;
+    rows: any;
+    onSelectRow: any;
+    onSelectHeader: any;
+    keyField: any;
+    selectedRows: any;
+    isHeaderSelected: any;
+    selectAllAriaLabel: any;
+    deselectAllAriaLabel: any;
+}) => {
+    rows: any;
+    columns: any[];
+};

package/dist/src/Table/addSelectableControl.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Checkbox } from "../Checkbox";
+export const SELECTABLE_COLUMN_DATA_KEY = "selected";
+const selectHeaderFormatter = (onSelectHeader, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel) => () => {
+    const { t } = useTranslation();
+    const checkedAriaLabel = deselectAllAriaLabel || t("deselect all");
+    const uncheckedAriaLabel = selectAllAriaLabel || t("select all");
+    const ariaLabel = isHeaderSelected ? checkedAriaLabel : uncheckedAriaLabel;
+    return React.createElement(Checkbox, { checked: isHeaderSelected, onChange: onSelectHeader, "aria-label": ariaLabel });
+};
+const SelectCell = ({ row, onSelectRow }) => {
+    const selectRowHandler = () => onSelectRow(row);
+    const checked = row[SELECTABLE_COLUMN_DATA_KEY];
+    const { t } = useTranslation();
+    const checkedAriaLabel = row.selectAriaLabel || t("select row");
+    const uncheckedAriaLabel = row.deselectAriaLabel || t("select row");
+    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));
+export const addSelectableControl = ({ columns, rows, onSelectRow, onSelectHeader, keyField, selectedRows, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel, }) => {
+    const selectableColumn = {
+        dataKey: SELECTABLE_COLUMN_DATA_KEY,
+        cellFormatter: selectCellRenderer(onSelectRow),
+        headerFormatter: selectHeaderFormatter(onSelectHeader, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel),
+        width: "30px",
+    };
+    const selectableCellData = (rowKey) => ({
+        [SELECTABLE_COLUMN_DATA_KEY]: selectedRows.includes(rowKey),
+    });
+    const transformedColumns = [selectableColumn, ...columns];
+    const transformedRows = rows.map((row) => (Object.assign(Object.assign({}, selectableCellData(row[keyField])), row)));
+    return {
+        rows: transformedRows,
+        columns: transformedColumns,
+    };
+};

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

@@ -1,3 +1,3 @@
-import Table from "./Table";
-export type { TableRowType, TableColumnType, TableProps, TableCellInfoType } from "./Table";
-export { Table };
+import Table from "./Table";
+export type { TableRowType, TableColumnType, TableProps, TableCellInfoType } from "./Table";
+export { Table };

package/dist/src/Table/index.js

@@ -0,0 +1,2 @@
+import Table from "./Table";
+export { Table };

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

@@ -1,19 +1,19 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-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;
-export declare const WithCustomColumnWidths: () => React.JSX.Element;
-export declare const WithACustomCellComponent: () => React.JSX.Element;
-export declare const WithCellAlignment: () => React.JSX.Element;
-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;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+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;
+export declare const WithCustomColumnWidths: () => React.JSX.Element;
+export declare const WithACustomCellComponent: () => React.JSX.Element;
+export declare const WithCellAlignment: () => React.JSX.Element;
+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;