odaptos_design_system 2.0.95 → 2.0.97

package/dist/Organisms/RatingScale/RatingScale.d.ts

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

package/dist/Organisms/SingleSelect/SingleSelectWithoutFilter.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+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 declare 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) => React.JSX.Element;
+export {};

package/dist/Organisms/TimePicker/TimePicker.d.ts

@@ -11,6 +11,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;

package/dist/index.d.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';

package/dist/odaptos_design_system.cjs.development.js

@@ -11844,6 +11844,7 @@ const DatePicker = ({
   maxDate,
   minDate,
   required,
+  error,
   errorText,
   helperText,
   views = ['day', 'month', 'year'],
@@ -11904,7 +11905,7 @@ const DatePicker = ({
         console.error('Error in onChange function: ', error);
       }
     }
-  }), errorText && /*#__PURE__*/React__default.createElement(Text, {
+  }), error && errorText && /*#__PURE__*/React__default.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -13678,7 +13679,7 @@ const MultiSelect = ({
       }
       return filtered;
     }
-  }, props)), errorText && /*#__PURE__*/React__default.createElement(Text, {
+  }, props)), error && errorText && /*#__PURE__*/React__default.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -13952,7 +13953,7 @@ const MultiSelectWithCategories = ({
       }
       return filtered;
     }
-  }, props)), errorText && /*#__PURE__*/React__default.createElement(Text, {
+  }, props)), error && errorText && /*#__PURE__*/React__default.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -14202,7 +14203,7 @@ const MultiSelectWithoutFilter = ({
       fill: "black",
       className: `${styles$B.icon}`
     })
-  }, props)), errorText && /*#__PURE__*/React__default.createElement(Text, {
+  }, props)), errorText && error && /*#__PURE__*/React__default.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -15641,7 +15642,229 @@ const SingleSelect = ({
       }
       return filtered;
     }
-  }, props)), errorText && /*#__PURE__*/React__default.createElement(Text, {
+  }, props)), error && errorText && /*#__PURE__*/React__default.createElement(Text, {
+    size: "xs",
+    color: "#F54C4C",
+    italic: true,
+    text: errorText,
+    className: styles$K.text_below
+  }), helperText && /*#__PURE__*/React__default.createElement(Text, {
+    size: "xs",
+    italic: true,
+    text: helperText,
+    className: styles$K.text_below
+  }));
+};
+
+const filter$3 = /*#__PURE__*/Autocomplete.createFilterOptions();
+const CssTextField$8 = /*#__PURE__*/styles$16.styled(material.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'
+        }
+      }
+    }
+  }
+});
+/**
+ * Use this component for single selection !!
+ */
+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
+}) => {
+  const [value, setValue] = React.useState(defaultValue === undefined ? null : defaultValue);
+  React.useEffect(() => {
+    setValue(defaultValue === undefined ? null : defaultValue);
+  }, [defaultValue]);
+  React.useEffect(() => {
+    // Call API only if searchTerm and fetchOptions are defined
+    if (searchTerm.length >= 3 && fetchOptions) {
+      fetchOptions(searchTerm);
+    }
+  }, [searchTerm]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `${className && className}`,
+    style: {
+      width: '100%'
+    },
+    id: id
+  }, topLabel && /*#__PURE__*/React__default.createElement(Text, {
+    text: `${topLabel ? topLabel : ''}`,
+    weight: topLabelWeight || 'bold',
+    size: topLabelSize || 'base',
+    className: styles$K.input_top_label,
+    required: required
+  }), /*#__PURE__*/React__default.createElement(Autocomplete__default, Object.assign({
+    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: true,
+    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 => /*#__PURE__*/React__default.createElement(CssTextField$8, Object.assign({}, params, {
+      variant: "outlined",
+      fullWidth: true,
+      label: `${label && topLabel === undefined ? label : ''}`,
+      placeholder: placeholder,
+      size: "small",
+      required: required,
+      error: error,
+      onBlur: onBlur
+    })),
+    clearIcon: /*#__PURE__*/React__default.createElement(RemoveCircledIcon, {
+      fill: "black",
+      className: `${styles$K.icon}`
+    }),
+    popupIcon: /*#__PURE__*/React__default.createElement(ArrowLineDowIcon, {
+      fill: "black",
+      className: `${styles$K.icon}`
+    }),
+    className: `${styles$K.newAutocomplete}`,
+    renderOption: (props, option) => {
+      return /*#__PURE__*/React__default.createElement("li", Object.assign({}, props, {
+        key: option.value,
+        id: option.value
+      }), /*#__PURE__*/React__default.createElement(TextForButton, {
+        text: option.label,
+        size: "sm"
+      }));
+    },
+    filterOptions: (options, params) => {
+      const filtered = filter$3(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 && /*#__PURE__*/React__default.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -16372,7 +16595,7 @@ var css_248z$V = ".TextInput-modules_input__Ky9uR{font-family:var(--sdFontFamily
 var styles$V = {"input":"TextInput-modules_input__Ky9uR","text_below":"TextInput-modules_text_below__oT18E","MuiInputBase-root-MuiOutlinedInput-root":"TextInput-modules_MuiInputBase-root-MuiOutlinedInput-root__Kq7D9","input_top_label":"TextInput-modules_input_top_label__Xj8GH","MuiInputBase-input":"TextInput-modules_MuiInputBase-input__beBli"};
 styleInject(css_248z$V);
 
-const CssTextField$8 = /*#__PURE__*/styles$16.styled(material.TextField)({
+const CssTextField$9 = /*#__PURE__*/styles$16.styled(material.TextField)({
   '& .MuiInputBase-input': {
     color: '#26292E',
     fontFamily: `'Open Sans' !important`,
@@ -16535,7 +16758,7 @@ const TextInput = props => {
     size: topLabelSize || 'base',
     className: styles$V.input_top_label,
     required: required
-  }), /*#__PURE__*/React__default.createElement(CssTextField$8, {
+  }), /*#__PURE__*/React__default.createElement(CssTextField$9, {
     fullWidth: true,
     size: "small",
     InputProps: {
@@ -17059,7 +17282,7 @@ var css_248z$Z = ".TimePicker-modules_time_picker__CxeB5{min-width:13rem;width:1
 var styles$Z = {"time_picker":"TimePicker-modules_time_picker__CxeB5","MuiAutocomplete-endAdornment":"TimePicker-modules_MuiAutocomplete-endAdornment__CbeSn","input_top_label":"TimePicker-modules_input_top_label__LPXU-","MuiOutlinedInput-root":"TimePicker-modules_MuiOutlinedInput-root__ItBpg","MuiInputBase-root":"TimePicker-modules_MuiInputBase-root__4d1Fn","MuiInputBase-formControl":"TimePicker-modules_MuiInputBase-formControl__2hrJo","text_below":"TimePicker-modules_text_below__lm0u-","icon":"TimePicker-modules_icon__IiT8p"};
 styleInject(css_248z$Z);
 
-const CssTextField$9 = /*#__PURE__*/styles$16.styled(material.TextField)({
+const CssTextField$a = /*#__PURE__*/styles$16.styled(material.TextField)({
   '& .MuiInputBase-input': {
     color: '#26292E',
     fontFamily: `'Open Sans' !important`,
@@ -17147,7 +17370,7 @@ const CssTextField$9 = /*#__PURE__*/styles$16.styled(material.TextField)({
   }
 });
 dayjs.extend(utc);
-const TimePickerStyledComponent = params => /*#__PURE__*/React__default.createElement(CssTextField$9, Object.assign({}, params, {
+const TimePickerStyledComponent = params => /*#__PURE__*/React__default.createElement(CssTextField$a, Object.assign({}, params, {
   variant: "outlined",
   fullWidth: true,
   label: `${params.label && params.topLabel === undefined ? params.label : ''}`,
@@ -17176,6 +17399,7 @@ const TimePicker = ({
   disabled,
   locale = 'en',
   required,
+  error,
   errorText,
   helperText,
   onChange,
@@ -17219,7 +17443,7 @@ const TimePicker = ({
     },
     disabled: disabled,
     onChange: onChange
-  }), errorText && /*#__PURE__*/React__default.createElement(Text, {
+  }), error && errorText && /*#__PURE__*/React__default.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -17752,6 +17976,7 @@ exports.SettingsCircledIcon = SettingsCircledIcon;
 exports.SettingsSliderIcon = SettingsSliderIcon;
 exports.ShareIcon = ShareIcon;
 exports.SingleSelect = SingleSelect;
+exports.SingleSelectWithoutFilter = SingleSelectWithoutFilter;
 exports.SmartBrainIcon = SmartBrainIcon;
 exports.SortingIcon = SortingIcon;
 exports.SquareText = SquareText;