paris 0.13.5 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # paris
 
+## 0.14.0
+
+### Minor Changes
+
+- a805866: Select: added `multiple` prop to convert listbox into a multiselect
+
+### Patch Changes
+
+- fa49d95: Select: updated hover state for segemented control
+- fa49d95: InformationalTooltip: added `defaultOpen` prop, replacing previous `open` prop
+- fa49d95: InformationalTooltip: added exit animation, and animations use duration theme variables
+
+## 0.13.6
+
+### Patch Changes
+
+- 1d092ca: Dropdowns: fix z-index positioning with transition containers
+
 ## 0.13.5
 
 ### 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.13.5",
+  "version": "0.14.0",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/combobox/Combobox.tsx

@@ -2,6 +2,8 @@
 
 import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
 import {
+    Fragment,
+
     useMemo, useId, useState,
 } from 'react';
 import { Combobox as HCombobox, Transition } from '@headlessui/react';
@@ -282,6 +284,8 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                     )}
                 </div>
                 <Transition
+                    as="div"
+                    className={dropdownStyles.transitionContainer}
                     enter={dropdownStyles.transition}
                     enterFrom={dropdownStyles.enterFrom}
                     enterTo={dropdownStyles.enterTo}

package/src/stories/informationaltooltip/InformationalTooltip.stories.tsx

