@sproutsocial/seeds-react-menu 1.0.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -21,17 +21,17 @@
     "@sproutsocial/seeds-react-button": "^1.2.1",
     "@sproutsocial/seeds-react-checkbox": "^1.3.1",
     "@sproutsocial/seeds-react-icon": "^1.1.2",
-    "@sproutsocial/seeds-react-input": "^1.4.1",
+    "@sproutsocial/seeds-react-input": "^1.4.2",
     "@sproutsocial/seeds-react-label": "^1.0.1",
-    "@sproutsocial/seeds-react-popout": "^2.1.1",
+    "@sproutsocial/seeds-react-popout": "^2.2.0",
     "@sproutsocial/seeds-react-radio": "^1.3.0",
     "@sproutsocial/seeds-react-switch": "^1.2.1",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
     "@sproutsocial/seeds-react-theme": "^2.3.0",
-    "@sproutsocial/seeds-react-token-input": "^1.3.0",
+    "@sproutsocial/seeds-react-token-input": "^1.4.0",
     "@sproutsocial/seeds-react-utilities": "^4.2.0",
     "downshift": "9.0.4",
-    "motion": "^11.11.17"
+    "motion": "^12.6.3"
   },
   "devDependencies": {
     "@sproutsocial/seeds-react-tooltip": "^1.0.1",

package/src/ActionMenu/ActionMenu.tsx

@@ -9,7 +9,7 @@ import { useMenuChildren } from "../hooks/useMenuChildren";
 import { useDownshiftDefaults } from "../hooks/useDownshiftDefaults";
 import { reduceReducers } from "../utils/reduceReducers";
 import { itemToString } from "../utils/downshiftDefaults";
-import { MenuRoot, type TypeMenuRootProps } from "../MenuRoot";
+import { MenuRoot } from "../MenuRoot";
 import type { TypeMenuItemProps } from "../MenuItem";
 
 import type { TypeActionMenuProps } from "./ActionMenuTypes";
@@ -86,6 +86,7 @@ export const ActionMenu = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   menuItems,
   MenuItemComponent,
   stateReducer: externalStateReducer,
+  MenuRootComponent = MenuRoot,
   ...useSelectProps
 }: TypeActionMenuProps<I>) => {
   const { allMenuItems, menuItemsMap, children } = useMenuChildren({
@@ -116,7 +117,7 @@ export const ActionMenu = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   }, [useSelectReturnProps.selectedItem]);
 
   return (
-    <MenuRoot
+    <MenuRootComponent
       {...{
         isListbox: false,
         items: allMenuItems,
@@ -129,7 +130,7 @@ export const ActionMenu = <I extends TypeMenuItemProps = TypeMenuItemProps>({
       }}
     >
       {children}
-    </MenuRoot>
+    </MenuRootComponent>
   );
 };
 

package/src/ActionMenu/ActionMenuTypes.ts

@@ -1,15 +1,16 @@
-import { type TypeMenuRootOwnProps } from "../MenuRoot";
 import type { TypeDownshiftSelectProps } from "../MenuContext";
-import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeMenuItemProps } from "../MenuItem";
-import type { TypeChildrenOrItems } from "../types";
+import type {
+  TypeChildrenOrItems,
+  TypeHigherOrderComponentProps,
+} from "../types";
 
 type TypeInvalidMenuProps =
   // There is no selection state on action menus.
   "initialSelectedItem" | "defaultSelectedItem" | "selectedItem";
 
 export interface TypeActionMenuBaseProps
-  extends TypeMenuRootOwnProps,
+  extends TypeHigherOrderComponentProps,
     Omit<TypeDownshiftSelectProps, TypeInvalidMenuProps> {}
 
 export type TypeActionMenuProps<

package/src/ActionMenu/__tests__/ActionMenu.test.tsx

@@ -5,8 +5,8 @@ import {
   screen,
   waitFor,
   act,
+  PointerEventsCheckLevel,
 } from "@sproutsocial/seeds-react-testing-library";
-import { PointerEventsCheckLevel } from "@testing-library/user-event";
 import { type UserEvent } from "@testing-library/user-event";
 import { ActionMenu } from "../ActionMenu";
 import { MenuContent, MenuItem, MenuToggleButton } from "../../index";

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -5,7 +5,15 @@ import { action } from "@storybook/addon-actions";
 
 import { Box } from "@sproutsocial/seeds-react-box";
 import { Icon } from "@sproutsocial/seeds-react-icon";
-import { MenuContent, MenuItem, MenuLabel, MenuToggleButton } from "../index";
+import {
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuToggleButton,
+  type TypeInternalItemProps,
+  AutocompleteSelect,
+} from "../index";
 // eslint-disable-next-line no-restricted-imports
 import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
 
@@ -154,34 +162,118 @@ export const AutocompleteTokenInputExample: Story = {
   },
 };
 
