@nulogy/components 10.2.2 → 10.2.4

package/dist/main.js

@@ -49440,27 +49440,34 @@
       };
     });
 
-    var defaultheaderFormatter = function defaultheaderFormatter(_ref2) {
-      var label = _ref2.label;
-      return label;
-    };
-
-    var renderHeaderCellContent = function renderHeaderCellContent(_ref3) {
-      var _ref3$headerFormatter = _ref3.headerFormatter,
-          headerFormatter = _ref3$headerFormatter === void 0 ? defaultheaderFormatter : _ref3$headerFormatter,
-          align = _ref3.align,
-          label = _ref3.label,
-          dataKey = _ref3.dataKey,
-          width = _ref3.width;
-      return headerFormatter({
+    function renderHeaderCellContent(_ref2) {
+      var _ref2$headerFormatter = _ref2.headerFormatter,
+          headerFormatter = _ref2$headerFormatter === void 0 ? function (_ref3) {
+        var label = _ref3.label;
+        return label;
+      } : _ref2$headerFormatter,
+          align = _ref2.align,
+          label = _ref2.label,
+          width = _ref2.width,
+          metadata = _ref2.metadata,
+          dataKey = _ref2.dataKey,
+          key = _ref2.key;
+      return key ? headerFormatter({
         align: align,
         label: label,
-        dataKey: dataKey,
-        width: width
+        width: width,
+        metadata: metadata,
+        key: key
+      }) : headerFormatter({
+        align: align,
+        label: label,
+        width: width,
+        metadata: metadata,
+        dataKey: dataKey
       });
-    };
+    }
 
-    var TableHead = function TableHead(_ref4) {
+    function TableHead(_ref4) {
       var columns = _ref4.columns,
           compact = _ref4.compact,
           sticky = _ref4.sticky;
@@ -49481,7 +49488,7 @@
       };
 
       return /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement(StyledHeaderRow, null, renderColumns(columns)));
-    };
+    }
 
     var columnPropType = PropTypes__default["default"].shape({
       align: PropTypes__default["default"].oneOf(["right", "left", "center"]),
@@ -49770,14 +49777,14 @@
       compact: PropTypes__default["default"].bool.isRequired
     };
 
-    var TableFoot = function TableFoot(_ref3) {
+    function TableFoot(_ref3) {
       var columns = _ref3.columns,
           rows = _ref3.rows,
           keyField = _ref3.keyField,
           loading = _ref3.loading,
           compact = _ref3.compact;
       return /*#__PURE__*/React__default["default"].createElement("tfoot", null, renderRows(rows, columns, keyField, loading, compact));
-    };
+    }
 
     TableFoot.propTypes = {
       columns: columnsPropType.isRequired,
@@ -49802,7 +49809,7 @@
       position: "relative"
     });
 
-    var BaseTable = function BaseTable(_a) {
+    function BaseTable(_a) {
       var columns = _a.columns,
           rows = _a.rows,
           _a$noRowsContent = _a.noRowsContent,
@@ -49848,7 +49855,7 @@
         loading: loading,
         compact: compact
       }));
-    };
+    }
 
     BaseTable.propTypes = Object.assign(Object.assign({}, propTypes.space), {
       columns: PropTypes__default["default"].any,
@@ -50357,7 +50364,7 @@
       active: false
     };
 
-    var Table = function Table(_a) {
+    function Table(_a) {
       var hasSelectableRows = _a.hasSelectableRows,
           rowsPerPage = _a.rowsPerPage,
           hasExpandableRows = _a.hasExpandableRows,
@@ -50384,7 +50391,7 @@
         paginationCss: paginationCss,
         paginationProps: paginationProps
       }, props)) : /*#__PURE__*/React__default["default"].createElement(BaseTable, Object.assign({}, props));
-    };
+    }
 
     Table.SortingHeader = SortingColumnHeader;
 
@@ -50395,7 +50402,7 @@
       });
     };
 
