@dbcdk/react-components 0.0.135 → 0.0.137

package/dist/components/forms/file-upload/FileUpload.cjs

@@ -11,7 +11,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-function FileUpload({
+const FileUpload = react.forwardRef(function FileUpload2({
   label,
   labelAction,
   error,
@@ -33,11 +33,20 @@ function FileUpload({
   disabled,
   className,
   ...inputProps
-}) {
+}, ref) {
   const reactId = react.useId();
   const inputId = id != null ? id : `file-upload-${reactId}`;
   const inputRef = react.useRef(null);
   const [dragging, setDragging] = react.useState(false);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      clear() {
+        if (inputRef.current) inputRef.current.value = "";
+      }
+    }),
+    []
+  );
   function handleDragOver(e) {
     e.preventDefault();
     if (!disabled) setDragging(true);
@@ -112,6 +121,7 @@ function FileUpload({
       )
     }
   );
-}
+});
+FileUpload.displayName = "FileUpload";
 
 exports.FileUpload = FileUpload;

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

@@ -12,4 +12,7 @@ export interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     width?: string | number;
     maxWidth?: string | number;
 }
-export declare function FileUpload({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, modified, onChange, children, hint, height, minWidth, width, maxWidth, id, disabled, className, ...inputProps }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export type FileUploadHandle = {
+    clear(): void;
+};
+export declare const FileUpload: import("react").ForwardRefExoticComponent<FileUploadProps & import("react").RefAttributes<FileUploadHandle>>;

package/dist/components/forms/file-upload/FileUpload.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { UploadCloud } from 'lucide-react';
-import { useId, useRef, useState } from 'react';
+import { forwardRef, useId, useRef, useState, useImperativeHandle } from 'react';
 import styles from './FileUpload.module.css';
 import { InputContainer } from '../input-container/InputContainer';
 
-function FileUpload({
+const FileUpload = forwardRef(function FileUpload2({
   label,
   labelAction,
   error,
@@ -27,11 +27,20 @@ function FileUpload({
   disabled,
   className,
   ...inputProps
-}) {
+}, ref) {
   const reactId = useId();
   const inputId = id != null ? id : `file-upload-${reactId}`;
   const inputRef = useRef(null);
   const [dragging, setDragging] = useState(false);
+  useImperativeHandle(
+    ref,
+    () => ({
+      clear() {
+        if (inputRef.current) inputRef.current.value = "";
+      }
+    }),
+    []
+  );
   function handleDragOver(e) {
     e.preventDefault();
     if (!disabled) setDragging(true);
@@ -106,6 +115,7 @@ function FileUpload({
       )
     }
   );
-}
+});
+FileUpload.displayName = "FileUpload";
 
 export { FileUpload };

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs

@@ -106,7 +106,7 @@ function ExpandableSidebarItem({
     );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.itemRow, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.itemRow} ${expanded ? styles__default.default.itemRowExpanded : ""}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsxRuntime.jsx(
         SidebarItemContent.SidebarItemContent,
         {
@@ -116,23 +116,25 @@ function ExpandableSidebarItem({
           label,
           href,
           disableActiveStyles: expanded,
+          suffixIcon: !isSidebarCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
+            }
+          ) : void 0,
           truncateLabel
         }
       ) }),
       !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toggleButton, children: /* @__PURE__ */ jsxRuntime.jsx(
         Button.Button,
         {
-          variant: "outlined",
+          variant: "inline",
+          shape: "round",
+          className: styles__default.default.toggleButtonControl,
           "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
           "aria-expanded": expanded,
           "aria-controls": `${href}-children`,
-          onClick: toggleAccordion,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.ChevronDown,
-            {
-              className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
-            }
-          )
+          onClick: toggleAccordion
         }
       ) })
     ] }),
@@ -141,7 +143,7 @@ function ExpandableSidebarItem({
       {
         id: `${href}-children`,
         onAnimationEnd: handleAnimationEnd,
-        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : expanded ? "animate--expand" : "visually-hidden"}`,
+        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""}`,
         children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
       }
     )

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -100,7 +100,7 @@ function ExpandableSidebarItem({
     );
   };
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.itemRow, children: [
+    /* @__PURE__ */ jsxs("div", { className: `${styles.itemRow} ${expanded ? styles.itemRowExpanded : ""}`, children: [
       /* @__PURE__ */ jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsx(
         SidebarItemContent,
         {
@@ -110,23 +110,25 @@ function ExpandableSidebarItem({
           label,
           href,
           disableActiveStyles: expanded,
+          suffixIcon: !isSidebarCollapsed ? /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
+            }
+          ) : void 0,
           truncateLabel
         }
       ) }),
       !isSidebarCollapsed && /* @__PURE__ */ jsx("div", { className: styles.toggleButton, children: /* @__PURE__ */ jsx(
         Button,
         {
-          variant: "outlined",
+          variant: "inline",
+          shape: "round",
+          className: styles.toggleButtonControl,
           "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
           "aria-expanded": expanded,
           "aria-controls": `${href}-children`,
-          onClick: toggleAccordion,
-          children: /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
-            }
-          )
+          onClick: toggleAccordion
         }
       ) })
     ] }),
@@ -135,7 +137,7 @@ function ExpandableSidebarItem({
       {
         id: `${href}-children`,
         onAnimationEnd: handleAnimationEnd,
-        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : expanded ? "animate--expand" : "visually-hidden"}`,
+        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""}`,
         children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
       }
     )

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css

@@ -6,28 +6,32 @@
 }
 
 .itemRow {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  column-gap: var(--spacing-xs);
+  position: relative;
+  display: block;
+  border-radius: var(--border-radius-md);
 }
 
 .toggleButton {
-  display: flex;
+  position: absolute;
+  inset-inline-end: var(--spacing-xs);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex: 0 0 auto;
 }
 
 .container button {
-  color: var(--color-text);
-  min-block-size: 20px !important;
-  min-inline-size: 20px !important;
-  max-block-size: 20px !important;
-  max-inline-size: 20px !important;
-  &:hover {
-    background-color: var(--color-bg-contextual-subtle) !important;
-  }
+  min-block-size: 28px !important;
+  min-inline-size: 28px !important;
+  max-block-size: 28px !important;
+  max-inline-size: 28px !important;
+  border-color: transparent !important;
+  background-color: transparent !important;
+}
+
+.toggleButtonControl {
+  opacity: 0;
 }
 
 .childrenContainer {

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -53,6 +53,18 @@
   color: var(--color-fg-default);
 }
 
+.container:not(.active):hover .icon,
+.container:not(.active):hover .suffixIcon,
+.container:focus-visible .icon,
+.container:focus-visible .suffixIcon {
+  color: var(--color-fg-default);
+}
+
+.active .icon,
+.active .suffixIcon {
+  color: var(--color-fg-default);
+}
+
 .icon,
 .suffixIcon {
   inline-size: var(--sidebar-item-icon-width, auto);

package/dist/components/table/Table.cjs

@@ -52,6 +52,7 @@ function Table({
   showHeader = true,
   getRowSeverity,
   getContextMenuItems,
+  showContextMenuOnHover = true,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -65,7 +66,6 @@ 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, {
@@ -102,6 +102,7 @@ function Table({
       viewMode,
       getRowSeverity,
       getContextMenuItems,
+      showContextMenuOnHover,
       onRowClick,
       onRowMouseEnter,
       onRowSelect
@@ -158,15 +159,13 @@ 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, getContextMenuItems, 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, showContextMenuOnHover, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -9,7 +9,7 @@ import { TableBody } from './components/TableBody';
 import { TableHeader } from './components/TableHeader';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
-import { getVisibleColumns, SELECTION_COLUMN_PX, CONTEXT_MENU_COLUMN_PX } from './table.utils';
+import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
 
 function Table({
   data,
@@ -46,6 +46,7 @@ function Table({
   showHeader = true,
   getRowSeverity,
   getContextMenuItems,
+  showContextMenuOnHover = true,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -59,7 +60,6 @@ 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, {
@@ -96,6 +96,7 @@ function Table({
       viewMode,
       getRowSeverity,
       getContextMenuItems,
+      showContextMenuOnHover,
       onRowClick,
       onRowMouseEnter,
       onRowSelect
@@ -152,15 +153,13 @@ 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,14 +241,6 @@
   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;
@@ -259,19 +251,10 @@
   padding-block: var(--spacing-xxs);
 }
 
-.headerCell.contextMenuHeaderCell {
-  padding-block: var(--spacing-xxs);
-}
-
 .headerCell:hover [data-resizer='true']::after {
   opacity: 1;
 }
 
-.cell.contextMenuCell {
-  vertical-align: top;
-  padding-block: var(--spacing-2xs);
-}
-
 .selectionHitArea {
   display: inline-flex;
   align-items: flex-start;
@@ -496,10 +479,6 @@
   text-align: right;
 }
 
-.contextMenuCellContent {
-  justify-content: flex-end;
-}
-
 /* vertical alignment inside content wrapper */
 .cellContent[data-vertical-align='top'] {
   align-items: flex-start;
@@ -562,6 +541,58 @@
 
 .contextMenuTrigger {
   color: var(--color-fg-subtle);
+  min-inline-size: 36px;
+  min-block-size: 36px;
+  border-radius: var(--border-radius-rounded);
+}
+
+.contextMenuAnchorCell {
+  overflow: visible;
+}
+
+.contextMenuAnchorCell .cellValueEllipsis,
+.contextMenuAnchorCell .cellValueNoEllipsis {
+  padding-inline-end: calc(36px + var(--spacing-sm));
+}
+
+.contextMenuOverlay {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 40px;
+  min-block-size: 40px;
+  z-index: 3;
+}
+
+.contextMenuOverlay:hover .contextMenuTrigger,
+.contextMenuOverlay:focus-within .contextMenuTrigger {
+  background-color: var(--opac-bg-light);
+}
+
+.contextMenuItemLabel {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  min-width: 0;
+}
+
+.contextMenuItemText {
+  min-width: 0;
+}
+
+.contextMenuHoverOnly .contextMenuTrigger {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.contextMenuHoverOnly:hover .contextMenuTrigger,
+.contextMenuHoverOnly:focus-within .contextMenuTrigger {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .severityTable {

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

@@ -24,14 +24,21 @@ export type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
-export type TableContextMenuItem = {
+export type TableContextMenuActionItem = {
+    type?: 'item';
     label: ReactNode;
+    icon?: ReactNode;
     onClick: () => void;
     active?: boolean;
     selected?: boolean;
     disabled?: boolean;
     variant?: 'default' | 'danger';
 };
+export type TableContextMenuHeaderItem = {
+    type: 'header';
+    label: ReactNode;
+};
+export type TableContextMenuItem = TableContextMenuActionItem | TableContextMenuHeaderItem;
 export type StickyHeader = false | 'app-header' | number;
 export type TableVariant = 'primary' | 'embedded';
 export type SortDirection = 'asc' | 'desc' | null;
@@ -74,6 +81,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
         rowId: string | number;
         open: () => void;
     }) => TableContextMenuItem[];
+    showContextMenuOnHover?: boolean;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;

package/dist/components/table/components/TableBody.cjs

@@ -21,6 +21,7 @@ function TableBody({
   viewMode,
   getRowSeverity,
   getContextMenuItems,
+  showContextMenuOnHover,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -40,6 +41,7 @@ function TableBody({
         viewMode,
         getRowSeverity,
         getContextMenuItems,
+        showContextMenuOnHover,
         onRowClick,
         onRowMouseEnter,
         onRowSelect

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

@@ -17,9 +17,10 @@ type Props<T extends Record<string, any>> = {
         rowId: string | number;
         open: () => void;
     }) => TableContextMenuItem[];
+    showContextMenuOnHover: boolean;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
 };
-export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
+export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
 export {};

package/dist/components/table/components/TableBody.js

@@ -15,6 +15,7 @@ function TableBody({
   viewMode,
   getRowSeverity,
   getContextMenuItems,
+  showContextMenuOnHover,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -34,6 +35,7 @@ function TableBody({
         viewMode,
         getRowSeverity,
         getContextMenuItems,
+        showContextMenuOnHover,
         onRowClick,
         onRowMouseEnter,
         onRowSelect

package/dist/components/table/components/TableHeader.cjs

@@ -12,7 +12,6 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function TableHeader({
   columns,
   hasSelection,
-  hasContextMenu,
   selectionMode,
   allRowsSelected,
   onSelectAllRows,
@@ -48,15 +47,7 @@ function TableHeader({
             extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
           },
           column.id
-        )),
-        hasContextMenu ? /* @__PURE__ */ jsxRuntime.jsx(
-          "th",
-          {
-            className: [styles__default.default.headerCell, styles__default.default.contextMenuCell, styles__default.default.contextMenuHeaderCell].filter(Boolean).join(" "),
-            scope: "col",
-            "aria-label": "R\xE6kkehandlinger"
-          }
-        ) : null
+        ))
       ] })
     }
   );

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

@@ -3,7 +3,6 @@ import type { ColumnItem, HeaderExtrasArgs, SortDirection } from '../Table.types
 type Props<T> = {
     columns: ColumnItem<T>[];
     hasSelection: boolean;
-    hasContextMenu: boolean;
     selectionMode: 'single' | 'multiple';
     allRowsSelected?: boolean;
     onSelectAllRows?: (isSelected: boolean) => void;
@@ -13,5 +12,5 @@ type Props<T> = {
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     stickyTop?: string;
 };
-export declare function TableHeader<T>({ columns, hasSelection, hasContextMenu, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
+export declare function TableHeader<T>({ columns, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableHeader.js

@@ -6,7 +6,6 @@ import styles from '../Table.module.css';
 function TableHeader({
   columns,
   hasSelection,
-  hasContextMenu,
   selectionMode,
   allRowsSelected,
   onSelectAllRows,
@@ -42,15 +41,7 @@ function TableHeader({
             extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
           },
           column.id
-        )),
-        hasContextMenu ? /* @__PURE__ */ jsx(
-          "th",
-          {
-            className: [styles.headerCell, styles.contextMenuCell, styles.contextMenuHeaderCell].filter(Boolean).join(" "),
-            scope: "col",
-            "aria-label": "R\xE6kkehandlinger"
-          }
-        ) : null
+        ))
       ] })
     }
   );