@sproutsocial/seeds-react-menu 0.2.3 → 0.3.0

package/dist/index.d.mts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as downshift from 'downshift';
 import { GetItemPropsOptions, UseComboboxProps, UseSelectProps, UseMultipleSelectionProps, UseComboboxReturnValue, UseSelectReturnValue, UseMultipleSelectionReturnValue } from 'downshift';
-import { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
-import * as styled_components from 'styled-components';
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
+import { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+import * as styled_components from 'styled-components';
 import { HTMLMotionProps } from 'motion/react';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 export { TypeBoxProps as TypeMenuFooterProps } from '@sproutsocial/seeds-react-box';
@@ -22,11 +22,47 @@ declare const MENU_ITEM_ROLES: {
 };
 type TypeMenuItemRoles = (typeof MENU_ITEM_ROLES)[keyof typeof MENU_ITEM_ROLES];
 
+interface TypeMenuGroupStyledProps extends TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
+}
+interface TypeMenuGroupProps extends TypeMenuGroupStyledProps, Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
+    id: string;
+    isSingleSelect?: boolean;
+    title?: string;
+    children: ReactNode;
+    titleAs?: string | React.ComponentType<any>;
+}
+
+/**
+ * @link https://seeds.sproutsocial.com/components/menu-group/
+ *
+ * @description MenuGroup is used to group lists of {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems}.
+ *
+ * @example
+ * <ActionMenu>
+ *   <MenuContent>
+ *     <MenuGroup title="Group 1" id="1">
+ *       <MenuItem>Item 1</MenuItem>
+ *     </MenuGroup>
+ *     <MenuGroup title="Group 2" id="2">
+ *       <MenuItem>Item 2</MenuItem>
+ *     </MenuGroup>
+ *   </MenuContent>
+ * </ActionMenu>
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
+ */
+declare const MenuGroup: ({ titleAs, children, title, color, isSingleSelect, id, ...rest }: TypeMenuGroupProps) => react_jsx_runtime.JSX.Element;
+
+declare const StyledMenuGroup: styled_components.StyledComponent<"li", styled_components.DefaultTheme, TypeMenuGroupProps, never>;
+declare const StyledTitle: styled_components.StyledComponent<React$1.FC<_sproutsocial_seeds_react_text.TypeTextProps>, styled_components.DefaultTheme, {}, never>;
+declare const StyledMenuGroupUl: styled_components.StyledComponent<"ul", styled_components.DefaultTheme, {}, never>;
+
 interface TypeDefaultItemProps {
     id: string;
     index: number;
     disabled?: boolean;
     menuItemProps?: TypeMenuItemProps;
+    menuGroupProps?: TypeMenuGroupProps;
 }
 type TypeNotEmptyChildren = React.ReactChild | React.ReactFragment | React.ReactPortal;
 
