@nulogy/components 6.3.2 → 6.6.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,
@@ -24525,7 +24527,7 @@
       }
     };
   });
-  var Switch = styled__default['default'].div.withConfig({
+  var Switch$1 = styled__default['default'].div.withConfig({
     displayName: "ToggleButton__Switch",
     componentId: "t7wo9n-1"
   })(function (_ref2) {
@@ -24574,7 +24576,7 @@
       }
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(Switch, {
+    return /*#__PURE__*/React__default['default'].createElement(Switch$1, {
       onClick: handleClick
     }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, Object.assign({
       ref: inputRef,
@@ -27492,6 +27494,55 @@
     label: null
   };
 
+  var FocusManager = function FocusManager(_ref) {
+    var children = _ref.children,
+        _ref$refs = _ref.refs,
+        refs = _ref$refs === void 0 ? undefined : _ref$refs;
+
+    var _useState = React.useState(0),
+        focusedIndex = _useState[0],
+        setFocusedIndex = _useState[1];
+
+    var focusPrevious = function focusPrevious() {
+      setFocusedIndex(function (prevFocusedIndex) {
+        return (prevFocusedIndex - 1 + refs.length) % refs.length;
+      });
+    };
+
+    var focusNext = function focusNext() {
+      setFocusedIndex(function (prevFocusedIndex) {
+        return (prevFocusedIndex + 1) % refs.length;
+      });
+    };
+
+    var handleArrowNavigation = function handleArrowNavigation(e) {
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          focusPrevious();
+          break;
+
+        case "ArrowRight":
+          e.preventDefault();
+          focusNext();
+          break;
+      }
+    };
+
+    React.useEffect(function () {
+      var updateFocused = function updateFocused() {
+        refs[focusedIndex].focus();
+      };
+
+      updateFocused();
+    }, [focusedIndex, refs]);
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children({
+      focusedIndex: focusedIndex,
+      setFocusedIndex: setFocusedIndex,
+      handleArrowNavigation: handleArrowNavigation
+    }));
+  };
+
   var TabContainer = styled__default['default'](Box).withConfig({
     displayName: "TabContainer",
     componentId: "sc-1esq49v-0"
@@ -27520,94 +27571,6 @@
     };
   });
 
-  var TabFocusManager = /*#__PURE__*/function (_React$Component) {
-    _inheritsLoose__default['default'](TabFocusManager, _React$Component);
-
-    function TabFocusManager(props) {
-      var _this;
-
-      _this = _React$Component.call(this, props) || this;
-      _this.state = {
-        focusedIndex: 0
-      };
-      _this.handleArrowNavigation = _this.handleArrowNavigation.bind(_assertThisInitialized__default['default'](_this));
-      _this.focusNextTab = _this.focusNextTab.bind(_assertThisInitialized__default['default'](_this));
-      _this.focusPreviousTab = _this.focusPreviousTab.bind(_assertThisInitialized__default['default'](_this));
-      _this.setFocusToTab = _this.setFocusToTab.bind(_assertThisInitialized__default['default'](_this));
-      return _this;
-    }
-
-    var _proto = TabFocusManager.prototype;
-
-    _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-      var focusedIndex = this.state.focusedIndex;
-
-      if (prevState.focusedIndex !== focusedIndex) {
-        this.updateFocusedTab();
-      }
-    };
-
-    _proto.setFocusToTab = function setFocusToTab(index) {
-      this.setState({
-        focusedIndex: index
-      });
-    };
-
-    _proto.handleArrowNavigation = function handleArrowNavigation(e) {
-      switch (e.key) {
-        case "ArrowLeft":
-          e.preventDefault();
-          this.focusPreviousTab();
-          break;
-
-        case "ArrowRight":
-          e.preventDefault();
-          this.focusNextTab();
-          break;
-      }
-    };
-
-    _proto.focusNextTab = function focusNextTab() {
-      var tabRefs = this.props.tabRefs;
-      this.setState(function (prevState) {
-        return {
-          focusedIndex: (prevState.focusedIndex + 1) % tabRefs.length
-        };
-      });
-    };
-
-    _proto.focusPreviousTab = function focusPreviousTab() {
-      var tabRefs = this.props.tabRefs;
-      this.setState(function (prevState) {
-        return {
-          focusedIndex: (prevState.focusedIndex - 1 + tabRefs.length) % tabRefs.length
-        };
-      });
-    };
-
-    _proto.updateFocusedTab = function updateFocusedTab() {
-      var tabRefs = this.props.tabRefs;
-      var focusedIndex = this.state.focusedIndex;
-      tabRefs[focusedIndex].focus();
-    };
-
-    _proto.render = function render() {
-      var focusedIndex = this.state.focusedIndex;
-      var children = this.props.children;
-      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children({
-        focusedIndex: focusedIndex,
-        handleArrowNavigation: this.handleArrowNavigation,
-        setFocusToTab: this.setFocusToTab
-      }));
-    };
-
-    return TabFocusManager;
-  }(React__default['default'].Component);
-
-  TabFocusManager.defaultProps = {
-    tabRefs: undefined
-  };
-
   var TabScrollIndicatorButton = styled__default['default'].button.withConfig({
     displayName: "TabScrollIndicator__TabScrollIndicatorButton",
     componentId: "sc-91z16z-0"
@@ -28006,12 +27969,12 @@
       var spaceProps = getSubset(this.props, propTypes.space);
       return /*#__PURE__*/React__default['default'].createElement(Box, {
         position: "relative"
-      }, /*#__PURE__*/React__default['default'].createElement(TabFocusManager, {
-        tabRefs: this.tabRefs
+      }, /*#__PURE__*/React__default['default'].createElement(FocusManager, {
+        refs: this.tabRefs
       }, function (_ref2) {
-        var handleArrowNavigation = _ref2.handleArrowNavigation,
-            setFocusToTab = _ref2.setFocusToTab,
-            focusedIndex = _ref2.focusedIndex;
+        var focusedIndex = _ref2.focusedIndex,
+            setFocusedIndex = _ref2.setFocusedIndex,
+            handleArrowNavigation = _ref2.handleArrowNavigation;
         return /*#__PURE__*/React__default['default'].createElement(TabScrollIndicators, {
           tabRefs: _this3.tabRefs,
           tabContainerRef: _this3.tabContainerRef
@@ -28026,7 +27989,7 @@
           }, spaceProps), /*#__PURE__*/React__default['default'].createElement(ResizeDetector, {
             handleWidth: true,
             onResize: handleResize
-          }), _this3.getTabs(setFocusToTab, focusedIndex, handleArrowNavigation));
+          }), _this3.getTabs(setFocusedIndex, focusedIndex, handleArrowNavigation));
         });
       }), this.getTabContent());
     };
