@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/lightbox/Lightbox.cjs

@@ -0,0 +1,291 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var client = require('../../client');
+var Popover = require('../../components/popover/Popover');
+var styles = require('./Lightbox.module.css');
+var Button = require('../button/Button');
+var Menu = require('../menu/Menu');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function extFromMime(mime) {
+  var _a;
+  const map = {
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/webp": "webp",
+    "image/gif": "gif"
+  };
+  return (_a = mime && map[mime]) != null ? _a : "jpg";
+}
+function Lightbox({
+  items,
+  title,
+  initialIndex = 0,
+  thumbnailHeight = 300,
+  showDownload = true,
+  getDownloadFilename,
+  buttonAddition,
+  trigger,
+  getContextMenuItems
+}) {
+  var _a;
+  const dialogRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const [index, setIndex] = react.useState(initialIndex);
+  const [downloading, setDownloading] = react.useState(false);
+  const current = items[index];
+  const multiple = items.length > 1;
+  react.useEffect(() => {
+    setIndex((i) => Math.min(Math.max(i, 0), Math.max(items.length - 1, 0)));
+  }, [items.length]);
+  const openAt = react.useCallback((i = 0) => {
+    setIndex(i);
+    setOpen(true);
+  }, []);
+  const close = react.useCallback(() => {
+    var _a2;
+    setDownloading(false);
+    (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
+    setOpen(false);
+  }, []);
+  const prev = react.useCallback(() => {
+    setIndex((i) => (i - 1 + items.length) % items.length);
+  }, [items.length]);
+  const next = react.useCallback(() => {
+    setIndex((i) => (i + 1) % items.length);
+  }, [items.length]);
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const onCancel = (e) => {
+      e.preventDefault();
+      close();
+    };
+    const onClose = () => {
+      setOpen(false);
+      setDownloading(false);
+    };
+    dialog.addEventListener("cancel", onCancel);
+    dialog.addEventListener("close", onClose);
+    return () => {
+      dialog.removeEventListener("cancel", onCancel);
+      dialog.removeEventListener("close", onClose);
+    };
+  }, [close]);
+  react.useEffect(() => {
+    if (!open || !multiple) return;
+    const onKeyDown = (e) => {
+      if (e.key === "ArrowLeft") prev();
+      if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, multiple, prev, next]);
+  const download = react.useCallback(async () => {
+    var _a2;
+    if (!(current == null ? void 0 : current.downloadSrc)) return;
+    setDownloading(true);
+    try {
+      const res = await fetch(current.downloadSrc, { cache: "no-store" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const blob = await res.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const ext = extFromMime((_a2 = current.mimeType) != null ? _a2 : blob.type);
+      const filename = getDownloadFilename ? getDownloadFilename(current, index) : `image-${index + 1}.${ext}`;
+      const a = document.createElement("a");
+      a.href = objectUrl;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(objectUrl);
+    } catch (err) {
+      console.warn("[Lightbox] download failed", err);
+    } finally {
+      setDownloading(false);
+    }
+  }, [current, index, getDownloadFilename]);
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    trigger ? trigger(openAt) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnails, children: items.map((item, i) => {
+      var _a2, _b;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.thumbnailCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailMedia, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: styles__default.default.thumbnailBtn,
+            onClick: () => openAt(i),
+            "aria-label": (_a2 = item.title) != null ? _a2 : `Billede ${i + 1}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailImg, style: { height: thumbnailHeight }, children: item.thumbnail })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.thumbnailFooter, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailMeta, children: /* @__PURE__ */ jsxRuntime.jsx(
+            client.MetaBar,
+            {
+              items: [
+                { value: item.height != null ? `H:${item.height}px` : "-" },
+                { value: item.width != null ? `B:${item.width}px` : "-" },
+                ...(_b = item.metaAddition) != null ? _b : []
+              ]
+            }
+          ) }),
+          getContextMenuItems ? /* @__PURE__ */ jsxRuntime.jsx(
+            ThumbnailContextMenu,
+            {
+              item,
+              index: i,
+              open: () => openAt(i),
+              getItems: getContextMenuItems
+            }
+          ) : null
+        ] })
+      ] }, i);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "dialog",
+      {
+        ref: dialogRef,
+        "aria-label": title != null ? title : "Lightbox",
+        tabIndex: -1,
+        className: styles__default.default.dialog,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) close();
+        },
+        children: current && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles__default.default.panel,
+            "data-surface": "inverse",
+            onClick: (e) => {
+              if (e.target === e.currentTarget) close();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbar, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarInfo, children: [
+                  title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.titleMain, children: title }),
+                  current.title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.titleItem, children: [
+                    title ? "\xB7 " : "",
+                    current.title
+                  ] }),
+                  multiple && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.counter, children: [
+                    title || current.title ? "\xB7 " : "",
+                    index + 1,
+                    "/",
+                    items.length
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarActions, children: [
+                  buttonAddition && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.buttonAdditionSlot, children: buttonAddition }),
+                  showDownload && current.downloadSrc && /* @__PURE__ */ jsxRuntime.jsx(
+                    Button.Button,
+                    {
+                      variant: "outlined",
+                      size: "sm",
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 16 }),
+                      onClick: download,
+                      loading: downloading,
+                      "aria-label": "Download",
+                      children: "Download"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button.Button,
+                    {
+                      variant: "outlined",
+                      size: "sm",
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 }),
+                      onClick: close,
+                      "aria-label": "Luk",
+                      children: "Luk"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.imageArea, children: (_a = current.preview) != null ? _a : current.thumbnail }),
+              multiple && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.nav, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", size: "sm", onClick: prev, "aria-label": "Forrige billede", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 20 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.navHint, children: "\u2190 \u2192 \xB7 Esc" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", size: "sm", onClick: next, "aria-label": "N\xE6ste billede", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 20 }) })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function ThumbnailContextMenu({
+  item,
+  index,
+  open,
+  getItems
+}) {
+  const menuItems = getItems({ item, index, open });
+  if (!menuItems.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "180px",
+      trigger: (toggle, _icon, isOpen) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "inline",
+            className: styles__default.default.thumbnailMenuTrigger,
+            "aria-label": `Flere handlinger for ${(_a = item.title) != null ? _a : `billede ${index + 1}`}`,
+            "aria-haspopup": "menu",
+            "aria-expanded": isOpen ? true : false,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { size: 16 }),
+            onClick: (e) => {
+              e.stopPropagation();
+              toggle(e);
+            }
+          }
+        );
+      },
+      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
+      )) })
+    }
+  );
+}
+
+exports.Lightbox = Lightbox;

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

@@ -0,0 +1,36 @@
+import type { ReactElement, ReactNode } from 'react';
+import { type MetaItem } from '../../client';
+export type LightboxItem = {
+    thumbnail: ReactNode;
+    preview?: ReactNode;
+    title?: string;
+    downloadSrc?: string;
+    mimeType?: string;
+    width?: number;
+    height?: number;
+    metaAddition?: MetaItem[];
+};
+export type LightboxContextMenuItem = {
+    label: ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+};
+export interface LightboxProps {
+    items: LightboxItem[];
+    title?: string;
+    initialIndex?: number;
+    thumbnailHeight?: number;
+    showDownload?: boolean;
+    getDownloadFilename?: (item: LightboxItem, index: number) => string;
+    buttonAddition?: ReactNode;
+    trigger?: (open: (index?: number) => void) => ReactNode;
+    getContextMenuItems?: (args: {
+        item: LightboxItem;
+        index: number;
+        open: () => void;
+    }) => LightboxContextMenuItem[];
+}
+export declare function Lightbox({ items, title, initialIndex, thumbnailHeight, showDownload, getDownloadFilename, buttonAddition, trigger, getContextMenuItems, }: LightboxProps): ReactElement | null;

package/dist/components/lightbox/Lightbox.js

@@ -0,0 +1,285 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Download, X, ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { MetaBar } from '../../client';
+import { Popover } from '../../components/popover/Popover';
+import styles from './Lightbox.module.css';
+import { Button } from '../button/Button';
+import { Menu } from '../menu/Menu';
+
+function extFromMime(mime) {
+  var _a;
+  const map = {
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/webp": "webp",
+    "image/gif": "gif"
+  };
+  return (_a = mime && map[mime]) != null ? _a : "jpg";
+}
+function Lightbox({
+  items,
+  title,
+  initialIndex = 0,
+  thumbnailHeight = 300,
+  showDownload = true,
+  getDownloadFilename,
+  buttonAddition,
+  trigger,
+  getContextMenuItems
+}) {
+  var _a;
+  const dialogRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(initialIndex);
+  const [downloading, setDownloading] = useState(false);
+  const current = items[index];
+  const multiple = items.length > 1;
+  useEffect(() => {
+    setIndex((i) => Math.min(Math.max(i, 0), Math.max(items.length - 1, 0)));
+  }, [items.length]);
+  const openAt = useCallback((i = 0) => {
+    setIndex(i);
+    setOpen(true);
+  }, []);
+  const close = useCallback(() => {
+    var _a2;
+    setDownloading(false);
+    (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
+    setOpen(false);
+  }, []);
+  const prev = useCallback(() => {
+    setIndex((i) => (i - 1 + items.length) % items.length);
+  }, [items.length]);
+  const next = useCallback(() => {
+    setIndex((i) => (i + 1) % items.length);
+  }, [items.length]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const onCancel = (e) => {
+      e.preventDefault();
+      close();
+    };
+    const onClose = () => {
+      setOpen(false);
+      setDownloading(false);
+    };
+    dialog.addEventListener("cancel", onCancel);
+    dialog.addEventListener("close", onClose);
+    return () => {
+      dialog.removeEventListener("cancel", onCancel);
+      dialog.removeEventListener("close", onClose);
+    };
+  }, [close]);
+  useEffect(() => {
+    if (!open || !multiple) return;
+    const onKeyDown = (e) => {
+      if (e.key === "ArrowLeft") prev();
+      if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, multiple, prev, next]);
+  const download = useCallback(async () => {
+    var _a2;
+    if (!(current == null ? void 0 : current.downloadSrc)) return;
+    setDownloading(true);
+    try {
+      const res = await fetch(current.downloadSrc, { cache: "no-store" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const blob = await res.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const ext = extFromMime((_a2 = current.mimeType) != null ? _a2 : blob.type);
+      const filename = getDownloadFilename ? getDownloadFilename(current, index) : `image-${index + 1}.${ext}`;
+      const a = document.createElement("a");
+      a.href = objectUrl;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(objectUrl);
+    } catch (err) {
+      console.warn("[Lightbox] download failed", err);
+    } finally {
+      setDownloading(false);
+    }
+  }, [current, index, getDownloadFilename]);
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger ? trigger(openAt) : /* @__PURE__ */ jsx("div", { className: styles.thumbnails, children: items.map((item, i) => {
+      var _a2, _b;
+      return /* @__PURE__ */ jsxs("div", { className: styles.thumbnailCard, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.thumbnailMedia, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles.thumbnailBtn,
+            onClick: () => openAt(i),
+            "aria-label": (_a2 = item.title) != null ? _a2 : `Billede ${i + 1}`,
+            children: /* @__PURE__ */ jsx("div", { className: styles.thumbnailImg, style: { height: thumbnailHeight }, children: item.thumbnail })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.thumbnailFooter, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.thumbnailMeta, children: /* @__PURE__ */ jsx(
+            MetaBar,
+            {
+              items: [
+                { value: item.height != null ? `H:${item.height}px` : "-" },
+                { value: item.width != null ? `B:${item.width}px` : "-" },
+                ...(_b = item.metaAddition) != null ? _b : []
+              ]
+            }
+          ) }),
+          getContextMenuItems ? /* @__PURE__ */ jsx(
+            ThumbnailContextMenu,
+            {
+              item,
+              index: i,
+              open: () => openAt(i),
+              getItems: getContextMenuItems
+            }
+          ) : null
+        ] })
+      ] }, i);
+    }) }),
+    /* @__PURE__ */ jsx(
+      "dialog",
+      {
+        ref: dialogRef,
+        "aria-label": title != null ? title : "Lightbox",
+        tabIndex: -1,
+        className: styles.dialog,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) close();
+        },
+        children: current && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.panel,
+            "data-surface": "inverse",
+            onClick: (e) => {
+              if (e.target === e.currentTarget) close();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.toolbarInfo, children: [
+                  title && /* @__PURE__ */ jsx("span", { className: styles.titleMain, children: title }),
+                  current.title && /* @__PURE__ */ jsxs("span", { className: styles.titleItem, children: [
+                    title ? "\xB7 " : "",
+                    current.title
+                  ] }),
+                  multiple && /* @__PURE__ */ jsxs("span", { className: styles.counter, children: [
+                    title || current.title ? "\xB7 " : "",
+                    index + 1,
+                    "/",
+                    items.length
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: styles.toolbarActions, children: [
+                  buttonAddition && /* @__PURE__ */ jsx("div", { className: styles.buttonAdditionSlot, children: buttonAddition }),
+                  showDownload && current.downloadSrc && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outlined",
+                      size: "sm",
+                      icon: /* @__PURE__ */ jsx(Download, { size: 16 }),
+                      onClick: download,
+                      loading: downloading,
+                      "aria-label": "Download",
+                      children: "Download"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outlined",
+                      size: "sm",
+                      icon: /* @__PURE__ */ jsx(X, { size: 16 }),
+                      onClick: close,
+                      "aria-label": "Luk",
+                      children: "Luk"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.imageArea, children: (_a = current.preview) != null ? _a : current.thumbnail }),
+              multiple && /* @__PURE__ */ jsxs("div", { className: styles.nav, children: [
+                /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", onClick: prev, "aria-label": "Forrige billede", children: /* @__PURE__ */ jsx(ChevronLeft, { size: 20 }) }),
+                /* @__PURE__ */ jsx("span", { className: styles.navHint, children: "\u2190 \u2192 \xB7 Esc" }),
+                /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", onClick: next, "aria-label": "N\xE6ste billede", children: /* @__PURE__ */ jsx(ChevronRight, { size: 20 }) })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function ThumbnailContextMenu({
+  item,
+  index,
+  open,
+  getItems
+}) {
+  const menuItems = getItems({ item, index, open });
+  if (!menuItems.length) return null;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "180px",
+      trigger: (toggle, _icon, isOpen) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "inline",
+            className: styles.thumbnailMenuTrigger,
+            "aria-label": `Flere handlinger for ${(_a = item.title) != null ? _a : `billede ${index + 1}`}`,
+            "aria-haspopup": "menu",
+            "aria-expanded": isOpen ? true : false,
+            icon: /* @__PURE__ */ jsx(MoreHorizontal, { size: 16 }),
+            onClick: (e) => {
+              e.stopPropagation();
+              toggle(e);
+            }
+          }
+        );
+      },
+      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
+      )) })
+    }
+  );
+}
+
+export { Lightbox };