@dbcdk/react-components 0.0.169 → 0.0.170

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

@@ -0,0 +1,166 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronDown, X } from 'lucide-react';
+import * as React from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './FormSelect.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+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.useId();
+  const controlId = id != null ? id : `select-${generatedId}`;
+  const describedById = `${controlId}-desc`;
+  const selected = React.useMemo(
+    () => findSelectedOption(options, selectedValue, datakey),
+    [options, selectedValue, datakey]
+  );
+  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;
+  })();
+  const nativeValue = React.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__ */ jsxs(
+    InputContainer,
+    {
+      label,
+      htmlFor: controlId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      modified,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: [
+              styles.container,
+              fullWidth ? styles.fullWidth : "",
+              canClear ? styles.withButton : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    ...tooltipEnabled ? triggerProps : {},
+                    id: controlId,
+                    name,
+                    className: [styles.input, styles[size], styles[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__ */ jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder }),
+                      options.map((opt) => {
+                        const v = serializeValue(opt.value, datakey);
+                        return /* @__PURE__ */ jsx("option", { value: v, children: opt.label }, v);
+                      })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: styles.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) })
+              ] }),
+              canClear && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles.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__ */ jsx(X, { size: 18, "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        ),
+        (error || helpText) && /* @__PURE__ */ jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
+      ]
+    }
+  );
+}
+
+export { FormSelect };

package/dist/components/forms/form-select/FormSelect.module.css

@@ -0,0 +1,236 @@
+/* FormSelect.module.css */
+
+/* =========================================
+   Root container (select + optional clear)
+   ========================================= */
+
+.container {
+  display: inline-flex;
+  align-items: stretch;
+  flex-grow: 1;
+  gap: 0;
+
+  inline-size: var(--input-width, auto);
+  min-inline-size: var(--input-min-width, 0);
+  max-inline-size: var(--input-max-width, none);
+
+  position: relative;
+  border-radius: var(--border-radius-default);
+}
+
+/* Full width variant */
+.fullWidth {
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+/* =========================================
+   Focus ring (GROUP LEVEL)
+   ========================================= */
+
+.container:focus-within {
+  box-shadow: 0 0 0 2px var(--color-border-selected);
+  z-index: 1;
+}
+
+/* IMPORTANT:
+   When focused, do NOT also turn the select's border blue,
+   otherwise you get the vertical seam line next to the button. */
+.container:focus-within .input {
+  border-color: var(--color-border-default);
+}
+.container:focus-within .trailingButton {
+  border-color: var(--color-border-default);
+}
+
+/* =========================================
+   Field wrapper (native select + chevron)
+   ========================================= */
+
+.field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  color: var(--color-fg-default);
+}
+
+/* =========================================
+   Native select styling
+   ========================================= */
+
+.input {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+
+  background: var(--color-bg-surface);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-default);
+
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
+
+  /* Reserve space for chevron */
+  padding-inline-end: calc(var(--spacing-lg) + 28px);
+
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+/* Disabled select */
+.input:disabled {
+  background-color: var(--color-disabled-bg);
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+}
+
+/* Hover state */
+.input:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+}
+
+/* Remove default focus ring (we use group-level ring) */
+.input:focus-visible {
+  outline: none;
+  /* DO NOT set border-color here */
+}
+
+/* =========================================
+   Variants
+   ========================================= */
+
+.filled {
+  background-color: var(--color-bg-surface);
+}
+
+.standalone {
+  border-radius: var(--border-radius-rounded);
+  background-color: var(--color-bg-surface);
+  box-shadow: var(--shadow-xs), var(--shadow-md);
+}
+
+.outlined {
+  background-color: transparent;
+}
+
+/* =========================================
+   Sizes
+   ========================================= */
+
+.sm {
+  block-size: var(--component-size-sm);
+  font-size: var(--font-size-sm);
+}
+
+.md {
+  block-size: var(--component-size-md);
+  font-size: var(--font-size-sm);
+}
+
+.lg {
+  block-size: var(--component-size-lg);
+  font-size: var(--font-size-lg);
+}
+
+/* =========================================
+   Chevron (decorative only)
+   ========================================= */
+
+.chevron {
+  position: absolute;
+  inset-inline-end: var(--spacing-sm);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: var(--color-fg-subtle);
+}
+
+.chevron svg {
+  inline-size: 20px;
+  block-size: 20px;
+}
+
+/* =========================================
+   Clear button integration
+   ========================================= */
+
+/* Remove right radius from select when button exists */
+.withButton .input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  /* Prevent double border seam; the button provides the right side */
+  border-right-color: transparent;
+}
+
+/* Trailing clear button */
+.trailingButton {
+  position: relative;
+  z-index: 2;
+  flex: 0 0 auto;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  padding-inline: var(--spacing-sm);
+
+  border: var(--border-width-thin) solid var(--color-border-default);
+
+  /* Seam join: don't draw left border; select covers it */
+  border-left-color: transparent;
+  margin-left: calc(-1 * var(--border-width-thin));
+
+  border-top-right-radius: var(--border-radius-default);
+  border-bottom-right-radius: var(--border-radius-default);
+
+  background: var(--color-bg-surface);
+  cursor: pointer;
+
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+/* Hover state */
+.trailingButton:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+  background-color: var(--color-bg-surface-hover, var(--color-bg-surface));
+}
+
+/* Remove individual focus ring (group handles it) */
+.trailingButton:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+/* Disabled clear button:
+   keep border/background stable; dim only icon */
+.trailingButton:disabled {
+  cursor: default;
+  background: var(--color-bg-surface);
+}
+
+.trailingButton:disabled svg {
+  opacity: 0.4;
+}

package/dist/components/forms/input/Input.cjs

@@ -0,0 +1,190 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Button = require('../../../components/button/Button');
+var ClearButton = require('../../../components/clear-button/ClearButton');
+var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
+var styles = require('../input/Input.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 mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+const Input = react.forwardRef(function Input2({
+  label,
+  labelAction,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = false,
+  required,
+  tooltip,
+  tooltipPlacement = "right",
+  modified = false,
+  icon,
+  autoFocus,
+  minWidth,
+  width,
+  maxWidth,
+  inputSize = "md",
+  variant = "outlined",
+  onClear,
+  clearAriaLabel,
+  onButtonClick,
+  buttonDisabled = false,
+  buttonLabel,
+  buttonIcon,
+  buttonAriaLabel,
+  trailingLabel,
+  id,
+  tooltipOpenOnFocus = true,
+  style,
+  className,
+  fieldClassName,
+  inputClassName,
+  startAdornment,
+  endAdornment,
+  ...inputProps
+}, ref) {
+  const inputRef = react.useRef(null);
+  const reactId = react.useId();
+  const inputId = id != null ? id : `input-${reactId}`;
+  react.useEffect(() => {
+    var _a;
+    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [autoFocus]);
+  const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
+  const hasTrailingLabel = Boolean(trailingLabel);
+  const hasValue = Boolean(inputProps.value);
+  const hasVisibleClear = Boolean(onClear && hasValue);
+  const hasEndAdornment = Boolean(endAdornment);
+  const reservesInlineClearSlot = Boolean(onClear);
+  const hasInlineClear = Boolean(hasVisibleClear && hasEndAdornment);
+  const rootStyle = {
+    ...style != null ? style : {},
+    ...minWidth ? { ["--input-min-width"]: minWidth } : null,
+    ...width ? { ["--input-width"]: width } : null,
+    ...maxWidth ? { ["--input-max-width"]: maxWidth } : null
+  };
+  const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
+    content: tooltip,
+    placement: tooltipPlacement,
+    offset: 8,
+    delayOpenMs: 0,
+    focusOpenMode: tooltipOpenOnFocus ? "any" : "focus-visible",
+    closeOnPointerDown: false
+  });
+  const trailingButtonVariant = variant === "outlined" || variant === "standalone" ? "outlined" : "default";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      label,
+      labelAction,
+      htmlFor: inputId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      modified,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: rootStyle,
+          className: [
+            styles__default.default.container,
+            fullWidth ? styles__default.default.fullWidth : "",
+            onClear ? styles__default.default.withClear : "",
+            hasInlineClear ? styles__default.default.withInlineClear : "",
+            hasButton ? styles__default.default.withButton : "",
+            hasTrailingLabel ? styles__default.default.withTrailingLabel : "",
+            className != null ? className : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: [
+                  styles__default.default.field,
+                  styles__default.default[variant],
+                  icon ? styles__default.default.fieldWithIcon : "",
+                  inputSize ? styles__default.default[inputSize] : "",
+                  modified ? styles__default.default.modified : "",
+                  fieldClassName != null ? fieldClassName : ""
+                ].filter(Boolean).join(" "),
+                "data-forminput": "field",
+                "data-modified": modified ? "true" : void 0,
+                "aria-disabled": inputProps.disabled ? "true" : void 0,
+                ...tooltip ? triggerProps : {},
+                children: [
+                  icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "data-input-role": "icon", children: icon }),
+                  startAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.startAdornment, "data-input-role": "start-adornment", children: startAdornment }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      ...inputProps,
+                      id: inputId,
+                      ref: mergeRefs(inputRef, ref),
+                      className: [styles__default.default.input, inputSize ? styles__default.default[inputSize] : "", inputClassName != null ? inputClassName : ""].filter(Boolean).join(" ")
+                    }
+                  ),
+                  (reservesInlineClearSlot || hasEndAdornment) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.endAdornment, "data-input-role": "end-adornment", children: [
+                    reservesInlineClearSlot ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: styles__default.default.clearSlot,
+                        "aria-hidden": hasVisibleClear ? void 0 : "true",
+                        children: hasVisibleClear && onClear ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel }) : null
+                      }
+                    ) : null,
+                    endAdornment
+                  ] })
+                ]
+              }
+            ),
+            hasTrailingLabel && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: [styles__default.default.trailingLabel, inputSize ? styles__default.default[inputSize] : ""].filter(Boolean).join(" "),
+                children: trailingLabel
+              }
+            ),
+            hasButton && /* @__PURE__ */ jsxRuntime.jsxs(
+              Button.Button,
+              {
+                onClick: onButtonClick,
+                disabled: buttonDisabled,
+                className: styles__default.default.trailingButton,
+                type: "button",
+                variant: trailingButtonVariant,
+                size: inputSize,
+                "aria-label": buttonAriaLabel,
+                children: [
+                  buttonIcon != null ? buttonIcon : null,
+                  buttonLabel != null ? buttonLabel : null
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+Input.displayName = "Input";
+
+exports.Input = Input;

package/dist/components/forms/input/Input.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { Size } from '../../../types/sizes.types';
+import type { InputContainerProps } from '../input-container/InputContainer';
+export type InputVariant = 'outlined' | 'surface' | 'subtle' | 'standalone' | 'embedded';
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement' | 'size'> & {
+    icon?: React.ReactNode;
+    autoFocus?: boolean;
+    minWidth?: string | number;
+    width?: string | number;
+    maxWidth?: string | number;
+    inputSize?: Exclude<Size, 'xl'>;
+    variant?: InputVariant;
+    onClear?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
+    clearAriaLabel?: string;
+    onButtonClick?: () => void;
+    buttonDisabled?: boolean;
+    buttonLabel?: string;
+    buttonIcon?: React.ReactNode;
+    buttonAriaLabel?: string;
+    trailingLabel?: string;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    tooltipOpenOnFocus?: boolean;
+    modified?: boolean;
+    /**
+     * Custom content to render inside the input field, before the input element (e.g. chips)
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * Custom content to render inside the input field, after the input element
+     */
+    endAdornment?: React.ReactNode;
+    fieldClassName?: string;
+    inputClassName?: string;
+    'data-cy'?: string;
+};
+export declare const Input: React.ForwardRefExoticComponent<React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>>;