@@ -87,10 +123,10 @@ interface TypeMenuContentProps extends HTMLMotionProps<"ul"> {
  * <ActionMenu>
  *   <MenuHeader>Header</MenuHeader>
  *   <MenuContent>
- *     <MenuGroup>
+ *     <MenuGroup id="1">
  *       <MenuItem>Item 1</MenuItem>
  *     </MenuGroup>
- *     <MenuGroup>
+ *     <MenuGroup id="2">
  *       <MenuItem>Item 2</MenuItem>
  *     </MenuGroup>
  *   </MenuContent>
@@ -111,39 +147,6 @@ declare const MenuContent: ({ id, children, ...rest }: TypeMenuContentProps) =>
  */
 declare const MenuFooter: ({ children, ...rest }: TypeBoxProps) => react_jsx_runtime.JSX.Element;
 
-interface TypeMenuGroupStyledProps extends TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
-}
-interface TypeMenuGroupProps extends TypeMenuGroupStyledProps, Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
-    title?: string;
-    children: ReactNode;
-    titleAs?: string | React.ComponentType<any>;
-}
-
-/**
- * @link https://seeds.sproutsocial.com/components/menu-group/
- *
- * @description MenuGroup is used to group lists of {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems}.
- *
- * @example
- * <ActionMenu>
- *   <MenuContent>
- *     <MenuGroup title="Group 1">
- *       <MenuItem>Item 1</MenuItem>
- *     </MenuGroup>
- *     <MenuGroup title="Group 1">
- *       <MenuItem>Item 2</MenuItem>
- *     </MenuGroup>
- *   </MenuContent>
- * </ActionMenu>
- *
- * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
- */
-declare const MenuGroup: ({ titleAs, children, title, color, ...rest }: TypeMenuGroupProps) => react_jsx_runtime.JSX.Element;
-
-declare const StyledMenuGroup: styled_components.StyledComponent<"li", styled_components.DefaultTheme, TypeMenuGroupProps, never>;
-declare const StyledTitle: styled_components.StyledComponent<React$1.FC<_sproutsocial_seeds_react_text.TypeTextProps>, styled_components.DefaultTheme, {}, never>;
-declare const StyledMenuGroupUl: styled_components.StyledComponent<"ul", styled_components.DefaultTheme, {}, never>;
-
 interface TypeDownshiftComboboxProps extends Partial<UseComboboxProps<TypeDefaultItemProps>> {
 }
 interface TypeDownshiftSelectProps extends Partial<UseSelectProps<TypeDefaultItemProps>> {
@@ -265,10 +268,13 @@ declare const MultiSelectMenu: ({ children, stateReducer: externalStateReducer,
 interface TypeUseItemsFromChildrenProps {
     children: ReactNode;
 }
-interface TypeItemElements {
+interface TypeItemElement {
     element: React__default.ReactElement<TypeMenuItemProps>;
     parents: readonly React__default.ReactNode[];
 }
+interface TypeMenuGroupElement {
+    element: React__default.ReactElement<TypeMenuGroupProps>;
+}
 declare const useItemsFromChildren: ({ children, }: TypeUseItemsFromChildrenProps) => {
     allMenuItems: TypeDefaultItemProps[];
     menuItemsMap: {
@@ -282,4 +288,4 @@ declare const defaultUseSelectProps: {
     isItemDisabled: (item: any) => boolean;
 };
 
-export { ActionMenu, INPUT_TYPES, type InputType, MenuContent, MenuContext, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuProvider, MenuRoot, MenuToggleButton, MultiSelectMenu, SingleSelectMenu, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, type TypeActionMenuProps, type TypeDefaultItemProps, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeItemElements, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextProps, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuToggleButtonProps, type TypeMultiSelectMenuProps, type TypeNotEmptyChildren, type TypeSingleSelectMenuProps, type TypeUseItemsFromChildrenProps, defaultUseSelectProps, useItemsFromChildren, useMenu, useMenuContext, useSelectStateReducer };
+export { ActionMenu, INPUT_TYPES, type InputType, MenuContent, MenuContext, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuProvider, MenuRoot, MenuToggleButton, MultiSelectMenu, SingleSelectMenu, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, type TypeActionMenuProps, type TypeDefaultItemProps, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeItemElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuToggleButtonProps, type TypeMultiSelectMenuProps, type TypeNotEmptyChildren, type TypeSingleSelectMenuProps, type TypeUseItemsFromChildrenProps, defaultUseSelectProps, useItemsFromChildren, useMenu, useMenuContext, useSelectStateReducer };

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as downshift from 'downshift';
 import { GetItemPropsOptions, UseComboboxProps, UseSelectProps, UseMultipleSelectionProps, UseComboboxReturnValue, UseSelectReturnValue, UseMultipleSelectionReturnValue } from 'downshift';
-import { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
-import * as styled_components from 'styled-components';
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
+import { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+import * as styled_components from 'styled-components';
 import { HTMLMotionProps } from 'motion/react';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 export { TypeBoxProps as TypeMenuFooterProps } from '@sproutsocial/seeds-react-box';
@@ -22,11 +22,47 @@ declare const MENU_ITEM_ROLES: {
 };
 type TypeMenuItemRoles = (typeof MENU_ITEM_ROLES)[keyof typeof MENU_ITEM_ROLES];
 
+interface TypeMenuGroupStyledProps extends TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
+}
+interface TypeMenuGroupProps extends TypeMenuGroupStyledProps, Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
+    id: string;
+    isSingleSelect?: boolean;
+    title?: string;
+    children: ReactNode;
+    titleAs?: string | React.ComponentType<any>;
+}
+
+/**
+ * @link https://seeds.sproutsocial.com/components/menu-group/
+ *
+ * @description MenuGroup is used to group lists of {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems}.
+ *
+ * @example
+ * <ActionMenu>
+ *   <MenuContent>
+ *     <MenuGroup title="Group 1" id="1">
+ *       <MenuItem>Item 1</MenuItem>
+ *     </MenuGroup>
+ *     <MenuGroup title="Group 2" id="2">
+ *       <MenuItem>Item 2</MenuItem>
+ *     </MenuGroup>
+ *   </MenuContent>
+ * </ActionMenu>
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
+ */
+declare const MenuGroup: ({ titleAs, children, title, color, isSingleSelect, id, ...rest }: TypeMenuGroupProps) => react_jsx_runtime.JSX.Element;
+
+declare const StyledMenuGroup: styled_components.StyledComponent<"li", styled_components.DefaultTheme, TypeMenuGroupProps, never>;
+declare const StyledTitle: styled_components.StyledComponent<React$1.FC<_sproutsocial_seeds_react_text.TypeTextProps>, styled_components.DefaultTheme, {}, never>;
+declare const StyledMenuGroupUl: styled_components.StyledComponent<"ul", styled_components.DefaultTheme, {}, never>;
+
 interface TypeDefaultItemProps {
     id: string;
     index: number;
     disabled?: boolean;
     menuItemProps?: TypeMenuItemProps;
+    menuGroupProps?: TypeMenuGroupProps;
 }
 type TypeNotEmptyChildren = React.ReactChild | React.ReactFragment | React.ReactPortal;
 
@@ -87,10 +123,10 @@ interface TypeMenuContentProps extends HTMLMotionProps<"ul"> {
  * <ActionMenu>
  *   <MenuHeader>Header</MenuHeader>
  *   <MenuContent>
- *     <MenuGroup>
+ *     <MenuGroup id="1">
  *       <MenuItem>Item 1</MenuItem>
  *     </MenuGroup>
- *     <MenuGroup>
+ *     <MenuGroup id="2">
  *       <MenuItem>Item 2</MenuItem>
  *     </MenuGroup>
  *   </MenuContent>
@@ -111,39 +147,6 @@ declare const MenuContent: ({ id, children, ...rest }: TypeMenuContentProps) =>
  */
 declare const MenuFooter: ({ children, ...rest }: TypeBoxProps) => react_jsx_runtime.JSX.Element;
 
-interface TypeMenuGroupStyledProps extends TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
-}
-interface TypeMenuGroupProps extends TypeMenuGroupStyledProps, Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
-    title?: string;
-    children: ReactNode;
-    titleAs?: string | React.ComponentType<any>;
-}
-
-/**
- * @link https://seeds.sproutsocial.com/components/menu-group/
- *
- * @description MenuGroup is used to group lists of {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems}.
- *
- * @example
- * <ActionMenu>
- *   <MenuContent>
- *     <MenuGroup title="Group 1">
- *       <MenuItem>Item 1</MenuItem>
- *     </MenuGroup>
- *     <MenuGroup title="Group 1">
- *       <MenuItem>Item 2</MenuItem>
- *     </MenuGroup>
- *   </MenuContent>
- * </ActionMenu>
- *
- * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
- */
-declare const MenuGroup: ({ titleAs, children, title, color, ...rest }: TypeMenuGroupProps) => react_jsx_runtime.JSX.Element;
-
-declare const StyledMenuGroup: styled_components.StyledComponent<"li", styled_components.DefaultTheme, TypeMenuGroupProps, never>;
-declare const StyledTitle: styled_components.StyledComponent<React$1.FC<_sproutsocial_seeds_react_text.TypeTextProps>, styled_components.DefaultTheme, {}, never>;
-declare const StyledMenuGroupUl: styled_components.StyledComponent<"ul", styled_components.DefaultTheme, {}, never>;
-
 interface TypeDownshiftComboboxProps extends Partial<UseComboboxProps<TypeDefaultItemProps>> {
 }
 interface TypeDownshiftSelectProps extends Partial<UseSelectProps<TypeDefaultItemProps>> {
@@ -265,10 +268,13 @@ declare const MultiSelectMenu: ({ children, stateReducer: externalStateReducer,
 interface TypeUseItemsFromChildrenProps {
     children: ReactNode;
 }
-interface TypeItemElements {
+interface TypeItemElement {
     element: React__default.ReactElement<TypeMenuItemProps>;
     parents: readonly React__default.ReactNode[];
 }
+interface TypeMenuGroupElement {
+    element: React__default.ReactElement<TypeMenuGroupProps>;
+}
 declare const useItemsFromChildren: ({ children, }: TypeUseItemsFromChildrenProps) => {
     allMenuItems: TypeDefaultItemProps[];
     menuItemsMap: {
@@ -282,4 +288,4 @@ declare const defaultUseSelectProps: {
     isItemDisabled: (item: any) => boolean;
 };
 
-export { ActionMenu, INPUT_TYPES, type InputType, MenuContent, MenuContext, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuProvider, MenuRoot, MenuToggleButton, MultiSelectMenu, SingleSelectMenu, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, type TypeActionMenuProps, type TypeDefaultItemProps, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeItemElements, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextProps, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuToggleButtonProps, type TypeMultiSelectMenuProps, type TypeNotEmptyChildren, type TypeSingleSelectMenuProps, type TypeUseItemsFromChildrenProps, defaultUseSelectProps, useItemsFromChildren, useMenu, useMenuContext, useSelectStateReducer };
+export { ActionMenu, INPUT_TYPES, type InputType, MenuContent, MenuContext, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuProvider, MenuRoot, MenuToggleButton, MultiSelectMenu, SingleSelectMenu, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, type TypeActionMenuProps, type TypeDefaultItemProps, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeItemElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuToggleButtonProps, type TypeMultiSelectMenuProps, type TypeNotEmptyChildren, type TypeSingleSelectMenuProps, type TypeUseItemsFromChildrenProps, defaultUseSelectProps, useItemsFromChildren, useMenu, useMenuContext, useSelectStateReducer };

package/dist/index.js

@@ -1928,12 +1928,12 @@ var MenuItem = ({
   ...props
 }) => {
   const { getItemProps, itemsMap, highlightedIndex, isListbox } = (0, import_react3.useContext)(MenuContext);
+  const item = itemsMap[id] || { index: 0, id };
   const { ...optionProps } = useOptionProps({
     id,
     children,
     ...props
   });
-  const item = itemsMap[id] || { index: 0, id };
   const highlighted = highlightedIndex === item?.index;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemContainer, { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     StyledMenuItem,
@@ -2247,6 +2247,8 @@ var MenuGroup = ({
   children,
   title,
   color: color2,
+  isSingleSelect,
+  id,
   ...rest
 }) => {
   const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
@@ -2254,6 +2256,8 @@ var MenuGroup = ({
     StyledMenuGroup,
     {
       role: "group",
+      id,
+      isSingleSelect,
       "aria-labelledby": title ? titleId : void 0,
       color: color2,
       ...rest,
@@ -2385,12 +2389,16 @@ var useItemsFromChildren = ({
     const allMenuItemElements = getAllMenuItems(children);
     const menuItemsMap2 = {};
     const allMenuItems2 = allMenuItemElements.map(
-      ({ element }, index) => {
+      ({ element, parents }, index) => {
+        const parentMenuGroup = parents.find(
+          (parent) => checkIfIsElement(parent, "MenuGroup")
+        );
         const item = {
           id: element.props.id,
           disabled: element.props.disabled,
           index,
-          menuItemProps: element.props
+          menuItemProps: element.props,
+          menuGroupProps: parentMenuGroup ? parentMenuGroup.props : void 0
         };
         menuItemsMap2[`${item.id}`] = item;
         return item;
@@ -2621,6 +2629,12 @@ var MultiSelectMenu = ({
           } else {
             addSelectedItem(newSelectedItem);
           }
+          if (newSelectedItem.menuGroupProps?.isSingleSelect) {
+            const groupItems = selectedItems.filter(
+              (item) => item.menuGroupProps?.id === newSelectedItem.menuGroupProps?.id
+            );
+            groupItems.forEach((item) => removeSelectedItem(item));
+          }
           break;
         default:
           break;