@nulogy/components 6.2.1 → 6.4.0

package/dist/main.js

@@ -191,7 +191,8 @@
 
     var i18nOptions = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, getDefaults()), i18n.options.react), props);
 
-    var useSuspense = i18nOptions.useSuspense;
+    var useSuspense = i18nOptions.useSuspense,
+        keyPrefix = i18nOptions.keyPrefix;
     var namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
     namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
     if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
@@ -200,7 +201,7 @@
     });
 
     function getT() {
-      return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0]);
+      return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
     }
 
     var _useState = React.useState(getT),
@@ -283,6 +284,7 @@
   const color_base_blue = "#216beb";
   const color_base_light_blue = "#e1ebfa";
   const color_base_dark_grey = "#434d59";
+  const color_base_mid_grey = "#6c7784";
   const color_base_grey = "#c0c8d1";
   const color_base_light_grey = "#e4e7eb";
   const color_base_white_grey = "#f0f2f5";
@@ -364,6 +366,7 @@
       blue: color_base_blue,
       lightBlue: color_base_light_blue,
       darkGrey: color_base_dark_grey,
+      midGrey: color_base_mid_grey,
       grey: color_base_grey,
       lightGrey: color_base_light_grey,
       whiteGrey: color_base_white_grey,
@@ -20202,6 +20205,11 @@
 
     var spaceProps = getSubset(props, propTypes.space);
     var restProps = omitSubset(props, propTypes.space);
+    var modifiers = React.useMemo(function () {
+      return transformPropsToModifiers({
+        boundariesElement: boundariesElement
+      });
+    }, [boundariesElement]);
     return /*#__PURE__*/React__default['default'].createElement(Popper$1, {
       trigger: /*#__PURE__*/React__default['default'].cloneElement(trigger(), Object.assign({
         type: "button",
@@ -20216,9 +20224,7 @@
       openOnClick: true,
       ref: ref,
       openOnHover: false,
-      modifiers: transformPropsToModifiers({
-        boundariesElement: boundariesElement
-      }),
+      modifiers: modifiers,
       backgroundColor: backgroundColor,
       borderColor: backgroundColor,
       openAriaLabel: openAriaLabel,
@@ -52634,6 +52640,89 @@
     }, props));
   };
 
+  var numericAlphabeticalSort = function numericAlphabeticalSort(a, b, numeric) {
+    return String(a).localeCompare(b, undefined, {
+      numeric: numeric,
+      sensitivity: "base"
+    });
+  };
+
+  var applySort = function applySort(rows, sortColumn, columns) {
+    return [].concat(rows).sort(function (a, b) {
+      var column = columns.find(function (col) {
+        return col.dataKey === sortColumn;
+      });
+      var numeric = column.numeric;
+      return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);
+    });
+  };
+
+  var sortRows = function sortRows(rows, columns, sortState) {
+    var sortedRows = applySort(rows, sortState.sortColumn, columns);
+    return sortState.ascending ? sortedRows : sortedRows.reverse();
+  };
+
+  var SortingTable = function SortingTable(_a) {
+    var incomingColumns = _a.columns,
+        incomingRows = _a.rows,
+        initialSortColumn = _a.initialSortColumn,
+        props = __rest(_a, ["columns", "rows", "initialSortColumn"]);
+
+    var _useState = React.useState({
+      ascending: true,
+      sortColumn: initialSortColumn
+    }),
+        sortState = _useState[0],
+        setSortState = _useState[1];
+
+    var _useState2 = React.useState(function () {
+      return sortRows(incomingRows, incomingColumns, sortState);
+    }),
+        rows = _useState2[0],
+        setRows = _useState2[1];
+
+    var onSortChange = function onSortChange(dataKey) {
+      var newSortState;
+      setSortState(function (previousState) {
+        var ascending = previousState.sortColumn !== dataKey || !previousState.ascending;
+        newSortState = {
+          ascending: ascending,
+          sortColumn: dataKey
+        };
+        return newSortState;
+      });
+      setRows(function (previousState) {
+        return sortRows(previousState, incomingColumns, newSortState);
+      });
+    };
+
+    var transformColumn = function transformColumn(column) {
+      var isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
+      return Object.assign(Object.assign({}, column), {
+        headerFormatter: function headerFormatter(_ref) {
+          var label = _ref.label,
+              dataKey = _ref.dataKey;
+          return /*#__PURE__*/React__default['default'].createElement(Table.SortingHeader, {
+            onChange: function onChange() {
+              return onSortChange(dataKey);
+            },
+            label: label,
+            ascending: isAscending,
+            active: dataKey === sortState.sortColumn
+          });
+        }
+      });
+    };
+
+    var columns = incomingColumns.map(function (column) {
+      return transformColumn(column);
+    });
+    return /*#__PURE__*/React__default['default'].createElement(Table, Object.assign({
+      columns: columns,
+      rows: rows
+    }, props));
+  };
+
   exports.ALL_NDS_LOCALES = ALL_NDS_LOCALES;
   exports.Alert = Alert;
   exports.AnimatedBox = AnimatedBox;
