@dbcdk/react-components 0.0.168 → 0.0.169

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

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

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

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

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

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

@@ -1,26 +0,0 @@
-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 {};