@spteck/react-controls-v2 2.0.2 → 2.0.4

package/dist/index.mjs

@@ -8589,6 +8589,23 @@ const DataGrid = (props) => {
     }
   ) });
 };
+const scrollbarClassName = css$1({
+  "&::-webkit-scrollbar": {
+    width: "5px",
+    height: "5px"
+  },
+  "&::-webkit-scrollbar-track": {
+    background: tokens.colorNeutralBackground4,
+    borderRadius: tokens.borderRadiusMedium
+  },
+  "&::-webkit-scrollbar-thumb": {
+    background: tokens.colorBrandBackground,
+    borderRadius: tokens.borderRadiusMedium
+  },
+  "&::-webkit-scrollbar-thumb:hover": {
+    background: tokens.colorBrandBackgroundHover
+  }
+});
 const DataGridV2 = React.forwardRef((props, ref) => {
   const {
     columns,
@@ -8766,7 +8783,7 @@ const DataGridV2 = React.forwardRef((props, ref) => {
     () => ({ overflowX: "auto", overflowY: "hidden", position: "relative" }),
     []
   );
-  return /* @__PURE__ */ jsxs$1("div", { style: hostStyle, children: [
+  return /* @__PURE__ */ jsxs$1("div", { style: hostStyle, className: scrollbarClassName, children: [
     isLoadingData && /* @__PURE__ */ jsx$2("div", { style: { display: "flex", gap: 8, alignItems: "center", padding: 8 }, children: React.isValidElement(isLoadingDataMessage) ? isLoadingDataMessage : /* @__PURE__ */ jsxs$1(Spinner, { size: "extra-tiny", children: [
       " ",
       isLoadingDataMessage ?? "Loading data...",
@@ -8800,8 +8817,7 @@ const DataGridV2 = React.forwardRef((props, ref) => {
               listProps: {
                 onItemsRendered: handleItemsRendered
               },
-              className: dataGridBodyClassName,
-              style: dataGridBodyStyles,
+              className: mergeClasses(scrollbarClassName),
               children: (row, style) => (() => {
                 const item = row.item;
                 const idx = itemIndexMap.get(item) ?? items.indexOf(item);
@@ -26825,8 +26841,7 @@ const useDashboardStyles = () => {
       minHeight: "280px"
     }),
     cardDescription: css$1({
-      color: `${tokens.colorNeutralForeground2}`,
-      marginTop: "4px"
+      color: `${tokens.colorNeutralForeground2}`
     }),
     cardWrapper: css$1({
       position: "relative",
@@ -26864,20 +26879,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 +26950,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 +26961,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 +26973,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 +27046,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 +27074,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 })
                 ] }),