react-better-html 1.1.204 → 1.1.206

package/dist/index.mjs

@@ -1817,6 +1817,7 @@ Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, bac
       width: size,
       height: size,
       backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
+      border: `solid 1px ${theme2.colors.border}`,
       borderRadius: 999,
       alignItems: "center",
       justifyContent: "center",
@@ -5655,6 +5656,12 @@ var decryptString = (text) => {
   });
   return decrypted.toString(CryptoJS.enc.Utf8);
 };
+var getPluralWord = (word, count) => {
+  if (count === 1) return word;
+  const needChangeY = word.slice(-1) === "y" && !["a", "e", "o", "u", "i"].includes(word.slice(-2, -1));
+  const pluralWord = needChangeY ? word.slice(0, -1) + "ies" : word.slice(-1) === "s" ? word + "es" : word + "s";
+  return pluralWord;
+};
 
 // src/components/Label.tsx
 import { memo as memo15 } from "react";
@@ -5711,6 +5718,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
   onChangeSearch,
   renderOption,
   renderOptionDivider,
+  withMultiselect,
   id,
   ...props
 }, ref) {
@@ -5745,8 +5753,10 @@ var DropdownComponent = forwardRef10(function Dropdown({
           if (isOpen && filteredOptions.length > 0 && focusedOptionIndex !== void 0) {
             const option = filteredOptions[focusedOptionIndex];
             if (!option.disabled) {
-              if (controlledValue === void 0) setInternalValue(option.value);
-              onChange?.(option.value);
+              const clickedValue = option.value;
+              const newValue = withMultiselect ? Array.isArray(internalValue) ? internalValue?.includes(clickedValue) ? internalValue.filter((value2) => value2 !== clickedValue) : [...internalValue, clickedValue] : [clickedValue] : clickedValue;
+              if (controlledValue === void 0) setInternalValue(newValue);
+              onChange?.(newValue);
               setIsOpen.setFalse();
               inputRef.current?.blur();
               setSearchQuery("");
@@ -5775,20 +5785,32 @@ var DropdownComponent = forwardRef10(function Dropdown({
         }
       }
     },
-    [disabled, withSearch, isOpen, filteredOptions, focusedOptionIndex, controlledValue, onChange]
+    [
+      disabled,
+      withSearch,
+      isOpen,
+      filteredOptions,
+      focusedOptionIndex,
+      internalValue,
+      controlledValue,
+      onChange,
+      withMultiselect
+    ]
   );
   const onClickOption = useCallback7(
     (option) => {
       if (!option.disabled) {
-        if (controlledValue === void 0) setInternalValue(option.value);
-        onChange?.(option.value);
+        const clickedValue = option.value;
+        const newValue = withMultiselect ? Array.isArray(internalValue) ? internalValue?.includes(clickedValue) ? internalValue.filter((value2) => value2 !== clickedValue) : [...internalValue, clickedValue] : [clickedValue] : clickedValue;
+        if (controlledValue === void 0) setInternalValue(newValue);
+        onChange?.(newValue);
         setIsOpen.setFalse();
         inputRef.current?.blur();
         setSearchQuery("");
         setFocusedOptionIndex(void 0);
       }
     },
-    [onChange, controlledValue]
+    [onChange, internalValue, controlledValue, withMultiselect]
   );
   const onClickClearButton = useCallback7(
     (event) => {
@@ -5810,12 +5832,15 @@ var DropdownComponent = forwardRef10(function Dropdown({
     },
     [withDebounce, onChangeSearch]
   );
-  const selectedOption = useMemo4(() => options.find((option) => option.value === value), [options, value]);
+  const selectedOption = useMemo4(
+    () => withMultiselect ? options.filter((option) => Array.isArray(value) ? value.includes(option.value) : false) : options.find((option) => option.value === value),
+    [options, value]
+  );
   const renderedOptions = useMemo4(
     () => /* @__PURE__ */ jsxs11(Fragment4, { children: [
       renderOptionDivider ? renderOptionDivider(void 0, filteredOptions[0], -1, 0) : void 0,
       filteredOptions.map((option, index) => {
-        const isSelected = option.value === value;
+        const isSelected = withMultiselect ? Array.isArray(value) ? value.includes(option.value) : false : option.value === value;
         const isDisabled = option.disabled;
         const isFocused2 = index === focusedOptionIndex;
         return /* @__PURE__ */ jsxs11(Fragment3, { children: [
@@ -5846,7 +5871,16 @@ var DropdownComponent = forwardRef10(function Dropdown({
         ] }, JSON.stringify(option));
       })
     ] }),
-    [filteredOptions, value, focusedOptionIndex, theme2.colors, onClickOption, renderOption, renderOptionDivider]
+    [
+      withMultiselect,
+      filteredOptions,
+      value,
+      focusedOptionIndex,
+      theme2.colors,
+      onClickOption,
+      renderOption,
+      renderOptionDivider
+    ]
   );
   useEffect6(() => {
     setInternalValue(controlledValue);
@@ -5884,34 +5918,50 @@ var DropdownComponent = forwardRef10(function Dropdown({
     if (!withDebounce) return;
     onChangeSearch?.(debouncedSearchQuery);
   }, [withDebounce, onChangeSearch, debouncedSearchQuery]);
-  const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
-  const withClearButton = isOpen && selectedOption;
-  const readyPlaceholder = placeholder ?? `Select an ${label?.toLowerCase() ?? "option"}`;
-  return /* @__PURE__ */ jsx15(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", width: "100%", children: [
-    /* @__PURE__ */ jsx15(
-      InputField_default,
-      {
-        label,
-        labelColor,
-        errorText,
-        infoText,
-        required,
-        name,
-        disabled,
-        readOnly: !withSearch,
-        value: displayValue,
-        id,
-        cursor: !withSearch ? "pointer" : void 0,
-        placeholder: withSearch ? selectedOption ? selectedOption.label : readyPlaceholder : readyPlaceholder,
-        leftIcon,
-        autoComplete: "off",
-        className: `react-better-html-dropdown${isOpen ? " react-better-html-dropdown-open" : ""}${isOpenLate ? " react-better-html-dropdown-open-late" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`,
-        onClick: !disabled ? setIsOpen.toggle : void 0,
-        onFocus: setIsFocused.setTrue,
-        onBlur: setIsFocused.setFalse,
-        onKeyDown: onKeyDownInputField,
-        onChangeValue: withSearch ? onChangeValue : void 0,
-        insideInputFieldComponent: /* @__PURE__ */ jsx15(
+  const displayValue = (withSearch && isFocused && searchQuery.length > 0 ? searchQuery : !Array.isArray(selectedOption) ? selectedOption?.label : void 0) ?? "";
+  const withClearButton = isOpen && (Array.isArray(selectedOption) ? selectedOption.length > 0 : selectedOption);
+  const readyPlaceholder = placeholder ?? `Select ${!withMultiselect ? "an " : ""}${label?.toLowerCase() ?? getPluralWord("option", withMultiselect ? 2 : 1)}`;
+  return /* @__PURE__ */ jsx15(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsx15(
+    InputField_default,
+    {
+      label,
+      labelColor,
+      errorText,
+      infoText,
+      required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
+      name,
+      disabled,
+      readOnly: !withSearch,
+      value: displayValue,
+      id,
+      cursor: !withSearch ? "pointer" : void 0,
+      placeholder: withSearch ? selectedOption && !Array.isArray(selectedOption) ? selectedOption.label : readyPlaceholder : readyPlaceholder,
+      leftIcon,
+      autoComplete: "off",
+      className: `react-better-html-dropdown${Array.isArray(selectedOption) && selectedOption.length > 0 ? " react-better-html-dropdown-multiselect" : ""}${isOpen ? " react-better-html-dropdown-open" : ""}${isOpenLate ? " react-better-html-dropdown-open-late" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`,
+      onClick: !disabled ? setIsOpen.toggle : void 0,
+      onFocus: setIsFocused.setTrue,
+      onBlur: setIsFocused.setFalse,
+      onKeyDown: onKeyDownInputField,
+      onChangeValue: withSearch ? onChangeValue : void 0,
+      insideInputFieldBeforeComponent: Array.isArray(selectedOption) && selectedOption.length > 0 ? /* @__PURE__ */ jsx15(
+        Div_default,
+        {
+          width: "100%",
+          backgroundColor: theme2.colors.backgroundContent,
+          border: `solid 1px ${theme2.colors.border}`,
+          borderColor: isFocused ? theme2.colors.primary : void 0,
+          borderBottom: "none",
+          borderTopLeftRadius: theme2.styles.borderRadius,
+          borderTopRightRadius: theme2.styles.borderRadius,
+          paddingBlock: theme2.styles.gap,
+          paddingInline: (theme2.styles.space + theme2.styles.gap) / 2,
+          transition: theme2.styles.transition,
+          children: /* @__PURE__ */ jsx15(Div_default.row, { width: "100%", flexWrap: "wrap", gap: theme2.styles.gap, children: selectedOption.map((option) => /* @__PURE__ */ jsx15(Chip_default, { text: option.label }, JSON.stringify(option))) })
+        }
+      ) : void 0,
+      insideInputFieldAfterComponent: /* @__PURE__ */ jsxs11(Fragment4, { children: [
+        /* @__PURE__ */ jsx15(
           Div_default,
           {
             position: "absolute",
@@ -5936,60 +5986,61 @@ var DropdownComponent = forwardRef10(function Dropdown({
             children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx15(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx15(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ jsx15(Fragment4, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ jsx15(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx15(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
           }
         ),
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-controls": "dropdown-list",
-        "aria-haspopup": "listbox",
-        "aria-label": label,
-        holderRef: inputFieldHolderRef,
-        ref: inputRef
-      }
-    ),
-    /* @__PURE__ */ jsxs11(
-      Div_default.row,
-      {
-        position: "absolute",
-        top: 46 / 2 + (label ? 16 + theme2.styles.gap / 2 : 0),
-        right: theme2.styles.space + 1,
-        alignItems: "center",
-        gap: theme2.styles.gap,
-        transform: "translateY(-50%)",
-        pointerEvents: "none",
-        filter: disabled ? "brightness(0.9)" : void 0,
-        opacity: disabled ? 0.6 : void 0,
-        zIndex: isOpen || isOpenLate ? 1001 : void 0,
-        ref: buttonsRef,
-        children: [
-          !withoutClearButton && /* @__PURE__ */ jsx15(
-            Button_default.icon,
-            {
-              icon: "XMark",
-              position: "relative",
-              size: 10,
-              iconSize: 14,
-              opacity: !withClearButton ? 0 : void 0,
-              pointerEvents: withClearButton ? "all" : void 0,
-              onClick: onClickClearButton,
-              disabled: !withClearButton
-            }
-          ),
-          /* @__PURE__ */ jsx15(
-            Icon_default,
-            {
-              name: "chevronDown",
-              position: "relative",
-              size: 16,
-              color: theme2.colors.textSecondary,
-              transform: `rotate(${isOpen ? 180 : 0}deg)`,
-              transition: theme2.styles.transition,
-              pointerEvents: "none",
-              "aria-hidden": true
-            }
-          )
-        ]
-      }
-    )
-  ] }) });
+        /* @__PURE__ */ jsxs11(
+          Div_default.row,
+          {
+            position: "absolute",
+            top: 46 / 2,
+            right: theme2.styles.space + 1,
+            alignItems: "center",
+            gap: theme2.styles.gap,
+            transform: "translateY(-50%)",
+            pointerEvents: "none",
+            filter: disabled ? "brightness(0.9)" : void 0,
+            opacity: disabled ? 0.6 : void 0,
+            zIndex: isOpen || isOpenLate ? 1001 : void 0,
+            ref: buttonsRef,
+            children: [
+              !withoutClearButton && /* @__PURE__ */ jsx15(
+                Button_default.icon,
+                {
+                  icon: "XMark",
+                  position: "relative",
+                  size: 10,
+                  iconSize: 14,
+                  opacity: !withClearButton ? 0 : void 0,
+                  pointerEvents: withClearButton ? "all" : void 0,
+                  onClick: onClickClearButton,
+                  disabled: !withClearButton
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                Icon_default,
+                {
+                  name: "chevronDown",
+                  position: "relative",
+                  size: 16,
+                  color: theme2.colors.textSecondary,
+                  transform: `rotate(${isOpen ? 180 : 0}deg)`,
+                  transition: theme2.styles.transition,
+                  pointerEvents: "none",
+                  "aria-hidden": true
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-controls": "dropdown-list",
+      "aria-multiselectable": withMultiselect ? "true" : "false",
+      "aria-haspopup": "listbox",
+      "aria-label": label,
+      holderRef: inputFieldHolderRef,
+      ref: inputRef
+    }
+  ) });
 });
 DropdownComponent.countries = forwardRef10(function Countries({ ...props }, ref) {
   const theme2 = useTheme();
@@ -6344,6 +6395,12 @@ var InputElement = styled10.input.withConfig({
    &.react-better-html-dropdown {
       padding-right: ${(props) => props.theme.styles.space + 16 + props.theme.styles.space - 1}px;
 
+      &.react-better-html-dropdown-multiselect {
+         border-top: none;
+         border-top-left-radius: 0px;
+         border-top-right-radius: 0px;
+      }
+
       &.react-better-html-dropdown-open {
          border-bottom-left-radius: 0px;
          border-bottom-right-radius: 0px;
@@ -6416,7 +6473,8 @@ var InputFieldComponent = forwardRef11(function InputField({
   prefixBackgroundColor,
   suffix,
   suffixBackgroundColor,
-  insideInputFieldComponent,
+  insideInputFieldBeforeComponent,
+  insideInputFieldAfterComponent,
   withDebounce,
   debounceDelay = 0.5,
   onChange,
@@ -6482,59 +6540,62 @@ var InputFieldComponent = forwardRef11(function InputField({
         }
       ),
       /* @__PURE__ */ jsxs13(Div_default, { position: "relative", width: "100%", height: "fit-content", ref: holderRef, children: [
-        leftIcon && /* @__PURE__ */ jsx17(
-          Icon_default,
-          {
-            name: leftIcon,
-            position: "absolute",
-            top: (props.type === "date" || props.type === "time" || props.type === "datetime-local" ? 48 : 46) / 2,
-            left: theme2.styles.space + 1,
-            transform: "translateY(-50%)",
-            pointerEvents: "none",
-            zIndex: leftIconZIndex
-          }
-        ),
-        /* @__PURE__ */ jsx17(
-          InputElement,
-          {
-            theme: theme2,
-            withLeftIcon: leftIcon !== void 0,
-            withRightIcon: rightIcon !== void 0,
-            withPrefix: prefix !== void 0,
-            withSuffix: suffix !== void 0,
-            required,
-            placeholder: placeholder ?? label,
-            id: readyId,
-            onChange: onChangeElement,
-            ...styledComponentStylesWithoutExcluded,
-            ...dataProps,
-            ...ariaProps,
-            ...restProps,
-            ref
-          }
-        ),
-        rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx17(
-          Button_default.icon,
-          {
-            icon: rightIcon,
-            position: "absolute",
-            top: 46 / 2,
-            right: theme2.styles.space + 1 - theme2.styles.space / 2,
-            transform: "translateY(-50%)",
-            onClick: onClickRightIcon
-          }
-        ) : /* @__PURE__ */ jsx17(
-          Icon_default,
-          {
-            name: rightIcon,
-            position: "absolute",
-            top: 46 / 2,
-            right: theme2.styles.space + 1,
-            transform: "translateY(-50%)",
-            pointerEvents: "none"
-          }
-        ) : void 0,
-        insideInputFieldComponent
+        insideInputFieldBeforeComponent,
+        /* @__PURE__ */ jsxs13(Div_default, { position: "relative", width: "100%", height: "fit-content", children: [
+          leftIcon && /* @__PURE__ */ jsx17(
+            Icon_default,
+            {
+              name: leftIcon,
+              position: "absolute",
+              top: (props.type === "date" || props.type === "time" || props.type === "datetime-local" ? 48 : 46) / 2,
+              left: theme2.styles.space + 1,
+              transform: "translateY(-50%)",
+              pointerEvents: "none",
+              zIndex: leftIconZIndex
+            }
+          ),
+          /* @__PURE__ */ jsx17(
+            InputElement,
+            {
+              theme: theme2,
+              withLeftIcon: leftIcon !== void 0,
+              withRightIcon: rightIcon !== void 0,
+              withPrefix: prefix !== void 0,
+              withSuffix: suffix !== void 0,
+              required,
+              placeholder: placeholder ?? label,
+              id: readyId,
+              onChange: onChangeElement,
+              ...styledComponentStylesWithoutExcluded,
+              ...dataProps,
+              ...ariaProps,
+              ...restProps,
+              ref
+            }
+          ),
+          rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx17(
+            Button_default.icon,
+            {
+              icon: rightIcon,
+              position: "absolute",
+              top: 46 / 2,
+              right: theme2.styles.space + 1 - theme2.styles.space / 2,
+              transform: "translateY(-50%)",
+              onClick: onClickRightIcon
+            }
+          ) : /* @__PURE__ */ jsx17(
+            Icon_default,
+            {
+              name: rightIcon,
+              position: "absolute",
+              top: 46 / 2,
+              right: theme2.styles.space + 1,
+              transform: "translateY(-50%)",
+              pointerEvents: "none"
+            }
+          ) : void 0,
+          insideInputFieldAfterComponent
+        ] })
       ] }),
       suffix && /* @__PURE__ */ jsx17(
         Div_default.row,
@@ -6850,7 +6911,7 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...pr
     InputFieldComponent,
     {
       type: "date",
-      insideInputFieldComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
         Div_default,
         {
           position: "absolute",
@@ -6921,7 +6982,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
     InputFieldComponent,
     {
       type: "datetime-local",
-      insideInputFieldComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
         Div_default,
         {
           position: "absolute",
@@ -7062,7 +7123,7 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
     InputFieldComponent,
     {
       type: "time",
-      insideInputFieldComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
         Div_default,
         {
           position: "absolute",
@@ -7165,7 +7226,7 @@ InputFieldComponent.color = forwardRef11(function Color2({ value, onChangeValue,
     InputFieldComponent,
     {
       type: "color",
-      insideInputFieldComponent: /* @__PURE__ */ jsx17(
+      insideInputFieldAfterComponent: /* @__PURE__ */ jsx17(
         Div_default.row,
         {
           position: "absolute",
@@ -9964,6 +10025,7 @@ export {
   generateRandomString,
   getBrowser,
   getFormErrorObject,
+  getPluralWord,
   isMobileDevice,
   lightenColor,
   loaderControls,