@nulogy/components 6.3.0 → 6.4.1

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),
@@ -20204,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",
@@ -20218,9 +20224,7 @@
       openOnClick: true,
       ref: ref,
       openOnHover: false,
-      modifiers: transformPropsToModifiers({
-        boundariesElement: boundariesElement
-      }),
+      modifiers: modifiers,
       backgroundColor: backgroundColor,
       borderColor: backgroundColor,
       openAriaLabel: openAriaLabel,
@@ -44179,22 +44183,6 @@
       opacity: 0
     }, visible ? FADE_IN_STYLES : FADE_OUT_STYLES);
   });
-  var AnimatedBoxBottom = styled__default['default'](Box).withConfig({
-    displayName: "Toast__AnimatedBoxBottom",
-    componentId: "sc-1cheg2k-1"
-  })(function (_ref2) {
-    var visible = _ref2.visible;
-    return Object.assign({
-      position: "fixed",
-      bottom: 0,
-      left: 0,
-      right: 0,
-      marginLeft: "auto",
-      marginRight: "auto",
-      width: "fit-content",
-      tranform: "translateY(" + TOAST_Y_MIN + ")"
-    }, visible ? SLIDE_IN_STYLES : SLIDE_OUT_STYLES);
-  });
   var Toast = function Toast(_a) {
     var triggered = _a.triggered,
         onHide = _a.onHide,
@@ -44203,7 +44191,8 @@
         children = _a.children,
         showDuration = _a.showDuration,
         onHidden = _a.onHidden,
-        props = __rest(_a, ["triggered", "onHide", "onShow", "isCloseable", "children", "showDuration", "onHidden"]);
+        zIndex = _a.zIndex,
+        props = __rest(_a, ["triggered", "onHide", "onShow", "isCloseable", "children", "showDuration", "onHidden", "zIndex"]);
 
     var _useState = React.useState(triggered),
         visible = _useState[0],
@@ -44266,13 +44255,23 @@
       hideToast(0);
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(AnimatedBoxBottom, {
+    return /*#__PURE__*/React__default['default'].createElement(Box, Object.assign({
       visible: visible,
       onMouseEnter: onMouseIn,
       onFocus: onMouseIn,
       onMouseLeave: onMouseOut,
-      onBlur: onMouseOut
-    }, /*#__PURE__*/React__default['default'].createElement(AnimatedAlert, Object.assign({
+      onBlur: onMouseOut,
+      position: "fixed",
+      bottom: "0",
+      left: "0",
+      right: "0",
+      marginLeft: "auto",
+      marginRight: "auto",
+      width: "fit-content",
+      transform: "translateY(" + TOAST_Y_MIN + ")"
+    }, visible ? SLIDE_IN_STYLES : SLIDE_OUT_STYLES, {
+      zIndex: zIndex
+    }), /*#__PURE__*/React__default['default'].createElement(AnimatedAlert, Object.assign({
       visible: visible,
       isCloseable: isCloseable,
       onClose: handleCloseButtonClick,
@@ -52636,6 +52635,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;
@@ -52702,6 +52784,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),
@@ -20178,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",
@@ -20192,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,
@@ -44153,22 +44157,6 @@ var AnimatedAlert = styled(Alert).withConfig({
     opacity: 0
   }, visible ? FADE_IN_STYLES : FADE_OUT_STYLES);
 });
-var AnimatedBoxBottom = styled(Box).withConfig({
-  displayName: "Toast__AnimatedBoxBottom",
-  componentId: "sc-1cheg2k-1"
-})(function (_ref2) {
-  var visible = _ref2.visible;
-  return Object.assign({
-    position: "fixed",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    marginLeft: "auto",
-    marginRight: "auto",
-    width: "fit-content",
-    tranform: "translateY(" + TOAST_Y_MIN + ")"
-  }, visible ? SLIDE_IN_STYLES : SLIDE_OUT_STYLES);
-});
 var Toast = function Toast(_a) {
   var triggered = _a.triggered,
       onHide = _a.onHide,
@@ -44177,7 +44165,8 @@ var Toast = function Toast(_a) {
       children = _a.children,
       showDuration = _a.showDuration,
       onHidden = _a.onHidden,
-      props = __rest(_a, ["triggered", "onHide", "onShow", "isCloseable", "children", "showDuration", "onHidden"]);
+      zIndex = _a.zIndex,
+      props = __rest(_a, ["triggered", "onHide", "onShow", "isCloseable", "children", "showDuration", "onHidden", "zIndex"]);
 
   var _useState = useState(triggered),
       visible = _useState[0],
@@ -44240,13 +44229,23 @@ var Toast = function Toast(_a) {
     hideToast(0);
   };
 
-  return /*#__PURE__*/React__default.createElement(AnimatedBoxBottom, {
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
     visible: visible,
     onMouseEnter: onMouseIn,
     onFocus: onMouseIn,
     onMouseLeave: onMouseOut,
-    onBlur: onMouseOut
-  }, /*#__PURE__*/React__default.createElement(AnimatedAlert, Object.assign({
+    onBlur: onMouseOut,
+    position: "fixed",
+    bottom: "0",
+    left: "0",
+    right: "0",
+    marginLeft: "auto",
+    marginRight: "auto",
+    width: "fit-content",
+    transform: "translateY(" + TOAST_Y_MIN + ")"
+  }, visible ? SLIDE_IN_STYLES : SLIDE_OUT_STYLES, {
+    zIndex: zIndex
+  }), /*#__PURE__*/React__default.createElement(AnimatedAlert, Object.assign({
     visible: visible,
     isCloseable: isCloseable,
     onClose: handleCloseButtonClick,
@@ -52610,4 +52609,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/Toast/Toast.d.ts

@@ -8,7 +8,7 @@ declare type ToastProps = AlertProps & {
     onHidden?: (...args: any[]) => any;
 };
 export declare const Toast: {
-    ({ triggered, onHide, onShow, isCloseable, children, showDuration, onHidden, ...props }: ToastProps): JSX.Element;
+    ({ triggered, onHide, onShow, isCloseable, children, showDuration, onHidden, zIndex, ...props }: ToastProps): JSX.Element;
     defaultProps: {
         triggered: boolean;
         onShow: () => void;

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

@@ -22,6 +22,12 @@ export declare const WithCloseButton: {
         name: string;
     };
 };
+export declare const WithModal: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
 export declare const CloseableWithMultiLineMessage: {
     (): JSX.Element;
     story: {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "6.3.0",
+  "version": "6.4.1",
   "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",