chore: Update dependencies and refactor form components for improved functionality

- Upgraded @hookform/error-message to version 2.0.1 and react-hook-form to version 7.57.0 for better compatibility.
- Updated @medusajs/ui to version 4.0.13 to leverage new features and fixes.
- Refactored CurrencyInput, DatePickerInput, Input, SelectComponent, TextArea components to use forwardRef for better ref handling.
- Enhanced FieldWrapper component to ensure proper label handling based on prop types.

Author: jaruesink

packages/medusa-forms/package.json

@@ -35,12 +35,12 @@
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "react": "^18.3.0"
+    "react": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
-    "@hookform/error-message": "^2.0.0",
-    "@medusajs/ui": "^4.0.0",
-    "react-hook-form": "^7.50.0"
+    "@hookform/error-message": "^2.0.1",
+    "@medusajs/ui": "^4.0.13",
+    "react-hook-form": "^7.57.0"
   },
   "devDependencies": {
     "@types/glob": "^8.1.0",

packages/medusa-forms/src/ui/CurrencyInput.tsx

@@ -1,16 +1,14 @@
 import { CurrencyInput as MedusaCurrencyInput } from '@medusajs/ui';
-import type * as React from 'react';
-import type { FC } from 'react';
+import { forwardRef } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, MedusaCurrencyInputProps } from './types';
 
-export type CurrencyInputProps = MedusaCurrencyInputProps &
-  BasicFieldProps & {
-    ref?: React.Ref<HTMLInputElement>;
-  };
+export type CurrencyInputProps = MedusaCurrencyInputProps & BasicFieldProps;
 
 const Wrapper = FieldWrapper<CurrencyInputProps>;
 
-export const CurrencyInput: FC<CurrencyInputProps> = ({ ref, ...props }) => (
+export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>((props, ref) => (
   <Wrapper {...props}>{(inputProps) => <MedusaCurrencyInput {...inputProps} ref={ref} />}</Wrapper>
-);
+));
+
+CurrencyInput.displayName = 'CurrencyInput';

packages/medusa-forms/src/ui/DatePicker.tsx

@@ -1,16 +1,14 @@
 import { DatePicker } from '@medusajs/ui';
-import type * as React from 'react';
-import type { FC } from 'react';
+import { forwardRef } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, DatePickerProps as MedusaDatePickerProps } from './types';
 
-export type DatePickerProps = MedusaDatePickerProps &
-  BasicFieldProps & {
-    ref?: React.Ref<HTMLInputElement>;
-  };
+export type DatePickerProps = MedusaDatePickerProps & BasicFieldProps;
 
 const Wrapper = FieldWrapper<DatePickerProps>;
 
-export const DatePickerInput: FC<DatePickerProps> = ({ ref, ...props }) => {
+export const DatePickerInput = forwardRef<HTMLInputElement, DatePickerProps>((props, ref) => {
   return <Wrapper {...props}>{(inputProps) => <DatePicker {...{ ...inputProps, ref }} />}</Wrapper>;
-};
+});
+
+DatePickerInput.displayName = 'DatePickerInput';

packages/medusa-forms/src/ui/FieldWrapper.tsx

@@ -17,7 +17,11 @@ export const FieldWrapper = <T,>({
 }: FieldWrapperProps<T>) => (
   <div className={wrapperClassName}>
     {label && (
-      <Label htmlFor={name} tooltip={labelTooltip} className={labelClassName}>
+      <Label
+        htmlFor={typeof name === 'string' ? name : undefined}
+        tooltip={typeof labelTooltip === 'string' ? labelTooltip : undefined}
+        className={labelClassName}
+      >
         {label}
       </Label>
     )}

packages/medusa-forms/src/ui/Input.tsx

@@ -1,15 +1,14 @@
 import { Input as MedusaInput } from '@medusajs/ui';
-import type * as React from 'react';
+import { forwardRef } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, MedusaInputProps } from './types';
 
-export type InputProps = MedusaInputProps &
-  BasicFieldProps & {
-    ref?: React.Ref<HTMLInputElement>;
-  };
+export type InputProps = MedusaInputProps & BasicFieldProps;
 
 const Wrapper = FieldWrapper<InputProps>;
 
-export const Input: React.FC<InputProps> = ({ ref, ...props }) => (
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
   <Wrapper {...props}>{(inputProps) => <MedusaInput {...inputProps} ref={ref} />}</Wrapper>
-);
+));
+
+Input.displayName = 'Input';

packages/medusa-forms/src/ui/Select.tsx

@@ -1,22 +1,21 @@
 import { Select as MedusaSelect } from '@medusajs/ui';
-import type * as React from 'react';
+import { forwardRef } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, SelectProps as MedusaSelectProps } from './types';
 
-export type SelectProps = MedusaSelectProps &
-  BasicFieldProps & {
-    ref?: React.Ref<unknown>;
-  };
+export type SelectProps = MedusaSelectProps & BasicFieldProps;
 
 const Wrapper = FieldWrapper<SelectProps>;
 
