@sproutsocial/seeds-react-menu 0.4.1 → 0.6.0

package/src/reducers/useSelectStateReducer.tsx

@@ -1,9 +1,10 @@
 import { useSelect } from "downshift";
 import type { UseSelectProps } from "downshift";
-import type { TypeDefaultItemProps } from "../types";
+import type { TypeInternalItemProps } from "../types";
+import { reduceReducers } from "../utils/reduceReducers";
 
 export const useSelectStateReducer: Required<
-  UseSelectProps<TypeDefaultItemProps>
+  UseSelectProps<TypeInternalItemProps>
 >["stateReducer"] = (state, actionAndChanges) => {
   const { type, changes } = actionAndChanges;
   switch (type) {
@@ -21,7 +22,24 @@ export const useSelectStateReducer: Required<
   }
 };
 
-export const defaultUseSelectProps = {
-  stateReducer: useSelectStateReducer,
-  isItemDisabled: (item) => !!item.disabled,
-};
+export const useSelectStateReducerForMulti: Required<
+  UseSelectProps<TypeInternalItemProps>
+>["stateReducer"] = reduceReducers(
+  useSelectStateReducer,
+  (state, actionAndChanges) => {
+    const { changes, type } = actionAndChanges;
+    switch (type) {
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+      case useSelect.stateChangeTypes.ItemClick:
+        return {
+          ...changes,
+          isOpen: true, // keep the menu open after selection.
+          // TODO: Confirm that keeping highlightedIndex the same is the desired UX
+          // highlightedIndex: 0, // with the first option highlighted.
+          highlightedIndex: state.highlightedIndex, // keep highlightedIndex the same instead of returning to 0
+        };
+    }
+    return changes;
+  }
+);

package/src/storybookUtilities/menu-storybook-components.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
 import { Icon } from "@sproutsocial/seeds-react-icon";
