paris 0.8.1 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # paris
 
+## 0.8.2
+
+### Patch Changes
+
+- 5206e66: Input, Select: `forwardRef`
+
 ## 0.8.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.8.1",
+  "version": "0.8.2",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

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/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>
     );
-}
+});