@dbcdk/react-components 0.0.213 → 0.0.214

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs

@@ -11,11 +11,13 @@ var SidebarItems = require('../../../../components/sidebar/components/sidebar-it
 var SidenavFiltering = require('../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering');
 var SidebarProvider = require('../../../../components/sidebar/providers/SidebarProvider');
 var styles = require('./SidebarContainer.module.css');
+var scrollbarStyles = require('../../../../styles/HoverScrollbar.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var SidenavFiltering__default = /*#__PURE__*/_interopDefault(SidenavFiltering);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
+var scrollbarStyles__default = /*#__PURE__*/_interopDefault(scrollbarStyles);
 
 function clamp(n, min, max) {
   return Math.max(min, Math.min(max, n));
@@ -163,7 +165,7 @@ function SidebarContainer({
     {
       ref: containerRef,
       role: "complementary",
-      className: `${styles__default.default.container} ${isSidebarCollapsed ? styles__default.default.collapsed : ""} ${isResizing ? styles__default.default.resizing : ""}`,
+      className: `${scrollbarStyles__default.default.region} ${scrollbarStyles__default.default.scrollArea} ${styles__default.default.container} ${isSidebarCollapsed ? styles__default.default.collapsed : ""} ${isResizing ? styles__default.default.resizing : ""}`,
       style: containerStyle,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.productHeader, children: [
@@ -184,9 +186,9 @@ function SidebarContainer({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.content} ${scrollbarStyles__default.default.scrollArea}`, children: [
           !hideSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.filter, children: /* @__PURE__ */ jsxRuntime.jsx(SidenavFiltering__default.default, { placeholder: searchPlaceholder, showSettings }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.links, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.links} ${scrollbarStyles__default.default.scrollArea}`, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
         ] }),
         footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footerSlot, children: footer }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -9,6 +9,7 @@ import { SidebarItems } from '../../../../components/sidebar/components/sidebar-
 import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
 import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
 import styles from './SidebarContainer.module.css';
+import scrollbarStyles from '../../../../styles/HoverScrollbar.module.css';
 
 function clamp(n, min, max) {
   return Math.max(min, Math.min(max, n));
@@ -156,7 +157,7 @@ function SidebarContainer({
     {
       ref: containerRef,
       role: "complementary",
-      className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ""} ${isResizing ? styles.resizing : ""}`,
+      className: `${scrollbarStyles.region} ${scrollbarStyles.scrollArea} ${styles.container} ${isSidebarCollapsed ? styles.collapsed : ""} ${isResizing ? styles.resizing : ""}`,
       style: containerStyle,
       children: [
         /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsxs("div", { className: styles.productHeader, children: [
@@ -177,9 +178,9 @@ function SidebarContainer({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${styles.content} ${scrollbarStyles.scrollArea}`, children: [
           !hideSearch && /* @__PURE__ */ jsx("div", { className: styles.filter, children: /* @__PURE__ */ jsx(SidenavFiltering, { placeholder: searchPlaceholder, showSettings }) }),
-          /* @__PURE__ */ jsx("div", { className: styles.links, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
+          /* @__PURE__ */ jsx("div", { className: `${styles.links} ${scrollbarStyles.scrollArea}`, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
         ] }),
         footer && /* @__PURE__ */ jsx("div", { className: styles.footerSlot, children: footer }),
         /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -15,46 +15,6 @@
     inline-size var(--transition-fast) var(--ease-standard);
 }
 
-/* Keep native scrolling visible without competing with navigation content. */
-:is(.container, .content, .links) {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border-subtle) transparent;
-}
-
-:is(.container, .content, .links):is(:hover, :focus-within) {
-  scrollbar-color: var(--color-border-default) transparent;
-}
-
-/* Non-auto standard properties override WebKit thumb styling in Chromium. */
-@supports selector(::-webkit-scrollbar) {
-  :is(.container, .content, .links),
-  :is(.container, .content, .links):is(:hover, :focus-within) {
-    scrollbar-width: auto;
-    scrollbar-color: auto;
-  }
-}
-
-:is(.container, .content, .links)::-webkit-scrollbar {
-  width: calc(var(--spacing-xxs) + 2 * var(--border-width-thin));
-  height: calc(var(--spacing-xxs) + 2 * var(--border-width-thin));
-}
-
-:is(.container, .content, .links)::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-:is(.container, .content, .links)::-webkit-scrollbar-thumb {
-  background-color: var(--color-border-subtle);
-  background-clip: padding-box;
-  border: var(--border-width-thin) solid transparent;
-  border-radius: var(--border-radius-default);
-}
-
-:is(.container, .content, .links)::-webkit-scrollbar-thumb:hover,
-:is(.container, .content, .links):focus-within::-webkit-scrollbar-thumb {
-  background-color: var(--color-border-default);
-}
-
 .sidebarIcon {
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);

package/dist/components/table/Table.cjs

@@ -7,6 +7,7 @@ var Pagination = require('../../components/pagination/Pagination');
 var useViewportFill = require('../../hooks/useViewportFill');
 var refs_utils = require('../../utils/refs.utils');
 var columnLayout_utils = require('./columnLayout.utils');
+var scrollbarStyles = require('../../styles/HoverScrollbar.module.css');
 var EmptyState = require('./components/empty-state/EmptyState');
 var TableHeaderSettings = require('./components/table-settings/TableHeaderSettings');
 var TableBody = require('./components/TableBody');
@@ -20,6 +21,7 @@ var tableSettings_utils = require('./tableSettings.utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var scrollbarStyles__default = /*#__PURE__*/_interopDefault(scrollbarStyles);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 const DEFAULT_SKELETON_ROWS = 10;
@@ -211,6 +213,7 @@ function Table({
   ) : null;
   const tableClassName = table_classes.cx(
     styles__default.default.tableRoot,
+    scrollbarStyles__default.default.region,
     styles__default.default[variant],
     styles__default.default[size],
     (measuringLayout || distributeWidths && !distributedLayout) && styles__default.default.measuringLayout,
@@ -222,7 +225,7 @@ function Table({
     "div",
     {
       ref: setTableRootRef,
-      className: styles__default.default.tableScroll,
+      className: table_classes.cx(styles__default.default.tableScroll, scrollbarStyles__default.default.scrollArea),
       style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
       children: !loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
         "table",

package/dist/components/table/Table.js

@@ -5,6 +5,7 @@ import { Pagination } from '../../components/pagination/Pagination';
 import { useViewportFill } from '../../hooks/useViewportFill';
 import { mergeRefs } from '../../utils/refs.utils';
 import { usesDistributedWidths, distributeColumnWidths, buildColumnTracks } from './columnLayout.utils';
+import scrollbarStyles from '../../styles/HoverScrollbar.module.css';
 import { TableEmptyState } from './components/empty-state/EmptyState';
 import { TableHeaderSettings } from './components/table-settings/TableHeaderSettings';
 import { TableBody } from './components/TableBody';
@@ -205,6 +206,7 @@ function Table({
   ) : null;
   const tableClassName = cx(
     styles.tableRoot,
+    scrollbarStyles.region,
     styles[variant],
     styles[size],
     (measuringLayout || distributeWidths && !distributedLayout) && styles.measuringLayout,
@@ -216,7 +218,7 @@ function Table({
     "div",
     {
       ref: setTableRootRef,
-      className: styles.tableScroll,
+      className: cx(styles.tableScroll, scrollbarStyles.scrollArea),
       style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
       children: !loading && !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxs(
         "table",

package/dist/styles/HoverScrollbar.module.css

@@ -0,0 +1,46 @@
+/* Put region on the hover/focus boundary and scrollArea on each native scroller.
+   They can share an element. Keep overflow, sizing and gutter policy with callers. */
+.region {
+  --hover-scrollbar-thumb: transparent;
+}
+
+.region:is(:hover, :focus-within) {
+  --hover-scrollbar-thumb: var(--color-border-subtle);
+}
+
+.scrollArea {
+  /* Use the regular native width where explicit scrollbar sizing is unsupported. */
+  scrollbar-width: auto;
+  scrollbar-color: var(--hover-scrollbar-thumb, transparent) transparent;
+}
+
+/* Non-auto standard values suppress WebKit styling and can leave native
+   overlay scrollbars hidden until scrolling starts in Chromium/macOS. */
+@supports selector(::-webkit-scrollbar) {
+  .scrollArea {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+}
+
+.scrollArea::-webkit-scrollbar {
+  width: var(--spacing-sm);
+  height: var(--spacing-sm);
+}
+
+.scrollArea::-webkit-scrollbar-track,
+.scrollArea::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--hover-scrollbar-thumb, transparent);
+  background-clip: padding-box;
+  /* A 12px track with 3px transparent edges leaves a 6px visible thumb. */
+  border: calc(var(--spacing-sm) / 4) solid transparent;
+  border-radius: var(--border-radius-md);
+}
+
+.scrollArea::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-border-default);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.213",
+  "version": "0.0.214",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",