@@ -52700,6 +52789,7 @@
   exports.SelectMultiValue = SelectMultiValue;
   exports.SelectOption = SelectOption;
   exports.Sidebar = Sidebar;
+  exports.SortingTable = SortingTable;
   exports.StatusIndicator = StatusIndicator;
   exports.Tab = Tab;
   exports.Table = Table;

package/dist/main.module.js

@@ -165,7 +165,8 @@ function useTranslation(ns) {
 
   var i18nOptions = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, getDefaults()), i18n.options.react), props);
 
-  var useSuspense = i18nOptions.useSuspense;
+  var useSuspense = i18nOptions.useSuspense,
+      keyPrefix = i18nOptions.keyPrefix;
   var namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
   if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
@@ -174,7 +175,7 @@ function useTranslation(ns) {
   });
 
   function getT() {
-    return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0]);
+    return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
   }
 
   var _useState = useState(getT),
@@ -257,6 +258,7 @@ const color_base_dark_blue = "#00438f";
 const color_base_blue = "#216beb";
 const color_base_light_blue = "#e1ebfa";
 const color_base_dark_grey = "#434d59";
+const color_base_mid_grey = "#6c7784";
 const color_base_grey = "#c0c8d1";
 const color_base_light_grey = "#e4e7eb";
 const color_base_white_grey = "#f0f2f5";
@@ -338,6 +340,7 @@ var Theme = {
     blue: color_base_blue,
     lightBlue: color_base_light_blue,
     darkGrey: color_base_dark_grey,
+    midGrey: color_base_mid_grey,
     grey: color_base_grey,
     lightGrey: color_base_light_grey,
     whiteGrey: color_base_white_grey,
@@ -20176,6 +20179,11 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
 
   var spaceProps = getSubset(props, propTypes.space);
   var restProps = omitSubset(props, propTypes.space);
+  var modifiers = useMemo(function () {
+    return transformPropsToModifiers({
+      boundariesElement: boundariesElement
+    });
+  }, [boundariesElement]);
   return /*#__PURE__*/React__default.createElement(Popper$1, {
     trigger: /*#__PURE__*/React__default.cloneElement(trigger(), Object.assign({
       type: "button",
@@ -20190,9 +20198,7 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     openOnClick: true,
     ref: ref,
     openOnHover: false,
-    modifiers: transformPropsToModifiers({
-      boundariesElement: boundariesElement
-    }),
+    modifiers: modifiers,
     backgroundColor: backgroundColor,
     borderColor: backgroundColor,
     openAriaLabel: openAriaLabel,
@@ -52608,4 +52614,87 @@ var Divider = function Divider(_a) {
   }, props));
 };
 
-export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, StatusIndicator, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };
+var numericAlphabeticalSort = function numericAlphabeticalSort(a, b, numeric) {
+  return String(a).localeCompare(b, undefined, {
+    numeric: numeric,
+    sensitivity: "base"
+  });
+};
+
+var applySort = function applySort(rows, sortColumn, columns) {
+  return [].concat(rows).sort(function (a, b) {
+    var column = columns.find(function (col) {
+      return col.dataKey === sortColumn;
+    });
+    var numeric = column.numeric;
+    return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);
+  });
+};
+
+var sortRows = function sortRows(rows, columns, sortState) {
+  var sortedRows = applySort(rows, sortState.sortColumn, columns);
+  return sortState.ascending ? sortedRows : sortedRows.reverse();
+};
+
+var SortingTable = function SortingTable(_a) {
+  var incomingColumns = _a.columns,
+      incomingRows = _a.rows,
+      initialSortColumn = _a.initialSortColumn,
+      props = __rest(_a, ["columns", "rows", "initialSortColumn"]);
+
+  var _useState = useState({
+    ascending: true,
+    sortColumn: initialSortColumn
+  }),
+      sortState = _useState[0],
+      setSortState = _useState[1];
+
+  var _useState2 = useState(function () {
+    return sortRows(incomingRows, incomingColumns, sortState);
+  }),
+      rows = _useState2[0],
+      setRows = _useState2[1];
+
+  var onSortChange = function onSortChange(dataKey) {
+    var newSortState;
+    setSortState(function (previousState) {
+      var ascending = previousState.sortColumn !== dataKey || !previousState.ascending;
+      newSortState = {
+        ascending: ascending,
+        sortColumn: dataKey
+      };
+      return newSortState;
+    });
+    setRows(function (previousState) {
+      return sortRows(previousState, incomingColumns, newSortState);
+    });
+  };
+
+  var transformColumn = function transformColumn(column) {
+    var isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
+    return Object.assign(Object.assign({}, column), {
+      headerFormatter: function headerFormatter(_ref) {
+        var label = _ref.label,
+            dataKey = _ref.dataKey;
+        return /*#__PURE__*/React__default.createElement(Table.SortingHeader, {
+          onChange: function onChange() {
+            return onSortChange(dataKey);
+          },
+          label: label,
+          ascending: isAscending,
+          active: dataKey === sortState.sortColumn
+        });
+      }
+    });
+  };
+
+  var columns = incomingColumns.map(function (column) {
+    return transformColumn(column);
+  });
+  return /*#__PURE__*/React__default.createElement(Table, Object.assign({
+    columns: columns,
+    rows: rows
+  }, props));
+};
+
+export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { TableProps } from "../Table";
+declare type SortingTableProps = TableProps & {
+    initialSortColumn: string;
+};
+declare const SortingTable: React.FC<SortingTableProps>;
+export default SortingTable;

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

@@ -0,0 +1,25 @@
+import React from "react";
+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;
+    }>;
+};
+export default _default;
+export declare const _SortingTable: () => JSX.Element;

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

