@dbcdk/react-components 0.0.103 → 0.0.104

package/dist/components/forms/radio-buttons/RadioButtonGroup.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { RadioButton } from './RadioButton';
+import { InputContainer } from '../input-container/InputContainer';
+
+function RadioButtonGroup({
+  name,
+  value,
+  onChange,
+  options,
+  disabled = false,
+  label,
+  error,
+  helpText,
+  required = false,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  modified = false,
+  direction = "column",
+  "data-cy": dataCy
+}) {
+  const generated = useId();
+  const groupName = name != null ? name : `radio-group-${generated}`;
+  const content = /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-invalid": Boolean(error) || void 0,
+      "data-cy": dataCy,
+      style: {
+        display: "flex",
+        flexDirection: direction,
+        gap: "8px"
+      },
+      children: options.map((opt) => /* @__PURE__ */ jsx(
+        RadioButton,
+        {
+          noContainer: true,
+          name: groupName,
+          value: String(opt.value),
+          selectedValue: value != null ? value : void 0,
+          disabled: disabled || opt.disabled,
+          label: opt.label,
+          required,
+          onChange: (v) => onChange(v),
+          "data-cy": dataCy ? `${dataCy}-option-${String(opt.value)}` : void 0
+        },
+        String(opt.value)
+      ))
+    }
+  );
+  if (!label && !error) return content;
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      label,
+      htmlFor: void 0,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      modified,
+      children: content
+    }
+  );
+}
+
+export { RadioButtonGroup };

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

@@ -0,0 +1,118 @@
+.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) */
+.input:not(:disabled):hover + .radio {
+  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;
+}
+
+.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,286 @@
+'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
+}) {
+  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);
+          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.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.jsx(Menu.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__ */ jsxRuntime.jsx(
+                Menu.Menu.Item,
+                {
+                  active: isActive,
+                  itemRole: "option",
+                  "aria-selected": isSelected,
+                  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;