react-better-html 1.1.77 → 1.1.79

package/dist/index.mjs

@@ -4677,7 +4677,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const dropdownHolderRef = useRef3(null);
+  const inputFieldHolderRef = useRef3(null);
   const inputRef = useRef3(null);
   const [isOpen, setIsOpen] = useBooleanState();
   const [isOpenLate, setIsOpenLate] = useBooleanState();
@@ -4788,7 +4788,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   }, [filteredOptions]);
   useEffect5(() => {
     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);
@@ -4808,7 +4808,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
   const withClearButton = isOpen && selectedOption;
   const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
-  return /* @__PURE__ */ jsx13(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: /* @__PURE__ */ jsxs8(Div_default.row, { position: "relative", width: "100%", children: [
+  return /* @__PURE__ */ jsx13(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsxs8(Div_default.row, { position: "relative", width: "100%", children: [
     /* @__PURE__ */ jsx13(
       InputField_default,
       {
@@ -4828,6 +4828,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
         onFocus: setIsFocused.setTrue,
         onBlur: setIsFocused.setFalse,
         onKeyDown: onKeyDownInputField,
+        holderRef: inputFieldHolderRef,
         onChangeValue: withSearch ? onChangeValue : void 0,
         insideInputFieldComponent: /* @__PURE__ */ jsx13(
           Div_default,
@@ -4889,7 +4890,7 @@ var DropdownComponent = forwardRef7(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,
@@ -5148,7 +5149,7 @@ var InputElement = styled8.input.withConfig({
    &[type="date"],
    &[type="datetime-local"],
    &[type="time"] {
-      min-height: 48px;
+      // min-height: 46px;
       -webkit-appearance: none;
 
       &::-webkit-calendar-picker-indicator {
@@ -5277,23 +5278,29 @@ var InputFieldComponent = forwardRef8(function InputField({
     },
     [onChange, onChangeValue, withDebounce]
   );
+  const leftIconZIndex = useMemo5(
+    () => ["react-better-html-dropdown-open-late", "react-better-html-inputField-dateTime-opened-late"].some(
+      (classNameItem) => props.className?.includes(classNameItem)
+    ) ? 1002 : 1,
+    [props.className]
+  );
   useEffect7(() => {
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
-  return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, ref: holderRef, children: [
+  return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-    /* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", children: [
+    /* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
       leftIcon && /* @__PURE__ */ jsx15(
         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__ */ jsx15(