paris 0.21.0 → 0.21.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # paris
 
+## 0.21.2
+
+### Patch Changes
+
+- 61edbc8: Fix portaled dropdowns (Select, Menu, Combobox) not appearing inside Drawers and Dialogs by moving the dropdown z-index layer (350) above the overlay layer (300).
+
+## 0.21.1
+
+### Patch Changes
+
+- f930ca2: Fix portaled dropdowns (Menu, Select) animating from top-left corner on first render by only transitioning opacity and transform instead of all properties.
+
 ## 0.21.0
 
 ### Minor 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.21.0",
+    "version": "0.21.2",
     "homepage": "https://paris.slingshot.fm",
     "license": "MIT",
     "repository": {

package/src/stories/drawer/Drawer.stories.tsx

@@ -5,6 +5,7 @@ import { Callout } from '../callout';
 import { ChevronRight, Ellipsis } from '../icon';
 import { Menu, MenuButton, MenuItem, MenuItems } from '../menu';
 import { usePagination } from '../pagination';
+import { Select } from '../select';
 import { Drawer } from './Drawer';
 
 const meta: Meta<typeof Drawer> = {
@@ -259,6 +260,42 @@ export const BottomPanelMultiSection: Story = {
     },
 };
 
+export const WithSelectDropdown: Story = {
+    args: {
+        title: 'Settings',
+        size: 'default',
+    },
+    render: function Render(args) {
+        const [isOpen, setIsOpen] = useState(false);
+        const [selected, setSelected] = useState<string | null>(null);
+        return (
+            <>
+                <Button onClick={() => setIsOpen(true)}>Open drawer</Button>
+                <Drawer {...args} isOpen={isOpen} onClose={setIsOpen}>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                        <p>Try opening the Select dropdown below — it should appear above the Drawer.</p>
+                        <Select
+                            label="Country"
+                            placeholder="Select a country"
+                            value={selected}
+                            onChange={setSelected}
+                            options={[
+                                { id: 'us', node: 'United States' },
+                                { id: 'uk', node: 'United Kingdom' },
+                                { id: 'ca', node: 'Canada' },
+                                { id: 'au', node: 'Australia' },
+                                { id: 'de', node: 'Germany' },
+                                { id: 'fr', node: 'France' },
+                                { id: 'jp', node: 'Japan' },
+                            ]}
+                        />
+                    </div>
+                </Drawer>
+            </>
+        );
+    },
+};
+
 export const Full: Story = {
     args: {
         title: 'Transaction details',

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

@@ -18,7 +18,7 @@
     overflow: hidden;
     z-index: var(--pte-new-layers-menu);
 
-    transition: var(--pte-animations-interaction);
+    transition: opacity var(--pte-animations-interaction), transform var(--pte-animations-interaction);
     opacity: 1;
     transform: translateY(0);
 

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

@@ -41,7 +41,7 @@
     border-radius: var(--pte-borders-radius-rectangle);
     box-shadow: var(--pte-new-lighting-deepBelow);
 
-    transition: var(--pte-animations-interaction);
+    transition: opacity var(--pte-animations-interaction), transform var(--pte-animations-interaction);
 
     &[data-closed] {
         opacity: 0;

package/src/stories/theme/themes.ts

@@ -435,8 +435,8 @@ export type Theme = {
         layers: {
             below: number;
             sticky: number;
-            dropdown: number;
             overlay: number;
+            dropdown: number;
             popover: number;
             menu: number;
         };
@@ -1065,8 +1065,8 @@ export const LightTheme: Theme = {
         layers: {
             below: -1,
             sticky: 100,
-            dropdown: 200,
             overlay: 300,
+            dropdown: 350,
             popover: 400,
             menu: 500,
         },