@@ -28044,6 +28007,109 @@
     onTabClick: undefined
   };
 
+  var Switcher = function Switcher(_a) {
+    var selected = _a.selected,
+        onChange = _a.onChange,
+        rest = __rest(_a, ["selected", "onChange"]);
+
+    var optionRefs = [];
+
+    var isSelected = function isSelected(value, index) {
+      if (!selected) return index === 0;
+      return value === selected;
+    };
+
+    var options = function options(focusedIndex, setFocusedIndex, handleArrowNavigation) {
+      return React__default['default'].Children.map(rest.children, function (child, index) {
+        return /*#__PURE__*/React__default['default'].cloneElement(child, {
+          index: index,
+          tabIndex: index === focusedIndex ? 0 : -1,
+          selected: isSelected(child.props.value, index),
+          "aria-selected": isSelected(child.props.value, index),
+          onKeyDown: handleArrowNavigation,
+          ref: function ref(_ref) {
+            optionRefs[index] = _ref;
+          },
+          onFocus: function onFocus(e) {
+            e.stopPropagation();
+          },
+          onClick: function onClick() {
+            setFocusedIndex(index);
+            if (onChange) onChange(child.props.value);
+          }
+        });
+      });
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement(Box, Object.assign({
+      display: "inline-flex",
+      bg: "whiteGrey",
+      borderRadius: "20px"
+    }, rest), /*#__PURE__*/React__default['default'].createElement(FocusManager, {
+      refs: optionRefs
+    }, function (_ref2) {
+      var focusedIndex = _ref2.focusedIndex,
+          setFocusedIndex = _ref2.setFocusedIndex,
+          handleArrowNavigation = _ref2.handleArrowNavigation;
+      return options(focusedIndex, setFocusedIndex, handleArrowNavigation);
+    }));
+  };
+
+  Switcher.propTypes = {
+    children: PropTypes__default['default'].node,
+    selected: PropTypes__default['default'].string,
+    onChange: PropTypes__default['default'].func
+  };
+
+  var SwitchButton = styled__default['default'].button.withConfig({
+    displayName: "Switch__SwitchButton",
+    componentId: "wsu5uq-0"
+  })(function (_ref) {
+    var selected = _ref.selected,
+        theme = _ref.theme;
+    return Object.assign(Object.assign(Object.assign({
+      height: theme.space.x4,
+      margin: 1,
+      padding: theme.space.half + " " + theme.space.x2,
+      background: selected ? theme.colors.white : "none",
+      color: selected ? theme.colors.darkBlue : theme.colors.darkGrey,
+      cursor: "pointer",
+      border: "none",
+      borderRadius: 20,
+      fontSize: theme.fontSizes.medium,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights.base,
+      textDecoration: "none",
+      whiteSpace: "nowrap"
+    }, selected && {
+      boxShadow: theme.shadows.small
+    }), {
+      "&:focus": {
+        outline: "none",
+        boxShadow: theme.shadows.focus
+      }
+    }), !selected && {
+      "&:hover": {
+        backgroundColor: theme.colors.lightGrey
+      }
+    });
+  });
+  /* eslint-disable-next-line react/display-name */
+
+  var Switch = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
+    var children = _a.children,
+        rest = __rest(_a, ["children"]);
+
+    return /*#__PURE__*/React__default['default'].createElement(SwitchButton, Object.assign({}, rest, {
+      ref: ref
+    }), children);
+  });
+  Switch.propTypes = {
+    children: PropTypes__default['default'].node,
+    selected: PropTypes__default['default'].bool,
+    value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].number, PropTypes__default['default'].array])
+  };
+
   var getHoverBackground = function getHoverBackground(currentPage, disabled, theme) {
     if (currentPage) {
       return theme.colors.darkBlue;
@@ -44183,22 +44249,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,
@@ -44207,7 +44257,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],
@@ -44270,13 +44321,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,
@@ -52640,6 +52701,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;
@@ -52706,7 +52850,10 @@
   exports.SelectMultiValue = SelectMultiValue;
   exports.SelectOption = SelectOption;
   exports.Sidebar = Sidebar;
+  exports.SortingTable = SortingTable;
   exports.StatusIndicator = StatusIndicator;
+  exports.Switch = Switch;
+  exports.Switcher = Switcher;
   exports.Tab = Tab;
   exports.Table = Table;
   exports.Tabs = Tabs;

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,
@@ -24499,7 +24501,7 @@ var Slider = styled.span.withConfig({
     }
   };
 });
-var Switch = styled.div.withConfig({
+var Switch$1 = styled.div.withConfig({
   displayName: "ToggleButton__Switch",
   componentId: "t7wo9n-1"
 })(function (_ref2) {
@@ -24548,7 +24550,7 @@ var ToggleButton = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     }
   };
 
-  return /*#__PURE__*/React__default.createElement(Switch, {
+  return /*#__PURE__*/React__default.createElement(Switch$1, {
     onClick: handleClick
   }, /*#__PURE__*/React__default.createElement(ToggleInput, Object.assign({
     ref: inputRef,
@@ -27466,6 +27468,55 @@ Tab.defaultProps = {
   label: null
 };
 
+var FocusManager = function FocusManager(_ref) {
+  var children = _ref.children,
+      _ref$refs = _ref.refs,
+      refs = _ref$refs === void 0 ? undefined : _ref$refs;
+
+  var _useState = useState(0),
+      focusedIndex = _useState[0],
+      setFocusedIndex = _useState[1];
+
+  var focusPrevious = function focusPrevious() {
+    setFocusedIndex(function (prevFocusedIndex) {
+      return (prevFocusedIndex - 1 + refs.length) % refs.length;
+    });
+  };
+
+  var focusNext = function focusNext() {
+    setFocusedIndex(function (prevFocusedIndex) {
+      return (prevFocusedIndex + 1) % refs.length;
+    });
+  };
+
+  var handleArrowNavigation = function handleArrowNavigation(e) {
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        focusPrevious();
+        break;
+
+      case "ArrowRight":
+        e.preventDefault();
+        focusNext();
+        break;
+    }
+  };
+
+  useEffect(function () {
+    var updateFocused = function updateFocused() {
+      refs[focusedIndex].focus();
+    };
+
+    updateFocused();
+  }, [focusedIndex, refs]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children({
+    focusedIndex: focusedIndex,
+    setFocusedIndex: setFocusedIndex,
+    handleArrowNavigation: handleArrowNavigation
+  }));
+};
+
 var TabContainer = styled(Box).withConfig({
   displayName: "TabContainer",
   componentId: "sc-1esq49v-0"
@@ -27494,94 +27545,6 @@ var TabContainer = styled(Box).withConfig({
   };
 });
 
-var TabFocusManager = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose$2(TabFocusManager, _React$Component);
-
-  function TabFocusManager(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    _this.state = {
-      focusedIndex: 0
-    };
-    _this.handleArrowNavigation = _this.handleArrowNavigation.bind(_assertThisInitialized$4(_this));
-    _this.focusNextTab = _this.focusNextTab.bind(_assertThisInitialized$4(_this));
-    _this.focusPreviousTab = _this.focusPreviousTab.bind(_assertThisInitialized$4(_this));
-    _this.setFocusToTab = _this.setFocusToTab.bind(_assertThisInitialized$4(_this));
-    return _this;
-  }
-
-  var _proto = TabFocusManager.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    var focusedIndex = this.state.focusedIndex;
-
-    if (prevState.focusedIndex !== focusedIndex) {
-      this.updateFocusedTab();
-    }
-  };
-
-  _proto.setFocusToTab = function setFocusToTab(index) {
-    this.setState({
-      focusedIndex: index
-    });
-  };
-
-  _proto.handleArrowNavigation = function handleArrowNavigation(e) {
-    switch (e.key) {
-      case "ArrowLeft":
-        e.preventDefault();
-        this.focusPreviousTab();
-        break;
-
-      case "ArrowRight":
-        e.preventDefault();
-        this.focusNextTab();
-        break;
-    }
-  };
-
-  _proto.focusNextTab = function focusNextTab() {
-    var tabRefs = this.props.tabRefs;
-    this.setState(function (prevState) {
-      return {
-        focusedIndex: (prevState.focusedIndex + 1) % tabRefs.length
-      };
-    });
-  };
-
-  _proto.focusPreviousTab = function focusPreviousTab() {
-    var tabRefs = this.props.tabRefs;
-    this.setState(function (prevState) {
-      return {
-        focusedIndex: (prevState.focusedIndex - 1 + tabRefs.length) % tabRefs.length
-      };
-    });
-  };
-
-  _proto.updateFocusedTab = function updateFocusedTab() {
-    var tabRefs = this.props.tabRefs;
-    var focusedIndex = this.state.focusedIndex;
-    tabRefs[focusedIndex].focus();
-  };
-
-  _proto.render = function render() {
-    var focusedIndex = this.state.focusedIndex;
-    var children = this.props.children;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children({
-      focusedIndex: focusedIndex,
-      handleArrowNavigation: this.handleArrowNavigation,
-      setFocusToTab: this.setFocusToTab
-    }));
-  };
-
-  return TabFocusManager;
-}(React__default.Component);
-
-TabFocusManager.defaultProps = {
-  tabRefs: undefined
-};
-
 var TabScrollIndicatorButton = styled.button.withConfig({
   displayName: "TabScrollIndicator__TabScrollIndicatorButton",
   componentId: "sc-91z16z-0"
@@ -27980,12 +27943,12 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     var spaceProps = getSubset(this.props, propTypes.space);
     return /*#__PURE__*/React__default.createElement(Box, {
       position: "relative"
-    }, /*#__PURE__*/React__default.createElement(TabFocusManager, {
-      tabRefs: this.tabRefs
+    }, /*#__PURE__*/React__default.createElement(FocusManager, {
+      refs: this.tabRefs
     }, function (_ref2) {
-      var handleArrowNavigation = _ref2.handleArrowNavigation,
-          setFocusToTab = _ref2.setFocusToTab,
-          focusedIndex = _ref2.focusedIndex;
+      var focusedIndex = _ref2.focusedIndex,
+          setFocusedIndex = _ref2.setFocusedIndex,
+          handleArrowNavigation = _ref2.handleArrowNavigation;
       return /*#__PURE__*/React__default.createElement(TabScrollIndicators, {
         tabRefs: _this3.tabRefs,
         tabContainerRef: _this3.tabContainerRef
@@ -28000,7 +27963,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }, spaceProps), /*#__PURE__*/React__default.createElement(ResizeDetector, {
           handleWidth: true,
           onResize: handleResize
-        }), _this3.getTabs(setFocusToTab, focusedIndex, handleArrowNavigation));
+        }), _this3.getTabs(setFocusedIndex, focusedIndex, handleArrowNavigation));
       });
     }), this.getTabContent());
   };
@@ -28018,6 +27981,109 @@ Tabs.defaultProps = {
   onTabClick: undefined
 };
 
+var Switcher = function Switcher(_a) {
+  var selected = _a.selected,
+      onChange = _a.onChange,
+      rest = __rest(_a, ["selected", "onChange"]);
+
+  var optionRefs = [];
+
+  var isSelected = function isSelected(value, index) {
+    if (!selected) return index === 0;
+    return value === selected;
+  };
+
+  var options = function options(focusedIndex, setFocusedIndex, handleArrowNavigation) {
+    return React__default.Children.map(rest.children, function (child, index) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        index: index,
+        tabIndex: index === focusedIndex ? 0 : -1,
+        selected: isSelected(child.props.value, index),
+        "aria-selected": isSelected(child.props.value, index),
+        onKeyDown: handleArrowNavigation,
+        ref: function ref(_ref) {
+          optionRefs[index] = _ref;
+        },
+        onFocus: function onFocus(e) {
+          e.stopPropagation();
+        },
+        onClick: function onClick() {
+          setFocusedIndex(index);
+          if (onChange) onChange(child.props.value);
+        }
+      });
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+    display: "inline-flex",
+    bg: "whiteGrey",
+    borderRadius: "20px"
+  }, rest), /*#__PURE__*/React__default.createElement(FocusManager, {
+    refs: optionRefs
+  }, function (_ref2) {
+    var focusedIndex = _ref2.focusedIndex,
+        setFocusedIndex = _ref2.setFocusedIndex,
+        handleArrowNavigation = _ref2.handleArrowNavigation;
+    return options(focusedIndex, setFocusedIndex, handleArrowNavigation);
+  }));
+};
+
+Switcher.propTypes = {
+  children: PropTypes.node,
+  selected: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+var SwitchButton = styled.button.withConfig({
+  displayName: "Switch__SwitchButton",
+  componentId: "wsu5uq-0"
+})(function (_ref) {
+  var selected = _ref.selected,
+      theme = _ref.theme;
+  return Object.assign(Object.assign(Object.assign({
+    height: theme.space.x4,
+    margin: 1,
+    padding: theme.space.half + " " + theme.space.x2,
+    background: selected ? theme.colors.white : "none",
+    color: selected ? theme.colors.darkBlue : theme.colors.darkGrey,
+    cursor: "pointer",
+    border: "none",
+    borderRadius: 20,
+    fontSize: theme.fontSizes.medium,
+    fontWeight: theme.fontWeights.medium,
+    lineHeight: theme.lineHeights.base,
+    textDecoration: "none",
+    whiteSpace: "nowrap"
+  }, selected && {
+    boxShadow: theme.shadows.small
+  }), {
+    "&:focus": {
+      outline: "none",
+      boxShadow: theme.shadows.focus
+    }
+  }), !selected && {
+    "&:hover": {
+      backgroundColor: theme.colors.lightGrey
+    }
+  });
+});
+/* eslint-disable-next-line react/display-name */
+
+var Switch = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React__default.createElement(SwitchButton, Object.assign({}, rest, {
+    ref: ref
+  }), children);
+});
+Switch.propTypes = {
+  children: PropTypes.node,
+  selected: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array])
+};
+
 var getHoverBackground = function getHoverBackground(currentPage, disabled, theme) {
   if (currentPage) {
     return theme.colors.darkBlue;
@@ -44157,22 +44223,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,
@@ -44181,7 +44231,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],
@@ -44244,13 +44295,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,
@@ -52614,4 +52675,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, Switch, Switcher, 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/Switcher/Switch.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare type SwitchProps = {
+    selected?: boolean;
+} & React.ComponentPropsWithRef<"button">;
+declare const Switch: React.ForwardRefExoticComponent<Pick<SwitchProps, "form" | "slot" | "style" | "title" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "selected"> & React.RefAttributes<HTMLButtonElement>>;
+export default Switch;

package/dist/src/Switcher/Switch.story.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Switch: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SelectedSwitch: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const UnSelectedSwitch: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Switcher/Switcher.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare type SwitchValue = HTMLButtonElement["value"];
+declare type SwitcherProps = {
+    children?: any;
+    selected?: SwitchValue;
+    onChange?: Function;
+};
+declare const Switcher: React.FC<SwitcherProps>;
+export default Switcher;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const WithSelectedValue: () => JSX.Element;
+export declare const WithContent: () => JSX.Element;
+declare const _default: {
+    title: string;
+};
+export default _default;

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

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

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/Tabs/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Tab } from "./Tab";
 export { default as Tabs } from "./Tabs";
