react-better-html 1.1.260 → 1.1.262

package/dist/index.d.mts

@@ -519,12 +519,12 @@ type TabsProps = {
     style?: "default" | "borderRadiusTop" | "box";
     gap?: number;
     noBottomLine?: boolean;
-    onChange?: (tab: Tab) => void;
+    onChange?: (tab: Tab["id"]) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
 type TabsRef = {
     selectedTab: Tab["id"];
-    selectTab: (tab: Tab) => void;
+    selectTab: (tabId: Tab["id"]) => void;
 };
 type TabsComponent = {
     (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
@@ -802,6 +802,7 @@ type FormProps = {
     renderActionButtons?: React.ReactNode;
     onClickCancel?: () => void;
     onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+    id?: React.ComponentProps<"form">["id"];
     children?: React.ReactNode;
 } & ComponentMarginProps;
 type FormComponentType = {

package/dist/index.d.ts

@@ -519,12 +519,12 @@ type TabsProps = {
     style?: "default" | "borderRadiusTop" | "box";
     gap?: number;
     noBottomLine?: boolean;
-    onChange?: (tab: Tab) => void;
+    onChange?: (tab: Tab["id"]) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
 type TabsRef = {
     selectedTab: Tab["id"];
-    selectTab: (tab: Tab) => void;
+    selectTab: (tabId: Tab["id"]) => void;
 };
 type TabsComponent = {
     (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
@@ -802,6 +802,7 @@ type FormProps = {
     renderActionButtons?: React.ReactNode;
     onClickCancel?: () => void;
     onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+    id?: React.ComponentProps<"form">["id"];
     children?: React.ReactNode;
 } & ComponentMarginProps;
 type FormComponentType = {

package/dist/index.js

@@ -5989,6 +5989,7 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
   renderActionButtons,
   onClickCancel,
   onSubmit,
+  id,
   children,
   ...props
 }, ref) {
@@ -6001,7 +6002,7 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, id, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react23.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react23.Fragment, { children: [
       child,
       index < import_react23.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -7502,41 +7503,41 @@ 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 tabsGap = gap ?? (style === "box" ? theme2.styles.gap / 2 : 0);
-  const [selectedTab, setSelectedTab] = (0, import_react29.useState)(() => {
-    const selectedTabId = tabs[0];
+  const [selectedTabId, setSelectedTabId] = (0, import_react29.useState)(() => {
+    const selectedTabId2 = tabs[0];
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
-      if (!tabQueryValue) return selectedTabId;
+      if (!tabQueryValue) return selectedTabId2.id;
       const queryTab = tabs.find((tab) => tab.id === tabQueryValue);
-      if (queryTab) return queryTab;
+      if (queryTab) return queryTab.id;
     }
-    return selectedTabId;
+    return selectedTabId2.id;
   });
   const [rerenderState, setRerenderState] = (0, import_react29.useState)(0);
   const onClickTab = (0, import_react29.useCallback)(
-    (tab) => {
-      setSelectedTab(tab);
-      onChange?.(tab);
+    (tabId) => {
+      setSelectedTabId(tabId);
+      onChange?.(tabId);
       if (urlQuery) {
         urlQuery.setQuery({
-          [name ?? defaultTabName]: tab.id
+          [name ?? defaultTabName]: tabId
         });
       }
     },
     [onChange, name, urlQuery]
   );
   const width = (0, import_react29.useMemo)(
-    () => tabsRef.current[selectedTab.id]?.getBoundingClientRect().width ?? 0,
-    [rerenderState, selectedTab]
+    () => tabsRef.current[selectedTabId]?.getBoundingClientRect().width ?? 0,
+    [rerenderState, selectedTabId]
   );
   const leftSpacing = (0, import_react29.useMemo)(() => {
-    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTab.id);
+    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTabId);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
       if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
     });
     return spacing;
-  }, [selectedTab, tabs, tabsGap]);
+  }, [selectedTabId, tabs, tabsGap]);
   (0, import_react29.useEffect)(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
@@ -7553,7 +7554,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
         return oldValue.map(
           (item) => item.name === (name ?? defaultTabName) ? {
             ...item,
-            selectedTab: selectedTab.id
+            selectedTab: selectedTabId
           } : item
         );
       } else {
@@ -7561,18 +7562,18 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
           ...oldValue,
           {
             name: name ?? defaultTabName,
-            selectedTab: selectedTab.id
+            selectedTab: selectedTabId
           }
         ];
       }
     });
-  }, [selectedTab, name]);
+  }, [selectedTabId, name]);
   (0, import_react29.useEffect)(() => {
-    tabsRef.current[selectedTab.id]?.scrollIntoView({
+    tabsRef.current[selectedTabId]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
-  }, [selectedTab]);
+  }, [selectedTabId]);
   (0, import_react29.useEffect)(() => {
     return () => {
       componentsState.tabs.setTabGroups(
@@ -7581,18 +7582,18 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
     };
   }, []);
   (0, import_react29.useEffect)(() => {
-    onChange?.(selectedTab);
+    onChange?.(selectedTabId);
   }, []);
   (0, import_react29.useImperativeHandle)(ref, () => {
     return {
-      selectedTab: selectedTab.id,
+      selectedTab: selectedTabId,
       selectTab: onClickTab
     };
-  }, [selectedTab, onClickTab]);
+  }, [selectedTabId, 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.id;
+        const selected = tab.id === selectedTabId;
         return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Div_default,
           {
@@ -7607,7 +7608,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
             filterHover: colorTheme === "dark" ? style === "box" ? "brightness(1.2)" : "brightness(2)" : "brightness(0.9)",
             paddingInline: theme2.styles.space,
             paddingBlock: theme2.styles.gap,
-            value: tab,
+            value: tab.id,
             cursor: "pointer",
             isTabAccessed: true,
             onClickWithValue: onClickTab,