paris 0.8.0 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # paris
 
+## 0.8.2
+
+### Patch Changes
+
+- 5206e66: Input, Select: `forwardRef`
+
+## 0.8.1
+
+### Patch Changes
+
+- c3a5648: Allow for title in paginated drawer
+- 963e618: Pagination: add `reset` function to reset the history state
+
 ## 0.8.0
 
 ### Minor 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.8.0",
+  "version": "0.8.2",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

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

@@ -292,11 +292,11 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     }
 }
 
-.paginationButtons {
+.paginationTitle {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 8px;
+    gap: 12px;
 }
 
 .enter {

package/src/stories/drawer/Drawer.stories.tsx

@@ -42,7 +42,6 @@ export const Default: Story = {
 
 export const Paginated: Story = {
     args: {
-        title: 'Creation process',
         children: [],
     },
     render: (args) => {
@@ -50,6 +49,12 @@ export const Paginated: Story = {
         const pages = ['step1', 'step2', 'step3'] as const;
         const pagination = usePagination<typeof pages>('step1');
 
+        const currentPageTitle = {
+            step1: 'Step 1',
+            step2: 'Step 2',
+            step3: 'Step 3',
+        }[pagination.currentPage];
+
         return (
             <>
                 <Button
@@ -62,6 +67,7 @@ export const Paginated: Story = {
                     isOpen={isOpen}
                     onClose={setIsOpen}
                     pagination={pagination}
+                    title={currentPageTitle}
                 >
                     <div key="step1" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                         Step 1: Enter your name

package/src/stories/drawer/Drawer.tsx

@@ -273,7 +273,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                     >
                                         <div
                                             className={clsx(
-                                                styles.paginationButtons,
+                                                styles.paginationTitle,
                                             )}
                                         >
                                             <Button
@@ -306,6 +306,16 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                             >
                                                 Go to next page in this modal
                                             </Button>
+                                            <VisuallyHidden
+                                                // Hide when requested, or when pagination is enabled (the title isn't relevant to any specific page).
+                                                when={hideTitle}
+                                            >
+                                                <Dialog.Title as="h2" className={styles.titleTextContainer}>
+                                                    <TextWhenString kind="paragraphSmall" weight="medium">
+                                                        {title}
+                                                    </TextWhenString>
+                                                </Dialog.Title>
+                                            </VisuallyHidden>
                                         </div>
                                         <Button
                                             kind="tertiary"

package/src/stories/input/Input.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import { useId } from 'react';
-import type { FC, ComponentPropsWithoutRef } from 'react';
+import { forwardRef, useId } from 'react';
+import type { FC, ComponentPropsWithoutRef, ForwardedRef } from 'react';
 import clsx from 'clsx';
 import styles from './Input.module.scss';
 import type { TextProps } from '../text';
-import { Text } from '../text';
 import type { Enhancer } from '../../types/Enhancer';
-import { pget, theme } from '../theme';
+import { theme } from '../theme';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import type { FieldProps } from '../field';
 import { Field } from '../field';
@@ -65,7 +64,7 @@ export type InputProps = {
  * ```
  * @constructor
  */
-export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = ({
+export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forwardRef(({
     label,
     status,
     type,
@@ -77,7 +76,7 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = ({
     disabled,
     overrides,
     ...props
-}) => {
+}, ref: ForwardedRef<HTMLInputElement>) => {
     const inputID = useId();
     return (
         <Field
@@ -117,6 +116,7 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = ({
                 <input
                     {...props}
                     id={inputID}
+                    ref={ref}
                     type={type || 'text'}
                     aria-label={typeof label === 'string' ? label : props['aria-label']}
                     aria-describedby={`${inputID}-description`}
@@ -140,4 +140,4 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = ({
             </div>
         </Field>
     );
-};
+});

package/src/stories/pagination/usePagination.ts

@@ -40,6 +40,11 @@ export type PaginationState<T extends string[] | readonly string[] = string[]> =
      * The page history.
      */
     history: T[number][],
+
+    /**
+     * Clear the page history and reset to the initial page.
+     */
+    reset: () => void,
 };
 
 /**
@@ -94,6 +99,11 @@ export const usePagination = <T extends string[] | readonly string[] = string[]>
         }
     };
 
+    const reset = (): void => {
+        setCurrentPage(initialPage);
+        setHistory([initialPage]);
+    };
+
     return {
         currentPage,
         open,
@@ -101,6 +111,7 @@ export const usePagination = <T extends string[] | readonly string[] = string[]>
         back,
         canGoForward,
         forward,
+        reset,
         history,
     } as PaginationState<T>;
 };

package/src/stories/select/Select.tsx

@@ -1,11 +1,13 @@
+/* eslint-disable prefer-arrow-callback,func-names */
+
 'use client';
 
-import type { ReactNode, ComponentPropsWithoutRef } from 'react';
+import type { ReactNode, ComponentPropsWithoutRef, ForwardedRef } from 'react';
 import { Listbox, RadioGroup, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import { useId } from 'react';
+import { forwardRef, useId } from 'react';
 import inputStyles from '../input/Input.module.scss';
 import dropdownStyles from '../utility/Dropdown.module.scss';
 import styles from './Select.module.scss';
@@ -75,7 +77,7 @@ export type SelectProps<T = Record<string, any>> = {
  * ```
  * @constructor
  */
-export function Select<T = Record<string, any>>({
+export const Select = forwardRef(function <T = Record<string, any>>({
     options,
     value,
     onChange,
@@ -90,7 +92,7 @@ export function Select<T = Record<string, any>>({
     disabled,
     kind = 'listbox',
     overrides,
-}: SelectProps<T>) {
+}: SelectProps<T>, ref: ForwardedRef<any>) {
     const inputID = useId();
     return (
         <Field
@@ -109,6 +111,7 @@ export function Select<T = Record<string, any>>({
             {kind === 'listbox' && (
                 <Listbox
                     as="div"
+                    ref={ref}
                     value={value}
                     onChange={onChange}
                 >
@@ -184,7 +187,7 @@ export function Select<T = Record<string, any>>({
                 </Listbox>
             )}
             {kind === 'radio' && (
-                <RadioGroup as="div" className={styles.radioContainer} value={value} onChange={onChange}>
+                <RadioGroup ref={ref} as="div" className={styles.radioContainer} value={value} onChange={onChange}>
                     {options.map((option) => (
                         <RadioGroup.Option
                             as="div"
@@ -205,4 +208,4 @@ export function Select<T = Record<string, any>>({
             )}
         </Field>
     );
-}
+});