paris 0.17.9 → 0.17.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # paris
 
+## 0.17.10
+
+### Patch Changes
+
+- 24b86aa: fix(menu): Replace external Transition wrapper with built-in transition prop on MenuItems to fix TypeError crash during unmount
+
 ## 0.17.9
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.17.9",
+  "version": "0.17.10",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/menu/Menu.module.scss

@@ -20,6 +20,15 @@
 
     overflow: hidden;
     z-index: 100;
+
+    transition: var(--pte-animations-interaction);
+    opacity: 1;
+    transform: translateY(0);
+
+    &[data-closed] {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
 }
 
 .leftPosition {

package/src/stories/menu/Menu.tsx

@@ -3,12 +3,11 @@ import type {
     MenuProps, MenuItemsProps, MenuItemProps, MenuButtonProps,
 } from '@headlessui/react';
 import {
-    Menu as HeadlessMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, Transition,
+    Menu as HeadlessMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem,
 } from '@headlessui/react';
 import { clsx } from 'clsx';
 
 import styles from './Menu.module.scss';
-import dropdownStyles from '../utility/Dropdown.module.scss';
 
 /**
  * Wraps the `HeadlessMenu` component from `@headlessui/react` to provide a styled dropdown menu.
@@ -56,20 +55,13 @@ export const MenuItems: FC<MenuItemsProps<React.ElementType> & {
 }> = ({
     className, children, position = 'left', ...props
 }) => (
-    <Transition
-        as="div"
-        className={dropdownStyles.transitionContainer}
-        enter={dropdownStyles.transition}
-        enterFrom={dropdownStyles.enterFrom}
-        enterTo={dropdownStyles.enterTo}
-        leave={dropdownStyles.transition}
-        leaveFrom={dropdownStyles.leaveFrom}
-        leaveTo={dropdownStyles.leaveTo}
+    <HMenuItems
+        transition
+        className={clsx(styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition, className)}
+        {...props}
     >
-        <HMenuItems className={clsx(styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition, className)} {...props}>
-            {children}
-        </HMenuItems>
-    </Transition>
+        {children}
+    </HMenuItems>
 );
 
 /**