react-better-html 1.1.92 → 1.1.94

package/dist/index.d.mts

@@ -381,6 +381,7 @@ type InputFieldComponentType = {
         maxDate?: Date;
     }>) => React.ReactElement;
     time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 declare const InputField: typeof InputFieldComponent & {
@@ -392,6 +393,7 @@ declare const InputField: typeof InputFieldComponent & {
     date: typeof InputFieldComponent.date;
     dateTime: typeof InputFieldComponent.dateTime;
     time: typeof InputFieldComponent.time;
+    color: typeof InputFieldComponent.color;
 };
 
 type Country = {
@@ -437,6 +439,8 @@ type DropdownProps<Value, Data = unknown> = {
     debounceMinimumSymbolsRequired?: number;
     /** @default false */
     withoutClearButton?: boolean;
+    /** @default false */
+    withoutRenderingOptionsWhenClosed?: boolean;
     onChange?: (value: Value | undefined) => void;
     onChangeSearch?: (query: string) => void;
     renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;

package/dist/index.d.ts

@@ -381,6 +381,7 @@ type InputFieldComponentType = {
         maxDate?: Date;
     }>) => React.ReactElement;
     time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 declare const InputField: typeof InputFieldComponent & {
@@ -392,6 +393,7 @@ declare const InputField: typeof InputFieldComponent & {
     date: typeof InputFieldComponent.date;
     dateTime: typeof InputFieldComponent.dateTime;
     time: typeof InputFieldComponent.time;
+    color: typeof InputFieldComponent.color;
 };
 
 type Country = {
@@ -437,6 +439,8 @@ type DropdownProps<Value, Data = unknown> = {
     debounceMinimumSymbolsRequired?: number;
     /** @default false */
     withoutClearButton?: boolean;
+    /** @default false */
+    withoutRenderingOptionsWhenClosed?: boolean;
     onChange?: (value: Value | undefined) => void;
     onChangeSearch?: (query: string) => void;
     renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;

package/dist/index.js

@@ -1882,7 +1882,7 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
   }, [isOpen]);
   (0, import_react2.useEffect)(() => {
     const handleClickOutside = (event) => {
-      if (holderRef.current && !holderRef.current.contains(event.target)) {
+      if (holderRef && holderRef.current && !holderRef.current.contains(event.target)) {
         setIsOpen.setFalse();
       }
     };
@@ -4925,6 +4925,7 @@ function Label({ text, required, isError, color, htmlFor }) {
     Text_default,
     {
       as: "label",
+      width: "fit-content",
       height: 16,
       fontSize: 14,
       color: isError ? theme2.colors.error : color ?? theme2.colors.textSecondary,
@@ -4965,6 +4966,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   debounceIsLoading,
   debounceMinimumSymbolsRequired,
   withoutClearButton,
+  withoutRenderingOptionsWhenClosed,
   onChange,
   onChangeSearch,
   renderOption,
@@ -4973,6 +4975,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
 }, ref) {
   const theme2 = useTheme();
   const inputFieldHolderRef = (0, import_react16.useRef)(null);
+  const buttonsRef = (0, import_react16.useRef)(null);
   const inputRef = (0, import_react16.useRef)(null);
   const [isOpen, setIsOpen] = useBooleanState();
   const [isOpenLate, setIsOpenLate] = useBooleanState();
@@ -5067,6 +5070,33 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
     [withDebounce, onChangeSearch]
   );
   const selectedOption = (0, import_react16.useMemo)(() => options.find((option) => option.value === value), [options, value]);
+  const renderedOptions = (0, import_react16.useMemo)(
+    () => filteredOptions.map((option, index) => {
+      const isSelected = option.value === value;
+      const isDisabled = option.disabled;
+      const isFocused2 = index === focusedOptionIndex;
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        Div_default,
+        {
+          color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+          backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+          filter: isFocused2 ? isDisabled ? "brightness(0.95)" : "brightness(0.9)" : void 0,
+          filterHover: focusedOptionIndex === void 0 && !isDisabled ? "brightness(0.9)" : void 0,
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+          value: option,
+          onClickWithValue: onClickOption,
+          onMouseMove: () => setFocusedOptionIndex(void 0),
+          role: "option",
+          "aria-selected": isSelected,
+          "aria-disabled": isDisabled,
+          children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default, { children: option.label })
+        },
+        JSON.stringify(option)
+      );
+    }),
+    [filteredOptions, value, focusedOptionIndex, theme2.colors, onClickOption, renderOption]
+  );
   (0, import_react16.useEffect)(() => {
     if (isOpen) {
       setIsOpenLate.setTrue();
@@ -5083,7 +5113,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   }, [filteredOptions]);
   (0, import_react16.useEffect)(() => {
     const handleClickOutside = (event) => {
-      if (inputFieldHolderRef.current && !inputFieldHolderRef.current.contains(event.target)) {
+      if (inputFieldHolderRef.current && buttonsRef.current && !inputFieldHolderRef.current.contains(event.target) && !buttonsRef.current.contains(event.target)) {
         setIsOpen.setFalse();
         setSearchQuery("");
         setFocusedOptionIndex(void 0);
@@ -5103,7 +5133,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
   const withClearButton = isOpen && selectedOption;
   const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Div_default.row, { position: "relative", width: "100%", ref: inputFieldHolderRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Div_default.row, { position: "relative", width: "100%", children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       InputField_default,
       {
@@ -5148,30 +5178,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
             transition: theme2.styles.transition,
             role: "listbox",
             "aria-label": label,
-            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Loader_default.text, {}) }) : filteredOptions.length ? filteredOptions.map((option, index) => {
-              const isSelected = option.value === value;
-              const isDisabled = option.disabled;
-              const isFocused2 = index === focusedOptionIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                Div_default,
-                {
-                  color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                  backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                  filter: isFocused2 ? isDisabled ? "brightness(0.95)" : "brightness(0.9)" : void 0,
-                  filterHover: focusedOptionIndex === void 0 && !isDisabled ? "brightness(0.9)" : void 0,
-                  cursor: isDisabled ? "not-allowed" : "pointer",
-                  padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                  value: option,
-                  onClickWithValue: onClickOption,
-                  onMouseMove: () => setFocusedOptionIndex(void 0),
-                  role: "option",
-                  "aria-selected": isSelected,
-                  "aria-disabled": isDisabled,
-                  children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default, { children: option.label })
-                },
-                JSON.stringify(option)
-              );
-            }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
+            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
           }
         ),
         role: "combobox",
@@ -5179,6 +5186,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
         "aria-controls": "dropdown-list",
         "aria-haspopup": "listbox",
         "aria-label": label,
+        holderRef: inputFieldHolderRef,
         ref: inputRef
       }
     ),
@@ -5195,6 +5203,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
         filter: disabled ? "brightness(0.9)" : void 0,
         opacity: disabled ? 0.6 : void 0,
         zIndex: isOpen || isOpenLate ? 1001 : void 0,
+        ref: buttonsRef,
         children: [
           !withoutClearButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             Button_default.icon,
@@ -5253,6 +5262,7 @@ DropdownComponent.countries = (0, import_react16.forwardRef)(function Countries(
       placeholder: "Select a country",
       options,
       renderOption,
+      withoutRenderingOptionsWhenClosed: true,
       ref,
       ...props
     }
@@ -5444,6 +5454,9 @@ var Calendar_default = (0, import_react17.memo)(Calendar);
 // src/components/InputField.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var buttonWidth = 50;
+var colorPickerSpacing = 4;
+var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
+var colorPickerValueWidth = 12 + 74 + colorPickerSpacing;
 var InputElement = import_styled_components9.default.input.withConfig({
   shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
 })`
@@ -5492,6 +5505,17 @@ var InputElement = import_styled_components9.default.input.withConfig({
       }
    }
 
+   &[type="color"] {
+      --color-spacing: ${(props) => (props.theme.styles.space + props.theme.styles.gap) / 2}px;
+
+      width: calc(var(--color-spacing) + 27px + ${colorPickerValueWidth}px);
+      height: 48px;
+      padding: 0px;
+      padding-block: calc(var(--color-spacing) - 3px);
+      padding-left: var(--color-spacing);
+      padding-right: ${colorPickerValueWidth}px;
+   }
+
    &.react-better-html-phone-number-holder {
       border-right: none;
       border-top-right-radius: 0px;
@@ -6204,6 +6228,41 @@ InputFieldComponent.time = (0, import_react18.forwardRef)(function Time({ ...pro
     }
   );
 });
+InputFieldComponent.color = (0, import_react18.forwardRef)(function Color2({ value, onChangeValue, ...props }, ref) {
+  const [inputFieldValue, setInputFieldValue] = (0, import_react18.useState)(value ?? "#000000");
+  const onChangeValueElement = (0, import_react18.useCallback)(
+    (value2) => {
+      setInputFieldValue(value2);
+      onChangeValue?.(value2);
+    },
+    [onChangeValue]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    InputFieldComponent,
+    {
+      type: "color",
+      insideInputFieldComponent: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Div_default.row,
+        {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          top: 0,
+          left: colorPickerSpacing,
+          alignItems: "center",
+          pointerEvents: "none",
+          userSelect: "none",
+          paddingLeft: colorPickerColorWidth,
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { children: inputFieldValue })
+        }
+      ),
+      value: inputFieldValue,
+      onChangeValue: onChangeValueElement,
+      ref,
+      ...props
+    }
+  );
+});
 var InputField2 = (0, import_react18.memo)(InputFieldComponent);
 InputField2.multiline = InputFieldComponent.multiline;
 InputField2.email = InputFieldComponent.email;
@@ -6213,6 +6272,7 @@ InputField2.phoneNumber = InputFieldComponent.phoneNumber;
 InputField2.date = InputFieldComponent.date;
 InputField2.dateTime = InputFieldComponent.dateTime;
 InputField2.time = InputFieldComponent.time;
+InputField2.color = InputFieldComponent.color;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx