@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/forms/multi-select/MultiSelect.js

@@ -0,0 +1,227 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Search, Check, Square } from 'lucide-react';
+import { useMemo, useRef, useState, useEffect } from 'react';
+import { Button } from '../../../components/button/Button';
+import { Chip } from '../../../components/chip/Chip';
+import { ClearButton } from '../../../components/clear-button/ClearButton';
+import { Input } from '../../../components/forms/input/Input';
+import { Menu } from '../../../components/menu/Menu';
+import { Popover } from '../../../components/popover/Popover';
+import { useListNavigation } from '../../../hooks/useListNavigation';
+
+function MultiSelect({
+  options,
+  selectedValues = [],
+  onChange,
+  placeholder = "V\xE6lg",
+  children,
+  variant = "outlined",
+  size = "md",
+  onClear,
+  dataCy,
+  fullWidth = false,
+  disabled = false,
+  searchable = false,
+  searchPlaceholder = "S\xF8g",
+  emptyMessage = "Ingen resultater",
+  popoverWidth
+}) {
+  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const popoverRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const filteredOptions = useMemo(() => {
+    const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
+    if (!normalizedQuery) return options;
+    return options.filter((option) => option.label.toLocaleLowerCase().includes(normalizedQuery));
+  }, [options, searchQuery]);
+  const {
+    activeIndex,
+    setActiveIndex,
+    optionRefs,
+    resetActiveIndex,
+    clearTypeahead,
+    handleKeyDown
+  } = useListNavigation({
+    options: filteredOptions,
+    getLabel: (option) => option.label,
+    isOpen: open,
+    onOpenChange: setOpen,
+    searchable,
+    searchInputRef,
+    getInitialActiveIndex: (items) => {
+      const selectedIndex = items.findIndex((option) => selectedSet.has(option.value));
+      return selectedIndex >= 0 ? selectedIndex : 0;
+    }
+  });
+  useEffect(() => {
+    var _a;
+    if (!open || !searchable) return;
+    (_a = searchInputRef.current) == null ? void 0 : _a.focus();
+  }, [open, searchable]);
+  const toggleValue = (value) => {
+    if (disabled) return;
+    const next = new Set(selectedSet);
+    if (next.has(value)) next.delete(value);
+    else next.add(value);
+    onChange(Array.from(next));
+  };
+  const handleCombinedKeyDown = (e) => {
+    var _a;
+    if (searchable && e.target === searchInputRef.current) {
+      switch (e.key) {
+        case "Enter":
+          if (filteredOptions[activeIndex]) {
+            e.preventDefault();
+            toggleValue(filteredOptions[activeIndex].value);
+          }
+          return;
+        case " ":
+          if (filteredOptions[activeIndex]) {
+            e.preventDefault();
+            toggleValue(filteredOptions[activeIndex].value);
+          }
+          return;
+        default:
+          handleKeyDown(e);
+          return;
+      }
+    }
+    switch (e.key) {
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        clearTypeahead();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        const activeOption = filteredOptions[activeIndex];
+        if (activeOption) toggleValue(activeOption.value);
+        return;
+      }
+      case "Escape":
+        if (!open) return;
+        e.preventDefault();
+        (_a = popoverRef.current) == null ? void 0 : _a.close();
+        return;
+      default:
+        handleKeyDown(e);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      ref: popoverRef,
+      open,
+      minWidth: popoverWidth,
+      onOpenChange: (next) => {
+        setOpen(next);
+        if (next) {
+          resetActiveIndex();
+        } else {
+          setSearchQuery("");
+        }
+      },
+      dataCy,
+      fullWidth,
+      autoFocusContent: false,
+      returnFocus: true,
+      trigger: (onClick, icon, isOpen) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant,
+          onClick,
+          onKeyDown: handleCombinedKeyDown,
+          size,
+          fullWidth,
+          disabled,
+          "aria-haspopup": "menu",
+          "aria-expanded": !!isOpen,
+          children: /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+              style: { width: "100%" },
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
+                  /* @__PURE__ */ jsx("span", { children: children != null ? children : placeholder }),
+                  selectedValues.length > 0 ? /* @__PURE__ */ jsx(Chip, { size: "sm", children: selectedValues.length }) : null
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
+                  onClear && selectedValues.length > 0 ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }) : null,
+                  /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      children: /* @__PURE__ */ jsxs(Menu, { onKeyDown: handleCombinedKeyDown, children: [
+        searchable ? /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: searchInputRef,
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            onKeyDown: handleCombinedKeyDown,
+            placeholder: searchPlaceholder,
+            icon: /* @__PURE__ */ jsx(Search, { size: 16 }),
+            fullWidth: true
+          }
+        ) }) : null,
+        filteredOptions.map((option, index) => {
+          const isSelected = selectedSet.has(option.value);
+          const isActive = index === activeIndex;
+          return /* @__PURE__ */ jsx(Menu.Item, { active: isActive, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (el) => {
+                if (optionRefs.current) {
+                  optionRefs.current[index] = el;
+                }
+              },
+              type: "button",
+              role: "menuitemcheckbox",
+              "aria-checked": isSelected,
+              tabIndex: isActive ? 0 : -1,
+              disabled,
+              onFocus: () => setActiveIndex(index),
+              onClick: () => toggleValue(option.value),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      pointerEvents: "none",
+                      display: "flex",
+                      alignItems: "center",
+                      color: !isSelected ? "var(--color-border-strong)" : "inherit"
+                    },
+                    children: isSelected ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Square, {})
+                  }
+                ),
+                option.icon ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      pointerEvents: "none",
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: option.icon
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("span", { children: option.label })
+              ]
+            }
+          ) }, option.value);
+        }),
+        filteredOptions.length === 0 ? /* @__PURE__ */ jsx(Menu.Item, { disabled: true, children: emptyMessage }) : null
+      ] })
+    }
+  );
+}
+
+export { MultiSelect };

package/dist/components/forms/radio-buttons/RadioButton.cjs

@@ -0,0 +1,94 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./RadioButtons.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 RadioButton({
+  name,
+  value,
+  selectedValue,
+  checked,
+  onChange,
+  disabled,
+  label,
+  endAdornment,
+  endAdornmentAriaHidden = true,
+  variant = "outlined",
+  size = "md",
+  containerLabel,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required = false,
+  noContainer = false,
+  id,
+  "data-cy": dataCy
+}) {
+  const generatedId = react.useId();
+  const controlId = id != null ? id : `radio-${generatedId}`;
+  const isChecked = selectedValue !== void 0 ? selectedValue === value : Boolean(checked);
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.container, "data-cy": dataCy, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.controlWrap, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: controlId,
+          className: styles__default.default.input,
+          type: "radio",
+          name,
+          value,
+          checked: isChecked,
+          disabled,
+          required,
+          "aria-invalid": Boolean(error) || void 0,
+          onChange: (e) => {
+            if (disabled) return;
+            onChange == null ? void 0 : onChange(e.target.value, e);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: [
+            styles__default.default.radio,
+            isChecked ? styles__default.default.checked : "",
+            disabled ? styles__default.default.disabled : "",
+            styles__default.default[variant],
+            styles__default.default[size]
+          ].filter(Boolean).join(" "),
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.dot })
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, htmlFor: controlId, children: label }),
+    endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+  ] });
+  if (noContainer || !containerLabel && !error) return content;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      label: containerLabel,
+      htmlFor: controlId,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      children: content
+    }
+  );
+}
+
+exports.RadioButton = RadioButton;

package/dist/components/forms/radio-buttons/RadioButton.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { JSX } from 'react';
+type Variant = 'default' | 'primary' | 'outlined';
+type Size = 'sm' | 'md' | 'lg';
+export interface RadioButtonProps {
+    /** group name (required for radio behavior) */
+    name: string;
+    /** this option's value */
+    value: string;
+    /** controlled selected value for the group */
+    selectedValue?: string;
+    /** uncontrolled checked (rare; prefer selectedValue on group) */
+    checked?: boolean;
+    /** called with (value, event) */
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    label?: string;
+    /**
+     * Extra content rendered after the label (e.g. a status dot or badge).
+     * The component owns the layout/spacing for this slot.
+     */
+    endAdornment?: React.ReactNode;
+    /**
+     * Whether the endAdornment wrapper is hidden from assistive tech.
+     * Defaults to true since endAdornment is typically decorative.
+     */
+    endAdornmentAriaHidden?: boolean;
+    variant?: Variant;
+    size?: Size;
+    containerLabel?: string;
+    error?: string;
+    helpText?: string;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    /**
+     * If true, do NOT wrap with InputContainer.
+     * Use inside RadioGroup.
+     */
+    noContainer?: boolean;
+    id?: string;
+    'data-cy'?: string;
+}
+export declare function RadioButton({ name, value, selectedValue, checked, onChange, disabled, label, endAdornment, endAdornmentAriaHidden, variant, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: RadioButtonProps): JSX.Element;
+export {};

package/dist/components/forms/radio-buttons/RadioButton.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import styles from './RadioButtons.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+function RadioButton({
+  name,
+  value,
+  selectedValue,
+  checked,
+  onChange,
+  disabled,
+  label,
+  endAdornment,
+  endAdornmentAriaHidden = true,
+  variant = "outlined",
+  size = "md",
+  containerLabel,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required = false,
+  noContainer = false,
+  id,
+  "data-cy": dataCy
+}) {
+  const generatedId = useId();
+  const controlId = id != null ? id : `radio-${generatedId}`;
+  const isChecked = selectedValue !== void 0 ? selectedValue === value : Boolean(checked);
+  const content = /* @__PURE__ */ jsxs("span", { className: styles.container, "data-cy": dataCy, children: [
+    /* @__PURE__ */ jsxs("span", { className: styles.controlWrap, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: controlId,
+          className: styles.input,
+          type: "radio",
+          name,
+          value,
+          checked: isChecked,
+          disabled,
+          required,
+          "aria-invalid": Boolean(error) || void 0,
+          onChange: (e) => {
+            if (disabled) return;
+            onChange == null ? void 0 : onChange(e.target.value, e);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: [
+            styles.radio,
+            isChecked ? styles.checked : "",
+            disabled ? styles.disabled : "",
+            styles[variant],
+            styles[size]
+          ].filter(Boolean).join(" "),
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("span", { className: styles.dot })
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label }),
+    endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+  ] });
+  if (noContainer || !containerLabel && !error) return content;
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      label: containerLabel,
+      htmlFor: controlId,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      children: content
+    }
+  );
+}
+
+export { RadioButton };

