react-better-html 1.1.77 → 1.1.79

package/dist/index.js

@@ -4750,7 +4750,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const dropdownHolderRef = (0, import_react16.useRef)(null);
+  const inputFieldHolderRef = (0, import_react16.useRef)(null);
   const inputRef = (0, import_react16.useRef)(null);
   const [isOpen, setIsOpen] = useBooleanState();
   const [isOpenLate, setIsOpenLate] = useBooleanState();
@@ -4861,7 +4861,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   }, [filteredOptions]);
   (0, import_react16.useEffect)(() => {
     const handleClickOutside = (event) => {
-      if (dropdownHolderRef.current && !dropdownHolderRef.current.contains(event.target)) {
+      if (inputFieldHolderRef.current && !inputFieldHolderRef.current.contains(event.target)) {
         setIsOpen.setFalse();
         setSearchQuery("");
         setFocusedOptionIndex(void 0);
@@ -4881,7 +4881,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, ref: dropdownHolderRef, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Div_default.row, { position: "relative", width: "100%", 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,
       {
@@ -4901,6 +4901,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
         onFocus: setIsFocused.setTrue,
         onBlur: setIsFocused.setFalse,
         onKeyDown: onKeyDownInputField,
+        holderRef: inputFieldHolderRef,
         onChangeValue: withSearch ? onChangeValue : void 0,
         insideInputFieldComponent: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Div_default,
@@ -4962,7 +4963,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
       Div_default.row,
       {
         position: "absolute",
-        top: 46 / 2 + (label ? 16 + theme2.styles.gap / 2 : 0),
+        top: 46 / 2 + (label ? 16 + theme2.styles.gap : 0),
         right: theme2.styles.space + 1,
         alignItems: "center",
         gap: theme2.styles.gap,
@@ -5221,7 +5222,7 @@ var InputElement = import_styled_components9.default.input.withConfig({
    &[type="date"],
    &[type="datetime-local"],
    &[type="time"] {
-      min-height: 48px;
+      // min-height: 46px;
       -webkit-appearance: none;
 
       &::-webkit-calendar-picker-indicator {
@@ -5350,23 +5351,29 @@ var InputFieldComponent = (0, import_react18.forwardRef)(function InputField({
     },
     [onChange, onChangeValue, withDebounce]
   );
+  const leftIconZIndex = (0, import_react18.useMemo)(
+    () => ["react-better-html-dropdown-open-late", "react-better-html-inputField-dateTime-opened-late"].some(
+      (classNameItem) => props.className?.includes(classNameItem)
+    ) ? 1002 : 1,
+    [props.className]
+  );
   (0, import_react18.useEffect)(() => {
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, ref: holderRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
       leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Icon_default,
         {
           name: leftIcon,
           position: "absolute",
-          top: 46 / 2,
+          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: props.className?.includes("react-better-html-dropdown-open-late") ? 1002 : 1
+          zIndex: leftIconZIndex
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(