@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,185 +0,0 @@
-'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,
-  headerAddition,
-  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,
-                addition: headerAddition,
-                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

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

@@ -1,98 +0,0 @@
-'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, closeModal]
-  );
-  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.d.ts

@@ -1,23 +0,0 @@
-import React, { type ReactNode } from 'react';
-import { ButtonVariant } from '../../../../components/button/Button';
-import { type ModalProps } from '../Modal';
-type ModalConfig = Omit<ModalProps, 'isOpen' | 'onRequestClose'> & {
-    onRequestClose?: () => void;
-};
-type ConfirmModalConfig = Omit<ModalConfig, 'primaryAction' | 'secondaryAction' | 'onRequestClose'> & {
-    confirmLabel?: string;
-    confirmButtonSeverity?: ButtonVariant;
-    cancelLabel?: string;
-};
-type ModalContextValue = {
-    openModal: (config: ModalConfig) => void;
-    closeModal: () => void;
-    confirm: (config: ConfirmModalConfig) => Promise<boolean>;
-    markAsLoading: (loading?: boolean) => void;
-};
-type ModalProviderProps = {
-    children: ReactNode;
-};
-export declare function ModalProvider({ children }: ModalProviderProps): React.ReactNode;
-export declare function useModal(): ModalContextValue;
-export {};

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

@@ -1,95 +0,0 @@
-'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, closeModal]
-  );
-  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

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