odaptos_design_system 2.0.95 → 2.0.97

package/dist/odaptos_design_system.esm.js

@@ -11836,6 +11836,7 @@ const DatePicker = ({
   maxDate,
   minDate,
   required,
+  error,
   errorText,
   helperText,
   views = ['day', 'month', 'year'],
@@ -11896,7 +11897,7 @@ const DatePicker = ({
         console.error('Error in onChange function: ', error);
       }
     }
-  }), errorText && /*#__PURE__*/React.createElement(Text, {
+  }), error && errorText && /*#__PURE__*/React.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -13670,7 +13671,7 @@ const MultiSelect = ({
       }
       return filtered;
     }
-  }, props)), errorText && /*#__PURE__*/React.createElement(Text, {
+  }, props)), error && errorText && /*#__PURE__*/React.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -13944,7 +13945,7 @@ const MultiSelectWithCategories = ({
       }
       return filtered;
     }
-  }, props)), errorText && /*#__PURE__*/React.createElement(Text, {
+  }, props)), error && errorText && /*#__PURE__*/React.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -14194,7 +14195,7 @@ const MultiSelectWithoutFilter = ({
       fill: "black",
       className: `${styles$B.icon}`
     })
-  }, props)), errorText && /*#__PURE__*/React.createElement(Text, {
+  }, props)), errorText && error && /*#__PURE__*/React.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -15633,7 +15634,229 @@ const SingleSelect = ({
       }
       return filtered;
     }
