@splunk/react-ui 4.6.0 → 4.9.0

package/Menu.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 111);
+/******/ 	return __webpack_require__(__webpack_require__.s = 116);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -102,33 +102,13 @@ module.exports = require("prop-types");
 /***/ }),
 
 /***/ 11:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
-/**
- * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
- *
- * @param ref - The React callback or object ref. Can be `null` or `undefined`.
- * @param current - The new value of the ref.
- */
-function updateReactRef(ref, current) {
-  if (ref) {
-    if (typeof ref === 'function') {
-      ref(current);
-    } else {
-      // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
-      // the intention here is to signal "we will take care of setting 'current', not you".
-      ref.current = current; // eslint-disable-line no-param-reassign
-    }
-  }
-}
-
+/***/ (function(module, exports) {
 
+module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 111:
+/***/ 116:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -151,14 +131,14 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/omit"
-var omit_ = __webpack_require__(42);
+var omit_ = __webpack_require__(43);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
 var Popover_ = __webpack_require__(16);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(25);
+var focus_ = __webpack_require__(26);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
 var keyboard_ = __webpack_require__(9);
@@ -233,7 +213,7 @@ Divider.filterConsecutive = true;
 Divider.filterLast = true;
 /* harmony default export */ var Menu_Divider = (Divider);
 // EXTERNAL MODULE: external "@splunk/react-ui/Heading"
-var Heading_ = __webpack_require__(66);
+var Heading_ = __webpack_require__(55);
 var Heading_default = /*#__PURE__*/__webpack_require__.n(Heading_);
 
 // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
@@ -337,10 +317,10 @@ Heading.filterLast = true;
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: ./src/icons/Check.tsx
-var Check = __webpack_require__(50);
+var Check = __webpack_require__(53);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/TriangleRightSmall"
-var TriangleRightSmall_ = __webpack_require__(91);
+var TriangleRightSmall_ = __webpack_require__(98);
 var TriangleRightSmall_default = /*#__PURE__*/__webpack_require__.n(TriangleRightSmall_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -378,11 +358,11 @@ function CaretRight(props) {
 var ChevronRight = __webpack_require__(27);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(12);
+var Clickable_ = __webpack_require__(11);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Switch"
-var Switch_ = __webpack_require__(67);
+var Switch_ = __webpack_require__(71);
 var Switch_default = /*#__PURE__*/__webpack_require__.n(Switch_);
 
 // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
@@ -424,10 +404,7 @@ var StyledItemIcon = external_styled_components_default.a.span.withConfig({
   prisma: 'initial',
   enterprise: 'middle'
 }), Object(themes_["pick"])({
-  prisma: {
-    comfortable: Object(external_styled_components_["css"])(["color:", ";min-width:24px;min-height:24px;"], themes_["variables"].contentColorMuted),
-    compact: Object(external_styled_components_["css"])(["color:", ";min-width:20px;min-height:20px;"], themes_["variables"].contentColorMuted)
-  },
+  prisma: Object(external_styled_components_["css"])(["color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;"], themes_["variables"].contentColorMuted),
   enterprise: Object(external_styled_components_["css"])(["transform:translateY(-1px);"])
 }));
 var StyledClickable = external_styled_components_default()(Clickable_default.a).withConfig({
@@ -563,7 +540,7 @@ var StyledSubmenu = external_styled_components_default.a.span.withConfig({
 }));
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(11);
+var updateReactRef = __webpack_require__(12);
 
 // CONCATENATED MODULE: ./src/Menu/Item.tsx
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -833,7 +810,6 @@ var Item_Item = /*#__PURE__*/function (_Component) {
         interactive: false,
         selected: selected,
         selectedLabel: "Selected",
-        unselectedLabel: "",
         value: "menu-item"
       }), hasSubmenu && /*#__PURE__*/external_react_default.a.createElement(StyledSubmenu, null, isPrisma ? /*#__PURE__*/external_react_default.a.createElement(CaretRight, null) : /*#__PURE__*/external_react_default.a.createElement(ChevronRight["a" /* default */], null)), descriptionRight && /*#__PURE__*/external_react_default.a.createElement(StyledItemDescriptionRight, {
         "data-test": "description"
@@ -859,7 +835,7 @@ var ItemWithTheme = Object(themes_["withSplunkTheme"])(Item_Item);
 ItemWithTheme.propTypes = Item_Item.propTypes;
 /* harmony default export */ var Menu_Item = (ItemWithTheme);
 // EXTERNAL MODULE: external "@splunk/react-ui/Scroll"
-var Scroll_ = __webpack_require__(63);
+var Scroll_ = __webpack_require__(68);
 var Scroll_default = /*#__PURE__*/__webpack_require__.n(Scroll_);
 
 // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
@@ -873,11 +849,13 @@ var adjacentSiblingStyles = Object(external_styled_components_["css"])(["border-
 var MenuStyles_Styled = external_styled_components_default.a.div.withConfig({
   displayName: "MenuStyles__Styled",
   componentId: "sc-1olffp9-0"
-})(["", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;", " & + &{", "}"], themes_["mixins"].reset('block'), Object(themes_["pick"])({
+})(["", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;", " &:focus{outline:0;box-shadow:", ";", "}& + &{", "}"], themes_["mixins"].reset('block'), Object(themes_["pick"])({
   enterprise: themes_["variables"].backgroundColor,
   prisma: themes_["variables"].backgroundColorPopup
 }), themes_["variables"].borderRadius, Object(themes_["pick"])({
   prisma: Object(external_styled_components_["css"])(["padding:8px 0;"])
+}), themes_["variables"].focusShadowInset, Object(themes_["pick"])({
+  prisma: Object(external_styled_components_["css"])(["background:", ";"], themes_["variables"].interactiveColorOverlayHover)
 }), adjacentSiblingStyles);
 var StyledScroll = external_styled_components_default()(MenuStyles_Styled.withComponent(Scroll_default.a)).withConfig({
   displayName: "MenuStyles__StyledScroll",
@@ -888,6 +866,9 @@ MenuStyles_Styled,
 /* sc-sel */
 MenuStyles_Styled, adjacentSiblingStyles);
 
+// EXTERNAL MODULE: ./src/utils/navigateList.ts
+var navigateList = __webpack_require__(39);
+
 // CONCATENATED MODULE: ./src/Menu/Menu.tsx
 function Menu_extends() { Menu_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Menu_extends.apply(this, arguments); }
 
@@ -919,6 +900,7 @@ function Menu_objectWithoutPropertiesLoose(source, excluded) { if (source == nul
 
 
 
+
 var Menu_propTypes = {
   children: external_prop_types_default.a.node,
 
@@ -963,6 +945,10 @@ function Menu(_ref) {
 
   var itemRefs = [];
   var itemKeyCounter = 0;
+  var firstEnabledItemKey;
+  var focusedItemKeyIsDisabled = false;
+  var hasSelectedItems = false;
+  var hasSelectedEnabledItems = false;
 
   var handleKeyDown = function handleKeyDown(e) {
     // SUI-2734: keeping this active even if controlledExternally is set
@@ -973,14 +959,13 @@ function Menu(_ref) {
     var itemToFocusRef; // the "retainFocus" checks here mimic the prior tab key functionality
 
     if (key === 'down' || retainFocus && Object(focus_["isTabKey"])(e)) {
-      itemToFocusRef = itemRefs[focusedItemKey + 1] || itemRefs[0];
+      itemToFocusRef = Object(navigateList["a" /* getNextListItem */])(itemRefs, focusedItemKey, focusedItemKey + 1);
     } else if (key === 'up' || retainFocus && Object(focus_["isTabKey"])(e) && e.shiftKey) {
-      itemToFocusRef = itemRefs[focusedItemKey - 1] || itemRefs[itemRefs.length - 1];
+      itemToFocusRef = Object(navigateList["b" /* getPrevListItem */])(itemRefs, focusedItemKey, focusedItemKey - 1);
     } else if (key === 'home') {
-      // eslint-disable-next-line prefer-destructuring
-      itemToFocusRef = itemRefs[0];
+      itemToFocusRef = Object(navigateList["a" /* getNextListItem */])(itemRefs, focusedItemKey, 0);
     } else if (key === 'end') {
-      itemToFocusRef = itemRefs[itemRefs.length - 1];
+      itemToFocusRef = Object(navigateList["b" /* getPrevListItem */])(itemRefs, focusedItemKey, itemRefs.length - 1);
     }
 
     if (itemToFocusRef != null) {
@@ -1029,6 +1014,22 @@ function Menu(_ref) {
         }
       };
 
+      if (firstEnabledItemKey == null && (!('disabled' in item.props) || !item.props.disabled)) {
+        firstEnabledItemKey = itemKeyCounter;
+      }
+
+      if (focusedItemKey === itemKeyCounter && 'disabled' in item.props && item.props.disabled) {
+        focusedItemKeyIsDisabled = true;
+      }
+
+      if ('selected' in item.props && item.props.selected) {
+        hasSelectedItems = true;
+
+        if ('disabled' in item.props && !item.props.disabled) {
+          hasSelectedEnabledItems = true;
+        }
+      }
+
       var tabIndex = !controlledExternally && focusedItemKey === itemKeyCounter ? undefined : -1;
       acc.push( /*#__PURE__*/external_react_default.a.cloneElement(item, {
         itemKey: itemKeyCounter,
@@ -1047,17 +1048,22 @@ function Menu(_ref) {
     acc.push(item);
     return acc;
   }, []);
-  return stopScrollPropagation ? /*#__PURE__*/external_react_default.a.createElement(StyledScroll, Menu_extends({
-    "data-test": "menu",
-    elementRef: elementRef,
+
+  if (firstEnabledItemKey !== focusedItemKey && (!hasSelectedItems || hasSelectedEnabledItems) && focusedItemKeyIsDisabled && firstEnabledItemKey != null) {
+    setFocusedItemKey(firstEnabledItemKey);
+  }
+
+  var sharedProps = {
+    'data-test': 'menu',
     onKeyDown: handleKeyDown,
     role: role,
+    tabIndex: firstEnabledItemKey == null && !controlledExternally ? 0 : undefined
+  };
+  return stopScrollPropagation ? /*#__PURE__*/external_react_default.a.createElement(StyledScroll, Menu_extends({}, sharedProps, {
+    elementRef: elementRef,
     stopScrollPropagation: true
-  }, omit_default()(otherProps, 'tagName')), childrenCleaned) : /*#__PURE__*/external_react_default.a.createElement(MenuStyles_Styled, Menu_extends({
-    "data-test": "menu",
-    onKeyDown: handleKeyDown,
-    ref: elementRef,
-    role: role
+  }, omit_default()(otherProps, 'tagName')), childrenCleaned) : /*#__PURE__*/external_react_default.a.createElement(MenuStyles_Styled, Menu_extends({}, sharedProps, {
+    ref: elementRef
   }, otherProps), childrenCleaned);
 }
 
@@ -1076,9 +1082,29 @@ Menu.Heading = Menu_Heading;
 /***/ }),
 
 /***/ 12:
-/***/ (function(module, exports) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
+/**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+function updateReactRef(ref, current) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(current);
+    } else {
+      // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+      // the intention here is to signal "we will take care of setting 'current', not you".
+      ref.current = current; // eslint-disable-line no-param-reassign
+    }
+  }
+}
+
 
-module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
@@ -1096,7 +1122,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/focus");
@@ -1172,6 +1198,45 @@ module.exports = require("@splunk/react-icons/ChevronRight");
 
 module.exports = require("@splunk/themes/useSplunkTheme");
 
+/***/ }),
+
+/***/ 39:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getNextListItem; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getPrevListItem; });
+// A utility for keyboard navigation of lists
+function getNextListItem(refs, currentIndex, nextIndex) {
+  for (var i = 0; i < refs.length; i += 1) {
+    var _refs$pointer$current;
+
+    var pointer = (i + nextIndex) % refs.length;
+
+    if (((_refs$pointer$current = refs[pointer].current) === null || _refs$pointer$current === void 0 ? void 0 : _refs$pointer$current.props.disabled) !== true) {
+      return refs[pointer];
+    }
+  }
+
+  return refs[currentIndex];
+}
+
+function getPrevListItem(refs, currentIndex, prevIndex) {
+  for (var i = refs.length; i > 0; i -= 1) {
+    var _refs$pointer$current2;
+
+    var pointer = (i + prevIndex) % refs.length;
+
+    if (((_refs$pointer$current2 = refs[pointer].current) === null || _refs$pointer$current2 === void 0 ? void 0 : _refs$pointer$current2.props.disabled) !== true) {
+      return refs[pointer];
+    }
+  }
+
+  return refs[currentIndex];
+}
+
+
+
 /***/ }),
 
 /***/ 4:
@@ -1181,28 +1246,28 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 42:
+/***/ 43:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 46:
+/***/ 47:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Check");
 
 /***/ }),
 
-/***/ 50:
+/***/ 53:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Check; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(46);
+/* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(47);
 /* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -1245,6 +1310,13 @@ function Check(props) {
 
 /***/ }),
 
+/***/ 55:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Heading");
+
+/***/ }),
+
 /***/ 6:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1270,27 +1342,13 @@ function SVG(props) {
 
 /***/ }),
 
-/***/ 63:
+/***/ 68:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Scroll");
 
 /***/ }),
 
-/***/ 66:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Heading");
-
-/***/ }),
-
-/***/ 67:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Switch");
-
-/***/ }),
-
 /***/ 7:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1409,6 +1467,13 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
+/***/ 71:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Switch");
+
+/***/ }),
+
 /***/ 9:
 /***/ (function(module, exports) {
 
@@ -1416,7 +1481,7 @@ module.exports = require("@splunk/ui-utils/keyboard");
 
 /***/ }),
 
-/***/ 91:
+/***/ 98:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/TriangleRightSmall");