@moda/om 21.6.10 → 21.6.11

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

@@ -0,0 +1,6 @@
+type FormControlContextValue = {
+    displaysError: boolean;
+};
+export declare const FormControlContext: import("react").Context<FormControlContextValue>;
+export declare const useFormControlContext: () => FormControlContextValue;
+export {};

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

@@ -1,3 +1,4 @@
 import { Field } from './Field';
 export { Field as Input };
 export * from './Field';
+export * from './FormControlContext';

package/package.json

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

package/src/components/Field/Field.tsx

@@ -1,8 +1,9 @@
-import React, { JSX } from 'react';
+import React, { JSX, useMemo } from 'react';
 import classNames from 'classnames';
 import WarningIcon from '@moda/icons/warning-16';
 import { TextInput, TextInputProps } from '../TextInput';
 import { Select } from '../Select';
+import { FormControlContext } from './FormControlContext';
 
 import './Field.scss';
 
@@ -15,50 +16,54 @@ export const Field = React.forwardRef(
     { className, children, error, label, placeholder, ...rest }: FieldProps,
     ref: React.Ref<HTMLInputElement>
   ) => {
+    const fieldContextValue = useMemo(() => ({ displaysError: Boolean(error) }), [error]);
+
     return (
-      <label className={classNames('Field', className)}>
-        {label && <span className='Field__label'>{label}</span>}
+      <FormControlContext.Provider value={fieldContextValue}>
+        <label className={classNames('Field', className)}>
+          {label && <span className='Field__label'>{label}</span>}
 
-        {/* TODO: Codify some kind of IconWrapper component */}
-        <span className='Field__context'>
-          {children ? (
-            <>
-              {React.cloneElement(children, {
-                ref,
-                error,
-                placeholder,
-                label,
-                shiftIconLeftwards: error && children.type === Select,
-                ...rest,
-                ...children.props
-              })}
+          {/* TODO: Codify some kind of IconWrapper component */}
+          <span className='Field__context'>
+            {children ? (
+              <>
+                {React.cloneElement(children, {
+                  ref,
+                  error,
+                  placeholder,
+                  label,
+                  shiftIconLeftwards: error && children.type === Select,
+                  ...rest,
+                  ...children.props
+                })}
 
-              {error && (
-                <span className='Field__icon'>
-                  <WarningIcon />
-                </span>
-              )}
-            </>
-          ) : (
-            <>
-              <TextInput
-                ref={ref}
-                placeholder={placeholder}
-                label={label}
-                error={error}
-                {...rest}
-              />
-              {error && (
-                <span className='Field__icon'>
-                  <WarningIcon />
-                </span>
-              )}
-            </>
-          )}
-        </span>
+                {error && (
+                  <span className='Field__icon'>
+                    <WarningIcon />
+                  </span>
+                )}
+              </>
+            ) : (
+              <>
+                <TextInput
+                  ref={ref}
+                  placeholder={placeholder}
+                  label={label}
+                  error={error}
+                  {...rest}
+                />
+                {error && (
+                  <span className='Field__icon'>
+                    <WarningIcon />
+                  </span>
+                )}
+              </>
+            )}
+          </span>
 
-        {error && <span className='Field__error'>{error}</span>}
-      </label>
+          {error && <span className='Field__error'>{error}</span>}
+        </label>
+      </FormControlContext.Provider>
     );
   }
 );

package/src/components/Field/FormControlContext.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+type FormControlContextValue = {
+  displaysError: boolean;
+};
+
+export const FormControlContext = createContext<FormControlContextValue>({
+  displaysError: false
+});
+
+export const useFormControlContext = () => useContext(FormControlContext);

package/src/components/Field/index.ts

@@ -2,3 +2,4 @@ import { Field } from './Field';
 
 export { Field as Input };
 export * from './Field';
+export * from './FormControlContext';

package/src/components/Select/Select.tsx

@@ -5,6 +5,7 @@ import ChevronUpIcon from '@moda/icons/chevron-up-12';
 import { colors } from '@moda/tokens';
 import { Clickable } from '../Clickable';
 import { TextColor } from '../Text';
+import { useFormControlContext } from '../Field/FormControlContext';
 import { SelectOptions } from './SelectOptions';
 import { SelectLabel } from './SelectLabel';
 import { useSelect } from './useSelect';
@@ -75,6 +76,7 @@ export const Select: React.FC<SelectProps> = ({
   smallMobileText = false,
   ...rest
 }) => {
+  const { displaysError: errorDisplayedByParent } = useFormControlContext();
   const { state, dispatch, Mode, selectRef, buttonRef } = useSelect({
     value,
     defaultValue
@@ -207,7 +209,7 @@ export const Select: React.FC<SelectProps> = ({
         )}
       </div>
 
-      {typeof error === 'string' && (
+      {typeof error === 'string' && !errorDisplayedByParent && (
         <div role='status' aria-live='polite' aria-atomic='true' className='Select__live-region'>
           {error}
         </div>