@dbcdk/react-components 0.0.167 → 0.0.169

package/dist/components/lightbox/Lightbox.cjs

@@ -1,291 +0,0 @@
-'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

@@ -1,36 +0,0 @@
-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

@@ -1,285 +0,0 @@
-'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 };