@sproutsocial/seeds-react-menu 0.2.0 → 0.2.2

package/dist/index.d.mts

@@ -22,14 +22,11 @@ declare const MENU_ITEM_ROLES: {
 };
 type TypeMenuItemRoles = (typeof MENU_ITEM_ROLES)[keyof typeof MENU_ITEM_ROLES];
 
-interface TypeItemElements {
-    element: React.ReactElement<TypeMenuItemProps>;
-    parents: readonly React.ReactNode[];
-}
-interface TypeDefaultItemProps extends Partial<TypeItemElements> {
+interface TypeDefaultItemProps {
     id: string;
     index: number;
     disabled?: boolean;
+    menuItemProps?: TypeMenuItemProps;
 }
 type TypeNotEmptyChildren = React.ReactChild | React.ReactFragment | React.ReactPortal;
 
@@ -144,7 +141,7 @@ interface TypeMenuGroupProps extends TypeMenuGroupStyledProps, Omit<React.Compon
 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<"span", styled_components.DefaultTheme, _sproutsocial_seeds_react_text.TypeTextProps, 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 TypeDownshiftMultiSelectProps extends Partial<UseSelectProps<TypeDefaultItemProps>>, Partial<Omit<UseMultipleSelectionProps<TypeDefaultItemProps>, "stateReducer" | "onStateChange" | "getA11yStatusMessage">> {
@@ -247,6 +244,10 @@ declare const MultiSelectMenu: ({ children, stateReducer: externalStateReducer,
 interface TypeUseItemsFromChildrenProps {
     children: ReactNode;
 }
+interface TypeItemElements {
+    element: React__default.ReactElement<TypeMenuItemProps>;
+    parents: readonly React__default.ReactNode[];
+}
 declare const useItemsFromChildren: ({ children, }: TypeUseItemsFromChildrenProps) => {
     allMenuItems: TypeDefaultItemProps[];
     menuItemsMap: {
@@ -260,4 +261,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 TypeDownshiftMultiSelectProps, 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 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 TypeDownshiftMultiSelectProps, 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 TypeNotEmptyChildren, type TypeSingleSelectMenuProps, type TypeUseItemsFromChildrenProps, defaultUseSelectProps, useItemsFromChildren, useMenu, useMenuContext, useSelectStateReducer };

package/dist/index.d.ts

@@ -22,14 +22,11 @@ declare const MENU_ITEM_ROLES: {
 };
 type TypeMenuItemRoles = (typeof MENU_ITEM_ROLES)[keyof typeof MENU_ITEM_ROLES];
 
-interface TypeItemElements {
-    element: React.ReactElement<TypeMenuItemProps>;
-    parents: readonly React.ReactNode[];
-}
-interface TypeDefaultItemProps extends Partial<TypeItemElements> {
+interface TypeDefaultItemProps {
     id: string;
     index: number;
     disabled?: boolean;
+    menuItemProps?: TypeMenuItemProps;
 }
 type TypeNotEmptyChildren = React.ReactChild | React.ReactFragment | React.ReactPortal;
 
@@ -144,7 +141,7 @@ interface TypeMenuGroupProps extends TypeMenuGroupStyledProps, Omit<React.Compon
 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<"span", styled_components.DefaultTheme, _sproutsocial_seeds_react_text.TypeTextProps, 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 TypeDownshiftMultiSelectProps extends Partial<UseSelectProps<TypeDefaultItemProps>>, Partial<Omit<UseMultipleSelectionProps<TypeDefaultItemProps>, "stateReducer" | "onStateChange" | "getA11yStatusMessage">> {
@@ -247,6 +244,10 @@ declare const MultiSelectMenu: ({ children, stateReducer: externalStateReducer,
 interface TypeUseItemsFromChildrenProps {
     children: ReactNode;
 }
+interface TypeItemElements {
+    element: React__default.ReactElement<TypeMenuItemProps>;
+    parents: readonly React__default.ReactNode[];
+}
 declare const useItemsFromChildren: ({ children, }: TypeUseItemsFromChildrenProps) => {
     allMenuItems: TypeDefaultItemProps[];
     menuItemsMap: {
@@ -260,4 +261,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 TypeDownshiftMultiSelectProps, 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 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 TypeDownshiftMultiSelectProps, 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 TypeNotEmptyChildren, type TypeSingleSelectMenuProps, type TypeUseItemsFromChildrenProps, defaultUseSelectProps, useItemsFromChildren, useMenu, useMenuContext, useSelectStateReducer };

package/dist/index.js

@@ -1729,13 +1729,14 @@ var highlightedStyles = import_styled_components2.css`
   cursor: pointer;
   border: 1px solid ${({ theme: theme2 }) => theme2.colors.listItem.border.base};
   background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.hover};
+  color: ${({ theme: theme2 }) => theme2.colors.text.body};
+  text-decoration: none;
 `;
 var MenuItemContainer = import_styled_components2.default.li`
   box-sizing: border-box;
   list-style-type: none;
   margin-left: ${({ theme: theme2 }) => theme2.space[300]};
   margin-right: ${({ theme: theme2 }) => theme2.space[300]};
-  transition: all ${({ theme: theme2 }) => theme2.duration["fast"]};
 
   &:first-child {
     margin-top: ${({ theme: theme2 }) => theme2.space[300]};
@@ -1760,6 +1761,7 @@ var StyledMenuItem = import_styled_components2.default.div`
   padding: ${({ theme: theme2 }) => theme2.space[300]};
   outline: 0;
   ${({ theme: theme2 }) => theme2.typography[200]};
+  transition: all ${({ theme: theme2 }) => theme2.duration["fast"]};
 
   /* Highlighted */
   ${({ $highlighted }) => $highlighted && highlightedStyles}
@@ -2182,20 +2184,33 @@ var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
     }
   );
 };
-Headline.displayName = "Text.Headline";
-SubHeadline.displayName = "Text.SubHeadline";
-SmallSubHeadline.displayName = "Text.SmallSubHeadline";
-Byline.displayName = "Text.Byline";
-SmallByline.displayName = "Text.SmallByline";
-BodyCopy.displayName = "Text.BodyCopy";
-SmallBodyCopy.displayName = "Text.SmallBodyCopy";
-Text.Headline = Headline;
-Text.SubHeadline = SubHeadline;
-Text.SmallSubHeadline = SmallSubHeadline;
-Text.Byline = Byline;
-Text.SmallByline = SmallByline;
-Text.BodyCopy = BodyCopy;
-Text.SmallBodyCopy = SmallBodyCopy;
+var withTextLogic = (Component) => {
+  return ({ children, ...props }) => {
+    const qaText = typeof children === "string" ? children : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Component, { "data-qa-text": qaText, ...props, children });
+  };
+};
+var HeadlineWithLogic = withTextLogic(Headline);
+HeadlineWithLogic.displayName = "Text.Headline";
+Text.Headline = HeadlineWithLogic;
+var SubHeadlineWithLogic = withTextLogic(SubHeadline);
+SubHeadlineWithLogic.displayName = "Text.SubHeadline";
+Text.SubHeadline = SubHeadlineWithLogic;
+var SmallSubHeadlineWithLogic = withTextLogic(SmallSubHeadline);
+SmallSubHeadlineWithLogic.displayName = "Text.SmallSubHeadline";
+Text.SmallSubHeadline = SmallSubHeadlineWithLogic;
+var BylineWithLogic = withTextLogic(Byline);
+BylineWithLogic.displayName = "Text.Byline";
+Text.Byline = BylineWithLogic;
+var SmallBylineWithLogic = withTextLogic(SmallByline);
+SmallBylineWithLogic.displayName = "Text.SmallByline";
+Text.SmallByline = SmallBylineWithLogic;
+var BodyCopyWithLogic = withTextLogic(BodyCopy);
+BodyCopyWithLogic.displayName = "Text.BodyCopy";
+Text.BodyCopy = BodyCopyWithLogic;
+var SmallBodyCopyWithLogic = withTextLogic(SmallBodyCopy);
+SmallBodyCopyWithLogic.displayName = "Text.SmallBodyCopy";
+Text.SmallBodyCopy = SmallBodyCopyWithLogic;
 var Text_default = Text;
 var src_default = Text_default;
 
@@ -2277,6 +2292,7 @@ var MenuRoot = ({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MenuProvider, { ...contextProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_seeds_react_popout.Popout,
     {
+      menuPopout: true,
       isOpen: !!isOpen,
       setIsOpen,
       content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CustomPopoutContent, { width: width2, children }),
@@ -2369,13 +2385,12 @@ var useItemsFromChildren = ({
     const allMenuItemElements = getAllMenuItems(children);
     const menuItemsMap2 = {};
     const allMenuItems2 = allMenuItemElements.map(
-      ({ element, parents }, index) => {
+      ({ element }, index) => {
         const item = {
           id: element.props.id,
           disabled: element.props.disabled,
           index,
-          element,
-          parents
+          menuItemProps: element.props
         };
         menuItemsMap2[`${item.id}`] = item;
         return item;
@@ -2420,11 +2435,11 @@ var handleStateChange = (changes, currentSelectedItem) => {
   const selectedItem = changes.selectedItem || currentSelectedItem;
   if (!selectedItem)
     return;
-  if (selectedItem.element?.props?.disabled) {
+  if (selectedItem.disabled) {
     return;
   }
   const isEnterKeyDown = changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
-  const selectedItemProps = selectedItem.element?.props;
+  const selectedItemProps = selectedItem.menuItemProps;
   if (selectedItemProps?.onClick) {
     const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
       key: isEnterKeyDown ? "Enter" : " ",