@procore/core-react 11.22.1 → 11.23.0

package/dist/MenuImperative/MenuImperative.js

@@ -1,30 +1,31 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["circular", "onDragEnd", "onScrollBottom", "onSelect", "role", "onChangeActiveDescendant", "onKeyboardNavigation", "id", "multiple"],
+  _excluded2 = ["clickable", "item", "id", "children"],
+  _excluded3 = ["hasCheckbox", "children", "selected", "provided"],
+  _excluded4 = ["as", "children", "item", "onClick", "selected", "suggested", "disabled", "id", "role", "restoreFocus"],
+  _excluded5 = ["selected", "disabled", "error", "indeterminate", "children", "role"],
+  _excluded6 = ["className", "i18nScope", "placeholder", "onChange"],
+  _excluded7 = ["padding"];
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+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); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Grip } from '@procore/core-icons/dist';
 import { useLabel } from '@react-aria/label';
 import { useId } from '@react-aria/utils';
 import React, { isValidElement, useEffect, useMemo, useState } from 'react';
-import { DragDropContext, Draggable, Droppable as DndDroppable, useMouseSensor, useTouchSensor, } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, Droppable as DndDroppable, useMouseSensor, useTouchSensor } from 'react-beautiful-dnd';
 import { Checkbox, FakeCheckbox } from '../Checkbox/Checkbox';
 import { Typeahead } from '../Typeahead/Typeahead';
 import { useI18nContext } from '../_hooks/I18n';
@@ -32,50 +33,43 @@ import { useZIndexContext } from '../_hooks/ZIndex';
 import { colors } from '../_styles/colors';
 import { addSubcomponents } from '../_utils/addSubcomponents';
 import { mergeRefs } from '../_utils/mergeRefs';
-import { StyledDroppable, StyledFooter, StyledGrip, StyledGroup, StyledHeader, StyledItem, StyledMenu, StyledOptions, StyledSearch, StyledWrapper, } from './MenuImperative.styles';
+import { StyledDroppable, StyledFooter, StyledGrip, StyledGroup, StyledHeader, StyledItem, StyledMenu, StyledOptions, StyledSearch, StyledWrapper } from './MenuImperative.styles';
 import { createSensors } from './sensors';
 var onScrollBottomThreshold = 8;
 var NO_ANNOUCEMENT = '';
-function noop() { }
+function noop() {}
 function isScrolledToBottom(e) {
-    return (e.currentTarget instanceof HTMLElement &&
-        e.currentTarget.scrollTop >=
-            e.currentTarget.scrollHeight -
-                e.currentTarget.clientHeight -
-                onScrollBottomThreshold);
+  return e.currentTarget instanceof HTMLElement && e.currentTarget.scrollTop >= e.currentTarget.scrollHeight - e.currentTarget.clientHeight - onScrollBottomThreshold;
 }
+
 // TODO use the shared mergeRefs utility
 export function useMergeRef(externalRef) {
-    var ref = React.useRef();
-    return [
-        ref,
-        React.useCallback(function (node) {
-            ref.current = node;
-            if (externalRef) {
-                if (typeof externalRef === 'function') {
-                    externalRef(node);
-                }
-                else {
-                    externalRef.current = node;
-                }
-            }
-        }, [externalRef]),
-    ];
+  var ref = React.useRef();
+  return [ref, React.useCallback(function (node) {
+    ref.current = node;
+    if (externalRef) {
+      if (typeof externalRef === 'function') {
+        externalRef(node);
+      } else {
+        externalRef.current = node;
+      }
+    }
+  }, [externalRef])];
 }
