@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/tabs/Tabs.cjs

@@ -1,90 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./Tabs.module.css');
-var Headline = require('../headline/Headline');
-var Chip = require('../chip/Chip');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Tabs({
-  variant,
-  header,
-  tabs,
-  activeId,
-  onTabChange,
-  manuallySetActiveTab,
-  addition,
-  panelStyle
-}) {
-  var _a;
-  const [currentId, setCurrentId] = react.useState(activeId);
-  react.useEffect(() => {
-    if (activeId !== void 0) {
-      setCurrentId(activeId);
-    }
-  }, [activeId]);
-  const setActiveTab = react.useCallback(
-    (id) => {
-      setCurrentId(id);
-    },
-    [setCurrentId]
-  );
-  const handleTabChange = react.useCallback(
-    (index, tab) => {
-      if (!manuallySetActiveTab) {
-        setActiveTab(tab.id);
-      }
-      onTabChange == null ? void 0 : onTabChange(index, tab);
-    },
-    [onTabChange, manuallySetActiveTab, setActiveTab]
-  );
-  const filteredTabs = react.useMemo(() => tabs.filter((tab) => !tab.hidden), [tabs]);
-  const activeIndex = react.useMemo(() => {
-    var _a2, _b;
-    return (_b = filteredTabs.findIndex((tab) => tab.id === currentId)) != null ? _b : (_a2 = filteredTabs[0]) == null ? void 0 : _a2.id;
-  }, [currentId, filteredTabs]);
-  react.useEffect(() => {
-    if (activeIndex === -1 && filteredTabs.length > 0) {
-      setActiveTab(filteredTabs[0].id);
-    }
-  }, [activeIndex, filteredTabs, setActiveTab]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grow-container", children: [
-    header && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, children: header }),
-      addition
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tabs} ${styles__default.default[variant]} ${panelStyle ? styles__default.default.panelStyle : ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabList, children: filteredTabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "data-index": index,
-          className: `${styles__default.default.tab} ${activeIndex === index ? styles__default.default.active : ""}`,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              className: `${styles__default.default.tabButton}`,
-              onClick: () => handleTabChange(index, tab),
-              disabled: tab.disabled,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.header, children: tab.header }),
-                tab.badge !== void 0 && tab.badge > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.badge, children: [
-                  " ",
-                  /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { severity: "info", size: "sm", children: tab.badge.toLocaleString("da-DK") })
-                ] })
-              ]
-            }
-          )
-        },
-        index
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.tabContent} scrollable`, children: (_a = filteredTabs[activeIndex]) == null ? void 0 : _a.content })
-    ] })
-  ] });
-}
-
-exports.Tabs = Tabs;

package/dist/components/text-area/Textarea.cjs

@@ -1,62 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./Textarea.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Textarea({
-  value,
-  inputChanged,
-  disabled,
-  loading,
-  rows = 3,
-  showCount,
-  tooltip,
-  showTooltip,
-  placeholder,
-  adjustHeight,
-  ...props
-}) {
-  const onInput = react.useCallback(
-    (e) => {
-      const textarea = e.currentTarget;
-      const currentTextValue = textarea.value;
-      if (adjustHeight && textarea) {
-        textarea.style.height = "auto";
-        textarea.style.height = `${textarea.scrollHeight}px`;
-      }
-      inputChanged(currentTextValue);
-    },
-    [inputChanged, adjustHeight]
-  );
-  const inputField = react.useMemo(
-    () => /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        placeholder,
-        rows,
-        value,
-        onInput,
-        disabled,
-        ...props
-      }
-    ),
-    [value, disabled, placeholder, rows, onInput]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
-    showTooltip ? /* @__PURE__ */ jsxRuntime.jsx("span", { title: tooltip, children: inputField }) : inputField,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
-      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { children: loading }),
-      showCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.internalCount, children: [
-        value == null ? void 0 : value.length,
-        " tegn i denne boks"
-      ] })
-    ] })
-  ] });
-}
-
-exports.Textarea = Textarea;

package/dist/components/text-area/Textarea.d.ts

@@ -1,14 +0,0 @@
-type TextareaProps = {
-    value: string;
-    inputChanged: (value: string) => void;
-    disabled?: boolean;
-    loading?: React.ReactNode;
-    rows: number;
-    showCount?: boolean;
-    tooltip?: string;
-    showTooltip?: boolean;
-    adjustHeight?: boolean;
-    placeholder?: string;
-};
-export declare function Textarea({ value, inputChanged, disabled, loading, rows, showCount, tooltip, showTooltip, placeholder, adjustHeight, ...props }: TextareaProps & React.HtmlHTMLAttributes<HTMLTextAreaElement>): React.ReactNode;
-export {};

package/dist/components/text-area/Textarea.js

@@ -1,56 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCallback, useMemo } from 'react';
-import styles from './Textarea.module.css';
-
-function Textarea({
-  value,
-  inputChanged,
-  disabled,
-  loading,
-  rows = 3,
-  showCount,
-  tooltip,
-  showTooltip,
-  placeholder,
-  adjustHeight,
-  ...props
-}) {
-  const onInput = useCallback(
-    (e) => {
-      const textarea = e.currentTarget;
-      const currentTextValue = textarea.value;
-      if (adjustHeight && textarea) {
-        textarea.style.height = "auto";
-        textarea.style.height = `${textarea.scrollHeight}px`;
-      }
-      inputChanged(currentTextValue);
-    },
-    [inputChanged, adjustHeight]
-  );
-  const inputField = useMemo(
-    () => /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        placeholder,
-        rows,
-        value,
-        onInput,
-        disabled,
-        ...props
-      }
-    ),
-    [value, disabled, placeholder, rows, onInput]
-  );
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    showTooltip ? /* @__PURE__ */ jsx("span", { title: tooltip, children: inputField }) : inputField,
-    /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
-      loading && /* @__PURE__ */ jsx("div", { children: loading }),
-      showCount && /* @__PURE__ */ jsxs("div", { className: styles.internalCount, children: [
-        value == null ? void 0 : value.length,
-        " tegn i denne boks"
-      ] })
-    ] })
-  ] });
-}
-
-export { Textarea };

package/dist/components/text-area/Textarea.module.css

@@ -1,3 +0,0 @@
-.container textarea {
-    width: 100%;
-}

package/dist/components/toast/Toast.cjs

@@ -1,47 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Button = require('../button/Button');
-var lucideReact = require('lucide-react');
-var styles = require('./Toast.module.css');
-var Headline = require('../headline/Headline');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Toast({
-  title,
-  message,
-  severity = "info",
-  action,
-  onClose
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.toast} ${styles__default.default[severity]}`, role: "status", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Headline.Headline,
-        {
-          size: 4,
-          severity: title ? severity : void 0,
-          disableMargin: true,
-          addition: onClose && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-            Button.Button,
-            {
-              type: "button",
-              variant: "inline",
-              "aria-label": "Dismiss notification",
-              onClick: onClose,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: styles__default.default.closeIcon, "aria-hidden": "true" })
-            }
-          ) }),
-          children: title
-        }
-      ),
-      message && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.message, children: message })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.actions, children: action && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label }) })
-  ] });
-}
-
-exports.Toast = Toast;

package/dist/components/toast/provider/ToastProvider.cjs

@@ -1,98 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var Toast = require('../Toast');
-var styles = require('../Toast.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const ToastContext = react.createContext(void 0);
-function ToastProvider({
-  children,
-  defaultDuration = 1e4
-}) {
-  const [toasts, setToasts] = react.useState([]);
-  const timeouts = react.useRef(/* @__PURE__ */ new Map());
-  const clearTimeoutForId = (id) => {
-    const timeoutId = timeouts.current.get(id);
-    if (timeoutId) {
-      window.clearTimeout(timeoutId);
-      timeouts.current.delete(id);
-    }
-  };
-  const hideToast = react.useCallback((id) => {
-    clearTimeoutForId(id);
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-  const scheduleAutoDismiss = react.useCallback(
-    (toast) => {
-      var _a;
-      const duration = (_a = toast.duration) != null ? _a : defaultDuration;
-      if (!duration || duration <= 0) return;
-      clearTimeoutForId(toast.id);
-      const timeoutId = window.setTimeout(() => {
-        hideToast(toast.id);
-      }, duration);
-      timeouts.current.set(toast.id, timeoutId);
-    },
-    [defaultDuration, hideToast]
-  );
-  const showToast = react.useCallback(
-    (config) => {
-      var _a, _b, _c;
-      const id = (_c = (_b = config.id) != null ? _b : (_a = crypto.randomUUID) == null ? void 0 : _a.call(crypto)) != null ? _c : `${Date.now()}-${Math.random()}`;
-      const toast = { ...config, id };
-      setToasts((prev) => [...prev, toast]);
-      scheduleAutoDismiss(toast);
-      return id;
-    },
-    [scheduleAutoDismiss]
-  );
-  const clearToasts = react.useCallback(() => {
-    toasts.forEach((t) => clearTimeoutForId(t.id));
-    setToasts([]);
-  }, [toasts]);
-  react.useEffect(
-    () => () => {
-      toasts.forEach((t) => clearTimeoutForId(t.id));
-    },
-    [toasts]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast, hideToast, clearToasts }, children: [
-    children,
-    toasts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, "aria-live": "polite", "aria-atomic": "false", children: toasts.map((toast) => {
-      var _a;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Toast.Toast,
-        {
-          title: toast.title,
-          message: toast.message,
-          severity: (_a = toast.severity) != null ? _a : "info",
-          action: toast.action && {
-            label: toast.action.label,
-            onClick: () => {
-              var _a2, _b;
-              (_b = (_a2 = toast.action) == null ? void 0 : _a2.onClick) == null ? void 0 : _b.call(_a2);
-              hideToast(toast.id);
-            }
-          },
-          onClose: () => hideToast(toast.id)
-        },
-        toast.id
-      );
-    }) })
-  ] });
-}
-function useToast() {
-  const ctx = react.useContext(ToastContext);
-  if (!ctx) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return ctx;
-}
-
-exports.ToastProvider = ToastProvider;
-exports.useToast = useToast;

package/dist/components/tooltip/Tooltip.cjs

@@ -1,183 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var reactDom = require('react-dom');
-var styles = require('./Tooltip.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const VIEWPORT_PADDING = 8;
-function clamp(n, min, max) {
-  return Math.max(min, Math.min(n, max));
-}
-function computePosition(args) {
-  const { triggerRect, bubbleRect, placement, offset } = args;
-  switch (placement) {
-    case "top":
-      return {
-        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
-        top: triggerRect.top - bubbleRect.height - offset
-      };
-    case "bottom":
-      return {
-        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
-        top: triggerRect.bottom + offset
-      };
-    case "left":
-      return {
-        left: triggerRect.left - bubbleRect.width - offset,
-        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
-      };
-    case "right":
-      return {
-        left: triggerRect.right + offset,
-        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
-      };
-  }
-}
-function fitsViewport(pos, bubbleRect) {
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const leftOk = pos.left >= VIEWPORT_PADDING;
-  const rightOk = pos.left + bubbleRect.width <= vw - VIEWPORT_PADDING;
-  const topOk = pos.top >= VIEWPORT_PADDING;
-  const bottomOk = pos.top + bubbleRect.height <= vh - VIEWPORT_PADDING;
-  return leftOk && rightOk && topOk && bottomOk;
-}
-function flippedPlacement(p) {
-  if (p === "top") return "bottom";
-  if (p === "bottom") return "top";
-  if (p === "left") return "right";
-  return "left";
-}
-const Tooltip = ({
-  children,
-  content,
-  placement = "top",
-  className,
-  open,
-  flip = true,
-  offset = 8,
-  ...rest
-}) => {
-  const id = react.useId();
-  const wrapperRef = react.useRef(null);
-  const bubbleRef = react.useRef(null);
-  const [internalOpen, setInternalOpen] = react.useState(false);
-  const [coords, setCoords] = react.useState({
-    top: 0,
-    left: 0,
-    placement,
-    visible: false
-  });
-  const isControlled = open !== void 0;
-  const isOpen = isControlled ? !!open : internalOpen;
-  react.useEffect(() => {
-    setCoords((c) => ({ ...c, placement }));
-  }, [placement]);
-  const recompute = () => {
-    const wrapper = wrapperRef.current;
-    const bubble = bubbleRef.current;
-    if (!wrapper || !bubble) return;
-    const triggerRect = wrapper.getBoundingClientRect();
-    const bubbleRect = bubble.getBoundingClientRect();
-    const candidates = flip ? [placement, flippedPlacement(placement)] : [placement];
-    let chosen = candidates[0];
-    let pos = computePosition({ triggerRect, bubbleRect, placement: chosen, offset });
-    if (flip && !fitsViewport(pos, bubbleRect) && candidates.length > 1) {
-      const alt = candidates[1];
-      const altPos = computePosition({ triggerRect, bubbleRect, placement: alt, offset });
-      if (fitsViewport(altPos, bubbleRect)) {
-        chosen = alt;
-        pos = altPos;
-      }
-    }
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const clampedLeft = clamp(pos.left, VIEWPORT_PADDING, vw - bubbleRect.width - VIEWPORT_PADDING);
-    const clampedTop = clamp(pos.top, VIEWPORT_PADDING, vh - bubbleRect.height - VIEWPORT_PADDING);
-    setCoords({
-      left: clampedLeft,
-      top: clampedTop,
-      placement: chosen,
-      visible: true
-    });
-  };
-  react.useLayoutEffect(() => {
-    if (!isOpen) {
-      setCoords((c) => ({ ...c, visible: false }));
-      return;
-    }
-    const raf = requestAnimationFrame(() => recompute());
-    const onResize = () => recompute();
-    const onScroll = () => recompute();
-    window.addEventListener("resize", onResize);
-    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("resize", onResize);
-      window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [isOpen, placement, flip, offset, content]);
-  const onMouseEnter = () => {
-    if (!isControlled) setInternalOpen(true);
-  };
-  const onMouseLeave = () => {
-    if (!isControlled) setInternalOpen(false);
-  };
-  const onFocusIn = () => {
-    if (!isControlled) setInternalOpen(true);
-  };
-  const onFocusOut = () => {
-    if (!isControlled) setInternalOpen(false);
-  };
-  const rootClass = react.useMemo(
-    () => [styles__default.default.container, className].filter(Boolean).join(" "),
-    [className]
-  );
-  const [mounted, setMounted] = react.useState(false);
-  react.useEffect(() => setMounted(true), []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      className: rootClass,
-      onMouseEnter,
-      onMouseLeave,
-      onFocusCapture: onFocusIn,
-      onBlurCapture: onFocusOut,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.trigger, "aria-describedby": id, tabIndex: 0, children }),
-        mounted && isOpen ? reactDom.createPortal(
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ref: bubbleRef,
-              id,
-              role: "tooltip",
-              className: styles__default.default.bubble,
-              "data-open": coords.visible ? "true" : "false",
-              "data-placement": coords.placement,
-              style: {
-                top: coords.top,
-                left: coords.left,
-                visibility: coords.visible ? "visible" : "hidden"
-              },
-              "aria-hidden": !coords.visible,
-              children: content
-            }
-          ),
-          document.body
-        ) : null
-      ]
-    }
-  );
-};
-
-exports.Tooltip = Tooltip;

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,11 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
-export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
-    children: ReactNode;
-    content: ReactNode;
-    placement?: TooltipPlacement;
-    open?: boolean;
-    flip?: boolean;
-    offset?: number;
-}
-export declare const Tooltip: React.FC<TooltipProps>;