-    var applySort = function applySort(rows, sortColumn, columns) {
+    function applySort(rows, sortColumn, columns) {
       return [].concat(rows).sort(function (a, b) {
         var column = columns.find(function (col) {
           return col.dataKey === sortColumn;
@@ -50403,14 +50410,14 @@
         var numeric = column.numeric;
         return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);
       });
-    };
+    }
 
-    var sortRows = function sortRows(rows, columns, sortState) {
+    function sortRows(rows, columns, sortState) {
       var sortedRows = applySort(rows, sortState.sortColumn, columns);
       return sortState.ascending ? sortedRows : sortedRows.reverse();
-    };
+    }
 
-    var SortingTable = function SortingTable(_a) {
+    function SortingTable(_a) {
       var incomingColumns = _a.columns,
           incomingRows = _a.rows,
           initialSortColumn = _a.initialSortColumn,
@@ -50469,7 +50476,7 @@
         columns: columns,
         rows: rows
       }, props));
-    };
+    }
 
     var StatusIndicatorValues = {
       neutral: "neutral",

package/dist/main.module.js

@@ -49423,27 +49423,34 @@ var StyledHeaderRow = styled.tr.withConfig({
   };
 });
 
-var defaultheaderFormatter = function defaultheaderFormatter(_ref2) {
-  var label = _ref2.label;
-  return label;
-};
-
-var renderHeaderCellContent = function renderHeaderCellContent(_ref3) {
-  var _ref3$headerFormatter = _ref3.headerFormatter,
-      headerFormatter = _ref3$headerFormatter === void 0 ? defaultheaderFormatter : _ref3$headerFormatter,
-      align = _ref3.align,
-      label = _ref3.label,
-      dataKey = _ref3.dataKey,
-      width = _ref3.width;
-  return headerFormatter({
+function renderHeaderCellContent(_ref2) {
+  var _ref2$headerFormatter = _ref2.headerFormatter,
+      headerFormatter = _ref2$headerFormatter === void 0 ? function (_ref3) {
+    var label = _ref3.label;
+    return label;
+  } : _ref2$headerFormatter,
+      align = _ref2.align,
+      label = _ref2.label,
+      width = _ref2.width,
+      metadata = _ref2.metadata,
+      dataKey = _ref2.dataKey,
+      key = _ref2.key;
+  return key ? headerFormatter({
     align: align,
     label: label,
-    dataKey: dataKey,
-    width: width
+    width: width,
+    metadata: metadata,
+    key: key
+  }) : headerFormatter({
+    align: align,
+    label: label,
+    width: width,
+    metadata: metadata,
+    dataKey: dataKey
   });
-};
+}
 
-var TableHead = function TableHead(_ref4) {
+function TableHead(_ref4) {
   var columns = _ref4.columns,
       compact = _ref4.compact,
       sticky = _ref4.sticky;
@@ -49464,7 +49471,7 @@ var TableHead = function TableHead(_ref4) {
   };
 
   return /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement(StyledHeaderRow, null, renderColumns(columns)));
-};
+}
 
 var columnPropType = PropTypes.shape({
   align: PropTypes.oneOf(["right", "left", "center"]),
@@ -49753,14 +49760,14 @@ TableFooterRow.propTypes = {
   compact: PropTypes.bool.isRequired
 };
 
-var TableFoot = function TableFoot(_ref3) {
+function TableFoot(_ref3) {
   var columns = _ref3.columns,
       rows = _ref3.rows,
       keyField = _ref3.keyField,
       loading = _ref3.loading,
       compact = _ref3.compact;
   return /*#__PURE__*/React__default.createElement("tfoot", null, renderRows(rows, columns, keyField, loading, compact));
-};
+}
 
 TableFoot.propTypes = {
   columns: columnsPropType.isRequired,
@@ -49785,7 +49792,7 @@ var StyledTable = styled.table.withConfig({
   position: "relative"
 });
 
-var BaseTable = function BaseTable(_a) {
+function BaseTable(_a) {
   var columns = _a.columns,
       rows = _a.rows,
       _a$noRowsContent = _a.noRowsContent,
@@ -49831,7 +49838,7 @@ var BaseTable = function BaseTable(_a) {
     loading: loading,
     compact: compact
   }));
-};
+}
 
 BaseTable.propTypes = Object.assign(Object.assign({}, propTypes.space), {
   columns: PropTypes.any,
@@ -50340,7 +50347,7 @@ SortingColumnHeader.defaultProps = {
   active: false
 };
 
-var Table = function Table(_a) {
+function Table(_a) {
   var hasSelectableRows = _a.hasSelectableRows,
       rowsPerPage = _a.rowsPerPage,
       hasExpandableRows = _a.hasExpandableRows,
@@ -50367,7 +50374,7 @@ var Table = function Table(_a) {
     paginationCss: paginationCss,
     paginationProps: paginationProps
   }, props)) : /*#__PURE__*/React__default.createElement(BaseTable, Object.assign({}, props));
-};
+}
 
 Table.SortingHeader = SortingColumnHeader;
 
@@ -50378,7 +50385,7 @@ var numericAlphabeticalSort = function numericAlphabeticalSort(a, b, numeric) {
   });
 };
 
