@sproutsocial/seeds-react-menu 0.5.0 → 1.0.0

package/src/reducers/nestedMenuStateReducer.tsx

@@ -0,0 +1,23 @@
+import { useCombobox, useSelect } from "downshift";
+
+export const nestedMenuStateReducer = (_state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  const hasChildMenu = !!changes?.selectedItem?.menuItemProps?.childMenuId;
+  if (!hasChildMenu) {
+    return changes;
+  }
+  switch (type) {
+    case useSelect.stateChangeTypes.ToggleButtonBlur:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case useSelect.stateChangeTypes.ItemClick:
+    case useCombobox.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true,
+        highlightedIndex: 0,
+      };
+    default:
+      return changes;
+  }
+};

package/src/reducers/useComboboxStateReducer.tsx

@@ -1,11 +1,13 @@
 import { useCombobox } from "downshift";
 import type { UseComboboxProps } from "downshift";
-import type { TypeDefaultItemProps } from "../types";
+import type { TypeInternalItemProps } from "../types";
+import { reduceReducers } from "../utils/reduceReducers";
 
 export const useComboboxStateReducer: Required<
-  UseComboboxProps<TypeDefaultItemProps>
+  UseComboboxProps<TypeInternalItemProps>
 >["stateReducer"] = (state, actionAndChanges) => {
   const { type, changes } = actionAndChanges;
+
   switch (type) {
     /** If downshift is blurred by tabbing within the menu, stay open */
     case useCombobox.stateChangeTypes.InputBlur:
@@ -21,9 +23,25 @@ export const useComboboxStateReducer: Required<
   }
 };
 
-export const defaultUseComboboxProps: Partial<
-  UseComboboxProps<TypeDefaultItemProps>
-> = {
-  // disabling while item.hidden so that hidden items are ignored by downshift
-  isItemDisabled: (item) => Boolean(item.disabled || item.hidden),
-};
+export const useComboboxStateReducerForMulti: Required<
+  UseComboboxProps<TypeInternalItemProps>
+>["stateReducer"] = reduceReducers(
+  useComboboxStateReducer,
+  (state, actionAndChanges) => {
+    const { changes, type } = actionAndChanges;
+
+    switch (type) {
+      case useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case useCombobox.stateChangeTypes.ItemClick:
+      case useCombobox.stateChangeTypes.InputBlur:
+        return {
+          ...changes,
+          ...(changes.selectedItem && {
+            inputValue: "",
+          }),
+        };
+      default:
+        return changes;
+    }
+  }
+);

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,41 +1,49 @@
-import { type TypeMenuItemProps } from "./MenuItem";
-import type { TypeMenuGroupProps } from "./MenuGroup";
-import type { TypeMenuRootProps } from "./MenuRoot/index";
+import type { UseComboboxGetInputPropsOptions } from "downshift";
+import type { TypeMenuItemProps } from "./MenuItem";
+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;
 }
 
-/* The base type, which is narrowed to specific configurations.*/
-type TypeBaseChildrenOrItems = {
-  /** Allows menu items to be passed in as children. Cannot be used with the items prop.*/
-  children?: TypeMenuRootProps["children"];
-  /** Allows menu items to be passed in as objects. Cannot be used with the children prop.*/
-  items?: TypeMenuItemProps[];
-  /** Allows a custom MenuItem component to be used when rendering using the items prop.*/
-  MenuItemComponent?: React.ComponentType<TypeMenuItemProps>;
-};
-
-type TypePropsWithChildren = {
-  children: TypeMenuRootProps["children"];
-  items?: never;
-  MenuItemComponent?: never;
-};
-
-type TypePropsWithItems = {
-  children?: never;
-  items: TypeMenuItemProps[];
-};
-
-export type TypeChildrenOrItems = TypeBaseChildrenOrItems &
-  (TypePropsWithChildren | TypePropsWithItems);
+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/utils/itemToString.ts

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