@nulogy/components 8.15.1 → 8.15.3

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

@@ -24973,10 +24973,12 @@
         id: id,
         backgroundColor: backgroundColor,
         showArrow: showArrow
-      }, restProps), React__default["default"].Children.map(children, function (child) {
-        return /*#__PURE__*/React__default["default"].cloneElement(child, Object.assign({
-          size: componentSize
-        }, child.props), child.props.children);
+      }, restProps), typeof children === "function" ? children : React__default["default"].Children.map(children, function (child) {
+        if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
+          return /*#__PURE__*/React__default["default"].cloneElement(child, Object.assign({
+            size: componentSize
+          }, child.props), child.props.children);
+        }
       })));
     });
 
@@ -49071,9 +49073,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",
@@ -49092,7 +49096,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,
@@ -49222,9 +49227,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],
@@ -49345,13 +49352,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

@@ -24950,10 +24950,12 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     id: id,
     backgroundColor: backgroundColor,
     showArrow: showArrow
-  }, restProps), React__default.Children.map(children, function (child) {
-    return /*#__PURE__*/React__default.cloneElement(child, Object.assign({
-      size: componentSize
-    }, child.props), child.props.children);
+  }, restProps), typeof children === "function" ? children : React__default.Children.map(children, function (child) {
+    if ( /*#__PURE__*/React__default.isValidElement(child)) {
+      return /*#__PURE__*/React__default.cloneElement(child, Object.assign({
+        size: componentSize
+      }, child.props), child.props.children);
+    }
   })));
 });
 
@@ -49048,9 +49050,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",
@@ -49069,7 +49073,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,
@@ -49199,9 +49204,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],
@@ -49322,13 +49329,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.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
-import { StyledProps } from "../StyledProps";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { StyledProps } from "../StyledProps";
 type DropdownMenuProps = {
     className?: string;
     size?: ComponentSize;
     id?: string;
     disabled?: boolean;
-    trigger?: React.ReactNode | ((...args: any[]) => any);
+    trigger?: () => React.FunctionComponentElement<unknown>;
     backgroundColor?: string;
     showArrow?: boolean;
     placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";

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/DropdownMenu/DropdownMenuContainer.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { DefaultNDSThemeType } from "../theme.type";
 type DropdownMenuContainerProps = {
+    id?: string;
     className?: string;
     backgroundColor?: string;
     showArrow?: boolean;

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.1",
+  "version": "8.15.3",
   "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"