Merge branch 'develop' into refactor/WSDEV-5068-section-spacing

cuweb · Jan 15, 2025 · 973e297 · 973e297
2 parents d3a9604 + 121b52d
commit 973e297
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 26 deletions.
diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx
@@ -101,6 +101,16 @@ Prefix the change with one of these keywords:
 - `Nav`: navigation and priority plus work properly with any LinkProvider
 - `StackedList`: Removed gap in dividing lines in listings
 
+## [0.18.15]
+
+### Added
+
+- React reference to Form components
+
+### Fixed
+
+- Navigation and Priority Plus work properly with any LinkProvider
+
 ## [0.18.14]
 
 ### Changed

diff --git a/lib/components/Form/Checkbox/Checkbox.tsx b/lib/components/Form/Checkbox/Checkbox.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react'
 import { Field } from 'formik'
 import { FieldSetComponentProps } from '../FormFieldSet/FormFieldSet'
 import { fieldStyles } from '../form.Styles'
@@ -13,7 +14,7 @@ export interface CheckboxProps extends FieldSetComponentProps {
   refs?: Ref<HTMLInputElement | HTMLSelectElement>
 }
 
-export const Checkbox = ({ ...props }: CheckboxProps) => {
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ ...props }, ref) => {
   const { name, options, checkBoxRight, ...rest } = props
   const errorClass = useErrorClass(name)
 
@@ -27,11 +28,12 @@ export const Checkbox = ({ ...props }: CheckboxProps) => {
               name={name}
               value={option.value}
               className={`${fieldStyles.disabled} ${errorClass}`}
+              innerRef={ref}
               {...rest}
             />
             {option.label}
           </label>
         ))}
     </>
   )
-}
+})
diff --git a/lib/components/Form/FieldControl/FieldControl.tsx b/lib/components/Form/FieldControl/FieldControl.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { forwardRef } from 'react'
 import { Input } from '../Input/Input'
 import { TextArea } from '../TextArea/TextArea'
 import { Select } from '../Select/Select'
@@ -21,7 +22,7 @@ export interface FieldControlSetProps extends FieldSetProps {
   [key: string]: any
 }
 
-export const FieldControl = ({ ...props }: FieldControlProps | FieldControlSetProps) => {
+export const FieldControl = forwardRef<HTMLInputElement, FieldControlProps>(({ ...props }, ref) => {
   const {
     control,
     name,
@@ -71,7 +72,7 @@ export const FieldControl = ({ ...props }: FieldControlProps | FieldControlSetPr
           displayError={displayError}
           hiddenLabel={hiddenLabel}
         >
-          {Component && <Component name={name} {...rest} />}
+          {Component && <Component name={name} innerRef={ref} {...rest} />}
         </FormField>
       )
     }
@@ -93,12 +94,13 @@ export const FieldControl = ({ ...props }: FieldControlProps | FieldControlSetPr
           hiddenLabel={hiddenLabel}
           {...rest}
         >
-          <Component name={name} {...rest} />
+          <Component name={name} innerRef={ref} {...rest} />
         </FormFieldSet>
       )
     }
 
     default:
       return null
   }
-}
+})
+export default FieldControl
diff --git a/lib/components/Form/FileUpload/FileUpload.tsx b/lib/components/Form/FileUpload/FileUpload.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, forwardRef } from 'react'
 import { fieldStyles } from '../form.Styles'
 import { FieldComponentProps } from '../FormField/FormField'
 import useErrorClass from '../UseError'
@@ -12,7 +12,7 @@ export interface FileUploadProps extends FieldComponentProps {
   handleOnDelete?: () => void
 }
 