-const SelectComponent: React.FC<SelectProps> = ({ ref, ...props }) => {
+const SelectComponent = forwardRef<unknown, SelectProps>((props, ref) => {
   return (
     <Wrapper {...props}>
       {(inputProps) => <MedusaSelect {...{ ...inputProps, ref }}>{props.children}</MedusaSelect>}
     </Wrapper>
   );
-};
+});
+
+SelectComponent.displayName = 'Select';
 
 type SelectComponent = typeof SelectComponent & {
   Trigger: typeof MedusaSelect.Trigger;

packages/medusa-forms/src/ui/TextArea.tsx

@@ -1,15 +1,14 @@
 import { Textarea } from '@medusajs/ui';
-import type * as React from 'react';
+import { forwardRef } from 'react';
 import { FieldWrapper } from './FieldWrapper';
 import type { BasicFieldProps, TextAreaProps as MedusaTextAreaProps } from './types';
 
-export type TextAreaProps = MedusaTextAreaProps &
-  BasicFieldProps & {
-    ref?: React.Ref<HTMLTextAreaElement>;
-  };
+export type TextAreaProps = MedusaTextAreaProps & BasicFieldProps;
 
 const Wrapper = FieldWrapper<TextAreaProps>;
 
-export const TextArea: React.FC<TextAreaProps> = ({ ref, ...props }) => (
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (
   <Wrapper {...props}>{(inputProps) => <Textarea {...inputProps} ref={ref} />}</Wrapper>
-);
+));
+
+TextArea.displayName = 'TextArea';

packages/medusa-forms/src/ui/types.d.ts

@@ -1,4 +1,4 @@
-import type { RefAttributes } from 'react';
+import type { ReactNode, RefAttributes } from 'react';
 import type { Props, SelectInstance } from 'react-select';
 import type { CreatableProps } from 'react-select/creatable';
 
@@ -22,14 +22,13 @@ export type TextAreaProps = Omit<
 > &
   React.RefAttributes<HTMLTextAreaElement>;
 
-interface RawCurrencyInputProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof Primitive>, 'prefix' | 'suffix' | 'size'>,
-    VariantProps<typeof currencyInputVariants> {
+export type MedusaCurrencyInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'step'> & {
   symbol: string;
   code: string;
-}
-
-export type MedusaCurrencyInputProps = RawCurrencyInputProps & React.RefAttributes<HTMLInputElement>;
+  size?: 'small' | 'base';
+  defaultValue?: string | number;
+  step?: number;
+};
 
 export type MedusaInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   size?: 'small' | 'base';

yarn.lock

@@ -1360,7 +1360,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hookform/error-message@npm:^2.0.0":
+"@hookform/error-message@npm:^2.0.0, @hookform/error-message@npm:^2.0.1":
   version: 2.0.1
   resolution: "@hookform/error-message@npm:2.0.1"
   peerDependencies:
@@ -1853,8 +1853,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@lambdacurry/medusa-forms@workspace:packages/medusa-forms"
   dependencies:
-    "@hookform/error-message": "npm:^2.0.0"
-    "@medusajs/ui": "npm:^4.0.0"
+    "@hookform/error-message": "npm:^2.0.1"
+    "@medusajs/ui": "npm:^4.0.13"
     "@types/glob": "npm:^8.1.0"
     "@types/react": "npm:^19.0.0"
     "@typescript-eslint/eslint-plugin": "npm:^6.21.0"
@@ -1863,14 +1863,14 @@ __metadata:
     autoprefixer: "npm:^10.4.20"
     glob: "npm:^11.0.0"
     react: "npm:^19.0.0"
-    react-hook-form: "npm:^7.50.0"
+    react-hook-form: "npm:^7.57.0"
     tailwindcss: "npm:^4.0.0"
     typescript: "npm:^5.7.2"
     vite: "npm:^5.4.11"
     vite-plugin-dts: "npm:^4.4.0"
     vite-tsconfig-paths: "npm:^5.1.4"
   peerDependencies:
-    react: ^18.3.0
+    react: ^18.3.0 || ^19.0.0
   languageName: unknown
   linkType: soft
 
@@ -1921,7 +1921,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@medusajs/ui@npm:^4.0.0":
+"@medusajs/ui@npm:^4.0.13":
   version: 4.0.13
   resolution: "@medusajs/ui@npm:4.0.13"
   dependencies:
@@ -12333,7 +12333,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-hook-form@npm:^7.50.0, react-hook-form@npm:^7.51.0, react-hook-form@npm:^7.53.1":
+"react-hook-form@npm:^7.51.0, react-hook-form@npm:^7.53.1, react-hook-form@npm:^7.57.0":
   version: 7.57.0
   resolution: "react-hook-form@npm:7.57.0"
   peerDependencies: