@nulogy/components 8.15.2 → 8.16.0

package/README.md

@@ -36,7 +36,7 @@ If your application supports Simplified Chinese, you'll also need to load [Noto
 
 Note that loading fonts from Google API is just an example and not the most performant way to load fonts for your application. You'll most likely want to include the font's inside your existing asset pipeline.
 
-### 2. Wrap your appliction in our theme provider
+### 2. Wrap your application in our theme provider
 
 Wrap your application in the NDSProvider component to access Nulogy's theme values and add typographic defaults.
 
@@ -74,17 +74,21 @@ A `locale` prop can be passed to `<NDSProvider />` to change the language of ari
 
 ## 🎨 UI Kit
 
-Designers can use NDS in Sketch by downloading the [UI Kit](https://share.goabstract.com/73221fd2-6626-43c8-b95c-e4bec74741ab). See the [Designers' Getting Started Guide](https://nulogy.design/guides/designers/) for more detail.
+Designers can use NDS in Sketch by downloading the [UI Kit](https://share.goabstract.com/73221fd2-6626-43c8-b95c-e4bec74741ab). See the [Designers' Getting Started Guide](https://nulogy.design/guides/designers/) for more details.
 
 ## 📚 Documentation
 
 Component documentation and usage guides are stored in the [github.com/nulogy/nulogy.design](https://github.com/nulogy/nulogy.design) repository.
 
+## 👋 Work requests
+
+If you encounter a bug, need a new component or new capability of an existing component, or need any other type of support please file a work request in [GitHub Issues](https://github.com/nulogy/design-system/issues). To learn more about how to file a request and what to expect please read [How to file NDS work request](https://github.com/nulogy/design-system/wiki/How-to-file-NDS-work-request).
+- [#design-system](slack://channel?team=T024N2KKA&id=CBAFQ4X7X)
+
 ## 🙌 Contributing
 
 Please see [Contributing.MD](https://github.com/nulogy/design-system/blob/master/CONTRIBUTING.md) if you work at Nulogy and would like to contribute.
 
-
 ## 💬 Questions
 
 - [#design-system](slack://channel?team=T024N2KKA&id=CBAFQ4X7X)

package/dist/main.js

@@ -41989,6 +41989,14 @@
       }, children));
     };
 
+    var sidebarWidths = {
+      xs: "400px",
+      s: "520px",
+      m: "640px",
+      l: "768px",
+      xl: "1024px"
+    };
+
     var focusFirstElement = function focusFirstElement() {
       var FOCUSABLE_EL_SELECTOR = "button, a[href], select, textarea, input, [tabindex]:not([tabindex='-1'])";
       var focusable = document.querySelectorAll(FOCUSABLE_EL_SELECTOR);
@@ -42030,11 +42038,13 @@
       });
     };
 
-    var Sidebar = function Sidebar(_a) {
+    function Sidebar(_a) {
+      var _b;
+
       var _a$p = _a.p,
-          p = _a$p === void 0 ? "x3" : _a$p,
+          p = _a$p === void 0 ? "x2" : _a$p,
           _a$width = _a.width,
-          width = _a$width === void 0 ? "400px" : _a$width,
+          width = _a$width === void 0 ? "xs" : _a$width,
           children = _a.children,
           onClose = _a.onClose,
           title = _a.title,
@@ -42058,8 +42068,11 @@
           disableScroll = _a$disableScroll === void 0 ? true : _a$disableScroll,
           _a$hideCloseButton = _a.hideCloseButton,
           hideCloseButton = _a$hideCloseButton === void 0 ? false : _a$hideCloseButton,
-          zIndex = _a.zIndex,
-          props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex"]);
+          _a$zIndex = _a.zIndex,
+          zIndex = _a$zIndex === void 0 ? "sidebar" : _a$zIndex,
+          helpText = _a.helpText,
+          renderHelpText = _a.renderHelpText,
+          props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex", "helpText", "renderHelpText"]);
 
       var closeButton = React.useRef(null);
 
@@ -42072,7 +42085,10 @@
 
       var sideBarRef = React.useRef(null);
       var contentRef = React.useRef(null);
+      var selectedWidth = (_b = sidebarWidths[width]) !== null && _b !== void 0 ? _b : width;
       React.useEffect(function () {
+        var _a;
+
         if (closeButton.current && isOpen) {
           if (closeButton && closeButton.current) {
             closeButton.current.focus();
@@ -42081,7 +42097,7 @@
           }
         } else if (shouldUpdateFocus) {
           if (triggerRef) {
-            triggerRef.current.focus();
+            (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
           } else {
             focusFirstElement();
           }
@@ -42141,11 +42157,11 @@
         position: "fixed",
         top: top,
         right: offset,
-        width: typeof width === "string" ? {
+        width: typeof selectedWidth === "string" ? {
           default: "100%",
-          small: width
-        } : width,
-        zIndex: zIndex || "sidebar",
+          small: selectedWidth
+        } : selectedWidth,
+        zIndex: zIndex,
         ref: sideBarRef
       }, props), /*#__PURE__*/React__default["default"].createElement(Flex, {
         p: p,
@@ -42157,9 +42173,14 @@
           overflowBehaviour: "contain"
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex, {
-        justifyContent: "space-between",
-        alignItems: "flex-start",
+        flexDirection: "column",
         pb: "x3"
+      }, /*#__PURE__*/React__default["default"].createElement(Flex, {
+        flexDirection: "column",
+        pb: "x2"
+      }, /*#__PURE__*/React__default["default"].createElement(Flex, {
+        justifyContent: "space-between",
+        alignItems: "flex-start"
       }, title && /*#__PURE__*/React__default["default"].createElement(Flex, {
         alignItems: "center",
         height: "100%"
@@ -42174,7 +42195,13 @@
         onClick: onClose,
         "data-testid": closeButtonTestId,
         "aria-label": closeButtonAriaLabel || t("close")
-      }))), /*#__PURE__*/React__default["default"].createElement(AnimatedBox, {
+      }))), renderHelpText ? renderHelpText() : helpText && /*#__PURE__*/React__default["default"].createElement(Text, {
+        pt: "x1",
+        color: "midGrey"
+      }, helpText)), /*#__PURE__*/React__default["default"].createElement(Divider$1, {
+        m: "0 -8px",
+        width: "calc(100% + 16px)"
+      })), /*#__PURE__*/React__default["default"].createElement(AnimatedBox, {
         variants: childVariants,
         animate: isOpen ? "open" : "closed",
         flexGrow: 1,
@@ -42192,7 +42219,7 @@
       }, footer), overlay && disableScroll && isOpen && /*#__PURE__*/React__default["default"].createElement(PreventBodyElementScrolling, {
         scrollRef: sideBarRef
       })));
-    };
+    }
 
     var LoadingAnimation = function LoadingAnimation(_ref) {
       var inactive = _ref.inactive;
@@ -49073,9 +49100,11 @@
 
       var renderColumns = function renderColumns(allColumns) {
         return allColumns.map(function (column) {
+          var _a, _b;
+
           return /*#__PURE__*/React__default["default"].createElement(StyledTh, {
             scope: "col",
-            key: column.dataKey,
+            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",
@@ -49094,7 +49123,8 @@
     var columnPropType = PropTypes__default["default"].shape({
       align: PropTypes__default["default"].oneOf(["right", "left", "center"]),
       label: PropTypes__default["default"].string,
-      dataKey: PropTypes__default["default"].string,
+      dataKey: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+      key: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].number]),
       cellFormatter: PropTypes__default["default"].func,
       cellRenderer: PropTypes__default["default"].func,
       headerRenderer: PropTypes__default["default"].func,
@@ -49224,9 +49254,11 @@
           onMouseEnter = _ref3.onMouseEnter;
 
       var renderAllCells = function renderAllCells() {
-        return columns.map(function (column) {
+        return columns.map(function (column, index) {
+          var _a, _b;
+
           return /*#__PURE__*/React__default["default"].createElement(TableCell, {
-            key: column.dataKey,
+            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],
@@ -49347,13 +49379,15 @@
       });
       var numberOfControlColumns = columns.length - columnsWithoutControls.length;
       return /*#__PURE__*/React__default["default"].createElement(StyledFooterRow, null, columnsWithoutControls.map(function (column, index) {
+        var _a, _b;
+
         return index === 0 ? /*#__PURE__*/React__default["default"].createElement(StyledTh, {
           key: column.dataKey,
           scope: "row",
           colSpan: numberOfControlColumns + 1,
           compact: compact
         }, row[column.dataKey]) : !loading && /*#__PURE__*/React__default["default"].createElement(TableCell, {
-          key: column.dataKey,
+          key: (_b = (_a = column.dataKey) !== null && _a !== void 0 ? _a : column.key) !== null && _b !== void 0 ? _b : index,
           row: row,
           column: {
             dataKey: column.dataKey,

package/dist/main.module.js

@@ -41966,6 +41966,14 @@ var Page = function Page(_a) {
   }, children));
 };
 
+var sidebarWidths = {
+  xs: "400px",
+  s: "520px",
+  m: "640px",
+  l: "768px",
+  xl: "1024px"
+};
+
 var focusFirstElement = function focusFirstElement() {
   var FOCUSABLE_EL_SELECTOR = "button, a[href], select, textarea, input, [tabindex]:not([tabindex='-1'])";
   var focusable = document.querySelectorAll(FOCUSABLE_EL_SELECTOR);
@@ -42007,11 +42015,13 @@ var SidebarOverlay = function SidebarOverlay(_ref) {
   });
 };
 
-var Sidebar = function Sidebar(_a) {
+function Sidebar(_a) {
+  var _b;
+
   var _a$p = _a.p,
-      p = _a$p === void 0 ? "x3" : _a$p,
+      p = _a$p === void 0 ? "x2" : _a$p,
       _a$width = _a.width,
-      width = _a$width === void 0 ? "400px" : _a$width,
+      width = _a$width === void 0 ? "xs" : _a$width,
       children = _a.children,
       onClose = _a.onClose,
       title = _a.title,
@@ -42035,8 +42045,11 @@ var Sidebar = function Sidebar(_a) {
       disableScroll = _a$disableScroll === void 0 ? true : _a$disableScroll,
       _a$hideCloseButton = _a.hideCloseButton,
       hideCloseButton = _a$hideCloseButton === void 0 ? false : _a$hideCloseButton,
-      zIndex = _a.zIndex,
-      props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex"]);
+      _a$zIndex = _a.zIndex,
+      zIndex = _a$zIndex === void 0 ? "sidebar" : _a$zIndex,
+      helpText = _a.helpText,
+      renderHelpText = _a.renderHelpText,
+      props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex", "helpText", "renderHelpText"]);
 
   var closeButton = useRef(null);
 
@@ -42049,7 +42062,10 @@ var Sidebar = function Sidebar(_a) {
 
   var sideBarRef = useRef(null);
   var contentRef = useRef(null);
+  var selectedWidth = (_b = sidebarWidths[width]) !== null && _b !== void 0 ? _b : width;
   useEffect(function () {
+    var _a;
+
     if (closeButton.current && isOpen) {
       if (closeButton && closeButton.current) {
         closeButton.current.focus();
@@ -42058,7 +42074,7 @@ var Sidebar = function Sidebar(_a) {
       }
     } else if (shouldUpdateFocus) {
       if (triggerRef) {
-        triggerRef.current.focus();
+        (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       } else {
         focusFirstElement();
       }
@@ -42118,11 +42134,11 @@ var Sidebar = function Sidebar(_a) {
     position: "fixed",
     top: top,
     right: offset,
-    width: typeof width === "string" ? {
+    width: typeof selectedWidth === "string" ? {
       default: "100%",
-      small: width
-    } : width,
-    zIndex: zIndex || "sidebar",
+      small: selectedWidth
+    } : selectedWidth,
+    zIndex: zIndex,
     ref: sideBarRef
   }, props), /*#__PURE__*/React__default.createElement(Flex, {
     p: p,
@@ -42134,9 +42150,14 @@ var Sidebar = function Sidebar(_a) {
       overflowBehaviour: "contain"
     }
   }, /*#__PURE__*/React__default.createElement(Flex, {
-    justifyContent: "space-between",
-    alignItems: "flex-start",
+    flexDirection: "column",
     pb: "x3"
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    flexDirection: "column",
+    pb: "x2"
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    justifyContent: "space-between",
+    alignItems: "flex-start"
   }, title && /*#__PURE__*/React__default.createElement(Flex, {
     alignItems: "center",
     height: "100%"
@@ -42151,7 +42172,13 @@ var Sidebar = function Sidebar(_a) {
     onClick: onClose,
     "data-testid": closeButtonTestId,
     "aria-label": closeButtonAriaLabel || t("close")
-  }))), /*#__PURE__*/React__default.createElement(AnimatedBox, {
+  }))), renderHelpText ? renderHelpText() : helpText && /*#__PURE__*/React__default.createElement(Text, {
+    pt: "x1",
+    color: "midGrey"
+  }, helpText)), /*#__PURE__*/React__default.createElement(Divider$1, {
+    m: "0 -8px",
+    width: "calc(100% + 16px)"
+  })), /*#__PURE__*/React__default.createElement(AnimatedBox, {
     variants: childVariants,
     animate: isOpen ? "open" : "closed",
     flexGrow: 1,
@@ -42169,7 +42196,7 @@ var Sidebar = function Sidebar(_a) {
   }, footer), overlay && disableScroll && isOpen && /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, {
     scrollRef: sideBarRef
   })));
-};
+}
 
 var LoadingAnimation = function LoadingAnimation(_ref) {
   var inactive = _ref.inactive;
@@ -49050,9 +49077,11 @@ var TableHead = function TableHead(_ref3) {
 
   var renderColumns = function renderColumns(allColumns) {
     return allColumns.map(function (column) {
+      var _a, _b;
+
       return /*#__PURE__*/React__default.createElement(StyledTh, {
         scope: "col",
-        key: column.dataKey,
+        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",
@@ -49071,7 +49100,8 @@ TableHead.defaultProps = {
 var columnPropType = PropTypes.shape({
   align: PropTypes.oneOf(["right", "left", "center"]),
   label: PropTypes.string,
-  dataKey: PropTypes.string,
+  dataKey: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
+  key: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
   cellFormatter: PropTypes.func,
   cellRenderer: PropTypes.func,
   headerRenderer: PropTypes.func,
@@ -49201,9 +49231,11 @@ var TableBodyRow = function TableBodyRow(_ref3) {
       onMouseEnter = _ref3.onMouseEnter;
 
   var renderAllCells = function renderAllCells() {
-    return columns.map(function (column) {
+    return columns.map(function (column, index) {
+      var _a, _b;
+
       return /*#__PURE__*/React__default.createElement(TableCell, {
-        key: column.dataKey,
+        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],
@@ -49324,13 +49356,15 @@ var TableFooterRow = function TableFooterRow(_ref2) {
   });
   var numberOfControlColumns = columns.length - columnsWithoutControls.length;
   return /*#__PURE__*/React__default.createElement(StyledFooterRow, null, columnsWithoutControls.map(function (column, index) {
+    var _a, _b;
+
     return index === 0 ? /*#__PURE__*/React__default.createElement(StyledTh, {
       key: column.dataKey,
       scope: "row",
       colSpan: numberOfControlColumns + 1,
       compact: compact
     }, row[column.dataKey]) : !loading && /*#__PURE__*/React__default.createElement(TableCell, {
-      key: column.dataKey,
+      key: (_b = (_a = column.dataKey) !== null && _a !== void 0 ? _a : column.key) !== null && _b !== void 0 ? _b : index,
       row: row,
       column: {
         dataKey: column.dataKey,

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

@@ -1,6 +1,9 @@
 import React from "react";
 declare const _default: {
     title: string;
+    chromatic: {
+        diffThreshold: number;
+    };
 };
 export default _default;
 export declare const _DropdownMenu: {

package/dist/src/Layout/Sidebar.d.ts

@@ -1,20 +1,25 @@
 import React, { RefObject } from "react";
 import { AnimatedBoxProps } from "../Box/Box";
-type SidebarProps = AnimatedBoxProps & {
+type PredefinedSidebarWidth = "xs" | "s" | "m" | "l" | "xl";
+type SidebarWidth = PredefinedSidebarWidth | (string & {});
+type SidebarProps = Omit<AnimatedBoxProps, "width"> & {
     children?: React.ReactNode;
-    onClose?: (arg: any) => any;
+    onClose?: () => void;
     title?: string;
     isOpen?: boolean;
     footer?: React.ReactNode;
     closeButtonTestId?: string;
     closeButtonAriaLabel?: string;
     offset?: string;
-    triggerRef?: RefObject<any>;
+    triggerRef?: RefObject<HTMLInputElement | HTMLButtonElement>;
     duration?: number;
     closeOnOutsideClick?: boolean;
     overlay?: boolean;
     disableScroll?: boolean;
     hideCloseButton?: boolean;
+    width?: SidebarWidth;
+    helpText?: React.ReactNode;
+    renderHelpText?: () => React.ReactNode;
 };
-declare const Sidebar: React.FC<SidebarProps>;
+declare function Sidebar({ p, width, children, onClose, title, isOpen, footer, closeButtonTestId, closeButtonAriaLabel, offset, triggerRef, duration, top, closeOnOutsideClick, overlay, disableScroll, hideCloseButton, zIndex, helpText, renderHelpText, ...props }: SidebarProps): React.JSX.Element;
 export default Sidebar;

package/dist/src/Layout/Sidebar.story.d.ts

@@ -16,3 +16,7 @@ export declare const WithCustomOffset: () => React.JSX.Element;
 export declare const DontCloseOnOutsideClick: () => React.JSX.Element;
 export declare const WithoutCloseButton: () => React.JSX.Element;
 export declare const WithALongTitle: () => React.JSX.Element;
+export declare const WithDifferentWidths: () => React.JSX.Element;
+export declare const WithHelpText: () => React.JSX.Element;
+export declare const WithOtherElementsInHelpText: () => React.JSX.Element;
+export declare const WithARenderedHelpText: () => React.JSX.Element;

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { ColumnType, RowType } from "./Table.types";
+import { RowType, Columns } from "./Table.types";
 export type BaseTableProps = {
-    columns: ColumnType[];
+    columns: Columns;
     rows: RowType[];
     noRowsContent?: string;
     keyField?: string;

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

@@ -34,8 +34,8 @@ declare class StatefulTable extends Component<StatefulTableProps, StatefulTableS
         deselectAllAriaLabel: any;
         paginationCss: any;
         paginationProps: {};
-        columns?: import("./Table.types").ColumnType[];
-        rows?: any[];
+        columns?: import("./Table.types").Columns;
+        rows?: unknown[];
         noRowsContent?: string;
         keyField?: string;
         id?: string;

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

@@ -1,31 +1,39 @@
-/// <reference types="react" />
+import { Key } from "react";
 import PropTypes from "prop-types";
-export type RowType = any;
+export type RowType = unknown;
 export type CellInfoType = {
-    cellData: any;
+    cellData: unknown;
     column: ColumnType;
     row: RowType;
 };
 type ColumnInfoType = {
-    align?: string;
+    align?: ColumnAlignment;
     label: string;
-    dataKey?: string;
-    width?: string;
+    dataKey?: Key;
+    width?: string | number;
 };
+type ColumnAlignment = "left" | "right" | "center";
 export type ColumnType = {
-    align?: string;
+    align?: ColumnAlignment;
     label?: string;
-    dataKey?: string;
-    cellFormatter?: (cell: CellInfoType) => React.ReactNode | JSX.Element;
-    cellRenderer?: (cell: CellInfoType) => React.ReactNode | JSX.Element;
-    headerRenderer?: (column: ColumnInfoType) => React.ReactNode | JSX.Element;
-    headerFormatter?: (column: ColumnInfoType) => React.ReactNode | JSX.Element;
-    width?: string;
-};
+    cellFormatter?: (cell: CellInfoType) => React.ReactNode;
+    cellRenderer?: (cell: CellInfoType) => React.ReactNode;
+    headerRenderer?: (column: ColumnInfoType) => React.ReactNode;
+    headerFormatter?: (column: ColumnInfoType) => React.ReactNode;
+    width?: string | number;
+} & ({
+    key: Key;
+    dataKey?: never | undefined;
+} | {
+    dataKey: Key;
+    key?: never | undefined;
+});
+export type Columns = ColumnType[];
 export declare const columnPropType: PropTypes.Requireable<PropTypes.InferProps<{
     align: PropTypes.Requireable<string>;
     label: PropTypes.Requireable<string>;
-    dataKey: PropTypes.Requireable<string>;
+    dataKey: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
+    key: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
     cellFormatter: PropTypes.Requireable<(...args: any[]) => any>;
     cellRenderer: PropTypes.Requireable<(...args: any[]) => any>;
     headerRenderer: PropTypes.Requireable<(...args: any[]) => any>;
@@ -37,7 +45,8 @@ export declare const rowPropType: PropTypes.Requireable<{
 export declare const columnsPropType: PropTypes.Requireable<PropTypes.InferProps<{
     align: PropTypes.Requireable<string>;
     label: PropTypes.Requireable<string>;
-    dataKey: PropTypes.Requireable<string>;
+    dataKey: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
+    key: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
     cellFormatter: PropTypes.Requireable<(...args: any[]) => any>;
     cellRenderer: PropTypes.Requireable<(...args: any[]) => any>;
     headerRenderer: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -1,18 +1,20 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { RowType, Columns } from "./Table.types";
 declare const TableFoot: {
-    ({ columns, rows, keyField, loading, compact }: {
-        columns: any;
-        rows: any;
-        keyField: any;
-        loading: any;
-        compact: any;
+    ({ columns, rows, keyField, loading, compact, }: {
+        columns: Columns;
+        rows: RowType[];
+        keyField?: string;
+        loading?: boolean;
+        compact?: boolean;
     }): React.JSX.Element;
     propTypes: {
         columns: PropTypes.Validator<PropTypes.InferProps<{
             align: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<string>;
-            dataKey: PropTypes.Requireable<string>;
+            dataKey: PropTypes.Requireable<PropTypes.Requireable<number> | PropTypes.Requireable<string>>;
+            key: PropTypes.Requireable<PropTypes.Requireable<number> | PropTypes.Requireable<string>>;
             cellFormatter: PropTypes.Requireable<(...args: any[]) => any>;
             cellRenderer: PropTypes.Requireable<(...args: any[]) => any>;
             headerRenderer: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { ColumnType } from "./Table.types";
+import { Columns } from "./Table.types";
 type TableHeadProps = {
-    columns: ColumnType[];
+    columns: Columns;
     compact?: boolean;
     sticky?: boolean;
 };

package/package.json

@@ -1,24 +1,28 @@
 {
   "name": "@nulogy/components",
-  "version": "8.15.2",
+  "version": "8.16.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "chromatic": "npx chromatic --project-token $CHROMATIC_TOKEN --exit-zero-on-changes",
-    "lint": "yarn run tsc && yarn run eslint",
-    "eslint": "eslint --config ./.eslintrc .'*/**/*.{js,ts,tsx}'",
-    "lint:fix": "yarn run eslint --fix",
-    "start": "concurrently \"yarn build:watch\" \"start-storybook -p 9999\"",
+    "new": "plop",
+    "start": "concurrently \"yarn build --watch\" \"start-storybook -p 9999\"",
+    "start:e2e": "yarn concurrently --kill-others \"yarn start --ci\" \"yarn wait-on http://localhost:9999 && cypress open\"",
     "build": "rollup -c",
-    "build:watch": "yarn build --watch",
-    "build-storybook": "build-storybook",
-    "e2e:start": "yarn concurrently --kill-others \"yarn start --ci\" \"yarn wait-on http://localhost:9999 && cypress open\"",
-    "e2e:test": "yarn build-storybook && yarn concurrently --success \"first\" --kill-others \"yarn http-server -p 9999 ./storybook-static\" \"yarn wait-on http://localhost:9999 && yarn cypress run\"",
-    "test": "yarn lint && yarn jest && yarn e2e:test",
-    "new": "plop"
+    "build:storybook": "build-storybook",
+    "check": "yarn check:types && yarn check:lint && yarn check:format",
+    "check:types": "tsc && cd cypress && tsc --noEmit",
+    "check:lint": "eslint --config ./.eslintrc .'*/**/*.{js,ts,tsx}'",
+    "check:format": "prettier -c .",
+    "fix": "yarn fix:lint && yarn fix:format",
+    "fix:lint": "yarn check:lint --fix",
+    "fix:format": "prettier -w .",
+    "test": "yarn test:components && yarn run test:e2e",
+    "test:components": "jest",
+    "test:e2e": "yarn build:storybook && yarn concurrently --success \"first\" --kill-others \"yarn http-server -p 9999 ./storybook-static\" \"yarn wait-on http://localhost:9999 && yarn cypress run\"",
+    "test:visual": "npx chromatic --project-token $CHROMATIC_TOKEN --exit-zero-on-changes"
   },
   "license": "MIT",
   "author": "Nulogy <info@nulogy.com> (https://github.com/nulogy)",
@@ -58,7 +62,7 @@
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@babel/preset-env": "7.3.1",
     "@babel/preset-typescript": "^7.10.4",
-    "@nulogy/eslint-config-nulogy": "^0.0.1-alpha.2",
+    "@nulogy/eslint-config-nulogy": "^1.0.0",
     "@nulogy/icons": "^4.26.0",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -98,7 +102,7 @@
     "babel-preset-react": "6.24.1",
     "chromatic": "^6.0.6",
     "concurrently": "^5.2.0",
-    "cypress": "^4.0.0",
+    "cypress": "^13.2.0",
     "cypress-enter-plugin": "^1.0.1",
     "cypress-plugin-tab": "^1.0.1",
     "enzyme": "3.11.0",
@@ -164,7 +168,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-push": "yarn lint"
+      "pre-push": "yarn run check"
     }
   },
   "jest": {
@@ -178,10 +182,12 @@
     "transformIgnorePatterns": [
       "node_modules/(?!(@nulogy|storybook-addon-performance))"
     ],
+    "testPathIgnorePatterns": [
+      "<rootDir>/cypress"
+    ],
     "testMatch": [
-      "**/src/**/*.spec.tsx",
-      "**/src/**/*.spec.ts",
-      "**/spec/**/*.spec.tsx"
+      "**/*.spec.tsx",
+      "**/*.spec.ts"
     ],
     "setupFiles": [
       "<rootDir>/spec/support/registerContext.js"