@dbcdk/react-components 0.0.103 → 0.0.105

package/dist/components/overlay/modal/Modal.js

@@ -0,0 +1,183 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { X } from 'lucide-react';
+import { useId, useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from '../../../components/button/Button';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './Modal.module.css';
+
+function Modal({
+  isOpen,
+  onRequestClose,
+  header,
+  subheader,
+  content,
+  children,
+  primaryAction,
+  secondaryAction,
+  closeOnOverlayClick = true,
+  severity,
+  disableContentSpacing = false,
+  isLoading,
+  dataCy,
+  width,
+  ariaLabel
+}) {
+  const titleId = useId();
+  const dialogRef = useRef(null);
+  const lastActiveElementRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const onRequestCloseRef = useRef(onRequestClose);
+  useEffect(() => {
+    onRequestCloseRef.current = onRequestClose;
+  }, [onRequestClose]);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const wasOpenRef = useRef(false);
+  useEffect(() => {
+    var _a;
+    const wasOpen = wasOpenRef.current;
+    wasOpenRef.current = isOpen;
+    if (!isOpen) return;
+    if (!wasOpen) {
+      lastActiveElementRef.current = document.activeElement;
+      const dialog = dialogRef.current;
+      if (dialog) {
+        const focusableSelectors2 = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        const focusable = dialog.querySelectorAll(focusableSelectors2);
+        if (focusable.length > 0) {
+          const preferred = (_a = dialog.querySelector("input, select, textarea")) != null ? _a : focusable[0];
+          preferred.focus();
+        } else {
+          dialog.focus();
+        }
+      }
+    }
+    const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const getFocusable = () => {
+      var _a2, _b;
+      return (_b = (_a2 = dialogRef.current) == null ? void 0 : _a2.querySelectorAll(focusableSelectors)) != null ? _b : [];
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onRequestCloseRef.current();
+        return;
+      }
+      if (event.key === "Tab" && dialogRef.current) {
+        const focusable = getFocusable();
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey) {
+          if (document.activeElement === first || !dialogRef.current.contains(document.activeElement)) {
+            event.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last || !dialogRef.current.contains(document.activeElement)) {
+            event.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    };
+    const handleFocusIn = (event) => {
+      const dialog = dialogRef.current;
+      if (!dialog || dialog.contains(event.target)) return;
+      const focusable = getFocusable();
+      if (focusable.length > 0) focusable[0].focus();
+      else dialog.focus();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("focusin", handleFocusIn);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("focusin", handleFocusIn);
+      if (lastActiveElementRef.current) {
+        lastActiveElementRef.current.focus();
+      }
+    };
+  }, [isOpen]);
+  if (!isOpen || !mounted) return null;
+  const handleOverlayClick = () => {
+    if (closeOnOverlayClick) {
+      onRequestCloseRef.current();
+    }
+  };
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  const resolvedSecondaryAction = primaryAction || secondaryAction ? { label: "Luk", onClick: onRequestClose, ...secondaryAction } : void 0;
+  const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
+  const body = children != null ? children : content;
+  const resolvedWidth = typeof width === "number" ? `${width}px` : typeof width === "string" ? width : void 0;
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-cy": dataCy,
+        ref: dialogRef,
+        className: `${styles.modal} ${disableContentSpacing ? "" : styles.contentSpacing}`,
+        style: resolvedWidth ? { ["--modal-width"]: resolvedWidth } : void 0,
+        onClick: stopPropagation,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": header ? titleId : void 0,
+        "aria-label": !header ? ariaLabel : void 0,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+            header && /* @__PURE__ */ jsx(
+              Headline,
+              {
+                id: titleId,
+                severity,
+                size: 2,
+                disableMargin: true,
+                subheader,
+                children: header
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "inline",
+                onClick: () => onRequestCloseRef.current(),
+                "aria-label": "Luk",
+                shape: "round",
+                icon: /* @__PURE__ */ jsx(X, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.body, children: body }),
+          shouldRenderFooter && /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+            resolvedSecondaryAction && /* @__PURE__ */ jsxs(Button, { type: "button", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [
+              resolvedSecondaryAction.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon }),
+              /* @__PURE__ */ jsx("span", { children: resolvedSecondaryAction.label })
+            ] }),
+            primaryAction && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: primaryAction.severity || "primary",
+                onClick: primaryAction.onClick,
+                disabled: primaryAction.disabled || isLoading,
+                loading: isLoading,
+                children: [
+                  primaryAction.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: primaryAction.icon }),
+                  /* @__PURE__ */ jsx("span", { children: primaryAction.label })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+export { Modal };

package/dist/components/overlay/modal/Modal.module.css

@@ -0,0 +1,112 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-scrim);
+
+  display: flex;
+  justify-content: center;
+
+  padding: clamp(var(--spacing-sm), 10vh, var(--spacing-xl));
+  z-index: var(--z-backdrop-modal);
+
+  /* Always a scroll container so overscroll-behavior can absorb wheel/touch
+     events and prevent the background page from scrolling. */
+  overflow-y: scroll;
+  overscroll-behavior: none;
+
+  /* Hide the overlay's own scrollbar — it's only there to absorb events */
+  scrollbar-width: none;
+}
+
+.overlay::-webkit-scrollbar {
+  display: none;
+}
+
+/* Default width can be overridden by --modal-width from props */
+.modal {
+  --modal-width: 500px;
+
+  background: var(--color-bg-surface);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-family);
+  color: var(--color-fg-default);
+  z-index: var(--z-modal);
+
+  /* Responsive width: never exceed viewport */
+  width: min(
+    var(--modal-width),
+    calc(100vw - 2 * clamp(var(--spacing-sm), 4vw, var(--spacing-lg)))
+  );
+  min-width: 320px;
+
+  /* Critical: prevent “below bottom of screen”
+     Prefer svh on mobile; fallback to vh. */
+  max-height: calc(100svh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
+  max-height: calc(100vh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
+
+  display: flex;
+  flex-direction: column;
+
+  /* If you want it slightly lower than top padding, keep it aligned start */
+  align-self: flex-start;
+
+  /* Helps on iOS when address bar changes */
+  overscroll-behavior: contain;
+}
+
+/* Header/footer pinned; body scrolls */
+.header {
+  font-size: var(--font-size-md);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: var(--spacing-md);
+  padding-bottom: 0;
+
+  /* Keeps header readable if body scrolls underneath */
+  flex: 0 0 auto;
+}
+
+.header :is(h1, h2, h3, h4, h5, h6) {
+  font-weight: var(--font-weight-semibold);
+}
+
+.body {
+  flex: 1 1 auto;
+  overflow: auto;
+
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-fg-muted);
+
+  padding: var(--spacing-md);
+  min-height: 0; /* IMPORTANT: allows flex child to actually scroll */
+}
+
+.footer {
+  flex: 0 0 auto;
+
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+
+  padding: var(--spacing-md);
+  padding-top: 0;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.contentSpacing .body > :first-child {
+  margin-top: 0;
+}
+
+.contentSpacing .body > :last-child {
+  margin-bottom: 0;
+}

package/dist/components/overlay/modal/provider/ModalProvider.cjs

@@ -0,0 +1,98 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactDom = require('react-dom');
+var Modal = require('../Modal');
+
+const ModalContext = react.createContext(void 0);
+function ModalProvider({ children }) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [config, setConfig] = react.useState(null);
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const markAsLoading = react.useCallback((loading = true) => setIsLoading(loading), []);
+  const pendingResolverRef = react.useRef(null);
+  const resolvePending = react.useCallback((value) => {
+    if (pendingResolverRef.current) {
+      pendingResolverRef.current(value);
+      pendingResolverRef.current = null;
+    }
+  }, []);
+  const closeModal = react.useCallback(() => {
+    setIsOpen(false);
+    setIsLoading(false);
+  }, []);
+  const openModal = react.useCallback(
+    (newConfig) => {
+      resolvePending(false);
+      setConfig(newConfig);
+      setIsOpen(true);
+    },
+    [resolvePending]
+  );
+  const handleRequestClose = react.useCallback(() => {
+    var _a;
+    (_a = config == null ? void 0 : config.onRequestClose) == null ? void 0 : _a.call(config);
+    resolvePending(false);
+    closeModal();
+  }, [config, closeModal, resolvePending]);
+  const confirm = react.useCallback(
+    (confirmConfig) => {
+      return new Promise((resolve) => {
+        resolvePending(false);
+        pendingResolverRef.current = resolve;
+        const { confirmLabel = "Ok", cancelLabel = "Annuller", ...rest } = confirmConfig;
+        setConfig({
+          ...rest,
+          primaryAction: {
+            label: confirmLabel,
+            severity: confirmConfig.confirmButtonSeverity || "primary",
+            onClick: () => {
+              resolvePending(true);
+              closeModal();
+            }
+          },
+          secondaryAction: {
+            label: cancelLabel,
+            onClick: () => {
+              resolvePending(false);
+              closeModal();
+            }
+          }
+        });
+        setIsOpen(true);
+      });
+    },
+    [resolvePending]
+  );
+  const modalNode = /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm, markAsLoading }, children: [
+    children,
+    mounted && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Modal.Modal,
+        {
+          ...config != null ? config : {},
+          isOpen,
+          isLoading,
+          onRequestClose: handleRequestClose,
+          children: config == null ? void 0 : config.children
+        }
+      ),
+      document.body
+    )
+  ] });
+  return modalNode;
+}
+function useModal() {
+  const ctx = react.useContext(ModalContext);
+  if (!ctx) throw new Error("useModal must be used within a ModalProvider");
+  return ctx;
+}
+
+exports.ModalProvider = ModalProvider;
+exports.useModal = useModal;

