paris 0.21.2 → 0.21.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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

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.2",
+    "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/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;