@dbcdk/react-components 0.0.103 → 0.0.104

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

@@ -0,0 +1,227 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Button = require('../../../components/button/Button');
+var Chip = require('../../../components/chip/Chip');
+var ClearButton = require('../../../components/clear-button/ClearButton');
+var Input = require('../../../components/forms/input/Input');
+var Menu = require('../../../components/menu/Menu');
+var Popover = require('../../../components/popover/Popover');
+var useListNavigation = require('../../../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"
+}) {
+  const selectedSet = react.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const popoverRef = react.useRef(null);
+  const searchInputRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const filteredOptions = react.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.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;
+    }
+  });
+  react.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__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      ref: popoverRef,
+      open,
+      onOpenChange: (next) => {
+        setOpen(next);
+        if (next) {
+          resetActiveIndex();
+        } else {
+          setSearchQuery("");
+        }
+      },
+      dataCy,
+      fullWidth,
+      autoFocusContent: false,
+      returnFocus: true,
+      trigger: (onClick, icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          variant,
+          onClick,
+          onKeyDown: handleCombinedKeyDown,
+          size,
+          fullWidth,
+          disabled,
+          "aria-haspopup": "menu",
+          "aria-expanded": !!isOpen,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+              style: { width: "100%" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: children != null ? children : placeholder }),
+                  selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: selectedValues.length }) : null
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
+                  onClear && selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { onKeyDown: handleCombinedKeyDown, children: [
+        searchable ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input.Input,
+          {
+            ref: searchInputRef,
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            onKeyDown: handleCombinedKeyDown,
+            placeholder: searchPlaceholder,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16 }),
+            fullWidth: true
+          }
+        ) }) : null,
+        filteredOptions.map((option, index) => {
+          const isSelected = selectedSet.has(option.value);
+          const isActive = index === activeIndex;
+          return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: isActive, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      pointerEvents: "none",
+                      display: "flex",
+                      alignItems: "center",
+                      color: !isSelected ? "var(--color-border-strong)" : "inherit"
+                    },
+                    children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, {})
+                  }
+                ),
+                option.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      pointerEvents: "none",
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: option.icon
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+              ]
+            }
+          ) }, option.value);
+        }),
+        filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { disabled: true, children: emptyMessage }) : null
+      ] })
+    }
+  );
+}
+
+exports.MultiSelect = MultiSelect;

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

@@ -0,0 +1,225 @@
+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"
+}) {
+  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,
+      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,91 @@
+'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,
+  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 })
+  ] });
+  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.js

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