@sproutsocial/seeds-react-menu 0.1.0

package/src/hooks/useItemsFromChildren.tsx

@@ -0,0 +1,81 @@
+import React, { type ReactNode, useMemo } from "react";
+import type { TypeItemElements } from "../types";
+import type { TypeMenuContext } from "../MenuContext";
+
+export interface TypeUseItemsFromChildrenProps {
+  children: ReactNode;
+}
+
+// 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;
+    // console.log("element", element);
+    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 allMenuItems: TypeItemElements[] = [];
+  // console.log("children", children);
+  walkAllChildren(children, (element, parents) => {
+    if (
+      checkIfIsElement(element, "MenuItem") ||
+      checkIfIsElement(element, "MenuItemSelectable")
+    ) {
+      allMenuItems.push({
+        element: element as TypeItemElements["element"],
+        parents,
+      });
+    }
+  });
+  return allMenuItems;
+};
+
+export const useItemsFromChildren = ({
+  children,
+}: TypeUseItemsFromChildrenProps) => {
+  const { allMenuItems, menuItemsMap } = useMemo(() => {
+    const allMenuItemElements = getAllMenuItems(children);
+    const menuItemsMap: TypeMenuContext["itemsMap"] = {};
+    const allMenuItems: TypeMenuContext["items"] = allMenuItemElements.map(
+      ({ element, parents }, index) => {
+        const item = {
+          id: element.props.id,
+          disabled: element.props.disabled,
+          index,
+          element,
+          parents,
+        };
+        menuItemsMap[`${item.id}`] = item;
+        return item;
+      }
+    );
+    return { allMenuItems, menuItemsMap };
+  }, [children]);
+
+  return { allMenuItems, menuItemsMap };
+};

package/src/index.ts

@@ -0,0 +1,20 @@
+// Primitives
+export * from "./MenuItem";
+export * from "./MenuItemSelectable";
+export * from "./MenuHeader";
+export * from "./MenuContent";
+export * from "./MenuFooter";
+export * from "./MenuGroup";
+export * from "./MenuRoot";
+export * from "./MenuLabel";
+export * from "./MenuToggleButton";
+
+// Menus
+export * from "./ActionMenu";
+export * from "./SingleSelectMenu";
+export * from "./MultiSelectMenu";
+
+// Utilities
+export * from "./MenuContext";
+export * from "./hooks/useItemsFromChildren";
+export * from "./reducers/useSelectStateReducer";

package/src/menuTestingUtils.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  MenuContext,
+  MenuRoot,
+  type TypeMenuContextProps,
+  type TypeMenuContext,
+  type TypeMenuRootProps,
+} from "./index";
+
+export const testDefaultContext = (
+  context: Partial<TypeMenuContextProps> = {}
+): TypeMenuContext => ({
+  items: [],
+  itemsMap: context.items
+    ? context.items.reduce((map, item) => {
+        map[`${item.id}`] = item;
+        return map;
+      }, {} as TypeMenuContext["itemsMap"])
+    : {},
+  // TODO: Make type on MenuContext more agnostic for other use cases
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error - mocked function does not match real type
+  getItemProps: (props) => ({ role: "option", ...props }),
+  isListbox: true,
+  ...context,
+});
+
+/**
+ * TestWithMenuRoot
+ * Given children and context, render the children with the MenuRoot component.
+ * Used for integration testing components with the real MenuProvider and MenuRoot.
+ *
+ * @param props - valid context props to override the defaults for the MenuProvider and any other MenuRoot props
+ * @returns - test component using the MenuRoot
+ */
+export const TestWithMenuRoot = ({
+  children,
+  triggerElement,
+  ...props
+}: {
+  children: TypeMenuRootProps["children"];
+  triggerElement: TypeMenuRootProps["triggerElement"];
+} & Partial<Omit<TypeMenuRootProps, "children" | "triggerElement">>) => {
+  return (
+    <MenuRoot triggerElement={triggerElement} {...testDefaultContext(props)}>
+      {children}
+    </MenuRoot>
+  );
+};
+
+/**
+ * TestWithMockedMenu
+ * Given a children and context, render the children with the raw MenuContext with a mocked value.
+ * Used for unit testing components without the real MenuProvider or MenuRoot.
+ *
+ * @param children - react children to be loaded inside of the MenuContext.Provider
+ * @param context - mocked context props to override the testDefaultContext
+ * @returns - rendered component with mocked MenuContext
+ */
+export const TestWithMockedMenu = ({
+  children,
+  context = {},
+}: {
+  children: React.ReactNode;
+  context: Partial<TypeMenuContextProps>;
+}) => {
+  return (
+    <MenuContext.Provider value={testDefaultContext(context)}>
+      {children}
+    </MenuContext.Provider>
+  );
+};

