@nulogy/components 6.3.1 → 6.5.0

package/dist/main.js

@@ -275,7 +275,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 10 Nov 2021 22:44:30 GMT
+   * Generated on Tue, 01 Feb 2022 18:28:25 GMT
    */
 
   const color_base_black = "#011e38";
@@ -356,6 +356,7 @@
   const z_indices_sidebar = 800;
   const z_indices_nav_bar = 900;
   const z_indices_overlay = 1000;
+  const z_indices_above_overlay = 1010;
   const z_indices_open_control = 1000;
 
   var Theme = {
@@ -467,6 +468,7 @@
       tabsScollIndicator: z_indices_tabs_scroll_indicator,
       tabsBar: z_indices_tabs_bar,
       overlay: z_indices_overlay,
+      aboveOverlay: z_indices_above_overlay,
       tableHeader: z_indices_table_header,
       modalHeaderAndFooter: z_indices_modal_header_and_footer,
       openControl: z_indices_open_control,
@@ -20205,6 +20207,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",
@@ -20219,9 +20226,7 @@
       openOnClick: true,
       ref: ref,
       openOnHover: false,
-      modifiers: transformPropsToModifiers({
-        boundariesElement: boundariesElement
-      }),
+      modifiers: modifiers,
       backgroundColor: backgroundColor,
       borderColor: backgroundColor,
       openAriaLabel: openAriaLabel,
@@ -44180,22 +44185,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,
@@ -44204,7 +44193,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],
@@ -44267,13 +44257,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,
@@ -52637,6 +52637,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;
@@ -52703,6 +52786,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

@@ -249,7 +249,7 @@ function I18nextProvider(_ref) {
 
 /**
  * Do not edit directly
- * Generated on Wed, 10 Nov 2021 22:44:30 GMT
+ * Generated on Tue, 01 Feb 2022 18:28:25 GMT
  */
 
 const color_base_black = "#011e38";
@@ -330,6 +330,7 @@ const z_indices_tabs_bar = 210;
 const z_indices_sidebar = 800;
 const z_indices_nav_bar = 900;
 const z_indices_overlay = 1000;
+const z_indices_above_overlay = 1010;
 const z_indices_open_control = 1000;
 
 var Theme = {
@@ -441,6 +442,7 @@ var Theme = {
     tabsScollIndicator: z_indices_tabs_scroll_indicator,
     tabsBar: z_indices_tabs_bar,
     overlay: z_indices_overlay,
+    aboveOverlay: z_indices_above_overlay,
     tableHeader: z_indices_table_header,
     modalHeaderAndFooter: z_indices_modal_header_and_footer,
     openControl: z_indices_open_control,
@@ -20179,6 +20181,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",
@@ -20193,9 +20200,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,
@@ -44154,22 +44159,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,
@@ -44178,7 +44167,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],
@@ -44241,13 +44231,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,
@@ -52611,4 +52611,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/dist/src/theme.type.d.ts

@@ -95,6 +95,7 @@ declare type ZIndices = {
     tabsScollIndicator: number;
     tabsBar: number;
     overlay: number;
+    aboveOverlay: number;
     tableHeader: number;
     modalHeaderAndFooter: number;
     openControl: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "6.3.1",
+  "version": "6.5.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -138,7 +138,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.9.6",
-    "@nulogy/tokens": "^5.1.0",
+    "@nulogy/tokens": "^5.2.0",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
     "body-scroll-lock": "^3.1.5",