-  }, props)), errorText && /*#__PURE__*/React.createElement(Text, {
+  }, props)), error && errorText && /*#__PURE__*/React.createElement(Text, {
+    size: "xs",
+    color: "#F54C4C",
+    italic: true,
+    text: errorText,
+    className: styles$K.text_below
+  }), helperText && /*#__PURE__*/React.createElement(Text, {
+    size: "xs",
+    italic: true,
+    text: helperText,
+    className: styles$K.text_below
+  }));
+};
+
+const filter$3 = /*#__PURE__*/createFilterOptions();
+const CssTextField$8 = /*#__PURE__*/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'
+        }
+      }
+    }
+  }
+});
+/**
+ * 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] = 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 /*#__PURE__*/React.createElement("div", {
+    className: `${className && className}`,
+    style: {
+      width: '100%'
+    },
+    id: id
+  }, topLabel && /*#__PURE__*/React.createElement(Text, {
+    text: `${topLabel ? topLabel : ''}`,
+    weight: topLabelWeight || 'bold',
+    size: topLabelSize || 'base',
+    className: styles$K.input_top_label,
+    required: required
+  }), /*#__PURE__*/React.createElement(Autocomplete, 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.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.createElement(RemoveCircledIcon, {
+      fill: "black",
+      className: `${styles$K.icon}`
+    }),
+    popupIcon: /*#__PURE__*/React.createElement(ArrowLineDowIcon, {
+      fill: "black",
+      className: `${styles$K.icon}`
+    }),
+    className: `${styles$K.newAutocomplete}`,
+    renderOption: (props, option) => {
+      return /*#__PURE__*/React.createElement("li", Object.assign({}, props, {
+        key: option.value,
+        id: option.value
+      }), /*#__PURE__*/React.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.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -16364,7 +16587,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__*/styled(TextField)({
+const CssTextField$9 = /*#__PURE__*/styled(TextField)({
   '& .MuiInputBase-input': {
     color: '#26292E',
     fontFamily: `'Open Sans' !important`,
@@ -16527,7 +16750,7 @@ const TextInput = props => {
     size: topLabelSize || 'base',
     className: styles$V.input_top_label,
     required: required
-  }), /*#__PURE__*/React.createElement(CssTextField$8, {
+  }), /*#__PURE__*/React.createElement(CssTextField$9, {
     fullWidth: true,
     size: "small",
     InputProps: {
@@ -17051,7 +17274,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__*/styled(TextField)({
+const CssTextField$a = /*#__PURE__*/styled(TextField)({
   '& .MuiInputBase-input': {
     color: '#26292E',
     fontFamily: `'Open Sans' !important`,
@@ -17139,7 +17362,7 @@ const CssTextField$9 = /*#__PURE__*/styled(TextField)({
   }
 });
 dayjs.extend(utc);
-const TimePickerStyledComponent = params => /*#__PURE__*/React.createElement(CssTextField$9, Object.assign({}, params, {
+const TimePickerStyledComponent = params => /*#__PURE__*/React.createElement(CssTextField$a, Object.assign({}, params, {
   variant: "outlined",
   fullWidth: true,
   label: `${params.label && params.topLabel === undefined ? params.label : ''}`,
@@ -17168,6 +17391,7 @@ const TimePicker = ({
   disabled,
   locale = 'en',
   required,
+  error,
   errorText,
   helperText,
   onChange,
@@ -17211,7 +17435,7 @@ const TimePicker = ({
     },
     disabled: disabled,
     onChange: onChange
-  }), errorText && /*#__PURE__*/React.createElement(Text, {
+  }), error && errorText && /*#__PURE__*/React.createElement(Text, {
     size: "xs",
     color: "#F54C4C",
     italic: true,
@@ -17527,5 +17751,5 @@ const UserIndicator = ({
   }));
 };
 
-export { AI_UserTest, Accordion, AccountIcon, AccountIconMksite, AddCircledIcon, AddIcon, AddSeatIcon, AddTagIcon, AddUsersIcon, AgendaIcon, AlamBellIdleIcon, AlarmBellStatusIcon, AlertCircledIcon, AndroidIcon, AngryIntervieweeFemale, AnonymizeIcon, AppWindowPieIcon, ArchiveIcon, ArrowDoubleLineDownIcon, ArrowDoubleLineLeftIcon, ArrowDoubleLineRightIcon, ArrowDoubleLineUpIcon, ArrowFilledDownIcon, ArrowFilledLeftIcon, ArrowFilledRightIcon, ArrowFilledUpIcon, ArrowLineDowIcon as ArrowLineDownIcon, ArrowLineLeftIcon, ArrowLineRightIcon, ArrowLineUpIcon, ArrowPointerDown, ArrowPointerDownLeft, ArrowPointerDownRight, ArrowPointerLeft, ArrowPointerRight, ArrowPointerUp, ArrowPointerUpLeft, ArrowPointerUpRight, Avatar, Badge, Banner, BillPdfIcon, BillingIcon, BinIcon, BinocularIcon, Blog, BookFlipPageIcon, Box, BrainIcon, BulbIcon, Button, CalendarIcon, CameraIcon, Caption, Card, CardButton, Chat, ChatBubbleIcon, ChatIcon, ChatInput, ChatMessage, Checkbox, CheckedCircled, CheckedIcon, CheckoutIcon, CircledIconButton, ClipIcon, ClockIcon, CloseIcon, CloudUpload, CogIcon, ColorPicker, ContentPenWriteIcon, ControlsBar, ConversationIdleIcon, ConversationStatusIcon, CopyPasteIcon, CreditCardIcon, CutClipIcon, DashedArrow, DataProtectionDisclaimer, DatePicker, DownloadIcon, DragDropIcon, EarthIcon, EditIcon, EditTextIcon, EmotionsHeatMap, EndRecording, FaceCenterIcon, FaceRecognitionIcon, Faq, FeaturesTable, FileInput, FileUploadIcon, FilesIcon, FillRecordIcon, FilledTaskIcon, FilterIcon, FlashIcon, FolderIcon, FormQuestions, GoogleIcon, GoogleIcon$1 as GroupIcon, HangUpIcon, HappyMen, HardDriveIcon, HeartIcon, HeartIconFilled, HelpIcon, HelpIconAlt, IconButton, InfoCircledIcon, IntegratedUsabilityScore, InterviewButton, InterviewTranscript, InterviewTranscriptGreen, IosIcon, LanguageIcon, LaptopIcon, LayoutIcon, LayoutLeftIcon, LayoutRightIcon, Link, LinkIcon, ListToDoIcon, LockIcon, LogoBeta, LogoNormal, LogoSlider, LogoSmall, LogoSquare, LogoText, LogoWhite, LogoutIcon, MarkUpBar, MeetingIcon, MenShowingSomething, MenuHorizontalIcon, MenuVerticalIcon, MessagesBubbleSquareQuestionIcon, MetaAnalyse, MetaAnalyse2, MetaAnalyseIcon, MicrophoneIcon, MicrophonePodcastIcon, MinusCircledIcon, MinusIcon, MksiteButton, MobileIcon, Modal, ModeratedIcon, MoveBackIcon, MoveInIcon, MultiSelect, MultiSelectWithCategories, MultiSelectWithoutFilter, MultipleUsersIcon, MuteIcon, NavigationCircledIcon, NbOfUsersIcon, NeutralBackgroudIcon, NoCameraIcon, NoMicrophoneIcon, Non_Moderated, NotifAlertIcon, NotificationIcon, NumberField, NumbersCode, OdaAccountPro, OdaWaiting, OfficeDrawerIcon, OneColumnIcon, OtherTab, Partner1 as Partner1SVG, Partner2 as Partner2SVG, Partner3 as Partner3SVG, Partner4 as Partner4SVG, Partner5 as Partner5SVG, Partner6 as Partner6SVG, Partner7 as Partner7SVG, Partner8 as Partner8SVG, Partner9 as Partner9SVG, PasswordField, PauseIcon, PencilWriteIcon, PlayIcon, PopoverBeta, PreviousIcon, PricingCard, ProjectSvg as ProjectHoverSvg, ProjectSvg$1 as ProjectSvg, QuestionButton, QuestionCircledIcon, Radio, RatingScale, RecordIcon, RecordingIcon, RefreshIcon, RemoveCircledIcon, ReportIcon, RobotIcon, Scenario, ScheduleTasks, Search, SearchCircledIcon, SearchIcon, SearchRemoveIcon, SeatIcon, SelfProtocolManager, SendEmailIcon, SendIcon, Sentiment, SettingsCircledIcon, SettingsSliderIcon, ShareIcon, SingleSelect, SmartBrainIcon, SortingIcon, SquareText, StarIcon, StarRating, StopRecordingIcon as StopRecordIcon, Success, SusExplanation, Switch, Table, TableCell, TableFooter, TableHeader$1 as TableHeader, TableRows, Tabs, TabsUnderline, Tag, TagAddIcon, TagEditIcon, TagIcon, TagRemoveIcon, Task, TaskIcon, TeamIcon, TestDetailsIcon, TestIcon, Text, TextForButton, TextForDropDownItem, TextInput, TextWithLink, Textarea, Thematic, ThreeColumnIcon, TimeInterval, TimePicker, Title, Toast, ToggleTab, Tooltip, TvFlatScreenIcon, TvIcon, TwoColumnIcon, UnLockIcon, UndoIcon, UnlockedIcon, UnmoderatedIcon, UsabilityBrowser, UserFlows, UserIndicator, UserPanel, UxGuide, VideoFlag, VideoFlag2, VideoFlagGreen, ViewIcon, ViewOffIcon, VoiceIcon, VolumeIcon, WaitingMen, WelcomeMessage, changeColorLuminance, colors, getColor, getIconSize, getReadableTextColor };
+export { AI_UserTest, Accordion, AccountIcon, AccountIconMksite, AddCircledIcon, AddIcon, AddSeatIcon, AddTagIcon, AddUsersIcon, AgendaIcon, AlamBellIdleIcon, AlarmBellStatusIcon, AlertCircledIcon, AndroidIcon, AngryIntervieweeFemale, AnonymizeIcon, AppWindowPieIcon, ArchiveIcon, ArrowDoubleLineDownIcon, ArrowDoubleLineLeftIcon, ArrowDoubleLineRightIcon, ArrowDoubleLineUpIcon, ArrowFilledDownIcon, ArrowFilledLeftIcon, ArrowFilledRightIcon, ArrowFilledUpIcon, ArrowLineDowIcon as ArrowLineDownIcon, ArrowLineLeftIcon, ArrowLineRightIcon, ArrowLineUpIcon, ArrowPointerDown, ArrowPointerDownLeft, ArrowPointerDownRight, ArrowPointerLeft, ArrowPointerRight, ArrowPointerUp, ArrowPointerUpLeft, ArrowPointerUpRight, Avatar, Badge, Banner, BillPdfIcon, BillingIcon, BinIcon, BinocularIcon, Blog, BookFlipPageIcon, Box, BrainIcon, BulbIcon, Button, CalendarIcon, CameraIcon, Caption, Card, CardButton, Chat, ChatBubbleIcon, ChatIcon, ChatInput, ChatMessage, Checkbox, CheckedCircled, CheckedIcon, CheckoutIcon, CircledIconButton, ClipIcon, ClockIcon, CloseIcon, CloudUpload, CogIcon, ColorPicker, ContentPenWriteIcon, ControlsBar, ConversationIdleIcon, ConversationStatusIcon, CopyPasteIcon, CreditCardIcon, CutClipIcon, DashedArrow, DataProtectionDisclaimer, DatePicker, DownloadIcon, DragDropIcon, EarthIcon, EditIcon, EditTextIcon, EmotionsHeatMap, EndRecording, FaceCenterIcon, FaceRecognitionIcon, Faq, FeaturesTable, FileInput, FileUploadIcon, FilesIcon, FillRecordIcon, FilledTaskIcon, FilterIcon, FlashIcon, FolderIcon, FormQuestions, GoogleIcon, GoogleIcon$1 as GroupIcon, HangUpIcon, HappyMen, HardDriveIcon, HeartIcon, HeartIconFilled, HelpIcon, HelpIconAlt, IconButton, InfoCircledIcon, IntegratedUsabilityScore, InterviewButton, InterviewTranscript, InterviewTranscriptGreen, IosIcon, LanguageIcon, LaptopIcon, LayoutIcon, LayoutLeftIcon, LayoutRightIcon, Link, LinkIcon, ListToDoIcon, LockIcon, LogoBeta, LogoNormal, LogoSlider, LogoSmall, LogoSquare, LogoText, LogoWhite, LogoutIcon, MarkUpBar, MeetingIcon, MenShowingSomething, MenuHorizontalIcon, MenuVerticalIcon, MessagesBubbleSquareQuestionIcon, MetaAnalyse, MetaAnalyse2, MetaAnalyseIcon, MicrophoneIcon, MicrophonePodcastIcon, MinusCircledIcon, MinusIcon, MksiteButton, MobileIcon, Modal, ModeratedIcon, MoveBackIcon, MoveInIcon, MultiSelect, MultiSelectWithCategories, MultiSelectWithoutFilter, MultipleUsersIcon, MuteIcon, NavigationCircledIcon, NbOfUsersIcon, NeutralBackgroudIcon, NoCameraIcon, NoMicrophoneIcon, Non_Moderated, NotifAlertIcon, NotificationIcon, NumberField, NumbersCode, OdaAccountPro, OdaWaiting, OfficeDrawerIcon, OneColumnIcon, OtherTab, Partner1 as Partner1SVG, Partner2 as Partner2SVG, Partner3 as Partner3SVG, Partner4 as Partner4SVG, Partner5 as Partner5SVG, Partner6 as Partner6SVG, Partner7 as Partner7SVG, Partner8 as Partner8SVG, Partner9 as Partner9SVG, PasswordField, PauseIcon, PencilWriteIcon, PlayIcon, PopoverBeta, PreviousIcon, PricingCard, ProjectSvg as ProjectHoverSvg, ProjectSvg$1 as ProjectSvg, QuestionButton, QuestionCircledIcon, Radio, RatingScale, RecordIcon, RecordingIcon, RefreshIcon, RemoveCircledIcon, ReportIcon, RobotIcon, Scenario, ScheduleTasks, Search, SearchCircledIcon, SearchIcon, SearchRemoveIcon, SeatIcon, SelfProtocolManager, SendEmailIcon, SendIcon, Sentiment, SettingsCircledIcon, SettingsSliderIcon, ShareIcon, SingleSelect, SingleSelectWithoutFilter, SmartBrainIcon, SortingIcon, SquareText, StarIcon, StarRating, StopRecordingIcon as StopRecordIcon, Success, SusExplanation, Switch, Table, TableCell, TableFooter, TableHeader$1 as TableHeader, TableRows, Tabs, TabsUnderline, Tag, TagAddIcon, TagEditIcon, TagIcon, TagRemoveIcon, Task, TaskIcon, TeamIcon, TestDetailsIcon, TestIcon, Text, TextForButton, TextForDropDownItem, TextInput, TextWithLink, Textarea, Thematic, ThreeColumnIcon, TimeInterval, TimePicker, Title, Toast, ToggleTab, Tooltip, TvFlatScreenIcon, TvIcon, TwoColumnIcon, UnLockIcon, UndoIcon, UnlockedIcon, UnmoderatedIcon, UsabilityBrowser, UserFlows, UserIndicator, UserPanel, UxGuide, VideoFlag, VideoFlag2, VideoFlagGreen, ViewIcon, ViewOffIcon, VoiceIcon, VolumeIcon, WaitingMen, WelcomeMessage, changeColorLuminance, colors, getColor, getIconSize, getReadableTextColor };
 //# sourceMappingURL=odaptos_design_system.esm.js.map