package/dist/components/overlay/modal/provider/ModalProvider.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useCallback, useRef, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { Modal } from '../Modal';
+
+const ModalContext = createContext(void 0);
+function ModalProvider({ children }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [config, setConfig] = useState(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const [isLoading, setIsLoading] = useState(false);
+  const markAsLoading = useCallback((loading = true) => setIsLoading(loading), []);
+  const pendingResolverRef = useRef(null);
+  const resolvePending = useCallback((value) => {
+    if (pendingResolverRef.current) {
+      pendingResolverRef.current(value);
+      pendingResolverRef.current = null;
+    }
+  }, []);
+  const closeModal = useCallback(() => {
+    setIsOpen(false);
+    setIsLoading(false);
+  }, []);
+  const openModal = useCallback(
+    (newConfig) => {
+      resolvePending(false);
+      setConfig(newConfig);
+      setIsOpen(true);
+    },
+    [resolvePending]
+  );
+  const handleRequestClose = useCallback(() => {
+    var _a;
+    (_a = config == null ? void 0 : config.onRequestClose) == null ? void 0 : _a.call(config);
+    resolvePending(false);
+    closeModal();
+  }, [config, closeModal, resolvePending]);
+  const confirm = useCallback(
+    (confirmConfig) => {
+      return new Promise((resolve) => {
+        resolvePending(false);
+        pendingResolverRef.current = resolve;
+        const { confirmLabel = "Ok", cancelLabel = "Annuller", ...rest } = confirmConfig;
+        setConfig({
+          ...rest,
+          primaryAction: {
+            label: confirmLabel,
+            severity: confirmConfig.confirmButtonSeverity || "primary",
+            onClick: () => {
+              resolvePending(true);
+              closeModal();
+            }
+          },
+          secondaryAction: {
+            label: cancelLabel,
+            onClick: () => {
+              resolvePending(false);
+              closeModal();
+            }
+          }
+        });
+        setIsOpen(true);
+      });
+    },
+    [resolvePending]
+  );
+  const modalNode = /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm, markAsLoading }, children: [
+    children,
+    mounted && createPortal(
+      /* @__PURE__ */ jsx(
+        Modal,
+        {
+          ...config != null ? config : {},
+          isOpen,
+          isLoading,
+          onRequestClose: handleRequestClose,
+          children: config == null ? void 0 : config.children
+        }
+      ),
+      document.body
+    )
+  ] });
+  return modalNode;
+}
+function useModal() {
+  const ctx = useContext(ModalContext);
+  if (!ctx) throw new Error("useModal must be used within a ModalProvider");
+  return ctx;
+}
+
+export { ModalProvider, useModal };

package/dist/components/overlay/side-panel/SidePanel.cjs

@@ -0,0 +1,173 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var reactDom = require('react-dom');
+var Button = require('../../../components/button/Button');
+var Headline = require('../../../components/headline/Headline');
+var animation = require('../../../styles/animation');
+var styles = require('./SidePanel.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function SidePanel({
+  isOpen,
+  onClose,
+  children,
+  header,
+  subheader,
+  headerAddition,
+  actions,
+  showBackdrop = true,
+  severity,
+  showHeaderMarker = true,
+  width = "400px",
+  details,
+  detailsHeader = "Output",
+  detailsWidth = "420px",
+  onCloseDetails,
+  detailsHeaderAddition,
+  ...props
+}) {
+  const [mounted, setMounted] = react.useState(false);
+  const [shouldRender, setShouldRender] = react.useState(isOpen);
+  const [isActive, setIsActive] = react.useState(false);
+  const panelRef = react.useRef(null);
+  react.useEffect(() => setMounted(true), []);
+  react.useEffect(() => {
+    if (isOpen) setShouldRender(true);
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose]);
+  react.useEffect(() => {
+    if (!shouldRender) return;
+    if (!isOpen) {
+      setIsActive(false);
+      return;
+    }
+    const raf = requestAnimationFrame(() => setIsActive(true));
+    return () => cancelAnimationFrame(raf);
+  }, [isOpen, shouldRender]);
+  react.useEffect(() => {
+    if (!shouldRender) return;
+    const el = panelRef.current;
+    if (!el) return;
+    const onTransitionEnd = (e) => {
+      if (e.target !== el) return;
+      if (e.propertyName !== "transform") return;
+      if (!isOpen) setShouldRender(false);
+    };
+    el.addEventListener("transitionend", onTransitionEnd);
+    return () => el.removeEventListener("transitionend", onTransitionEnd);
+  }, [isOpen, shouldRender]);
+  if (!mounted) return null;
+  if (!shouldRender) return null;
+  const hasDetails = Boolean(details);
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      showBackdrop && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `${styles__default.default.backdrop} ${isActive ? styles__default.default.backdropOpen : ""}`,
+          onClick: (e) => {
+            e.stopPropagation();
+            onClose(e);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: panelRef,
+          ...props,
+          className: `${styles__default.default.sidePanel} ${isActive ? styles__default.default.open : ""} ${hasDetails ? styles__default.default.withDetails : styles__default.default.noDetails}`,
+          style: {
+            "--side-panel-width": width,
+            "--details-width": detailsWidth,
+            "--panel-dur": animation.MOTION_MS.panelSlide + "ms"
+          },
+          "data-cy": "details-panel",
+          role: "dialog",
+          "aria-modal": "true",
+          children: [
+            hasDetails ? /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: styles__default.default.detailsCol, "data-cy": "details-panel-details", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.detailsHeader, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.detailsTitle, children: detailsHeader }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.detailsHeaderActions, children: [
+                  detailsHeaderAddition,
+                  onCloseDetails ? /* @__PURE__ */ jsxRuntime.jsx(
+                    Button.Button,
+                    {
+                      type: "button",
+                      size: "sm",
+                      variant: "outlined",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onCloseDetails();
+                      },
+                      children: "Luk"
+                    }
+                  ) : null
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.detailsContent, children: details })
+            ] }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("section", { className: styles__default.default.mainCol, "data-cy": "details-panel-main", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Headline.Headline,
+                  {
+                    size: 2,
+                    disableMargin: true,
+                    severity,
+                    marker: showHeaderMarker,
+                    subheader,
+                    children: header
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xs", children: [
+                  headerAddition,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button.Button,
+                    {
+                      type: "button",
+                      size: "md",
+                      shape: "round",
+                      variant: "inline",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onClose(e);
+                      },
+                      "aria-label": "Luk panel",
+                      "data-cy": "side-panel-close-button",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
+                    }
+                  )
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.content, "data-cy": "details-panel-content", children }),
+              actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.actions, children: actions })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+
+exports.SidePanel = SidePanel;