@nulogy/components 6.6.4 → 6.7.2

package/dist/main.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-dom'), require('react-windowed-select'), require('exenv'), require('smoothscroll-polyfill'), require('classnames'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-dom', 'react-windowed-select', 'exenv', 'smoothscroll-polyfill', 'classnames', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.reactDom, global.components, global.exenv, global.smoothscroll, global.t, null, global.AutosizeInput));
-}(this, (function (exports, React, styled, _typeof$3, _classCallCheck$3, _createClass$3, _defineProperty$2, assign$1, icons, _extends$4, _assertThisInitialized$4, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, reactDom, WindowedSelect, exenv, smoothscroll, t, toConsumableArray, AutosizeInput) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-dom'), require('react-windowed-select'), require('exenv'), require('smoothscroll-polyfill'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('classnames')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-dom', 'react-windowed-select', 'exenv', 'smoothscroll-polyfill', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral', 'classnames'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.reactDom, global.components, global.exenv, global.smoothscroll, null, global.AutosizeInput, null, global.t));
+}(this, (function (exports, React, styled, _typeof$3, _classCallCheck$3, _createClass$3, _defineProperty$2, assign$1, icons, _extends$4, _assertThisInitialized$4, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, reactDom, WindowedSelect, exenv, smoothscroll, toConsumableArray, AutosizeInput, taggedTemplateLiteral, t) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -49,8 +49,8 @@
   var WindowedSelect__default = /*#__PURE__*/_interopDefaultLegacy(WindowedSelect);
   var exenv__default = /*#__PURE__*/_interopDefaultLegacy(exenv);
   var smoothscroll__default = /*#__PURE__*/_interopDefaultLegacy(smoothscroll);
-  var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
   var AutosizeInput__default = /*#__PURE__*/_interopDefaultLegacy(AutosizeInput);
+  var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
 
   var defaultOptions = {
     bindI18n: 'languageChanged',
@@ -24495,68 +24495,83 @@
     default: false
   };
 
-  var Slider = styled__default['default'].span.withConfig({
-    displayName: "ToggleButton__Slider",
-    componentId: "t7wo9n-0"
-  })(function (_ref) {
-    var disabled = _ref.disabled,
-        theme = _ref.theme;
-    return {
-      position: "absolute",
-      height: theme.space.x3,
-      width: theme.space.x6,
-      top: "0",
-      right: "0",
-      bottom: "0",
-      left: "0",
-      backgroundColor: disabled ? theme.colors.grey : theme.colors.darkGrey,
-      borderRadius: "12px",
-      transition: ".2s ease",
-      cursor: disabled ? undefined : "pointer",
-      "&:before": {
-        content: "''",
-        position: "absolute",
-        height: "22px",
-        width: "22px",
-        left: "1px",
-        top: "1px",
-        borderRadius: theme.radii.circle,
-        boxSizing: "border-box",
-        backgroundColor: disabled ? theme.colors.whiteGrey : theme.colors.white,
-        transition: ".2s ease"
-      }
-    };
-  });
-  var Switch$1 = styled__default['default'].div.withConfig({
-    displayName: "ToggleButton__Switch",
-    componentId: "t7wo9n-1"
-  })(function (_ref2) {
-    var theme = _ref2.theme;
-    return {
-      position: "relative",
-      display: "inline-flex",
-      minWidth: theme.space.x6,
-      minHeight: theme.space.x3,
-      input: {
-        opacity: "0",
-        width: "1px",
-        height: "1px"
+  var getSwitchBackground = function getSwitchBackground(toggled) {
+    return toggled ? "darkBlue" : "darkGrey";
+  };
+
+  var animationConfig = {
+    transition: {
+      type: "spring",
+      stiffness: 850,
+      damping: 37,
+      duration: 0.1
+    },
+    scale: 1.08
+  };
+
+  var Switch$1 = function Switch(_ref) {
+    var children = _ref.children,
+        disabled = _ref.disabled,
+        toggled = _ref.toggled,
+        onClick = _ref.onClick;
+    return /*#__PURE__*/React__default['default'].createElement(AnimatedBox, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: toggled ? "flex-end" : "flex-start",
+      height: "24px",
+      width: "48px",
+      bg: disabled ? "grey" : getSwitchBackground(toggled),
+      borderRadius: "20px",
+      padding: "2px",
+      boxShadow: "small",
+      whileHover: "hover",
+      onClick: onClick
+    }, children);
+  };
+
+  var Slider = function Slider(_ref2) {
+    var disabled = _ref2.disabled,
+        children = _ref2.children;
+    return /*#__PURE__*/React__default['default'].createElement(motion.div, {
+      className: "slider",
+      layout: true,
+      variants: {
+        hover: {
+          boxShadow: disabled ? undefined : Theme.shadows.focus,
+          scale: disabled ? undefined : animationConfig.scale
+        }
+      },
+      transition: animationConfig.transition,
+      whileFocus: {
+        boxShadow: disabled ? undefined : Theme.shadows.focus,
+        scale: disabled ? undefined : animationConfig.scale
+      },
+      style: {
+        height: "20px",
+        width: "20px",
+        borderRadius: "50%",
+        backgroundColor: disabled ? Theme.colors.whiteGrey : Theme.colors.white
       }
-    };
-  });
+    }, children);
+  };
+
   var ToggleInput = styled__default['default'].input.withConfig({
     displayName: "ToggleButton__ToggleInput",
-    componentId: "t7wo9n-2"
+    componentId: "t7wo9n-0"
   })(function (_ref3) {
     var _ref4;
 
     var disabled = _ref3.disabled,
         theme = _ref3.theme;
-    return _ref4 = {}, _ref4["&:checked + " + Slider + ":before"] = {
-      transform: "translateX(24px)"
-    }, _ref4["&:checked + " + Slider] = {
+    return _ref4 = {
+      width: "1px",
+      height: "1px",
+      opacity: 0,
+      position: "absolute"
+    }, _ref4["&:checked + .slider}"] = {
       backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue
-    }, _ref4["&:focus + " + Slider + ":before"] = {
+    }, _ref4["&:focus + .slider"] = {
+      transform: disabled ? null : "scale(" + animationConfig.scale + ")",
       boxShadow: disabled ? undefined : theme.shadows.focus
     }, _ref4;
   });
@@ -24577,6 +24592,8 @@
     };
 
     return /*#__PURE__*/React__default['default'].createElement(Switch$1, {
+      disabled: disabled,
+      toggled: toggled,
       onClick: handleClick
     }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, Object.assign({
       ref: inputRef,
@@ -27497,9 +27514,10 @@
   var FocusManager = function FocusManager(_ref) {
     var children = _ref.children,
         _ref$refs = _ref.refs,
-        refs = _ref$refs === void 0 ? undefined : _ref$refs;
+        refs = _ref$refs === void 0 ? undefined : _ref$refs,
+        defaultFocusedIndex = _ref.defaultFocusedIndex;
 
-    var _useState = React.useState(0),
+    var _useState = React.useState(defaultFocusedIndex !== null && defaultFocusedIndex !== void 0 ? defaultFocusedIndex : 0),
         focusedIndex = _useState[0],
         setFocusedIndex = _useState[1];
 
@@ -27970,7 +27988,8 @@
       return /*#__PURE__*/React__default['default'].createElement(Box, {
         position: "relative"
       }, /*#__PURE__*/React__default['default'].createElement(FocusManager, {
-        refs: this.tabRefs
+        refs: this.tabRefs,
+        defaultFocusedIndex: this.getSelectedIndex()
       }, function (_ref2) {
         var focusedIndex = _ref2.focusedIndex,
             setFocusedIndex = _ref2.setFocusedIndex,
@@ -28019,6 +28038,14 @@
       return value === selected;
     };
 
+    var getSelectedIndex = function getSelectedIndex() {
+      return React__default['default'].Children.toArray(rest.children).findIndex(function (child) {
+        var _a, _b;
+
+        return ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.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, {
@@ -28046,7 +28073,8 @@
       bg: "whiteGrey",
       borderRadius: "20px"
     }, rest), /*#__PURE__*/React__default['default'].createElement(FocusManager, {
-      refs: optionRefs
+      refs: optionRefs,
+      defaultFocusedIndex: getSelectedIndex()
     }, function (_ref2) {
       var focusedIndex = _ref2.focusedIndex,
           setFocusedIndex = _ref2.setFocusedIndex,
@@ -44966,8 +44994,10 @@
   });
 
   var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      key: menuItem.key || menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(MenuTrigger, Object.assign({
       name: menuItem.name,
       "aria-label": menuItem.ariaLabel,
@@ -44976,8 +45006,10 @@
   };
 
   var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement("div", {
-      key: menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(MenuLink$1, Object.assign({
       href: menuItem.href,
       to: menuItem.to,
@@ -44986,14 +45018,18 @@
   };
 
   var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
-      key: menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }), menuItem.render());
   };
 
   var renderText$1 = function renderText(menuItem, themeColorObject) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(MenuText$1, Object.assign({
-      key: menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, themeColorObject), menuItem.name);
   };
 
@@ -45229,8 +45265,10 @@
   });
 
   var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorObject, layer) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(StyledLi, {
-      key: menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({
       layer: layer
     }, themeColorObject, {
@@ -45242,8 +45280,10 @@
   };
 
   var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles, Object.assign({
-      key: menuItem.name
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, themeColorObject, {
       layer: layer,
       onClick: linkOnClick
@@ -45251,8 +45291,10 @@
   };
 
   var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObject, layer) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement("li", {
-      key: menuItem.name,
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name,
       style: {
         display: "block"
       }
@@ -45265,8 +45307,10 @@
   };
 
   var renderText = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(MenuText, Object.assign({
-      key: menuItem.name,
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name,
       layer: layer
     }, themeColorObject), menuItem.name);
   };

package/dist/main.module.js

@@ -21,10 +21,10 @@ import reactDom, { findDOMNode, createPortal } from 'react-dom';
 import WindowedSelect, { components as components$1 } from 'react-windowed-select';
 import exenv from 'exenv';
 import smoothscroll from 'smoothscroll-polyfill';
-import t from 'classnames';
 import '@babel/runtime/helpers/toConsumableArray';
 import AutosizeInput from 'react-input-autosize';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
+import t from 'classnames';
 
 var defaultOptions = {
   bindI18n: 'languageChanged',
@@ -24469,68 +24469,83 @@ RadioGroup.defaultProps = {
   default: false
 };
 
-var Slider = styled.span.withConfig({
-  displayName: "ToggleButton__Slider",
-  componentId: "t7wo9n-0"
-})(function (_ref) {
-  var disabled = _ref.disabled,
-      theme = _ref.theme;
-  return {
-    position: "absolute",
-    height: theme.space.x3,
-    width: theme.space.x6,
-    top: "0",
-    right: "0",
-    bottom: "0",
-    left: "0",
-    backgroundColor: disabled ? theme.colors.grey : theme.colors.darkGrey,
-    borderRadius: "12px",
-    transition: ".2s ease",
-    cursor: disabled ? undefined : "pointer",
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      height: "22px",
-      width: "22px",
-      left: "1px",
-      top: "1px",
-      borderRadius: theme.radii.circle,
-      boxSizing: "border-box",
-      backgroundColor: disabled ? theme.colors.whiteGrey : theme.colors.white,
-      transition: ".2s ease"
-    }
-  };
-});
-var Switch$1 = styled.div.withConfig({
-  displayName: "ToggleButton__Switch",
-  componentId: "t7wo9n-1"
-})(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    position: "relative",
-    display: "inline-flex",
-    minWidth: theme.space.x6,
-    minHeight: theme.space.x3,
-    input: {
-      opacity: "0",
-      width: "1px",
-      height: "1px"
+var getSwitchBackground = function getSwitchBackground(toggled) {
+  return toggled ? "darkBlue" : "darkGrey";
+};
+
+var animationConfig = {
+  transition: {
+    type: "spring",
+    stiffness: 850,
+    damping: 37,
+    duration: 0.1
+  },
+  scale: 1.08
+};
+
+var Switch$1 = function Switch(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      toggled = _ref.toggled,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React__default.createElement(AnimatedBox, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: toggled ? "flex-end" : "flex-start",
+    height: "24px",
+    width: "48px",
+    bg: disabled ? "grey" : getSwitchBackground(toggled),
+    borderRadius: "20px",
+    padding: "2px",
+    boxShadow: "small",
+    whileHover: "hover",
+    onClick: onClick
+  }, children);
+};
+
+var Slider = function Slider(_ref2) {
+  var disabled = _ref2.disabled,
+      children = _ref2.children;
+  return /*#__PURE__*/React__default.createElement(motion.div, {
+    className: "slider",
+    layout: true,
+    variants: {
+      hover: {
+        boxShadow: disabled ? undefined : Theme.shadows.focus,
+        scale: disabled ? undefined : animationConfig.scale
+      }
+    },
+    transition: animationConfig.transition,
+    whileFocus: {
+      boxShadow: disabled ? undefined : Theme.shadows.focus,
+      scale: disabled ? undefined : animationConfig.scale
+    },
+    style: {
+      height: "20px",
+      width: "20px",
+      borderRadius: "50%",
+      backgroundColor: disabled ? Theme.colors.whiteGrey : Theme.colors.white
     }
-  };
-});
+  }, children);
+};
+
 var ToggleInput = styled.input.withConfig({
   displayName: "ToggleButton__ToggleInput",
-  componentId: "t7wo9n-2"
+  componentId: "t7wo9n-0"
 })(function (_ref3) {
   var _ref4;
 
   var disabled = _ref3.disabled,
       theme = _ref3.theme;
-  return _ref4 = {}, _ref4["&:checked + " + Slider + ":before"] = {
-    transform: "translateX(24px)"
-  }, _ref4["&:checked + " + Slider] = {
+  return _ref4 = {
+    width: "1px",
+    height: "1px",
+    opacity: 0,
+    position: "absolute"
+  }, _ref4["&:checked + .slider}"] = {
     backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue
-  }, _ref4["&:focus + " + Slider + ":before"] = {
+  }, _ref4["&:focus + .slider"] = {
+    transform: disabled ? null : "scale(" + animationConfig.scale + ")",
     boxShadow: disabled ? undefined : theme.shadows.focus
   }, _ref4;
 });
@@ -24551,6 +24566,8 @@ var ToggleButton = /*#__PURE__*/React__default.forwardRef(function (props, ref)
   };
 
   return /*#__PURE__*/React__default.createElement(Switch$1, {
+    disabled: disabled,
+    toggled: toggled,
     onClick: handleClick
   }, /*#__PURE__*/React__default.createElement(ToggleInput, Object.assign({
     ref: inputRef,
@@ -27471,9 +27488,10 @@ Tab.defaultProps = {
 var FocusManager = function FocusManager(_ref) {
   var children = _ref.children,
       _ref$refs = _ref.refs,
-      refs = _ref$refs === void 0 ? undefined : _ref$refs;
+      refs = _ref$refs === void 0 ? undefined : _ref$refs,
+      defaultFocusedIndex = _ref.defaultFocusedIndex;
 
-  var _useState = useState(0),
+  var _useState = useState(defaultFocusedIndex !== null && defaultFocusedIndex !== void 0 ? defaultFocusedIndex : 0),
       focusedIndex = _useState[0],
       setFocusedIndex = _useState[1];
 
@@ -27944,7 +27962,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     return /*#__PURE__*/React__default.createElement(Box, {
       position: "relative"
     }, /*#__PURE__*/React__default.createElement(FocusManager, {
-      refs: this.tabRefs
+      refs: this.tabRefs,
+      defaultFocusedIndex: this.getSelectedIndex()
     }, function (_ref2) {
       var focusedIndex = _ref2.focusedIndex,
           setFocusedIndex = _ref2.setFocusedIndex,
@@ -27993,6 +28012,14 @@ var Switcher = function Switcher(_a) {
     return value === selected;
   };
 
+  var getSelectedIndex = function getSelectedIndex() {
+    return React__default.Children.toArray(rest.children).findIndex(function (child) {
+      var _a, _b;
+
+      return ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.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, {
@@ -28020,7 +28047,8 @@ var Switcher = function Switcher(_a) {
     bg: "whiteGrey",
     borderRadius: "20px"
   }, rest), /*#__PURE__*/React__default.createElement(FocusManager, {
-    refs: optionRefs
+    refs: optionRefs,
+    defaultFocusedIndex: getSelectedIndex()
   }, function (_ref2) {
     var focusedIndex = _ref2.focusedIndex,
         setFocusedIndex = _ref2.setFocusedIndex,
@@ -44940,8 +44968,10 @@ var Nav$1 = styled.nav.withConfig({
 });
 
 var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("div", {
-    key: menuItem.key || menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, /*#__PURE__*/React__default.createElement(MenuTrigger, Object.assign({
     name: menuItem.name,
     "aria-label": menuItem.ariaLabel,
@@ -44950,8 +44980,10 @@ var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject) {
 };
 
 var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("div", {
-    key: menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, /*#__PURE__*/React__default.createElement(MenuLink$1, Object.assign({
     href: menuItem.href,
     to: menuItem.to,
@@ -44960,14 +44992,18 @@ var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
 };
 
 var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
-    key: menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }), menuItem.render());
 };
 
 var renderText$1 = function renderText(menuItem, themeColorObject) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(MenuText$1, Object.assign({
-    key: menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, themeColorObject), menuItem.name);
 };
 
@@ -45203,8 +45239,10 @@ var StyledLi = styled.li.withConfig({
 });
 
 var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorObject, layer) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(StyledLi, {
-    key: menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({
     layer: layer
   }, themeColorObject, {
@@ -45216,8 +45254,10 @@ var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorOb
 };
 
 var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles, Object.assign({
-    key: menuItem.name
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, themeColorObject, {
     layer: layer,
     onClick: linkOnClick
@@ -45225,8 +45265,10 @@ var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject
 };
 
 var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObject, layer) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("li", {
-    key: menuItem.name,
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name,
     style: {
       display: "block"
     }
@@ -45239,8 +45281,10 @@ var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObje
 };
 
 var renderText = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(MenuText, Object.assign({
-    key: menuItem.name,
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name,
     layer: layer
   }, themeColorObject), menuItem.name);
 };

package/dist/src/Toggle/ToggleButton.d.ts

@@ -1,14 +1,11 @@
 import React from "react";
 import { DefaultNDSThemeType } from "../theme.type";
-declare type ToggleInputProps = React.ComponentPropsWithRef<"input"> & {
-    disabled?: boolean;
-    name?: string;
-    theme?: DefaultNDSThemeType;
-};
-declare type ToggleButtonProps = ToggleInputProps & {
+declare type ToggleButtonProps = React.ComponentPropsWithRef<"input"> & {
     defaultToggled?: boolean;
     toggled?: boolean;
     disabled?: boolean;
+    name?: string;
+    theme?: DefaultNDSThemeType;
 };
-declare const ToggleButton: React.SFC<ToggleButtonProps>;
+declare const ToggleButton: React.FC<ToggleButtonProps>;
 export default ToggleButton;

package/dist/src/utils/ts/FocusManager.d.ts

@@ -10,6 +10,7 @@ declare type ChildrenHandlers = {
 };
 declare type FocusManagerProps = {
     refs?: Array<Reference>;
+    defaultFocusedIndex: number | null;
     children: (handlers: ChildrenHandlers) => ReactNode;
 };
 declare const FocusManager: React.FC<FocusManagerProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "6.6.4",
+  "version": "6.7.2",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {