@dbcdk/react-components 0.0.103 → 0.0.104

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

@@ -0,0 +1,167 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { X } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from '../../../components/button/Button';
+import { Headline } from '../../../components/headline/Headline';
+import { MOTION_MS } from '../../../styles/animation';
+import styles from './SidePanel.module.css';
+
+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] = useState(false);
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  const [isActive, setIsActive] = useState(false);
+  const panelRef = useRef(null);
+  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    if (isOpen) setShouldRender(true);
+  }, [isOpen]);
+  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]);
+  useEffect(() => {
+    if (!shouldRender) return;
+    if (!isOpen) {
+      setIsActive(false);
+      return;
+    }
+    const raf = requestAnimationFrame(() => setIsActive(true));
+    return () => cancelAnimationFrame(raf);
+  }, [isOpen, shouldRender]);
+  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 createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      showBackdrop && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${styles.backdrop} ${isActive ? styles.backdropOpen : ""}`,
+          onClick: (e) => {
+            e.stopPropagation();
+            onClose(e);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          ...props,
+          className: `${styles.sidePanel} ${isActive ? styles.open : ""} ${hasDetails ? styles.withDetails : styles.noDetails}`,
+          style: {
+            "--side-panel-width": width,
+            "--details-width": detailsWidth,
+            "--panel-dur": MOTION_MS.panelSlide + "ms"
+          },
+          "data-cy": "details-panel",
+          role: "dialog",
+          "aria-modal": "true",
+          children: [
+            hasDetails ? /* @__PURE__ */ jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
+                /* @__PURE__ */ jsx("div", { className: styles.detailsTitle, children: detailsHeader }),
+                /* @__PURE__ */ jsxs("div", { className: styles.detailsHeaderActions, children: [
+                  detailsHeaderAddition,
+                  onCloseDetails ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      size: "sm",
+                      variant: "outlined",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onCloseDetails();
+                      },
+                      children: "Luk"
+                    }
+                  ) : null
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: details })
+            ] }) : null,
+            /* @__PURE__ */ jsxs("section", { className: styles.mainCol, "data-cy": "details-panel-main", children: [
+              /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsxs("div", { className: "dbc-flex dbc-justify-between", children: [
+                /* @__PURE__ */ jsx(
+                  Headline,
+                  {
+                    size: 2,
+                    disableMargin: true,
+                    severity,
+                    marker: showHeaderMarker,
+                    subheader,
+                    children: header
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xs", children: [
+                  headerAddition,
+                  /* @__PURE__ */ jsx(
+                    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__ */ jsx(X, {})
+                    }
+                  )
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx("div", { className: styles.content, "data-cy": "details-panel-content", children }),
+              actions && /* @__PURE__ */ jsx("div", { className: styles.actions, children: actions })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+
+export { SidePanel };

package/dist/components/overlay/side-panel/SidePanel.module.css

@@ -0,0 +1,177 @@
+.sidePanel {
+  --col-pad: var(--spacing-md);
+
+  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1); /* smooth spring-ish without overshoot */
+
+  /* Shadow + edge */
+  --shadow-opacity: 0.22;
+  --edge-opacity: 0.12;
+
+  box-sizing: border-box;
+  padding: 0;
+  height: 100vh;
+
+  position: fixed;
+  right: 0;
+  top: 0;
+
+  background-color: var(--color-bg-surface);
+  z-index: var(--z-drawer);
+
+  transform: translate3d(100%, 0, 0);
+  transition: transform var(--panel-dur) var(--panel-ease);
+  will-change: transform;
+
+  display: grid;
+  gap: var(--spacing-md);
+  align-items: stretch;
+
+  overflow: hidden;
+  pointer-events: auto;
+
+  /* Make pseudo-elements layer properly */
+  isolation: isolate;
+}
+
+/* “Lift” layer: drop-shadow + edge highlight (both fade in) */
+.sidePanel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1; /* behind content but within isolated stacking context */
+
+  /* 1) drop-shadow = smoother than animating box-shadow
+     2) edge gradient = premium depth cue */
+  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, var(--shadow-opacity)));
+  opacity: 0;
+
+  /* Edge highlight from the left edge (panel’s leading edge) */
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, var(--edge-opacity)),
+    rgba(255, 255, 255, 0) 36%
+  );
+
+  transition: opacity var(--panel-dur) var(--panel-ease);
+
+  will-change: opacity;
+}
+
+/* Optional: super subtle “sheen” right as it settles (feels snappy) */
+.sidePanel.open::before {
+  opacity: 1;
+}
+
+.sidePanel.open {
+  transform: translate3d(0, 0, 0);
+}
+
+/* MAIN TRACK WIDTH = content + padding*2 */
+.sidePanel.noDetails {
+  grid-template-columns: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
+  width: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
+}
+
+/* when details show, main track stays the same; panel grows */
+.sidePanel.withDetails {
+  grid-template-columns:
+    calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2))
+    calc(var(--details-width, 420px) + (var(--col-pad) * 2));
+
+  width: calc(
+    (var(--side-panel-width, 400px) + (var(--col-pad) * 2)) +
+      (var(--details-width, 420px) + (var(--col-pad) * 2)) + var(--spacing-md)
+  );
+}
+
+/* columns get the padding */
+.mainCol,
+.detailsCol {
+  box-sizing: border-box;
+  padding: 0 var(--col-pad);
+
+  min-width: 0;
+  min-height: 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.header {
+  padding: var(--spacing-md) 0;
+}
+
+.content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  font-size: var(--font-size-sm);
+}
+
+.actions {
+  padding: var(--spacing-md) 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-sm);
+  min-width: 0;
+}
+
+/* details styling */
+.detailsCol {
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--border-radius-md);
+  overflow: hidden;
+  background: var(--color-bg-surface);
+}
+
+.detailsHeader {
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--color-border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+
+.detailsTitle {
+  font-weight: 600;
+}
+
+.detailsHeaderActions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.detailsContent {
+  padding: var(--spacing-md) 0;
+  overflow: auto;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+/* Backdrop with a nice fade */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
+  z-index: var(--z-backdrop-drawer);
+
+  opacity: 0;
+  transition: opacity var(--panel-dur) var(--panel-ease);
+  will-change: opacity;
+}
+
+.backdropOpen {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidePanel,
+  .sidePanel::before,
+  .backdrop {
+    transition: none !important;
+  }
+}

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var react = require('react');
+
+function useSidePanel(initialOpen = false) {
+  const [isOpen, setIsOpen] = react.useState(initialOpen);
+  const openSidePanel = () => setIsOpen(true);
+  const closeSidePanel = () => setIsOpen(false);
+  return {
+    isOpen,
+    openSidePanel,
+    closeSidePanel
+  };
+}
+
+exports.useSidePanel = useSidePanel;

package/dist/components/overlay/side-panel/useSidePanel.js

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+function useSidePanel(initialOpen = false) {
+  const [isOpen, setIsOpen] = useState(initialOpen);
+  const openSidePanel = () => setIsOpen(true);
+  const closeSidePanel = () => setIsOpen(false);
+  return {
+    isOpen,
+    openSidePanel,
+    closeSidePanel
+  };
+}
+
+export { useSidePanel };

package/dist/components/overlay/tooltip/Tooltip.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useTooltipTrigger = require('./useTooltipTrigger');
+
+function Tooltip({
+  children,
+  content,
+  placement = "top",
+  open,
+  offset = 8,
+  delayOpenMs,
+  delayCloseMs,
+  className,
+  ...rest
+}) {
+  const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
+    content,
+    placement,
+    offset,
+    open,
+    delayOpenMs,
+    delayCloseMs
+  });
+  const rootClass = react.useMemo(
+    () => ["TooltipContainer", className].filter(Boolean).join(" "),
+    [className]
+  );
+  if (!content) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "TooltipTrigger", tabIndex: 0, ...triggerProps, children }) });
+}
+
+exports.Tooltip = Tooltip;

package/dist/components/overlay/tooltip/Tooltip.js

@@ -0,0 +1,32 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useTooltipTrigger } from './useTooltipTrigger';
+
+function Tooltip({
+  children,
+  content,
+  placement = "top",
+  open,
+  offset = 8,
+  delayOpenMs,
+  delayCloseMs,
+  className,
+  ...rest
+}) {
+  const { triggerProps } = useTooltipTrigger({
+    content,
+    placement,
+    offset,
+    open,
+    delayOpenMs,
+    delayCloseMs
+  });
+  const rootClass = useMemo(
+    () => ["TooltipContainer", className].filter(Boolean).join(" "),
+    [className]
+  );
+  if (!content) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx("span", { className: rootClass, ...rest, children: /* @__PURE__ */ jsx("span", { className: "TooltipTrigger", tabIndex: 0, ...triggerProps, children }) });
+}
+
+export { Tooltip };

package/dist/components/overlay/tooltip/Tooltip.module.css

@@ -0,0 +1,104 @@
+/* Layout neutral wrapper */
+.container {
+  display: contents;
+}
+
+/* Measurable trigger box without forcing full width */
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--border-radius-default);
+}
+
+/* Bubble */
+.bubble {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  pointer-events: none;
+  background: var(--color-fg-default);
+  color: var(--color-fg-on-strong);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-tight);
+  padding: var(--spacing-xxs) var(--spacing-sm);
+  border-radius: var(--border-radius-default);
+
+  /*
+    - Don't let it run wild horizontally
+    - But don't clip: allow wrap
+    - Keep some relation to viewport
+  */
+  max-width: min(360px, calc(100vw - 16px));
+  white-space: normal;
+  overflow-wrap: break-word; /* wrap long words nicely */
+  word-break: normal;
+
+  /*
+    If your tooltips often include URLs/IDs, consider 'anywhere' instead:
+    overflow-wrap: anywhere;
+  */
+
+  /* Optional: nicer shadow than box-shadow for rounded bubble */
+  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
+
+  /* Hidden by default */
+  opacity: 0;
+  visibility: hidden;
+
+  /* Base transform gets overridden by placement rules below */
+  transform: translate3d(0, 0, 0);
+
+  transition:
+    opacity var(--transition-fast),
+    transform var(--transition-fast),
+    visibility 0s linear var(--transition-fast);
+}
+
+.bubble[data-open='true'] {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity var(--transition-fast),
+    transform var(--transition-fast),
+    visibility 0s;
+}
+
+/* Placement-based motion (so it “comes from” the trigger) */
+.bubble[data-placement='top'] {
+  transform: translate3d(0, -6px, 0);
+}
+.bubble[data-placement='bottom'] {
+  transform: translate3d(0, 6px, 0);
+}
+.bubble[data-placement='left'] {
+  transform: translate3d(-6px, 0, 0);
+}
+.bubble[data-placement='right'] {
+  transform: translate3d(6px, 0, 0);
+}
+
+/* Open state resets transform to 0 for all placements */
+.bubble[data-open='true'][data-placement='top'],
+.bubble[data-open='true'][data-placement='bottom'],
+.bubble[data-open='true'][data-placement='left'],
+.bubble[data-open='true'][data-placement='right'] {
+  transform: translate3d(0, 0, 0);
+}
+
+.bubble svg {
+  height: 20px;
+  width: 20px;
+  flex: 0 0 auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bubble {
+    transition: none;
+    transform: none;
+  }
+}