paris 0.10.1 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # paris
 
+## 0.11.0
+
+### Minor Changes
+
+- 2e075cc: Combobox: Improved custom option props, allowing comboboxes to act more like auto-complete inputs
+
+### Patch Changes
+
+- 2e075cc: Combobox: add Field overrides
+
+## 0.10.2
+
+### Patch Changes
+
+- 014a642: Button: hide enhancers in loading state
+
 ## 0.10.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.10.1",
+  "version": "0.11.0",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/button/Button.tsx

@@ -14,8 +14,7 @@ import { Text } from '../text';
 import type { Enhancer } from '../../types/Enhancer';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pvar } from '../theme';
-import { Spinner } from '../icon';
-import { NotificationDot } from '../icon/NotificationDot';
+import { Spinner, NotificationDot } from '../icon';
 
 const EnhancerSizes = {
     large: 13,
@@ -200,7 +199,7 @@ export const Button: FC<ButtonProps> = ({
                 ),
             } : {}}
         >
-            {!!startEnhancer && (
+            {!!(startEnhancer && !loading) && (
                 <MemoizedEnhancer
                     enhancer={startEnhancer}
                     size={EnhancerSizes[size]}
@@ -215,7 +214,7 @@ export const Button: FC<ButtonProps> = ({
                     )}
                 </Text>
             )}
-            {!!endEnhancer && (
+            {!!(endEnhancer && !loading) && (
                 <MemoizedEnhancer
                     enhancer={endEnhancer}
                     size={EnhancerSizes[size]}

package/src/stories/combobox/Combobox.stories.ts

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks,react/no-children-prop */
 import type { Meta, StoryObj } from '@storybook/react';
 import { createElement, useState } from 'react';
-import type { Option } from './Combobox';
+import type { ComboboxProps, Option } from './Combobox';
 import { Combobox } from './Combobox';
 import { Text } from '../text';
 
@@ -12,56 +12,78 @@ const meta: Meta<typeof Combobox> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof Combobox>;
+type Story = StoryObj<typeof Combobox<{ name: string }>>;
 
-export const Default: Story = {
-    args: {
-        label: 'Share',
-        description: 'Search for a friend to share this document with.',
-        placeholder: 'Search...',
-        options: [
-            {
-                id: '1',
-                node: createElement(Text, {
-                    kind: 'paragraphSmall',
-                    children: 'Mia Dolan',
-                }),
-                metadata: {
-                    name: 'Mia Dolan',
-                },
+const ComboboxArgs: ComboboxProps<{ name: string }> = {
+    label: 'Share',
+    description: 'Search for a friend to share this document with.',
+    placeholder: 'Search...',
+    options: [
+        {
+            id: '1',
+            node: createElement(Text, {
+                kind: 'paragraphSmall',
+                children: 'Mia Dolan',
+            }),
+            metadata: {
+                name: 'Mia Dolan',
             },
-            {
-                id: '2',
-                node: createElement(Text, {
-                    kind: 'paragraphSmall',
-                    children: 'Sebastian Wilder',
-                }),
-                metadata: {
-                    name: 'Sebastian Wilder',
-                },
+        },
+        {
+            id: '2',
+            node: 'SEB',
+            metadata: {
+                name: 'Sebastian Wilder',
             },
-            {
-                id: '3',
-                node: createElement(Text, {
-                    kind: 'paragraphSmall',
-                    children: 'Amy Brandt',
-                }),
-                metadata: {
-                    name: 'Amy Brandt',
-                },
+        },
+        {
+            id: '3',
+            node: createElement(Text, {
+                kind: 'paragraphSmall',
+                children: 'Amy Brandt',
+            }),
+            metadata: {
+                name: 'Amy Brandt',
+            },
+        },
+        {
+            id: '4',
+            node: createElement(Text, {
+                kind: 'paragraphSmall',
+                children: 'Laura Wilder',
+            }),
+            metadata: {
+                name: 'Laura Wilder',
             },
-            {
-                id: '4',
-                node: createElement(Text, {
-                    kind: 'paragraphSmall',
-                    children: 'Laura Wilder',
-                }),
+        },
+    ],
+};
+
+export const Default: Story = {
+    args: ComboboxArgs,
+    render: (args) => {
+        const [selected, setSelected] = useState<Option<{ name: string }> | null>(null);
+        const [inputValue, setInputValue] = useState<string>('');
+        return createElement('div', {
+            style: { minHeight: '200px' },
+        }, createElement(Combobox<{ name: string }>, {
+            ...args,
+            value: (selected?.id === null) ? {
+                id: null,
+                node: inputValue,
                 metadata: {
-                    name: 'Laura Wilder',
+                    name: inputValue,
                 },
-            },
-        ],
+            } : selected as Option<{ name: string }> | null,
+            options: (args.options as Option<{ name: string }>[]).filter((o) => (o.metadata?.name as string || '').toLowerCase().includes(inputValue.toLowerCase())),
+            onChange: (e) => setSelected(e),
+            onInputChange: (e) => setInputValue(e),
+        }));
     },
+};
+
+export const AllowCustomValue: Story = {
+    args: { ...ComboboxArgs, allowCustomValue: true, customValueString: 'Add "%v"' },
     render: (args) => {
         const [selected, setSelected] = useState<Option | null>(null);
         const [inputValue, setInputValue] = useState<string>('');

package/src/stories/combobox/Combobox.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
-import { useId, useState } from 'react';
+import {
+    useMemo, useId, useState,
+} from 'react';
 import { Combobox as HCombobox, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -14,6 +16,7 @@ import { Text } from '../text';
 import type { InputProps } from '../input';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pget, theme } from '../theme';
+import type { FieldProps } from '../field';
 import { Field } from '../field';
 import { Button } from '../button';
 
@@ -60,6 +63,11 @@ export type ComboboxProps<T extends Record<string, any>> = {
      * @default false
      */
     allowCustomValue?: boolean;
+    /**
+     * Whether to show the custom value option in the dropdown. This is irrelevant if `allowCustomValue` is `false`.
+     * @default true
+     */
+    showCustomValueOption?: boolean;
     /**
      * The text to use for the custom creation option. This should include a `%v` placeholder, which will be replaced with the user's input.
      *
@@ -67,6 +75,15 @@ export type ComboboxProps<T extends Record<string, any>> = {
      * @default Create "%v"...
      */
     customValueString?: string;
+    /**
+     * A function that will be called to create an {@link Option} based on the user's custom typed query value. This is useful for adding custom styling by  allowing you to pass a custom `Option.node` based on the value. This overrides the `customValueString` prop.
+     * @param value
+     */
+    customValueToOption?: (value: string) => Option<T>;
+    /**
+     * 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.
+     */
+    hideClearButton?: boolean;
     /**
      * The size of the options dropdown, in pixels.
      */
@@ -80,6 +97,7 @@ export type ComboboxProps<T extends Record<string, any>> = {
      * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
      */
     overrides?: {
+        field?: FieldProps;
         container?: ComponentPropsWithoutRef<'div'>;
         input?: ComponentPropsWithoutRef<'input'>;
         optionsContainer?: ComponentPropsWithoutRef<'div'>;
@@ -94,6 +112,10 @@ export type ComboboxProps<T extends Record<string, any>> = {
 /**
  * A Combobox component is used to render a searchable select.
  *
+ * When the selected option node is a strings, the combobox will act like an input even when an option is selected, allowing users to edit the selected option directly in order to pick a new one. To circumvent this and make selected options non-editable, pass nodes that are `Text` components instead.
+ *
+ * When `allowCustomValue` is `true`, a custom value option will be added to the dropdown. This option's text can be customized by passing a value for `customValueString`, where `%v` within the string is the user's input. You can provide an entirely custom node through `renderCustomValueOption`. By default, `onChange` will be called for every input change when custom values are allowed.
+ *
  * <hr />
  *
  * To use this component, import it as follows:
@@ -118,7 +140,10 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
     disabled,
     onInputChange,
     allowCustomValue,
+    showCustomValueOption = true,
     customValueString = 'Create "%v"',
+    customValueToOption,
+    hideClearButton = false,
     maxHeight = 320,
     hasOptionBorder = false,
     overrides,
@@ -127,6 +152,13 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
     const [selectedID, setSelectedID] = useState<string | null>(value?.id || null);
     const [query, setQuery] = useState('');
 
+    const optionsWithCustomValue = useMemo(() => ([
+        ...((allowCustomValue && customValueToOption) ? [
+            customValueToOption(query),
+        ] : []),
+        ...options,
+    ]), [allowCustomValue, customValueToOption, options, query]);
+
     return (
         <Field
             htmlFor={inputID}
@@ -140,13 +172,14 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                 label: overrides?.label,
                 description: overrides?.description,
             }}
+            {...(overrides?.field ?? {})}
         >
             <HCombobox
                 as="div"
                 value={selectedID}
                 onChange={(id) => {
                     if (onChange) {
-                        const sel = options.find((o) => o.id === id);
+                        const sel = optionsWithCustomValue.find((o) => o.id === id);
                         if (sel) {
                             onChange(sel);
                             setSelectedID(sel.id);
@@ -178,16 +211,23 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                         </div>
                     )}
                     <div className={styles.content}>
-                        {value ? value.node : (
+                        {(value?.node && typeof value.node !== 'string') ? value.node : (
                             <HCombobox.Input
                                 id={inputID}
                                 {...overrides?.input}
                                 placeholder={placeholder}
                                 // value={query}
+                                displayValue={(allowCustomValue && typeof value?.node === 'string') ? () => value.node as string : undefined}
                                 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')}
@@ -199,7 +239,8 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                             />
                         )}
                     </div>
-                    {!!value && (
+
+                    {(!!value && (!hideClearButton || typeof value.node !== 'string')) && (
                         <Button
                             size="xs"
                             shape="circle"
@@ -246,7 +287,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                             '--options-maxHeight': `${maxHeight}px`,
                         } as CSSProperties}
                     >
-                        {(allowCustomValue && query.length > 0) && (
+                        {(allowCustomValue && showCustomValueOption && !customValueToOption && query.length > 0) && (
                             <HCombobox.Option
                                 value={query}
                                 data-selected={false}
@@ -260,24 +301,29 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                                 </Text>
                             </HCombobox.Option>
                         )}
-                        {(options || []).map((option) => (
-                            <HCombobox.Option
-                                key={option.id}
-                                value={option.id}
-                                data-selected={option.id === value}
-                                className={clsx(
-                                    overrides?.option,
-                                    styles.option,
-                                    hasOptionBorder && styles.optionBorder,
-                                )}
-                            >
-                                {typeof option.node === 'string' ? (
-                                    <Text as="span" kind="paragraphSmall">
-                                        {option.node}
-                                    </Text>
-                                ) : option.node}
-                            </HCombobox.Option>
-                        ))}
+                        {
+                            (
+                                optionsWithCustomValue || []
+                            )
+                                .map((option) => (
+                                    <HCombobox.Option
+                                        key={option.id}
+                                        value={option.id}
+                                        data-selected={option.id === value}
+                                        className={clsx(
+                                            overrides?.option,
+                                            styles.option,
+                                            hasOptionBorder && styles.optionBorder,
+                                        )}
+                                    >
+                                        {typeof option.node === 'string' ? (
+                                            <Text as="span" kind="paragraphSmall">
+                                                {option.node}
+                                            </Text>
+                                        ) : option.node}
+                                    </HCombobox.Option>
+                                ))
+                        }
                     </HCombobox.Options>
                 </Transition>
             </HCombobox>