react-better-html 1.1.253 → 1.1.255

package/dist/index.js

@@ -1021,7 +1021,8 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
     setInternalValue,
     inputFieldProps,
     insideInputFieldComponentProps,
-    isOpen
+    isOpen,
+    isFocused
   };
 }
 function usePageResize() {
@@ -5042,7 +5043,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
     ] })
   ] });
 });
-InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, ...inputFieldProps }, ref) {
+InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, dropdownPosition = "left", ...inputFieldProps }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.date,
@@ -5055,7 +5056,8 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
     internalValue,
     setInternalValue,
     inputFieldProps: restInputFieldProps,
-    insideInputFieldComponentProps
+    insideInputFieldComponentProps,
+    isFocused
   } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const onChange = (0, import_react21.useCallback)(
     (date) => {
@@ -5069,12 +5071,13 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
     {
       ...betterHtmlContextInternal.components.inputField?.style?.date,
       type: "date",
-      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         Div_default,
         {
           position: "absolute",
           top: "100%",
-          left: 0,
+          left: dropdownPosition === "left" ? 0 : void 0,
+          right: dropdownPosition === "right" ? 0 : void 0,
           width: "fit-content",
           backgroundColor: theme2.colors.backgroundContent,
           borderBottomLeftRadius: theme2.styles.borderRadius,
@@ -5082,7 +5085,22 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
           boxShadow: "0px 10px 20px #00000020",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Div_default,
+              {
+                position: "absolute",
+                top: 0,
+                left: -theme2.styles.borderWidth,
+                width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
+                height: theme2.styles.borderWidth,
+                backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
+                transform: `translateY(-${theme2.styles.borderWidth}px)`,
+                transition: theme2.styles.transition
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
+          ]
         }
       ) : void 0,
       holderRef,
@@ -5099,6 +5117,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
   maxDate,
   defaultDateAfterTimePick,
   defaultTimeAfterDatePick = "00:00",
+  dropdownPosition = "left",
   ...inputFieldProps
 }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
@@ -5116,7 +5135,8 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
     setInternalValue,
     inputFieldProps: restInputFieldProps,
     insideInputFieldComponentProps,
-    isOpen
+    isOpen,
+    isFocused
   } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const readyHours = (0, import_react21.useMemo)(
     () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
@@ -5194,12 +5214,13 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
     {
       ...betterHtmlContextInternal.components.inputField?.style?.dateTime,
       type: "datetime-local",
-      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         Div_default,
         {
           position: "absolute",
           top: "100%",
-          left: 0,
+          left: dropdownPosition === "left" ? 0 : void 0,
+          right: dropdownPosition === "right" ? 0 : void 0,
           width: "fit-content",
           backgroundColor: theme2.colors.backgroundContent,
           borderBottomLeftRadius: theme2.styles.borderRadius,
@@ -5208,89 +5229,104 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
           overflow: "hidden",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { gap: theme2.styles.space, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-              Div_default.row,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Div_default,
               {
-                height: 276,
-                gap: theme2.styles.gap / 2,
-                paddingTop: topSpacing,
-                paddingBottom: theme2.styles.space / 2,
-                paddingRight: theme2.styles.space / 2,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                      Div_default,
-                      {
-                        className: "react-better-html-no-scrollbar",
-                        width: buttonWidth,
-                        height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
-                        overflowY: "auto",
-                        tabIndex: -1,
-                        children: readyHours.map((hour) => {
-                          const isSelected = hour.toString() === valueHour;
-                          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                            Div_default.row,
-                            {
-                              alignItems: "center",
-                              justifyContent: "center",
-                              color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                              backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                              borderRadius: theme2.styles.borderRadius / 2,
-                              filterHover: "brightness(0.9)",
-                              cursor: "pointer",
-                              padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                              value: hour,
-                              onClickWithValue: onClickHour,
-                              ref: isSelected ? selectedHourRef : void 0,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
-                            },
-                            hour
-                          );
-                        })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                      Div_default,
-                      {
-                        className: "react-better-html-no-scrollbar",
-                        width: buttonWidth,
-                        height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
-                        overflowY: "auto",
-                        tabIndex: -1,
-                        children: readyMinutes.map((minute) => {
-                          const isSelected = minute.toString() === valueMinute;
-                          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                            Div_default.row,
-                            {
-                              alignItems: "center",
-                              justifyContent: "center",
-                              color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                              backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                              borderRadius: theme2.styles.borderRadius / 2,
-                              filterHover: "brightness(0.9)",
-                              cursor: "pointer",
-                              padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                              value: minute,
-                              onClickWithValue: onClickMinute,
-                              ref: isSelected ? selectedMinuteRef : void 0,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
-                            },
-                            minute
-                          );
-                        })
-                      }
-                    )
-                  ] })
-                ]
+                position: "absolute",
+                top: 0,
+                left: -theme2.styles.borderWidth,
+                width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
+                height: theme2.styles.borderWidth,
+                backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
+                transform: `translateY(-${theme2.styles.borderWidth}px)`,
+                transition: theme2.styles.transition
               }
