@dbcdk/react-components 0.0.167 → 0.0.169

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

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

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

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

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

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

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

@@ -1,72 +0,0 @@
-'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 };