@dbcdk/react-components 0.0.168 → 0.0.169

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

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

@@ -1,236 +0,0 @@
-/* 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

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

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