@sproutsocial/racine 12.20.0 → 12.21.0

package/commonjs/Menu/descendants.js

@@ -10,28 +10,20 @@ exports.useDescendantKeyDown = useDescendantKeyDown;
 exports.useDescendants = useDescendants;
 exports.usePrevious = usePrevious;
 exports.wrapEvent = wrapEvent;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _excluded = ["context", "element"],
-    _excluded2 = ["element"];
-
+  _excluded2 = ["element"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _extends() { _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 _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _extends.apply(this, arguments); }
 var noop = function noop() {};
+
 /**
  * Returns the previous value of a reference after a component update.
  *
  * @param value
  */
-
-
 function usePrevious(value) {
   var ref = (0, React.useRef)(null);
   (0, React.useEffect)(function () {
@@ -39,6 +31,7 @@ function usePrevious(value) {
   }, [value]);
   return ref.current;
 }
+
 /**
  * Wraps a lib-defined event handler and a user-defined event handler, returning
  * a single handler that allows a user to prevent lib-defined handlers from
@@ -47,41 +40,34 @@ function usePrevious(value) {
  * @param theirHandler User-supplied event handler
  * @param ourHandler Library-supplied event handler
  */
-
-
 function wrapEvent(theirHandler, ourHandler) {
   return function (event) {
     theirHandler && theirHandler(event);
-
     if (!event.defaultPrevented) {
       return ourHandler(event);
     }
   };
 }
-
 function canUseDOM() {
-  return typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+  return typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 }
-
 var useIsomorphicLayoutEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;
-
 function createNamedContext(name, defaultValue) {
   var Ctx = /*#__PURE__*/(0, React.createContext)(defaultValue);
   Ctx.displayName = name;
   return Ctx;
 }
-
 function createDescendantContext(name, initialValue) {
   if (initialValue === void 0) {
     initialValue = {};
   }
-
   return createNamedContext(name, _extends({
     descendants: [],
     registerDescendant: noop,
     unregisterDescendant: noop
   }, initialValue));
 }
+
 /**
  * This hook registers our descendant by passing it into an array. We can then
  * search that array by to find its index when registering it in the component.
@@ -105,22 +91,18 @@ function createDescendantContext(name, initialValue) {
  * composed descendants for keyboard navigation. However, in the few cases where
  * this is not the case, we can require an explicit index from the app.
  */
-
-
 function useDescendant(_ref, indexProp) {
   var context = _ref.context,
-      element = _ref.element,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    element = _ref.element,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = (0, React.useState)(),
-      forceUpdate = _useState[1];
-
+    forceUpdate = _useState[1];
   var _useContext = (0, React.useContext)(context),
-      registerDescendant = _useContext.registerDescendant,
-      unregisterDescendant = _useContext.unregisterDescendant,
-      descendants = _useContext.descendants; // Prevent any flashing
-
+    registerDescendant = _useContext.registerDescendant,
+    unregisterDescendant = _useContext.unregisterDescendant,
+    descendants = _useContext.descendants;
 
+  // Prevent any flashing
   useIsomorphicLayoutEffect(function () {
     if (!element) forceUpdate({});
     registerDescendant(_extends({
@@ -134,28 +116,24 @@ function useDescendant(_ref, indexProp) {
     return item.element === element;
   });
 }
-
 function useDescendants() {
   return (0, React.useState)([]);
 }
-
 function DescendantProvider(_ref2) {
   var Ctx = _ref2.context,
-      children = _ref2.children,
-      items = _ref2.items,
-      set = _ref2.set;
+    children = _ref2.children,
+    items = _ref2.items,
+    set = _ref2.set;
   var registerDescendant = (0, React.useCallback)(function (_ref3) {
     var element = _ref3.element,
-        rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
-
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
     if (!element) {
       return;
     }
-
     set(function (items) {
       var newItem;
-      var newItems; // If there are no items, register at index 0 and bail.
-
+      var newItems;
+      // If there are no items, register at index 0 and bail.
       if (items.length === 0) {
         newItem = _extends({
           element: element,
@@ -183,33 +161,33 @@ function DescendantProvider(_ref2) {
         var index = items.findIndex(function (item) {
           if (!item.element || !element) {
             return false;
-          } // Does this element's DOM node appear before another item in the
+          }
+          // Does this element's DOM node appear before another item in the
           // array in our DOM tree? If so, return true to grab the index at
           // this point in the array so we know where to insert the new
           // element.
-
-
           return Boolean(item.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING);
         });
         newItem = _extends({
           element: element,
           index: index
-        }, rest); // If an index is not found we will push the element to the end.
+        }, rest);
 
+        // If an index is not found we will push the element to the end.
         if (index === -1) {
           newItems = [].concat(items, [newItem]);
         } else {
           newItems = [].concat(items.slice(0, index), [newItem], items.slice(index));
         }
       }
-
       return newItems.map(function (item, index) {
         return _extends({}, item, {
           index: index
         });
       });
     });
-  }, // set is a state setter initialized by the useDescendants hook.
+  },
+  // set is a state setter initialized by the useDescendants hook.
   // We can safely ignore the lint warning here because it will not change
   // between renders.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -218,13 +196,17 @@ function DescendantProvider(_ref2) {
     if (!element) {
       return;
     }
-
     set(function (items) {
       return items.filter(function (item) {
         return element !== item.element;
+      }).map(function (item, index) {
+        return _extends({}, item, {
+          index: index
+        });
       });
     });
-  }, // set is a state setter initialized by the useDescendants hook.
+  },
+  // set is a state setter initialized by the useDescendants hook.
   // We can safely ignore the lint warning here because it will not change
   // between renders.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -240,121 +222,104 @@ function DescendantProvider(_ref2) {
     value: value
   }, children);
 }
-
 function useDescendantKeyDown(context, options) {
   var _useContext2 = (0, React.useContext)(context),
-      descendants = _useContext2.descendants;
-
+    descendants = _useContext2.descendants;
   var callback = options.callback,
-      currentIndex = options.currentIndex,
-      filter = options.filter,
-      _options$key = options.key,
-      key = _options$key === void 0 ? "index" : _options$key,
-      _options$orientation = options.orientation,
-      orientation = _options$orientation === void 0 ? "vertical" : _options$orientation,
-      _options$rotate = options.rotate,
-      rotate = _options$rotate === void 0 ? true : _options$rotate,
-      _options$rtl = options.rtl,
-      rtl = _options$rtl === void 0 ? false : _options$rtl;
+    currentIndex = options.currentIndex,
+    filter = options.filter,
+    _options$key = options.key,
+    key = _options$key === void 0 ? 'index' : _options$key,
+    _options$orientation = options.orientation,
+    orientation = _options$orientation === void 0 ? 'vertical' : _options$orientation,
+    _options$rotate = options.rotate,
+    rotate = _options$rotate === void 0 ? true : _options$rotate,
+    _options$rtl = options.rtl,
+    rtl = _options$rtl === void 0 ? false : _options$rtl;
   var index = currentIndex ? currentIndex : -1;
   return function handleKeyDown(event) {
-    if (!["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) {
+    if (!['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) {
       return;
-    } // If we use a filter function, we need to re-index our descendants array
-    // so that filtered descendent elements aren't selected.
+    }
 
+    // If we use a filter function, we need to re-index our descendants array
+    // so that filtered descendent elements aren't selected.
+    var selectableDescendants = filter ? descendants.filter(filter) : descendants;
 
-    var selectableDescendants = filter ? descendants.filter(filter) : descendants; // Current index should map to the updated array vs. the original
+    // Current index should map to the updated array vs. the original
     // descendants array.
-
     if (filter) {
       index = selectableDescendants.findIndex(function (descendant) {
         return descendant.index === currentIndex;
       });
-    } // We need some options for any of this to work!
-
+    }
 
+    // We need some options for any of this to work!
     if (!selectableDescendants.length) {
       return;
     }
-
     function getNextOption() {
       var atBottom = index === selectableDescendants.length - 1;
       return atBottom ? rotate ? getFirstOption() : selectableDescendants[index] : selectableDescendants[(index + 1) % selectableDescendants.length];
     }
-
     function getPreviousOption() {
       var atTop = index === 0;
       return atTop ? rotate ? getLastOption() : selectableDescendants[index] : selectableDescendants[(index - 1 + selectableDescendants.length) % selectableDescendants.length];
     }
-
     function getFirstOption() {
       return selectableDescendants[0];
     }
-
     function getLastOption() {
       return selectableDescendants[selectableDescendants.length - 1];
     }
-
     switch (event.key) {
-      case "ArrowDown":
-        if (orientation === "vertical" || orientation === "both") {
+      case 'ArrowDown':
+        if (orientation === 'vertical' || orientation === 'both') {
           event.preventDefault();
           var next = getNextOption();
-          callback(key === "option" ? next : next[key]);
+          callback(key === 'option' ? next : next[key]);
         }
-
         break;
-
-      case "ArrowUp":
-        if (orientation === "vertical" || orientation === "both") {
+      case 'ArrowUp':
+        if (orientation === 'vertical' || orientation === 'both') {
           event.preventDefault();
           var prev = getPreviousOption();
-          callback(key === "option" ? prev : prev[key]);
+          callback(key === 'option' ? prev : prev[key]);
         }
-
         break;
-
-      case "ArrowLeft":
-        if (orientation === "horizontal" || orientation === "both") {
+      case 'ArrowLeft':
+        if (orientation === 'horizontal' || orientation === 'both') {
           event.preventDefault();
           var nextOrPrev = (rtl ? getNextOption : getPreviousOption)();
-          callback(key === "option" ? nextOrPrev : nextOrPrev[key]);
+          callback(key === 'option' ? nextOrPrev : nextOrPrev[key]);
         }
-
         break;
-
-      case "ArrowRight":
-        if (orientation === "horizontal" || orientation === "both") {
+      case 'ArrowRight':
+        if (orientation === 'horizontal' || orientation === 'both') {
           event.preventDefault();
           var prevOrNext = (rtl ? getPreviousOption : getNextOption)();
-          callback(key === "option" ? prevOrNext : prevOrNext[key]);
+          callback(key === 'option' ? prevOrNext : prevOrNext[key]);
         }
-
         break;
-
-      case "PageUp":
+      case 'PageUp':
         event.preventDefault();
         var prevOrFirst = (event.ctrlKey ? getPreviousOption : getFirstOption)();
-        callback(key === "option" ? prevOrFirst : prevOrFirst[key]);
+        callback(key === 'option' ? prevOrFirst : prevOrFirst[key]);
         break;
-
-      case "Home":
+      case 'Home':
         event.preventDefault();
         var first = getFirstOption();
-        callback(key === "option" ? first : first[key]);
+        callback(key === 'option' ? first : first[key]);
         break;
-
-      case "PageDown":
+      case 'PageDown':
         event.preventDefault();
         var nextOrLast = (event.ctrlKey ? getNextOption : getLastOption)();
-        callback(key === "option" ? nextOrLast : nextOrLast[key]);
+        callback(key === 'option' ? nextOrLast : nextOrLast[key]);
         break;
-
-      case "End":
+      case 'End':
         event.preventDefault();
         var last = getLastOption();
-        callback(key === "option" ? last : last[key]);
+        callback(key === 'option' ? last : last[key]);
         break;
     }
   };

package/commonjs/Menu/hooks.js

@@ -3,15 +3,10 @@
 exports.__esModule = true;
 exports.MenuDescendantContext = exports.MenuContext = exports.MenuButtonContext = void 0;
 exports.useMenuKeyDown = useMenuKeyDown;
-
 var _react = require("react");
-
 var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
-
 var _constants = require("./constants");
-
 var _descendants = require("./descendants");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var MenuContext = /*#__PURE__*/(0, _react.createContext)({
@@ -24,7 +19,7 @@ var MenuContext = /*#__PURE__*/(0, _react.createContext)({
   onChange: undefined,
   state: {
     selectionIndex: 0,
-    filterQuery: "",
+    filterQuery: '',
     filteredItems: null,
     isFilterInputFocused: false
   },
@@ -39,53 +34,46 @@ var MenuButtonContext = /*#__PURE__*/(0, _react.createContext)({
   closePopout: undefined
 });
 exports.MenuButtonContext = MenuButtonContext;
-var MenuDescendantContext = (0, _descendants.createDescendantContext)("MenuDescendantContext");
+var MenuDescendantContext = (0, _descendants.createDescendantContext)('MenuDescendantContext');
+
 /**
  * When a user's typed input matches the string displayed in a menu item, it is
  * expected that the matching menu item is selected. This is our matching
  * function.
  */
-
 exports.MenuDescendantContext = MenuDescendantContext;
-
 function filterItemsFromTypeahead(items, string) {
   if (string === void 0) {
-    string = "";
+    string = '';
   }
-
   if (!string) {
     return null;
   }
-
   return items.filter(function (_ref) {
     var value = _ref.value,
-        label = _ref.label;
+      label = _ref.label;
     return (value == null ? void 0 : value.toLowerCase().includes(string.toLocaleLowerCase())) || (label == null ? void 0 : label.toLowerCase().includes(string.toLocaleLowerCase()));
   }).map(function (_ref2) {
     var index = _ref2.index;
     return index;
   });
 }
-
 function useMenuKeyDown() {
   var _useContext = (0, _react.useContext)(MenuContext),
-      onChange = _useContext.onChange,
-      selectCallbacks = _useContext.selectCallbacks,
-      setState = _useContext.setState,
-      multiselect = _useContext.multiselect,
-      _useContext$state = _useContext.state,
-      filterQuery = _useContext$state.filterQuery,
-      selectionIndex = _useContext$state.selectionIndex,
-      filteredItems = _useContext$state.filteredItems,
-      isFilterInputFocused = _useContext$state.isFilterInputFocused;
-
+    onChange = _useContext.onChange,
+    selectCallbacks = _useContext.selectCallbacks,
+    setState = _useContext.setState,
+    multiselect = _useContext.multiselect,
+    _useContext$state = _useContext.state,
+    filterQuery = _useContext$state.filterQuery,
+    selectionIndex = _useContext$state.selectionIndex,
+    filteredItems = _useContext$state.filteredItems,
+    isFilterInputFocused = _useContext$state.isFilterInputFocused;
   var _useContext2 = (0, _react.useContext)(MenuButtonContext),
-      closePopout = _useContext2.closePopout,
-      closeOnItemClick = _useContext2.closeOnItemClick;
-
+    closePopout = _useContext2.closePopout,
+    closeOnItemClick = _useContext2.closeOnItemClick;
   var _useContext3 = (0, _react.useContext)(MenuDescendantContext),
-      items = _useContext3.descendants;
-
+    items = _useContext3.descendants;
   var shouldClosePopout = closeOnItemClick && !multiselect;
   var prevMenuItemsLength = (0, _descendants.usePrevious)(items.length);
   var prevSelected = (0, _descendants.usePrevious)(items[selectionIndex]);
@@ -98,7 +86,8 @@ function useMenuKeyDown() {
       setState({
         selectionIndex: items.length - 1
       });
-    } else if ( // Checks if
+    } else if (
+    // Checks if
     //  - menu length has changed
     //  - selection index has not changed BUT selected item has changed
     //
@@ -114,7 +103,6 @@ function useMenuKeyDown() {
   }, [setState, items, prevMenuItemsLength, prevSelected, prevSelectionIndex, selectionIndex]);
   (0, _react.useEffect)(function () {
     var newFilteredItems = filterItemsFromTypeahead(items, filterQuery);
-
     if (filterQuery && newFilteredItems && (filteredItems == null ? void 0 : filteredItems.length) !== (newFilteredItems == null ? void 0 : newFilteredItems.length)) {
       setState({
         filteredItems: newFilteredItems,
@@ -134,19 +122,15 @@ function useMenuKeyDown() {
     activeDescendent: items[selectionIndex],
     handleKeyDown: (0, _descendants.wrapEvent)(function (event) {
       var key = event.key;
-
       switch (key) {
-        case " ":
+        case ' ':
           if (isFilterInputFocused) {
             return;
           }
-
         // falls through
         // eslint-disable-next-line no-fallthrough
-
-        case "Enter":
+        case 'Enter':
           var selected = items[selectionIndex];
-
           if (selected) {
             event.preventDefault();
             var func = selectCallbacks.current[selected.index];
@@ -154,16 +138,14 @@ function useMenuKeyDown() {
             onChange && selected.value && onChange(selected.value);
             shouldClosePopout && closePopout && closePopout();
           }
-
           return;
-
         default:
           return;
       }
     }, (0, _descendants.useDescendantKeyDown)(MenuDescendantContext, {
       currentIndex: index,
-      orientation: "vertical",
-      key: "option",
+      orientation: 'vertical',
+      key: 'option',
       rotate: true,
       filter: function filter(option) {
         return !option.disabled && (!filteredItems || filteredItems.includes(option.index));

package/commonjs/Menu/index.flow.js

@@ -1,17 +1,10 @@
 "use strict";
 
 var React = _interopRequireWildcard(require("react"));
-
 var _Box = _interopRequireDefault(require("../Box"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _Popout = _interopRequireDefault(require("../Popout"));
-
 var _constants = require("./constants");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }