@dbcdk/react-components 0.0.103 → 0.0.104

package/dist/components/forms/checkbox-group/CheckboxGroup.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import styles from './CheckboxGroup.module.css';
+import { Checkbox } from '../checkbox/Checkbox';
+
+function CheckboxGroup({
+  label,
+  options,
+  selectedValues,
+  onChange,
+  onToggle,
+  variant = "outlined",
+  size = "md",
+  wrap = false,
+  fullWidth = false,
+  disabled = false,
+  contained = true,
+  actionLabels = { clear: "Ryd", all: "Alle" },
+  onActionClick,
+  "data-cy": dataCy
+}) {
+  var _a, _b;
+  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const enabledValues = useMemo(
+    () => options.filter((o) => !(disabled || o.disabled)).map((o) => o.value),
+    [options, disabled]
+  );
+  const allEnabledSelected = enabledValues.length > 0 && enabledValues.every((v) => selectedSet.has(v));
+  const toggleValue = (value) => {
+    if (disabled) return;
+    const next = new Set(selectedSet);
+    const willSelect = !next.has(value);
+    if (willSelect) next.add(value);
+    else next.delete(value);
+    onChange(Array.from(next));
+    onToggle == null ? void 0 : onToggle(value, willSelect);
+  };
+  const selectAll = () => {
+    if (disabled) return;
+    if (enabledValues.length === 0) return;
+    onChange([...enabledValues]);
+    onToggle == null ? void 0 : onToggle("__select_all__", true);
+  };
+  const deselectAll = () => {
+    if (disabled) return;
+    onChange([]);
+    onToggle == null ? void 0 : onToggle("__deselect_all__", false);
+  };
+  const handleAction = () => {
+    if (disabled) return;
+    if (enabledValues.length === 0) return;
+    if (allEnabledSelected) {
+      deselectAll();
+      onActionClick == null ? void 0 : onActionClick("clear");
+    } else {
+      selectAll();
+      onActionClick == null ? void 0 : onActionClick("all");
+    }
+  };
+  const wrapperClassName = [
+    styles.wrapper,
+    fullWidth ? styles.fullWidth : "",
+    contained ? styles.contained : styles.plain,
+    styles[size]
+  ].filter(Boolean).join(" ");
+  const itemsClassName = [styles.items, wrap ? styles.wrap : styles.noWrap].join(" ");
+  const allText = (_a = actionLabels.all) != null ? _a : "Alle";
+  const clearText = (_b = actionLabels.clear) != null ? _b : "Ryd";
+  const actionMinWidth = `${Math.max(allText.length, clearText.length)}ch`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: wrapperClassName,
+      "data-cy": dataCy,
+      style: { ["--checkboxgroup-action-min-width"]: actionMinWidth },
+      children: [
+        label && /* @__PURE__ */ jsx("span", { className: styles.groupLabel, children: label }),
+        /* @__PURE__ */ jsx("div", { className: itemsClassName, role: "group", "aria-label": label, children: options.map((opt) => {
+          const isChecked = selectedSet.has(opt.value);
+          const isDisabled = disabled || !!opt.disabled;
+          return /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              label: opt.label,
+              checked: isChecked,
+              disabled: isDisabled,
+              variant,
+              size: "sm",
+              onChange: () => {
+                if (isDisabled) return;
+                toggleValue(opt.value);
+              },
+              noContainer: true
+            },
+            opt.value
+          );
+        }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles.actionButton,
+            onClick: handleAction,
+            disabled: disabled || enabledValues.length === 0,
+            "aria-disabled": disabled || enabledValues.length === 0,
+            children: /* @__PURE__ */ jsx("span", { className: styles.actionText, "data-mode": allEnabledSelected ? "clear" : "all", children: allEnabledSelected ? clearText : allText })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { CheckboxGroup };

package/dist/components/forms/checkbox-group/CheckboxGroup.module.css

@@ -0,0 +1,115 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-direction: row; /* keep on one line */
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+/* Heights aligned with other controls */
+.xs {
+  min-height: var(--component-size-xs);
+}
+
+.sm {
+  min-height: var(--component-size-sm);
+}
+
+.md {
+  min-height: var(--component-size-md);
+}
+
+.lg {
+  min-height: var(--component-size-lg);
+}
+
+/* Subtle container (lightweight) */
+.contained {
+  padding: 0 var(--spacing-xs);
+  border: var(--border-width-thin) solid var(--color-border-subtle);
+  border-radius: var(--border-radius-default);
+  background: var(--color-bg-surface);
+}
+
+.plain {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.groupLabel {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-muted);
+  white-space: nowrap;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+}
+
+.items {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.wrap {
+  flex-wrap: wrap;
+}
+
+.noWrap {
+  flex-wrap: nowrap;
+}
+
+/* Right action */
+.actionButton {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin-left: auto;
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+
+  height: 100%;
+}
+
+.actionButton:disabled {
+  cursor: not-allowed;
+}
+
+.actionText {
+  display: inline-block;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  text-align: right;
+
+  min-width: var(--checkboxgroup-action-min-width, 4ch);
+  color: var(--color-link);
+}
+
+.actionText[data-mode='all'] {
+  color: var(--color-link);
+}
+
+.actionText[data-mode='clear'] {
+  color: var(--color-link);
+}
+
+.actionButton:not(:disabled):hover .actionText {
+  color: var(--color-link-hover);
+  text-decoration: underline;
+}
+
+.actionButton:focus-visible {
+  outline: 2px solid var(--color-border-strong);
+  outline-offset: 3px;
+  border-radius: var(--border-radius-rounded);
+}

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

@@ -0,0 +1,191 @@
+'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('./FormSelect.module.css');
+var InputContainer = require('../input-container/InputContainer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+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__namespace.useId();
+  const controlId = id != null ? id : `select-${generatedId}`;
+  const describedById = `${controlId}-desc`;
+  const selected = React__namespace.useMemo(
+    () => findSelectedOption(options, selectedValue, datakey),
+    [options, selectedValue, datakey]
+  );
+  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;
+  })();
+  const nativeValue = React__namespace.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__ */ jsxRuntime.jsxs(
+    InputContainer.InputContainer,
+    {
+      label,
+      htmlFor: controlId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      modified,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: [
+              styles__default.default.container,
+              fullWidth ? styles__default.default.fullWidth : "",
+              canClear ? styles__default.default.withButton : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.field, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "select",
+                  {
+                    ...tooltipEnabled ? triggerProps : {},
+                    id: controlId,
+                    name,
+                    className: [styles__default.default.input, styles__default.default[size], styles__default.default[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__ */ jsxRuntime.jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder }),
+                      options.map((opt) => {
+                        const v = serializeValue(opt.value, datakey);
+                        return /* @__PURE__ */ jsxRuntime.jsx("option", { value: v, children: opt.label }, v);
+                      })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 20 }) })
+              ] }),
+              canClear && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles__default.default.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__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        ),
+        (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
+      ]
+    }
+  );
+}
+
+exports.FormSelect = FormSelect;

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 };