@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/forms/input-container/InputContainer.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./InputContainer.module.css');
+var InlineStatus = require('../../inline-status/InlineStatus');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function InputContainer({
+  label,
+  labelAction,
+  htmlFor,
+  error,
+  helpText,
+  helpTextAddition,
+  fullWidth = false,
+  required = false,
+  children,
+  orientation = "horizontal",
+  size = "md",
+  labelWidth = "160px",
+  modified = false
+}) {
+  const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles__default.default.label, htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.required, children: " *" })
+    ] }),
+    labelAction && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-input-container-label-action": "true", children: labelAction })
+  ] });
+  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${error ? styles__default.default.errorText : styles__default.default.helpText} ${styles__default.default.messageRow}`, children: error ? /* @__PURE__ */ jsxRuntime.jsx(InlineStatus.InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: helpText }),
+    helpTextAddition && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helpTextAddition, children: helpTextAddition })
+  ] }) });
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-modified": modified ? "true" : void 0,
+        className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles__default.default.inputContainer}`,
+        style: { width: fullWidth ? "100%" : void 0 },
+        children: [
+          renderLabelRow,
+          children,
+          renderMessageRow
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-modified": modified ? "true" : void 0,
+      className: styles__default.default.inputContainer,
+      style: {
+        "--label-width": labelWidth,
+        width: fullWidth ? "100%" : void 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, "data-size": size, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [
+          renderLabelRow,
+          children
+        ] }),
+        renderMessageRow
+      ] })
+    }
+  );
+}
+
+exports.InputContainer = InputContainer;

package/dist/components/forms/input-container/InputContainer.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface InputContainerProps {
+    label?: string;
+    labelAction?: React.ReactNode;
+    htmlFor?: string;
+    error?: string;
+    helpText?: string;
+    helpTextAddition?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    children: React.ReactNode;
+    orientation?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    labelWidth?: string;
+    labelAlignment?: 'top' | 'center';
+    modified?: boolean;
+}
+export declare function InputContainer({ label, labelAction, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, size, labelWidth, modified, }: InputContainerProps): React.ReactElement;

package/dist/components/forms/input-container/InputContainer.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import styles from './InputContainer.module.css';
+import { InlineStatus } from '../../inline-status/InlineStatus';
+
+function InputContainer({
+  label,
+  labelAction,
+  htmlFor,
+  error,
+  helpText,
+  helpTextAddition,
+  fullWidth = false,
+  required = false,
+  children,
+  orientation = "horizontal",
+  size = "md",
+  labelWidth = "160px",
+  modified = false
+}) {
+  const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxs("div", { className: `${styles.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: styles.label, htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: styles.required, children: " *" })
+    ] }),
+    labelAction && /* @__PURE__ */ jsx("span", { "data-input-container-label-action": "true", children: labelAction })
+  ] });
+  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsx("div", { className: `${error ? styles.errorText : styles.helpText} ${styles.messageRow}`, children: error ? /* @__PURE__ */ jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: helpText }),
+    helpTextAddition && /* @__PURE__ */ jsx("span", { className: styles.helpTextAddition, children: helpTextAddition })
+  ] }) });
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-modified": modified ? "true" : void 0,
+        className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles.inputContainer}`,
+        style: { width: fullWidth ? "100%" : void 0 },
+        children: [
+          renderLabelRow,
+          children,
+          renderMessageRow
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-modified": modified ? "true" : void 0,
+      className: styles.inputContainer,
+      style: {
+        "--label-width": labelWidth,
+        width: fullWidth ? "100%" : void 0
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: `${styles.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, "data-size": size, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${styles.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [
+          renderLabelRow,
+          children
+        ] }),
+        renderMessageRow
+      ] })
+    }
+  );
+}
+
+export { InputContainer };

package/dist/components/forms/input-container/InputContainer.module.css

@@ -0,0 +1,59 @@
+.horizontal {
+  --gap: var(--spacing-sm);
+}
+
+.horizontal[data-size='sm'] {
+  --gap: var(--spacing-xs);
+}
+
+.labelContainer {
+  gap: var(--gap);
+}
+
+.label {
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.horizontal .errorText,
+.horizontal .helpText {
+  margin-left: calc(var(--label-width) + var(--gap));
+}
+
+.helpText {
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.helpTextAddition {
+  color: var(--color-fg-subtle);
+}
+
+.horizontal label {
+  width: var(--label-width);
+}
+
+.errorText {
+  color: var(--color-status-error);
+  font-size: var(--font-size-sm);
+}
+
+.required {
+  color: var(--color-status-error);
+  font-weight: bold;
+}
+
+.messageRow {
+  min-height: 1lh;
+}
+
+/* Optional: keep this only for controls whose own label lives inside children,
+   such as checkbox/radio wrappers. It will not affect Input's top label. */
+.inputContainer[data-modified] label:not(.label) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
+  border-radius: var(--border-radius-default);
+}

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

@@ -0,0 +1,229 @@
+'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",
+  popoverWidth
+}) {
+  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,
+      minWidth: popoverWidth,
+      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.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { ButtonVariant } from '../../../components/button/Button';
+export interface MultiselectOption<T> {
+    label: string;
+    value: T;
+    icon?: ReactNode;
+}
+interface MultiSelectProps<T> {
+    options: MultiselectOption<T>[];
+    selectedValues: T[];
+    onChange: (nextSelectedValues: T[]) => void;
+    placeholder?: string;
+    children?: ReactNode;
+    variant?: ButtonVariant;
+    size?: 'sm' | 'md' | 'lg';
+    onClear?: () => void;
+    dataCy?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    popoverWidth?: string;
+}
+export declare function MultiSelect<T extends string | number>({ options, selectedValues, onChange, placeholder, children, variant, size, onClear, dataCy, fullWidth, disabled, searchable, searchPlaceholder, emptyMessage, popoverWidth, }: MultiSelectProps<T>): ReactNode;
+export {};