@sproutsocial/seeds-react-menu 0.6.0 → 1.0.0

package/src/SingleSelectMenu/SingleSelectMenu.stories.tsx

@@ -164,36 +164,42 @@ export const SingleSelectWithIcons: Story = {
   },
 };
 
+const TestControlledSingleSelectMenu = ({
+  inputType,
+  ...args
+}: CustomSingleSelectArgs) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selectedItem, setSelectedItem] =
+    React.useState<TypeInternalItemProps | null>(null);
+  return (
+    <SingleSelectMenu
+      isOpen={isOpen}
+      onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+      selectedItem={selectedItem}
+      onSelectedItemChange={({ selectedItem: newSelectedItem }) => {
+        setSelectedItem(newSelectedItem);
+      }}
+      itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+      menuToggleElement={<StorybookMenuToggleButton />}
+      {...(args as object)}
+    >
+      <MenuContent>
+        <MenuGroup id="books">
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id} inputType={inputType}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuGroup>
+      </MenuContent>
+    </SingleSelectMenu>
+  );
+};
 export const SingleSelectControlled: Story = {
   name: "Controlled State",
-  render: ({ inputType, ...args }) => {
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
-    const [selectedItem, setSelectedItem] =
-      React.useState<TypeInternalItemProps | null>(null);
-    return (
-      <SingleSelectMenu
-        isOpen={isOpen}
-        onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
-        selectedItem={selectedItem}
-        onSelectedItemChange={({ selectedItem: newSelectedItem }) => {
-          setSelectedItem(newSelectedItem);
-        }}
-        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
-        menuToggleElement={<StorybookMenuToggleButton />}
-        {...(args as object)}
-      >
-        <MenuContent>
-          <MenuGroup id="books">
-            {TEST_BOOKS.map(({ id, title }) => (
-              <MenuItem key={id} id={id} inputType={inputType}>
-                {title}
-              </MenuItem>
-            ))}
-          </MenuGroup>
-        </MenuContent>
-      </SingleSelectMenu>
-    );
-  },
+  render: (args: CustomSingleSelectArgs) => (
+    <TestControlledSingleSelectMenu {...args} />
+  ),
 };
 
 export const SingleSelectMenuWithSearch: Story = {

package/src/SubmenuItem/SubmenuItem.tsx

@@ -65,7 +65,7 @@ const doesRefContainEventTarget = (
   );
 };
 
-export const SubmenuItem = <
+const SubmenuItem = <
   I extends TypeMenuItemProps,
   P extends TypeSubmenuValidMenuComponentProps<I>
 >({
@@ -252,3 +252,7 @@ export const SubmenuItem = <
     />
   );
 };
+
+SubmenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
+
+export { SubmenuItem };

package/src/hooks/useDownshiftDefaults.tsx

@@ -46,7 +46,7 @@ export const defaultUseComboboxPropsForMulti: Partial<
 export interface TypeUseDownshiftDefaultsReturn
   extends Pick<
     Required<TypeMenuContextBaseProps>,
-    "hiddenItemsMap" | "setHiddenItemsMap"
+    "hiddenItemsMap" | "setHiddenItemsMap" | "hiddenItemsCount"
   > {
   defaultDownshiftProps: {
     select: Partial<UseSelectProps<TypeInternalItemProps>>;
@@ -55,6 +55,8 @@ export interface TypeUseDownshiftDefaultsReturn
   };
 }
 
