@dbcdk/react-components 0.0.168 → 0.0.169

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

@@ -1,131 +0,0 @@
-.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

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

@@ -1,24 +0,0 @@
-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 {};