@dbcdk/react-components 0.0.214 → 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/table/Table.cjs

@@ -113,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),
@@ -220,12 +223,17 @@ function Table({
     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: table_classes.cx(styles__default.default.tableScroll, scrollbarStyles__default.default.scrollArea),
+      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

@@ -106,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),
@@ -213,12 +216,17 @@ function Table({
     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: cx(styles.tableScroll, scrollbarStyles.scrollArea),
+      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/package.json

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