+export const itemToKey = (item: TypeInternalItemProps | null) => item?.id;
+
 export const useDownshiftDefaults = ({
   isCombobox = false,
   isMulti = false,
@@ -67,6 +69,10 @@ export const useDownshiftDefaults = ({
   const [hiddenItemsMap, setHiddenItemsMap] = React.useState<
     Record<string, boolean>
   >({});
+  const hiddenItemsCount = React.useMemo(
+    () => Object.keys(hiddenItemsMap).filter(Boolean).length,
+    [hiddenItemsMap]
+  );
   const isItemDisabled = React.useCallback<
     Required<UseSelectProps<TypeInternalItemProps>>["isItemDisabled"]
   >(
@@ -76,10 +82,12 @@ export const useDownshiftDefaults = ({
 
   return {
     hiddenItemsMap,
+    hiddenItemsCount,
     setHiddenItemsMap,
     defaultDownshiftProps: {
       select: !isCombobox
         ? {
+            itemToKey,
             // disabling while item.hidden so that hidden items are ignored by downshift
             isItemDisabled,
             ...(isMulti
@@ -89,6 +97,7 @@ export const useDownshiftDefaults = ({
         : {},
       combobox: isCombobox
         ? {
+            itemToKey,
             // disabling while item.hidden so that hidden items are ignored by downshift
             isItemDisabled,
             ...(isMulti
@@ -98,6 +107,7 @@ export const useDownshiftDefaults = ({
         : {},
       multi: isMulti
         ? {
+            itemToKey,
             // handles the prop name mapping for multi select
             ...getMultiSelectOverrides(multiSelectProps),
           }

package/src/hooks/useItemFiltering.tsx

@@ -45,6 +45,7 @@ export const useItemFiltering = ({
   const [hiddenItemsMap, setHiddenItemsMap] = React.useState<
     Required<TypeMenuContext>["hiddenItemsMap"]
   >({});
+
   const updateFilteredItems = React.useCallback(
     ({ inputValue }) => {
       const newHiddenItems = getShouldFilter({ inputValue })
@@ -53,6 +54,7 @@ export const useItemFiltering = ({
             return isItemVisible ? map : { ...map, [item.id]: true };
           }, {} as typeof hiddenItemsMap)
         : {};
+
       setHiddenItemsMap(newHiddenItems);
       setHiddenItemsMapProp?.(newHiddenItems);
     },

package/src/hooks/useMenuChildren.tsx

@@ -57,18 +57,21 @@ const walkAllChildren = (
   });
 };
 
+// get the name from our custom __MENU_PRIMITIVE_TYPE property
 const getComponentName = (element: ReactNode): string | undefined => {
   if (
     element &&
     typeof element === "object" &&
     "type" in element &&
-    typeof element.type !== "string" &&
-    typeof element.type.name === "string"
+    (typeof element.type === "function" || typeof element.type === "object") &&
+    "__MENU_PRIMITIVE_TYPE" in element.type &&
+    typeof element.type.__MENU_PRIMITIVE_TYPE === "string"
   ) {
-    return element.type.name;
+    return element.type.__MENU_PRIMITIVE_TYPE;
   }
 };
 
+// Add a menu item to the provided allMenuItems array and menuItemsMap object
 const addMenuItem = ({
   itemProps,
   allMenuItems,
@@ -86,6 +89,7 @@ const addMenuItem = ({
   menuItemsMap[`${item.id}`] = item;
 };
 
+// Add items from a MenuGroup element to the allMenuItems array and menuItemsMap object
 const addItemsFromGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   groupElement: menuGroup,
   allMenuItems,
@@ -130,6 +134,7 @@ const addItemsFromGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   }
 };
 
+// Add items from a MenuContent element to the allMenuItems array and menuItemsMap object
 const addItemsFromContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   contentElement: menuContent,
   allMenuItems,
@@ -160,6 +165,7 @@ const addItemsFromContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   }
 };
 
+// Traverse the children of a Menu component and add items to the allMenuItems array and menuItemsMap object
 const setMenuItemsFromChildren = ({
   children,
   allMenuItems,
@@ -172,8 +178,6 @@ const setMenuItemsFromChildren = ({
   walkAllChildren(children, (element) => {
     switch (getComponentName(element)) {
       case "MenuItem":
-      case "SubmenuItem":
-      case "NestedMenuItem":
         // Cast element to the TypeItemElement since we know it's one of the three.
         // This is needed for the addMenuItem function.
         const menuItem = element as TypeItemElement;
@@ -198,7 +202,6 @@ const 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 as TypeMenuContentElement,
@@ -233,6 +236,7 @@ type TypeUseMenuChildrenProps<I extends TypeMenuItemProps = TypeMenuItemProps> =
     MenuItemComponent?: React.ComponentType<I>;
   };
 
+// Return a MenuContent using the provided menuItems
 export const getChildrenFromMenuItems = <
   I extends TypeMenuItemProps = TypeMenuItemProps
 >({
@@ -245,6 +249,7 @@ export const getChildrenFromMenuItems = <
   <MenuContent menuItems={menuItems} MenuItemComponent={MenuItemComponent} />
 );
 
+// Hook to get all menu items and children for a Menu component
 export const useMenuChildren = <
   I extends TypeMenuItemProps = TypeMenuItemProps
 >({