@@ -0,0 +1 @@
+export { default as SortingTable } from "./SortingTable";

package/dist/src/Table/{TableWithSorting.story.d.ts → TableWithCustomSorting.story.d.ts}

@@ -3,7 +3,7 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const WithSorting: {
+export declare const WithCustomSorting: {
     (): JSX.Element;
     story: {
         name: string;

package/dist/src/index.d.ts

@@ -46,3 +46,4 @@ export { AsyncSelect } from "./AsyncSelect";
 export { ApplicationFrame, Page, Sidebar } from "./Layout";
 export { useWindowDimensions } from "./utils";
 export { Divider } from "./Divider";
+export { SortingTable } from "./SortingTable";

package/dist/src/theme.type.d.ts

@@ -5,6 +5,7 @@ declare type Colors = {
     blue: string;
     lightBlue: string;
     darkGrey: string;
+    midGrey: string;
     grey: string;
     lightGrey: string;
     whiteGrey: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "6.2.1",
+  "version": "6.4.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -74,7 +74,7 @@
     "@storybook/addon-storysource": "^6.1.9",
     "@storybook/addon-viewport": "^6.1.9",
     "@storybook/codemod": "^6.1.9",
-    "@storybook/react": "^6.1.9",
+    "@storybook/react": "^6.3.12",
     "@storybook/theming": "^6.1.9",
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "^10.0.0",
@@ -94,7 +94,7 @@
     "babel-plugin-require-context-hook": "1.0.0",
     "babel-plugin-styled-components": "1.10.7",
     "babel-preset-react": "6.24.1",
-    "chromatic": "^5.2.0",
+    "chromatic": "^6.0.6",
     "concurrently": "^5.2.0",
     "cypress": "^4.0.0",
     "cypress-enter-plugin": "^1.0.1",
@@ -104,7 +104,7 @@
     "enzyme-to-json": "3.4.4",
     "eslint": "6.8.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "http-server": "0.12.3",
+    "http-server": "^14.0.0",
     "husky": "^4.3.0",
     "jest": "24.1.0",
     "jest-styled-components": "7",
@@ -152,7 +152,7 @@
     "polished": "3.4.4",
     "react-datepicker": "^4.1.0",
     "react-fast-compare": "^3.2.0",
-    "react-i18next": "^11.3.3",
+    "react-i18next": "^11.14.2",
     "react-input-autosize": "^2.2.2",
     "react-modal": "^3.10.1",
     "react-popper": "1.3.7",