@sproutsocial/seeds-react-menu 0.2.1 → 0.2.2

package/.eslintrc.js

@@ -1,8 +1,4 @@
 module.exports = {
-  root: true,
-  extends: ["eslint-config-seeds/react"],
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: "./tsconfig.json", // Reference the new TypeScript config
-  },
+  root: "",
+  extends: ["eslint-config-seeds/racine"],
 };

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     85.28 KB
-CJS dist/index.js.map 253.29 KB
-CJS ⚡️ Build success in 188ms
-ESM dist/esm/index.js     80.67 KB
-ESM dist/esm/index.js.map 252.44 KB
-ESM ⚡️ Build success in 210ms
+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 3812ms
-DTS dist/index.d.ts  13.45 KB
-DTS dist/index.d.mts 13.45 KB
-Done in 4.69s.
+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,12 @@
 # @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

package/dist/esm/index.js

@@ -98,7 +98,11 @@ var require_object_assign = __commonJS({
 import { useContext as useContext3 } from "react";
 
 // src/MenuContext.tsx
-import { createContext, useMemo, useContext } from "react";
+import {
+  createContext,
+  useMemo,
+  useContext
+} from "react";
 import { jsx } from "react/jsx-runtime";
 var defaultMenuContext = {
   items: [],
@@ -1705,7 +1709,6 @@ var MenuItemContainer = styled.li`
   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]};
@@ -1730,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}
@@ -1860,7 +1864,6 @@ var useOptionProps = ({
   const { selectedItem, selectedItems, isListbox } = useContext2(MenuContext);
   const selected = useMemo2(
     () => selectedItem?.id === id || !!selectedItems?.find((item) => item?.id === id),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedItem, selectedItems]
   );
   const label = inputLabelId || `menu-item-child-${id}`;
@@ -1890,12 +1893,9 @@ var MenuItem = ({
   children,
   onClick,
   onKeyDown,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   disabled: disabled2 = false,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ref,
   href,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   color: color2,
   ...props
 }) => {
@@ -2270,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 }),
@@ -2364,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;
@@ -2415,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" : " ",