react-better-html 1.1.253 → 1.1.255

package/dist/index.mjs

@@ -950,7 +950,8 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
     setInternalValue,
     inputFieldProps,
     insideInputFieldComponentProps,
-    isOpen
+    isOpen,
+    isFocused
   };
 }
 function usePageResize() {
@@ -4993,7 +4994,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
     ] })
   ] });
 });
-InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...inputFieldProps }, ref) {
+InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, dropdownPosition = "left", ...inputFieldProps }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.date,
@@ -5006,7 +5007,8 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...in
     internalValue,
     setInternalValue,
     inputFieldProps: restInputFieldProps,
-    insideInputFieldComponentProps
+    insideInputFieldComponentProps,
+    isFocused
   } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const onChange = useCallback10(
     (date) => {
@@ -5020,12 +5022,13 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...in
     {
       ...betterHtmlContextInternal.components.inputField?.style?.date,
       type: "date",
-      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsxs14(
         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,
@@ -5033,7 +5036,22 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...in
           boxShadow: "0px 10px 20px #00000020",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
+          children: [
+            /* @__PURE__ */ jsx17(
+              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__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
+          ]
         }
       ) : void 0,
       holderRef,
@@ -5050,6 +5068,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
   maxDate,
   defaultDateAfterTimePick,
   defaultTimeAfterDatePick = "00:00",
+  dropdownPosition = "left",
   ...inputFieldProps
 }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
@@ -5067,7 +5086,8 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
     setInternalValue,
     inputFieldProps: restInputFieldProps,
     insideInputFieldComponentProps,
-    isOpen
+    isOpen,
+    isFocused
   } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const readyHours = useMemo6(
     () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
@@ -5145,12 +5165,13 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
     {
       ...betterHtmlContextInternal.components.inputField?.style?.dateTime,
       type: "datetime-local",
-      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsxs14(
         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,
@@ -5159,89 +5180,104 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
           overflow: "hidden",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsxs14(Div_default.row, { gap: theme2.styles.space, children: [
-            /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
-            /* @__PURE__ */ jsxs14(
-              Div_default.row,
+          children: [
+            /* @__PURE__ */ jsx17(
+              Div_default,
               {
-                height: 276,
-                gap: theme2.styles.gap / 2,
-                paddingTop: topSpacing,
-                paddingBottom: theme2.styles.space / 2,
-                paddingRight: theme2.styles.space / 2,
-                children: [
-                  /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
-                    /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
-                    /* @__PURE__ */ jsx17(
-                      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__ */ jsx17(
-                            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__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
-                            },
-                            hour
-                          );
-                        })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
-                    /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
-                    /* @__PURE__ */ jsx17(
-                      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__ */ jsx17(
-                            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__ */ jsx17(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__ */ jsxs14(Div_default.row, { gap: theme2.styles.space, children: [
+              /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
+              /* @__PURE__ */ jsxs14(
+                Div_default.row,
+                {
+                  height: 276,
+                  gap: theme2.styles.gap / 2,
+                  paddingTop: topSpacing,
+                  paddingBottom: theme2.styles.space / 2,
+                  paddingRight: theme2.styles.space / 2,
+                  children: [
+                    /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
+                      /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
+                      /* @__PURE__ */ jsx17(
+                        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__ */ jsx17(
+                              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__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                              },
+                              hour
+                            );
+                          })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
+                      /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
+                      /* @__PURE__ */ jsx17(
+                        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__ */ jsx17(
+                              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__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                              },
+                              minute
+                            );
+                          })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          ]
         }
       ) : void 0,
       holderRef,
@@ -5252,7 +5288,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
     }
   );
 });
-InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...inputFieldProps }, ref) {
+InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesToRender, minTime, maxTime, dropdownPosition = "left", ...inputFieldProps }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.time,
@@ -5272,7 +5308,8 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
     setInternalValue,
     inputFieldProps: restInputFieldProps,
     insideInputFieldComponentProps,
-    isOpen
+    isOpen,
+    isFocused
   } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const readyHours = useMemo6(
     () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
@@ -5339,12 +5376,13 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
     {
       ...betterHtmlContextInternal.components.inputField?.style?.time,
       type: "time",
-      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsxs14(
         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,
@@ -5354,73 +5392,88 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
           overflowY: "auto",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsxs14(Div_default.row, { height: "100%", children: [
+          children: [
             /* @__PURE__ */ jsx17(
               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__ */ jsx17(
-                    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__ */ jsx17(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__ */ jsx17(
-              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__ */ jsx17(
-                    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__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
-                    },
-                    minute
-                  );
-                })
-              }
-            )
-          ] })
+            /* @__PURE__ */ jsxs14(Div_default.row, { height: "100%", children: [
+              /* @__PURE__ */ jsx17(
+                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__ */ jsx17(
+                      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__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                      },
+                      hour
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx17(
+                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__ */ jsx17(
+                      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__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                      },
+                      minute
+                    );
+                  })
+                }
+              )
+            ] })
+          ]
         }
       ) : void 0,
       holderRef,
@@ -5432,7 +5485,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
     }
   );
 });
-InputFieldComponent.color = forwardRef11(function Color4(inputFieldProps, ref) {
+InputFieldComponent.color = forwardRef11(function Color4({ ...inputFieldProps }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const { value, onChangeValue, ...props } = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.time,
@@ -7405,11 +7458,12 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   const firstRenderPassedRef = useRef8(false);
   const tabsRef = useRef8({});
   const [selectedTab, setSelectedTab] = useState13(() => {
-    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;
   });
@@ -7417,7 +7471,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
   const onClickTab = useCallback16(
     (tab) => {
-      setSelectedTab(tab.id);
+      setSelectedTab(tab);
       onChange?.(tab);
       if (urlQuery) {
         urlQuery.setQuery({
@@ -7428,11 +7482,11 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     [onChange, name, urlQuery]
   );
   const width = useMemo11(
-    () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
+    () => tabsRef.current[selectedTab.id]?.getBoundingClientRect().width ?? 0,
     [rerenderState, selectedTab]
   );
   const leftSpacing = useMemo11(() => {
-    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;
@@ -7455,7 +7509,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
         return oldValue.map(
           (item) => item.name === (name ?? defaultTabName) ? {
             ...item,
-            selectedTab
+            selectedTab: selectedTab.id
           } : item
         );
       } else {
@@ -7463,14 +7517,14 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
           ...oldValue,
           {
             name: name ?? defaultTabName,
-            selectedTab
+            selectedTab: selectedTab.id
           }
         ];
       }
     });
   }, [selectedTab, name]);
   useEffect14(() => {
-    tabsRef.current[selectedTab]?.scrollIntoView({
+    tabsRef.current[selectedTab.id]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
@@ -7482,16 +7536,19 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
       );
     };
   }, []);
+  useEffect14(() => {
+    onChange?.(selectedTab);
+  }, []);
   useImperativeHandle4(ref, () => {
     return {
-      selectedTab,
+      selectedTab: selectedTab.id,
       selectTab: onClickTab
     };
   }, [selectedTab, onClickTab]);
   return /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ jsxs22(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ jsx25(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__ */ jsxs22(
           Div_default,
           {
@@ -7757,18 +7814,11 @@ var MenuItemComponent = memo27(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 = useTheme29();
   const mediaQuery = useMediaQuery();
-  const location = reactRouterDomPluginConfig.useLocation();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const { colorTheme } = useBetterCoreContext11();
   const { activeItem, setActiveItem } = useSideMenuContext();
@@ -7920,6 +7970,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
             {
               item: child,
               backgroundColor: readyBackgroundColor,
+              location,
               onClick
             },
             child.text
@@ -7970,6 +8021,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
 var SideMenuComponent = function SideMenu({
   items,
   bottomItems,
+  location,
   topSpace = 0,
   logoAssetName,
   logoUrl,
@@ -8031,6 +8083,7 @@ var SideMenuComponent = function SideMenu({
           backgroundColor: readyBackgroundColor,
           activeItemColor,
           hoverItemColor,
+          location,
           onClick: onClickXButton
         },
         item.text
@@ -8053,6 +8106,7 @@ var SideMenuComponent = function SideMenu({
           backgroundColor: readyBackgroundColor,
           activeItemColor,
           hoverItemColor,
+          location,
           onClick: onClickXButton
         },
         item.text