-            )
-          ] })
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { gap: theme2.styles.space, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                Div_default.row,
+                {
+                  height: 276,
+                  gap: theme2.styles.gap / 2,
+                  paddingTop: topSpacing,
+                  paddingBottom: theme2.styles.space / 2,
+                  paddingRight: theme2.styles.space / 2,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                        Div_default,
+                        {
+                          className: "react-better-html-no-scrollbar",
+                          width: buttonWidth,
+                          height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
+                          overflowY: "auto",
+                          tabIndex: -1,
+                          children: readyHours.map((hour) => {
+                            const isSelected = hour.toString() === valueHour;
+                            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                              Div_default.row,
+                              {
+                                alignItems: "center",
+                                justifyContent: "center",
+                                color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                                backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                                borderRadius: theme2.styles.borderRadius / 2,
+                                filterHover: "brightness(0.9)",
+                                cursor: "pointer",
+                                padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                                value: hour,
+                                onClickWithValue: onClickHour,
+                                ref: isSelected ? selectedHourRef : void 0,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                              },
+                              hour
+                            );
+                          })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                        Div_default,
+                        {
+                          className: "react-better-html-no-scrollbar",
+                          width: buttonWidth,
+                          height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
+                          overflowY: "auto",
+                          tabIndex: -1,
+                          children: readyMinutes.map((minute) => {
+                            const isSelected = minute.toString() === valueMinute;
+                            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                              Div_default.row,
+                              {
+                                alignItems: "center",
+                                justifyContent: "center",
+                                color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                                backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                                borderRadius: theme2.styles.borderRadius / 2,
+                                filterHover: "brightness(0.9)",
+                                cursor: "pointer",
+                                padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                                value: minute,
+                                onClickWithValue: onClickMinute,
+                                ref: isSelected ? selectedMinuteRef : void 0,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                              },
+                              minute
+                            );
+                          })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          ]
         }
       ) : void 0,
       holderRef,
@@ -5301,7 +5337,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
     }
   );
 });
-InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...inputFieldProps }, ref) {
+InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, dropdownPosition = "left", ...inputFieldProps }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.time,
@@ -5321,7 +5357,8 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
     setInternalValue,
     inputFieldProps: restInputFieldProps,
     insideInputFieldComponentProps,