package/src/reducers/__tests__/useSelectStateReducer.test.tsx

@@ -0,0 +1,37 @@
+import { useSelect } from "downshift";
+
+import { useSelectStateReducer } from "../useSelectStateReducer";
+
+const defaultTestState = {
+  isOpen: false,
+  highlightedIndex: -1,
+  selectedItem: null,
+  inputValue: "",
+};
+
+describe("useSelectStateReducer", () => {
+  it("should keep isOpen true when the type is ToggleButtonBlur", () => {
+    const state = { ...defaultTestState, isOpen: true, highlightedIndex: 1 };
+    const changes = { isOpen: false, highlightedIndex: -1 };
+    const type = useSelect.stateChangeTypes.ToggleButtonBlur;
+
+    const result = useSelectStateReducer(state, { type, changes });
+
+    expect(result).toEqual({
+      ...changes,
+      isOpen: true,
+    });
+  });
+
+  it("should make no changes when the type is not ToggleButtonBlur", () => {
+    const state = { ...defaultTestState, isOpen: true, highlightedIndex: 1 };
+    const changes = { isOpen: false, highlightedIndex: -1 };
+    const type = useSelect.stateChangeTypes.FunctionToggleMenu;
+
+    const result = useSelectStateReducer(state, { type, changes });
+
+    expect(result).toEqual({
+      ...changes,
+    });
+  });
+});

package/src/reducers/useSelectStateReducer.tsx

@@ -0,0 +1,27 @@
+import { useSelect } from "downshift";
+import type { UseSelectProps } from "downshift";
+import type { TypeDefaultItemProps } from "../types";
+
+export const useSelectStateReducer: Required<
+  UseSelectProps<TypeDefaultItemProps>
+>["stateReducer"] = (state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  switch (type) {
+    /** If downshift is blurred by tabbing within the menu, stay open */
+    case useSelect.stateChangeTypes.ToggleButtonBlur:
+      return {
+        ...changes,
+        // keep menu open on blur
+        isOpen: true,
+      };
+
+    /** Return standard change payload */
+    default:
+      return changes;
+  }
+};
+
+export const defaultUseSelectProps = {
+  stateReducer: useSelectStateReducer,
+  isItemDisabled: (item) => !!item.disabled,
+};

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/types.ts

@@ -0,0 +1,16 @@
+import type { TypeMenuItemProps } from "./MenuItem";
+
+export interface TypeItemElements {
+  element: React.ReactElement<TypeMenuItemProps>;
+  parents: readonly React.ReactNode[];
+}
+export interface TypeDefaultItemProps extends Partial<TypeItemElements> {
+  id: string;
+  index: number;
+  disabled?: boolean;
+}
+
+export type TypeNotEmptyChildren =
+  | React.ReactChild
+  | React.ReactFragment
+  | React.ReactPortal;

package/src/utils/itemToString.ts

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

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/react-library.json",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "noUncheckedIndexedAccess": false,
+    "baseUrl": ".",
+    "types": ["@testing-library/jest-dom"],
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: false,
+  sourcemap: true,
+  external: ["react"],
+});