@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/forms/checkbox-group/CheckboxGroup.module.css

@@ -0,0 +1,115 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-direction: row; /* keep on one line */
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+/* Heights aligned with other controls */
+.xs {
+  min-height: var(--component-size-xs);
+}
+
+.sm {
+  min-height: var(--component-size-sm);
+}
+
+.md {
+  min-height: var(--component-size-md);
+}
+
+.lg {
+  min-height: var(--component-size-lg);
+}
+
+/* Subtle container (lightweight) */
+.contained {
+  padding: 0 var(--spacing-xs);
+  border: var(--border-width-thin) solid var(--color-border-subtle);
+  border-radius: var(--border-radius-default);
+  background: var(--color-bg-surface);
+}
+
+.plain {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.groupLabel {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-muted);
+  white-space: nowrap;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+}
+
+.items {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.wrap {
+  flex-wrap: wrap;
+}
+
+.noWrap {
+  flex-wrap: nowrap;
+}
+
+/* Right action */
+.actionButton {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin-left: auto;
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+
+  height: 100%;
+}
+
+.actionButton:disabled {
+  cursor: not-allowed;
+}
+
+.actionText {
+  display: inline-block;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  text-align: right;
+
+  min-width: var(--checkboxgroup-action-min-width, 4ch);
+  color: var(--color-link);
+}
+
+.actionText[data-mode='all'] {
+  color: var(--color-link);
+}
+
+.actionText[data-mode='clear'] {
+  color: var(--color-link);
+}
+
+.actionButton:not(:disabled):hover .actionText {
+  color: var(--color-link-hover);
+  text-decoration: underline;
+}
+
+.actionButton:focus-visible {
+  outline: 2px solid var(--color-border-strong);
+  outline-offset: 3px;
+  border-radius: var(--border-radius-rounded);
+}

package/dist/components/forms/file-upload/FileUpload.cjs

@@ -0,0 +1,127 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./FileUpload.module.css');
+var InputContainer = require('../input-container/InputContainer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const FileUpload = react.forwardRef(function FileUpload2({
+  label,
+  labelAction,
+  error,
+  helpText,
+  helpTextAddition,
+  orientation = "vertical",
+  labelWidth,
+  fullWidth = false,
+  required,
+  modified,
+  onChange,
+  children,
+  hint,
+  height,
+  minWidth,
+  width,
+  maxWidth,
+  id,
+  disabled,
+  className,
+  ...inputProps
+}, ref) {
+  const reactId = react.useId();
+  const inputId = id != null ? id : `file-upload-${reactId}`;
+  const inputRef = react.useRef(null);
+  const [dragging, setDragging] = react.useState(false);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      clear() {
+        if (inputRef.current) inputRef.current.value = "";
+      }
+    }),
+    []
+  );
+  function handleDragOver(e) {
+    e.preventDefault();
+    if (!disabled) setDragging(true);
+  }
+  function handleDragLeave(e) {
+    if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+  }
+  function handleDrop(e) {
+    e.preventDefault();
+    setDragging(false);
+    if (disabled) return;
+    if (inputRef.current) {
+      const dt = e.dataTransfer;
+      const files = dt.files;
+      onChange == null ? void 0 : onChange(files.length > 0 ? files : null);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      label,
+      labelAction,
+      htmlFor: inputId,
+      error,
+      helpText,
+      helpTextAddition,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      modified,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: [
+            styles__default.default.dropzone,
+            dragging ? styles__default.default.dragging : "",
+            disabled ? styles__default.default.disabled : "",
+            error ? styles__default.default.hasError : "",
+            fullWidth ? styles__default.default.fullWidth : "",
+            className != null ? className : ""
+          ].filter(Boolean).join(" "),
+          style: {
+            ...height != null ? { height } : void 0,
+            ...minWidth != null ? { minWidth } : void 0,
+            ...width != null ? { width } : void 0,
+            ...maxWidth != null ? { maxWidth } : void 0
+          },
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...inputProps,
+                ref: inputRef,
+                id: inputId,
+                type: "file",
+                disabled,
+                className: styles__default.default.input,
+                onChange: (e) => onChange == null ? void 0 : onChange(e.target.files)
+              }
+            ),
+            children != null ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloud, { className: styles__default.default.icon, "aria-hidden": true }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.hint, children: hint != null ? hint : "Tr\xE6k filer hertil eller klik for at v\xE6lge" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+FileUpload.displayName = "FileUpload";
+
+exports.FileUpload = FileUpload;

package/dist/components/forms/file-upload/FileUpload.d.ts

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { InputContainerProps } from '../input-container/InputContainer';
+export interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'width' | 'onChange'>, Omit<InputContainerProps, 'children' | 'htmlFor' | 'size'> {
+    onChange?: (files: FileList | null) => void;
+    /** Custom content to replace the default icon + text hint */
+    children?: ReactNode;
+    /** Hint shown below the icon when no custom children */
+    hint?: ReactNode;
+    fullWidth?: boolean;
+    height?: number | string;
+    minWidth?: string | number;
+    width?: string | number;
+    maxWidth?: string | number;
+}
+export type FileUploadHandle = {
+    clear(): void;
+};
+export declare const FileUpload: import("react").ForwardRefExoticComponent<FileUploadProps & import("react").RefAttributes<FileUploadHandle>>;

package/dist/components/forms/file-upload/FileUpload.js

@@ -0,0 +1,121 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { UploadCloud } from 'lucide-react';
+import { forwardRef, useId, useRef, useState, useImperativeHandle } from 'react';
+import styles from './FileUpload.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+const FileUpload = forwardRef(function FileUpload2({
+  label,
+  labelAction,
+  error,
+  helpText,
+  helpTextAddition,
+  orientation = "vertical",
+  labelWidth,
+  fullWidth = false,
+  required,
+  modified,
+  onChange,
+  children,
+  hint,
+  height,
+  minWidth,
+  width,
+  maxWidth,
+  id,
+  disabled,
+  className,
+  ...inputProps
+}, ref) {
+  const reactId = useId();
+  const inputId = id != null ? id : `file-upload-${reactId}`;
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  useImperativeHandle(
+    ref,
+    () => ({
+      clear() {
+        if (inputRef.current) inputRef.current.value = "";
+      }
+    }),
+    []
+  );
+  function handleDragOver(e) {
+    e.preventDefault();
+    if (!disabled) setDragging(true);
+  }
+  function handleDragLeave(e) {
+    if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+  }
+  function handleDrop(e) {
+    e.preventDefault();
+    setDragging(false);
+    if (disabled) return;
+    if (inputRef.current) {
+      const dt = e.dataTransfer;
+      const files = dt.files;
+      onChange == null ? void 0 : onChange(files.length > 0 ? files : null);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      label,
+      labelAction,
+      htmlFor: inputId,
+      error,
+      helpText,
+      helpTextAddition,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      modified,
+      children: /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: [
+            styles.dropzone,
+            dragging ? styles.dragging : "",
+            disabled ? styles.disabled : "",
+            error ? styles.hasError : "",
+            fullWidth ? styles.fullWidth : "",
+            className != null ? className : ""
+          ].filter(Boolean).join(" "),
+          style: {
+            ...height != null ? { height } : void 0,
+            ...minWidth != null ? { minWidth } : void 0,
+            ...width != null ? { width } : void 0,
+            ...maxWidth != null ? { maxWidth } : void 0
+          },
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...inputProps,
+                ref: inputRef,
+                id: inputId,
+                type: "file",
+                disabled,
+                className: styles.input,
+                onChange: (e) => onChange == null ? void 0 : onChange(e.target.files)
+              }
+            ),
+            children != null ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(UploadCloud, { className: styles.icon, "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: styles.hint, children: hint != null ? hint : "Tr\xE6k filer hertil eller klik for at v\xE6lge" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+FileUpload.displayName = "FileUpload";
+
+export { FileUpload };

package/dist/components/forms/file-upload/FileUpload.module.css

@@ -0,0 +1,75 @@
+.dropzone {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xl) var(--spacing-lg);
+  background: var(--color-bg-surface);
+  border: var(--border-width-thin) dashed var(--color-border-default);
+  border-radius: var(--border-radius-default);
+  cursor: pointer;
+  color: var(--color-fg-muted);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  text-align: center;
+  box-sizing: border-box;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.dropzone:hover:not(.disabled) {
+  background-color: var(--color-bg-selected);
+  border-color: var(--color-border-selected);
+  color: var(--color-fg-default);
+}
+
+.dragging {
+  background-color: var(--color-bg-selected);
+  border-color: var(--color-border-selected);
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.hasError {
+  border-color: var(--color-status-error);
+}
+
+.hasError:hover:not(.disabled) {
+  border-color: var(--color-status-error);
+  background-color: var(--color-status-error-bg);
+}
+
+.disabled {
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+}
+
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.icon {
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
+  stroke-width: 1.5;
+  flex-shrink: 0;
+}
+
+.hint {
+  line-height: var(--line-height-normal);
+}

package/dist/components/forms/form-select/FormSelect.cjs

@@ -0,0 +1,191 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
+var styles = require('./FormSelect.module.css');
+var InputContainer = require('../input-container/InputContainer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function isEqualValue(a, b, datakey) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (typeof a === "object" && typeof b === "object" && datakey) {
+    return a[datakey] === b[datakey];
+  }
+  return false;
+}
+function serializeValue(value, datakey) {
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  if (datakey && value && typeof value === "object") {
+    const v = value[datakey];
+    return v == null ? "" : String(v);
+  }
+  throw new Error(
+    "FormSelect: option value is an object but no `datakey` was provided. Native select requires string/number values."
+  );
+}
+function findSelectedOption(options, selectedValue, datakey) {
+  return options.find((o) => isEqualValue(o.value, selectedValue, datakey));
+}
+function FormSelect({
+  // InputContainer props
+  label,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = true,
+  required,
+  tooltip,
+  tooltipPlacement = "right",
+  modified = false,
+  // FormSelect props
+  id,
+  name,
+  options,
+  selectedValue,
+  onChange,
+  placeholder = "V\xE6lg",
+  size = "md",
+  variant = "outlined",
+  onClear,
+  datakey,
+  dataCy,
+  disabled,
+  includePlaceholderOption = true,
+  allowClearWhenRequired = false
+}) {
+  const generatedId = React__namespace.useId();
+  const controlId = id != null ? id : `select-${generatedId}`;
+  const describedById = `${controlId}-desc`;
+  const selected = React__namespace.useMemo(
+    () => findSelectedOption(options, selectedValue, datakey),
+    [options, selectedValue, datakey]
+  );
+  const tooltipEnabled = Boolean(tooltip);
+  const { triggerProps, id: tooltipId } = useTooltipTrigger.useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  const describedBy = (() => {
+    const ids = [];
+    if (error || helpText) ids.push(describedById);
+    if (tooltipEnabled) ids.push(tooltipId);
+    return ids.length ? ids.join(" ") : void 0;
+  })();
+  const nativeValue = React__namespace.useMemo(() => {
+    if (selected && selected.value != null) return serializeValue(selected.value, datakey);
+    return "";
+  }, [selected, datakey]);
+  const canClear = Boolean(onClear) && !disabled && (allowClearWhenRequired || !required);
+  const showClear = canClear && Boolean(selected);
+  const placeholderDisabled = Boolean(required) && !allowClearWhenRequired;
+  const handleNativeChange = (e) => {
+    const raw = e.target.value;
+    if (raw === "") {
+      onClear == null ? void 0 : onClear();
+      return;
+    }
+    const opt = options.find((o) => serializeValue(o.value, datakey) === raw);
+    if (opt) onChange(opt.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    InputContainer.InputContainer,
+    {
+      label,
+      htmlFor: controlId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      modified,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: [
+              styles__default.default.container,
+              fullWidth ? styles__default.default.fullWidth : "",
+              canClear ? styles__default.default.withButton : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.field, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "select",
+                  {
+                    ...tooltipEnabled ? triggerProps : {},
+                    id: controlId,
+                    name,
+                    className: [styles__default.default.input, styles__default.default[size], styles__default.default[variant]].filter(Boolean).join(" "),
+                    value: nativeValue,
+                    onChange: handleNativeChange,
+                    disabled,
+                    "aria-invalid": Boolean(error) || void 0,
+                    "aria-describedby": describedBy,
+                    "data-cy": dataCy != null ? dataCy : "formselect",
+                    "data-forminput": true,
+                    children: [
+                      includePlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder }),
+                      options.map((opt) => {
+                        const v = serializeValue(opt.value, datakey);
+                        return /* @__PURE__ */ jsxRuntime.jsx("option", { value: v, children: opt.label }, v);
+                      })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 20 }) })
+              ] }),
+              canClear && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles__default.default.trailingButton,
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onClear == null ? void 0 : onClear();
+                  },
+                  "aria-label": "Ryd valg",
+                  disabled: !showClear,
+                  "data-cy": dataCy ? `${dataCy}-clear` : "formselect-clear",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        ),
+        (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
+      ]
+    }
+  );
+}
+
+exports.FormSelect = FormSelect;

package/dist/components/forms/form-select/FormSelect.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { InputContainer } from '../input-container/InputContainer';
+import { MultiselectOption } from '../multi-select/MultiSelect';
+type InputContainerProps = React.ComponentProps<typeof InputContainer>;
+export type FormSelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    id?: string;
+    name?: string;
+    options: MultiselectOption<T>[];
+    selectedValue: T | null;
+    onChange: (value: T) => void;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'outlined' | 'filled' | 'standalone';
+    onClear?: () => void;
+    /**
+     * Needed if T is an object and you want to use native select.
+     * Native <select> requires string values; we serialize using value[datakey].
+     */
+    datakey?: string;
+    dataCy?: string;
+    disabled?: boolean;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    includePlaceholderOption?: boolean;
+    /**
+     * Default false. If true, we allow clearing even when required=true:
+     * - placeholder becomes selectable
+     * - clear button is shown
+     *
+     * This is "odd" UX in many forms, so it's opt-in.
+     */
+    allowClearWhenRequired?: boolean;
+};
+export declare function FormSelect<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
+export {};