@spteck/react-controls-v2 2.0.2 → 2.0.3

package/dist/index.mjs

@@ -26864,20 +26864,26 @@ const AppDashboard = ({
   const layoutCacheKey = `${cacheKeyPrefix}-layout-settings`;
   const orderCacheKey = `${cacheKeyPrefix}-card-order`;
   const { getCachedData, setCachedData } = useIndexedDBCache();
-  const getData = (key) => getCachedData(key);
-  const setData = (key, value) => setCachedData(key, value, CACHE_EXPIRATION_DAYS * 24 * 60);
+  const getData = useCallback((key) => getCachedData(key), [getCachedData]);
+  const setData = useCallback(
+    (key, value) => setCachedData(key, value, CACHE_EXPIRATION_DAYS * 24 * 60),
+    [setCachedData]
+  );
   const {
     getCachedData: getOrderCachedData,
     setCachedData: setOrderCachedData
   } = useIndexedDBCache();
-  const getOrderData = (key) => getOrderCachedData(key);
-  const setOrderData = (key, value) => setOrderCachedData(key, value, CACHE_EXPIRATION_DAYS * 24 * 60);
+  const getOrderData = useCallback((key) => getOrderCachedData(key), [getOrderCachedData]);
+  const setOrderData = useCallback(
+    (key, value) => setOrderCachedData(key, value, CACHE_EXPIRATION_DAYS * 24 * 60),
+    [setOrderCachedData]
+  );
   const [cardContainers, setCardContainers] = useState([]);
   const [sizes, setSizes] = useState({});
   const dragItem = useRef(null);
   const dragOverItem = useRef(null);
   const containerRef = useRef(null);
-  React__default.useEffect(() => {
+  useEffect(() => {
     const initializeData = async () => {
       try {
         let orderedCards = cards;
@@ -26929,10 +26935,10 @@ const AppDashboard = ({
         setSizes(fallbackSizes);
       }
     };
-    initializeData();
-  }, [cards, enableCache, layoutCacheKey, orderCacheKey]);
+    void initializeData();
+  }, [cards, enableCache, layoutCacheKey, orderCacheKey, getData, getOrderData]);
   useEffect(() => {
-    if (!enableCache) return;
+    if (!enableCache || Object.keys(sizes).length === 0) return;
     const saveSizesToCache = async () => {
       try {
         await setData(layoutCacheKey, sizes);
@@ -26940,12 +26946,10 @@ const AppDashboard = ({
         console.warn("Failed to save dashboard layout to cache:", error);
       }
     };
-    if (Object.keys(sizes).length > 0) {
-      saveSizesToCache();
-    }
+    void saveSizesToCache();
   }, [sizes, enableCache, layoutCacheKey, setData]);
   useEffect(() => {
-    if (!enableCache) return;
+    if (!enableCache || cardContainers.length === 0) return;
     const saveOrderToCache = async () => {
       try {
         const cardOrder = cardContainers.map((card) => card.id);
@@ -26954,9 +26958,7 @@ const AppDashboard = ({
         console.warn("Failed to save dashboard order to cache:", error);
       }
     };
-    if (cardContainers.length > 0) {
-      saveOrderToCache();
-    }
+    void saveOrderToCache();
   }, [cardContainers, enableCache, orderCacheKey, setOrderData]);
   useEffect(() => {
     if (containerWidth <= MINIMUM_DASHBOARD_WIDTH) {
@@ -27029,21 +27031,16 @@ const AppDashboard = ({
     return cardContainers.map((cardContainer, idx) => {
       var _a3, _b2, _c2, _d2;
       const shouldShowZoom = cardContainer.showZoom !== false && showZoom;
-      let headerAction = void 0;
-      if (cardContainer.headerAction) {
-        headerAction = cardContainer.headerAction;
-      } else if (shouldShowZoom) {
-        headerAction = /* @__PURE__ */ jsx$2(
-          SelectZoom,
-          {
-            values: sizes[cardContainer.id] || defaultColsAndRowSpanBasedOnNumberColumns[cardContainer.id] || { spanCols: 1, spanRows: 1 },
-            maxCols: maxZoom,
-            maxRows: maxSpanRows,
-            IsOpen: false,
-            onChange: (v) => handleZoomSelect(cardContainer.id, v)
-          }
-        );
-      }
+      const headerAction = cardContainer.headerAction || (shouldShowZoom ? /* @__PURE__ */ jsx$2(
+        SelectZoom,
+        {
+          values: sizes[cardContainer.id] || defaultColsAndRowSpanBasedOnNumberColumns[cardContainer.id] || { spanCols: 1, spanRows: 1 },
+          maxCols: maxZoom,
+          maxRows: maxSpanRows,
+          IsOpen: false,
+          onChange: (v) => handleZoomSelect(cardContainer.id, v)
+        }
+      ) : void 0);
       return /* @__PURE__ */ jsx$2(
         "div",
         {
@@ -27062,7 +27059,7 @@ const AppDashboard = ({
             /* @__PURE__ */ jsx$2(
               CardHeader,
               {
-                header: /* @__PURE__ */ jsxs$1("div", { children: [
+                header: /* @__PURE__ */ jsxs$1(StackV2, { gap: "0px", children: [
                   /* @__PURE__ */ jsx$2(Text, { weight: "semibold", size: 400, children: cardContainer.cardTitle }),
                   cardContainer.cardDescription && /* @__PURE__ */ jsx$2(Text, { className: styles2.cardDescription, size: 200, children: cardContainer.cardDescription })
                 ] }),