-// export const AutocompleteControlled: Story = {
-//   name: "Controlled State",
-//   render: ({ inputType, ...args }) => {
-//     const [isOpen, setIsOpen] = React.useState<boolean>(false);
-//     const [selectedItem, setSelectedItem] =
-//       React.useState<TypeInternalItemProps | null>(null);
-//     return (
-//       <Autocomplete
-//         isOpen={isOpen}
-//         onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
-//         selectedItem={selectedItem}
-//         onSelectedItemChange={({ selectedItem: newSelectedItem }) => {
-//           setSelectedItem(newSelectedItem);
-//         }}
-//         itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
-//         menuToggleElement={<AutocompleteInput />}
-//         {...(args as object)}
-//       >
-//         <MenuContent>
-//           <MenuGroup>
-//             {TEST_BOOKS.map(({ id, title }) => (
-//               <MenuItem key={id} id={id} inputType={inputType}>
-//                 {title}
-//               </MenuItem>
-//             ))}
-//           </MenuGroup>
-//         </MenuContent>
-//       </Autocomplete>
-//     );
-//   },
-// };
+export const AutocompleteSelectExample: Story = {
+  name: "Autocomplete Select",
+  render: (args) => {
+    return (
+      <Autocomplete
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <>
+            <MenuLabel htmlFor="my-combobox" mb={300}>
+              Choose a book
+            </MenuLabel>
+            <AutocompleteSelect />
+          </>
+        }
+        {...(args as object)}
+      >
+        <MenuContent>
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuContent>
+      </Autocomplete>
+    );
+  },
+};
+
+const TestControlledSingleAutocomplete = ({
+  ...args
+}: CustomAutocompleteArgs) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selectedItem, setSelectedItem] =
+    React.useState<TypeInternalItemProps | null>(null);
+
+  return (
+    <Autocomplete
+      isOpen={isOpen}
+      onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+      selectedItem={selectedItem}
+      onSelectedItemChange={({ selectedItem: newSelectedItem }) => {
+        setSelectedItem(newSelectedItem);
+      }}
+      itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+      menuToggleElement={<AutocompleteInput />}
+      {...(args as object)}
+    >
+      <MenuContent>
+        <MenuGroup id="books">
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuGroup>
+      </MenuContent>
+    </Autocomplete>
+  );
+};
+
+export const AutocompleteControlled: Story = {
+  name: "Single Autocomplete Controlled State",
+  render: (args: CustomAutocompleteArgs) => (
+    <TestControlledSingleAutocomplete {...args} />
+  ),
+};
+
+const TestControlledMultiAutocomplete = (args: CustomAutocompleteArgs) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selectedItems, setSelectedItems] = React.useState<
+    TypeInternalItemProps[]
+  >([]);
+
+  return (
+    <Autocomplete
+      multiSelect
+      isOpen={isOpen}
+      onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+      selectedItems={selectedItems}
+      onSelectedItemsChange={({ selectedItems: newSelectedItems }) =>
+        setSelectedItems(newSelectedItems)
+      }
+      itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+      menuToggleElement={
+        <>
+          <MenuLabel htmlFor="my-combobox" mb={300}>
+            Choose a book
+          </MenuLabel>
+          <AutocompleteTokenInput />
+          <MenuToggleButton mt={200} width="100%" p="0">
+            <Icon name="chevron-down" aria-label="Open Menu" />
+          </MenuToggleButton>
+        </>
+      }
+      {...(args as object)}
+    >
+      <MenuContent>
+        <MenuGroup id="books">
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuGroup>
+      </MenuContent>
+    </Autocomplete>
+  );
+};
+
+export const MultiAutocompleteControlled: Story = {
+  name: "MultiAutocomplete Controlled State",
+  render: (args: CustomAutocompleteArgs) => (
+    <TestControlledMultiAutocomplete {...args} />
+  ),
+};