@@ -13,17 +13,15 @@ const meta: Meta<typeof InformationalTooltip> = {
 export default meta;
 type Story = StoryObj<typeof InformationalTooltip>;
 
-const render: Story['render'] = (args) =>
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    createElement('div', {
-        style: { minHeight: '200px' },
-    }, createElement(InformationalTooltip, {
-        ...args,
-    }));
+const render: Story['render'] = (args) => createElement('div', {
+    style: { minHeight: '200px' },
+}, createElement(InformationalTooltip, {
+    ...args,
+}));
 
 export const Default: Story = {
     args: {
-        children: 'If you are being payed on 1099s (through transfer outs) you need to pay taxes quarterly. The amount you pay each quarter is a portion of your estimated tax burden for the year, based on your anticipated income amount. If you over/underpay, you will be refunded/owe the difference at the end of the year. ',
+        children: 'If you are being paid on 1099s (through transfer outs) you need to pay taxes quarterly. The amount you pay each quarter is a portion of your estimated tax burden for the year, based on your anticipated income amount. If you over/underpay, you will be refunded/owe the difference at the end of the year. ',
         heading: 'Quarterly taxes',
     },
     render,
@@ -51,15 +49,6 @@ export const CustomTrigger: Story = {
     render,
 };
 
-export const Open: Story = {
-    args: {
-        children: 'Open boolean set to true',
-        size: 'medium',
-        open: true,
-    },
-    render,
-};
-
 export const CustomAlign: Story = {
     args: {
         children: 'With some text below',

package/src/stories/informationaltooltip/InformationalTooltip.tsx

@@ -1,11 +1,12 @@
 import type { FC, ReactNode } from 'react';
+import { useState } from 'react';
 import clsx from 'clsx';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import styles from './InformationalTooltip.module.scss';
 import { TextWhenString } from '../utility';
 import { Icon, Info } from '../icon';
-import { pvar } from '../theme';
+import { pvar, pget } from '../theme';
 
 export type InformationalTooltipProps = {
     /**
@@ -41,15 +42,10 @@ export type InformationalTooltipProps = {
      */
     align?: 'start' | 'center' | 'end';
     /**
-     * The tooltip's open state.
+     * Whether the tooltip should be open by default.
+     * @default false
      */
-    open?: boolean;
-    /**
-     * Event handler called when the open state of the tooltip changes.
-     *
-     * @param value {boolean} - The new open state of the tooltip.
-     */
-    onOpenChange?: (value: boolean) => void | Promise<void>;
+    defaultOpen?: boolean;
 };
 
 /**
@@ -73,53 +69,84 @@ export const InformationalTooltip: FC<InformationalTooltipProps> = ({
     side = 'bottom',
     sideOffset = 6,
     align = 'start',
-    open,
-    onOpenChange,
-}) => (
-    <RadixTooltip.Provider
-        delayDuration={150}
-    >
-        <RadixTooltip.Root
-            open={open}
-            onOpenChange={onOpenChange}
+    defaultOpen = false,
+}) => {
+    const [isOpen, setOpen] = useState(defaultOpen);
+
+    /**
+     * Converts a CSS time value string to milliseconds
+     * @param timeValue - The CSS time value (e.g. '100ms', '0.5s')
+     * @returns The time value in milliseconds
+     * @throws Error if the time value format is invalid
+     */
+    const parseCSSTime = (timeValue: string): number => {
+        // Match the value and unit
+        const match = timeValue.match(/^([\d.]+)(ms|s)$/);
+
+        if (!match) {
+            console.warn('Invalid CSS time format. Expected formats: "100ms", "0.5s"');
+            return 0;
+        }
+
+        const [, value, unit] = match;
+        const numValue = parseFloat(value);
+
+        // Convert to milliseconds based on the unit
+        return unit === 's' ? numValue * 1000 : numValue;
+    };
+
+    return (
+        <RadixTooltip.Provider
+            delayDuration={parseCSSTime(pget('new.animations.duration.normal'))}
         >
-            <RadixTooltip.Trigger>
-                {!trigger ? (
-                    <Icon icon={Info} size={14} className={styles.icon} style={{ color: pvar('new.colors.contentSecondary') }} />
-                ) : (
-                    <>
-                        {trigger}
-                    </>
-                )}
-            </RadixTooltip.Trigger>
-            <RadixTooltip.Portal>
-                <RadixTooltip.Content
-                    side={side}
-                    sideOffset={sideOffset}
-                    align={align}
-                >
-                    <motion.div
-                        initial={{ opacity: 0, y: 3 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.2 }}
-                        className={clsx(styles.tooltip, styles[size])}
-                    >
-                        {heading && (
-                            <div className={styles.heading}>
-                                {headingIcon === null ? null : headingIcon || (
-                                    <Icon icon={Info} size={14} className={styles.icon} />
-                                )}
-                                <TextWhenString as="p" kind="paragraphXSmall" weight="medium">
-                                    {heading}
-                                </TextWhenString>
-                            </div>
-                        )}
-                        <TextWhenString as="p" kind="paragraphXSmall">
-                            {children}
-                        </TextWhenString>
-                    </motion.div>
-                </RadixTooltip.Content>
-            </RadixTooltip.Portal>
-        </RadixTooltip.Root>
-    </RadixTooltip.Provider>
-);
+            <RadixTooltip.Root
+                open={isOpen}
+                onOpenChange={setOpen}
+            >
+                <RadixTooltip.Trigger>
+                    {!trigger ? (
+                        <Icon icon={Info} size={14} className={styles.icon} style={{ color: pvar('new.colors.contentSecondary') }} />
+                    ) : (
+                        <>
+                            {trigger}
+                        </>
+                    )}
+                </RadixTooltip.Trigger>
+                <AnimatePresence>
+                    {isOpen && (
+                        <RadixTooltip.Portal forceMount>
+                            <RadixTooltip.Content
+                                side={side}
+                                sideOffset={sideOffset}
+                                align={align}
+                                asChild
+                            >
+                                <motion.div
+                                    initial={{ opacity: 0, y: 3 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, y: 3 }}
+                                    transition={{ duration: parseCSSTime(pget('new.animations.duration.normal')) / 1000 }}
+                                    className={clsx(styles.tooltip, styles[size])}
+                                >
+                                    {heading && (
+                                        <div className={styles.heading}>
+                                            {headingIcon === null ? null : headingIcon || (
+                                                <Icon icon={Info} size={14} className={styles.icon} />
+                                            )}
+                                            <TextWhenString as="p" kind="paragraphXSmall" weight="medium">
+                                                {heading}
+                                            </TextWhenString>
+                                        </div>
+                                    )}
+                                    <TextWhenString as="p" kind="paragraphXSmall">
+                                        {children}
+                                    </TextWhenString>
+                                </motion.div>
+                            </RadixTooltip.Content>
+                        </RadixTooltip.Portal>
+                    )}
+                </AnimatePresence>
+            </RadixTooltip.Root>
+        </RadixTooltip.Provider>
+    );
+};

package/src/stories/menu/Menu.tsx

@@ -64,7 +64,8 @@ Menu.Items = ({
     className, children, position = 'left', ...props
 }) => (
     <Transition
-        as={Fragment}
+        as="div"
+        className={dropdownStyles.transitionContainer}
         enter={dropdownStyles.transition}
         enterFrom={dropdownStyles.enterFrom}
         enterTo={dropdownStyles.enterTo}

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

@@ -24,11 +24,6 @@
     align-items: center;
 }
 
-.transitionContainer {
-    position: relative;
-    z-index: 10;
-}
-
 .options {
     max-height: var(--options-maxHeight, auto);
     overflow-y: auto;
@@ -286,8 +281,7 @@
     }
 
     &:hover {
-        background-color: var(--pte-new-colors-surfaceSecondary);
-        color: var(--pte-new-colors-contentSecondary);
+        color: var(--pte-new-colors-contentPrimary);
     }
 
     &[data-headlessui-state~="checked"] {

package/src/stories/select/Select.stories.ts

@@ -15,13 +15,20 @@ type Story = StoryObj<typeof Select>;
 const render: Story['render'] = (args) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selected, setSelected] = useState<string | null>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [selectedMultiple, setSelectedMultiple] = useState<string[] | null>([]);
     return createElement('div', {
         style: { minHeight: '400px' },
-    }, createElement(Select, {
+    }, createElement(Select, args.multiple ? {
         ...args,
-        value: selected,
-        onChange: (e) => setSelected(e),
-    }));
+        value: selectedMultiple,
+        onChange: (value: string[] | null) => setSelectedMultiple(value),
+    }
+        : {
+            ...args,
+            value: selected,
+            onChange: (value: string | null) => setSelected(value),
+        }));
 };
 
 export const Default: Story = {
@@ -112,6 +119,21 @@ export const Card: Story = {
     render,
 };
 
+export const Multiple: Story = {
+    args: {
+        label: 'Release type',
+        description: 'Select the type of release you want to create.',
+        options: [
+            { id: '1', node: 'Single' },
+            { id: '2', node: 'EP' },
+            { id: '3', node: 'Album (LP)' },
+        ],
+        multiple: true,
+        multipleItemsName: 'releases',
+    },
+    render,
+};
+      
 export const Segmented: Story = {
     args: {
         label: 'Donation',

package/src/stories/select/Select.tsx

@@ -29,7 +29,7 @@ export type Option<T = Record<string, any>> = {
     disabled?: boolean,
     metadata?: T,
 };
-export type SelectProps<T = Record<string, any>> = {
+export type CommonSelectProps<T = Record<string, any>> = {
     /**
      * The  {@link Option}s to render in the select box.
      *
@@ -38,21 +38,6 @@ export type SelectProps<T = Record<string, any>> = {
      * For type safety, you can pass in a type parameter to `SelectProps` component. This will be used as the type for the `metadata` property of each option.
      */
     options: Option<T>[];
-    /**
-     * The option ID to render as selected in the select box.
-     *
-     * This should exactly match one of the option IDs passed in the `options` prop. If `null`, no option will be selected.
-     */
-    value?: Option<T>['id'] | null;
-    /**
-     * The interaction handler for the Select.
-     */
-    onChange?: (value: Option<T>['id'] | null) => void | Promise<void>;
-    /**
-     * The visual variant of the Select. `listbox` will render as a dropdown menu, `radio` will render as a radio group, `card` will render as selectable cards, and `segmented` will render as a segmented control.
-     * @default listbox
-     */
-    kind?: 'listbox' | 'radio' | 'card' | 'segmented';
     /**
      * The size of the options dropdown, in pixels. Only applicable to kind="listbox".
      */
@@ -67,7 +52,6 @@ export type SelectProps<T = Record<string, any>> = {
      * @default compact
      */
     segmentedHeight?: 'compact' | 'tall';
-
     /**
      * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
      */
@@ -83,6 +67,55 @@ export type SelectProps<T = Record<string, any>> = {
     }
 } & Omit<InputProps, 'type' | 'overrides'>;
 
+export type SingleSelectProps<T = Record<string, any>> = {
+    /**
+     * The option ID to render as selected in the select box.
+     *
+     * This should exactly match the option IDs passed in the `options` prop. If `null`, no option will be selected.
+     */
+    value?: Option<T>['id'] | null;
+    /**
+     * The interaction handler for the Select.
+     */
+    onChange?: (value: Option<T>['id'] | null) => void | Promise<void>;
+    /**
+     * The visual variant of the Select. `listbox` will render as a dropdown menu, `radio` will render as a radio group, `card` will render as selectable cards, and `segmented` will render as a segmented control.
+     * @default listbox
+     */
+    kind?: 'listbox' | 'radio' | 'card' | 'segmented';
+    multiple?: false;
+    multipleItemsName?: never;
+} & CommonSelectProps;
+
+export type MultiSelectProps<T = Record<string, any>> = {
+    /**
+     * Controls the text of the Multiselect button when multiple items selected, such as "All ___" or "2 ___"
+     * @default items
+     */
+    multipleItemsName?: string;
+    /**
+     * The visual variant of the Select. For multiselect, only `listbox` is supported.
+     * @default listbox
+     */
+    kind?: 'listbox',
+    /**
+     * Converts the single select into a multiselect.
+     */
+    multiple: true;
+    /**
+     * For multiselect, should be a string[] that matches the option IDs passed in the `options` prop. If `null`, no option will be selected.
+     */
+    value?: Option<T>['id'][] | null;
+    /**
+     * The interaction handler for the Select.
+     */
+    onChange?: (value: Option<T>['id'][] | null) => void | Promise<void>;
+} & CommonSelectProps;
+
+type SelectProps<T = Record<string, any>> =
+    | (SingleSelectProps<T>)
+    | (MultiSelectProps<T>);
+
 /**
  * A Select component is used to render a `select` box.
  *
@@ -112,10 +145,25 @@ export const Select = forwardRef(function <T = Record<string, any>>({
     kind = 'listbox',
     maxHeight = 320,
     hasOptionBorder = false,
+    multiple = false,
+    multipleItemsName,
     segmentedHeight = 'compact',
     overrides,
 }: SelectProps<T>, ref: ForwardedRef<any>) {
     const inputID = useId();
+    const multiItems = multipleItemsName || 'items';
+    const buttonText = () => {
+        if (!value || value.length === 0) {
+            return placeholder || 'Select an option';
+        } if (!multiple) {
+            return options?.find((o) => o.id === value)?.node;
+        } if (value && value.length === 1) {
+            return options?.find((o) => o.id === value[0])?.node;
+        } if (value.length === options.length) {
+            return `All ${multiItems}`;
+        }
+        return `${value.length} ${multiItems}`;
+    };
     return (
         <Field
             htmlFor={inputID}
@@ -137,6 +185,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                     ref={ref}
                     value={value}
                     onChange={onChange}
+                    multiple={multiple}
                 >
                     <Listbox.Button
                         id={inputID}
@@ -164,7 +213,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                 )}
                             </div>
                         )}
-                        {options?.find((o) => o.id === value)?.node || placeholder || 'Select an option'}
+                        {buttonText()}
                         {endEnhancer ? (
                             <div
                                 {...overrides?.endEnhancerContainer}
@@ -184,13 +233,13 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                     </Listbox.Button>
                     <Transition
                         as="div"
+                        className={dropdownStyles.transitionContainer}
                         enter={dropdownStyles.transition}
                         enterFrom={dropdownStyles.enterFrom}
                         enterTo={dropdownStyles.enterTo}
                         leave={dropdownStyles.transition}
                         leaveFrom={dropdownStyles.leaveFrom}
                         leaveTo={dropdownStyles.leaveTo}
-                        className={styles.transitionContainer}
                     >
                         <Listbox.Options
                             className={clsx(
@@ -205,7 +254,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                 <Listbox.Option
                                     key={option.id}
                                     value={option.id}
-                                    data-selected={option.id === value}
+                                    data-selected={option.id === value || (value && value.includes(option.id))}
                                     className={clsx(
                                         overrides?.option,
                                         styles.option,
@@ -218,7 +267,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                             {option.node}
                                         </Text>
                                     ) : option.node}
-                                    {option.id === value && (
+                                    {(option.id === value || (value && value.includes(option.id))) && (
                                         <Icon icon={Check} size={12} />
                                     )}
                                 </Listbox.Option>

package/src/stories/utility/Dropdown.module.scss

@@ -1,3 +1,8 @@
+.transitionContainer {
+    position: relative;
+    z-index: 10;
+}
+
 .transition {
     transition: var(--pte-animations-interaction);
 }