@xqmsg/ui-core 0.14.1 → 0.14.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.14.1",
+  "version": "0.14.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/form/section/index.tsx

@@ -74,6 +74,8 @@ export function FormSection<
             isInvalid={!!form.formState.errors[name]}
             defaultValue={defaultValue}
             setValue={form.setValue}
+            setError={form.setError}
+            clearErrors={form.clearErrors}
           />
         )
       )}

package/src/components/input/Input.stories.tsx

@@ -96,12 +96,18 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
 
   const { form } = formHandler;
 
+  console.log(form.formState.errors);
+
   return (
     <Form formHandler={formHandler}>
       <Input
         {...args}
         inputType="multi-select"
         setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop5']?.message}
+        errorText={form.formState.errors['prop5']?.message}
         name="prop5"
       />
       <Input
@@ -127,6 +133,10 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop"
         inputType="pilled-text"
         setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop']?.message}
+        errorText={form.formState.errors['prop']?.message}
       />
       <Input
         {...args}

package/src/components/input/StackedMultiSelect/index.tsx

@@ -9,6 +9,8 @@ import colors from '../../../theme/foundations/colors';
 import {
   Control,
   FieldValues,
+  UseFormClearErrors,
+  UseFormSetError,
   UseFormSetValue,
   useWatch,
 } from 'react-hook-form';
@@ -19,7 +21,11 @@ import Token from '../components/token';
 export interface StackedMultiSelectProps extends ReactSelectFieldProps {
   options: FieldOptions;
   setValue: UseFormSetValue<FieldValues>;
+  setError: UseFormSetError<FieldValues>;
+  clearErrors: UseFormClearErrors<FieldValues>;
   control: Control<FieldValues, any>;
+  // Number of allowed options
+  maxLength?: number;
 }
 
 /**
@@ -28,114 +34,160 @@ export interface StackedMultiSelectProps extends ReactSelectFieldProps {
 const StackedMultiSelect = React.forwardRef<
   HTMLInputElement,
   StackedMultiSelectProps
->(({ options, setValue, control, name, placeholder, disabled }, _ref) => {
-  const watchedValue = useWatch({ control, name: name as string });
-  const dropdownRef = useRef(null);
-
-  const [localValues, setLocalValues] = useState<FieldOptions>([]);
-  const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
-  const [isFocussed, setIsFocussed] = useState(false);
-
-  useOutsideClick({ ref: dropdownRef, handler: () => setIsFocussed(false) });
-
-  // gets latest watched form value (common delimited) from RHF state and creates a list
-  useEffect(() => {
-    if (watchedValue !== undefined && !watchedValue.length) {
-      setLocalValues([]);
-    }
-
-    if (watchedValue !== undefined && watchedValue?.length) {
-      setLocalValues(
-        watchedValue
-          .split(',')
-          .filter(Boolean)
-          .map((value: string) =>
-            options.find(option => option.value === value)
-          )
-      );
-    }
-  }, [options, watchedValue]);
-
-  const handleChange = (option: FieldOption) => {
-    const newValue = [...localValues, option]
-      .map(({ value }) => value)
-      .join(',');
-
-    setValue(name as string, newValue, {
-      shouldValidate: true,
-      shouldDirty: true,
+>(
+  (
+    {
+      options,
+      setValue,
+      control,
+      name,
+      placeholder,
+      disabled,
+      maxLength,
+      setError,
+    },
+    _ref
+  ) => {
+    const watchedValue = useWatch({ control, name: name as string });
+    const dropdownRef = useRef(null);
+
+    const [localValues, setLocalValues] = useState<FieldOptions>([]);
+    const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
+    const [isFocussed, setIsFocussed] = useState(false);
+
+    useOutsideClick({
+      ref: dropdownRef,
+      handler: () => {
+        if (maxLength && localValues.length > maxLength) {
+          setError(name as string, {
+            message: `Exceeded maximum of ${maxLength} options`,
+          });
+        }
+
+        return setIsFocussed(false);
+      },
     });
 
-    setLocalOptions(prevLocalOptions =>
-      prevLocalOptions.filter(prevLocalOption => prevLocalOption !== option)
-    );
+    // gets latest watched form value (common delimited) from RHF state and creates a list
+    useEffect(() => {
+      if (watchedValue !== undefined && !watchedValue.length) {
+        setLocalValues([]);
+      }
+
+      if (
+        maxLength &&
+        watchedValue !== undefined &&
+        watchedValue.length <= maxLength &&
+        watchedValue?.length
+      ) {
+        setLocalValues(
+          watchedValue
+            .split(',')
+            .filter(Boolean)
+            .map((value: string) =>
+              options.find(option => option.value === value)
+            )
+        );
+      }
+    }, [maxLength, options, watchedValue]);
+
+    const handleChange = (option: FieldOption) => {
+      console.log(localValues.length, maxLength);
+
+      if (maxLength && localValues.length > maxLength) {
+        return setError(name as string, {
+          message: `Exceeded maximum of ${maxLength} options`,
+        });
+      }
+
+      const newValue = [...localValues, option]
+        .map(({ value }) => value)
+        .join(',');
+
+      setValue(name as string, newValue, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+
+      setLocalOptions(prevLocalOptions =>
+        prevLocalOptions.filter(prevLocalOption => prevLocalOption !== option)
+      );
 
-    setLocalValues(prevLocalValues => [...prevLocalValues, option]);
-  };
+      setLocalValues(prevLocalValues => [...prevLocalValues, option]);
+    };
 
-  const handleDelete = (option: FieldOption) => {
-    const newValue = localValues
-      .filter(localValue => localValue !== option)
-      .map(({ value }) => value)
-      .join(',');
+    const handleDelete = (option: FieldOption) => {
+      const newValue = localValues
+        .filter(localValue => localValue !== option)
+        .map(({ value }) => value)
+        .join(',');
 
-    setValue(name as string, newValue, {
-      shouldValidate: true,
-      shouldDirty: true,
-    });
+      setValue(name as string, newValue, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
 
-    setLocalOptions(prevLocalOptions =>
-      [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
-    );
+      setLocalOptions(prevLocalOptions =>
+        [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
+      );
 
-    setLocalValues(prevLocalValues =>
-      prevLocalValues.filter(prevLocalValue => prevLocalValue !== option)
-    );
-  };
-
-  return (
-    <Box ref={dropdownRef} position="relative">
-      <Flex
-        fontSize="13px"
-        border={isFocussed ? '2px solid' : '1px solid'}
-        borderColor={isFocussed ? colors.border.focus : colors.border.default}
-        py="5px"
-        pl="8px"
-        borderRadius="4px"
-        alignItems="center"
-        justifyContent="space-between"
-        onClick={() => !disabled && setIsFocussed(true)}
-        bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
-        cursor={disabled ? 'not-allowed' : 'pointer'}
-      >
-        <Flex height="28px" alignItems="center">
-          {localValues.length ? (
-            localValues.map(option => (
-              <Box mr="4px">
-                <Token
-                  label={option.label}
-                  onDelete={() => handleDelete(option)}
-                />
-              </Box>
-            ))
-          ) : (
-            <Text color={colors.label.secondary.light} fontSize="13px">
-              {placeholder}
-            </Text>
-          )}
-        </Flex>
-        <Flex width="39px" justifyContent="center" alignItems="center">
-          <Image src={SubtractIcon} alt="subtract" boxSize="16px" />
+      setLocalValues(prevLocalValues =>
+        prevLocalValues.filter(prevLocalValue => prevLocalValue !== option)
+      );
+    };
+
+    return (
+      <Box ref={dropdownRef} position="relative">
+        <Flex
+          fontSize="13px"
+          border={isFocussed ? '2px solid' : '1px solid'}
+          borderColor={isFocussed ? colors.border.focus : colors.border.default}
+          py="5px"
+          pl="8px"
+          borderRadius="4px"
+          alignItems="center"
+          justifyContent="space-between"
+          onClick={() => !disabled && setIsFocussed(true)}
+          bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
+          cursor={disabled ? 'not-allowed' : 'pointer'}
+        >
+          <Flex
+            height="28px"
+            alignItems="center"
+            overflowX="auto"
+            maxWidth="90%"
+            style={{
+              scrollbarWidth: 'none' /* Firefox */,
+            }}
+          >
+            {localValues.length ? (
+              localValues.map(option => (
+                <Box mr="4px">
+                  <Token
+                    label={option.label}
+                    onDelete={() => handleDelete(option)}
+                  />
+                </Box>
+              ))
+            ) : (
+              <Text color={colors.label.secondary.light} fontSize="13px">
+                {placeholder}
+              </Text>
+            )}
+          </Flex>
+          <Flex width="39px" justifyContent="center" alignItems="center">
+            <Image src={SubtractIcon} alt="subtract" boxSize="16px" />
+          </Flex>
         </Flex>
-      </Flex>
-      {isFocussed && (
-        <Dropdown
-          onSelectItem={option => handleChange(option)}
-          options={localOptions}
-        />
-      )}
-    </Box>
-  );
-});
+        {isFocussed && (
+          <Dropdown
+            onSelectItem={option => handleChange(option)}
+            options={localOptions}
+          />
+        )}
+      </Box>
+    );
+  }
+);
 
 export default StackedMultiSelect;