-var applySort = function applySort(rows, sortColumn, columns) {
+function applySort(rows, sortColumn, columns) {
   return [].concat(rows).sort(function (a, b) {
     var column = columns.find(function (col) {
       return col.dataKey === sortColumn;
@@ -50386,14 +50393,14 @@ var applySort = function applySort(rows, sortColumn, columns) {
     var numeric = column.numeric;
     return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);
   });
-};
+}
 
-var sortRows = function sortRows(rows, columns, sortState) {
+function sortRows(rows, columns, sortState) {
   var sortedRows = applySort(rows, sortState.sortColumn, columns);
   return sortState.ascending ? sortedRows : sortedRows.reverse();
-};
+}
 
-var SortingTable = function SortingTable(_a) {
+function SortingTable(_a) {
   var incomingColumns = _a.columns,
       incomingRows = _a.rows,
       initialSortColumn = _a.initialSortColumn,
@@ -50452,7 +50459,7 @@ var SortingTable = function SortingTable(_a) {
     columns: columns,
     rows: rows
   }, props));
-};
+}
 
 var StatusIndicatorValues = {
   neutral: "neutral",

package/dist/src/SortingTable/SortingTable.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { TableProps } from "../Table";
-type SortingTableProps = TableProps & {
+type SortingTableProps<ColumnMetadata> = TableProps<ColumnMetadata> & {
     initialSortColumn: string;
 };
-declare const SortingTable: React.FC<SortingTableProps>;
+declare function SortingTable<ColumnMetadata>({ columns: incomingColumns, rows: incomingRows, initialSortColumn, ...props }: SortingTableProps<ColumnMetadata>): React.JSX.Element;
 export default SortingTable;

package/dist/src/SortingTable/SortingTable.story.d.ts

@@ -1,25 +1,8 @@
 import React from "react";
+import { SortingTable } from ".";
 declare const _default: {
     title: string;
-    component: React.FC<import("../Table/BaseTable").BaseTableProps & {
-        selectedRows?: string[];
-        onRowSelectionChange?: (...args: any[]) => any;
-        onRowExpansionChange?: (...args: any[]) => any;
-        rowsPerPage?: number;
-        onPageChange?: (...args: any[]) => any;
-        selectAllAriaLabel?: string;
-        deselectAllAriaLabel?: string;
-        paginationCss?: any;
-        paginationProps?: any;
-        expandedRows?: any[];
-        hasSelectableRows?: boolean;
-        hasExpandableRows?: boolean;
-        onSelectRow?: (...args: any[]) => any;
-        onSelectHeader?: (...args: any[]) => any;
-        isHeaderSelected?: any;
-    } & {
-        initialSortColumn: string;
-    }>;
+    component: typeof SortingTable;
 };
 export default _default;
 export declare const _SortingTable: () => React.JSX.Element;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { RowType, Columns } from "./Table.types";
-export type BaseTableProps = {
-    columns: Columns;
+export type BaseTableProps<ColumnMetaData> = {
+    columns: Columns<ColumnMetaData>;
     rows: RowType[];
     noRowsContent?: string;
     keyField?: string;
@@ -17,5 +17,21 @@ export type BaseTableProps = {
     onMouseEnter?: any;
     onMouseLeave?: any;
 };
-declare const BaseTable: React.FC<BaseTableProps>;
+declare function BaseTable<ColumnMetaData>({ columns, rows, noRowsContent, keyField, id, loading, footerRows, rowHovers, compact, className, stickyHeader, onRowMouseEnter, onRowMouseLeave, ...props }: BaseTableProps<ColumnMetaData>): React.JSX.Element;
+declare namespace BaseTable {
+    var propTypes: any;
+    var defaultProps: {
+        noRowsContent: string;
+        keyField: string;
+        id: any;
+        loading: boolean;
+        footerRows: any[];
+        rowHovers: boolean;
+        compact: boolean;
+        className: any;
+        stickyHeader: boolean;
+        onRowMouseEnter: () => void;
+        onRowMouseLeave: () => void;
+    };
+}
 export default BaseTable;

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

@@ -3,70 +3,16 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const WithData: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithNoData: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithStickyHeader: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithLotsOfRowsAndColumns: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomColumnWidths: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACustomCellComponent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCellAlignment: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACellFormatter: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACustomColumnLabelComponent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithFullWidthSection: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAFooter: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+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;

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

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { BaseTableProps } from "./BaseTable";
-export type StatefulTableProps = BaseTableProps & {
+export type StatefulTableProps<ColumnMetaData> = BaseTableProps<ColumnMetaData> & {
     selectedRows?: string[];
     onRowSelectionChange?: (...args: any[]) => any;
     onRowExpansionChange?: (...args: any[]) => any;
@@ -24,7 +24,7 @@ type StatefulTableState = {
     currentPage: number;
     paginatedRows: any;
 };
-declare class StatefulTable extends Component<StatefulTableProps, StatefulTableState> {
+declare class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnMetaData>, StatefulTableState> {
     static defaultProps: {
         hasSelectableRows: boolean;
         selectedRows: any[];
@@ -34,21 +34,17 @@ declare class StatefulTable extends Component<StatefulTableProps, StatefulTableS
         deselectAllAriaLabel: any;
         paginationCss: any;
         paginationProps: {};
-        columns?: import("./Table.types").Columns;
-        rows?: unknown[];
-        noRowsContent?: string;
-        keyField?: string;
-        id?: string;
-        loading?: boolean;
-        footerRows?: any;
-        rowHovers?: boolean;
-        compact?: boolean;
-        className?: string;
-        stickyHeader?: boolean;
-        onRowMouseEnter?: (...args: any[]) => any;
-        onRowMouseLeave?: (...args: any[]) => any;
-        onMouseEnter?: any;
-        onMouseLeave?: any;
+        noRowsContent: string;
+        keyField: string;
+        id: any;
+        loading: boolean;
+        footerRows: any[];
+        rowHovers: boolean;
+        compact: boolean;
+        className: any;
+        stickyHeader: boolean;
+        onRowMouseEnter: () => void;
+        onRowMouseLeave: () => void;
     };
     constructor(props: any);
     static getDerivedStateFromProps(nextProps: any, prevState: any): {

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

@@ -1,13 +1,13 @@
 import React from "react";
 import { StatefulTableProps } from "./StatefulTable";
 import { ColumnType, RowType, CellInfoType } from "./Table.types";
-export type TableProps = StatefulTableProps;
-export type TableColumnType = ColumnType;
+export type TableProps<ColumnMetadata> = StatefulTableProps<ColumnMetadata>;
+export type TableColumnType<ColumnMetadata> = ColumnType<ColumnMetadata>;
 export type TableRowType = RowType;
-export type TableCellInfoType = CellInfoType;
-declare const Table: {
-    ({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }: TableProps): React.JSX.Element;
-    SortingHeader: {
+export type TableCellInfoType<ColumnMetadata> = CellInfoType<ColumnMetadata>;
+declare function Table<ColumnMetadata>({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }: TableProps<ColumnMetadata>): React.JSX.Element;
+declare namespace Table {
+    var SortingHeader: {
         ({ onChange, label, ascending, active, ariaLabel }: {
             onChange: any;
             label: any;
@@ -29,5 +29,5 @@ declare const Table: {
             active: boolean;
         };
     };
-};
+}
 export default Table;

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

@@ -1,26 +1,21 @@
 import type { Key } from "react";
 import PropTypes from "prop-types";
-export type RowType = unknown;
-export interface CellInfoType {
-    cellData: unknown;
-    column: ColumnType;
+export type RowType = any;
+export interface CellInfoType<ColumnMetadata> {
+    cellData: any;
+    column: ColumnType<ColumnMetadata>;
     row: RowType;
 }
-interface ColumnInfoType {
-    align?: ColumnAlignment;
-    label: string;
-    dataKey?: Key;
-    width?: string | number;
-}
 type ColumnAlignment = "left" | "right" | "center";
-export type ColumnType = {
+export type ColumnType<ColumnMetadata> = {
     align?: ColumnAlignment;
     label?: string;
-    cellFormatter?: (cell: CellInfoType) => React.ReactNode;
-    cellRenderer?: (cell: CellInfoType) => React.ReactNode;
-    headerRenderer?: (column: ColumnInfoType) => React.ReactNode;
-    headerFormatter?: (column: ColumnInfoType) => React.ReactNode;
+    cellFormatter?: (cell: CellInfoType<ColumnMetadata>) => React.ReactNode;
+    cellRenderer?: (cell: CellInfoType<ColumnMetadata>) => React.ReactNode;
+    headerRenderer?: (column: ColumnType<ColumnMetadata>) => React.ReactNode;
+    headerFormatter?: (column: ColumnType<ColumnMetadata>) => React.ReactNode;
     width?: string | number;
+    metadata?: ColumnMetadata;
 } & ({
     key: Key;
     dataKey?: never | undefined;
@@ -28,7 +23,7 @@ export type ColumnType = {
     dataKey: Key;
     key?: never | undefined;
 });
-export type Columns = ColumnType[];
+export type Columns<ColumnMetadata> = ColumnType<ColumnMetadata>[];
 export declare const columnPropType: PropTypes.Requireable<PropTypes.InferProps<{
     align: PropTypes.Requireable<string>;
     label: PropTypes.Requireable<string>;

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

@@ -1,15 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { RowType, Columns } from "./Table.types";
-declare const TableFoot: {
-    ({ columns, rows, keyField, loading, compact, }: {
-        columns: Columns;
-        rows: RowType[];
-        keyField?: string;
-        loading?: boolean;
-        compact?: boolean;
-    }): React.JSX.Element;
-    propTypes: {
+declare function TableFoot<ColumnMetadata>({ columns, rows, keyField, loading, compact, }: {
+    columns: Columns<ColumnMetadata>;
+    rows: RowType[];
+    keyField?: string;
+    loading?: boolean;
+    compact?: boolean;
+}): React.JSX.Element;
+declare namespace TableFoot {
+    var propTypes: {
         columns: PropTypes.Validator<PropTypes.InferProps<{
             align: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<string>;
@@ -27,10 +27,10 @@ declare const TableFoot: {
         loading: PropTypes.Requireable<boolean>;
         compact: PropTypes.Requireable<boolean>;
     };
-    defaultProps: {
+    var defaultProps: {
         keyField: string;
         loading: boolean;
         compact: boolean;
     };
-};
+}
 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 {
-    columns: Columns;
+interface TableHeadProps<ColumnMetadata> {
+    columns: Columns<ColumnMetadata>;
     compact?: boolean;
     sticky?: boolean;
 }
-declare const TableHead: ({ columns, compact, sticky }: TableHeadProps) => React.JSX.Element;
+declare function TableHead<ColumnMetadata>({ columns, compact, sticky }: TableHeadProps<ColumnMetadata>): React.JSX.Element;
 export default TableHead;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "10.2.2",
+  "version": "10.2.4",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {