@dbcdk/react-components 0.0.108 → 0.0.110

package/dist/components/overlay/tooltip/Tooltip.cjs

@@ -4,6 +4,21 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var useTooltipTrigger = require('./useTooltipTrigger');
 
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+function composeHandlers(childHandler, tooltipHandler) {
+  return (event) => {
+    childHandler == null ? void 0 : childHandler(event);
+    tooltipHandler == null ? void 0 : tooltipHandler(event);
+  };
+}
 function Tooltip({
   children,
   content,
@@ -11,10 +26,9 @@ function Tooltip({
   open,
   offset = 8,
   delayOpenMs,
-  delayCloseMs,
-  className,
-  ...rest
+  delayCloseMs
 }) {
+  var _a;
   const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
     content,
     placement,
@@ -23,12 +37,20 @@ function Tooltip({
     delayOpenMs,
     delayCloseMs
   });
-  const rootClass = react.useMemo(
-    () => ["TooltipContainer", className].filter(Boolean).join(" "),
-    [className]
-  );
   if (!content) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "TooltipTrigger", tabIndex: 0, ...triggerProps, children }) });
+  const child = children;
+  const childProps = child.props;
+  const childRef = (_a = childProps.ref) != null ? _a : child.ref;
+  return react.cloneElement(child, {
+    ...childProps,
+    ref: mergeRefs(childRef, triggerProps.ref),
+    onPointerEnter: composeHandlers(childProps.onPointerEnter, triggerProps.onPointerEnter),
+    onPointerLeave: composeHandlers(childProps.onPointerLeave, triggerProps.onPointerLeave),
+    onPointerDown: composeHandlers(childProps.onPointerDown, triggerProps.onPointerDown),
+    onFocus: composeHandlers(childProps.onFocus, triggerProps.onFocus),
+    onBlur: composeHandlers(childProps.onBlur, triggerProps.onBlur),
+    "aria-describedby": [childProps["aria-describedby"], triggerProps["aria-describedby"]].filter(Boolean).join(" ") || void 0
+  });
 }
 
 exports.Tooltip = Tooltip;

package/dist/components/overlay/tooltip/Tooltip.d.ts

@@ -1,13 +1,12 @@
-import { type ReactNode, type HTMLAttributes, type ReactElement } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 import { TooltipPlacement } from './TooltipProvider';
-export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
-    children: ReactNode;
+export interface TooltipProps {
+    children: ReactElement;
     content: ReactNode;
     placement?: TooltipPlacement;
     open?: boolean;
     offset?: number;
     delayOpenMs?: number;
     delayCloseMs?: number;
-    className?: string;
 }
-export declare function Tooltip({ children, content, placement, open, offset, delayOpenMs, delayCloseMs, className, ...rest }: TooltipProps): ReactElement;
+export declare function Tooltip({ children, content, placement, open, offset, delayOpenMs, delayCloseMs, }: TooltipProps): ReactElement;

package/dist/components/overlay/tooltip/Tooltip.js

