@dbcdk/react-components 0.0.205 → 0.0.207

package/README.md

@@ -233,6 +233,22 @@ Storybook includes the a11y addon to help identify issues during development.
 
 ---
 
+## MIME type helpers
+
+These helpers work on both the server and client and are exported from the root and `/client` entrypoints:
+
+```ts
+import { formatMimeType, getMimeTypeExtension } from '@dbcdk/react-components'
+
+formatMimeType('application/pdf') // 'PDF'
+formatMimeType('text/plain; charset=utf-8') // 'Tekst'
+getMimeTypeExtension('image/jpeg') // 'jpg'
+```
+
+`formatMimeType` provides Danish labels for common MIME types, preserves unknown values unchanged, and returns `-` for `null` or `undefined`. `getMimeTypeExtension` returns an extension without a dot for common image types and PDF, or `undefined` for unsupported types. Both ignore MIME parameters, casing, and surrounding whitespace when looking up known types.
+
+---
+
 ## Contributing
 
 See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for detailed guidelines on:

package/dist/client.cjs

@@ -51,6 +51,7 @@ var MultiSelect = require('./components/forms/multi-select/MultiSelect');
 var useViewportFill = require('./hooks/useViewportFill');
 var useStickyLayout = require('./hooks/useStickyLayout');
 var formatDate = require('./utils/date/formatDate');
+var mimeTypes = require('./utils/files/mimeTypes');
 var FilterField = require('./components/filter-field/FilterField');
 var Select = require('./components/forms/select/Select');
 var SplitButton = require('./components/split-button/SplitButton');
@@ -335,6 +336,14 @@ Object.defineProperty(exports, "formatDate", {
   enumerable: true,
   get: function () { return formatDate.formatDate; }
 });
+Object.defineProperty(exports, "formatMimeType", {
+  enumerable: true,
+  get: function () { return mimeTypes.formatMimeType; }
+});
+Object.defineProperty(exports, "getMimeTypeExtension", {
+  enumerable: true,
+  get: function () { return mimeTypes.getMimeTypeExtension; }
+});
 Object.defineProperty(exports, "FilterField", {
   enumerable: true,
   get: function () { return FilterField.FilterField; }

package/dist/client.d.ts

@@ -83,6 +83,7 @@ export type { MultiselectOption } from './components/forms/multi-select/MultiSel
 export { useViewportFill } from './hooks/useViewportFill';
 export { useStickyLayout } from './hooks/useStickyLayout';
 export { formatDate } from './utils/date/formatDate';
+export { formatMimeType, getMimeTypeExtension } from './utils/files/mimeTypes';
 export type { FormatDateOptions } from './utils/date/formatDate';
 export { FilterField, NUMBER_OPERATORS } from './components/filter-field/FilterField';
 export type { Operator, FilterEvent, FilterFieldProps } from './components/filter-field/FilterField';
@@ -176,3 +177,4 @@ export { FileUpload } from './components/forms/file-upload/FileUpload';
 export type { FileUploadProps, FileUploadHandle } from './components/forms/file-upload/FileUpload';
 export { HighlightedText } from './components/highlighted-text/HighlightedText';
 export type { HighlightedTextProps } from './components/highlighted-text/HighlightedText';
+export type { MenuActionItem, MenuButtonItem, MenuLinkItem } from './components/menu/Menu.types';

package/dist/client.js

@@ -49,6 +49,7 @@ export { MultiSelect } from './components/forms/multi-select/MultiSelect';
 export { useViewportFill } from './hooks/useViewportFill';
 export { useStickyLayout } from './hooks/useStickyLayout';
 export { formatDate } from './utils/date/formatDate';
+export { formatMimeType, getMimeTypeExtension } from './utils/files/mimeTypes';
 export { FilterField, NUMBER_OPERATORS } from './components/filter-field/FilterField';
 export { Select } from './components/forms/select/Select';
 export { SplitButton } from './components/split-button/SplitButton';

package/dist/components/lightbox/Lightbox.cjs

@@ -9,6 +9,7 @@ var Popover = require('../../components/popover/Popover');
 var styles = require('./Lightbox.module.css');
 var Button = require('../button/Button');
 var Menu = require('../menu/Menu');
+var MenuAction = require('../menu/MenuAction');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -262,28 +263,7 @@ function ThumbnailContextMenu({
           }
         );
       },
-      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: menuItems.map((menuItem, menuItemIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-        Menu.Menu.Item,
-        {
-          active: menuItem.active,
-          selected: menuItem.selected,
-          disabled: menuItem.disabled,
-          variant: menuItem.variant,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                e.stopPropagation();
-                menuItem.onClick();
-                close();
-              },
-              children: menuItem.label
-            }
-          )
-        },
-        menuItemIndex
-      )) })
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: menuItems.map((menuItem, menuItemIndex) => /* @__PURE__ */ jsxRuntime.jsx(MenuAction.MenuAction, { item: menuItem, onActivate: close }, menuItemIndex)) })
     }
   );
 }

