paris 0.21.2 → 0.22.0

package/src/stories/combobox/Combobox.tsx

@@ -2,11 +2,19 @@
 
 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 { OpenChangeEffect } from '../../helpers/OpenChangeEffect';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
+import { useControllableState } from '../../helpers/useControllableState';
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
 import type { FieldProps } from '../field';
@@ -46,6 +54,10 @@ export type ComboboxProps<T extends Record<string, any>> = {
      * If `null`, no option will be selected.
      */
     value?: Option<T> | null;
+    /**
+     * The initial value for uncontrolled mode. If `value` is provided, this is ignored.
+     */
+    defaultValue?: Option<T> | null;
     /**
      * The interaction handler for the Combobox. This will be called when the user selects an option from the dropdown.
      *
@@ -81,6 +93,10 @@ export type ComboboxProps<T extends Record<string, any>> = {
      * @param value
      */
     customValueToOption?: (value: string) => Option<T>;
+    /**
+     * Called when the combobox dropdown opens or closes.
+     */
+    onOpenChange?: (open: boolean) => void;
     /**
      * Whether to hide the clear button when a value is selected. This will never be hidden if the selected option's node is not a strong, because there is no other way to clear the value as of now.
      */
@@ -137,6 +153,7 @@ export type ComboboxProps<T extends Record<string, any>> = {
 export function Combobox<T extends Record<string, any> = Record<string, any>>({
     options,
     value,
+    defaultValue,
     onChange,
     label,
     status,
@@ -153,6 +170,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
     showCustomValueOption = true,
     customValueString = 'Create "%v"',
     customValueToOption,
+    onOpenChange,
     hideClearButton = false,
     maxHeight = 320,
     hasOptionBorder = false,
@@ -160,8 +178,31 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
     overrides,
 }: ComboboxProps<T>) {
     const inputID = useId();
-    const [selectedID, setSelectedID] = useState<string | null>(value?.id || null);
+    const [resolvedValue, setResolvedValue] = useControllableState<Option<T> | null>({
+        value,
+        defaultValue,
+        onChange,
+    });
     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, resolvedValue]);
 
     const optionsWithCustomValue = useMemo(
         () => [...(allowCustomValue && customValueToOption ? [customValueToOption(query)] : []), ...options],
@@ -187,154 +228,168 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
             <HCombobox
                 as="div"
                 immediate={!hideOptionsInitially}
-                value={selectedID}
+                value={resolvedValue?.id ?? null}
                 onChange={(id) => {
-                    if (onChange) {
-                        const sel = optionsWithCustomValue.find((o) => o.id === id);
-                        if (sel) {
-                            onChange(sel);
-                            setSelectedID(sel.id);
-                        } else if (id) {
-                            onChange({
-                                id: null,
-                                node: id,
-                            });
-                        }
+                    const sel = optionsWithCustomValue.find((o) => o.id === id);
+                    if (sel) {
+                        setResolvedValue(sel);
+                    } else if (id) {
+                        setResolvedValue({ id: null, node: id } as Option<T>);
                     }
                 }}
             >
-                <div
-                    data-status={disabled ? 'disabled' : status || 'default'}
-                    {...overrides?.inputContainer}
-                    className={clsx(overrides?.inputContainer?.className, inputStyles.inputContainer)}
-                >
-                    {!!startEnhancer && (
-                        <div
-                            {...overrides?.startEnhancerContainer}
-                            className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}
+                {({ open }) => (
+                    <>
+                        <OpenChangeEffect open={open} onOpenChange={onOpenChange} />
+                        <ComboboxButton
+                            as="div"
+                            ref={containerRef}
+                            tabIndex={-1}
                             data-status={disabled ? 'disabled' : status || 'default'}
+                            {...overrides?.inputContainer}
+                            className={clsx(overrides?.inputContainer?.className, inputStyles.inputContainer)}
                         >
                             {!!startEnhancer && (
-                                <MemoizedEnhancer
-                                    enhancer={startEnhancer}
-                                    size={parseInt(
-                                        pget('typography.styles.paragraphSmall.fontSize') ||
-                                            theme.typography.styles.paragraphSmall.fontSize,
-                                        10,
+                                <div
+                                    {...overrides?.startEnhancerContainer}
+                                    className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}
+                                    data-status={disabled ? 'disabled' : status || 'default'}
+                                >
+                                    {!!startEnhancer && (
+                                        <MemoizedEnhancer
+                                            enhancer={startEnhancer}
+                                            size={parseInt(
+                                                pget('typography.styles.paragraphSmall.fontSize') ||
+                                                    theme.typography.styles.paragraphSmall.fontSize,
+                                                10,
+                                            )}
+                                        />
                                     )}
-                                />
+                                </div>
                             )}
-                        </div>
-                    )}
-                    <div className={styles.content}>
-                        {value?.node && typeof value.node !== 'string' ? (
-                            value.node
-                        ) : (
-                            <ComboboxInput
-                                id={inputID}
-                                {...overrides?.input}
-                                placeholder={placeholder}
-                                // value={query}
-                                displayValue={() => value?.node as string}
-                                onChange={(e) => {
-                                    setQuery(e.target.value);
-                                    if (onInputChange) onInputChange(e.target.value);
-                                    if (overrides?.input?.onChange) overrides.input.onChange(e);
-                                    if (allowCustomValue && e.target.value) {
-                                        onChange?.(
-                                            customValueToOption?.(e.target.value) || {
-                                                id: null,
-                                                node: e.target.value,
-                                            },
-                                        );
-                                    }
-                                }}
-                                aria-disabled={disabled}
-                                data-status={disabled ? 'disabled' : status || 'default'}
-                                className={clsx(overrides?.input?.className, inputStyles.input, styles.field)}
-                            />
-                        )}
-                    </div>
+                            <div className={styles.content}>
+                                {resolvedValue?.node && typeof resolvedValue.node !== 'string' ? (
+                                    resolvedValue.node
+                                ) : (
+                                    <ComboboxInput
+                                        ref={inputRef}
+                                        id={inputID}
+                                        {...overrides?.input}
+                                        placeholder={placeholder}
+                                        // value={query}
+                                        displayValue={() => resolvedValue?.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);
+                                            if (overrides?.input?.onChange) overrides.input.onChange(e);
+                                            if (allowCustomValue && e.target.value) {
+                                                setResolvedValue(
+                                                    customValueToOption?.(e.target.value) ||
+                                                        ({
+                                                            id: null,
+                                                            node: e.target.value,
+                                                        } as Option<T>),
+                                                );
+                                            }
+                                        }}
+                                        aria-disabled={disabled}
+                                        data-status={disabled ? 'disabled' : status || 'default'}
+                                        className={clsx(overrides?.input?.className, inputStyles.input, styles.field)}
+                                    />
+                                )}
+                            </div>
 
-                    {!!value && (!hideClearButton || typeof value.node !== 'string') && (
-                        <Button
-                            size="xs"
-                            shape="circle"
-                            startEnhancer={<FontAwesomeIcon icon={faClose} fontSize="10px" />}
-                            onClick={() => {
-                                if (onChange) {
-                                    onChange(null);
-                                }
-                                setSelectedID(null);
-                            }}
-                            {...overrides?.clearButton}
-                        >
-                            Clear
-                        </Button>
-                    )}
-                    {!!endEnhancer && (
-                        <div
-                            {...overrides?.endEnhancerContainer}
-                            className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}
-                            data-status={disabled ? 'disabled' : status || 'default'}
-                        >
+                            {!!resolvedValue && (!hideClearButton || typeof resolvedValue.node !== 'string') && (
+                                <Button
+                                    size="xs"
+                                    shape="circle"
+                                    startEnhancer={<FontAwesomeIcon icon={faClose} fontSize="10px" />}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        setResolvedValue(null);
+                                    }}
+                                    {...overrides?.clearButton}
+                                >
+                                    Clear
+                                </Button>
+                            )}
                             {!!endEnhancer && (
-                                <MemoizedEnhancer
-                                    enhancer={endEnhancer}
-                                    size={parseInt(
-                                        pget('typography.styles.paragraphSmall.fontSize') ||
-                                            theme.typography.styles.paragraphSmall.fontSize,
-                                        10,
+                                <div
+                                    {...overrides?.endEnhancerContainer}
+                                    className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}
+                                    data-status={disabled ? 'disabled' : status || 'default'}
+                                >
+                                    {!!endEnhancer && (
+                                        <MemoizedEnhancer
+                                            enhancer={endEnhancer}
+                                            size={parseInt(
+                                                pget('typography.styles.paragraphSmall.fontSize') ||
+                                                    theme.typography.styles.paragraphSmall.fontSize,
+                                                10,
+                                            )}
+                                        />
                                     )}
-                                />
+                                </div>
                             )}
-                        </div>
-                    )}
-                </div>
-                <ComboboxOptions
-                    as="ul"
-                    anchor="bottom start"
-                    transition
-                    {...overrides?.optionsContainer}
-                    className={clsx(overrides?.optionsContainer?.className, styles.options)}
-                    style={
-                        {
-                            '--options-maxHeight': `${maxHeight}px`,
-                            ...overrides?.optionsContainer?.style,
-                        } as CSSProperties
-                    }
-                >
-                    {allowCustomValue && showCustomValueOption && !customValueToOption && query.length > 0 && (
-                        <ComboboxOption
-                            as="li"
-                            value={query}
-                            data-selected={false}
-                            className={clsx(overrides?.customValueOption?.className, styles.option)}
-                            {...overrides?.customValueOption}
+                        </ComboboxButton>
+                        <ComboboxOptions
+                            as="ul"
+                            anchor={{
+                                to: 'bottom start',
+                                gap: 9,
+                                offset: anchorOffset,
+                            }}
+                            transition
+                            {...overrides?.optionsContainer}
+                            className={clsx(overrides?.optionsContainer?.className, styles.options)}
+                            style={
+                                {
+                                    '--options-maxHeight': `${maxHeight}px`,
+                                    ...overrides?.optionsContainer?.style,
+                                } as CSSProperties
+                            }
                         >
-                            <Text as="span" kind="paragraphSmall">
-                                {customValueString.replace('%v', query)}
-                            </Text>
-                        </ComboboxOption>
-                    )}
-                    {(optionsWithCustomValue || []).map((option) => (
-                        <ComboboxOption
-                            as="li"
-                            key={option.id}
-                            value={option.id}
-                            {...overrides?.option}
-                            className={clsx(
-                                overrides?.option?.className,
-                                styles.option,
-                                hasOptionBorder && styles.optionBorder,
+                            {allowCustomValue && showCustomValueOption && !customValueToOption && query.length > 0 && (
+                                <ComboboxOption
+                                    as="li"
+                                    value={query}
+                                    data-selected={false}
+                                    className={clsx(overrides?.customValueOption?.className, styles.option)}
+                                    {...overrides?.customValueOption}
+                                >
+                                    <Text as="span" kind="paragraphSmall">
+                                        {customValueString.replace('%v', query)}
+                                    </Text>
+                                </ComboboxOption>
                             )}
-                        >
-                            <TextWhenString as="span" kind="paragraphSmall">
-                                {option.node}
-                            </TextWhenString>
-                        </ComboboxOption>
-                    ))}
-                </ComboboxOptions>
+                            {(optionsWithCustomValue || []).map((option) => (
+                                <ComboboxOption
+                                    as="li"
+                                    key={option.id}
+                                    value={option.id}
+                                    {...overrides?.option}
+                                    className={clsx(
+                                        overrides?.option?.className,
+                                        styles.option,
+                                        hasOptionBorder && styles.optionBorder,
+                                    )}
+                                >
+                                    <TextWhenString as="span" kind="paragraphSmall">
+                                        {option.node}
+                                    </TextWhenString>
+                                </ComboboxOption>
+                            ))}
+                        </ComboboxOptions>
+                    </>
+                )}
             </HCombobox>
         </Field>
     );

