odaptos_design_system 2.0.73 → 2.0.76

package/package.json

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

package/src/Organisms/MultiSelect/MultiSelectWithoutFilter.modules.scss

@@ -0,0 +1,83 @@
+.newAutocomplete {
+  width: 100%;
+  min-width: 16rem;
+
+  span {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1.3;
+    letter-spacing: 0.03em;
+    text-align: left;
+    margin: unset;
+  }
+  label {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1.3;
+    letter-spacing: 0.03em;
+    text-align: left;
+    margin: unset;
+  }
+
+  .MuiAutocomplete-endAdornment {
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .tags_container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0 0.25rem;
+    span {
+      font-size: 0.75rem;
+    }
+    .customBadge {
+      p {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        width: 85%;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.MuiOutlinedInput-root.MuiInputBase-root.MuiInputBase-formControl {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.no_scrollbar {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.input_top_label {
+  margin-bottom: 0.625rem;
+}
+
+.text_below {
+  margin: 0.25rem 0.5rem 0.25rem 0.75rem;
+}
+
+.icon {
+  width: 1rem !important;
+  height: 1rem !important;
+  margin-left: 0.25rem;
+}

package/src/Organisms/MultiSelect/MultiSelectWithoutFilter.tsx

@@ -0,0 +1,300 @@
+import React, { useState, useEffect } from 'react';
+import { Autocomplete, TextField, CircularProgress } from '@mui/material';
+import {
+  Text,
+  Badge,
+  RemoveCircledIcon,
+  colors,
+  Checkbox,
+  ArrowLineDownIcon,
+  TextForButton,
+} from '../../index';
+import styles from './MultiSelectWithoutFilter.modules.scss';
+import { styled } from '@mui/material/styles';
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+const CssTextField = styled(TextField)({
+  '& .MuiInputBase-input': {
+    color: '#26292E',
+    fontFamily: `'Open Sans' !important`,
+    fontSize: '1rem',
+  },
+  '& .MuiInputBase-input.Mui-disabled': {
+    color: '#26292E',
+    fontFamily: `'Open Sans' !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: `'Open Sans' !important`,
+    fontSize: '1rem',
+  },
+  '& label.Mui-disabled.Mui-error': {
+    color: '#26292E',
+    opacity: 0.5,
+    fontFamily: `'Open Sans' !important`,
+    fontSize: '1rem',
+  },
+  '& label.Mui-focused': {
+    color: '#26292E',
+    fontFamily: `'Open Sans' !important`,
+    fontSize: '1rem',
+    backgroundColor: 'transparent',
+    marginRight: 5,
+    paddingRight: 5,
+  },
+  '& .MuiOutlinedInput-root': {
+    fontFamily: `'Open Sans' !important`,
+    paddingTop: '9px !important',
+    '& 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 MultiSelectWithoutFilterProps {
+  label: string;
+  placeholder?: string;
+  name?: string;
+  className?: string;
+  id?: string;
+  inputId?: 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;
+  isLoading?: boolean;
+  fetchOptions?: (search: string) => void;
+  searchTerm: string;
+  setSearchTerm: (search: string) => void;
+}
+
+export const MultiSelectWithoutFilter = ({
+  options,
+  fetchOptions,
+  isLoading,
+  required,
+  disabled,
+  label,
+  placeholder,
+  name,
+  className,
+  id,
+  inputId,
+  topLabel,
+  topLabelWeight,
+  topLabelSize,
+  defaultValue,
+  error,
+  helperText,
+  errorText,
+  disableCloseOnSelect,
+  onChange,
+  deleteOption,
+  limitTags,
+  onBlur,
+  searchTerm,
+  setSearchTerm,
+  ...props
+}: MultiSelectWithoutFilterProps) => {
+  const [selectedOptions, setSelectedOptions] = useState<Option[]>([]);
+
+  useEffect(() => {
+    // Call API only if searchTerm and fetchOptions are defined
+    if (searchTerm.length >= 3 && fetchOptions) {
+      fetchOptions(searchTerm);
+    }
+  }, [searchTerm]);
+
+  return (
+    <div className={`${className}`} style={{ width: '100%' }} id={id}>
+      {topLabel && (
+        <Text
+          text={`${topLabel ? topLabel : ''}`}
+          weight={topLabelWeight || 'bold'}
+          size={topLabelSize || 'base'}
+          className={styles.input_top_label}
+          required={required}
+        />
+      )}
+
+      <Autocomplete
+        id={inputId}
+        multiple
+        options={options}
+        getOptionLabel={(option: Option) => {
+          return option.label;
+        }}
+        value={selectedOptions}
+        onChange={(_event, newValue) => setSelectedOptions(newValue)}
+        filterOptions={(x) => x} // Disable internal filter, we use an API search
+        onInputChange={(_event, value) => setSearchTerm(value)}
+        loading={isLoading}
+        size="small"
+        fullWidth
+        className={`${styles.newAutocomplete}`}
+        disableCloseOnSelect={disableCloseOnSelect}
+        disabled={disabled}
+        isOptionEqualToValue={(option: Option, value: Option) => {
+          return option.value === value.value;
+        }}
+        limitTags={limitTags}
+        renderInput={(params) => (
+          <CssTextField
+            {...params}
+            variant="outlined"
+            label={`${label && topLabel === undefined ? label : ''}`}
+            placeholder={placeholder}
+            size="small"
+            required={required}
+            name={name}
+            error={error}
+            onBlur={onBlur}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {isLoading ? (
+                    <CircularProgress color="inherit" size={20} />
+                  ) : null}
+                  {params.InputProps.endAdornment}
+                </>
+              ),
+            }}
+          />
+        )}
+        renderTags={(value) => {
+          return (
+            <div className={`${styles.tags_container} ${styles.no_scrollbar}`}>
+              {value.map((option, index) => (
+                <Badge
+                  text={option.label}
+                  status="idle"
+                  size="base"
+                  key={`chipt-option-${index}`}
+                  className={styles.customBadge}
+                  canBeRemoved
+                  iconRight={
+                    <RemoveCircledIcon
+                      fill={colors.neutral_700}
+                      style={{ cursor: 'pointer !important' }}
+                      onClick={() => deleteOption(option)}
+                    />
+                  }
+                />
+              ))}
+            </div>
+          );
+        }}
+        renderOption={(props, option, { selected }) => {
+          return (
+            <li
+              {...props}
+              id={option.value}
+              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}`} />
+        }
+        {...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>
+  );
+};

package/src/index.ts

@@ -34,6 +34,7 @@ export * from './Molecules/LogoSlider/LogoSlider';
 export * from './Organisms/Modal/Modal';
 export * from './Organisms/MultiSelect/MultiSelect';
 export * from './Organisms/MultiSelect/MultiSelectWithCategories';
+export * from './Organisms/MultiSelect/MultiSelectWithoutFilter';
 export * from './Molecules/Notifications/Banner';
 export * from './Molecules/Notifications/NotificationIcon';
 export * from './Molecules/Notifications/Toast';