-import { useMenuContext, MenuToggleButton } from "../index";
+import { useMenuToggleContext, MenuToggleButton } from "../index";
 
 export interface TypeStyledChevronProps {
   $isOpen?: boolean;
@@ -19,15 +19,17 @@ const StyledChevron = styled.div<TypeStyledChevronProps>`
 
 interface StorybookMenuToggleButtonProps {
   buttonText?: string;
+  buttonProps?: Partial<React.ComponentProps<typeof MenuToggleButton>>;
 }
 
 export const StorybookMenuToggleButton = ({
   buttonText,
+  buttonProps,
 }: StorybookMenuToggleButtonProps) => {
-  const { isOpen } = useMenuContext();
+  const { isOpen } = useMenuToggleContext();
 
   return (
-    <MenuToggleButton appearance="secondary">
+    <MenuToggleButton appearance="secondary" {...buttonProps}>
       <Box display="flex" justifyContent="space-between">
         {buttonText ? buttonText : <span>Select book</span>}
         <StyledChevron $isOpen={isOpen}>

package/src/types.ts

@@ -1,16 +1,49 @@
+import type { UseComboboxGetInputPropsOptions } from "downshift";
 import type { TypeMenuItemProps } from "./MenuItem";
-import type { TypeMenuGroupProps } from "./MenuGroup";
+import type { TypeMenuGroupBaseProps } from "./MenuGroup";
+import type { TypeMenuRootProps } from "./MenuRoot";
 
-export interface TypeDefaultItemProps {
+// The items object used internally for Menu functionality
+export interface TypeInternalItemProps<Item = TypeMenuItemProps> {
   id: string;
   index: number;
   disabled?: boolean;
-  hidden?: boolean;
-  menuItemProps?: TypeMenuItemProps;
-  menuGroupProps?: TypeMenuGroupProps;
+  menuItemProps?: Item;
+  menuGroupProps?: TypeMenuGroupBaseProps;
 }
 
+export type TypeChildrenOrItems<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> =
+  | {
+      /** Allows menu items to be passed in as children. Cannot be used with the items prop.*/
+      children: TypeMenuRootProps["children"];
+      menuItems?: never;
+      MenuItemComponent?: never;
+    }
+  | {
+      children?: never;
+      /** Allows menu items to be passed in as objects. Cannot be used with the children prop.*/
+      menuItems: I[];
+      /** Allows a custom MenuItem component to be used when rendering using the items prop.*/
+      MenuItemComponent?: React.ComponentType<I>;
+    };
+
 export type TypeNotEmptyChildren =
   | React.ReactChild
   | React.ReactFragment
   | React.ReactPortal;
+
+type TypeInputEventListeners =
+  | "onKeyDown"
+  | "onChange"
+  | "onInput"
+  | "onBlur"
+  | "onClick"
+  | "refKey";
+
+export type TypeDownshiftMergedInputProps<B> = Pick<
+  UseComboboxGetInputPropsOptions,
+  TypeInputEventListeners
+> &
+  Omit<Partial<B>, TypeInputEventListeners>;

package/src/utils/downshiftDefaults.ts

@@ -0,0 +1,9 @@
+import type { TypeInternalItemProps } from "../types";
+
+export const itemToString = (item: TypeInternalItemProps | null) => {
+  return item ? item.id : "";
+};
+
+export const itemToKey = (item: TypeInternalItemProps | null) => {
+  return item ? item.id : "";
+};

package/src/utils/getMultiSelectOverrides.ts

@@ -0,0 +1,21 @@
+import type { TypeDownshiftMultiSelectProps } from "../MenuContext";
+
+export const getMultiSelectOverrides = ({
+  getA11yMultiStatusMessage,
+  onMultiSelectStateChange,
+  multiSelectStateReducer,
+  ...useSelectProps
+}: TypeDownshiftMultiSelectProps) =>
+  Object.entries({
+    ...useSelectProps,
+    getA11yStatusMessage: getA11yMultiStatusMessage,
+    onStateChange: onMultiSelectStateChange,
+    stateReducer: multiSelectStateReducer,
+  }).reduce(
+    (a, [k, v]) => (v ? ((a[k] = v), a) : a),
+    {} as {
+      getA11yStatusMessage?: TypeDownshiftMultiSelectProps["getA11yMultiStatusMessage"];
+      onStateChange?: TypeDownshiftMultiSelectProps["onMultiSelectStateChange"];
+      stateReducer?: TypeDownshiftMultiSelectProps["multiSelectStateReducer"];
+    }
+  );

package/src/utils/reduceReducers.ts

@@ -0,0 +1,19 @@
+export type TypeReducer<S extends Object, A extends { changes: Partial<S> }> = (
+  state: S,
+  action: A
+) => Partial<S>;
+export const reduceReducers =
+  <S extends Object, A extends { changes: Partial<S> }>(
+    ...reducers: (undefined | TypeReducer<S, A>)[]
+  ): TypeReducer<S, A> =>
+  (state, action) =>
+    reducers.reduce(
+      (changes, nextReducer) =>
+        nextReducer
+          ? nextReducer(state, {
+              ...action,
+              changes,
+            })
+          : changes,
+      action.changes as Partial<S>
+    );

package/src/hooks/useItemsFromChildren.tsx

@@ -1,131 +0,0 @@
-import React, { type ReactNode, useMemo } from "react";
-import { MenuItem, type TypeMenuItemProps } from "../MenuItem";
-import type { TypeMenuContext } from "../MenuContext";
-import type { TypeMenuGroupProps } from "../MenuGroup/index";
-import type { TypeDefaultItemProps } from "../types";
-
-export interface TypeUseItemsFromChildrenProps {
-  children: ReactNode;
-}
-export type TypeItemElement = React.ReactElement<TypeMenuItemProps>;
-export type TypeMenuGroupElement = React.ReactElement<TypeMenuGroupProps>;
-
-export interface TypeMenuChildren {
-  type: "item" | "group";
-  element:
-    | React.ReactElement<TypeMenuGroupProps>
-    | React.ReactElement<TypeMenuItemProps>;
-}
-
-// https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
-const walkAllChildren = (
-  children: ReactNode,
-  callback: (element: ReactNode, parents: readonly ReactNode[]) => void
-) => {
-  const walk = (element: ReactNode, parents: readonly ReactNode[]) => {
-    if (element === null || element === undefined) return;
-    callback(element, parents);
-    const newParents = [...parents, element];
-    const children = (element as any).props?.children;
-    React.Children.toArray(children).forEach((child) => {
-      walk(child, newParents);
-    });
-  };
-  const parents = [];
-  React.Children.toArray(children).forEach((child) => {
-    walk(child, parents);
-  });
-};
-
-const checkIfIsElement = (element: ReactNode, name: string): boolean => {
-  return !!(
-    element &&
-    typeof element === "object" &&
-    "type" in element &&
-    typeof element.type !== "string" &&
-    typeof element.type.name === "string" &&
-    element.type.name === name
-  );
-};
-
-const getAllMenuItems = (children: ReactNode) => {
-  const orderedElements: TypeMenuChildren[] = [];
-  walkAllChildren(children, (element) => {
-    if (checkIfIsElement(element, "MenuItem")) {
-      orderedElements.push({
-        type: "item",
-        element: element as TypeItemElement,
-      });
-    } else if (checkIfIsElement(element, "MenuGroup")) {
-      orderedElements.push({
-        type: "group",
-        element: element as TypeItemElement,
-      });
-    }
-  });
-  return { orderedElements };
-};
-
-export const useItemsFromChildren = ({
-  children,
-}: TypeUseItemsFromChildrenProps) => {
-  const { allMenuItems, menuItemsMap } = useMemo(() => {
-    const { orderedElements } = getAllMenuItems(children);
-    const menuItemsMap: TypeMenuContext["itemsMap"] = {};
-    const allMenuItems: TypeDefaultItemProps[] = [];
-    let index = 0;
-
-    orderedElements.forEach(({ type, element }) => {
-      if (type === "group") {
-        const menuGroup = element as TypeMenuGroupElement;
-        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,
-            };
-            allMenuItems.push(item);
-            menuItemsMap[`${item.id}`] = item;
-          });
-        } else if (menuGroup.props.children) {
-          let children = menuGroup.props.children as TypeItemElement[];
-          // If there is only one child, it will be an object. Make it an array.
-          if (!Array.isArray(children)) {
-            children = [children];
-          }
-          children.forEach((menuItem) => {
-            const item = {
-              id: menuItem.props.id,
-              index: index++,
-              disabled: menuItem.props.disabled,
-              menuItemProps: menuItem.props,
-              menuGroupProps: element.props,
-            };
-            allMenuItems.push(item);
-            menuItemsMap[`${item.id}`] = item;
-          });
-        }
-      } else {
-        // Items in groups would have already been added to the map.
-        if (menuItemsMap[`${element.props.id}`]) return;
-        const menuItem = element as TypeItemElement;
-        const item = {
-          id: menuItem.props.id,
-          index: index++,
-          disabled: menuItem.props.disabled,
-          menuItemProps: menuItem.props,
-        };
-        allMenuItems.push(item);
-        menuItemsMap[`${item.id}`] = item;
-      }
-    });
-
-    return { allMenuItems, menuItemsMap };
-  }, [children]);
-
-  return { allMenuItems, menuItemsMap };
-};

package/src/utils/itemToString.ts

@@ -1,5 +0,0 @@
-import type { TypeDefaultItemProps } from "../types";
-
-export const itemToString = (item: TypeDefaultItemProps | null) => {
-  return item ? item.id : "";
-};