odaptos_design_system 2.0.95 → 2.0.97

package/package.json

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

package/src/Organisms/DatePicker/DatePicker.tsx

@@ -162,6 +162,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   maxDate,
   minDate,
   required,
+  error,
   errorText,
   helperText,
   views = ['day', 'month', 'year'],
@@ -244,7 +245,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
               }
             }}
           />
-          {errorText && (
+          {error && errorText && (
             <Text
               size="xs"
               color="#F54C4C"

package/src/Organisms/MultiSelect/MultiSelect.tsx

@@ -291,7 +291,7 @@ export const MultiSelect = ({
         }}
         {...props}
       />
-      {errorText && (
+      {error && errorText && (
         <Text
           size="xs"
           color="#F54C4C"

package/src/Organisms/MultiSelect/MultiSelectWithCategories.tsx

@@ -313,7 +313,7 @@ export const MultiSelectWithCategories = ({
         }}
         {...props}
       />
-      {errorText && (
+      {error && errorText && (
         <Text
           size="xs"
           color="#F54C4C"

package/src/Organisms/MultiSelect/MultiSelectWithoutFilter.tsx

@@ -289,7 +289,7 @@ export const MultiSelectWithoutFilter = ({
         }
         {...props}
       />
-      {errorText && (
+      {errorText && error && (
         <Text
           size="xs"
           color="#F54C4C"

package/src/Organisms/RatingScale/RatingScale.tsx

@@ -19,7 +19,6 @@ interface RatingScaleProps {
   disabled?: boolean;
   id?: string;
   helperText?: string;
-  errorText?: string;
   error?: boolean;
   ratingStartText?: string;
   ratingEndText?: string;

package/src/Organisms/SingleSelect/SingleSelect.tsx

@@ -251,7 +251,7 @@ export const SingleSelect = ({
         }}
         {...props}
       />
-      {errorText && (
+      {error && errorText && (
         <Text
           size="xs"
           color="#F54C4C"

package/src/Organisms/SingleSelect/SingleSelectWithoutFilter.tsx

@@ -0,0 +1,284 @@
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+import { TextField } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React, { useEffect, useState } from 'react';
+import {
+  Text,
+  TextForButton,
+  ArrowLineDownIcon,
+  RemoveCircledIcon,
+  colors,
+} from '../..';
+import styles from './SingleSelect.modules.scss';
+
+interface OptionType {
+  label: string;
+  value: string;
+}
+
+const filter = createFilterOptions<OptionType>();
+
+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`,
+    '& 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': {
+      height: '99%',
+      marginTop: '-0.20rem',
+      '& .MuiButtonBase-root': {
+        height: '99%',
+        '&:hover': {
+          background: 'transparent',
+        },
+      },
+    },
+  },
+});
+interface SingleSelectWithoutFilterProps {
+  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;
+  error?: boolean;
+  helperText?: string;
+  errorText?: string;
+  canAddNewOption?: boolean;
+  defaultValue: any;
+  options: any[];
+  onChange: (value: any) => void;
+  onBlur?: () => void;
+  isLoading?: boolean;
+  fetchOptions?: (search: string) => void;
+  searchTerm: string;
+  setSearchTerm: (value: string) => void;
+}
+
+/**
+ * Use this component for single selection !!
+ */
+export const SingleSelectWithoutFilter = ({
+  options,
+  label,
+  placeholder,
+  name,
+  className,
+  onChange,
+  disabled,
+  defaultValue,
+  topLabel,
+  topLabelWeight,
+  topLabelSize,
+  id,
+  inputId,
+  required,
+  error,
+  helperText,
+  errorText,
+  canAddNewOption,
+  onBlur,
+  fetchOptions,
+  isLoading,
+  searchTerm,
+  setSearchTerm,
+  ...props
+}: SingleSelectWithoutFilterProps) => {
+  const [value, setValue] = useState(
+    defaultValue === undefined ? null : defaultValue
+  );
+
+  useEffect(() => {
+    setValue(defaultValue === undefined ? null : defaultValue);
+  }, [defaultValue]);
+
+  useEffect(() => {
+    // Call API only if searchTerm and fetchOptions are defined
+    if (searchTerm.length >= 3 && fetchOptions) {
+      fetchOptions(searchTerm);
+    }
+  }, [searchTerm]);
+
+  return (
+    <div
+      className={`${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}
+        value={value}
+        onInputChange={(_event, value) => setSearchTerm(value)}
+        onChange={(_event, newValue) => {
+          const e = {
+            target: { name: name, value: newValue },
+          };
+          setValue(newValue);
+          onChange(e);
+        }}
+        options={options}
+        multiple={false}
+        autoComplete={options.length > 10}
+        size="small"
+        fullWidth
+        disabled={disabled}
+        getOptionLabel={(option) => {
+          return option.label;
+        }}
+        isOptionEqualToValue={(option, value) => {
+          if (value._id && option._id) return option._id === value._id;
+          else if (value && value !== '') return option.value === value.value;
+          else return false;
+        }}
+        renderInput={(params) => (
+          <CssTextField
+            {...params}
+            variant="outlined"
+            fullWidth
+            label={`${label && topLabel === undefined ? label : ''}`}
+            placeholder={placeholder}
+            size="small"
+            required={required}
+            error={error}
+            onBlur={onBlur}
+          />
+        )}
+        clearIcon={
+          <RemoveCircledIcon fill="black" className={`${styles.icon}`} />
+        }
+        popupIcon={
+          <ArrowLineDownIcon fill="black" className={`${styles.icon}`} />
+        }
+        className={`${styles.newAutocomplete}`}
+        renderOption={(props, option) => {
+          return (
+            <li {...props} key={option.value} id={option.value}>
+              <TextForButton text={option.label} size="sm" />
+            </li>
+          );
+        }}
+        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}
+      />
+      {error && 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/Organisms/TimePicker/TimePicker.tsx

@@ -135,6 +135,7 @@ export interface TimePickerProps {
   disabled?: boolean;
   locale?: string | 'en' | 'en-gb' | 'fr' | 'it' | 'de' | 'es';
   required?: boolean;
+  error?: boolean;
   errorText?: string;
   helperText?: string;
   onChange?: (date: Date | Dayjs | null) => void;
@@ -164,6 +165,7 @@ export const TimePicker: React.FC<TimePickerProps> = ({
   disabled,
   locale = 'en',
   required,
+  error,
   errorText,
   helperText,
   onChange,
@@ -218,7 +220,7 @@ export const TimePicker: React.FC<TimePickerProps> = ({
             disabled={disabled}
             onChange={onChange}
           />
-          {errorText && (
+          {error && errorText && (
             <Text
               size="xs"
               color="#F54C4C"

package/src/index.ts

@@ -47,6 +47,7 @@ export * from './Atoms/Radio/Radio';
 export * from './Organisms/RatingScale/RatingScale';
 export * from './Atoms/Search/Search';
 export * from './Organisms/SingleSelect/SingleSelect';
+export * from './Organisms/SingleSelect/SingleSelectWithoutFilter';
 export * from './Molecules/StarRating/StarRating';
 export * from './Atoms/Switch/Switch';
 export * from './Organisms/Table/TableFooter';