@dbcdk/react-components 0.0.213 → 0.0.215

package/dist/components/filter-field/FilterField.module.css

@@ -201,6 +201,13 @@
   box-shadow: inset 0 0 0 1px var(--color-field-focus);
 }
 
+/* The control group clips its rounded corners, so the focus ring follows them instead of being
+   cut off. The value is always the group's last part. */
+.valueWrapper {
+  border-start-end-radius: calc(var(--border-radius-default) - 1px);
+  border-end-end-radius: calc(var(--border-radius-default) - 1px);
+}
+
 .invalid .valueWrapper:focus-within {
   box-shadow: inset 0 0 0 1px var(--color-status-danger-border);
 }

package/dist/components/forms/input-container/InputContainer.cjs

@@ -56,11 +56,11 @@ function InputContainer({
       "div",
       {
         "data-modified": modified ? "true" : void 0,
-        className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles__default.default.inputContainer}`,
+        className: "dbc-flex dbc-flex-column dbc-gap-xs",
         style: { width: fullWidth ? "100%" : void 0 },
         children: [
           renderLabelRow,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-xxs", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.control} dbc-flex dbc-flex-column dbc-gap-xxs`, children: [
             children,
             renderMessageRow
           ] })

package/dist/components/forms/input-container/InputContainer.js

@@ -50,11 +50,11 @@ function InputContainer({
       "div",
       {
         "data-modified": modified ? "true" : void 0,
-        className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles.inputContainer}`,
+        className: "dbc-flex dbc-flex-column dbc-gap-xs",
         style: { width: fullWidth ? "100%" : void 0 },
         children: [
           renderLabelRow,
-          /* @__PURE__ */ jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-xxs", children: [
+          /* @__PURE__ */ jsxs("div", { className: `${styles.control} dbc-flex dbc-flex-column dbc-gap-xxs`, children: [
             children,
             renderMessageRow
           ] })

package/dist/components/forms/input-container/InputContainer.module.css

@@ -91,3 +91,12 @@
   align-items: flex-start;
   flex-shrink: 0;
 }
+
+/* Fills the container the way the control did before it was wrapped, so components that size
+   the container, e.g. FilterField, still size the control. */
+.control {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}

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;
@@ -111,7 +113,10 @@ function Table({
     () => tableWidth == null && (columnLayout_utils.usesDistributedWidths(visibleColumns) || showHeader && hasHeaderActions),
     [tableWidth, visibleColumns, showHeader, hasHeaderActions]
   );
-  const availableWidth = useElementWidth.useElementWidth(internalTableRootRef, distributeWidths);
+  const availableWidth = useElementWidth.useElementWidth(
+    internalTableRootRef,
+    distributeWidths || tableWidth != null
+  );
   const distributedLayout = react.useMemo(
     () => distributeWidths && availableWidth != null ? columnLayout_utils.distributeColumnWidths({
       tracks: columnLayout_utils.buildColumnTracks(visibleColumns),
@@ -211,18 +216,24 @@ 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,
     getRowSeverity && styles__default.default.severityTable
   );
   const resolvedTableWidth = tableWidth != null ? tableWidth : distributedLayout == null ? void 0 : distributedLayout.totalWidth;
+  const fitsWidth = resolvedTableWidth != null && availableWidth != null && resolvedTableWidth <= availableWidth;
   const tableElementClassName = table_classes.cx(styles__default.default.tableElement, striped && "dbc-table--striped");
   const tableShell = /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tableClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: setTableRootRef,
-      className: styles__default.default.tableScroll,
+      className: table_classes.cx(
+        styles__default.default.tableScroll,
+        scrollbarStyles__default.default.scrollArea,
+        fitsWidth && styles__default.default.tableScrollFits
+      ),
       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';
@@ -105,7 +106,10 @@ function Table({
     () => tableWidth == null && (usesDistributedWidths(visibleColumns) || showHeader && hasHeaderActions),
     [tableWidth, visibleColumns, showHeader, hasHeaderActions]
   );
-  const availableWidth = useElementWidth(internalTableRootRef, distributeWidths);
+  const availableWidth = useElementWidth(
+    internalTableRootRef,
+    distributeWidths || tableWidth != null
+  );
   const distributedLayout = useMemo(
     () => distributeWidths && availableWidth != null ? distributeColumnWidths({
       tracks: buildColumnTracks(visibleColumns),
@@ -205,18 +209,24 @@ function Table({
   ) : null;
   const tableClassName = cx(
     styles.tableRoot,
+    scrollbarStyles.region,
     styles[variant],
     styles[size],
     (measuringLayout || distributeWidths && !distributedLayout) && styles.measuringLayout,
     getRowSeverity && styles.severityTable
   );
   const resolvedTableWidth = tableWidth != null ? tableWidth : distributedLayout == null ? void 0 : distributedLayout.totalWidth;
+  const fitsWidth = resolvedTableWidth != null && availableWidth != null && resolvedTableWidth <= availableWidth;
   const tableElementClassName = cx(styles.tableElement, striped && "dbc-table--striped");
   const tableShell = /* @__PURE__ */ jsx("div", { ...rest, className: tableClassName, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref: setTableRootRef,
-      className: styles.tableScroll,
+      className: cx(
+        styles.tableScroll,
+        scrollbarStyles.scrollArea,
+        fitsWidth && styles.tableScrollFits
+      ),
       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/components/table/Table.module.css

@@ -110,6 +110,13 @@
   -webkit-overflow-scrolling: touch;
 }
 
+/* The columns fit: a horizontal scrollbar could only come from sub-pixel
+   rounding (Safari at page zoom), and showing it would change the measured
+   size and trigger another layout pass. */
+.tableScrollFits {
+  overflow-x: hidden;
+}
+
 .tableElement {
   inline-size: 100%;
   border-collapse: separate;

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.215",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",