package/dist/components/lightbox/Lightbox.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import { type MetaItem } from '../../components/meta-bar/MetaBar';
+import type { MenuActionItem } from '../menu/Menu.types';
 export type LightboxItem = {
     thumbnail: ReactNode;
     preview?: ReactNode;
@@ -10,14 +11,7 @@ export type LightboxItem = {
     height?: number;
     metaAddition?: MetaItem[];
 };
-export type LightboxContextMenuItem = {
-    label: ReactNode;
-    onClick: () => void;
-    active?: boolean;
-    selected?: boolean;
-    disabled?: boolean;
-    variant?: 'default' | 'danger';
-};
+export type LightboxContextMenuItem = MenuActionItem;
 export interface LightboxProps {
     items: LightboxItem[];
     title?: string;

package/dist/components/lightbox/Lightbox.js

@@ -7,6 +7,7 @@ import { Popover } from '../../components/popover/Popover';
 import styles from './Lightbox.module.css';
 import { Button } from '../button/Button';
 import { Menu } from '../menu/Menu';
+import { MenuAction } from '../menu/MenuAction';
 
 function extFromMime(mime) {
   var _a;
@@ -256,28 +257,7 @@ function ThumbnailContextMenu({
           }
         );
       },
-      children: (close) => /* @__PURE__ */ jsx(Menu, { children: menuItems.map((menuItem, menuItemIndex) => /* @__PURE__ */ jsx(
-        Menu.Item,
-        {
-          active: menuItem.active,
-          selected: menuItem.selected,
-          disabled: menuItem.disabled,
-          variant: menuItem.variant,
-          children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                e.stopPropagation();
-                menuItem.onClick();
-                close();
-              },
-              children: menuItem.label
-            }
-          )
-        },
-        menuItemIndex
-      )) })
+      children: (close) => /* @__PURE__ */ jsx(Menu, { children: menuItems.map((menuItem, menuItemIndex) => /* @__PURE__ */ jsx(MenuAction, { item: menuItem, onActivate: close }, menuItemIndex)) })
     }
   );
 }

package/dist/components/menu/Menu.cjs

@@ -31,7 +31,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
+const INTERACTIVE_SELECTOR = 'a[href]:not([aria-disabled="true"]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
 function getMenuItems(el) {
   return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
 }

package/dist/components/menu/Menu.js

@@ -6,7 +6,7 @@ import { Checkbox } from '../forms/checkbox/Checkbox';
 import { RadioButton } from '../forms/radio-buttons/RadioButton';
 import { Switch } from '../forms/switch/Switch';
 
-const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
+const INTERACTIVE_SELECTOR = 'a[href]:not([aria-disabled="true"]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
 function getMenuItems(el) {
   return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
 }

package/dist/components/menu/Menu.types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/components/menu/Menu.types.d.ts

@@ -0,0 +1,19 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+type MenuItemBase = {
+    label: ReactNode;
+    icon?: ReactNode;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+};
+export type MenuButtonItem = MenuItemBase & {
+    href?: undefined;
+    onClick: () => void;
+};
+export type MenuLinkItem = MenuItemBase & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'download' | 'target' | 'rel'> & {
+    href: string;
+    onClick?: () => void;
+};
+export type MenuActionItem = MenuButtonItem | MenuLinkItem;
+export {};

package/dist/components/menu/Menu.types.js

@@ -0,0 +1 @@
+

package/dist/components/menu/MenuAction.cjs

@@ -0,0 +1,61 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Menu = require('./Menu');
+
+function MenuAction({
+  item,
+  onActivate,
+  children
+}) {
+  var _a;
+  function handleClick(event) {
+    var _a2;
+    event.stopPropagation();
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    (_a2 = item.onClick) == null ? void 0 : _a2.call(item);
+    onActivate();
+  }
+  function handleKeyDown(event) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.stopPropagation();
+    if (item.href !== void 0) {
+      if (event.key === "Enter" && (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey))
+        return;
+      event.preventDefault();
+      if (!item.disabled && !event.repeat) event.currentTarget.click();
+    }
+  }
+  const content = children != null ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    item.icon,
+    item.label
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Menu.Menu.Item,
+    {
+      active: item.active,
+      selected: item.selected,
+      disabled: item.disabled,
+      variant: item.variant,
+      children: item.href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: item.disabled ? void 0 : item.href,
+          download: item.download,
+          target: item.target,
+          rel: (_a = item.rel) != null ? _a : item.target === "_blank" ? "noopener noreferrer" : void 0,
+          tabIndex: item.disabled ? -1 : 0,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          children: content
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleClick, onKeyDown: handleKeyDown, children: content })
+    }
+  );
+}
+
+exports.MenuAction = MenuAction;

package/dist/components/menu/MenuAction.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { MenuActionItem } from './Menu.types';
+export declare function MenuAction({ item, onActivate, children, }: {
+    item: MenuActionItem;
+    onActivate: () => void;
+    children?: ReactNode;
+}): ReactElement;

package/dist/components/menu/MenuAction.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Menu } from './Menu';
+
+function MenuAction({
+  item,
+  onActivate,
+  children
+}) {
+  var _a;
+  function handleClick(event) {
+    var _a2;
+    event.stopPropagation();
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    (_a2 = item.onClick) == null ? void 0 : _a2.call(item);
+    onActivate();
+  }
+  function handleKeyDown(event) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.stopPropagation();
+    if (item.href !== void 0) {
+      if (event.key === "Enter" && (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey))
+        return;
+      event.preventDefault();
+      if (!item.disabled && !event.repeat) event.currentTarget.click();
+    }
+  }
+  const content = children != null ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon,
+    item.label
+  ] });
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      active: item.active,
+      selected: item.selected,
+      disabled: item.disabled,
+      variant: item.variant,
+      children: item.href !== void 0 ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.disabled ? void 0 : item.href,
+          download: item.download,
+          target: item.target,
+          rel: (_a = item.rel) != null ? _a : item.target === "_blank" ? "noopener noreferrer" : void 0,
+          tabIndex: item.disabled ? -1 : 0,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          children: content
+        }
+      ) : /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClick, onKeyDown: handleKeyDown, children: content })
+    }
+  );
+}
+
+export { MenuAction };

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

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import type { MenuButtonItem, MenuLinkItem } from '../../components/menu/Menu.types';
 import type { PageChangeEvent } from '../../components/pagination/Pagination';
 import type { Severity } from '../../constants/severity.types';
 export type ViewMode = 'compact' | 'wrapped';
@@ -69,21 +70,17 @@ export type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
-export type TableContextMenuActionItem = {
+export type TableContextMenuActionItem = MenuButtonItem & {
+    type?: 'item';
+};
+export type TableContextMenuLinkItem = MenuLinkItem & {
     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 TableContextMenuItem = TableContextMenuActionItem | TableContextMenuLinkItem | TableContextMenuHeaderItem;
 export type StickyHeader = false | 'app-header' | number;
 export type TableVariant = 'primary' | 'embedded';
 export type SortDirection = 'asc' | 'desc' | null;

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

@@ -9,6 +9,7 @@ var Popover = require('../../../components/popover/Popover');
 var severity = require('../../../constants/severity');
 var Button = require('../../button/Button');
 var Menu = require('../../menu/Menu');
+var MenuAction = require('../../menu/MenuAction');
 var useTableRowInteractions = require('../hooks/useTableRowInteractions');
 var table_classes = require('../table.classes');
 var styles = require('../Table.module.css');
@@ -252,32 +253,10 @@ function RowActions({
             );
           },
           children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: menuItems.map(
-            (item, index) => item.type === "header" ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsxRuntime.jsx(
-              Menu.Menu.Item,
-              {
-                active: item.active,
-                selected: item.selected,
-                disabled: item.disabled,
-                variant: item.variant,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "data-row-context-menu": "true",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      item.onClick();
-                      close();
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.contextMenuItemLabel, children: [
-                      item.icon,
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.contextMenuItemText, children: item.label })
-                    ] })
-                  }
-                )
-              },
-              index
-            )
+            (item, index) => item.type === "header" ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsxRuntime.jsx(MenuAction.MenuAction, { item, onActivate: close, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.contextMenuItemLabel, children: [
+              item.icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.contextMenuItemText, children: item.label })
+            ] }) }, index)
           ) })
         }
       ) : null

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

@@ -7,6 +7,7 @@ import { Popover } from '../../../components/popover/Popover';
 import { SeverityBgColor } from '../../../constants/severity';
 import { Button } from '../../button/Button';
 import { Menu } from '../../menu/Menu';
+import { MenuAction } from '../../menu/MenuAction';
 import { useTableRowInteractions } from '../hooks/useTableRowInteractions';
 import { cx } from '../table.classes';
 import styles from '../Table.module.css';
@@ -246,32 +247,10 @@ function RowActions({
             );
           },
           children: (close) => /* @__PURE__ */ jsx(Menu, { children: menuItems.map(
-            (item, index) => item.type === "header" ? /* @__PURE__ */ jsx(Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsx(
-              Menu.Item,
-              {
-                active: item.active,
-                selected: item.selected,
-                disabled: item.disabled,
-                variant: item.variant,
-                children: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "data-row-context-menu": "true",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      item.onClick();
-                      close();
-                    },
-                    children: /* @__PURE__ */ jsxs("span", { className: styles.contextMenuItemLabel, children: [
-                      item.icon,
-                      /* @__PURE__ */ jsx("span", { className: styles.contextMenuItemText, children: item.label })
-                    ] })
-                  }
-                )
-              },
-              index
-            )
+            (item, index) => item.type === "header" ? /* @__PURE__ */ jsx(Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsx(MenuAction, { item, onActivate: close, children: /* @__PURE__ */ jsxs("span", { className: styles.contextMenuItemLabel, children: [
+              item.icon,
+              /* @__PURE__ */ jsx("span", { className: styles.contextMenuItemText, children: item.label })
+            ] }) }, index)
           ) })
         }
       ) : null

package/dist/index.cjs

@@ -26,6 +26,7 @@ var severity_types = require('./constants/severity.types');
 var AppHeader = require('./components/app-header/AppHeader');
 var nestedFiltering = require('./utils/arrays/nested-filtering');
 var formatDate = require('./utils/date/formatDate');
+var mimeTypes = require('./utils/files/mimeTypes');
 var clipboard_utils = require('./utils/clipboard.utils');
 var AttributeChip = require('./components/attribute-chip/AttributeChip');
 var MetaBar = require('./components/meta-bar/MetaBar');
@@ -210,6 +211,12 @@ Object.keys(formatDate).forEach(function (k) {
 		get: function () { return formatDate[k]; }
 	});
 });
+Object.keys(mimeTypes).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return mimeTypes[k]; }
+	});
+});
 Object.keys(clipboard_utils).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export * from './constants/severity.types';
 export * from './components/app-header/AppHeader';
 export * from './utils/arrays/nested-filtering';
 export * from './utils/date/formatDate';
+export * from './utils/files/mimeTypes';
 export * from './utils/clipboard.utils';
 export * from './components/attribute-chip/AttributeChip';
 export * from './components/meta-bar/MetaBar';
@@ -50,3 +51,4 @@ export * from './components/tree-view/TreeView';
 export * from './components/split-button/SplitButton';
 export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
 export * from './components/forms/checkbox-group/CheckboxGroup';
+export type { MenuActionItem, MenuButtonItem, MenuLinkItem } from './components/menu/Menu.types';

package/dist/index.js

@@ -24,6 +24,7 @@ export * from './constants/severity.types';
 export * from './components/app-header/AppHeader';
 export * from './utils/arrays/nested-filtering';
 export * from './utils/date/formatDate';
+export * from './utils/files/mimeTypes';
 export * from './utils/clipboard.utils';
 export * from './components/attribute-chip/AttributeChip';
 export * from './components/meta-bar/MetaBar';

package/dist/utils/files/mimeTypes.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+const MIME_TYPE_LABELS = /* @__PURE__ */ new Map([
+  ["application/pdf", "PDF"],
+  ["application/epub+zip", "EPUB"],
+  ["application/vnd.amazon.ebook", "Kindle"],
+  ["application/msword", "Word (DOC)"],
+  ["application/vnd.openxmlformats-officedocument.wordprocessingml.document", "Word (DOCX)"],
+  ["application/vnd.ms-excel", "Excel (XLS)"],
+  ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "Excel (XLSX)"],
+  ["application/vnd.ms-powerpoint", "PowerPoint (PPT)"],
+  [
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "PowerPoint (PPTX)"
+  ],
+  ["application/vnd.oasis.opendocument.text", "OpenDocument-tekst (ODT)"],
+  ["application/vnd.oasis.opendocument.spreadsheet", "OpenDocument-regneark (ODS)"],
+  ["application/vnd.oasis.opendocument.presentation", "OpenDocument-pr\xE6sentation (ODP)"],
+  ["application/rtf", "RTF"],
+  ["text/rtf", "RTF"],
+  ["text/plain", "Tekst"],
+  ["text/html", "HTML"],
+  ["application/xhtml+xml", "XHTML"],
+  ["text/csv", "CSV"],
+  ["text/tab-separated-values", "TSV"],
+  ["text/markdown", "Markdown"],
+  ["text/calendar", "Kalender (ICS)"],
+  ["application/xml", "XML"],
+  ["text/xml", "XML"],
+  ["application/json", "JSON"],
+  ["application/ld+json", "JSON-LD"],
+  ["image/jpeg", "JPEG"],
+  ["image/png", "PNG"],
+  ["image/apng", "APNG"],
+  ["image/gif", "GIF"],
+  ["image/webp", "WebP"],
+  ["image/avif", "AVIF"],
+  ["image/tiff", "TIFF"],
+  ["image/bmp", "BMP"],
+  ["image/svg+xml", "SVG"],
+  ["image/vnd.microsoft.icon", "ICO"],
+  ["audio/mpeg", "MP3"],
+  ["audio/mp4", "MP4-lyd"],
+  ["audio/aac", "AAC"],
+  ["audio/ogg", "Ogg-lyd"],
+  ["audio/wav", "WAV"],
+  ["audio/webm", "WebM-lyd"],
+  ["audio/midi", "MIDI"],
+  ["audio/x-midi", "MIDI"],
+  ["video/mp4", "MP4-video"],
+  ["video/mpeg", "MPEG-video"],
+  ["video/ogg", "Ogg-video"],
+  ["video/webm", "WebM-video"],
+  ["video/quicktime", "QuickTime (MOV)"],
+  ["video/x-msvideo", "AVI"],
+  ["application/zip", "ZIP"],
+  ["application/x-zip-compressed", "ZIP"],
+  ["application/gzip", "GZIP"],
+  ["application/x-gzip", "GZIP"],
+  ["application/x-tar", "TAR"],
+  ["application/vnd.rar", "RAR"],
+  ["application/x-rar-compressed", "RAR"],
+  ["application/x-7z-compressed", "7-Zip"],
+  ["application/x-bzip", "BZIP"],
+  ["application/x-bzip2", "BZIP2"],
+  ["application/octet-stream", "Bin\xE6r fil"]
+]);
+const MIME_TYPE_EXTENSIONS = /* @__PURE__ */ new Map([
+  ["application/pdf", "pdf"],
+  ["image/jpeg", "jpg"],
+  ["image/png", "png"],
+  ["image/apng", "apng"],
+  ["image/gif", "gif"],
+  ["image/webp", "webp"],
+  ["image/avif", "avif"],
+  ["image/tiff", "tiff"],
+  ["image/bmp", "bmp"],
+  ["image/svg+xml", "svg"],
+  ["image/vnd.microsoft.icon", "ico"]
+]);
+function getMimeTypeExtension(mimeType) {
+  return MIME_TYPE_EXTENSIONS.get(mimeType.split(";", 1)[0].trim().toLowerCase());
+}
+function formatMimeType(mimeType) {
+  var _a;
+  if (mimeType === void 0 || mimeType === null) return "-";
+  const type = mimeType.split(";", 1)[0].trim().toLowerCase();
+  return (_a = MIME_TYPE_LABELS.get(type)) != null ? _a : mimeType;
+}
+
+exports.formatMimeType = formatMimeType;
+exports.getMimeTypeExtension = getMimeTypeExtension;

package/dist/utils/files/mimeTypes.d.ts

@@ -0,0 +1,2 @@
+export declare function getMimeTypeExtension(mimeType: string): string | undefined;
+export declare function formatMimeType(mimeType: string | undefined | null): string;

package/dist/utils/files/mimeTypes.js

@@ -0,0 +1,89 @@
+const MIME_TYPE_LABELS = /* @__PURE__ */ new Map([
+  ["application/pdf", "PDF"],
+  ["application/epub+zip", "EPUB"],
+  ["application/vnd.amazon.ebook", "Kindle"],
+  ["application/msword", "Word (DOC)"],
+  ["application/vnd.openxmlformats-officedocument.wordprocessingml.document", "Word (DOCX)"],
+  ["application/vnd.ms-excel", "Excel (XLS)"],
+  ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "Excel (XLSX)"],
+  ["application/vnd.ms-powerpoint", "PowerPoint (PPT)"],
+  [
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "PowerPoint (PPTX)"
+  ],
+  ["application/vnd.oasis.opendocument.text", "OpenDocument-tekst (ODT)"],
+  ["application/vnd.oasis.opendocument.spreadsheet", "OpenDocument-regneark (ODS)"],
+  ["application/vnd.oasis.opendocument.presentation", "OpenDocument-pr\xE6sentation (ODP)"],
+  ["application/rtf", "RTF"],
+  ["text/rtf", "RTF"],
+  ["text/plain", "Tekst"],
+  ["text/html", "HTML"],
+  ["application/xhtml+xml", "XHTML"],
+  ["text/csv", "CSV"],
+  ["text/tab-separated-values", "TSV"],
+  ["text/markdown", "Markdown"],
+  ["text/calendar", "Kalender (ICS)"],
+  ["application/xml", "XML"],
+  ["text/xml", "XML"],
+  ["application/json", "JSON"],
+  ["application/ld+json", "JSON-LD"],
+  ["image/jpeg", "JPEG"],
+  ["image/png", "PNG"],
+  ["image/apng", "APNG"],
+  ["image/gif", "GIF"],
+  ["image/webp", "WebP"],
+  ["image/avif", "AVIF"],
+  ["image/tiff", "TIFF"],
+  ["image/bmp", "BMP"],
+  ["image/svg+xml", "SVG"],
+  ["image/vnd.microsoft.icon", "ICO"],
+  ["audio/mpeg", "MP3"],
+  ["audio/mp4", "MP4-lyd"],
+  ["audio/aac", "AAC"],
+  ["audio/ogg", "Ogg-lyd"],
+  ["audio/wav", "WAV"],
+  ["audio/webm", "WebM-lyd"],
+  ["audio/midi", "MIDI"],
+  ["audio/x-midi", "MIDI"],
+  ["video/mp4", "MP4-video"],
+  ["video/mpeg", "MPEG-video"],
+  ["video/ogg", "Ogg-video"],
+  ["video/webm", "WebM-video"],
+  ["video/quicktime", "QuickTime (MOV)"],
+  ["video/x-msvideo", "AVI"],
+  ["application/zip", "ZIP"],
+  ["application/x-zip-compressed", "ZIP"],
+  ["application/gzip", "GZIP"],
+  ["application/x-gzip", "GZIP"],
+  ["application/x-tar", "TAR"],
+  ["application/vnd.rar", "RAR"],
+  ["application/x-rar-compressed", "RAR"],
+  ["application/x-7z-compressed", "7-Zip"],
+  ["application/x-bzip", "BZIP"],
+  ["application/x-bzip2", "BZIP2"],
+  ["application/octet-stream", "Bin\xE6r fil"]
+]);
+const MIME_TYPE_EXTENSIONS = /* @__PURE__ */ new Map([
+  ["application/pdf", "pdf"],
+  ["image/jpeg", "jpg"],
+  ["image/png", "png"],
+  ["image/apng", "apng"],
+  ["image/gif", "gif"],
+  ["image/webp", "webp"],
+  ["image/avif", "avif"],
+  ["image/tiff", "tiff"],
+  ["image/bmp", "bmp"],
+  ["image/svg+xml", "svg"],
+  ["image/vnd.microsoft.icon", "ico"]
+]);
+function getMimeTypeExtension(mimeType) {
+  return MIME_TYPE_EXTENSIONS.get(mimeType.split(";", 1)[0].trim().toLowerCase());
+}
+function formatMimeType(mimeType) {
+  var _a;
+  if (mimeType === void 0 || mimeType === null) return "-";
+  const type = mimeType.split(";", 1)[0].trim().toLowerCase();
+  return (_a = MIME_TYPE_LABELS.get(type)) != null ? _a : mimeType;
+}
+
+export { formatMimeType, getMimeTypeExtension };

package/package.json

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