package/src/Autocomplete/AutocompleteSelect.tsx

@@ -0,0 +1,24 @@
+import Icon from "@sproutsocial/seeds-react-icon";
+import React from "react";
+
+import {
+  AutocompleteInput,
+  type TypeAutocompleteInputProps,
+} from "./AutocompleteInput";
+import styled from "styled-components";
+import { Accessory } from "@sproutsocial/seeds-react-input";
+
+const StyledAutocompleteInput = styled(AutocompleteInput)`
+  ${Accessory} {
+    pointer-events: none;
+  }
+`;
+
+export const AutocompleteSelect = (props: TypeAutocompleteInputProps) => {
+  return (
+    <StyledAutocompleteInput
+      elemAfter={<Icon name="chevron-down" />}
+      {...props}
+    />
+  );
+};

package/src/Autocomplete/AutocompleteTypes.ts

@@ -6,11 +6,14 @@ import type {
 import type { TypeGetIsItemVisibleFn } from "../hooks/useItemFiltering";
 import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeMenuItemProps } from "../MenuItem";
-import type { TypeChildrenOrItems } from "../types";
+import type {
+  TypeChildrenOrItems,
+  TypeHigherOrderComponentProps,
+} from "../types";
 
 export type TypeSingleAutocompleteProps<
   I extends TypeMenuItemProps = TypeMenuItemProps
-> = TypeMenuRootOwnProps &
+> = TypeHigherOrderComponentProps &
   TypeChildrenOrItems<I> &
   TypeDownshiftComboboxProps & {
     getIsItemVisible?: TypeGetIsItemVisibleFn;

package/src/Autocomplete/MultiAutocomplete.tsx

@@ -26,6 +26,7 @@ export const MultiAutocomplete = <
   stateReducer: externalStateReducer,
   menuItems,
   MenuItemComponent,
+  MenuRootComponent = MenuRoot,
   itemToString = defaultItemToString,
   itemToKey = defaultItemToKey,
   getIsItemVisible = getDefaultGetIsItemVisible(itemToString),
@@ -160,7 +161,7 @@ export const MultiAutocomplete = <
   });
 
   return (
-    <MenuRoot
+    <MenuRootComponent
       {...{
         isListbox: true,
         items: allMenuItems,
@@ -183,6 +184,6 @@ export const MultiAutocomplete = <
       }}
     >
       {children}
-    </MenuRoot>
+    </MenuRootComponent>
   );
 };

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useCombobox } from "downshift";
 import { useMenuChildren } from "../hooks/useMenuChildren";
 import { itemToString as defaultItemToString } from "../utils/downshiftDefaults";
@@ -8,7 +8,6 @@ import { useItemFiltering } from "../hooks/useItemFiltering";
 import { MenuRoot } from "../MenuRoot";
 
 import type { TypeMenuItemProps } from "../MenuItem";
-import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeAutocompleteProps } from "./AutocompleteTypes";
 
 export const SingleAutocomplete = <
@@ -17,6 +16,7 @@ export const SingleAutocomplete = <
   children: childrenProp,
   stateReducer: externalStateReducer,
   menuItems,
+  MenuRootComponent = MenuRoot,
   MenuItemComponent,
   itemToString = defaultItemToString,
   getIsItemVisible,
@@ -53,7 +53,7 @@ export const SingleAutocomplete = <
   });
 
   return (
-    <MenuRoot
+    <MenuRootComponent
       {...{
         isListbox: true,
         items: allMenuItems,
@@ -69,6 +69,6 @@ export const SingleAutocomplete = <
       }}
     >
       {children}
-    </MenuRoot>
+    </MenuRootComponent>
   );
 };

package/src/Autocomplete/index.ts

@@ -1,3 +1,5 @@
 export * from "./Autocomplete";
 export * from "./AutocompleteInput";
+export * from "./AutocompleteTokenInput";
 export * from "./AutocompleteTypes";
+export * from "./AutocompleteSelect";

package/src/ListboxToggleButton.tsx