-export { default as TabFocusManager } from "./TabFocusManager";
 export { default as TabScrollIndicator } from "./TabScrollIndicator";
 export { default as TabScrollIndicators } from "./TabScrollIndicators";

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

@@ -26,6 +26,7 @@ export { Tooltip } from "./Tooltip";
 export { Card, CardSet } from "./Card";
 export { Modal } from "./Modal";
 export { Tab, Tabs } from "./Tabs";
+export { Switch, Switcher } from "./Switcher";
 export { Table } from "./Table";
 export type { TableProps, TableColumnType, TableRowType, TableCellInfoType, } from "./Table";
 export { StatusIndicator } from "./StatusIndicator";
@@ -46,3 +47,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/dist/src/utils/ts/FocusManager.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+declare type Reference = {
+    current?: JSX.Element;
+    focus?: (...args: any[]) => any;
+};
+declare type ChildrenHandlers = {
+    focusedIndex: number;
+    handleArrowNavigation: Function;
+    setFocusedIndex: Function;
+};
+declare type FocusManagerProps = {
+    refs?: Array<Reference>;
+    children: (handlers: ChildrenHandlers) => ReactNode;
+};
+declare const FocusManager: React.FC<FocusManagerProps>;
+export default FocusManager;

package/package.json

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

package/dist/src/Tabs/TabFocusManager.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-declare type TabFocusManagerProps = {
-    tabRefs?: {
-        current?: JSX.Element;
-        focus?: (...args: any[]) => any;
-    }[];
-};
-declare type TabFocusManagerState = {
-    focusedIndex: any;
-} & ((prevState: any) => {
-    focusedIndex: number;
-}) & ((prevState: any) => {
-    focusedIndex: number;
-}) & {
-    focusedIndex: number;
-};
-declare class TabFocusManager extends React.Component<TabFocusManagerProps, TabFocusManagerState> {
-    constructor(props: any);
-    componentDidUpdate(prevProps: any, prevState: any): void;
-    setFocusToTab(index: any): void;
-    handleArrowNavigation(e: any): void;
-    focusNextTab(): void;
-    focusPreviousTab(): void;
-    updateFocusedTab(): void;
-    render(): JSX.Element;
-}
-export default TabFocusManager;