package/src/stories/drawer/Drawer.module.scss

@@ -11,8 +11,6 @@ $panelPaddingY: 20px;
 $duration: var(--pte-animations-duration-relaxed);
 $paginationDuration: var(--pte-animations-duration-normal);
 $panelAnimationDelay: var(--pte-animations-duration-fast);
-//$panelAnimationDelay: var(--pte-animations-duration-rapid);
-//$duration: var(--pte-animations-duration-normal);
 
 .root {
     position: fixed;
@@ -275,7 +273,6 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     position: relative;
     height: 100%;
     padding: 0;
-    //padding: $panelPaddingY $panelPaddingX;
     background-color: var(--pte-new-colors-surfacePrimary);
     overflow: auto;
 
@@ -283,7 +280,6 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    //gap: $panelPaddingY;
 
     &.enterFrom {
         box-shadow: none;
@@ -339,14 +335,9 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 
 .actionMenu {}
 
-.closeButton {
-    //position: absolute;
-    //right: $panelPaddingX;
-    //top: $panelPaddingY - 5px;
-}
+.closeButton {}
 
 .content {
-    //padding: 20px;
     overflow-y: scroll;
     height: 100%;
 }
@@ -405,6 +396,42 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     transition: $paginationDuration var(--pte-animations-timing-easeOutQuad);
 }
 
+// Page transition containers
+.pageStack {
+    display: grid;
+    grid-template-columns: 1fr;
+    min-height: 0;
+}
+
+.pageStackClip {
+    overflow: hidden;
+}
+
+.pageStackItem {
+    grid-area: 1 / 1;
+
+    &[data-active='false'] {
+        pointer-events: none;
+    }
+}
+
+// Progress bar
+.progressBar {
+    position: relative;
+    width: 100%;
+    height: 2px;
+    background: var(--pte-new-colors-borderMedium);
+}
+
+.progressBarFill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: var(--pte-new-colors-contentPrimary);
+    transition: width $paginationDuration var(--pte-animations-timing-easeInQuad);
+}
+
 .bottomPanel {
     border-top: 1px solid var(--pte-new-colors-borderStrong);
     position: absolute;
@@ -412,6 +439,21 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     width: 100%;
 }
 
+.bottomPanelSlots {
+    display: flex;
+    flex-direction: column;
+
+    // Auto-separator between portaled slot items
+    > * + * {
+        border-top: 1px solid var(--pte-new-colors-borderMedium);
+    }
+
+    // Separator between slots and base bottomPanel content that follows
+    &:not(:empty) ~ * {
+        border-top: 1px solid var(--pte-new-colors-borderMedium);
+    }
+}
+
 .bottomPanelContent {
     position: relative;
     padding: 20px;
@@ -421,13 +463,12 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     }
 }
 
-.bottomPanelSpacer {
+.bottomPanelSlotItem {
+    position: relative;
     padding: 20px;
+}
 
-    &.noPadding {
-        padding: 0;
-    }
-
+.bottomPanelSpacer {
     opacity: 0;
     pointer-events: none;
 }