@@ -0,0 +1,65 @@
+import styled, { css } from "styled-components";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import {
+  MenuToggleButton,
+  type TypeMenuToggleButtonProps,
+} from "./MenuToggleButton";
+import { useMenuToggleContext } from "./MenuContext";
+
+export interface TypeListboxToggleButtonProps
+  extends TypeMenuToggleButtonProps {
+  invalid?: boolean;
+}
+
+export const StyledListboxToggleButton = styled(
+  MenuToggleButton
+)<TypeListboxToggleButtonProps>`
+  ${(props) =>
+    props.invalid &&
+    css`
+      border-color: ${(props) => props.theme.colors.form.border.error};
+    `}
+`;
+
+export interface TypeStyledChevronProps {
+  $isOpen?: boolean;
+  invalid?: boolean;
+}
+
+const StyledChevron = styled.div<TypeStyledChevronProps>`
+  margin-left: ${({ theme }) => theme.space[300]};
+  ${({ $isOpen }) =>
+    $isOpen &&
+    `
+		transform: rotate(-180deg);
+	`}
+  transition: transform 0.15s;
+
+  ${({ invalid }) =>
+    invalid &&
+    css`
+      color: ${(props) => props.theme.colors.icon.error};
+    `}
+`;
+
+const StyledInnerButton = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const ListboxToggleButton = ({
+  children,
+  ...buttonProps
+}: TypeListboxToggleButtonProps) => {
+  const { isOpen } = useMenuToggleContext();
+  return (
+    <StyledListboxToggleButton appearance="secondary" {...buttonProps}>
+      <StyledInnerButton>
+        {children}
+        <StyledChevron $isOpen={isOpen} invalid={buttonProps.invalid}>
+          <Icon name="chevron-down-outline" fixedWidth aria-hidden />
+        </StyledChevron>
+      </StyledInnerButton>
+    </StyledListboxToggleButton>
+  );
+};

package/src/MenuContent/MenuContentTypes.ts

@@ -1,9 +1,8 @@
-import { type HTMLMotionProps } from "motion/react";
 import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeChildrenOrItems } from "../types";
 
 export type TypeMenuContentProps<
   I extends TypeMenuItemProps = TypeMenuItemProps
