@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/forms/select/Select.js

@@ -0,0 +1,281 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { useId, useRef, useMemo, useState, useEffect } from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './Select.module.css';
+import { Button } from '../../button/Button';
+import { ClearButton } from '../../clear-button/ClearButton';
+import { Menu } from '../../menu/Menu';
+import { Popover } from '../../popover/Popover';
+import { InputContainer } from '../input-container/InputContainer';
+
+function Select({
+  label,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = true,
+  required,
+  tooltip,
+  tooltipPlacement = "right",
+  modified = false,
+  id,
+  options,
+  selectedValue,
+  onChange,
+  placeholder = "V\xE6lg",
+  size,
+  variant = "outlined",
+  onClear,
+  datakey,
+  dataCy,
+  disabled,
+  minWidth,
+  menuHeader
+}) {
+  const generatedId = useId();
+  const controlId = id != null ? id : `select-${generatedId}`;
+  const describedById = `${controlId}-desc`;
+  const listboxId = `${controlId}-listbox`;
+  const popoverRef = useRef(null);
+  const optionRefs = useRef([]);
+  const typeaheadRef = useRef("");
+  const typeaheadTimeoutRef = useRef(null);
+  const selectedIndex = useMemo(
+    () => options.findIndex((o) => o.value === selectedValue),
+    [options, selectedValue]
+  );
+  const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    return () => {
+      if (typeaheadTimeoutRef.current) clearTimeout(typeaheadTimeoutRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (!open) return;
+    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex, open]);
+  const resetActiveToSelected = () => setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+  const findTypeaheadMatch = (query, startIndex) => {
+    var _a, _b;
+    if (!query || options.length === 0) return -1;
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    if (!normalizedQuery) return -1;
+    for (let step = 1; step <= options.length; step += 1) {
+      const index = (startIndex + step + options.length) % options.length;
+      const label2 = (_b = (_a = options[index]) == null ? void 0 : _a.label) == null ? void 0 : _b.trim().toLocaleLowerCase();
+      if (label2 == null ? void 0 : label2.startsWith(normalizedQuery)) return index;
+    }
+    return -1;
+  };
+  const handleTypeahead = (key) => {
+    const startIndex = open ? activeIndex : selectedIndex;
+    const nextBuffer = `${typeaheadRef.current}${key.toLocaleLowerCase()}`;
+    const repeatedChar = new Set(nextBuffer).size === 1;
+    let nextIndex = findTypeaheadMatch(nextBuffer, startIndex);
+    let appliedBuffer = nextBuffer;
+    if (nextIndex < 0 && repeatedChar) {
+      appliedBuffer = key.toLocaleLowerCase();
+      nextIndex = findTypeaheadMatch(appliedBuffer, startIndex);
+    }
+    if (typeaheadTimeoutRef.current) clearTimeout(typeaheadTimeoutRef.current);
+    typeaheadRef.current = appliedBuffer;
+    typeaheadTimeoutRef.current = setTimeout(() => {
+      typeaheadRef.current = "";
+      typeaheadTimeoutRef.current = null;
+    }, 500);
+    if (nextIndex < 0) return;
+    setActiveIndex(nextIndex);
+    if (!open) setOpen(true);
+  };
+  const handleKeyDown = (e) => {
+    var _a, _b;
+    if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
+      e.preventDefault();
+      handleTypeahead(e.key);
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+        }
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+        }
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        typeaheadRef.current = "";
+        if (typeaheadTimeoutRef.current) {
+          clearTimeout(typeaheadTimeoutRef.current);
+          typeaheadTimeoutRef.current = null;
+        }
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        const opt = options[activeIndex];
+        if (opt) {
+          onChange(opt.value);
+          (_a = popoverRef.current) == null ? void 0 : _a.close();
+        }
+        break;
+      }
+      case "Escape": {
+        if (!open) return;
+        e.preventDefault();
+        (_b = popoverRef.current) == null ? void 0 : _b.close();
+        break;
+      }
+      case "Home": {
+        if (!open) return;
+        e.preventDefault();
+        setActiveIndex(0);
+        break;
+      }
+      case "End": {
+        if (!open) return;
+        e.preventDefault();
+        setActiveIndex(options.length - 1);
+        break;
+      }
+    }
+  };
+  const selected = options.find((o) => o.value === selectedValue);
+  const tooltipEnabled = Boolean(tooltip);
+  const { triggerProps, id: tooltipId } = useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  const describedBy = (() => {
+    const ids = [];
+    if (error || helpText) ids.push(describedById);
+    if (tooltipEnabled) ids.push(tooltipId);
+    return ids.length ? ids.join(" ") : void 0;
+  })();
+  return /* @__PURE__ */ jsxs(
+    InputContainer,
+    {
+      label,
+      htmlFor: controlId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      modified,
+      children: [
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            ref: popoverRef,
+            open,
+            fullWidth,
+            onOpenChange: (next) => {
+              setOpen(next);
+              if (next) resetActiveToSelected();
+            },
+            contentId: listboxId,
+            autoFocusContent: false,
+            returnFocus: true,
+            trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled,
+                ...tooltipEnabled ? triggerProps : {},
+                id: controlId,
+                "data-cy": dataCy != null ? dataCy : "select-button",
+                onKeyDown: handleKeyDown,
+                fullWidth,
+                variant,
+                onClick: (e) => {
+                  resetActiveToSelected();
+                  toggle(e);
+                },
+                size,
+                style: minWidth != null ? { minWidth } : void 0,
+                type: "button",
+                "data-forminput": true,
+                "aria-haspopup": "listbox",
+                "aria-expanded": !!isOpen,
+                "aria-controls": listboxId,
+                "aria-invalid": Boolean(error) || void 0,
+                "aria-describedby": describedBy,
+                className: modified ? styles.triggerModified : void 0,
+                children: /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+                    style: { width: "100%" },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
+                      /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
+                        onClear && selected && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
+                        /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ),
+            children: /* @__PURE__ */ jsxs(Menu, { onKeyDown: handleKeyDown, role: "listbox", className: styles.menu, children: [
+              menuHeader ? /* @__PURE__ */ jsx(Menu.Header, { children: menuHeader }) : null,
+              options.map((opt, index) => {
+                const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
+                const isActive = index === activeIndex;
+                return /* @__PURE__ */ jsx(
+                  Menu.Item,
+                  {
+                    active: isActive,
+                    selected: isSelected,
+                    itemRole: "option",
+                    className: isSelected ? styles.selectedOption : void 0,
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        ref: (el) => {
+                          optionRefs.current[index] = el;
+                        },
+                        type: "button",
+                        tabIndex: isActive ? 0 : -1,
+                        onClick: () => {
+                          var _a;
+                          onChange(opt.value);
+                          (_a = popoverRef.current) == null ? void 0 : _a.close();
+                        },
+                        onFocus: () => setActiveIndex(index),
+                        style: { display: "flex", alignItems: "center", width: "100%" },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsx(Check, {}) : null }),
+                          opt.label
+                        ]
+                      }
+                    )
+                  },
+                  String(opt.value)
+                );
+              })
+            ] })
+          }
+        ),
+        (error || helpText) && /* @__PURE__ */ jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
+      ]
+    }
+  );
+}
+
+export { Select };

