@dbcdk/react-components 0.0.120 → 0.0.122

package/dist/components/card/Card.cjs

@@ -5,7 +5,7 @@ var styles = require('./Card.module.css');
 var CardMeta = require('./components/CardMeta');
 var Headline = require('../headline/Headline');
 var Hyperlink = require('../hyperlink/Hyperlink');
-var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+var SkeletonLoader = require('../skeleton-loader/SkeletonLoader');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -52,7 +52,7 @@ function CardImpl({
   children,
   link,
   width,
-  headlineSize = 4,
+  headlineSize = 3,
   truncateTitle = false
 }) {
   var _a;
@@ -76,7 +76,7 @@ function CardImpl({
           Headline.Headline,
           {
             severity,
-            marker: headerMarker,
+            marker: Boolean(severity) && headerMarker,
             icon: headerIcon,
             addition: headerAddition,
             subheader,
@@ -89,10 +89,7 @@ function CardImpl({
         ) : null,
         headerMeta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerMeta, children: headerMeta }) : null
       ] }) : null,
-      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.loadingRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: "100%" })
-      ] }, index)) }) : null,
+      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingBody, "aria-busy": "true", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : null,
       showSection ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.section, children: [
         showSectionDivider ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionDivider }) : null,
         sectionTitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionTitle, children: sectionTitle }) : null

package/dist/components/card/Card.js

@@ -3,7 +3,7 @@ import styles from './Card.module.css';
 import { CardMetaRow, CardMeta } from './components/CardMeta';
 import { Headline } from '../headline/Headline';
 import { Hyperlink } from '../hyperlink/Hyperlink';
-import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import { SkeletonLoader } from '../skeleton-loader/SkeletonLoader';
 
 function getInnerPlacementClass(imgPlacement, s) {
   switch (imgPlacement) {
@@ -46,7 +46,7 @@ function CardImpl({
   children,
   link,
   width,
-  headlineSize = 4,
+  headlineSize = 3,
   truncateTitle = false
 }) {
   var _a;
@@ -70,7 +70,7 @@ function CardImpl({
           Headline,
           {
             severity,
-            marker: headerMarker,
+            marker: Boolean(severity) && headerMarker,
             icon: headerIcon,
             addition: headerAddition,
             subheader,
@@ -83,10 +83,7 @@ function CardImpl({
         ) : null,
         headerMeta ? /* @__PURE__ */ jsx("div", { className: styles.headerMeta, children: headerMeta }) : null
       ] }) : null,
-      loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: styles.loadingRow, children: [
-        /* @__PURE__ */ jsx(SkeletonLoaderItem, {}),
-        /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: "100%" })
-      ] }, index)) }) : null,
+      loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingBody, "aria-busy": "true", "aria-live": "polite", children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : null,
       showSection ? /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
         showSectionDivider ? /* @__PURE__ */ jsx("div", { className: styles.sectionDivider }) : null,
         sectionTitle ? /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null

package/dist/components/card/Card.module.css

@@ -159,16 +159,11 @@
 }
 
 /* Loading */
-.loadingList {
+.loadingBody {
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-
-.loadingRow {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 180px;
 }
 
 /* Responsive */

package/dist/components/code-block/CodeBlock.cjs

@@ -38,6 +38,7 @@ function CodeBlock({
   const text = typeof code === "string" ? code : void 0;
   const hasChildren = children !== void 0 && children !== null;
   const [isWrapped, setIsWrapped] = react.useState(wrap);
+  const codeRef = react.useRef(null);
   const copy = react.useMemo(
     () => {
       var _a;
@@ -49,6 +50,15 @@ function CodeBlock({
     () => smart && !hasChildren && typeof text === "string" ? text.split("\n") : null,
     [smart, hasChildren, text]
   );
+  const handleDoubleClick = () => {
+    const el = codeRef.current;
+    const selection = typeof window !== "undefined" ? window.getSelection() : null;
+    if (!el || !selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -76,7 +86,7 @@ function CodeBlock({
           ),
           /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { size: "sm", shape: "round", variant: "inline", text: copy })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: styles__default.default.container, tabIndex: 0, children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles__default.default.code, children: hasChildren ? children : lines ? lines.map((line, i) => {
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: styles__default.default.container, tabIndex: 0, onDoubleClick: handleDoubleClick, children: /* @__PURE__ */ jsxRuntime.jsx("code", { ref: codeRef, className: styles__default.default.code, children: hasChildren ? children : lines ? lines.map((line, i) => {
           const isFirst = i === 0;
           const isFrame = looksLikeStackFrame(line);
           const cls = [

package/dist/components/code-block/CodeBlock.d.ts

@@ -4,7 +4,7 @@ export interface CodeBlockProps {
     children?: ReactNode;
     copyButton?: boolean;
     copyText?: string;
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     smart?: boolean;
     wrap?: boolean;
 }

package/dist/components/code-block/CodeBlock.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TextWrap } from 'lucide-react';
-import { useState, useMemo, isValidElement } from 'react';
+import { useState, useRef, useMemo, isValidElement } from 'react';
 import styles from './CodeBlock.module.css';
 import { Button } from '../button/Button';
 import { CopyButton } from '../copy-button/CopyButton';
@@ -32,6 +32,7 @@ function CodeBlock({
   const text = typeof code === "string" ? code : void 0;
   const hasChildren = children !== void 0 && children !== null;
   const [isWrapped, setIsWrapped] = useState(wrap);
+  const codeRef = useRef(null);
   const copy = useMemo(
     () => {
       var _a;
@@ -43,6 +44,15 @@ function CodeBlock({
     () => smart && !hasChildren && typeof text === "string" ? text.split("\n") : null,
     [smart, hasChildren, text]
   );
+  const handleDoubleClick = () => {
+    const el = codeRef.current;
+    const selection = typeof window !== "undefined" ? window.getSelection() : null;
+    if (!el || !selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -70,7 +80,7 @@ function CodeBlock({
           ),
           /* @__PURE__ */ jsx(CopyButton, { size: "sm", shape: "round", variant: "inline", text: copy })
         ] }),
-        /* @__PURE__ */ jsx("pre", { className: styles.container, tabIndex: 0, children: /* @__PURE__ */ jsx("code", { className: styles.code, children: hasChildren ? children : lines ? lines.map((line, i) => {
+        /* @__PURE__ */ jsx("pre", { className: styles.container, tabIndex: 0, onDoubleClick: handleDoubleClick, children: /* @__PURE__ */ jsx("code", { ref: codeRef, className: styles.code, children: hasChildren ? children : lines ? lines.map((line, i) => {
           const isFirst = i === 0;
           const isFrame = looksLikeStackFrame(line);
           const cls = [

package/dist/components/code-block/CodeBlock.module.css

@@ -18,13 +18,20 @@
   font-family: var(--font-family-mono);
   line-height: 1.35;
   overflow: auto;
-  scrollbar-gutter: stable;
   display: inline-flex;
   align-items: flex-start;
   max-inline-size: 100%;
 }
 
 /* Sizes */
+.xs .container {
+  padding: var(--spacing-xxs);
+}
+
+.xs .code {
+  font-size: var(--font-size-xs);
+}
+
 .sm .container {
   padding: var(--spacing-xs);
 }
@@ -45,6 +52,10 @@
   min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
 }
 
+.xs.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-xxs) + var(--spacing-xxs));
+}
+
 .sm.hasActions .container {
   min-block-size: calc(var(--code-actions-h) + var(--spacing-xs) + var(--spacing-xs));
 }

package/dist/components/forms/file-upload/FileUpload.d.ts

@@ -4,8 +4,8 @@ export interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     onChange?: (files: FileList | null) => void;
     /** Custom content to replace the default icon + text hint */
     children?: ReactNode;
-    /** Short hint shown below the icon when no custom children */
-    hint?: string;
+    /** Hint shown below the icon when no custom children */
+    hint?: ReactNode;
     fullWidth?: boolean;
     height?: number | string;
     minWidth?: string | number;

package/dist/components/search-box/SearchBox.cjs

@@ -49,6 +49,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   const listboxId = react.useId();
   const popoverRef = react.useRef(null);
   const internalInputRef = react.useRef(null);
+  const onSearchRef = react.useRef(onSearch);
   react.useEffect(() => {
     if (typeof ref === "function") {
       ref(internalInputRef.current);
@@ -62,18 +63,22 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
     if (next !== draft) setDraft(next);
   }, [value]);
   react.useEffect(() => {
-    if (!onSearch) return;
+    onSearchRef.current = onSearch;
+  }, [onSearch]);
+  react.useEffect(() => {
+    if (!onSearchRef.current) return;
     if (!debounce) {
       setSearchQuery(draft);
-      onSearch(draft);
+      onSearchRef.current(draft);
       return;
     }
     const handler = setTimeout(() => {
+      var _a2;
       setSearchQuery(draft);
-      onSearch(draft);
+      (_a2 = onSearchRef.current) == null ? void 0 : _a2.call(onSearchRef, draft);
     }, debounceMs);
     return () => clearTimeout(handler);
-  }, [draft, onSearch, debounce, debounceMs]);
+  }, [draft, debounce, debounceMs]);
   react.useEffect(() => {
     function handleKeyDown(event) {
       var _a2;

package/dist/components/search-box/SearchBox.js

@@ -43,6 +43,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   const listboxId = useId();
   const popoverRef = useRef(null);
   const internalInputRef = useRef(null);
+  const onSearchRef = useRef(onSearch);
   useEffect(() => {
     if (typeof ref === "function") {
       ref(internalInputRef.current);
@@ -56,18 +57,22 @@ const SearchBox = forwardRef(function SearchBoxInner({
     if (next !== draft) setDraft(next);
   }, [value]);
   useEffect(() => {
-    if (!onSearch) return;
+    onSearchRef.current = onSearch;
+  }, [onSearch]);
+  useEffect(() => {
+    if (!onSearchRef.current) return;
     if (!debounce) {
       setSearchQuery(draft);
-      onSearch(draft);
+      onSearchRef.current(draft);
       return;
     }
     const handler = setTimeout(() => {
+      var _a2;
       setSearchQuery(draft);
-      onSearch(draft);
+      (_a2 = onSearchRef.current) == null ? void 0 : _a2.call(onSearchRef, draft);
     }, debounceMs);
     return () => clearTimeout(handler);
-  }, [draft, onSearch, debounce, debounceMs]);
+  }, [draft, debounce, debounceMs]);
   useEffect(() => {
     function handleKeyDown(event) {
       var _a2;

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

@@ -169,11 +169,12 @@ function SidebarContainer({
           /* @__PURE__ */ jsxRuntime.jsx(
             Button.Button,
             {
-              size: "md",
+              size: "sm",
               variant: "inline",
               shape: "round",
               "aria-label": "Collapse sidebar",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: isSidebarCollapsed ? styles__default.default.collapsedIcon : "" }),
+              tooltip: isSidebarCollapsed ? "Vis sidebj\xE6lke" : "Skjul sidebj\xE6lke",
+              icon: isSidebarCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftOpen, { className: styles__default.default.sidebarIcon }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { className: styles__default.default.sidebarIcon }),
               onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
             }
           )

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ChevronLeft } from 'lucide-react';
+import { PanelLeftOpen, PanelLeft } from 'lucide-react';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { Logo } from '../../../../assets/logo';
 import { Button } from '../../../../components/button/Button';
@@ -162,11 +162,12 @@ function SidebarContainer({
           /* @__PURE__ */ jsx(
             Button,
             {
-              size: "md",
+              size: "sm",
               variant: "inline",
               shape: "round",
               "aria-label": "Collapse sidebar",
-              icon: /* @__PURE__ */ jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : "" }),
+              tooltip: isSidebarCollapsed ? "Vis sidebj\xE6lke" : "Skjul sidebj\xE6lke",
+              icon: isSidebarCollapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { className: styles.sidebarIcon }) : /* @__PURE__ */ jsx(PanelLeft, { className: styles.sidebarIcon }),
               onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
             }
           )

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

@@ -15,6 +15,11 @@
     inline-size var(--transition-fast) var(--ease-standard);
 }
 
+.sidebarIcon {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: var(--color-fg-subtle);
+}
 .container.resizing {
   transition: none;
 }

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.cjs

@@ -11,7 +11,7 @@ function SkeletonLoaderItem({
   height = 14,
   width = "100%",
   radius = 6,
-  speedSec = 3,
+  speedSec = 4,
   ariaLabel = "Loading",
   variant = "default"
 }) {

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.js

@@ -5,7 +5,7 @@ function SkeletonLoaderItem({
   height = 14,
   width = "100%",
   radius = 6,
-  speedSec = 3,
+  speedSec = 4,
   ariaLabel = "Loading",
   variant = "default"
 }) {

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css

@@ -2,8 +2,9 @@
   --h: var(--skeleton-height, 14px);
   --r: var(--border-radius-md, 6px);
   --speed: var(--skeleton-speed, 1.2s);
-  --skeleton-base: var(--opac-bg-dark);
-  --skeleton-sheen: var(--opac-bg-default);
+  --skeleton-base: var(--opac-bg-default);
+  --skeleton-sheen: var(--opac-bg-light);
+  --skeleton-sheen-soft: color-mix(in srgb, var(--skeleton-sheen) 60%, var(--skeleton-base));
   position: relative;
   display: block;
   inline-size: var(--width, 100%);
@@ -14,17 +15,20 @@
   border-radius: var(--r);
   background: linear-gradient(
     90deg,
-    var(--skeleton-sheen) 0%,
-    var(--skeleton-base) 45%,
-    var(--skeleton-sheen) 60%,
+    var(--skeleton-base) 0%,
+    var(--skeleton-base) 34%,
+    var(--skeleton-sheen-soft) 45%,
+    var(--skeleton-sheen) 50%,
+    var(--skeleton-sheen-soft) 55%,
+    var(--skeleton-base) 66%,
     var(--skeleton-base) 100%
   );
-  background-size: 200% 100%;
+  background-size: 240% 100%;
   animation: shimmer var(--speed) linear infinite;
 }
 
 .invert {
-  --skeleton-base: var(--opac-bg-dark-invert);
+  --skeleton-base: var(--opac-bg-default-invert);
   --skeleton-sheen: var(--opac-bg-light-invert);
 }
 

package/dist/components/table/Table.cjs

@@ -4,11 +4,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Pagination = require('../../components/pagination/Pagination');
+var SkeletonLoader = require('../../components/skeleton-loader/SkeletonLoader');
 var useViewportFill = require('../../hooks/useViewportFill');
 var EmptyState = require('./components/empty-state/EmptyState');
 var TableBody = require('./components/TableBody');
 var TableHeader = require('./components/TableHeader');
-var TableLoadingBody = require('./components/TableLoadingBody');
 var table_classes = require('./table.classes');
 var styles = require('./Table.module.css');
 var table_utils = require('./table.utils');
@@ -51,6 +51,7 @@ function Table({
   pageSizeOptions,
   showHeader = true,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -64,6 +65,7 @@ function Table({
   const internalTableRootRef = react.useRef(null);
   const tableRootRefWrapper = react.useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasContextMenu = Boolean(getContextMenuItems);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill.useViewportFill(internalTableRootRef, {
@@ -86,7 +88,7 @@ function Table({
     },
     [onPageChange]
   );
-  const bodyContent = loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx(TableLoadingBody.TableLoadingBody, { rows: take != null ? take : 5, columns: visibleColumns, hasSelection }) : /* @__PURE__ */ jsxRuntime.jsx(
+  const bodyContent = /* @__PURE__ */ jsxRuntime.jsx(
     TableBody.TableBody,
     {
       data,
@@ -99,6 +101,7 @@ function Table({
       selectionInputName,
       viewMode,
       getRowSeverity,
+      getContextMenuItems,
       onRowClick,
       onRowMouseEnter,
       onRowSelect
@@ -139,7 +142,7 @@ function Table({
       ref: setTableRootRef,
       className: styles__default.default.tableScroll,
       style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
-      children: !data.length && !loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      children: loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "table", rows: 5, columns: 3 }) }) : !data.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
         "table",
         {
           className: styles__default.default.tableElement,
@@ -155,13 +158,15 @@ function Table({
                   style: column.width != null ? { width: column.width } : void 0
                 },
                 column.id
-              ))
+              )),
+              hasContextMenu ? /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: table_utils.CONTEXT_MENU_COLUMN_PX } }) : null
             ] }),
             showHeader && /* @__PURE__ */ jsxRuntime.jsx(
               TableHeader.TableHeader,
               {
                 columns: visibleColumns,
                 hasSelection,
+                hasContextMenu,
                 selectionMode,
                 allRowsSelected,
                 onSelectAllRows,

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, showHeader, 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, getContextMenuItems, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -2,14 +2,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useId, useRef, useCallback } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
+import { SkeletonLoader } from '../../components/skeleton-loader/SkeletonLoader';
 import { useViewportFill } from '../../hooks/useViewportFill';
 import { TableEmptyState } from './components/empty-state/EmptyState';
 import { TableBody } from './components/TableBody';
 import { TableHeader } from './components/TableHeader';
-import { TableLoadingBody } from './components/TableLoadingBody';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
-import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
+import { getVisibleColumns, SELECTION_COLUMN_PX, CONTEXT_MENU_COLUMN_PX } from './table.utils';
 
 function Table({
   data,
@@ -45,6 +45,7 @@ function Table({
   pageSizeOptions,
   showHeader = true,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -58,6 +59,7 @@ function Table({
   const internalTableRootRef = useRef(null);
   const tableRootRefWrapper = useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasContextMenu = Boolean(getContextMenuItems);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill(internalTableRootRef, {
@@ -80,7 +82,7 @@ function Table({
     },
     [onPageChange]
   );
-  const bodyContent = loading && !data.length ? /* @__PURE__ */ jsx(TableLoadingBody, { rows: take != null ? take : 5, columns: visibleColumns, hasSelection }) : /* @__PURE__ */ jsx(
+  const bodyContent = /* @__PURE__ */ jsx(
     TableBody,
     {
       data,
@@ -93,6 +95,7 @@ function Table({
       selectionInputName,
       viewMode,
       getRowSeverity,
+      getContextMenuItems,
       onRowClick,
       onRowMouseEnter,
       onRowSelect
@@ -133,7 +136,7 @@ function Table({
       ref: setTableRootRef,
       className: styles.tableScroll,
       style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
-      children: !data.length && !loading ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxs(
+      children: loading && !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "table", rows: 5, columns: 3 }) }) : !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxs(
         "table",
         {
           className: styles.tableElement,
@@ -149,13 +152,15 @@ function Table({
                   style: column.width != null ? { width: column.width } : void 0
                 },
                 column.id
-              ))
+              )),
+              hasContextMenu ? /* @__PURE__ */ jsx("col", { style: { width: CONTEXT_MENU_COLUMN_PX } }) : null
             ] }),
             showHeader && /* @__PURE__ */ jsx(
               TableHeader,
               {
                 columns: visibleColumns,
                 hasSelection,
+                hasContextMenu,
                 selectionMode,
                 allRowsSelected,
                 onSelectAllRows,

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

@@ -241,6 +241,14 @@
   line-height: 0;
 }
 
+.headerCell.contextMenuCell,
+.cell.contextMenuCell {
+  inline-size: 1%;
+  white-space: nowrap;
+  padding-inline: var(--spacing-2xs);
+  overflow: visible;
+}
+
 .headerCell.selectionCell {
   padding-block: var(--spacing-xxs);
   vertical-align: middle;
@@ -251,6 +259,15 @@
   padding-block: var(--spacing-xxs);
 }
 
+.headerCell.contextMenuHeaderCell {
+  padding-block: var(--spacing-xxs);
+}
+
+.cell.contextMenuCell {
+  vertical-align: top;
+  padding-block: var(--spacing-2xs);
+}
+
 .selectionHitArea {
   display: inline-flex;
   align-items: flex-start;
@@ -475,6 +492,10 @@
   text-align: right;
 }
 
+.contextMenuCellContent {
+  justify-content: flex-end;
+}
+
 /* vertical alignment inside content wrapper */
 .cellContent[data-vertical-align='top'] {
   align-items: flex-start;
@@ -535,6 +556,10 @@
   text-overflow: clip;
 }
 
+.contextMenuTrigger {
+  color: var(--color-fg-subtle);
+}
+
 .severityTable {
   --row-rail-width: 2px;
   --row-rail-inset-block: 1px;

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

@@ -24,6 +24,14 @@ export type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
+export type TableContextMenuItem = {
+    label: ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+};
 export type StickyHeader = false | 'app-header' | number;
 export type TableVariant = 'primary' | 'embedded';
 export type SortDirection = 'asc' | 'desc' | null;
@@ -61,6 +69,11 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     pageSizeOptions?: number[];
     showHeader?: boolean;
     getRowSeverity?: (row: T) => Severity | undefined;
+    getContextMenuItems?: (args: {
+        row: T;
+        rowId: string | number;
+        open: () => void;
+    }) => TableContextMenuItem[];
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;