-> = Omit<HTMLMotionProps<"ul">, "children"> & {
+> = Omit<React.ComponentPropsWithoutRef<"ul">, "children"> & {
   innerRef?: React.Ref<HTMLUListElement>;
 } & TypeChildrenOrItems<I>;

package/src/MenuContent/styles.tsx

@@ -1,14 +1,11 @@
 import styled from "styled-components";
-import { motion } from "motion/react";
-//import { focusRing } from "@sproutsocial/seeds-react-mixins";
 
-export const StyledMenuContent = styled(motion.ul)`
+export const StyledMenuContent = styled.ul`
   margin: 0;
   padding: 0;
-`;
-
-// Removing this for now because it's insanely intrusive and distracting to the user... interestingly the out of the box browser focus ring works better only appears when the content is actually focused.
 
-// &:focus {
-// 	${focusRing}
-// }
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+`;

package/src/MenuGroup/__tests__/MenuGroup.test.tsx

@@ -3,8 +3,8 @@ import {
   screen,
   waitFor,
   act,
+  PointerEventsCheckLevel,
 } from "@sproutsocial/seeds-react-testing-library";
-import { PointerEventsCheckLevel } from "@testing-library/user-event";
 import {
   SingleSelectMenu,
   MultiSelectMenu,

package/src/MenuItem/__tests__/MenuItem.test.tsx

@@ -5,11 +5,9 @@ import {
   render,
   waitFor,
   act,
-} from "@sproutsocial/seeds-react-testing-library";
-import {
   PointerEventsCheckLevel,
   type UserEvent,
-} from "@testing-library/user-event";
+} from "@sproutsocial/seeds-react-testing-library";
 import type { ByRoleMatcher, ByRoleOptions } from "@testing-library/react";
 import { theme } from "@sproutsocial/seeds-react-theme";
 import {

package/src/MenuRoot/MenuRoot.tsx

@@ -3,12 +3,13 @@ import styled from "styled-components";
 import { Popout, type TypePopoutProps } from "@sproutsocial/seeds-react-popout";
 
 import {
-  MenuToggleProvider,
   MenuContentProvider,
-  useMenu,
+  MenuToggleProvider,
   type TypeMenuContextProps,
   type TypeMenuProviderProps,
+  useMenu,
 } from "../MenuContext";
+import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/unitless";
 
 export interface TypeMenuRootOwnProps {
   menuToggleElement: React.ReactElement<any>;
@@ -22,12 +23,84 @@ export interface TypeMenuRootProps
     Pick<TypeMenuProviderProps, "children">,
     TypeMenuRootOwnProps {}
 
-const CustomPopoutContent = styled(Popout.Content)`
+export const CustomPopoutContent = styled(Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
 `;
 
+const menuAnimationConfig = {
+  initial: {
+    scale: 0,
+    opacity: 0,
+    originX: 0,
+    originY: 0,
+  },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    originX: 0,
+    originY: 0,
+
+    transition: {
+      type: "tween",
+      duration: MOTION_DURATION_FAST,
+      ease: "circOut",
+    },
+  },
+  exit: {
+    opacity: 0,
+    scale: 1,
+    transition: {
+      type: "tween",
+      duration: MOTION_DURATION_FAST,
+      ease: "circIn",
+    },
+  },
+};
+
+export interface TypeMenuPopoutProps
+  extends Pick<Partial<TypeMenuContextProps>, "openMenu" | "closeMenu">,
+    TypePopoutProps {}
+
+export const MenuPopout = ({
+  content,
+  width = "300px",
+  isOpen,
+  openMenu,
+  closeMenu,
+  focusLockProps,
+  ...popoutProps
+}: TypeMenuPopoutProps) => {
+  const setIsOpen = useCallback(
+    (newIsOpen: boolean) => {
+      newIsOpen ? openMenu?.() : closeMenu?.();
+    },
+    [openMenu, closeMenu]
+  );
+
+  return (
+    <Popout
+      isOpen={!!isOpen}
+      setIsOpen={setIsOpen}
+      content={(props) => (
+        <CustomPopoutContent width={popoutProps.fullWidth ? "initial" : width}>
+          {typeof content === "function" ? content(props) : content}
+        </CustomPopoutContent>
+      )}
+      focusLockProps={{
+        // correct jerking motion when scrolling while the Popout is open
+        // returnFocus: false,
+        crossFrame: false,
+        ...focusLockProps,
+      }}
+      disableWrapperAria
+      animationConfig={menuAnimationConfig}
+      {...popoutProps}
+    />
+  );
+};
+
 /**
  * @link https://seeds.sproutsocial.com/components/menu-root/
  *
@@ -67,23 +140,16 @@ export const MenuRoot = ({
   const menuContext = useMenu(contextProps);
 
   return (
-    <Popout
-      menuPopout
+    <MenuPopout
       placement={placement}
       isOpen={!!isOpen}
-      setIsOpen={setIsOpen}
+      openMenu={openMenu}
+      closeMenu={closeMenu}
       content={
         <MenuContentProvider menuContext={menuContext}>
-          <CustomPopoutContent width={width}>{children}</CustomPopoutContent>
+          {children}
         </MenuContentProvider>
       }
-      focusLockProps={{
-        // correct jerking motion when scrolling while the Popout is open
-        // returnFocus: false,
-        crossFrame: false,
-        ...focusLockProps,
-      }}
-      disableWrapperAria
       {...popoutProps}
     >
       {(toggleProps) => (
@@ -91,6 +157,20 @@ export const MenuRoot = ({
           {menuToggleElement}
         </MenuToggleProvider>
       )}
-    </Popout>
+    </MenuPopout>
+  );
+};
+
+export const MenuRootNoPopout = ({
+  children,
+  menuToggleElement,
+  ...contextProps
+}: TypeMenuRootProps) => {
+  const menuContext = useMenu(contextProps);
+
+  return (
+    <MenuContentProvider menuContext={menuContext}>
+      {children}
+    </MenuContentProvider>
   );
 };

package/src/MultiSelectMenu/MultiSelectMenu.stories.tsx

@@ -2,7 +2,6 @@
 import React from "react";
 
 import { Box } from "@sproutsocial/seeds-react-box";
-import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { StorybookMenuToggleButton } from "../storybookUtilities/menu-storybook-components";
 import { TEST_BOOKS, EXTRA_BOOKS } from "../__fixtures__/menu-test-data";