@sproutsocial/seeds-react-menu 0.2.0 → 0.2.2

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     84.19 KB
-CJS dist/index.js.map 251.22 KB
-CJS ⚡️ Build success in 201ms
-ESM dist/esm/index.js     79.62 KB
-ESM dist/esm/index.js.map 250.38 KB
-ESM ⚡️ Build success in 201ms
+ESM dist/esm/index.js     80.43 KB
+ESM dist/esm/index.js.map 251.90 KB
+ESM ⚡️ Build success in 486ms
+CJS dist/index.js     85.03 KB
+CJS dist/index.js.map 252.76 KB
+CJS ⚡️ Build success in 495ms
 DTS Build start
-DTS ⚡️ Build success in 4704ms
-DTS dist/index.d.ts  13.44 KB
-DTS dist/index.d.mts 13.44 KB
-Done in 5.51s.
+DTS ⚡️ Build success in 11030ms
+DTS dist/index.d.ts  13.55 KB
+DTS dist/index.d.mts 13.55 KB
+Done in 13.63s.

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @sproutsocial/seeds-react-menu
 
+## 0.2.2
+
+### Patch Changes
+
+- 6db5ede: Restores MenuItem CSS transitions
+  - Fixes a bug where MenuItem was not animating as expected
+
+## 0.2.1
+
+### Patch Changes
+
+- c2ddea7: Added the menuPopout prop back to the MenuRoot popout to reenable menu specific motion
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/esm/index.js

@@ -1701,13 +1701,14 @@ var highlightedStyles = css4`
   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 = styled.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]};
@@ -1732,6 +1733,7 @@ var StyledMenuItem = styled.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}
@@ -2160,20 +2162,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__ */ jsx7(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;
 
@@ -2255,6 +2270,7 @@ var MenuRoot = ({
   return /* @__PURE__ */ jsx9(MenuProvider, { ...contextProps, children: /* @__PURE__ */ jsx9(
     Popout,
     {
+      menuPopout: true,
       isOpen: !!isOpen,
       setIsOpen,
       content: /* @__PURE__ */ jsx9(CustomPopoutContent, { width: width2, children }),
@@ -2349,13 +2365,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;
@@ -2400,11 +2415,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 === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter;
-  const selectedItemProps = selectedItem.element?.props;
+  const selectedItemProps = selectedItem.menuItemProps;
   if (selectedItemProps?.onClick) {
     const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
       key: isEnterKeyDown ? "Enter" : " ",