@sproutsocial/racine 12.19.0 → 12.21.0

package/lib/Menu/descendants.js

@@ -1,13 +1,11 @@
 var _excluded = ["context", "element"],
-    _excluded2 = ["element"];
-
+  _excluded2 = ["element"];
 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); }
 /* eslint-disable */
-import * as React from "react";
-import { createContext, useState, useLayoutEffect, useEffect, useContext, useCallback, useMemo, useRef } from "react";
+import * as React from 'react';
+import { createContext, useState, useLayoutEffect, useEffect, useContext, useCallback, useMemo, useRef } from 'react';
+
 /**
  * These hooks and utilities are largely copied from the @reach-ui/descendents package. They consider the package
  * pre-release and unstable, so instead of importing it, we copied it here and changed the types from TypeScript to
@@ -15,13 +13,12 @@ import { createContext, useState, useLayoutEffect, useEffect, useContext, useCal
  */
 
 var noop = function noop() {};
+
 /**
  * Returns the previous value of a reference after a component update.
  *
  * @param value
  */
-
-
 export function usePrevious(value) {
   var ref = useRef(null);
   useEffect(function () {
@@ -29,6 +26,7 @@ export 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
@@ -37,18 +35,16 @@ export function usePrevious(value) {
  * @param theirHandler User-supplied event handler
  * @param ourHandler Library-supplied event handler
  */
-
 export function wrapEvent(theirHandler, ourHandler) {
   return function (event) {
     theirHandler && theirHandler(event);
-
     if (!event.defaultPrevented) {
       return ourHandler(event);
     }
   };
 }
 export 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() ? useLayoutEffect : useEffect;
 export function createNamedContext(name, defaultValue) {
@@ -60,13 +56,13 @@ export 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.
@@ -90,21 +86,18 @@ export 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.
  */
-
 export function useDescendant(_ref, indexProp) {
   var context = _ref.context,
-      element = _ref.element,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    element = _ref.element,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(),
-      forceUpdate = _useState[1];
-
+    forceUpdate = _useState[1];
   var _useContext = 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({
@@ -123,21 +116,19 @@ export function useDescendants() {
 }
 export 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 = 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,
@@ -165,33 +156,33 @@ export 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
@@ -200,13 +191,17 @@ export 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
@@ -224,118 +219,102 @@ export function DescendantProvider(_ref2) {
 }
 export function useDescendantKeyDown(context, options) {
   var _useContext2 = 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/lib/Menu/hooks.js

@@ -1,7 +1,8 @@
-import { createContext, useContext, useEffect } from "react";
-import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
-import { MENU_ROLES } from "./constants";
-import { createDescendantContext, useDescendantKeyDown, usePrevious, wrapEvent } from "./descendants";
+
+import { createContext, useContext, useEffect } from 'react';
+import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
+import { MENU_ROLES } from './constants';
+import { createDescendantContext, useDescendantKeyDown, usePrevious, wrapEvent } from './descendants';
 export var MenuContext = /*#__PURE__*/createContext({
   role: MENU_ROLES.MENU,
   menuRef: {
@@ -12,7 +13,7 @@ export var MenuContext = /*#__PURE__*/createContext({
   onChange: undefined,
   state: {
     selectionIndex: 0,
-    filterQuery: "",
+    filterQuery: '',
     filteredItems: null,
     isFilterInputFocused: false
   },
@@ -25,51 +26,45 @@ export var MenuButtonContext = /*#__PURE__*/createContext({
   closeOnItemClick: undefined,
   closePopout: undefined
 });
-export var MenuDescendantContext = createDescendantContext("MenuDescendantContext");
+export var MenuDescendantContext = 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.
  */
-
 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;
   });
 }
-
 export function useMenuKeyDown() {
   var _useContext = 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 = useContext(MenuButtonContext),
-      closePopout = _useContext2.closePopout,
-      closeOnItemClick = _useContext2.closeOnItemClick;
-
+    closePopout = _useContext2.closePopout,
+    closeOnItemClick = _useContext2.closeOnItemClick;
   var _useContext3 = useContext(MenuDescendantContext),
-      items = _useContext3.descendants;
-
+    items = _useContext3.descendants;
   var shouldClosePopout = closeOnItemClick && !multiselect;
   var prevMenuItemsLength = usePrevious(items.length);
   var prevSelected = usePrevious(items[selectionIndex]);
@@ -82,7 +77,8 @@ export 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
     //
@@ -98,7 +94,6 @@ export function useMenuKeyDown() {
   }, [setState, items, prevMenuItemsLength, prevSelected, prevSelectionIndex, selectionIndex]);
   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,
@@ -118,19 +113,15 @@ export function useMenuKeyDown() {
     activeDescendent: items[selectionIndex],
     handleKeyDown: 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];
@@ -138,16 +129,14 @@ export function useMenuKeyDown() {
             onChange && selected.value && onChange(selected.value);
             shouldClosePopout && closePopout && closePopout();
           }
-
           return;
-
         default:
           return;
       }
     }, 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/lib/Menu/index.flow.js

@@ -1,5 +1,6 @@
-import * as React from "react";
-import Box from "../Box";
-import Button from "../Button";
-import Popout from "../Popout";
-import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
+
+import * as React from 'react';
+import Box from '../Box';
+import Button from '../Button';
+import Popout from '../Popout';
+import { MENU_ITEM_ROLES, MENU_ROLES } from './constants';