react-better-html 1.1.247 → 1.1.249

package/dist/index.mjs

@@ -1580,6 +1580,8 @@ var Icon_default = { Icon: MemoizedIcon }.Icon;
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var PageHeaderComponent = forwardRef5(function PageHeader({
   icon,
+  iconColor,
+  iconSize = 20,
   image,
   imageUrl,
   imageSize = 60,
@@ -1610,7 +1612,7 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
       marginBottom: marginBottom ?? theme2.styles.space * 2,
       ref,
       children: [
-        icon && /* @__PURE__ */ jsx5(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
+        icon && /* @__PURE__ */ jsx5(Icon_default, { name: icon, size: iconSize, color: iconColor, flexShrink: 0 }),
         (image || imageUrl) && /* @__PURE__ */ jsx5(
           ImageTag,
           {
@@ -3286,25 +3288,53 @@ function findClosestNumber(numbers, target) {
 
 // src/utils/localStorage.ts
 function generateLocalStorage() {
-  return {
-    setItem: (name, value) => {
-      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.setItem"))
-        return void 0;
-      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
-        (plugin) => plugin.name === "localStorage"
+  const setItem = (name, value) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.setItem"))
+      return void 0;
+    const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+      (plugin) => plugin.name === "localStorage"
+    );
+    if (!localStoragePlugin2) {
+      throw new Error(
+        "`generateLocalStorage.setItem` function requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
       );
-      if (!localStoragePlugin2) {
-        throw new Error(
-          "`generateLocalStorage.setItem` function requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
-        );
-      }
-      const pluginConfig = localStoragePlugin2.getConfig();
-      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
-      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
-      const readyValue = encryptionEnabled ? encryptString(JSON.stringify(value)) : JSON.stringify(value);
-      if (value) localStorage.setItem(readyName.toString(), readyValue);
-      else localStorage.removeItem(readyName.toString());
-    },
+    }
+    const pluginConfig = localStoragePlugin2.getConfig();
+    const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+    const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+    const readyValue = encryptionEnabled ? encryptString(JSON.stringify(value)) : JSON.stringify(value);
+    if (value) localStorage.setItem(readyName.toString(), readyValue);
+    else localStorage.removeItem(readyName.toString());
+  };
+  const getAllItems = () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.getAllItems"))
+      return void 0;
+    const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+      (plugin) => plugin.name === "localStorage"
+    );
+    if (!localStoragePlugin2) {
+      throw new Error(
+        "`generateLocalStorage.getAllItems` function requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+      );
+    }
+    const pluginConfig = localStoragePlugin2.getConfig();
+    const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+    const items = {
+      ...localStorage
+    };
+    try {
+      return encryptionEnabled ? Object.entries(items).reduce((previousValue, currentValue) => {
+        const readyName = encryptString(currentValue[0]);
+        const item = JSON.parse(decryptString(currentValue[1]));
+        previousValue[readyName] = item;
+        return previousValue;
+      }, {}) : items;
+    } catch (error) {
+      return void 0;
+    }
+  };
+  return {
+    setItem,
     getItem: (name) => {
       if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.getItem"))
         return void 0;
@@ -3327,6 +3357,7 @@ function generateLocalStorage() {
         return void 0;
       }
     },
+    getAllItems,
     removeItem: (name) => {
       if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.removeItem"))
         return void 0;
@@ -3343,8 +3374,14 @@ function generateLocalStorage() {
       const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
       localStorage.removeItem(readyName.toString());
     },
-    removeAllItems: () => {
+    removeAllItems: (config) => {
+      const allItems = getAllItems();
       localStorage.clear();
+      if (config?.keepValues) {
+        config.keepValues.forEach((key) => {
+          setItem(key, allItems[key]);
+        });
+      }
     }
   };
 }
@@ -7365,23 +7402,23 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   const firstRenderPassedRef = useRef8(false);
   const tabsRef = useRef8({});
   const [selectedTab, setSelectedTab] = useState13(() => {
-    const selectedTabValue = tabs[0] ?? "";
+    const selectedTabId = tabs[0]?.id ?? "";
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
-      if (!tabQueryValue) return selectedTabValue;
-      if (tabs.includes(tabQueryValue)) return tabQueryValue;
+      if (!tabQueryValue) return selectedTabId;
+      if (tabs.some((tab) => tab.id === tabQueryValue)) return tabQueryValue;
     }
-    return selectedTabValue;
+    return selectedTabId;
   });
   const [rerenderState, setRerenderState] = useState13(0);
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
   const onClickTab = useCallback16(
     (tab) => {
-      setSelectedTab(tab);
+      setSelectedTab(tab.id);
       onChange?.(tab);
       if (urlQuery) {
         urlQuery.setQuery({
-          [name ?? defaultTabName]: tab
+          [name ?? defaultTabName]: tab.id
         });
       }
     },
@@ -7392,7 +7429,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     [rerenderState, selectedTab]
   );
   const leftSpacing = useMemo11(() => {
-    const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
+    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTab);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
       if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
@@ -7451,7 +7488,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   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 === selectedTab;
+        const selected = tab.id === selectedTab;
         return /* @__PURE__ */ jsxs22(
           Div_default,
           {
@@ -7470,10 +7507,10 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
             isTabAccessed: true,
             onClickWithValue: onClickTab,
             ref: (ref2) => {
-              tabsRef.current[tab] = ref2;
+              tabsRef.current[tab.id] = ref2;
             },
             children: [
-              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ jsx25(
+              componentsState.tabs.tabsWithDots.includes(tab.id) && /* @__PURE__ */ jsx25(
                 Div_default,
                 {
                   position: "absolute",
@@ -7493,12 +7530,12 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
                   color: !selected ? theme2.colors.textSecondary : style === "box" ? theme2.colors.base : void 0,
                   transition: theme2.styles.transition,
                   whiteSpace: "nowrap",
-                  children: tab
+                  children: tab.label ?? tab.id
                 }
               )
             ]
           },
-          tab
+          tab.id
         );
       }) }),
       style !== "box" && /* @__PURE__ */ jsx25(
@@ -7517,7 +7554,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     children && /* @__PURE__ */ jsx25(Div_default, { width: "100%", children })
   ] });
 });
-TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
+TabsComponent.content = function Content({ tabId, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
   const thisTabGroupData = useMemo11(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
@@ -7525,14 +7562,16 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isIni
   );
   useEffect14(() => {
     if (tabWithDot) {
-      componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
+      componentsState.tabs.setTabsWithDots?.(
+        (oldValue) => oldValue.includes(tabId) ? oldValue : [...oldValue, tabId]
+      );
     } else {
       componentsState.tabs.setTabsWithDots?.(
-        (oldValue) => oldValue.includes(tab) ? oldValue.filter((tab2) => tab2 !== tab2) : oldValue
+        (oldValue) => oldValue.includes(tabId) ? oldValue.filter((tab) => tab !== tabId) : oldValue
       );
     }
   }, [tabWithDot]);
-  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ jsx25(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tabId : isInitialTab) ? /* @__PURE__ */ jsx25(Div_default, { width: "100%", children }) : void 0;
 };
 var Tabs2 = memo25(TabsComponent);
 Tabs2.content = TabsComponent.content;