-export const FileUpload = ({ ...props }: FileUploadProps) => {
+export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(({ ...props }, ref) => {
   const { name, onChange, displayPreview = true, setFieldValue = true, preview, handleOnDelete, ...rest } = props
   const errorClass = useErrorClass(name)
 
@@ -82,6 +82,7 @@ export const FileUpload = ({ ...props }: FileUploadProps) => {
         name={name}
         className={fieldStyles.uploads + ' ' + fieldStyles.disabled + errorClass}
         onChange={handleMediaChange}
+        ref={ref}
         {...rest}
       />
       {displayPreview && previews && previews.length > 0 && (
@@ -109,4 +110,4 @@ export const FileUpload = ({ ...props }: FileUploadProps) => {
       )}
     </div>
   )
-}
+})
diff --git a/lib/components/Form/Form.stories.tsx b/lib/components/Form/Form.stories.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useMemo, useState } from 'react'
+import React, { MouseEventHandler, useMemo, useState, useRef, useEffect } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { useFormik } from 'formik'
 import { FormikHelpers } from 'formik'
@@ -26,6 +26,10 @@ export default meta
 
 type Story = StoryObj<typeof Form>
 
+const sleep = (seconds: number) => {
+  return new Promise((resolve) => setTimeout(resolve, seconds))
+}
+
 export const Input: Story = () => {
   type IInput = {
     inputText: string
@@ -56,6 +60,24 @@ export const Input: Story = () => {
     onSubmit,
   })
 
+  const [inputDisabled, setInputDisabled] = useState(false)
+
+  const input = useRef<HTMLInputElement>(null)
+
+  const handleChange = async (e) => {
+    console.log(e.currentTarget.value)
+    formikProps.setFieldValue('inputText', e.currentTarget.value)
+    setInputDisabled(true)
+    await sleep(1000)
+    setInputDisabled(false)
+  }
+
+  useEffect(() => {
+    if (!inputDisabled) {
+      input?.current?.focus()
+    }
+  }, [inputDisabled])
+
   return (
     <Form formikProps={formikProps}>
       <Form.FieldGroup>
@@ -66,7 +88,9 @@ export const Input: Story = () => {
           required
           helper="Helper Text"
           helperpostop
-          disabled={formikProps.isSubmitting}
+          disabled={formikProps.isSubmitting || inputDisabled}
+          ref={input}
+          onChange={handleChange}
         />
       </Form.FieldGroup>
       <ButtonGroup>

diff --git a/lib/components/Form/FormField/FormField.tsx b/lib/components/Form/FormField/FormField.tsx
@@ -8,6 +8,7 @@ type maxWidthKeys = keyof typeof maxWidthClasses
 export interface FieldComponentProps {
   name: string
   required?: boolean
+  innerRef?: React.Ref<HTMLInputElement>
 }
 
 export interface FieldProps extends FieldComponentProps {

diff --git a/lib/components/Form/FormFieldSet/FormFieldSet.tsx b/lib/components/Form/FormFieldSet/FormFieldSet.tsx
@@ -8,6 +8,7 @@ type maxWidthKeys = keyof typeof maxWidthClasses
 export interface FieldSetComponentProps {
   name: string
   required?: boolean
+  innerRef?: React.Ref<HTMLInputElement>
 }
 
 export interface FieldSetProps extends FieldSetComponentProps {

diff --git a/lib/components/Form/Input/Input.tsx b/lib/components/Form/Input/Input.tsx
@@ -1,3 +1,4 @@
+import React, { forwardRef } from 'react'
 import { Field } from 'formik'
 import { fieldStyles } from '../form.Styles'
 import { FieldComponentProps } from '../FormField/FormField'
@@ -9,7 +10,7 @@ export interface InputProps extends FieldComponentProps {
   disabled?: boolean
 }
 
-export const Input = ({ ...props }: InputProps) => {
+export const Input = forwardRef<HTMLInputElement, InputProps>(({ ...props }, ref) => {
   const { name, hasPrefix, hasSuffix, disabled, ...rest } = props
 
   const errorClass = useErrorClass(name)
@@ -23,9 +24,10 @@ export const Input = ({ ...props }: InputProps) => {
         name={name}
         disabled={disabled}
         className={`border-none w-full ${errorClass} ${disabled ? fieldStyles.disabled : ''} `}
+        innerRef={ref}
         {...rest}
       />
       {hasSuffix && hasSuffix}
     </div>
   )
-}
+})
diff --git a/lib/components/Form/Radio/Radio.tsx b/lib/components/Form/Radio/Radio.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react'
 import { Field } from 'formik'
 import { FieldSetComponentProps } from '../FormFieldSet/FormFieldSet'
 import { fieldStyles } from '../form.Styles'
@@ -12,7 +13,7 @@ export interface RadioProps extends FieldSetComponentProps {
   refs?: Ref<HTMLInputElement | HTMLSelectElement>
 }
 
-export const Radio = ({ ...props }: RadioProps) => {
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(({ ...props }, ref) => {
   const { name, options, ...rest } = props
 
   const errorClass = useErrorClass(name)
@@ -27,11 +28,12 @@ export const Radio = ({ ...props }: RadioProps) => {
               name={name}
               className={`${fieldStyles.disabled} ${errorClass}`}
               value={option.value}
+              innerRef={ref}
               {...rest}
             />
             {option.label}
           </label>
         ))}
     </>
   )
-}
+})
diff --git a/lib/components/Form/Select/Select.tsx b/lib/components/Form/Select/Select.tsx
@@ -1,19 +1,20 @@
-'use client'
+import { forwardRef } from 'react'
 import { Field } from 'formik'
 import { fieldStyles } from '../form.Styles'
 import { FieldComponentProps } from '../FormField/FormField'
 import useErrorClass from '../UseError'
 import { Ref } from 'react'
 
+export interface SelectOptions {
+  label: string
+  value: string
+}
 export interface SelectProps extends FieldComponentProps {
-  options?: {
-    label: string
-    value: string
-  }[]
+  options?: SelectOptions[]
   refs?: Ref<HTMLInputElement | HTMLSelectElement>
 }
 
-export const Select = ({ ...props }: SelectProps) => {
+export const Select = forwardRef<HTMLInputElement, SelectProps>(({ ...props }, ref) => {
   const { name, options, ...rest } = props
 
   const errorClass = useErrorClass(name)
@@ -24,10 +25,11 @@ export const Select = ({ ...props }: SelectProps) => {
       id={name}
       name={name}
       className={`${fieldStyles.input} ${fieldStyles.disabled} ${errorClass}`}
+      innerRef={ref}
       {...rest}
     >
       {options &&
-        options.map((option) => {
+        options.map((option: SelectOptions) => {
           return (
             <option key={option.value} value={option.value}>
               {option.label}
@@ -36,4 +38,4 @@ export const Select = ({ ...props }: SelectProps) => {
         })}
     </Field>
   )
-}
+})
diff --git a/lib/components/Form/TextArea/TextArea.tsx b/lib/components/Form/TextArea/TextArea.tsx
@@ -1,9 +1,10 @@
+import { forwardRef } from 'react'
 import { Field } from 'formik'
 import { fieldStyles } from '../form.Styles'
 import { FieldComponentProps } from '../FormField/FormField'
 import useErrorClass from '../UseError'
 
-export const TextArea = ({ ...props }: FieldComponentProps) => {
+export const TextArea = forwardRef<HTMLInputElement, FieldComponentProps>(({ ...props }, ref) => {
   const { name, ...rest } = props
 
   const errorClass = useErrorClass(name)
@@ -14,7 +15,8 @@ export const TextArea = ({ ...props }: FieldComponentProps) => {
       id={name}
       name={name}
       className={`${fieldStyles.input} ${fieldStyles.disabled} ${errorClass}`}
+      innerRef={ref}
       {...rest}
     />
   )
-}
+})
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carletonuniversity/rds",
-  "version": "0.18.14",
+  "version": "0.18.15",
   "private": false,
   "description": "Raven Design System is Carleton University's design system",
   "author": "Web Services",