@@ -1,7 +1,22 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { cloneElement } from 'react';
 import { useTooltipTrigger } from './useTooltipTrigger';
 
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+function composeHandlers(childHandler, tooltipHandler) {
+  return (event) => {
+    childHandler == null ? void 0 : childHandler(event);
+    tooltipHandler == null ? void 0 : tooltipHandler(event);
+  };
+}
 function Tooltip({
   children,
   content,
@@ -9,10 +24,9 @@ function Tooltip({
   open,
   offset = 8,
   delayOpenMs,
-  delayCloseMs,
-  className,
-  ...rest
+  delayCloseMs
 }) {
+  var _a;
   const { triggerProps } = useTooltipTrigger({
     content,
     placement,
@@ -21,12 +35,20 @@ function Tooltip({
     delayOpenMs,
     delayCloseMs
   });
-  const rootClass = useMemo(
-    () => ["TooltipContainer", className].filter(Boolean).join(" "),
-    [className]
-  );
   if (!content) return /* @__PURE__ */ jsx(Fragment, { children });
-  return /* @__PURE__ */ jsx("span", { className: rootClass, ...rest, children: /* @__PURE__ */ jsx("span", { className: "TooltipTrigger", tabIndex: 0, ...triggerProps, children }) });
+  const child = children;
+  const childProps = child.props;
+  const childRef = (_a = childProps.ref) != null ? _a : child.ref;
+  return cloneElement(child, {
+    ...childProps,
+    ref: mergeRefs(childRef, triggerProps.ref),
+    onPointerEnter: composeHandlers(childProps.onPointerEnter, triggerProps.onPointerEnter),
+    onPointerLeave: composeHandlers(childProps.onPointerLeave, triggerProps.onPointerLeave),
+    onPointerDown: composeHandlers(childProps.onPointerDown, triggerProps.onPointerDown),
+    onFocus: composeHandlers(childProps.onFocus, triggerProps.onFocus),
+    onBlur: composeHandlers(childProps.onBlur, triggerProps.onBlur),
+    "aria-describedby": [childProps["aria-describedby"], triggerProps["aria-describedby"]].filter(Boolean).join(" ") || void 0
+  });
 }
 
 export { Tooltip };

package/dist/components/table/Table.cjs

@@ -49,6 +49,7 @@ function Table({
   showGoToPage,
   showPageSize,
   pageSizeOptions,
+  showHeader = true,
   getRowSeverity,
   onRowClick,
   onRowMouseEnter,
@@ -143,6 +144,7 @@ function Table({
         {
           className: styles__default.default.tableElement,
           "aria-rowcount": data.length,
+          "data-show-header": showHeader,
           style: tableWidth != null ? { width: tableWidth } : void 0,
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
@@ -155,7 +157,7 @@ function Table({
                 column.id
               ))
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            showHeader && /* @__PURE__ */ jsxRuntime.jsx(
               TableHeader.TableHeader,
               {
                 columns: visibleColumns,

package/dist/components/table/Table.d.ts

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -43,6 +43,7 @@ function Table({
   showGoToPage,
   showPageSize,
   pageSizeOptions,
+  showHeader = true,
   getRowSeverity,
   onRowClick,
   onRowMouseEnter,
@@ -137,6 +138,7 @@ function Table({
         {
           className: styles.tableElement,
           "aria-rowcount": data.length,
+          "data-show-header": showHeader,
           style: tableWidth != null ? { width: tableWidth } : void 0,
           children: [
             /* @__PURE__ */ jsxs("colgroup", { children: [
@@ -149,7 +151,7 @@ function Table({
                 column.id
               ))
             ] }),
-            /* @__PURE__ */ jsx(
+            showHeader && /* @__PURE__ */ jsx(
               TableHeader,
               {
                 columns: visibleColumns,

package/dist/components/table/Table.module.css

@@ -71,6 +71,10 @@
 .primary {
 }
 
+.embedded .cell {
+  border-block-end: none;
+}
+
 .embedded {
   --table-component-header-bg: transparent;
   --table-component-header-fg: var(--color-fg-subtle);
@@ -138,7 +142,7 @@
   min-block-size: 0;
 }
 
-.body .row:first-child .cell {
+[data-show-header='true'] .body .row:first-child .cell {
   border-block-start: var(--spacing-xs) solid var(--table-component-row-bg);
 }
 
@@ -324,6 +328,17 @@
   word-break: normal;
 }
 
+.allowOverflow {
+  overflow: visible;
+}
+
+.allowOverflow .cellContent,
+.allowOverflow .cellValueEllipsis,
+.allowOverflow .cellValueNoEllipsis {
+  overflow: visible;
+  text-overflow: clip;
+}
+
 .thInner {
   display: flex;
   align-items: center;
@@ -485,15 +500,25 @@
   text-overflow: ellipsis;
 }
 
-.cellContent[data-align='left'] .cellValueEllipsis {
+.cellValueNoEllipsis {
+  display: block;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+}
+
+.cellContent[data-align='left'] .cellValueEllipsis,
+.cellContent[data-align='left'] .cellValueNoEllipsis {
   text-align: left;
 }
 
-.cellContent[data-align='center'] .cellValueEllipsis {
+.cellContent[data-align='center'] .cellValueEllipsis,
+.cellContent[data-align='center'] .cellValueNoEllipsis {
   text-align: center;
 }
 
-.cellContent[data-align='right'] .cellValueEllipsis {
+.cellContent[data-align='right'] .cellValueEllipsis,
+.cellContent[data-align='right'] .cellValueNoEllipsis {
   text-align: right;
 }
 

package/dist/components/table/Table.types.d.ts

@@ -59,6 +59,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     showGoToPage?: boolean;
     showPageSize?: boolean;
     pageSizeOptions?: number[];
+    showHeader?: boolean;
     getRowSeverity?: (row: T) => Severity | undefined;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;

package/dist/components/table/components/TableRow.cjs

@@ -116,13 +116,14 @@ function TableRow({
         columns.map((column) => {
           var _a2, _b, _c, _d;
           const allowWrap = table_utils.shouldAllowWrap(column.allowWrap, isSelected, viewMode);
-          column.allowOverflow;
+          const allowOverflow = column.allowOverflow;
           const cellValue = table_utils.getCellDisplayValue(row, column);
           return /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
               className: table_classes.cx(
                 styles__default.default.cell,
+                allowOverflow && styles__default.default.allowOverflow,
                 allowWrap ? styles__default.default.allowWrap : styles__default.default.nowrap,
                 column.divider === "left" && styles__default.default.dividerLeft,
                 column.divider === "right" && styles__default.default.dividerRight
@@ -136,7 +137,13 @@ function TableRow({
                   className: styles__default.default.cellContent,
                   "data-align": (_c = column.align) != null ? _c : "left",
                   "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellValueEllipsis, children: cellValue })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: allowOverflow ? styles__default.default.cellValueNoEllipsis : styles__default.default.cellValueEllipsis,
+                      children: cellValue
+                    }
+                  )
                 }
               )
             },

package/dist/components/table/components/TableRow.js

@@ -110,13 +110,14 @@ function TableRow({
         columns.map((column) => {
           var _a2, _b, _c, _d;
           const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
-          column.allowOverflow;
+          const allowOverflow = column.allowOverflow;
           const cellValue = getCellDisplayValue(row, column);
           return /* @__PURE__ */ jsx(
             "td",
             {
               className: cx(
                 styles.cell,
+                allowOverflow && styles.allowOverflow,
                 allowWrap ? styles.allowWrap : styles.nowrap,
                 column.divider === "left" && styles.dividerLeft,
                 column.divider === "right" && styles.dividerRight
@@ -130,7 +131,13 @@ function TableRow({
                   className: styles.cellContent,
                   "data-align": (_c = column.align) != null ? _c : "left",
                   "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
-                  children: /* @__PURE__ */ jsx("div", { className: styles.cellValueEllipsis, children: cellValue })
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: allowOverflow ? styles.cellValueNoEllipsis : styles.cellValueEllipsis,
+                      children: cellValue
+                    }
+                  )
                 }
               )
             },

package/dist/index.css

@@ -22,6 +22,7 @@
 @import './components/filtering/chip-multi-toggle/ChipMultiToggle.module.css';
 @import './components/forms/checkbox-group/CheckboxGroup.module.css';
 @import './components/forms/checkbox/Checkbox.module.css';
+@import './components/forms/file-upload/FileUpload.module.css';
 @import './components/forms/form-select/FormSelect.module.css';
 @import './components/forms/input-container/InputContainer.module.css';
 @import './components/forms/input/Input.module.css';
@@ -35,6 +36,7 @@
 @import './components/icon/Icon.module.css';
 @import './components/inline-status/InlineStatus.module.css';
 @import './components/json-viewer/JsonViewer.module.css';
+@import './components/lightbox/Lightbox.module.css';
 @import './components/media-card/MediaCard.module.css';
 @import './components/menu/Menu.module.css';
 @import './components/meta-bar/MetaBar.module.css';

package/dist/styles/styles.css

@@ -236,6 +236,10 @@ body.dbc-app {
   color: var(--color-fg-subtle);
 }
 
+.dbc-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
 .dbc-sm-text {
   font-size: var(--font-size-xs);
 }

package/dist/styles/themes/dbc/colors.css

@@ -144,6 +144,33 @@ html {
   --color-status-info-border: color-mix(in srgb, var(--dbc-info-500) 24%, transparent);
   --color-status-info-fg: var(--dbc-info-700);
 
+  /* Soft status surfaces — for compact chips/badges, not alerts */
+  --color-status-success-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-success) 10%,
+    var(--color-bg-surface)
+  );
+  --color-status-warning-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-warning) 10%,
+    var(--color-bg-surface)
+  );
+  --color-status-error-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-error) 8%,
+    var(--color-bg-surface)
+  );
+  --color-status-info-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-info) 10%,
+    var(--color-bg-surface)
+  );
+
+  --color-status-success-fg-soft: var(--color-status-success-fg);
+  --color-status-warning-fg-soft: var(--color-status-warning-fg);
+  --color-status-error-fg-soft: var(--color-status-error-fg);
+  --color-status-info-fg-soft: var(--color-status-info-fg);
+
   /* Chart colors */
   --color-chart-empty: color-mix(in srgb, var(--color-fg-muted) 15%, rgb(255 255 255 / 0));
   --color-chart-neutral: color-mix(in srgb, var(--color-fg-muted) 25%, rgb(255 255 255 / 0));

package/dist/styles.css

@@ -236,6 +236,10 @@ body.dbc-app {
   color: var(--color-fg-subtle);
 }
 
+.dbc-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
 .dbc-sm-text {
   font-size: var(--font-size-xs);
 }

package/package.json

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