paris 0.13.5 → 0.13.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # paris
 
+## 0.13.6
+
+### Patch Changes
+
+- 1d092ca: Dropdowns: fix z-index positioning with transition containers
+
 ## 0.13.5
 
 ### 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.13.5",
+  "version": "0.13.6",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/combobox/Combobox.tsx

@@ -2,6 +2,8 @@
 
 import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
 import {
+    Fragment,
+
     useMemo, useId, useState,
 } from 'react';
 import { Combobox as HCombobox, Transition } from '@headlessui/react';
@@ -282,6 +284,8 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                     )}
                 </div>
                 <Transition
+                    as="div"
+                    className={dropdownStyles.transitionContainer}
                     enter={dropdownStyles.transition}
                     enterFrom={dropdownStyles.enterFrom}
                     enterTo={dropdownStyles.enterTo}

package/src/stories/menu/Menu.tsx

@@ -64,7 +64,8 @@ Menu.Items = ({
     className, children, position = 'left', ...props
 }) => (
     <Transition
-        as={Fragment}
+        as="div"
+        className={dropdownStyles.transitionContainer}
         enter={dropdownStyles.transition}
         enterFrom={dropdownStyles.enterFrom}
         enterTo={dropdownStyles.enterTo}

package/src/stories/select/Select.module.scss

@@ -24,11 +24,6 @@
     align-items: center;
 }
 
-.transitionContainer {
-    position: relative;
-    z-index: 10;
-}
-
 .options {
     max-height: var(--options-maxHeight, auto);
     overflow-y: auto;

package/src/stories/select/Select.tsx

@@ -184,13 +184,13 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                     </Listbox.Button>
                     <Transition
                         as="div"
+                        className={dropdownStyles.transitionContainer}
                         enter={dropdownStyles.transition}
                         enterFrom={dropdownStyles.enterFrom}
                         enterTo={dropdownStyles.enterTo}
                         leave={dropdownStyles.transition}
                         leaveFrom={dropdownStyles.leaveFrom}
                         leaveTo={dropdownStyles.leaveTo}
-                        className={styles.transitionContainer}
                     >
                         <Listbox.Options
                             className={clsx(

package/src/stories/utility/Dropdown.module.scss

@@ -1,3 +1,8 @@
+.transitionContainer {
+    position: relative;
+    z-index: 10;
+}
+
 .transition {
     transition: var(--pte-animations-interaction);
 }