odaptos_design_system 2.0.5 → 2.0.7

package/src/Organisms/MultiSelect/MultiSelectWithCategories.tsx

@@ -1,325 +1,325 @@
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-import { styled } from '@mui/material/styles';
-import React, { useEffect, useState } from 'react';
-import {
-  Checkbox,
-  TextForButton,
-  colors,
-  Text,
-  Tag,
-  ArrowLineDownIcon,
-  RemoveCircledIcon,
-} from '../../';
-import styles from './MultiSelectWithCategories.modules.scss';
-interface OptionType {
-  label: string;
-  value: string;
-}
-
-const filter = createFilterOptions<OptionType>();
-
-const GroupHeader = styled('div')(() => ({
-  position: 'sticky',
-  top: '-8px',
-  padding: '4px 10px',
-  color: '#0077FF',
-  backgroundColor: '#fafafa',
-  fontFamily: 'Poppins',
-  fontWeight: 600,
-  fontSize: '0.875rem',
-  zIndex: 1,
-}));
-
-const GroupItems = styled('ul')({
-  padding: 0,
-});
-
-const CssTextField = styled(TextField)({
-  '& .MuiInputBase-input': {
-    color: '#26292E',
-    fontFamily: 'OpenSans !important',
-    fontSize: '1rem',
-  },
-  '& .MuiInputBase-input.Mui-disabled': {
-    color: '#26292E',
-    fontFamily: 'OpenSans !important',
-    fontSize: '1rem',
-  },
-  '& .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled': {
-    WebkitTextFillColor: colors.neutral_600,
-  },
-  '& .Mui-error': {
-    color: '#26292E',
-  },
-  '& .MuiFormHelperText-root': {
-    color: '#F54C4C',
-  },
-  '& .MuiFormLabel-asterisk': {
-    color: '#F54C4C',
-  },
-  '& .MuiOutlinedInput-root.Mui-disabled': {
-    cursor: 'not-allowed',
-    color: '#26292E',
-    fieldset: {
-      borderColor: '#BCBDBE',
-    },
-    '&:hover fieldset': {
-      borderColor: '#BCBDBE',
-    },
-  },
-  '& label': {
-    color: '#26292E',
-    fontFamily: 'OpenSans !important',
-    fontSize: '1rem',
-  },
-  '& label.Mui-disabled.Mui-error': {
-    color: '#26292E',
-    opacity: 0.5,
-    fontFamily: 'OpenSans !important',
-    fontSize: '1rem',
-  },
-  '& label.Mui-focused': {
-    color: '#26292E',
-    fontFamily: 'OpenSans',
-    fontSize: '1rem',
-    backgroundColor: 'transparent',
-    marginRight: 5,
-    paddingRight: 5,
-  },
-  '& .MuiOutlinedInput-root': {
-    fontFamily: 'OpenSans',
-    '& fieldset': {
-      borderColor: '#96989A',
-    },
-    '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
-      display: 'none',
-    },
-    '& input[type=number]': {
-      MozAppearance: 'textfield',
-    },
-    '&:hover fieldset': {
-      borderColor: '#0077FF',
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: '#0077FF',
-    },
-    '&.Mui-error fieldset': {
-      borderColor: '#F54C4C',
-    },
-    '&.Mui-disabled .Mui-focused fieldset': {
-      borderColor: 'rgba(0, 119, 255, 0.5)',
-    },
-    '& .MuiAutocomplete-endAdornment': {
-      '& .MuiButtonBase-root': {
-        height: '99%',
-        '&:hover': {
-          background: 'transparent',
-        },
-      },
-    },
-    MuiInput: {
-      input: {
-        '&::placeholder': {
-          fontSize: '1rem',
-        },
-      },
-    },
-  },
-});
-
-interface MultiSelectProps {
-  label: string;
-  placeholder?: string;
-  name?: string;
-  className?: string;
-  id?: string;
-  topLabel?: string;
-  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
-  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
-  disabled?: boolean;
-  required?: boolean;
-  defaultValue: any[];
-  options: any[];
-  error?: boolean;
-  helperText?: string;
-  errorText?: string;
-  canAddNewOption?: boolean;
-  disableCloseOnSelect?: boolean;
-  onChange: (value: any) => void;
-  deleteOption: (value: any) => void;
-  limitTags?: number;
-  onBlur?: () => void;
-}
-
-/**
- * Use this component for multiselection with caregories !!
- */
-export const MultiSelectWithCategories = ({
-  options,
-  label,
-  placeholder,
-  name,
-  className,
-  onChange,
-  disabled,
-  defaultValue,
-  topLabel,
-  topLabelWeight,
-  topLabelSize,
-  id,
-  required,
-  error,
-  helperText,
-  errorText,
-  canAddNewOption = false,
-  deleteOption,
-  disableCloseOnSelect = true,
-  limitTags,
-  onBlur,
-  ...props
-}: MultiSelectProps) => {
-  const [value, setValue] = useState(
-    defaultValue === undefined ? [] : defaultValue
-  );
-  const [inputValue, setInputValue] = React.useState('');
-
-  useEffect(() => {
-    setValue(defaultValue === undefined ? [] : defaultValue);
-  }, [defaultValue]);
-  return (
-    <div className={`${className}`} style={{ width: '100%' }}>
-      {topLabel && (
-        <Text
-          text={`${topLabel ? topLabel : ''}`}
-          weight={topLabelWeight || 'bold'}
-          size={topLabelSize || 'base'}
-          className={styles.input_top_label}
-          required={required}
-        />
-      )}
-
-      <Autocomplete
-        id="tags-standard"
-        value={value}
-        defaultValue={defaultValue}
-        inputValue={inputValue}
-        onInputChange={(_event, newInputValue) => {
-          setInputValue(newInputValue);
-        }}
-        onChange={(_event, newValue) => {
-          setValue(newValue);
-          onChange(newValue);
-        }}
-        options={
-          options ? options : [{ label: 'Loading...', value: 0, year: 100 }]
-        }
-        multiple={true}
-        autoComplete={options.length > 10}
-        size="small"
-        fullWidth
-        disableCloseOnSelect={disableCloseOnSelect}
-        disabled={disabled}
-        getOptionLabel={(option) => {
-          return option.label;
-        }}
-        isOptionEqualToValue={(option, value) => {
-          return option.value === value.value;
-        }}
-        limitTags={limitTags}
-        groupBy={(option) => option.groupTitle}
-        renderGroup={(params) => (
-          <li key={params.key}>
-            <GroupHeader>{params.group}</GroupHeader>
-            <GroupItems>{params.children}</GroupItems>
-          </li>
-        )}
-        renderInput={(params) => (
-          <CssTextField
-            {...params}
-            variant="outlined"
-            label={`${label && topLabel === undefined ? label : ''}`}
-            placeholder={placeholder}
-            size="small"
-            required={required}
-            name={name}
-            error={error}
-            onBlur={onBlur}
-          />
-        )}
-        renderTags={(value) => {
-          return (
-            <div className={`${styles.tags_container} ${styles.no_scrollbar}`}>
-              {value.map((option, index) => (
-                <Tag
-                  text={option.label}
-                  size="sm"
-                  status="info"
-                  key={`chipt-option-${index}`}
-                  canBeRemoved
-                  iconRight={
-                    <RemoveCircledIcon
-                      fill={colors.blue_700}
-                      style={{ cursor: 'pointer' }}
-                      onClick={() => deleteOption(option)}
-                    />
-                  }
-                />
-              ))}
-            </div>
-          );
-        }}
-        renderOption={(props, option, { selected }) => {
-          return (
-            <li {...props} key={`${props.id}`} style={{ gap: '0.5rem' }}>
-              <Checkbox checked={selected} onChange={() => null} />
-              <TextForButton text={option.label} size="sm" />
-            </li>
-          );
-        }}
-        clearIcon={
-          <RemoveCircledIcon fill="black" className={`${styles.icon}`} />
-        }
-        popupIcon={
-          <ArrowLineDownIcon fill="black" className={`${styles.icon}`} />
-        }
-        className={`${styles.newAutocomplete}`}
-        filterOptions={(options, params) => {
-          const filtered = filter(options, params);
-
-          const { inputValue } = params;
-          // Suggest the creation of a new value
-          const isExisting = options.some(
-            (option) => inputValue === option.title
-          );
-          if (inputValue !== '' && !isExisting) {
-            if (canAddNewOption)
-              filtered.push({
-                value: inputValue,
-                label: inputValue,
-              });
-          }
-          return filtered;
-        }}
-        {...props}
-      />
-      {errorText && (
-        <Text
-          size="xs"
-          color="#F54C4C"
-          italic
-          text={errorText}
-          className={styles.text_below}
-        />
-      )}
-      {helperText && (
-        <Text
-          size="xs"
-          italic
-          text={helperText}
-          className={styles.text_below}
-        />
-      )}
-    </div>
-  );
-};
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
+import React, { useEffect, useState } from 'react';
+import {
+  Checkbox,
+  TextForButton,
+  colors,
+  Text,
+  Tag,
+  ArrowLineDownIcon,
+  RemoveCircledIcon,
+} from '../../';
+import styles from './MultiSelectWithCategories.modules.scss';
+interface OptionType {
+  label: string;
+  value: string;
+}
+
+const filter = createFilterOptions<OptionType>();
+
+const GroupHeader = styled('div')(() => ({
+  position: 'sticky',
+  top: '-8px',
+  padding: '4px 10px',
+  color: '#0077FF',
+  backgroundColor: '#fafafa',
+  fontFamily: 'Poppins',
+  fontWeight: 600,
+  fontSize: '0.875rem',
+  zIndex: 1,
+}));
+
+const GroupItems = styled('ul')({
+  padding: 0,
+});
+
+const CssTextField = styled(TextField)({
+  '& .MuiInputBase-input': {
+    color: '#26292E',
+    fontFamily: 'OpenSans !important',
+    fontSize: '1rem',
+  },
+  '& .MuiInputBase-input.Mui-disabled': {
+    color: '#26292E',
+    fontFamily: 'OpenSans !important',
+    fontSize: '1rem',
+  },
+  '& .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled': {
+    WebkitTextFillColor: colors.neutral_600,
+  },
+  '& .Mui-error': {
+    color: '#26292E',
+  },
+  '& .MuiFormHelperText-root': {
+    color: '#F54C4C',
+  },
+  '& .MuiFormLabel-asterisk': {
+    color: '#F54C4C',
+  },
+  '& .MuiOutlinedInput-root.Mui-disabled': {
+    cursor: 'not-allowed',
+    color: '#26292E',
+    fieldset: {
+      borderColor: '#BCBDBE',
+    },
+    '&:hover fieldset': {
+      borderColor: '#BCBDBE',
+    },
+  },
+  '& label': {
+    color: '#26292E',
+    fontFamily: 'OpenSans !important',
+    fontSize: '1rem',
+  },
+  '& label.Mui-disabled.Mui-error': {
+    color: '#26292E',
+    opacity: 0.5,
+    fontFamily: 'OpenSans !important',
+    fontSize: '1rem',
+  },
+  '& label.Mui-focused': {
+    color: '#26292E',
+    fontFamily: 'OpenSans',
+    fontSize: '1rem',
+    backgroundColor: 'transparent',
+    marginRight: 5,
+    paddingRight: 5,
+  },
+  '& .MuiOutlinedInput-root': {
+    fontFamily: 'OpenSans',
+    '& fieldset': {
+      borderColor: '#96989A',
+    },
+    '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+      display: 'none',
+    },
+    '& input[type=number]': {
+      MozAppearance: 'textfield',
+    },
+    '&:hover fieldset': {
+      borderColor: '#0077FF',
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: '#0077FF',
+    },
+    '&.Mui-error fieldset': {
+      borderColor: '#F54C4C',
+    },
+    '&.Mui-disabled .Mui-focused fieldset': {
+      borderColor: 'rgba(0, 119, 255, 0.5)',
+    },
+    '& .MuiAutocomplete-endAdornment': {
+      '& .MuiButtonBase-root': {
+        height: '99%',
+        '&:hover': {
+          background: 'transparent',
+        },
+      },
+    },
+    MuiInput: {
+      input: {
+        '&::placeholder': {
+          fontSize: '1rem',
+        },
+      },
+    },
+  },
+});
+
+interface MultiSelectProps {
+  label: string;
+  placeholder?: string;
+  name?: string;
+  className?: string;
+  id?: string;
+  topLabel?: string;
+  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
+  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+  disabled?: boolean;
+  required?: boolean;
+  defaultValue: any[];
+  options: any[];
+  error?: boolean;
+  helperText?: string;
+  errorText?: string;
+  canAddNewOption?: boolean;
+  disableCloseOnSelect?: boolean;
+  onChange: (value: any) => void;
+  deleteOption: (value: any) => void;
+  limitTags?: number;
+  onBlur?: () => void;
+}
+
+/**
+ * Use this component for multiselection with caregories !!
+ */
+export const MultiSelectWithCategories = ({
+  options,
+  label,
+  placeholder,
+  name,
+  className,
+  onChange,
+  disabled,
+  defaultValue,
+  topLabel,
+  topLabelWeight,
+  topLabelSize,
+  id,
+  required,
+  error,
+  helperText,
+  errorText,
+  canAddNewOption = false,
+  deleteOption,
+  disableCloseOnSelect = true,
+  limitTags,
+  onBlur,
+  ...props
+}: MultiSelectProps) => {
+  const [value, setValue] = useState(
+    defaultValue === undefined ? [] : defaultValue
+  );
+  const [inputValue, setInputValue] = React.useState('');
+
+  useEffect(() => {
+    setValue(defaultValue === undefined ? [] : defaultValue);
+  }, [defaultValue]);
+  return (
+    <div className={`${className}`} style={{ width: '100%' }}>
+      {topLabel && (
+        <Text
+          text={`${topLabel ? topLabel : ''}`}
+          weight={topLabelWeight || 'bold'}
+          size={topLabelSize || 'base'}
+          className={styles.input_top_label}
+          required={required}
+        />
+      )}
+
+      <Autocomplete
+        id="tags-standard"
+        value={value}
+        defaultValue={defaultValue}
+        inputValue={inputValue}
+        onInputChange={(_event, newInputValue) => {
+          setInputValue(newInputValue);
+        }}
+        onChange={(_event, newValue) => {
+          setValue(newValue);
+          onChange(newValue);
+        }}
+        options={
+          options ? options : [{ label: 'Loading...', value: 0, year: 100 }]
+        }
+        multiple={true}
+        autoComplete={options.length > 10}
+        size="small"
+        fullWidth
+        disableCloseOnSelect={disableCloseOnSelect}
+        disabled={disabled}
+        getOptionLabel={(option) => {
+          return option.label;
+        }}
+        isOptionEqualToValue={(option, value) => {
+          return option.value === value.value;
+        }}
+        limitTags={limitTags}
+        groupBy={(option) => option.groupTitle}
+        renderGroup={(params) => (
+          <li key={params.key}>
+            <GroupHeader>{params.group}</GroupHeader>
+            <GroupItems>{params.children}</GroupItems>
+          </li>
+        )}
+        renderInput={(params) => (
+          <CssTextField
+            {...params}
+            variant="outlined"
+            label={`${label && topLabel === undefined ? label : ''}`}
+            placeholder={placeholder}
+            size="small"
+            required={required}
+            name={name}
+            error={error}
+            onBlur={onBlur}
+          />
+        )}
+        renderTags={(value) => {
+          return (
+            <div className={`${styles.tags_container} ${styles.no_scrollbar}`}>
+              {value.map((option, index) => (
+                <Tag
+                  text={option.label}
+                  size="sm"
+                  status="info"
+                  key={`chipt-option-${index}`}
+                  canBeRemoved
+                  iconRight={
+                    <RemoveCircledIcon
+                      fill={colors.blue_700}
+                      style={{ cursor: 'pointer' }}
+                      onClick={() => deleteOption(option)}
+                    />
+                  }
+                />
+              ))}
+            </div>
+          );
+        }}
+        renderOption={(props, option, { selected }) => {
+          return (
+            <li {...props} key={`${props.id}`} style={{ gap: '0.5rem' }}>
+              <Checkbox checked={selected} onChange={() => null} />
+              <TextForButton text={option.label} size="sm" />
+            </li>
+          );
+        }}
+        clearIcon={
+          <RemoveCircledIcon fill="black" className={`${styles.icon}`} />
+        }
+        popupIcon={
+          <ArrowLineDownIcon fill="black" className={`${styles.icon}`} />
+        }
+        className={`${styles.newAutocomplete}`}
+        filterOptions={(options, params) => {
+          const filtered = filter(options, params);
+
+          const { inputValue } = params;
+          // Suggest the creation of a new value
+          const isExisting = options.some(
+            (option) => inputValue === option.title
+          );
+          if (inputValue !== '' && !isExisting) {
+            if (canAddNewOption)
+              filtered.push({
+                value: inputValue,
+                label: inputValue,
+              });
+          }
+          return filtered;
+        }}
+        {...props}
+      />
+      {errorText && (
+        <Text
+          size="xs"
+          color="#F54C4C"
+          italic
+          text={errorText}
+          className={styles.text_below}
+        />
+      )}
+      {helperText && (
+        <Text
+          size="xs"
+          italic
+          text={helperText}
+          className={styles.text_below}
+        />
+      )}
+    </div>
+  );
+};