@moda/om 21.9.0 → 21.11.0

package/dist/src/components/Field/Field.d.ts

@@ -3,7 +3,9 @@ import { TextInputProps } from '../TextInput';
 import './Field.scss';
 export type FieldProps = TextInputProps & {
     children?: JSX.Element;
+    showErrorIcon?: boolean;
 };
 export declare const Field: React.ForwardRefExoticComponent<import("..").InputProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
     children?: JSX.Element;
+    showErrorIcon?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/PasswordInput/PasswordInput.d.ts

@@ -4,4 +4,5 @@ import './PasswordInput.scss';
 export type PasswordInputProps = FieldProps;
 export declare const PasswordInput: React.ForwardRefExoticComponent<import("..").InputProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
     children?: React.JSX.Element;
+    showErrorIcon?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "21.9.0",
+  "version": "21.11.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/Field/Field.tsx

@@ -9,11 +9,12 @@ import './Field.scss';
 
 export type FieldProps = TextInputProps & {
   children?: JSX.Element;
+  showErrorIcon?: boolean;
 };
 
 export const Field = React.forwardRef(
   (
-    { className, children, error, label, placeholder, ...rest }: FieldProps,
+    { className, children, error, label, placeholder, showErrorIcon = true, ...rest }: FieldProps,
     ref: React.Ref<HTMLInputElement>
   ) => {
     const id = useId();
@@ -44,7 +45,7 @@ export const Field = React.forwardRef(
                   ...children.props
                 })}
 
-                {error && (
+                {error && showErrorIcon && (
                   <span className='Field__icon'>
                     <WarningIcon />
                   </span>

package/src/components/OtpInput/OtpInput.tsx

@@ -56,39 +56,43 @@ export const OtpInput: React.FC<OtpInputProps> = ({
   renderSeparator,
   required,
   shouldAutoFocus,
-  value = ''
+  value = '',
+  ...rest
 }) => {
   return (
-    <ReactOtpInput
-      containerStyle={classNames('OtpInput', className)}
-      inputType={inputType}
-      numInputs={numInputs}
-      onChange={onChange}
-      onPaste={onPaste}
-      placeholder={placeholder}
-      renderSeparator={renderSeparator}
-      shouldAutoFocus={shouldAutoFocus}
-      skipDefaultStyles
-      value={value}
-      renderInput={(inputProps: ReactOtpInputInputProps, index: number) => (
-        <input
-          {...inputProps}
-          id={id ? `${id}-${index + 1}` : undefined}
-          autoComplete={autoComplete}
-          aria-describedby={ariaDescribedBy}
-          aria-invalid={error ? true : undefined}
-          aria-label={getInputAriaLabel(index, numInputs, ariaLabel, label)}
-          className={classNames(inputProps.className, 'OtpInput__input', inputClassName, {
-            'OtpInput__input--disabled': disabled,
-            'OtpInput__input--error': error,
-            'OtpInput__input--focus': focus
-          })}
-          disabled={disabled}
-          name={name}
-          required={required}
-        />
-      )}
-    />
+    <>
+      <input type='hidden' name={name} value={value} />
+      <ReactOtpInput
+        {...rest}
+        containerStyle={classNames('OtpInput', className)}
+        inputType={inputType}
+        numInputs={numInputs}
+        onChange={onChange}
+        onPaste={onPaste}
+        placeholder={placeholder}
+        renderSeparator={renderSeparator}
+        shouldAutoFocus={shouldAutoFocus}
+        skipDefaultStyles
+        value={value}
+        renderInput={(inputProps: ReactOtpInputInputProps, index: number) => (
+          <input
+            {...inputProps}
+            id={id ? `${id}-${index + 1}` : undefined}
+            autoComplete={autoComplete}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={error ? true : undefined}
+            aria-label={getInputAriaLabel(index, numInputs, ariaLabel, label)}
+            className={classNames(inputProps.className, 'OtpInput__input', inputClassName, {
+              'OtpInput__input--disabled': disabled,
+              'OtpInput__input--error': error,
+              'OtpInput__input--focus': focus
+            })}
+            disabled={disabled}
+            required={required}
+          />
+        )}
+      />
+    </>
   );
 };