@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/components/forms/select/Select.js

@@ -0,0 +1,280 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { useId, useRef, useMemo, useState, useEffect } from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './Select.module.css';
+import { Button } from '../../button/Button';
+import { ClearButton } from '../../clear-button/ClearButton';
+import { Menu } from '../../menu/Menu';
+import { Popover } from '../../popover/Popover';
+import { InputContainer } from '../input-container/InputContainer';
+
+function Select({
+  label,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = true,
+  required,
+  tooltip,
+  tooltipPlacement = "right",
+  modified = false,
+  id,
+  options,
+  selectedValue,
+  onChange,
+  placeholder = "V\xE6lg",
+  size,
+  variant = "outlined",
+  onClear,
+  datakey,
+  dataCy,
+  disabled,
+  minWidth
+}) {
+  const generatedId = useId();
+  const controlId = id != null ? id : `select-${generatedId}`;
+  const describedById = `${controlId}-desc`;
+  const listboxId = `${controlId}-listbox`;
+  const popoverRef = useRef(null);
+  const optionRefs = useRef([]);
+  const typeaheadRef = useRef("");
+  const typeaheadTimeoutRef = useRef(null);
+  const selectedIndex = useMemo(
+    () => options.findIndex((o) => o.value === selectedValue),
+    [options, selectedValue]
+  );
+  const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    return () => {
+      if (typeaheadTimeoutRef.current) clearTimeout(typeaheadTimeoutRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (!open) return;
+    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex, open]);
+  const resetActiveToSelected = () => setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+  const findTypeaheadMatch = (query, startIndex) => {
+    var _a, _b;
+    if (!query || options.length === 0) return -1;
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    if (!normalizedQuery) return -1;
+    for (let step = 1; step <= options.length; step += 1) {
+      const index = (startIndex + step + options.length) % options.length;
+      const label2 = (_b = (_a = options[index]) == null ? void 0 : _a.label) == null ? void 0 : _b.trim().toLocaleLowerCase();
+      if (label2 == null ? void 0 : label2.startsWith(normalizedQuery)) return index;
+    }
+    return -1;
+  };
+  const handleTypeahead = (key) => {
+    const startIndex = open ? activeIndex : selectedIndex;
+    const nextBuffer = `${typeaheadRef.current}${key.toLocaleLowerCase()}`;
+    const repeatedChar = new Set(nextBuffer).size === 1;
+    let nextIndex = findTypeaheadMatch(nextBuffer, startIndex);
+    let appliedBuffer = nextBuffer;
+    if (nextIndex < 0 && repeatedChar) {
+      appliedBuffer = key.toLocaleLowerCase();
+      nextIndex = findTypeaheadMatch(appliedBuffer, startIndex);
+    }
+    if (typeaheadTimeoutRef.current) clearTimeout(typeaheadTimeoutRef.current);
+    typeaheadRef.current = appliedBuffer;
+    typeaheadTimeoutRef.current = setTimeout(() => {
+      typeaheadRef.current = "";
+      typeaheadTimeoutRef.current = null;
+    }, 500);
+    if (nextIndex < 0) return;
+    setActiveIndex(nextIndex);
+    if (!open) setOpen(true);
+  };
+  const handleKeyDown = (e) => {
+    var _a, _b;
+    if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
+      e.preventDefault();
+      handleTypeahead(e.key);
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        setActiveIndex((i) => Math.max(i - 1, 0));
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        typeaheadRef.current = "";
+        if (typeaheadTimeoutRef.current) {
+          clearTimeout(typeaheadTimeoutRef.current);
+          typeaheadTimeoutRef.current = null;
+        }
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        const opt = options[activeIndex];
+        if (opt) {
+          onChange(opt.value);
+          (_a = popoverRef.current) == null ? void 0 : _a.close();
+        }
+        break;
+      }
+      case "Escape": {
+        if (!open) return;
+        e.preventDefault();
+        (_b = popoverRef.current) == null ? void 0 : _b.close();
+        break;
+      }
+      case "Home": {
+        if (!open) return;
+        e.preventDefault();
+        setActiveIndex(0);
+        break;
+      }
+      case "End": {
+        if (!open) return;
+        e.preventDefault();
+        setActiveIndex(options.length - 1);
+        break;
+      }
+    }
+  };
+  const selected = options.find((o) => o.value === selectedValue);
+  const tooltipEnabled = Boolean(tooltip);
+  const { triggerProps, id: tooltipId } = 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;
+  })();
+  return /* @__PURE__ */ jsxs(
+    InputContainer,
+    {
+      label,
+      htmlFor: controlId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      modified,
+      children: [
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            ref: popoverRef,
+            open,
+            fullWidth,
+            onOpenChange: (next) => {
+              setOpen(next);
+              if (next) resetActiveToSelected();
+            },
+            contentId: listboxId,
+            autoFocusContent: false,
+            returnFocus: true,
+            trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled,
+                ...tooltipEnabled ? triggerProps : {},
+                id: controlId,
+                "data-cy": dataCy != null ? dataCy : "select-button",
+                onKeyDown: handleKeyDown,
+                fullWidth,
+                variant,
+                onClick: (e) => {
+                  resetActiveToSelected();
+                  toggle(e);
+                },
+                size,
+                style: minWidth != null ? { minWidth } : void 0,
+                type: "button",
+                "data-forminput": true,
+                "aria-haspopup": "listbox",
+                "aria-expanded": !!isOpen,
+                "aria-controls": listboxId,
+                "aria-invalid": Boolean(error) || void 0,
+                "aria-describedby": describedBy,
+                className: modified ? styles.triggerModified : void 0,
+                children: /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+                    style: { width: "100%" },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
+                      /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
+                        onClear && selected && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
+                        /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ),
+            children: /* @__PURE__ */ jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+              const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
+              const isActive = index === activeIndex;
+              return /* @__PURE__ */ jsx(
+                Menu.Item,
+                {
+                  active: isActive,
+                  itemRole: "option",
+                  "aria-selected": isSelected,
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      ref: (el) => {
+                        optionRefs.current[index] = el;
+                      },
+                      type: "button",
+                      tabIndex: isActive ? 0 : -1,
+                      onClick: () => {
+                        var _a;
+                        onChange(opt.value);
+                        (_a = popoverRef.current) == null ? void 0 : _a.close();
+                      },
+                      onFocus: () => setActiveIndex(index),
+                      style: { display: "flex", alignItems: "center", width: "100%" },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsx(Check, {}) : null }),
+                        opt.label
+                      ]
+                    }
+                  )
+                },
+                String(opt.value)
+              );
+            }) })
+          }
+        ),
+        (error || helpText) && /* @__PURE__ */ jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
+      ]
+    }
+  );
+}
+
+export { Select };

package/dist/components/forms/select/Select.module.css

@@ -0,0 +1,32 @@
+.triggerModified {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 45%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+  border-left-width: 4px;
+}
+
+.triggerModified:hover:not([disabled]) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 60%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+}
+
+.triggerModified:focus-visible {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 75%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+}

package/dist/components/forms/text-area/Textarea.cjs

@@ -0,0 +1,116 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
+var styles = require('./Textarea.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 Textarea = function Textarea2({
+  value,
+  inputChanged,
+  disabled,
+  rows = 3,
+  showCount,
+  tooltip,
+  tooltipPlacement = "right",
+  showTooltip,
+  placeholder,
+  adjustHeight,
+  id,
+  modified = false,
+  // InputContainer props
+  label,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required,
+  // Native textarea props
+  className,
+  ...rest
+}) {
+  const HEIGHT_BUFFER_PX = 2;
+  const generatedId = react.useId();
+  const textareaId = id != null ? id : `textarea-${generatedId}`;
+  const textareaRef = react.useRef(null);
+  const syncHeight = react.useCallback(
+    (textarea) => {
+      if (!adjustHeight) return;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight + HEIGHT_BUFFER_PX}px`;
+    },
+    [adjustHeight]
+  );
+  react.useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    syncHeight(textarea);
+  }, [syncHeight, value, rows]);
+  const onInput = react.useCallback(
+    (e) => {
+      const textarea = e.currentTarget;
+      syncHeight(textarea);
+      inputChanged(e);
+    },
+    [inputChanged, syncHeight]
+  );
+  const inputField = react.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ...rest,
+        ref: textareaRef,
+        id: textareaId,
+        className: [styles__default.default.textarea, className].filter(Boolean).join(" "),
+        placeholder,
+        rows,
+        value,
+        onChange: onInput,
+        disabled,
+        "aria-invalid": Boolean(error) || void 0
+      }
+    ),
+    [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]
+  );
+  const tooltipEnabled = Boolean(tooltip) && (showTooltip != null ? showTooltip : true);
+  const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8,
+    delayOpenMs: 0,
+    focusOpenMode: "any",
+    closeOnPointerDown: false
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      modified,
+      label,
+      htmlFor: textareaId,
+      error,
+      helpText,
+      helpTextAddition: showCount ? `${value == null ? void 0 : value.length} tegn i denne boks` : void 0,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: [styles__default.default.container, modified ? styles__default.default.modified : ""].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField })
+        }
+      )
+    }
+  );
+};
+Textarea.displayName = "Textarea";
+
+exports.Textarea = Textarea;

package/dist/components/forms/text-area/Textarea.js

@@ -0,0 +1,110 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useId, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './Textarea.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+const Textarea = function Textarea2({
+  value,
+  inputChanged,
+  disabled,
+  rows = 3,
+  showCount,
+  tooltip,
+  tooltipPlacement = "right",
+  showTooltip,
+  placeholder,
+  adjustHeight,
+  id,
+  modified = false,
+  // InputContainer props
+  label,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required,
+  // Native textarea props
+  className,
+  ...rest
+}) {
+  const HEIGHT_BUFFER_PX = 2;
+  const generatedId = useId();
+  const textareaId = id != null ? id : `textarea-${generatedId}`;
+  const textareaRef = useRef(null);
+  const syncHeight = useCallback(
+    (textarea) => {
+      if (!adjustHeight) return;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight + HEIGHT_BUFFER_PX}px`;
+    },
+    [adjustHeight]
+  );
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    syncHeight(textarea);
+  }, [syncHeight, value, rows]);
+  const onInput = useCallback(
+    (e) => {
+      const textarea = e.currentTarget;
+      syncHeight(textarea);
+      inputChanged(e);
+    },
+    [inputChanged, syncHeight]
+  );
+  const inputField = useMemo(
+    () => /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...rest,
+        ref: textareaRef,
+        id: textareaId,
+        className: [styles.textarea, className].filter(Boolean).join(" "),
+        placeholder,
+        rows,
+        value,
+        onChange: onInput,
+        disabled,
+        "aria-invalid": Boolean(error) || void 0
+      }
+    ),
+    [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]
+  );
+  const tooltipEnabled = Boolean(tooltip) && (showTooltip != null ? showTooltip : true);
+  const { triggerProps } = useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8,
+    delayOpenMs: 0,
+    focusOpenMode: "any",
+    closeOnPointerDown: false
+  });
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      modified,
+      label,
+      htmlFor: textareaId,
+      error,
+      helpText,
+      helpTextAddition: showCount ? `${value == null ? void 0 : value.length} tegn i denne boks` : void 0,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: [styles.container, modified ? styles.modified : ""].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField })
+        }
+      )
+    }
+  );
+};
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/dist/components/forms/text-area/Textarea.module.css

@@ -0,0 +1,70 @@
+.container {
+  flex-grow: 1;
+}
+
+.container.modified textarea {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 45%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+  border-left-width: 4px;
+}
+
+.container.modified textarea:hover {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 60%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+}
+
+.container.modified textarea:focus-visible {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 75%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+}
+.container textarea {
+  width: 100%;
+  padding: var(--spacing-xs);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-default);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  background-color: var(--color-bg-surface);
+  color: var(--color-fg-default);
+}
+
+.container textarea:disabled {
+  background-color: var(--color-disabled-bg);
+  border: 0;
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.internalCount {
+  text-align: right;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-subtle);
+}
+
+.container textarea:hover {
+  border-color: var(--color-border-strong);
+}
+
+.container textarea:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+}