package/dist/components/forms/select/Select.module.css

@@ -0,0 +1,41 @@
+.triggerModified {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 45%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+  border-left-width: 4px;
+}
+
+.triggerModified:hover:not([disabled]) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 60%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+}
+
+.triggerModified:focus-visible {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 75%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+}
+
+.selectedOption > button {
+  background-color: var(--color-bg-toolbar-hover);
+}
+
+.selectedOption > button:hover,
+.selectedOption > button:focus-visible {
+  background-color: var(--color-bg-toolbar-hover);
+}

package/dist/components/forms/switch/Switch.cjs

@@ -0,0 +1,93 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Tooltip = require('../../../components/overlay/tooltip/Tooltip');
+var styles = require('./Switch.module.css');
+var InputContainer = require('../input-container/InputContainer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Switch({
+  checked: controlled,
+  onChange,
+  disabled,
+  modified,
+  label,
+  labelAs = "label",
+  endAdornment,
+  endAdornmentAriaHidden = true,
+  size = "md",
+  containerLabel,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required = false,
+  noContainer = false,
+  id,
+  "data-cy": dataCy,
+  tooltip,
+  tooltipPlacement
+}) {
+  const [internal, setInternal] = react.useState(false);
+  const isChecked = controlled != null ? controlled : internal;
+  const generatedId = react.useId();
+  const controlId = id != null ? id : `switch-${generatedId}`;
+  const toggle = (e) => {
+    if (disabled) return;
+    const value = !isChecked;
+    setInternal(value);
+    onChange == null ? void 0 : onChange(value, e);
+  };
+  const trackClass = [styles__default.default.switch, isChecked ? styles__default.default.on : "", size === "sm" ? styles__default.default.sm : ""].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: [styles__default.default.container, size === "sm" ? styles__default.default.containerSm : ""].filter(Boolean).join(" "),
+      "data-cy": dataCy,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            id: controlId,
+            disabled,
+            type: "button",
+            role: "switch",
+            "aria-checked": isChecked,
+            "aria-disabled": disabled || void 0,
+            "aria-invalid": Boolean(error) || void 0,
+            onClick: toggle,
+            className: trackClass,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.thumb, "aria-hidden": "true" })
+          }
+        ) }),
+        label && (labelAs === "label" ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })),
+        endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+      ]
+    }
+  );
+  if (noContainer) return content;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      modified,
+      label: containerLabel,
+      htmlFor: controlId,
+      error,
+      helpText,
+      orientation,
+      size,
+      labelWidth,
+      fullWidth,
+      required,
+      children: content
+    }
+  );
+}
+
+exports.Switch = Switch;

