@sproutsocial/seeds-react-menu 0.6.0 → 1.0.0

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     125.56 KB
-CJS dist/index.js.map 335.20 KB
-CJS ⚡️ Build success in 640ms
-ESM dist/esm/index.js     117.47 KB
-ESM dist/esm/index.js.map 333.95 KB
-ESM ⚡️ Build success in 642ms
+CJS dist/index.js     127.24 KB
+CJS dist/index.js.map 338.99 KB
+CJS ⚡️ Build success in 552ms
+ESM dist/esm/index.js     119.14 KB
+ESM dist/esm/index.js.map 337.77 KB
+ESM ⚡️ Build success in 565ms
 DTS Build start
-DTS ⚡️ Build success in 15230ms
-DTS dist/index.d.ts  29.59 KB
-DTS dist/index.d.mts 29.59 KB
-Done in 18.69s.
+DTS ⚡️ Build success in 11080ms
+DTS dist/index.d.ts  30.02 KB
+DTS dist/index.d.mts 30.02 KB
+Done in 14.90s.

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.0.0
+
+### Major Changes
+
+- 686f09d: Here's the initial stable version of the new Menu package!
+  The documentation for these new components is still a work in progress, but you can checkout examples of its usage in [our latest storybook instance](https://seeds-storybook-vite.netlify.app).
+
+  ## Ready for use
+
+  These components have been tested and their APIs stable and ready for initial use.
+
+  - Primitives
+    - `MenuHeader` - a stylized region for the header of the menu
+    - `MenuContent` - the element used to wrap the list of options in the menu
+    - `MenuGroup` - a group element to wrap a list of items inside the content with an optional title
+    - `MenuItem` - to be used to compose each menu item in the list
+    - `MenuFooter` - a stylized region for the footer of the menu
+    - `MenuSearchInput` - a text search input for filtering the menu items
+    - `MenuSearchTokenInput` - a token input for searching and selecting items in a multiple select menu
+    - `MenuToggleButton` - an accessible button to handle opening and closing the menu
+    - `MenuLabel` - an accessible label to go along with a toggle button or autocomplete input
+  - Menus
+    - `ActionMenu` - perform an action using a dropdown with no selection state
+    - `SingleSelectMenu` - use a selection menu where only one item can be selected
+    - `MultiSelectMenu` - use a selection menu where multiple items may be selected
+    - `Autocomplete` - use a dropdown to perform autocomplete on an input
+      - `AutocompleteInput` - a custom toggle element for text inputs with autocomplete
+      - `AutcompleteTokenInput` - a custom toggle element for multiple selection with autocomplete
+
+  ## Still Experimental
+
+  These components and utilities are stable enough to support the ready for use components, but may not be fully stable enough for individual use. Use with caution!
+  Future updates will stabilize these components for wider use.
+
+  - Primitives
+    - `MenuRoot` - the root of most of the menus which handles the Popout logic and initializing the menu's context data
+      - This currently includes the Popout but could go through API changes depending on if we keep the Popout embedded here
+      - The type for this may change, but should not affect the API of the Menus consuming it
+    - `useMenu`/`MenuContext` - used to drive and share data between the menu primitives
+      - This shared logic has the potential to change in order to resolve bugs, data inconsistency or performance concerns
+    - `SubmenuItem` - a menu item that can be used to open another menu, allowing for the use of submenus
+      - There are still a couple of outstanding bugs for this component
+      - This should be stable enough to start using, with bug fixes coming soon
+  - Menus
+    - `NestedMenu` - a nested menu with sliding panels similar to what currently exists in the web app
+      - We are still massaging the animation added to this component, but it will be ready soon
+
+  ## Up Next
+
+  Here's what's coming soon but wasn't urgent for v1!
+
+  - Comprehensive seeds documentation as well as descriptive tsdocs for inline documentation
+  - Finishing off stable versions of the `SubmenuItem` and `NestedMenu`
+  - A `NestedFilterMenu` that can search all the items in a `NestedMenu`
+  - An `AutocompleteSelect` toggle element that can be used to create a searchable `Select` input
+  - Additional accessibility improvements and bug fixes
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/esm/index.js

@@ -141,7 +141,7 @@ var useMenu = ({
   );
   const isItemSelected = React.useCallback(
     (id) => checkIfItemSelected({ id, selectedItem, selectedItemIds }),
-    [selectedItem, selectedItemIds]
+    [selectedItem?.id, selectedItemIds]
   );
   const getInputComponentProps = React.useCallback(
     ({ inputProps, ...props }) => {
@@ -1769,8 +1769,10 @@ var highlightedStyles = css4`
   text-decoration: none;
 `;
 var activeStyles = css4`
-  background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.active};
-  color: ${({ theme: theme2 }) => theme2.colors.text.inverse};
+  border: 1px solid ${({ theme: theme2 }) => theme2.colors.listItem.border.base};
+  background-color: ${({ theme: theme2 }) => theme2.colors.menuItem.background.active};
+  color: ${({ theme: theme2 }) => theme2.colors.text.body};
+  text-decoration: none;
 `;
 var MenuItemContainer = styled.li`
   box-sizing: border-box;
@@ -1939,10 +1941,10 @@ var useOptionProps = ({
   inputLabelId,
   ...props
 }) => {
-  const { selectedItem, selectedItems, isListbox, isItemSelected } = useMenuContentContext();
+  const { selectedItem, selectedItemIds, isListbox, isItemSelected } = useMenuContentContext();
   const selected = useMemo2(
     () => isItemSelected(id),
-    [selectedItem, selectedItems]
+    [selectedItem?.id, selectedItemIds]
   );
   const label = inputLabelId || `menu-item-child-${id}`;
   return isListbox ? {
@@ -2017,6 +2019,7 @@ var MenuItem = ({
     }
   ) });
 };
+MenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/MenuItem/MenuItemTypes.ts
 var INPUT_TYPES = {
@@ -2065,6 +2068,10 @@ var MenuTitleText = styled2.h3`
 var MenuChildrenContainer = styled2.div`
   grid-column: 1 / -1;
   margin-top: ${({ theme: theme2 }) => theme2.space[300]};
+
+  &:first-child {
+    margin-top: 0;
+  }
 `;
 var MenuHeaderFeatures = styled2.div`
   display: flex;
@@ -2098,8 +2105,9 @@ var MenuHeader = ({
   rightAction,
   ...rest
 }) => {
+  const showTopRow = title || leftAction || rightAction;
   return /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsxs2(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
-    /* @__PURE__ */ jsxs2(MenuHeaderFeatures, { $leftAction: !!leftAction, children: [
+    showTopRow && /* @__PURE__ */ jsxs2(MenuHeaderFeatures, { $leftAction: !!leftAction, children: [
       leftAction && leftAction,
       title && /* @__PURE__ */ jsx4(MenuTitleText, { $leftAction: !!leftAction, children: title }),
       rightAction && /* @__PURE__ */ jsx4("div", { className: "right-action", children: rightAction })
@@ -2135,8 +2143,8 @@ var walkAllChildren = (children, callback) => {
   });
 };
 var getComponentName = (element) => {
-  if (element && typeof element === "object" && "type" in element && typeof element.type !== "string" && typeof element.type.name === "string") {
-    return element.type.name;
+  if (element && typeof element === "object" && "type" in element && (typeof element.type === "function" || typeof element.type === "object") && "__MENU_PRIMITIVE_TYPE" in element.type && typeof element.type.__MENU_PRIMITIVE_TYPE === "string") {
+    return element.type.__MENU_PRIMITIVE_TYPE;
   }
 };
 var addMenuItem = ({
@@ -2217,8 +2225,6 @@ var setMenuItemsFromChildren = ({
   walkAllChildren(children, (element) => {
     switch (getComponentName(element)) {
       case "MenuItem":
-      case "SubmenuItem":
-      case "NestedMenuItem":
         const menuItem = element;
         if (menuItemsMap[`${menuItem.props.id}`]) return;
         addMenuItem({
@@ -2240,7 +2246,6 @@ var setMenuItemsFromChildren = ({
         });
         break;
       case "MenuContent":
-      case "NestedMenuContent":
         addItemsFromContent({
           // Cast element to the TypeMenuContentElement since we know it's a content and is needed for addItemsFromContent.
           contentElement: element,
@@ -2335,6 +2340,7 @@ var MenuContent = ({
     }
   );
 };
+MenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
 // src/MenuFooter/MenuFooter.tsx
 import "react";
@@ -2343,7 +2349,7 @@ import "react";
 import styled4 from "styled-components";
 import { Box as Box2 } from "@sproutsocial/seeds-react-box";
 var StyledMenuFooterBox = styled4(Box2)`
-  padding: ${(p) => p.theme.space[400]};
+  padding: ${({ theme: theme2 }) => theme2.space[350]} ${({ theme: theme2 }) => theme2.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;
 
@@ -2491,7 +2497,7 @@ var StyledMenuGroup = styled6.li`
   ${space}
 `;
 var StyledTitle = styled6(index_default.SmallSubHeadline)`
-  font-size: ${({ theme: theme2 }) => theme2.typography[200].fontSize};
+  font-size: ${({ theme: theme2 }) => theme2.typography[100].fontSize};
   margin: ${({ theme: theme2 }) => theme2.space[400]} ${({ theme: theme2 }) => theme2.space[400]}
     0px ${({ theme: theme2 }) => theme2.space[400]};
 `;
@@ -2534,9 +2540,10 @@ var MenuGroup = ({
     }
   );
 };
+MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback2, useEffect } from "react";
 import styled7 from "styled-components";
 import { Popout } from "@sproutsocial/seeds-react-popout";
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -2552,13 +2559,26 @@ var MenuRoot = ({
   width: width2 = "300px",
   ...contextProps
 }) => {
-  const { isOpen, openMenu, closeMenu } = contextProps;
+  const {
+    isOpen,
+    openMenu,
+    closeMenu,
+    inputValue,
+    hiddenItemsCount = 0,
+    items
+  } = contextProps;
   const setIsOpen = useCallback2(
     (newIsOpen) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
     },
     [openMenu, closeMenu]
   );
+  useEffect(() => {
+    if (!inputValue) return;
+    if (items && hiddenItemsCount >= items.length && isOpen) {
+      closeMenu?.();
+    }
+  }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
   const menuContext = useMenu(contextProps);
   return /* @__PURE__ */ jsx10(
     Popout,
@@ -2663,7 +2683,8 @@ var useItemFiltering = ({
 import { jsx as jsx13 } from "react/jsx-runtime";
 var MenuSearchInput = ({
   getIsItemVisible,
-  ...inputProps
+  inputProps,
+  ...restInputProps
 }) => {
   const {
     items,
@@ -2679,14 +2700,15 @@ var MenuSearchInput = ({
     setHiddenItemsMap
   });
   React11.useEffect(() => {
-    updateFilteredItems({ inputValue: inputProps.value || "" });
-  }, [isOpen, inputProps.value]);
+    updateFilteredItems({ inputValue: restInputProps.value || "" });
+  }, [isOpen, restInputProps.value]);
+  const toggleButtonProps = getToggleButtonProps?.() || {};
   const handleKeyDown = React11.useCallback(
     (e) => {
       if (e.key === " ") return;
-      getToggleButtonProps?.()["onKeyDown"](e);
+      toggleButtonProps.onKeyDown?.(e);
     },
-    [getToggleButtonProps]
+    [toggleButtonProps.onKeyDown]
   );
   return /* @__PURE__ */ jsx13(
     Input,
@@ -2696,7 +2718,13 @@ var MenuSearchInput = ({
       },
       onKeyDown: handleKeyDown,
       autoComplete: false,
-      ...inputProps
+      "aria-autocomplete": "list",
+      inputProps: {
+        ["aria-activedescendant"]: toggleButtonProps["aria-activedescendant"],
+        ["aria-controls"]: toggleButtonProps["aria-controls"],
+        ...inputProps
+      },
+      ...restInputProps
     }
   );
 };
@@ -2832,12 +2860,13 @@ var MenuSearchTokenInput = ({
   React13.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [isOpen]);
+  const toggleButtonProps = getToggleButtonProps?.() || {};
   const handleKeyDown = React13.useCallback(
     (e) => {
       if (e.key === " ") return;
-      getToggleButtonProps?.()["onKeyDown"](e);
+      toggleButtonProps.onKeyDown?.(e);
     },
-    [getToggleButtonProps]
+    [toggleButtonProps.onKeyDown]
   );
   return /* @__PURE__ */ jsx15(
     MenuTokenInput,
@@ -2849,6 +2878,8 @@ var MenuSearchTokenInput = ({
       onKeyDown: handleKeyDown,
       inputProps: {
         value: internalValue,
+        ["aria-activedescendant"]: toggleButtonProps["aria-activedescendant"],
+        ["aria-controls"]: toggleButtonProps["aria-controls"],
         ...inputProps
       },
       MenuContext: MenuContentContext,
@@ -3046,9 +3077,10 @@ var SubmenuItem = ({
     }
   );
 };
+SubmenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/ActionMenu/ActionMenu.tsx
-import React16, { useEffect } from "react";
+import React16, { useEffect as useEffect2 } from "react";
 import {
   useSelect as useSelect2
 } from "downshift";
@@ -3172,31 +3204,40 @@ var defaultUseSelectPropsForMulti = {
 var defaultUseComboboxPropsForMulti = {
   stateReducer: useComboboxStateReducerForMulti
 };
+var itemToKey2 = (item) => item?.id;
 var useDownshiftDefaults = ({
   isCombobox = false,
   isMulti = false,
   multiSelectProps = {}
 } = {}) => {
   const [hiddenItemsMap, setHiddenItemsMap] = React15.useState({});
+  const hiddenItemsCount = React15.useMemo(
+    () => Object.keys(hiddenItemsMap).filter(Boolean).length,
+    [hiddenItemsMap]
+  );
   const isItemDisabled = React15.useCallback(
     (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
     [hiddenItemsMap]
   );
   return {
     hiddenItemsMap,
+    hiddenItemsCount,
     setHiddenItemsMap,
     defaultDownshiftProps: {
       select: !isCombobox ? {
+        itemToKey: itemToKey2,
         // disabling while item.hidden so that hidden items are ignored by downshift
         isItemDisabled,
         ...isMulti ? defaultUseSelectPropsForMulti : defaultUseSelectProps
       } : {},
       combobox: isCombobox ? {
+        itemToKey: itemToKey2,
         // disabling while item.hidden so that hidden items are ignored by downshift
         isItemDisabled,
         ...isMulti ? defaultUseComboboxPropsForMulti : defaultUseComboboxProps
       } : {},
       multi: isMulti ? {
+        itemToKey: itemToKey2,
         // handles the prop name mapping for multi select
         ...getMultiSelectOverrides(multiSelectProps)
       } : {}
@@ -3264,7 +3305,7 @@ var ActionMenu = ({
     ),
     ...useSelectProps
   });
-  useEffect(() => {
+  useEffect2(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
   return /* @__PURE__ */ jsx17(
@@ -3504,7 +3545,7 @@ var MultiAutocomplete = ({
   menuItems,
   MenuItemComponent,
   itemToString: itemToString2 = itemToString,
-  itemToKey: itemToKey2 = itemToKey,
+  itemToKey: itemToKey3 = itemToKey,
   getIsItemVisible = getDefaultGetIsItemVisible(itemToString2),
   showSelectedItemsInDropdown = false,
   initialSelectedItems = [],
@@ -3557,7 +3598,7 @@ var MultiAutocomplete = ({
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = useMultipleSelection2({
     ...defaultDownshiftProps.multi,
-    itemToKey: itemToKey2,
+    itemToKey: itemToKey3,
     selectedItems,
     onSelectedItemsChange: ({ selectedItems: selectedItems2, ...changes }) => {
       setSelectedItems(selectedItems2);
@@ -3569,7 +3610,7 @@ var MultiAutocomplete = ({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString: itemToString2,
-    itemToKey: itemToKey2,
+    itemToKey: itemToKey3,
     stateReducer: reduceReducers(
       defaultDownshiftProps.combobox.stateReducer,
       externalStateReducer
@@ -3757,7 +3798,7 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
 };
 
 // src/NestedMenu/NestedMenuContent.tsx
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect3, useRef } from "react";
 import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities/src/index";
 
 // src/NestedMenu/NestedMenuItem.tsx
@@ -3782,6 +3823,7 @@ var NestedMenuItem = ({
     childMenuId && /* @__PURE__ */ jsx26(MenuItemActionRight, { children: /* @__PURE__ */ jsx26(Icon4, { name: "arrow-right-outline" }) })
   ] }) });
 };
+NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
 import { jsx as jsx27 } from "react/jsx-runtime";
@@ -3798,7 +3840,7 @@ var NestedMenuContent = ({
   const internalRef = useRef(null);
   const innerRef = mergeRefs2(internalRef, innerRefProp);
   const contentProps = children ? { children } : { menuItems, MenuItemComponent };
-  useEffect2(() => {
+  useEffect3(() => {
     internalRef?.current?.focus();
   }, []);
   const onKeyDown = (e) => {
@@ -3831,6 +3873,7 @@ var NestedMenuContent = ({
     }
   );
 };
+NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
 // src/NestedMenu/NestedMenu.tsx
 import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";