-var MenuContext = React.createContext({
-    a11yOptionsProps: {},
-    currentlyDroppableIn: [],
-    onHoverItem: noop,
-    onScrollBottom: noop,
-    onSelect: noop,
-    role: 'none',
+var MenuContext = /*#__PURE__*/React.createContext({
+  a11yOptionsProps: {},
+  currentlyDroppableIn: [],
+  onHoverItem: noop,
+  onScrollBottom: noop,
+  onSelect: noop,
+  role: 'none'
 });
 export function useMenuContext() {
-    var context = React.useContext(MenuContext);
-    if (context === null) {
-        throw new Error('Cannot find `Menu` context, please wrap your component in `<MenuContext.Provider>`');
-    }
-    return context;
+  var context = React.useContext(MenuContext);
+  if (context === null) {
+    throw new Error('Cannot find `Menu` context, please wrap your component in `<MenuContext.Provider>`');
+  }
+  return context;
 }
 /**
  * Usefully if navigation is controlled by search input or another input.
@@ -86,44 +80,56 @@ export function useMenuContext() {
  * @param options.menuId provide id otherwise it will be generated
  * @since 11.5.0
  */
-export var useMenuImperativeControlNavigation = function (ref, enable, options) {
-    if (enable === void 0) { enable = true; }
-    if (options === void 0) { options = {}; }
-    var _id = options.menuId;
-    var id = useId(_id);
-    var _a = React.useState(), activeDescendant = _a[0], setActiveDescendant = _a[1];
-    var _b = useState(), onKeyDown = _b[0], setOnKeyDown = _b[1];
-    // ref is null on first render
-    React.useEffect(function () {
-        setOnKeyDown(function () { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.defaultKeyDownNavigationHandler; });
-    }, []);
-    if (enable) {
-        var menuNavigationTriggerProps = {
-            'aria-activedescendant': activeDescendant,
-            'aria-controls': id,
-            onKeyDown: onKeyDown,
-        };
-        var menuProps = {
-            onChangeActiveDescendant: setActiveDescendant,
-            id: id,
-        };
-        return {
-            menuNavigationTriggerProps: menuNavigationTriggerProps,
-            menuProps: menuProps,
-        };
-    }
-    else {
-        return {
-            menuNavigationTriggerProps: {},
-            menuProps: { id: id },
-        };
-    }
+export var useMenuImperativeControlNavigation = function useMenuImperativeControlNavigation(ref) {
+  var enable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _id = options.menuId;
+  var id = useId(_id);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeDescendant = _React$useState2[0],
+    setActiveDescendant = _React$useState2[1];
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    onKeyDown = _useState2[0],
+    setOnKeyDown = _useState2[1];
+  // ref is null on first render
+  React.useEffect(function () {
+    setOnKeyDown(function () {
+      var _ref$current;
+      return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.defaultKeyDownNavigationHandler;
+    });
+  }, []);
+  if (enable) {
+    var menuNavigationTriggerProps = {
+      'aria-activedescendant': activeDescendant,
+      'aria-controls': id,
+      onKeyDown: onKeyDown
+    };
+    var menuProps = {
+      onChangeActiveDescendant: setActiveDescendant,
+      id: id
+    };
+    return {
+      menuNavigationTriggerProps: menuNavigationTriggerProps,
+      menuProps: menuProps
+    };
+  } else {
+    return {
+      menuNavigationTriggerProps: {},
+      menuProps: {
+        id: id
+      }
+    };
+  }
 };
-function changeAriaActiveDescendantOnOptions(id, menuRef) {
-    if (id === void 0) { id = ''; }
-    var options = menuRef === null || menuRef === void 0 ? void 0 : menuRef.querySelector('[data-internal="menuimperative-options"]');
-    options === null || options === void 0 ? void 0 : options.setAttribute('aria-activedescendant', id);
+function changeAriaActiveDescendantOnOptions() {
+  var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var menuRef = arguments.length > 1 ? arguments[1] : undefined;
+  var options = menuRef === null || menuRef === void 0 ? void 0 : menuRef.querySelector('[data-internal="menuimperative-options"]');
+  options === null || options === void 0 ? void 0 : options.setAttribute('aria-activedescendant', id);
 }
+
 /**
 
    @since 10.19.0
@@ -131,240 +137,427 @@ function changeAriaActiveDescendantOnOptions(id, menuRef) {
    @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-menu-imperative--demo)
 
  */
-var MenuImperative_ = React.forwardRef(function Menu(_a, forwardRef) {
-    var _b;
-    var _c = _a.circular, circular = _c === void 0 ? false : _c, _d = _a.onDragEnd, onDragEnd_ = _d === void 0 ? noop : _d, _e = _a.onScrollBottom, onScrollBottom_ = _e === void 0 ? noop : _e, _f = _a.onSelect, onSelect_ = _f === void 0 ? noop : _f, _g = _a.role, role = _g === void 0 ? 'none' : _g, onChangeActiveDescendant = _a.onChangeActiveDescendant, onKeyboardNavigation_ = _a.onKeyboardNavigation, id = _a.id, multiple = _a.multiple, props = __rest(_a, ["circular", "onDragEnd", "onScrollBottom", "onSelect", "role", "onChangeActiveDescendant", "onKeyboardNavigation", "id", "multiple"]);
-    var ref = React.useRef(null);
-    var _h = useState([]), currentlyDroppableIn = _h[0], setCurrentlyDroppableIn = _h[1];
-    // for context, used by Menu.Item
-    var onSelect = React.useCallback(function (selection) {
-        onSelect_(selection);
-    }, [onSelect_]);
-    var onChangeHighlight = onChangeActiveDescendant
-        ? onChangeActiveDescendant
-        : changeAriaActiveDescendantOnOptions;
-    var _j = useMemo(function () { return createSensors(ref, circular, onChangeHighlight); }, [circular, onChangeHighlight]), handleItemHover = _j.handleItemHover, defaultKeyDownNavigationHandler = _j.handleKeyDown, highlight = _j.highlight, highlighted = _j.highlighted, highlightFirst = _j.highlightFirst, highlightLast = _j.highlightLast, highlightSelected = _j.highlightSelected, highlightSuggested = _j.highlightSuggested, rehighlightCurrent = _j.rehighlightCurrent, prev = _j.prev, next = _j.next, select = _j.select, updateSelectCallback = _j.updateSelectCallback, useKeyboardSensor = _j.useKeyboardSensor;
-    var commonA11yOptionProps = (_b = {
-            role: role,
-            id: id
-        },
-        _b['aria-multiselectable'] = multiple,
-        _b);
-    var a11yOptionsProps = !onChangeActiveDescendant
-        ? __assign(__assign({}, commonA11yOptionProps), { onKeyDown: onKeyboardNavigation_ !== null && onKeyboardNavigation_ !== void 0 ? onKeyboardNavigation_ : defaultKeyDownNavigationHandler, tabIndex: 0 }) : __assign(__assign({}, commonA11yOptionProps), { onKeyDown: undefined, tabIndex: undefined });
-    updateSelectCallback(onSelect);
-    // exposes internal menu API
-    React.useImperativeHandle(forwardRef, function () { return ({
-        el: ref.current,
-        highlight: highlight,
-        highlighted: highlighted,
-        highlightFirst: highlightFirst,
-        highlightLast: highlightLast,
-        highlightSelected: highlightSelected,
-        highlightSuggested: highlightSuggested,
-        next: next,
-        prev: prev,
-        select: select,
-        defaultKeyDownNavigationHandler: defaultKeyDownNavigationHandler,
-    }); });
-    useEffect(rehighlightCurrent);
-    function onDragStart(start, provided) {
-        // TODO Replace with localized instructions
-        provided.announce(NO_ANNOUCEMENT);
-        var itemInfo = JSON.parse(start.draggableId);
-        setCurrentlyDroppableIn(itemInfo.droppableIn);
+var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
+  var _ref$circular = _ref.circular,
+    circular = _ref$circular === void 0 ? false : _ref$circular,
+    _ref$onDragEnd = _ref.onDragEnd,
+    onDragEnd_ = _ref$onDragEnd === void 0 ? noop : _ref$onDragEnd,
+    _ref$onScrollBottom = _ref.onScrollBottom,
+    onScrollBottom_ = _ref$onScrollBottom === void 0 ? noop : _ref$onScrollBottom,
+    _ref$onSelect = _ref.onSelect,
+    onSelect_ = _ref$onSelect === void 0 ? noop : _ref$onSelect,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? 'none' : _ref$role,
+    onChangeActiveDescendant = _ref.onChangeActiveDescendant,
+    onKeyboardNavigation_ = _ref.onKeyboardNavigation,
+    id = _ref.id,
+    multiple = _ref.multiple,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var ref = React.useRef(null);
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentlyDroppableIn = _useState4[0],
+    setCurrentlyDroppableIn = _useState4[1];
+
+  // for context, used by Menu.Item
+  var onSelect = React.useCallback(function (selection) {
+    onSelect_(selection);
+  }, [onSelect_]);
+  var onChangeHighlight = onChangeActiveDescendant ? onChangeActiveDescendant : changeAriaActiveDescendantOnOptions;
+  var _useMemo = useMemo(function () {
+      return createSensors(ref, circular, onChangeHighlight);
+    }, [circular, onChangeHighlight]),
+    handleItemHover = _useMemo.handleItemHover,
+    defaultKeyDownNavigationHandler = _useMemo.handleKeyDown,
+    highlight = _useMemo.highlight,
+    highlighted = _useMemo.highlighted,
+    highlightFirst = _useMemo.highlightFirst,
+    highlightLast = _useMemo.highlightLast,
+    highlightSelected = _useMemo.highlightSelected,
+    highlightSuggested = _useMemo.highlightSuggested,
+    rehighlightCurrent = _useMemo.rehighlightCurrent,
+    prev = _useMemo.prev,
+    next = _useMemo.next,
+    select = _useMemo.select,
+    updateSelectCallback = _useMemo.updateSelectCallback,
+    useKeyboardSensor = _useMemo.useKeyboardSensor;
+  var commonA11yOptionProps = _defineProperty({
+    role: role,
+    id: id
+  }, 'aria-multiselectable', multiple);
+  var a11yOptionsProps = !onChangeActiveDescendant ? _objectSpread(_objectSpread({}, commonA11yOptionProps), {}, {
+    onKeyDown: onKeyboardNavigation_ !== null && onKeyboardNavigation_ !== void 0 ? onKeyboardNavigation_ : defaultKeyDownNavigationHandler,
+    tabIndex: 0
+  }) : _objectSpread(_objectSpread({}, commonA11yOptionProps), {}, {
+    onKeyDown: undefined,
+    tabIndex: undefined
+  });
+  updateSelectCallback(onSelect);
+
+  // exposes internal menu API
+  React.useImperativeHandle(forwardRef, function () {
+    return {
+      el: ref.current,
+      highlight: highlight,
+      highlighted: highlighted,
+      highlightFirst: highlightFirst,
+      highlightLast: highlightLast,
+      highlightSelected: highlightSelected,
+      highlightSuggested: highlightSuggested,
+      next: next,
+      prev: prev,
+      select: select,
+      defaultKeyDownNavigationHandler: defaultKeyDownNavigationHandler
+    };
+  });
+  useEffect(rehighlightCurrent);
+  function onDragStart(start, provided) {
+    // TODO Replace with localized instructions
+    provided.announce(NO_ANNOUCEMENT);
+    var itemInfo = JSON.parse(start.draggableId);
+    setCurrentlyDroppableIn(itemInfo.droppableIn);
+  }
+  function onDragUpdate(_update, provided) {
+    // TODO Replace with localized instructions
+    provided.announce(NO_ANNOUCEMENT);
+  }
+  var onDragEnd = React.useCallback(function (result, provided) {
+    // TODO Replace with localized instructions
+    provided.announce(NO_ANNOUCEMENT);
+    setCurrentlyDroppableIn([]);
+    if (result.reason === 'DROP' && result.destination) {
+      var itemInfo = JSON.parse(result.draggableId);
+      onDragEnd_({
+        draggableId: itemInfo.draggableId,
+        source: result.source,
+        destination: result.destination
+      });
     }
-    function onDragUpdate(_update, provided) {
-        // TODO Replace with localized instructions
-        provided.announce(NO_ANNOUCEMENT);
+  }, [onDragEnd_]);
+
+  // for context, used by Menu.Options
+  var onScrollBottom = React.useCallback(function (e) {
+    if (isScrolledToBottom(e)) {
+      onScrollBottom_(e);
     }
-    var onDragEnd = React.useCallback(function (result, provided) {
-        // TODO Replace with localized instructions
-        provided.announce(NO_ANNOUCEMENT);
-        setCurrentlyDroppableIn([]);
-        if (result.reason === 'DROP' && result.destination) {
-            var itemInfo = JSON.parse(result.draggableId);
-            onDragEnd_({
-                draggableId: itemInfo.draggableId,
-                source: result.source,
-                destination: result.destination,
-            });
-        }
-    }, [onDragEnd_]);
-    // for context, used by Menu.Options
-    var onScrollBottom = React.useCallback(function (e) {
-        if (isScrolledToBottom(e)) {
-            onScrollBottom_(e);
-        }
-    }, [onScrollBottom_]);
-    return (React.createElement(MenuContext.Provider, { value: {
-            a11yOptionsProps: a11yOptionsProps,
-            currentlyDroppableIn: currentlyDroppableIn,
-            onHoverItem: handleItemHover,
-            onScrollBottom: onScrollBottom,
-            onSelect: onSelect,
-            role: role,
-        } },
-        React.createElement(StyledWrapper, { ref: ref },
-            React.createElement(DragDropContext, { onDragStart: onDragStart, onDragUpdate: onDragUpdate, onDragEnd: onDragEnd, enableDefaultSensors: false, sensors: [useMouseSensor, useTouchSensor, useKeyboardSensor] },
-                React.createElement(StyledMenu, __assign({}, props))))));
+  }, [onScrollBottom_]);
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: {
+      a11yOptionsProps: a11yOptionsProps,
+      currentlyDroppableIn: currentlyDroppableIn,
+      onHoverItem: handleItemHover,
+      onScrollBottom: onScrollBottom,
+      onSelect: onSelect,
+      role: role
+    }
+  }, /*#__PURE__*/React.createElement(StyledWrapper, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(DragDropContext, {
+    onDragStart: onDragStart,
+    onDragUpdate: onDragUpdate,
+    onDragEnd: onDragEnd,
+    enableDefaultSensors: false,
+    sensors: [useMouseSensor, useTouchSensor, useKeyboardSensor]
+  }, /*#__PURE__*/React.createElement(StyledMenu, props))));
 });
-export var Group = React.forwardRef(function Group(_a, ref) {
-    var clickable = _a.clickable, _b = _a.item, item = _b === void 0 ? 'group' : _b, id = _a.id, children = _a.children, props = __rest(_a, ["clickable", "item", "id", "children"]);
-    var _c = useLabel({
-        id: id,
-        label: children,
-        labelElementType: 'span',
-    }), fieldProps = _c.fieldProps, labelProps = _c.labelProps;
-    return (React.createElement(StyledGroup, __assign({ ref: ref, onClick: function (e) {
-            // TODO: implement selecting groups?
-        }, "data-group": true, "data-value": JSON.stringify(item), role: "separator" }, fieldProps, props),
-        React.createElement("span", __assign({}, labelProps), children)));
+export var Group = /*#__PURE__*/React.forwardRef(function Group(_ref2, ref) {
+  var clickable = _ref2.clickable,
+    _ref2$item = _ref2.item,
+    item = _ref2$item === void 0 ? 'group' : _ref2$item,
+    id = _ref2.id,
+    children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var _useLabel = useLabel({
+      id: id,
+      label: children,
+      labelElementType: 'span'
+    }),
+    fieldProps = _useLabel.fieldProps,
+    labelProps = _useLabel.labelProps;
+  return /*#__PURE__*/React.createElement(StyledGroup, _extends({
+    ref: ref,
+    onClick: function onClick(e) {
+      // TODO: implement selecting groups?
+    },
+    "data-group": true,
+    "data-value": JSON.stringify(item),
+    role: "separator"
+  }, fieldProps, props), /*#__PURE__*/React.createElement("span", labelProps, children));
 });
 function findDraggableRecursively(children, draggableId) {
-    var nodeChildren = React.Children.toArray(children);
-    for (var i = 0; i < nodeChildren.length; i++) {
-        var child = nodeChildren[i];
-        if (isValidElement(child)) {
-            if ('draggableId' in child.props) {
-                if (child.props.draggableId === draggableId) {
-                    return child;
-                }
-            }
-            else {
-                var matchingChild = findDraggableRecursively(child.props.children, draggableId);
-                if (matchingChild) {
-                    return matchingChild;
-                }
-            }
+  var nodeChildren = React.Children.toArray(children);
+  for (var i = 0; i < nodeChildren.length; i++) {
+    var child = nodeChildren[i];
+    if ( /*#__PURE__*/isValidElement(child)) {
+      if ('draggableId' in child.props) {
+        if (child.props.draggableId === draggableId) {
+          return child;
+        }
+      } else {
+        var matchingChild = findDraggableRecursively(child.props.children, draggableId);
+        if (matchingChild) {
+          return matchingChild;
         }
+      }
     }
-    return null;
+  }
+  return null;
 }
-export function Droppable(_a) {
-    var id = _a.id, children = _a.children;
-    var ctx = useMenuContext();
-    var cloneZIndex = useZIndexContext().value;
-    function renderItemClone(provided, _snapshot, rubric) {
-        var _a;
-        var draggableInfo = JSON.parse(rubric.draggableId);
-        var draggingChild = findDraggableRecursively(children, draggableInfo.draggableId);
-        var cloneProps = (_a = draggingChild === null || draggingChild === void 0 ? void 0 : draggingChild.props) !== null && _a !== void 0 ? _a : {};
-        return (React.createElement(ClonedItem, __assign({ hasCheckbox: (draggingChild === null || draggingChild === void 0 ? void 0 : draggingChild.type) === CheckboxItem, provided: provided, cloneZIndex: cloneZIndex }, cloneProps)));
-    }
-    return (React.createElement(DndDroppable, { droppableId: id, isDropDisabled: !ctx.currentlyDroppableIn.includes(id), renderClone: renderItemClone }, function (provided, snapshot) { return (React.createElement(StyledDroppable, { ref: provided.innerRef, "data-droppable": true },
-        children,
-        provided.placeholder)); }));
+export function Droppable(_ref3) {
+  var id = _ref3.id,
+    children = _ref3.children;
+  var ctx = useMenuContext();
+  var cloneZIndex = useZIndexContext().value;
+  function renderItemClone(provided, _snapshot, rubric) {
+    var _draggingChild$props;
+    var draggableInfo = JSON.parse(rubric.draggableId);
+    var draggingChild = findDraggableRecursively(children, draggableInfo.draggableId);
+    var cloneProps = (_draggingChild$props = draggingChild === null || draggingChild === void 0 ? void 0 : draggingChild.props) !== null && _draggingChild$props !== void 0 ? _draggingChild$props : {};
+    return /*#__PURE__*/React.createElement(ClonedItem, _extends({
+      hasCheckbox: (draggingChild === null || draggingChild === void 0 ? void 0 : draggingChild.type) === CheckboxItem,
+      provided: provided,
+      cloneZIndex: cloneZIndex
+    }, cloneProps));
+  }
+  return /*#__PURE__*/React.createElement(DndDroppable, {
+    droppableId: id,
+    isDropDisabled: !ctx.currentlyDroppableIn.includes(id),
+    renderClone: renderItemClone
+  }, function (provided, snapshot) {
+    return /*#__PURE__*/React.createElement(StyledDroppable, {
+      ref: provided.innerRef,
+      "data-droppable": true
+    }, children, provided.placeholder);
+  });
 }
+
 // creates a version of a draggable item that can be positioned correctly within modals
 // this should always have the same appearance of an Item or CheckboxItem, but doesn't
 // need to handle selection events, which can't be done while the item is being dragged
-var ClonedItem = function (_a) {
-    var _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? false : _b, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.selected, selected = _d === void 0 ? false : _d, provided = _a.provided, props = __rest(_a, ["hasCheckbox", "children", "selected", "provided"]);
-    var itemProps = __assign(__assign({}, props), { $selected: selected });
-    var itemChildren = hasCheckbox ? (React.createElement(Checkbox, { indeterminate: props.indeterminate, error: props.error, checked: selected, onChange: noop }, children)) : (children);
-    return (React.createElement(StyledItem, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, itemProps, { "$isDraggable": true, "$isDragging": true, style: __assign(__assign(__assign({}, provided.draggableProps.style), props.style), { zIndex: props.cloneZIndex }) }),
-        React.createElement(StyledGrip, null,
-            React.createElement(Grip, { color: colors.gray45 })),
-        itemChildren));
+var ClonedItem = function ClonedItem(_ref4) {
+  var _ref4$hasCheckbox = _ref4.hasCheckbox,
+    hasCheckbox = _ref4$hasCheckbox === void 0 ? false : _ref4$hasCheckbox,
+    _ref4$children = _ref4.children,
+    children = _ref4$children === void 0 ? null : _ref4$children,
+    _ref4$selected = _ref4.selected,
+    selected = _ref4$selected === void 0 ? false : _ref4$selected,
+    provided = _ref4.provided,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  var itemProps = _objectSpread(_objectSpread({}, props), {}, {
+    $selected: selected
+  });
+  var itemChildren = hasCheckbox ? /*#__PURE__*/React.createElement(Checkbox, {
+    indeterminate: props.indeterminate,
+    error: props.error,
+    checked: selected,
+    onChange: noop
+  }, children) : children;
+  return /*#__PURE__*/React.createElement(StyledItem, _extends({
+    ref: provided.innerRef
+  }, provided.draggableProps, provided.dragHandleProps, itemProps, {
+    $isDraggable: true,
+    $isDragging: true,
+    style: _objectSpread(_objectSpread(_objectSpread({}, provided.draggableProps.style), props.style), {}, {
+      zIndex: props.cloneZIndex
+    })
+  }), /*#__PURE__*/React.createElement(StyledGrip, null, /*#__PURE__*/React.createElement(Grip, {
+    color: colors.gray45
+  })), itemChildren);
 };
-export var Item = React.forwardRef(function Item(_a, 
+export var Item = /*#__PURE__*/React.forwardRef(function Item(_ref5,
 /**
  * TODO: although it is typed just fine from the outside (`<Menu.Item ref>` that is),
  *  an effort is required to type it properly here too
  */
 forwardRef) {
-    var as = _a.as, 
-    /* @ts-ignore */
-    _b = _a.children, 
-    /* @ts-ignore */
-    children = _b === void 0 ? null : _b, _c = _a.item, item = _c === void 0 ? null : _c, 
-    /* @ts-ignore */
-    _d = _a.onClick, 
-    /* @ts-ignore */
-    onClick_ = _d === void 0 ? noop : _d, _e = _a.selected, selected = _e === void 0 ? false : _e, _f = _a.suggested, suggested = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _id = _a.id, role = _a.role, restoreFocus = _a.restoreFocus, props = __rest(_a, ["as", "children", "item", "onClick", "selected", "suggested", "disabled", "id", "role", "restoreFocus"]);
-    var _h = useMergeRef(forwardRef), ref = _h[0], setRef = _h[1];
-    var id = useId(_id);
-    var ctx = useMenuContext();
-    var onClick = React.useCallback(function (event) {
-        if (disabled)
-            return;
-        onClick_(event);
-        ctx.onSelect(__assign({ item: item, event: event, group: false, action: selected ? 'unselected' : 'selected' }, (restoreFocus === undefined ? {} : { restoreFocus: restoreFocus })));
-    }, [ctx, item, onClick_, disabled, selected]);
-    var contextRole;
-    var ariaSelected;
-    if (ctx.role === 'listbox') {
-        contextRole = 'option';
-        ariaSelected = selected ? true : undefined;
-    }
-    else if (ctx.role === 'menu') {
-        contextRole = 'menuitem';
-    }
-    var itemProps = __assign(__assign({ 'aria-disabled': disabled ? true : undefined, 'aria-selected': ariaSelected }, props), { id: id, role: role !== null && role !== void 0 ? role : contextRole, onClick: onClick, onMouseMove: function (e) { return ctx.onHoverItem(e.currentTarget); }, 'data-group': false, 'data-value': JSON.stringify(item), 'data-selected': selected, 'data-suggested': suggested, 'data-disabled': disabled, 'data-restorefocus': restoreFocus, $disabled: disabled, $selected: selected });
-    if ('droppableIn' in props &&
-        'draggableId' in props &&
-        'draggableIndex' in props) {
-        // encoding id and valid droppables as the draggableId, so we can use them to determine where this item can be dropped
-        var droppableInfo = {
-            draggableId: props.draggableId,
-            droppableIn: Array.isArray(props.droppableIn)
-                ? props.droppableIn
-                : [props.droppableIn],
-        };
-        return (React.createElement(Draggable, { draggableId: JSON.stringify(droppableInfo), index: props.draggableIndex, isDragDisabled: disabled }, function (provided) { return (React.createElement(StyledItem, __assign({ ref: mergeRefs(provided.innerRef, setRef), as: as }, provided.draggableProps, provided.dragHandleProps, itemProps, { "$isDraggable": !disabled, style: __assign(__assign({}, provided.draggableProps.style), itemProps.style), tabIndex: -1 }),
-            !disabled && (React.createElement(StyledGrip, null,
-                React.createElement(Grip, { color: colors.gray45 }))),
-            children)); }));
-    }
-    return (React.createElement(StyledItem, __assign({ ref: setRef, as: as }, itemProps), children));
+  var as = _ref5.as,
+    _ref5$children = _ref5.children,
+    children = _ref5$children === void 0 ? null : _ref5$children,
+    _ref5$item = _ref5.item,
+    item = _ref5$item === void 0 ? null : _ref5$item,
+    _ref5$onClick = _ref5.onClick,
+    onClick_ = _ref5$onClick === void 0 ? noop : _ref5$onClick,
+    _ref5$selected = _ref5.selected,
+    selected = _ref5$selected === void 0 ? false : _ref5$selected,
+    _ref5$suggested = _ref5.suggested,
+    suggested = _ref5$suggested === void 0 ? false : _ref5$suggested,
+    _ref5$disabled = _ref5.disabled,
+    disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
+    _id = _ref5.id,
+    role = _ref5.role,
+    restoreFocus = _ref5.restoreFocus,
+    props = _objectWithoutProperties(_ref5, _excluded4);
+  var _useMergeRef = useMergeRef(forwardRef),
+    _useMergeRef2 = _slicedToArray(_useMergeRef, 2),
+    ref = _useMergeRef2[0],
+    setRef = _useMergeRef2[1];
+  var id = useId(_id);
+  var ctx = useMenuContext();
+  var onClick = React.useCallback(function (event) {
+    if (disabled) return;
+    onClick_(event);
+    ctx.onSelect(_objectSpread({
+      item: item,
+      event: event,
+      group: false,
+      action: selected ? 'unselected' : 'selected'
+    }, restoreFocus === undefined ? {} : {
+      restoreFocus: restoreFocus
+    }));
+  }, [ctx, item, onClick_, disabled, selected]);
+  var contextRole;
+  var ariaSelected;
+  if (ctx.role === 'listbox') {
+    contextRole = 'option';
+    ariaSelected = selected ? true : undefined;
+  } else if (ctx.role === 'menu') {
+    contextRole = 'menuitem';
+  }
+  var itemProps = _objectSpread(_objectSpread({
+    'aria-disabled': disabled ? true : undefined,
+    'aria-selected': ariaSelected
+  }, props), {}, {
+    id: id,
+    role: role !== null && role !== void 0 ? role : contextRole,
+    onClick: onClick,
+    onMouseMove: function onMouseMove(e) {
+      return ctx.onHoverItem(e.currentTarget);
+    },
+    'data-group': false,
+    'data-value': JSON.stringify(item),
+    'data-selected': selected,
+    'data-suggested': suggested,
+    'data-disabled': disabled,
+    'data-restorefocus': restoreFocus,
+    $disabled: disabled,
+    $selected: selected
+  });
+  if ('droppableIn' in props && 'draggableId' in props && 'draggableIndex' in props) {
+    // encoding id and valid droppables as the draggableId, so we can use them to determine where this item can be dropped
+    var droppableInfo = {
+      draggableId: props.draggableId,
+      droppableIn: Array.isArray(props.droppableIn) ? props.droppableIn : [props.droppableIn]
+    };
+    return /*#__PURE__*/React.createElement(Draggable, {
+      draggableId: JSON.stringify(droppableInfo),
+      index: props.draggableIndex,
+      isDragDisabled: disabled
+    }, function (provided) {
+      return /*#__PURE__*/React.createElement(StyledItem, _extends({
+        ref: mergeRefs(provided.innerRef, setRef),
+        as: as
+      }, provided.draggableProps, provided.dragHandleProps, itemProps, {
+        $isDraggable: !disabled,
+        style: _objectSpread(_objectSpread({}, provided.draggableProps.style), itemProps.style),
+        tabIndex: -1
+      }), !disabled && /*#__PURE__*/React.createElement(StyledGrip, null, /*#__PURE__*/React.createElement(Grip, {
+        color: colors.gray45
+      })), children);
+    });
+  }
+  return /*#__PURE__*/React.createElement(StyledItem, _extends({
+    ref: setRef,
+    as: as
+  }, itemProps), children);
 });
-export var CheckboxItem = React.forwardRef(function CheckboxItem(_a, forwardRef) {
-    var _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.indeterminate, indeterminate = _e === void 0 ? false : _e, _f = _a.children, children = _f === void 0 ? null : _f, role = _a.role, props = __rest(_a, ["selected", "disabled", "error", "indeterminate", "children", "role"]);
-    var ctx = useMenuContext();
-    var contextRole;
-    var ariaChecked;
-    var ariaSelected;
-    if (ctx.role === 'listbox') {
-        contextRole = 'option';
-        ariaSelected = selected ? true : undefined;
+export var CheckboxItem = /*#__PURE__*/React.forwardRef(function CheckboxItem(_ref6, forwardRef) {
+  var _ref6$selected = _ref6.selected,
+    selected = _ref6$selected === void 0 ? false : _ref6$selected,
+    _ref6$disabled = _ref6.disabled,
+    disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
+    _ref6$error = _ref6.error,
+    error = _ref6$error === void 0 ? false : _ref6$error,
+    _ref6$indeterminate = _ref6.indeterminate,
+    indeterminate = _ref6$indeterminate === void 0 ? false : _ref6$indeterminate,
+    _ref6$children = _ref6.children,
+    children = _ref6$children === void 0 ? null : _ref6$children,
+    role = _ref6.role,
+    props = _objectWithoutProperties(_ref6, _excluded5);
+  var ctx = useMenuContext();
+  var contextRole;
+  var ariaChecked;
+  var ariaSelected;
+  if (ctx.role === 'listbox') {
+    contextRole = 'option';
+    ariaSelected = selected ? true : undefined;
+  } else if (ctx.role === 'menu') {
+    contextRole = 'menuitemcheckbox';
+    if (indeterminate) {
+      ariaChecked = 'mixed';
+    } else {
+      ariaChecked = selected ? 'true' : 'false';
     }
-    else if (ctx.role === 'menu') {
-        contextRole = 'menuitemcheckbox';
-        if (indeterminate) {
-            ariaChecked = 'mixed';
-        }
-        else {
-            ariaChecked = selected ? 'true' : 'false';
-        }
-    }
-    return (React.createElement(Item, __assign({ "aria-checked": ariaChecked, "aria-disabled": disabled ? true : undefined, "aria-selected": ariaSelected }, props, { role: role !== null && role !== void 0 ? role : contextRole, selected: selected, disabled: disabled, ref: forwardRef }),
-        React.createElement(FakeCheckbox, { indeterminate: indeterminate, error: error, disabled: disabled, checked: selected }, children)));
+  }
+  return /*#__PURE__*/React.createElement(Item, _extends({
+    "aria-checked": ariaChecked,
+    "aria-disabled": disabled ? true : undefined,
+    "aria-selected": ariaSelected
+  }, props, {
+    role: role !== null && role !== void 0 ? role : contextRole,
+    selected: selected,
+    disabled: disabled,
+    ref: forwardRef
+  }), /*#__PURE__*/React.createElement(FakeCheckbox, {
+    indeterminate: indeterminate,
+    error: error,
+    disabled: disabled,
+    checked: selected
+  }, children));
 });
-export var Options = React.forwardRef(function Options(props, ref) {
-    var ctx = useMenuContext();
-    return (React.createElement(StyledOptions, __assign({}, props, ctx.a11yOptionsProps, { "data-internal": "menuimperative-options", ref: ref, onScroll: ctx.onScrollBottom })));
+export var Options = /*#__PURE__*/React.forwardRef(function Options(props, ref) {
+  var ctx = useMenuContext();
+  return /*#__PURE__*/React.createElement(StyledOptions, _extends({}, props, ctx.a11yOptionsProps, {
+    "data-internal": "menuimperative-options",
+    ref: ref,
+    onScroll: ctx.onScrollBottom
+  }));
 });
-export var Search = function (_a) {
-    var className = _a.className, _b = _a.i18nScope, i18nScope = _b === void 0 ? 'core.menu' : _b, placeholder = _a.placeholder, _onChange = _a.onChange, props = __rest(_a, ["className", "i18nScope", "placeholder", "onChange"]);
-    var I18n = useI18nContext();
-    var _c = React.useState(''), value = _c[0], setValue = _c[1];
-    var onChange = React.useCallback(function (value, event) {
-        setValue(value);
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
-    }, [_onChange]);
-    // intentionally changed to type text + searchbox,
-    // voiceOver focus goes to clear button when no results in Chrome
-    return (React.createElement(StyledSearch, { className: className },
-        React.createElement(Typeahead, __assign({}, props, { type: "text", role: "searchbox", autoFocus: true, placeholder: placeholder || I18n.t('search', { scope: i18nScope }), onChange: onChange, value: value }))));
+export var Search = function Search(_ref7) {
+  var className = _ref7.className,
+    _ref7$i18nScope = _ref7.i18nScope,
+    i18nScope = _ref7$i18nScope === void 0 ? 'core.menu' : _ref7$i18nScope,
+    placeholder = _ref7.placeholder,
+    _onChange = _ref7.onChange,
+    props = _objectWithoutProperties(_ref7, _excluded6);
+  var I18n = useI18nContext();
+  var _React$useState3 = React.useState(''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    value = _React$useState4[0],
+    setValue = _React$useState4[1];
+  var onChange = React.useCallback(function (value, event) {
+    setValue(value);
+    _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+  }, [_onChange]);
+
+  // intentionally changed to type text + searchbox,
+  // voiceOver focus goes to clear button when no results in Chrome
+  return /*#__PURE__*/React.createElement(StyledSearch, {
+    className: className
+  }, /*#__PURE__*/React.createElement(Typeahead, _extends({}, props, {
+    type: "text",
+    role: "searchbox",
+    autoFocus: true,
+    placeholder: placeholder || I18n.t('search', {
+      scope: i18nScope
+    }),
+    onChange: onChange,
+    value: value
+  })));
 };
-export var Header = React.forwardRef(function Header(_a, ref) {
-    var props = __rest(_a, []);
-    return React.createElement(StyledHeader, __assign({ ref: ref }, props));
+export var Header = /*#__PURE__*/React.forwardRef(function Header(_ref8, ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref8), _ref8));
+  return /*#__PURE__*/React.createElement(StyledHeader, _extends({
+    ref: ref
+  }, props));
 });
-export var Footer = React.forwardRef(function Footer(_a, ref) {
-    var _b = _a.padding, padding = _b === void 0 ? 'md lg' : _b, props = __rest(_a, ["padding"]);
-    return React.createElement(StyledFooter, __assign({ ref: ref, padding: padding }, props));
+export var Footer = /*#__PURE__*/React.forwardRef(function Footer(_ref9, ref) {
+  var _ref9$padding = _ref9.padding,
+    padding = _ref9$padding === void 0 ? 'md lg' : _ref9$padding,
+    props = _objectWithoutProperties(_ref9, _excluded7);
+  return /*#__PURE__*/React.createElement(StyledFooter, _extends({
+    ref: ref,
+    padding: padding
+  }, props));
 });
 MenuImperative_.displayName = 'Menu';
 Droppable.displayName = 'Menu.Droppable';
@@ -375,13 +568,13 @@ Item.displayName = 'Menu.Item';
 Options.displayName = 'Menu.Options';
 Search.displayName = 'Menu.Search';
 export var MenuImperative = addSubcomponents({
-    CheckboxItem: CheckboxItem,
-    Droppable: Droppable,
-    Footer: Footer,
-    Group: Group,
-    Header: Header,
-    Item: Item,
-    Options: Options,
-    Search: Search,
+  CheckboxItem: CheckboxItem,
+  Droppable: Droppable,
+  Footer: Footer,
+  Group: Group,
+  Header: Header,
+  Item: Item,
+  Options: Options,
+  Search: Search
 }, MenuImperative_);
 //# sourceMappingURL=MenuImperative.js.map