package/dist/components/forms/switch/Switch.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { JSX, ReactNode } from 'react';
+import type { TooltipPlacement } from '../../../components/overlay/tooltip/TooltipProvider';
+type Size = 'sm' | 'md';
+interface SwitchProps {
+    checked?: boolean;
+    onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    modified?: boolean;
+    label?: ReactNode;
+    labelAs?: 'label' | 'span';
+    /**
+     * Extra content rendered after the label (e.g. a status dot or badge).
+     * The component owns the layout/spacing for this slot.
+     */
+    endAdornment?: ReactNode;
+    /**
+     * Whether the endAdornment wrapper is hidden from assistive tech.
+     * Defaults to true since endAdornment is typically decorative.
+     */
+    endAdornmentAriaHidden?: boolean;
+    size?: Size;
+    containerLabel?: string;
+    error?: string;
+    helpText?: string;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    noContainer?: boolean;
+    id?: string;
+    'data-cy'?: string;
+    tooltip?: ReactNode;
+    tooltipPlacement?: TooltipPlacement;
+}
+export declare function Switch({ checked: controlled, onChange, disabled, modified, label, labelAs, endAdornment, endAdornmentAriaHidden, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: SwitchProps): JSX.Element;
+export {};

package/dist/components/forms/switch/Switch.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useId } from 'react';
+import { Tooltip } from '../../../components/overlay/tooltip/Tooltip';
+import styles from './Switch.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+function Switch({
+  checked: controlled,
+  onChange,
+  disabled,
+  modified,
+  label,
+  labelAs = "label",
+  endAdornment,
+  endAdornmentAriaHidden = true,
+  size = "md",
+  containerLabel,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required = false,
+  noContainer = false,
+  id,
+  "data-cy": dataCy,
+  tooltip,
+  tooltipPlacement
+}) {
+  const [internal, setInternal] = useState(false);
+  const isChecked = controlled != null ? controlled : internal;
+  const generatedId = useId();
+  const controlId = id != null ? id : `switch-${generatedId}`;
+  const toggle = (e) => {
+    if (disabled) return;
+    const value = !isChecked;
+    setInternal(value);
+    onChange == null ? void 0 : onChange(value, e);
+  };
+  const trackClass = [styles.switch, isChecked ? styles.on : "", size === "sm" ? styles.sm : ""].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: [styles.container, size === "sm" ? styles.containerSm : ""].filter(Boolean).join(" "),
+      "data-cy": dataCy,
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            id: controlId,
+            disabled,
+            type: "button",
+            role: "switch",
+            "aria-checked": isChecked,
+            "aria-disabled": disabled || void 0,
+            "aria-invalid": Boolean(error) || void 0,
+            onClick: toggle,
+            className: trackClass,
+            children: /* @__PURE__ */ jsx("span", { className: styles.thumb, "aria-hidden": "true" })
+          }
+        ) }),
+        label && (labelAs === "label" ? /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsx("span", { className: styles.label, children: label })),
+        endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+      ]
+    }
+  );
+  if (noContainer) return content;
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      modified,
+      label: containerLabel,
+      htmlFor: controlId,
+      error,
+      helpText,
+      orientation,
+      size,
+      labelWidth,
+      fullWidth,
+      required,
+      children: content
+    }
+  );
+}
+
+export { Switch };

package/dist/components/forms/switch/Switch.module.css

@@ -0,0 +1,89 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  vertical-align: middle;
+  line-height: var(--line-height-normal);
+  color: var(--color-fg-default);
+}
+
+.containerSm {
+  gap: var(--spacing-xs);
+}
+
+.switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  border: none;
+  background-color: var(--color-border-default);
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+.switch.sm {
+  width: 28px;
+  height: 16px;
+}
+
+.switch:hover {
+  opacity: 0.75;
+}
+
+.switch.on {
+  background-color: var(--color-brand);
+}
+
+.switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.thumb {
+  position: absolute;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--color-fg-inverse);
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--transition-fast) var(--ease-standard);
+  pointer-events: none;
+}
+
+.switch.sm .thumb {
+  width: 12px;
+  height: 12px;
+}
+
+.switch.on .thumb {
+  transform: translateX(16px);
+}
+
+.switch.sm.on .thumb {
+  transform: translateX(12px);
+}
+
+.label {
+  display: block;
+  font-size: var(--font-size-sm);
+  min-width: 0;
+  flex: 1 1 auto;
+  line-height: var(--line-height-normal);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.endAdornment {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}