paris 0.21.1 → 0.21.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # paris
 
+## 0.21.3
+
+### Patch Changes
+
+- d4b6239: fix(select,combobox): fix portaled dropdown width and alignment
+
+  - Use correct CSS variables (`--button-width`, `--input-width`) for portaled dropdown width in Select and Combobox since Headless UI v2.2.x no longer sets `--anchor-width`
+  - Measure actual pixel offset between container and input to align Combobox dropdown with the input container, not the input element
+  - Prevent `ComboboxButton` wrapper from intercepting keyboard events (e.g. space key) meant for the input
+
+## 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

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.1",
+    "version": "0.21.3",
     "homepage": "https://paris.slingshot.fm",
     "license": "MIT",
     "repository": {

package/src/stories/combobox/Combobox.tsx

@@ -2,10 +2,16 @@
 
 import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ComboboxInput, ComboboxOption, ComboboxOptions, Combobox as HCombobox } from '@headlessui/react';
+import {
+    ComboboxButton,
+    ComboboxInput,
+    ComboboxOption,
+    ComboboxOptions,
+    Combobox as HCombobox,
+} from '@headlessui/react';
 import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
-import { useId, useMemo, useState } from 'react';
+import type { ComponentPropsWithoutRef, CSSProperties, MouseEvent, ReactNode } from 'react';
+import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
@@ -162,6 +168,25 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
     const inputID = useId();
     const [selectedID, setSelectedID] = useState<string | null>(value?.id || null);
     const [query, setQuery] = useState('');
+    const containerElRef = useRef<HTMLElement | null>(null);
+    const inputElRef = useRef<HTMLElement | null>(null);
+    const [anchorOffset, setAnchorOffset] = useState(0);
+
+    const containerRef = useCallback((node: HTMLButtonElement | null) => {
+        containerElRef.current = node;
+    }, []);
+
+    const inputRef = useCallback((node: HTMLInputElement | null) => {
+        inputElRef.current = node;
+    }, []);
+
+    useLayoutEffect(() => {
+        if (containerElRef.current && inputElRef.current) {
+            const containerLeft = containerElRef.current.getBoundingClientRect().left;
+            const inputLeft = inputElRef.current.getBoundingClientRect().left;
+            setAnchorOffset(containerLeft - inputLeft);
+        }
+    }, [startEnhancer, value]);
 
     const optionsWithCustomValue = useMemo(
         () => [...(allowCustomValue && customValueToOption ? [customValueToOption(query)] : []), ...options],
@@ -203,7 +228,10 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                     }
                 }}
             >
-                <div
+                <ComboboxButton
+                    as="div"
+                    ref={containerRef}
+                    tabIndex={-1}
                     data-status={disabled ? 'disabled' : status || 'default'}
                     {...overrides?.inputContainer}
                     className={clsx(overrides?.inputContainer?.className, inputStyles.inputContainer)}
@@ -231,11 +259,20 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                             value.node
                         ) : (
                             <ComboboxInput
+                                ref={inputRef}
                                 id={inputID}
                                 {...overrides?.input}
                                 placeholder={placeholder}
                                 // value={query}
                                 displayValue={() => value?.node as string}
+                                onClick={(e: MouseEvent<HTMLInputElement>) => {
+                                    e.stopPropagation();
+                                    overrides?.input?.onClick?.(e);
+                                }}
+                                onKeyDown={(e) => {
+                                    e.stopPropagation();
+                                    overrides?.input?.onKeyDown?.(e);
+                                }}
                                 onChange={(e) => {
                                     setQuery(e.target.value);
                                     if (onInputChange) onInputChange(e.target.value);
@@ -261,7 +298,8 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                             size="xs"
                             shape="circle"
                             startEnhancer={<FontAwesomeIcon icon={faClose} fontSize="10px" />}
-                            onClick={() => {
+                            onClick={(e) => {
+                                e.stopPropagation();
                                 if (onChange) {
                                     onChange(null);
                                 }
@@ -290,10 +328,14 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                             )}
                         </div>
                     )}
-                </div>
+                </ComboboxButton>
                 <ComboboxOptions
                     as="ul"
-                    anchor="bottom start"
+                    anchor={{
+                        to: 'bottom start',
+                        gap: 9,
+                        offset: anchorOffset,
+                    }}
                     transition
                     {...overrides?.optionsContainer}
                     className={clsx(overrides?.optionsContainer?.className, styles.options)}

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/select/Select.module.scss

@@ -25,7 +25,7 @@
 }
 
 .options {
-    width: var(--anchor-width);
+    width: max(var(--button-width, 0px), var(--input-width, 0px));
     max-height: var(--options-maxHeight, auto);
     overflow-y: auto;
     overflow-x: hidden;

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,
         },