@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -0,0 +1,131 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.controlWrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Real input stays for a11y, but visually hidden */
+.input {
+  position: absolute;
+  inset: 0;
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+/* The visible radio */
+.radio {
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  background: var(--color-bg-surface);
+  border: 2px solid var(--color-border-default);
+
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    background-color 120ms ease;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  transform: scale(0);
+  transition: transform 120ms ease;
+  background: var(--color-brand);
+}
+
+/* checked state */
+.checked {
+  border-color: var(--color-brand);
+}
+.checked .dot {
+  transform: scale(1);
+}
+
+/* hover (only when not disabled/checked) — triggers from anywhere in the
+   control, not just the input itself, so hovering the label or an
+   interactive endAdornment (e.g. a menu trigger) also highlights the radio
+   icon. Reads a CSS variable (rather than a hardcoded color) so an
+   ancestor outside this module — e.g. a Menu row that already shows its
+   own hover feedback — can suppress this by setting the variable; that
+   works across CSS-module file boundaries where class-name hashing would
+   otherwise prevent one module's selectors from targeting another's. */
+.container:hover .radio:not(.disabled):not(.checked) {
+  border-color: var(--radio-hover-border-color, var(--color-brand-hover));
+}
+
+/* focus ring */
+.input:focus-visible + .radio {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 30%, transparent);
+  border-color: var(--color-brand-strong);
+}
+
+/* disabled */
+.disabled {
+  opacity: 0.5;
+}
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+  user-select: none;
+  flex: 1;
+}
+
+.endAdornment {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.primary.checked {
+  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+}
+
+.default {
+  border-color: var(--color-border-strong);
+}
+
+/* Sizes */
+.sm {
+  width: 16px;
+  height: 16px;
+}
+.sm .dot {
+  width: 8px;
+  height: 8px;
+}
+
+.md {
+  width: 20px;
+  height: 20px;
+}
+.md .dot {
+  width: 10px;
+  height: 10px;
+}
+
+.lg {
+  width: 24px;
+  height: 24px;
+}
+.lg .dot {
+  width: 12px;
+  height: 12px;
+}

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

@@ -0,0 +1,287 @@
+'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('./Select.module.css');
+var Button = require('../../button/Button');
+var ClearButton = require('../../clear-button/ClearButton');
+var Menu = require('../../menu/Menu');
+var Popover = require('../../popover/Popover');
+var InputContainer = require('../input-container/InputContainer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+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,
+  menuHeader
+}) {
+  const generatedId = react.useId();
+  const controlId = id != null ? id : `select-${generatedId}`;
+  const describedById = `${controlId}-desc`;
+  const listboxId = `${controlId}-listbox`;
+  const popoverRef = react.useRef(null);
+  const optionRefs = react.useRef([]);
+  const typeaheadRef = react.useRef("");
+  const typeaheadTimeoutRef = react.useRef(null);
+  const selectedIndex = react.useMemo(
+    () => options.findIndex((o) => o.value === selectedValue),
+    [options, selectedValue]
+  );
+  const [activeIndex, setActiveIndex] = react.useState(selectedIndex >= 0 ? selectedIndex : 0);
+  const [open, setOpen] = react.useState(false);
+  react.useEffect(() => {
+    return () => {
+      if (typeaheadTimeoutRef.current) clearTimeout(typeaheadTimeoutRef.current);
+    };
+  }, []);
+  react.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);
+        }
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+        }
+        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.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__ */ jsxRuntime.jsxs(
+    InputContainer.InputContainer,
+    {
+      label,
+      htmlFor: controlId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      modified,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Popover.Popover,
+          {
+            ref: popoverRef,
+            open,
+            fullWidth,
+            onOpenChange: (next) => {
+              setOpen(next);
+              if (next) resetActiveToSelected();
+            },
+            contentId: listboxId,
+            autoFocusContent: false,
+            returnFocus: true,
+            trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+              Button.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__default.default.triggerModified : void 0,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+                    style: { width: "100%" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
+                        onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { onKeyDown: handleKeyDown, role: "listbox", className: styles__default.default.menu, children: [
+              menuHeader ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: menuHeader }) : null,
+              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__ */ jsxRuntime.jsx(
+                  Menu.Menu.Item,
+                  {
+                    active: isActive,
+                    selected: isSelected,
+                    itemRole: "option",
+                    className: isSelected ? styles__default.default.selectedOption : void 0,
+                    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : null }),
+                          opt.label
+                        ]
+                      }
+                    )
+                  },
+                  String(opt.value)
+                );
+              })
+            ] })
+          }
+        ),
+        (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
+      ]
+    }
+  );
+}
+
+exports.Select = Select;

package/dist/components/forms/select/Select.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ButtonVariant } from '../../button/Button';
+import { InputContainer } from '../input-container/InputContainer';
+import { MultiselectOption } from '../multi-select/MultiSelect';
+type InputContainerProps = React.ComponentProps<typeof InputContainer>;
+export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    id?: string;
+    options: MultiselectOption<T>[];
+    selectedValue: T | null;
+    onChange: (value: T) => void;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: ButtonVariant;
+    onClear?: () => void;
+    datakey?: string;
+    dataCy?: string;
+    disabled?: boolean;
+    minWidth?: string | number;
+    menuHeader?: React.ReactNode;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+};
+export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
+export {};