package/dist/components/forms/radio-buttons/RadioButtonGroup.cjs

@@ -0,0 +1,74 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var RadioButton = require('./RadioButton');
+var InputContainer = require('../input-container/InputContainer');
+
+function RadioButtonGroup({
+  name,
+  value,
+  onChange,
+  options,
+  disabled = false,
+  label,
+  error,
+  helpText,
+  required = false,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  modified = false,
+  direction = "column",
+  "data-cy": dataCy
+}) {
+  const generated = react.useId();
+  const groupName = name != null ? name : `radio-group-${generated}`;
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-invalid": Boolean(error) || void 0,
+      "data-cy": dataCy,
+      style: {
+        display: "flex",
+        flexDirection: direction,
+        gap: "8px"
+      },
+      children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+        RadioButton.RadioButton,
+        {
+          noContainer: true,
+          name: groupName,
+          value: String(opt.value),
+          selectedValue: value != null ? value : void 0,
+          disabled: disabled || opt.disabled,
+          label: opt.label,
+          required,
+          onChange: (v) => onChange(v),
+          "data-cy": dataCy ? `${dataCy}-option-${String(opt.value)}` : void 0
+        },
+        String(opt.value)
+      ))
+    }
+  );
+  if (!label && !error) return content;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      label,
+      htmlFor: void 0,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      modified,
+      children: content
+    }
+  );
+}
+
+exports.RadioButtonGroup = RadioButtonGroup;

package/dist/components/forms/radio-buttons/RadioButtonGroup.d.ts

@@ -0,0 +1,25 @@
+import type { JSX } from 'react';
+export type RadioOption<V extends string = string> = {
+    label: string;
+    value: V;
+    disabled?: boolean;
+};
+export interface RadioGroupProps<V extends string = string> {
+    name?: string;
+    value: V | null;
+    onChange: (value: V) => void;
+    options: RadioOption<V>[];
+    disabled?: boolean;
+    label?: string;
+    error?: string;
+    helpText?: string;
+    required?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    modified?: boolean;
+    /** layout of radios themselves */
+    direction?: 'row' | 'column';
+    'data-cy'?: string;
+}
+export declare function RadioButtonGroup<V extends string = string>({ name, value, onChange, options, disabled, label, error, helpText, required, orientation, labelWidth, fullWidth, modified, direction, 'data-cy': dataCy, }: RadioGroupProps<V>): JSX.Element;

package/dist/components/forms/radio-buttons/RadioButtonGroup.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { RadioButton } from './RadioButton';
+import { InputContainer } from '../input-container/InputContainer';
+
+function RadioButtonGroup({
+  name,
+  value,
+  onChange,
+  options,
+  disabled = false,
+  label,
+  error,
+  helpText,
+  required = false,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  modified = false,
+  direction = "column",
+  "data-cy": dataCy
+}) {
+  const generated = useId();
+  const groupName = name != null ? name : `radio-group-${generated}`;
+  const content = /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-invalid": Boolean(error) || void 0,
+      "data-cy": dataCy,
+      style: {
+        display: "flex",
+        flexDirection: direction,
+        gap: "8px"
+      },
+      children: options.map((opt) => /* @__PURE__ */ jsx(
+        RadioButton,
+        {
+          noContainer: true,
+          name: groupName,
+          value: String(opt.value),
+          selectedValue: value != null ? value : void 0,
+          disabled: disabled || opt.disabled,
+          label: opt.label,
+          required,
+          onChange: (v) => onChange(v),
+          "data-cy": dataCy ? `${dataCy}-option-${String(opt.value)}` : void 0
+        },
+        String(opt.value)
+      ))
+    }
+  );
+  if (!label && !error) return content;
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      label,
+      htmlFor: void 0,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      modified,
+      children: content
+    }
+  );
+}
+
+export { RadioButtonGroup };