@sproutsocial/seeds-react-menu 0.2.3 → 0.4.0

package/dist/index.js

@@ -32,7 +32,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // ../../node_modules/object-assign/index.js
 var require_object_assign = __commonJS({
-  "../../node_modules/object-assign/index.js"(exports, module2) {
+  "../../node_modules/object-assign/index.js"(exports2, module2) {
     "use strict";
     var getOwnPropertySymbols = Object.getOwnPropertySymbols;
     var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -101,9 +101,11 @@ var require_object_assign = __commonJS({
 });
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   ActionMenu: () => ActionMenu,
+  Autocomplete: () => Autocomplete,
+  AutocompleteInput: () => AutocompleteInput,
   INPUT_TYPES: () => INPUT_TYPES,
   MenuContent: () => MenuContent,
   MenuContext: () => MenuContext,
@@ -131,7 +133,7 @@ __export(src_exports, {
   useMenuContext: () => useMenuContext,
   useSelectStateReducer: () => useSelectStateReducer
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/MenuItem/MenuItem.tsx
 var import_react3 = require("react");
@@ -147,15 +149,18 @@ var useMenu = ({
   items = [],
   isListbox = false,
   isOpen = false,
+  itemsMap: itemsMapFromProps,
   ...rest
 } = {}) => {
   const menuProps = (0, import_react.useMemo)(() => ({ ...rest }), [rest]);
   const itemsMap = (0, import_react.useMemo)(
-    () => items.reduce((map, item) => {
-      map[`${item.id}`] = item;
+    () => itemsMapFromProps || items.reduce((map, item) => {
+      map[`${item.id}`] = {
+        ...item
+      };
       return map;
     }, {}),
-    [items]
+    [items, itemsMapFromProps]
   );
   return {
     isOpen,
@@ -168,9 +173,9 @@ var useMenu = ({
 var MenuContext = (0, import_react.createContext)(defaultMenuContext);
 var MenuProvider = ({
   children,
-  ...overrides
+  menuProps
 }) => {
-  const filterContext = useMenu(overrides);
+  const filterContext = useMenu(menuProps);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuContext.Provider, { value: { ...filterContext }, children });
 };
 var useMenuContext = () => {
@@ -257,8 +262,7 @@ function _isNativeReflectConstruct() {
 
 // ../../node_modules/@babel/runtime/helpers/esm/construct.js
 function _construct(t, e, r) {
-  if (_isNativeReflectConstruct())
-    return Reflect.construct.apply(null, arguments);
+  if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
   var o = [null];
   o.push.apply(o, e);
   var p = new (t.bind.apply(t, o))();
@@ -269,14 +273,12 @@ function _construct(t, e, r) {
 function _wrapNativeSuper(Class) {
   var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
   _wrapNativeSuper = function _wrapNativeSuper2(Class2) {
-    if (Class2 === null || !_isNativeFunction(Class2))
-      return Class2;
+    if (Class2 === null || !_isNativeFunction(Class2)) return Class2;
     if (typeof Class2 !== "function") {
       throw new TypeError("Super expression must either be null or a function");
     }
     if (typeof _cache !== "undefined") {
-      if (_cache.has(Class2))
-        return _cache.get(Class2);
+      if (_cache.has(Class2)) return _cache.get(Class2);
       _cache.set(Class2, Wrapper);
     }
     function Wrapper() {
@@ -599,8 +601,7 @@ var namedColorMap = {
   yellowgreen: "9acd32"
 };
 function nameToHex(color2) {
-  if (typeof color2 !== "string")
-    return color2;
+  if (typeof color2 !== "string") return color2;
   var normalizedColorName = color2.toLowerCase();
   return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color2;
 }
@@ -743,8 +744,7 @@ function guard(lowerBoundary, upperBoundary, value) {
   return Math.max(lowerBoundary, Math.min(upperBoundary, value));
 }
 function transparentize(amount, color2) {
-  if (color2 === "transparent")
-    return color2;
+  if (color2 === "transparent") return color2;
   var parsedColor = parseToRgb(color2);
   var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
   var colorWithAlpha = _extends({}, parsedColor, {
@@ -754,7 +754,7 @@ function transparentize(amount, color2) {
 }
 var curriedTransparentize = /* @__PURE__ */ curry(transparentize);
 
-// ../seeds-react-mixins/src/index.ts
+// ../seeds-react-mixins/dist/esm/index.js
 var import_styled_components = require("styled-components");
 var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
 var visuallyHidden = import_styled_components.css`
@@ -794,8 +794,7 @@ var merge = function merge2(a, b) {
   var result = (0, import_object_assign.default)({}, a, b);
   for (var key in a) {
     var _assign;
-    if (!a[key] || typeof b[key] !== "object")
-      continue;
+    if (!a[key] || typeof b[key] !== "object") continue;
     (0, import_object_assign.default)(result, (_assign = {}, _assign[key] = (0, import_object_assign.default)(a[key], b[key]), _assign));
   }
   return result;
@@ -837,8 +836,7 @@ var createParser = function createParser2(config9) {
     var shouldSort = false;
     var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
     for (var key in props) {
-      if (!config9[key])
-        continue;
+      if (!config9[key]) continue;
       var sx = config9[key];
       var raw = props[key];
       var scale = get(props.theme, sx.scale, sx.defaults);
@@ -912,8 +910,7 @@ var createStyleFunction = function createStyleFunction2(_ref) {
   var sx = function sx2(value, scale2, _props) {
     var result = {};
     var n = transform(value, scale2, _props);
-    if (n === null)
-      return;
+    if (n === null) return;
     properties.forEach(function(prop) {
       result[prop] = n;
     });
@@ -952,8 +949,7 @@ var compose = function compose2() {
     parsers[_key] = arguments[_key];
   }
   parsers.forEach(function(parser2) {
-    if (!parser2 || !parser2.config)
-      return;
+    if (!parser2 || !parser2.config) return;
     (0, import_object_assign.default)(config9, parser2.config);
   });
   var parser = createParser(config9);
@@ -1549,8 +1545,7 @@ var positiveOrNegative = function positiveOrNegative2(scale, value) {
   }
   var absolute = Math.abs(value);
   var n = get3(scale, absolute, absolute);
-  if (typeof n === "string")
-    return "-" + n;
+  if (typeof n === "string") return "-" + n;
   return n * -1;
 };
 var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
@@ -1566,8 +1561,7 @@ var responsive = function responsive2(styles) {
     }));
     for (var key in styles) {
       var value = typeof styles[key] === "function" ? styles[key](theme2) : styles[key];
-      if (value == null)
-        continue;
+      if (value == null) continue;
       if (!Array.isArray(value)) {
         next[key] = value;
         continue;
@@ -1579,8 +1573,7 @@ var responsive = function responsive2(styles) {
           continue;
         }
         next[media] = next[media] || {};
-        if (value[i] == null)
-          continue;
+        if (value[i] == null) continue;
         next[media][key] = value[i];
       }
     }
@@ -1927,7 +1920,7 @@ var MenuItem = ({
   color: color2,
   ...props
 }) => {
-  const { getItemProps, itemsMap, highlightedIndex, isListbox } = (0, import_react3.useContext)(MenuContext);
+  const { getItemProps, itemsMap, highlightedIndex, isListbox } = useMenuContext();
   const { ...optionProps } = useOptionProps({
     id,
     children,
@@ -1935,7 +1928,7 @@ var MenuItem = ({
   });
   const item = itemsMap[id] || { index: 0, id };
   const highlighted = highlightedIndex === item?.index;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemContainer, { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return item.hidden ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemContainer, { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     StyledMenuItem,
     {
       id,
@@ -2116,9 +2109,7 @@ var Container = import_styled_components8.default.span`
   padding-left: 0;
   padding-right: 0;
   font-family: ${(props) => props.theme.fontFamily};
-  font-style: ${(props) => {
-  return props.isItalicized && "italic";
-}};
+  font-style: ${(props) => props.isItalicized && "italic"};
 
   ${(props) => props.truncated && import_styled_components8.css`
       display: block;
@@ -2212,7 +2203,7 @@ var SmallBodyCopyWithLogic = withTextLogic(SmallBodyCopy);
 SmallBodyCopyWithLogic.displayName = "Text.SmallBodyCopy";
 Text.SmallBodyCopy = SmallBodyCopyWithLogic;
 var Text_default = Text;
-var src_default = Text_default;
+var index_default = Text_default;
 
 // src/MenuGroup/styles.tsx
 var StyledMenuGroup = import_styled_components9.default.li`
@@ -2231,7 +2222,7 @@ var StyledMenuGroup = import_styled_components9.default.li`
   ${layout}
   ${space}
 `;
-var StyledTitle = (0, import_styled_components9.default)(src_default.SmallSubHeadline)`
+var StyledTitle = (0, import_styled_components9.default)(index_default.SmallSubHeadline)`
   margin: ${({ theme: theme2 }) => theme2.space[400]} ${({ theme: theme2 }) => theme2.space[400]}
     0px ${({ theme: theme2 }) => theme2.space[400]};
 `;
@@ -2244,16 +2235,26 @@ var StyledMenuGroupUl = import_styled_components9.default.ul`
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var MenuGroup = ({
   titleAs = "h3",
-  children,
+  children: childrenProp,
   title,
   color: color2,
+  isSingleSelect,
+  id,
+  items,
+  MenuItemComponent = MenuItem,
   ...rest
 }) => {
   const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
+  const children = childrenProp || !items || !items.length ? childrenProp : items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuItemComponent, { ...item }, item.id));
+  if (!children) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     StyledMenuGroup,
     {
       role: "group",
+      id,
+      isSingleSelect,
       "aria-labelledby": title ? titleId : void 0,
       color: color2,
       ...rest,
@@ -2278,7 +2279,7 @@ var CustomPopoutContent = (0, import_styled_components10.default)(import_seeds_r
 var MenuRoot = ({
   children,
   menuToggleElement,
-  popoutProps,
+  popoutProps: { focusLockProps, ...popoutProps } = {},
   width: width2 = "300px",
   ...contextProps
 }) => {
@@ -2289,7 +2290,7 @@ var MenuRoot = ({
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MenuProvider, { ...contextProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MenuProvider, { menuProps: contextProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_seeds_react_popout.Popout,
     {
       menuPopout: true,
@@ -2299,7 +2300,8 @@ var MenuRoot = ({
       focusLockProps: {
         // correct jerking motion when scrolling while the Popout is open
         // returnFocus: false,
-        crossFrame: false
+        crossFrame: false,
+        ...focusLockProps
       },
       disableWrapperAria: true,
       ...popoutProps,
@@ -2310,10 +2312,11 @@ var MenuRoot = ({
 
 // src/MenuLabel.tsx
 var import_react11 = require("react");
+var import_seeds_react_label = require("@sproutsocial/seeds-react-label");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var MenuLabel = ({ children, ...rest }) => {
   const { getLabelProps } = useMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { as: "label", color: "text.body", ...getLabelProps?.(), ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_seeds_react_label.Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
 };
 
 // src/MenuToggleButton.tsx
@@ -2349,8 +2352,7 @@ var import_downshift2 = require("downshift");
 var import_react13 = __toESM(require("react"));
 var walkAllChildren = (children, callback) => {
   const walk = (element, parents2) => {
-    if (element === null || element === void 0)
-      return;
+    if (element === null || element === void 0) return;
     callback(element, parents2);
     const newParents = [...parents2, element];
     const children2 = element.props?.children;
@@ -2367,35 +2369,76 @@ var checkIfIsElement = (element, name) => {
   return !!(element && typeof element === "object" && "type" in element && typeof element.type !== "string" && typeof element.type.name === "string" && element.type.name === name);
 };
 var getAllMenuItems = (children) => {
-  const allMenuItems = [];
-  walkAllChildren(children, (element, parents) => {
+  const orderedElements = [];
+  walkAllChildren(children, (element) => {
     if (checkIfIsElement(element, "MenuItem")) {
-      allMenuItems.push({
-        element,
-        parents
+      orderedElements.push({
+        type: "item",
+        element
+      });
+    } else if (checkIfIsElement(element, "MenuGroup")) {
+      orderedElements.push({
+        type: "group",
+        element
       });
     }
   });
-  return allMenuItems;
+  return { orderedElements };
 };
 var useItemsFromChildren = ({
   children
 }) => {
   const { allMenuItems, menuItemsMap } = (0, import_react13.useMemo)(() => {
-    const allMenuItemElements = getAllMenuItems(children);
+    const { orderedElements } = getAllMenuItems(children);
     const menuItemsMap2 = {};
-    const allMenuItems2 = allMenuItemElements.map(
-      ({ element }, index) => {
+    const allMenuItems2 = [];
+    let index = 0;
+    orderedElements.forEach(({ type, element }) => {
+      if (type === "group") {
+        const menuGroup = element;
+        const items = menuGroup.props.items;
+        if (items) {
+          items.forEach((menuItem) => {
+            const item = {
+              id: menuItem.id,
+              index: index++,
+              disabled: menuItem.disabled,
+              menuItemProps: menuItem,
+              menuGroupProps: element.props
+            };
+            allMenuItems2.push(item);
+            menuItemsMap2[`${item.id}`] = item;
+          });
+        } else if (menuGroup.props.children) {
+          let children2 = menuGroup.props.children;
+          if (!Array.isArray(children2)) {
+            children2 = [children2];
+          }
+          children2.forEach((menuItem) => {
+            const item = {
+              id: menuItem.props.id,
+              index: index++,
+              disabled: menuItem.props.disabled,
+              menuItemProps: menuItem.props,
+              menuGroupProps: element.props
+            };
+            allMenuItems2.push(item);
+            menuItemsMap2[`${item.id}`] = item;
+          });
+        }
+      } else {
+        if (menuItemsMap2[`${element.props.id}`]) return;
+        const menuItem = element;
         const item = {
-          id: element.props.id,
-          disabled: element.props.disabled,
-          index,
-          menuItemProps: element.props
+          id: menuItem.props.id,
+          index: index++,
+          disabled: menuItem.props.disabled,
+          menuItemProps: menuItem.props
         };
+        allMenuItems2.push(item);
         menuItemsMap2[`${item.id}`] = item;
-        return item;
       }
-    );
+    });
     return { allMenuItems: allMenuItems2, menuItemsMap: menuItemsMap2 };
   }, [children]);
   return { allMenuItems, menuItemsMap };
@@ -2406,12 +2449,14 @@ var import_downshift = require("downshift");
 var useSelectStateReducer = (state, actionAndChanges) => {
   const { type, changes } = actionAndChanges;
   switch (type) {
+    /** If downshift is blurred by tabbing within the menu, stay open */
     case import_downshift.useSelect.stateChangeTypes.ToggleButtonBlur:
       return {
         ...changes,
         // keep menu open on blur
         isOpen: true
       };
+    /** Return standard change payload */
     default:
       return changes;
   }
@@ -2433,8 +2478,7 @@ var handleStateChange = (changes, currentSelectedItem) => {
     return;
   }
   const selectedItem = changes.selectedItem || currentSelectedItem;
-  if (!selectedItem)
-    return;
+  if (!selectedItem) return;
   if (selectedItem.disabled) {
     return;
   }
@@ -2614,13 +2658,18 @@ var MultiSelectMenu = ({
         case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
         case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case import_downshift4.useSelect.stateChangeTypes.ItemClick:
-          if (!newSelectedItem)
-            break;
+          if (!newSelectedItem) break;
           if (selectedItems?.find((item) => item?.id === newSelectedItem.id)) {
             removeSelectedItem(newSelectedItem);
           } else {
             addSelectedItem(newSelectedItem);
           }
+          if (newSelectedItem.menuGroupProps?.isSingleSelect) {
+            const groupItems = selectedItems.filter(
+              (item) => item.menuGroupProps?.id === newSelectedItem.menuGroupProps?.id
+            );
+            groupItems.forEach((item) => removeSelectedItem(item));
+          }
           break;
         default:
           break;
@@ -2653,9 +2702,130 @@ var MultiSelectMenu = ({
     }
   );
 };
+
+// src/Autocomplete/Autocomplete.tsx
+var import_react17 = __toESM(require("react"));
+var import_downshift6 = require("downshift");
+
+// src/reducers/useComboboxStateReducer.tsx
+var import_downshift5 = require("downshift");
+var useComboboxStateReducer = (state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  switch (type) {
+    /** If downshift is blurred by tabbing within the menu, stay open */
+    case import_downshift5.useCombobox.stateChangeTypes.InputBlur:
+      return {
+        ...changes,
+        // keep menu open on blur
+        isOpen: true
+      };
+    /** Return standard change payload */
+    default:
+      return changes;
+  }
+};
+var defaultUseComboboxProps = {
+  // disabling while item.hidden so that hidden items are ignored by downshift
+  isItemDisabled: (item) => Boolean(item.disabled || item.hidden)
+};
+
+// src/Autocomplete/Autocomplete.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Autocomplete = ({
+  children,
+  stateReducer: externalStateReducer,
+  itemToString: itemToString2 = itemToString,
+  getIsItemVisible = (item, inputValue) => itemToString2(item).toLowerCase().startsWith(inputValue.toLowerCase()),
+  ...useComboboxProps
+}) => {
+  const { allMenuItems } = useItemsFromChildren({ children });
+  const [items, setItems] = import_react17.default.useState(allMenuItems);
+  const { isOpen, ...useComboboxReturnProps } = (0, import_downshift6.useCombobox)({
+    ...defaultUseComboboxProps,
+    items,
+    itemToString: itemToString2,
+    onInputValueChange({ inputValue }) {
+      setItems(
+        inputValue ? allMenuItems.reduce(
+          (items2, item) => [
+            ...items2,
+            { ...item, hidden: !getIsItemVisible(item, inputValue) }
+          ],
+          []
+        ) : allMenuItems
+      );
+    },
+    stateReducer: (state, actionAndChanges) => {
+      let newState;
+      newState = useComboboxStateReducer(state, actionAndChanges);
+      return externalStateReducer ? externalStateReducer(state, {
+        ...actionAndChanges,
+        changes: newState
+      }) : newState;
+    },
+    ...useComboboxProps
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    MenuRoot,
+    {
+      ...{
+        isListbox: true,
+        items,
+        itemToString: itemToString2,
+        isOpen,
+        ...useComboboxProps,
+        ...useComboboxReturnProps
+      },
+      popoutProps: {
+        focusOnContent: false
+      },
+      children
+    }
+  );
+};
+
+// src/Autocomplete/AutocompleteInput.tsx
+var import_react18 = require("react");
+var import_seeds_react_input = require("@sproutsocial/seeds-react-input");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var AutocompleteInput = ({
+  onKeyDown,
+  onChange,
+  onInput,
+  onBlur,
+  onClick,
+  inputProps,
+  ...rest
+}) => {
+  const { getInputProps, inputValue } = (0, import_react18.useContext)(MenuContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_seeds_react_input.Input,
+    {
+      id: "autocomplete_input",
+      name: "autocomplete_input",
+      inputProps: {
+        ...getInputProps?.({
+          // refKey: "innerRef",
+          onKeyDown,
+          onChange,
+          onInput,
+          onBlur,
+          onClick,
+          value: inputValue
+        }),
+        ...inputProps
+      },
+      autoComplete: false,
+      value: inputValue,
+      ...rest
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionMenu,
+  Autocomplete,
+  AutocompleteInput,
   INPUT_TYPES,
   MenuContent,
   MenuContext,