@dbcdk/react-components 0.0.167 → 0.0.169

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

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

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

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

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

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

@@ -1,89 +0,0 @@
-.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;
-}