@spteck/react-controls-v2 2.0.3 → 2.0.5

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...",
@@ -8791,7 +8808,7 @@ const DataGridV2 = React.forwardRef((props, ref) => {
         style: dataGridBodyStyles,
         children: [
           /* @__PURE__ */ jsx$2(DataGridHeader$1, { children: /* @__PURE__ */ jsx$2(DataGridRow$1, { children: ({ renderHeaderCell }) => /* @__PURE__ */ jsx$2(DataGridHeaderCell$1, { children: renderHeaderCell() }) }) }),
-          /* @__PURE__ */ jsx$2(
+          /* @__PURE__ */ jsx$2("div", { className: mergeClasses(scrollbarClassName), children: /* @__PURE__ */ jsx$2(
             DataGridBody$1,
             {
               itemSize: virtualizedItemSize,
@@ -8800,8 +8817,6 @@ const DataGridV2 = React.forwardRef((props, ref) => {
               listProps: {
                 onItemsRendered: handleItemsRendered
               },
-              className: dataGridBodyClassName,
-              style: dataGridBodyStyles,
               children: (row, style) => (() => {
                 const item = row.item;
                 const idx = itemIndexMap.get(item) ?? items.indexOf(item);
@@ -8827,7 +8842,7 @@ const DataGridV2 = React.forwardRef((props, ref) => {
                 );
               })()
             }
-          )
+          ) })
         ]
       },
       gridKey
@@ -26825,8 +26840,7 @@ const useDashboardStyles = () => {
       minHeight: "280px"
     }),
     cardDescription: css$1({
-      color: `${tokens.colorNeutralForeground2}`,
-      marginTop: "4px"
+      color: `${tokens.colorNeutralForeground2}`
     }),
     cardWrapper: css$1({
       position: "relative",