-    isOpen
+    isOpen,
+    isFocused
   } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const readyHours = (0, import_react21.useMemo)(
     () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
@@ -5388,12 +5425,13 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
     {
       ...betterHtmlContextInternal.components.inputField?.style?.time,
       type: "time",
-      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         Div_default,
         {
           position: "absolute",
           top: "100%",
-          left: 0,
+          left: dropdownPosition === "left" ? 0 : void 0,
+          right: dropdownPosition === "right" ? 0 : void 0,
           width: buttonWidth * 2 + 2,
           height: 300,
           backgroundColor: theme2.colors.backgroundContent,
@@ -5403,73 +5441,88 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
           overflowY: "auto",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { height: "100%", children: [
+          children: [
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               Div_default,
               {
-                className: "react-better-html-no-scrollbar",
-                width: buttonWidth,
-                height: "100%",
-                overflowY: "auto",
-                tabIndex: -1,
-                children: readyHours.map((hour) => {
-                  const isSelected = hour.toString() === valueHour;
-                  const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
-                  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                    Div_default.row,
-                    {
-                      alignItems: "center",
-                      justifyContent: "center",
-                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                      filterHover: "brightness(0.9)",
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                      opacity: isDisabled ? 0.6 : void 0,
-                      value: hour,
-                      onClickWithValue: !isDisabled ? onClickHour : void 0,
-                      ref: isSelected ? selectedHourRef : void 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
-                    },
-                    hour
-                  );
-                })
+                position: "absolute",
+                top: 0,
+                left: -theme2.styles.borderWidth,
+                width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
+                height: theme2.styles.borderWidth,
+                backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
+                transform: `translateY(-${theme2.styles.borderWidth}px)`,
+                transition: theme2.styles.transition
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-              Div_default,
-              {
-                className: "react-better-html-no-scrollbar",
-                width: buttonWidth,
-                height: "100%",
-                overflowY: "auto",
-                tabIndex: -1,
-                children: readyMinutes.map((minute) => {
-                  const isSelected = minute.toString() === valueMinute;
-                  const currentHour = parseInt(valueHour);
-                  const isDisabled = minHours !== void 0 && minMinutes !== void 0 && currentHour === minHours && minute < minMinutes || maxHours !== void 0 && maxMinutes !== void 0 && currentHour === maxHours && minute > maxMinutes;
-                  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                    Div_default.row,
-                    {
-                      alignItems: "center",
-                      justifyContent: "center",
-                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                      filterHover: "brightness(0.9)",
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                      opacity: isDisabled ? 0.6 : void 0,
-                      value: minute,
-                      onClickWithValue: !isDisabled ? onClickMinute : void 0,
-                      ref: isSelected ? selectedMinuteRef : void 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
-                    },
-                    minute
-                  );
-                })
-              }
-            )
-          ] })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { height: "100%", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Div_default,
+                {
+                  className: "react-better-html-no-scrollbar",
+                  width: buttonWidth,
+                  height: "100%",
+                  overflowY: "auto",
+                  tabIndex: -1,
+                  children: readyHours.map((hour) => {
+                    const isSelected = hour.toString() === valueHour;
+                    const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
+                    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      Div_default.row,
+                      {
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                        backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                        filterHover: "brightness(0.9)",
+                        cursor: isDisabled ? "not-allowed" : "pointer",
+                        padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                        opacity: isDisabled ? 0.6 : void 0,
+                        value: hour,
+                        onClickWithValue: !isDisabled ? onClickHour : void 0,
+                        ref: isSelected ? selectedHourRef : void 0,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                      },
+                      hour
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Div_default,
+                {
+                  className: "react-better-html-no-scrollbar",
+                  width: buttonWidth,
+                  height: "100%",
+                  overflowY: "auto",
+                  tabIndex: -1,
+                  children: readyMinutes.map((minute) => {
+                    const isSelected = minute.toString() === valueMinute;
+                    const currentHour = parseInt(valueHour);
+                    const isDisabled = minHours !== void 0 && minMinutes !== void 0 && currentHour === minHours && minute < minMinutes || maxHours !== void 0 && maxMinutes !== void 0 && currentHour === maxHours && minute > maxMinutes;
+                    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      Div_default.row,
+                      {
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                        backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                        filterHover: "brightness(0.9)",
+                        cursor: isDisabled ? "not-allowed" : "pointer",
+                        padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                        opacity: isDisabled ? 0.6 : void 0,
+                        value: minute,
+                        onClickWithValue: !isDisabled ? onClickMinute : void 0,
+                        ref: isSelected ? selectedMinuteRef : void 0,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                      },
+                      minute
+                    );
+                  })
+                }
+              )
+            ] })
+          ]
         }
       ) : void 0,
       holderRef,
@@ -5481,7 +5534,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
     }
   );
 });
-InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4(inputFieldProps, ref) {
+InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4({ ...inputFieldProps }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const { value, onChangeValue, ...props } = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.time,
@@ -7444,11 +7497,12 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
   const firstRenderPassedRef = (0, import_react29.useRef)(false);
   const tabsRef = (0, import_react29.useRef)({});
   const [selectedTab, setSelectedTab] = (0, import_react29.useState)(() => {
-    const selectedTabId = tabs[0]?.id ?? "";
+    const selectedTabId = tabs[0];
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
       if (!tabQueryValue) return selectedTabId;
-      if (tabs.some((tab) => tab.id === tabQueryValue)) return tabQueryValue;
+      const queryTab = tabs.find((tab) => tab.id === tabQueryValue);
+      if (queryTab) return queryTab;
     }
     return selectedTabId;
   });
@@ -7456,7 +7510,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
   const onClickTab = (0, import_react29.useCallback)(
     (tab) => {
-      setSelectedTab(tab.id);
+      setSelectedTab(tab);
       onChange?.(tab);
       if (urlQuery) {
         urlQuery.setQuery({
@@ -7467,11 +7521,11 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
     [onChange, name, urlQuery]
   );
   const width = (0, import_react29.useMemo)(
-    () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
+    () => tabsRef.current[selectedTab.id]?.getBoundingClientRect().width ?? 0,
     [rerenderState, selectedTab]
   );
   const leftSpacing = (0, import_react29.useMemo)(() => {
-    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTab);
+    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTab.id);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
       if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
@@ -7494,7 +7548,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
         return oldValue.map(
           (item) => item.name === (name ?? defaultTabName) ? {
             ...item,
-            selectedTab
+            selectedTab: selectedTab.id
           } : item
         );
       } else {
@@ -7502,14 +7556,14 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
           ...oldValue,
           {
             name: name ?? defaultTabName,
-            selectedTab
+            selectedTab: selectedTab.id
           }
         ];
       }
     });
   }, [selectedTab, name]);
   (0, import_react29.useEffect)(() => {
-    tabsRef.current[selectedTab]?.scrollIntoView({
+    tabsRef.current[selectedTab.id]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
@@ -7521,16 +7575,19 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
       );
     };
   }, []);
+  (0, import_react29.useEffect)(() => {
+    onChange?.(selectedTab);
+  }, []);
   (0, import_react29.useImperativeHandle)(ref, () => {
     return {
-      selectedTab,
+      selectedTab: selectedTab.id,
       selectTab: onClickTab
     };
   }, [selectedTab, onClickTab]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
-        const selected = tab.id === selectedTab;
+        const selected = tab.id === selectedTab.id;
         return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Div_default,
           {
@@ -7790,18 +7847,11 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
   backgroundColor,
   activeItemColor,
   hoverItemColor,
+  location,
   onClick
 }) {
-  const reactRouterDomPlugin2 = usePlugin("react-router-dom");
-  if (!reactRouterDomPlugin2) {
-    throw new Error(
-      "`SideMenu` component requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
-    );
-  }
-  const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
   const theme2 = (0, import_react_better_core29.useTheme)();
   const mediaQuery = useMediaQuery();
-  const location = reactRouterDomPluginConfig.useLocation();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const { colorTheme } = (0, import_react_better_core29.useBetterCoreContext)();
   const { activeItem, setActiveItem } = useSideMenuContext();
@@ -7953,6 +8003,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
             {
               item: child,
               backgroundColor: readyBackgroundColor,
+              location,
               onClick
             },
             child.text
@@ -8003,6 +8054,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
 var SideMenuComponent = function SideMenu({
   items,
   bottomItems,
+  location,
   topSpace = 0,
   logoAssetName,
   logoUrl,
@@ -8064,6 +8116,7 @@ var SideMenuComponent = function SideMenu({
           backgroundColor: readyBackgroundColor,
           activeItemColor,
           hoverItemColor,
+          location,
           onClick: onClickXButton
         },
         item.text
@@ -8086,6 +8139,7 @@ var SideMenuComponent = function SideMenu({
           backgroundColor: readyBackgroundColor,
           activeItemColor,
           hoverItemColor,
+          location,
           onClick: onClickXButton
         },
         item.text