@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/datetime-picker/dateTimeHelpers.d.ts

@@ -0,0 +1,13 @@
+export declare const digits: (s: string) => string;
+export declare function maskDateEU(text: string): string;
+export declare function maskTimeHM(text: string): string;
+export declare function maskSingle(text: string, enableTime: boolean): string;
+export declare function maskRange(text: string, enableTime: boolean): string;
+export declare const pad2: (n: number) => string;
+export declare function toMaskedFromDate(d: Date, enableTime: boolean): string;
+export declare function toMaskedRange(start: Date | null, end: Date | null, enableTime: boolean): string;
+export declare function parseLooseDateOrDateTime(input: string): Date | null;
+export declare function parseLooseRange(input: string): {
+    start: Date;
+    end: Date;
+} | null;

package/dist/components/datetime-picker/dateTimeHelpers.js

@@ -0,0 +1,119 @@
+/* ---------- Mask helpers (no deps) ---------- */
+// Pull only 0-9
+export const digits = (s) => (s.match(/\d/g) || []).join('');
+// DD-MM-YYYY
+export function maskDateEU(text) {
+    const d = digits(text).slice(0, 8);
+    const dd = d.slice(0, 2);
+    const mm = d.slice(2, 4);
+    const yyyy = d.slice(4, 8);
+    let out = dd;
+    if (mm.length)
+        out += (out ? '-' : '') + mm;
+    if (yyyy.length)
+        out += (out ? '-' : '') + yyyy;
+    return out;
+}
+// HH:mm (24h)
+export function maskTimeHM(text) {
+    const d = digits(text).slice(0, 4);
+    const hh = d.slice(0, 2);
+    const mm = d.slice(2, 4);
+    return mm.length ? `${hh}:${mm}` : hh;
+}
+// Single: "DD-MM-YYYY" or "DD-MM-YYYY HH:mm"
+export function maskSingle(text, enableTime) {
+    let t = text.trim().replace(/\s+/g, ' ');
+    if (!enableTime)
+        return maskDateEU(t);
+    // split date + time by first space or 'T'
+    const m = /^(.*?)[ T](.*)$/.exec(t);
+    if (!m)
+        return maskDateEU(t);
+    const datePart = maskDateEU(m[1]);
+    const timePart = maskTimeHM(m[2]);
+    return timePart ? `${datePart} ${timePart}` : datePart;
+}
+// Range: mask both sides around common separators (–, -, to, til)
+export function maskRange(text, enableTime) {
+    const sepRe = /\s*(?:–|-|to|til)\s*/i;
+    const parts = text.split(sepRe);
+    if (parts.length === 1) {
+        // user typing first side
+        return maskSingle(parts[0], enableTime);
+    }
+    const a = maskSingle(parts[0], enableTime);
+    const b = maskSingle(parts.slice(1).join(' '), enableTime); // everything after first sep
+    return `${a} – ${b}`.trim();
+}
+// Pad helper
+export const pad2 = (n) => String(n).padStart(2, '0');
+// From Date → "DD-MM-YYYY" or "DD-MM-YYYY HH:mm" (local time)
+export function toMaskedFromDate(d, enableTime) {
+    const dd = pad2(d.getDate());
+    const mm = pad2(d.getMonth() + 1);
+    const yyyy = String(d.getFullYear());
+    let out = `${dd}-${mm}-${yyyy}`;
+    if (enableTime)
+        out += ` ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+    return out;
+}
+// From start/end → "DD-MM-YYYY – DD-MM-YYYY" (+ optional time)
+export function toMaskedRange(start, end, enableTime) {
+    if (start && end)
+        return `${toMaskedFromDate(start, enableTime)} – ${toMaskedFromDate(end, enableTime)}`;
+    if (start)
+        return `${toMaskedFromDate(start, enableTime)} –`;
+    if (end)
+        return `– ${toMaskedFromDate(end, enableTime)}`;
+    return '';
+}
+/* ---------- Parsing helpers (no deps) ---------- */
+// Accepts: YYYY-MM-DD, DD-MM-YYYY, DD/MM/YYYY, DD.MM.YYYY (+ optional HH:mm)
+export function parseLooseDateOrDateTime(input) {
+    const txt = input.trim().replace(/\s+/g, ' ');
+    const dateTimeMatch = /^(?<date>[\d./-]{8,10})(?:[ T](?<hh>\d{1,2}):(?<mm>\d{2}))?$/i.exec(txt);
+    if (!(dateTimeMatch === null || dateTimeMatch === void 0 ? void 0 : dateTimeMatch.groups))
+        return null;
+    const raw = dateTimeMatch.groups.date;
+    const hh = dateTimeMatch.groups.hh ? parseInt(dateTimeMatch.groups.hh, 10) : 0;
+    const mm = dateTimeMatch.groups.mm ? parseInt(dateTimeMatch.groups.mm, 10) : 0;
+    if (hh < 0 || hh > 23 || mm < 0 || mm > 59)
+        return null;
+    // Try YYYY-MM-DD first
+    let y, m, d;
+    const mIso = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(raw);
+    if (mIso) {
+        y = +mIso[1];
+        m = +mIso[2] - 1;
+        d = +mIso[3];
+    }
+    else {
+        // Try DD-MM-YYYY or DD/MM/YYYY or DD.MM.YYYY
+        const mEu = /^(\d{1,2})[./-](\d{1,2})[./-](\d{4})$/.exec(raw);
+        if (!mEu)
+            return null;
+        d = +mEu[1];
+        m = +mEu[2] - 1;
+        y = +mEu[3];
+    }
+    const local = new Date(y, m, d, hh, mm, 0, 0);
+    if (Number.isNaN(local.getTime()))
+        return null;
+    // Guard: JS autocorrects invalid dates; re-validate exact Y/M/D
+    if (local.getFullYear() !== y || local.getMonth() !== m || local.getDate() !== d)
+        return null;
+    return local;
+}
+// Parse a range string with separators: "–", "-", "to", "til"
+export function parseLooseRange(input) {
+    const sep = /\s*(?:–|-|to|til)\s*/i;
+    const [a, b] = input.split(sep);
+    if (!a || !b)
+        return null;
+    const s = parseLooseDateOrDateTime(a);
+    const e = parseLooseDateOrDateTime(b);
+    if (!s || !e)
+        return null;
+    return s <= e ? { start: s, end: e } : { start: e, end: s };
+}

package/dist/components/filter-field/FilterField.d.ts

@@ -5,7 +5,7 @@ export interface FilterEvent {
     operator: Operator;
     value: string | string[] | null;
 }
-export interface MultiselectOption {
+interface MultiselectOption {
     label: string;
     value: string;
     icon?: React.ReactNode;
@@ -25,4 +25,7 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     disabled?: boolean;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, label, placeholder, disabled, ...inputProps }: FilterFieldProps): React.ReactElement;
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, label, placeholder, disabled, 'data-cy': dataCy, ...inputProps }: FilterFieldProps & {
+    'data-cy'?: string;
+}): React.ReactElement;
+export {};

package/dist/components/filter-field/FilterField.js

@@ -1,182 +1,139 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useMemo, useEffect, useRef } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
-import { Popover } from '../popover/Popover';
-import { Input } from '../input/Input';
-import { Menu } from '../menu/Menu';
-import { MultiSelect } from '../multi-select/MultiSelect';
-import { Select } from '../select/Select';
+import { useMemo, useRef, useState, useEffect } from 'react';
+import { Input } from '../../components/forms/input/Input';
+import { MultiSelect } from '../../components/forms/multi-select/MultiSelect';
 import styles from './FilterField.module.css';
-
+import { Select } from '../forms/select/Select';
+import { Menu } from '../menu/Menu';
+import { Popover } from '../popover/Popover';
 const LABELS = {
-  is: "is",
-  isNot: "not",
-  contains: "contains",
-  notContains: "not contain",
-  startsWith: "starts with",
-  endsWith: "ends with",
-  gt: ">",
-  lt: "<",
-  gte: "\u2265",
-  lte: "\u2264",
-  in: "",
-  notIn: "not in",
-  isEmpty: "empty",
-  isNotEmpty: "not empty"
+    is: 'is',
+    isNot: 'not',
+    contains: 'contains',
+    notContains: 'not contain',
+    startsWith: 'starts with',
+    endsWith: 'ends with',
+    gt: '>',
+    lt: '<',
+    gte: '≥',
+    lte: '≤',
+    in: '',
+    notIn: 'not in',
+    isEmpty: 'empty',
+    isNotEmpty: 'not empty',
 };
 const DEFAULT_TEXT_OPERATORS = [
-  "is",
-  "isNot",
-  "contains",
-  "notContains",
-  "startsWith",
-  "endsWith",
-  "isEmpty",
-  "isNotEmpty"
+    'is',
+    'isNot',
+    'contains',
+    'notContains',
+    'startsWith',
+    'endsWith',
+    'isEmpty',
+    'isNotEmpty',
 ];
-const NUMBER_OPERATORS = [
-  "is",
-  "isNot",
-  "gt",
-  "lt",
-  "gte",
-  "lte",
-  "isEmpty",
-  "isNotEmpty"
+export const NUMBER_OPERATORS = [
+    'is',
+    'isNot',
+    'gt',
+    'lt',
+    'gte',
+    'lte',
+    'isEmpty',
+    'isNotEmpty',
 ];
-function OperatorDropdown({
-  value,
-  onChange,
-  operators,
-  size = "sm",
-  disabled
-}) {
-  const popRef = useRef(null);
-  const [activeIndex, setActiveIndex] = useState(() => Math.max(0, operators.indexOf(value)));
-  useEffect(() => {
-    setActiveIndex(Math.max(0, operators.indexOf(value)));
-  }, [operators, value]);
-  const handleSelect = (op) => {
-    var _a;
-    onChange(op);
-    setActiveIndex(operators.indexOf(op));
-    (_a = popRef.current) == null ? void 0 : _a.close();
-  };
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      ref: popRef,
-      minWidth: "220px",
-      trigger: (toggle, icon) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: toggle,
-          disabled,
-          "aria-label": "Change operator",
-          className: `${styles.operatorTrigger} ${styles[size]}`,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: styles.operatorText, children: LABELS[value] }),
-            icon
-          ]
-        }
-      ),
-      children: /* @__PURE__ */ jsx(Menu, { children: operators.map((op) => {
-        const selected = op === value;
-        return /* @__PURE__ */ jsx(Menu.Item, { active: selected, children: /* @__PURE__ */ jsxs("button", { onClick: () => handleSelect(op), children: [
-          /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: selected ? /* @__PURE__ */ jsx(Check, { size: 16 }) : null }),
-          LABELS[op]
-        ] }) }, op);
-      }) })
-    }
-  );
+function OperatorDropdown({ value, onChange, operators, size = 'sm', disabled, }) {
+    const popRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(() => Math.max(0, operators.indexOf(value)));
+    useEffect(() => {
+        setActiveIndex(Math.max(0, operators.indexOf(value)));
+    }, [operators, value]);
+    const handleSelect = (op) => {
+        var _a;
+        onChange(op);
+        setActiveIndex(operators.indexOf(op));
+        (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    return (_jsx(Popover, { ref: popRef, minWidth: "220px", trigger: (toggle, icon) => (_jsxs("button", { type: "button", onClick: toggle, disabled: disabled, "aria-label": "Change operator", className: `${styles.operatorTrigger} ${styles[size]}`, children: [_jsx("span", { className: styles.operatorText, children: LABELS[value] }), icon] })), children: _jsx(Menu, { children: operators.map(op => {
+                const selected = op === value;
+                return (_jsx(Menu.Item, { active: selected, children: _jsxs("button", { type: "button", onClick: () => handleSelect(op), disabled: disabled, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: selected ? _jsx(Check, { size: 16 }) : null }), LABELS[op]] }) }, op));
+            }) }) }));
 }
-function FilterField({
-  field,
-  control,
-  operator,
-  value,
-  onChange,
-  operators,
-  options = [],
-  single = true,
-  size = "md",
-  label,
-  placeholder = "Type value\u2026",
-  disabled,
-  ...inputProps
-}) {
-  const [selectedOperator, setSelectedOperator] = useState(operator);
-  const ops = useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
-  useEffect(() => {
-  }, [operator]);
-  useEffect(() => {
-    if (ops.includes(operator)) {
-      setSelectedOperator(operator);
-    }
-  }, [operator]);
-  const emit = (next) => {
-    var _a, _b, _c;
-    setSelectedOperator((_a = next.operator) != null ? _a : selectedOperator);
-    onChange({
-      field,
-      operator: (_b = next.operator) != null ? _b : selectedOperator,
-      value: (_c = next.value) != null ? _c : value
-    });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: ` ${styles.filterField} ${styles[size]}`, children: [
-    label ? /* @__PURE__ */ jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null,
-    /* @__PURE__ */ jsx(
-      OperatorDropdown,
-      {
-        value: selectedOperator,
-        onChange: (op) => emit({ operator: op }),
-        operators: ops,
-        size,
-        disabled
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: `${control === "input" ? "" : styles.valueWrapper}`, children: control === "input" ? /* @__PURE__ */ jsx(
-      Input,
-      {
-        ...inputProps,
-        value: value != null ? value : "",
-        onChange: (e) => emit({ value: e.currentTarget.value }),
-        inputSize: size,
-        placeholder,
-        fullWidth: true,
-        minWidth: "120px",
-        disabled,
-        onClear: () => emit({ value: "" })
-      }
-    ) : single ? /* @__PURE__ */ jsx(
-      Select,
-      {
-        options,
-        selectedValue: value != null ? value : null,
-        onChange: (v) => emit({ value: v }),
-        placeholder,
-        size,
-        variant: "inline",
-        onClear: () => emit({ value: "" })
-      }
-    ) : /* @__PURE__ */ jsx(
-      MultiSelect,
-      {
-        options,
-        size,
-        variant: "inline",
-        selectedValues: Array.isArray(value) ? value : [],
-        onChange: (v) => {
-          const current = new Set(Array.isArray(value) ? value : []);
-          current.has(v) ? current.delete(v) : current.add(v);
-          emit({ value: Array.from(current) });
-        },
-        onClear: () => emit({ value: [] }),
-        children: placeholder
-      }
-    ) })
-  ] });
+export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, ...inputProps }) {
+    var _a, _b;
+    const [selectedOperator, setSelectedOperator] = useState(operator);
+    const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
+    // Local state ONLY for input control (to avoid URL->props lag)
+    const [localValue, setLocalValue] = useState((_a = value) !== null && _a !== void 0 ? _a : '');
+    const debounceRef = useRef(null);
+    const isTypingRef = useRef(false);
+    useEffect(() => {
+        if (ops.includes(operator)) {
+            setSelectedOperator(operator);
+        }
+    }, [operator, ops]);
+    const emit = (next) => {
+        var _a, _b;
+        const nextOperator = (_a = next.operator) !== null && _a !== void 0 ? _a : selectedOperator;
+        const nextValue = (_b = next.value) !== null && _b !== void 0 ? _b : value;
+        if (next.operator)
+            setSelectedOperator(nextOperator);
+        onChange({
+            field,
+            operator: nextOperator,
+            value: nextValue,
+        });
+    };
+    const scheduleEmitValue = (nextVal) => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+            isTypingRef.current = false;
+            emit({ value: nextVal });
+        }, 250); // tweak debounce as needed
+    };
+    // Sync internal value when parent value changes (e.g. URL updates)
+    useEffect(() => {
+        var _a;
+        if (control !== 'input')
+            return;
+        const incoming = (_a = value) !== null && _a !== void 0 ? _a : '';
+        // don't fight the user mid-typing; once parent catches up, we allow sync again
+        if (!isTypingRef.current && incoming !== localValue) {
+            setLocalValue(incoming);
+        }
+        if (incoming === localValue) {
+            isTypingRef.current = false;
+        }
+    }, [value, control, localValue]);
+    // Cleanup debounce on unmount
+    useEffect(() => {
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+    }, []);
+    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: ` ${styles.filterField} ${styles[size]} ${value ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: op => emit({ operator: op }), operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex' : styles.valueWrapper}`, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
+                        const next = e.currentTarget.value;
+                        isTypingRef.current = true;
+                        setLocalValue(next); // immediate UI update
+                        scheduleEmitValue(next); // debounced parent update
+                    }, inputSize: size, placeholder: placeholder, width: "160px", minWidth: "120px", disabled: disabled, onClear: () => {
+                        isTypingRef.current = false;
+                        if (debounceRef.current)
+                            clearTimeout(debounceRef.current);
+                        setLocalValue('');
+                        emit({ value: '' }); // clear should be immediate
+                    } })) : single ? (_jsx(Select, { options: options, selectedValue: (_b = value) !== null && _b !== void 0 ? _b : null, onChange: v => emit({ value: v }), placeholder: placeholder, size: size, variant: "inline", onClear: () => emit({ value: '' }) })) : (_jsx(MultiSelect, { options: options, size: size, variant: "inline", selectedValues: (Array.isArray(value) ? value : []), onChange: v => {
+                        const current = new Set((Array.isArray(value) ? value : []));
+                        if (current.has(v)) {
+                            current.delete(v);
+                        }
+                        else {
+                            current.add(v);
+                        }
+                        emit({ value: Array.from(current) });
+                    }, onClear: () => emit({ value: [] }), children: placeholder })) })] }));
 }
-
-export { FilterField, NUMBER_OPERATORS };

package/dist/components/filter-field/FilterField.module.css

@@ -16,10 +16,10 @@
     background-color var(--transition-fast) var(--ease-standard);
 }
 
-.filterField:focus-within {
+/* .filterField.active {
   border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
-}
+  background: var(--color-bg-selected);
+} */
 
 .filterField.sm {
   block-size: calc(var(--component-size-sm) + var(--density));
@@ -76,9 +76,21 @@
 .filterField .valueWrapper {
   display: inline-flex;
   align-items: center;
+  padding: 0;
+  height: 100%;
+}
 
-  padding-block: calc(var(--spacing-2xs) + var(--density));
-  padding-inline: var(--spacing-sm);
+.valueWrapper > * {
+  height: 100%;
+  & > * {
+    height: 100% !important;
+  }
+}
+
+.valueWrapper button {
+  height: 100% !important;
+  border: 0 !important;
+  padding-inline: var(--spacing-sm) !important;
 }
 
 .filterField input {
@@ -93,6 +105,10 @@
   block-size: 100%;
 }
 
+.filterField button {
+  border-radius: 0;
+}
+
 .filterField input::placeholder {
   color: var(--color-fg-muted);
 }

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.d.ts

@@ -0,0 +1,36 @@
+import type { JSX } from 'react';
+import React from 'react';
+interface ChipToggleOption {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+}
+interface ChipMultiToggleProps {
+    /** Optional group label (e.g. "Fejlede i") */
+    label?: string;
+    options: ChipToggleOption[];
+    selectedValues: string[];
+    onChange: (nextSelectedValues: string[]) => void;
+    onToggle?: (toggledValue: string, isSelected: boolean) => void;
+    size?: 'sm' | 'md' | 'lg';
+    selectedSeverity: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    unselectedSeverity?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | null;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    showAllOption?: boolean;
+    allLabel?: string;
+    allIcon?: React.ReactNode;
+    /**
+     * ✅ If true, clicking "All" toggles between:
+     * - All (no filtering) => []
+     * - None (match nothing) => [noneValue]
+     */
+    allTogglesNone?: boolean;
+    /**
+     * Sentinel stored in selectedValues to represent "none selected".
+     * Must not collide with any real option.value.
+     */
+    noneValue?: string;
+}
+export declare function ChipMultiToggle({ label, options, selectedValues, onChange, onToggle, size, selectedSeverity, unselectedSeverity, fullWidth, disabled, showAllOption, allLabel, allIcon, allTogglesNone, noneValue, }: ChipMultiToggleProps): JSX.Element;
+export {};

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Chip } from '../../../components/chip/Chip';
+import styles from './ChipMultiToggle.module.css';
+export function ChipMultiToggle({ label, options, selectedValues = [], onChange, onToggle, size = 'sm', selectedSeverity = 'info', unselectedSeverity = null, fullWidth = false, disabled = false, showAllOption = false, allLabel = 'Alle', allIcon, allTogglesNone = false, noneValue = '__none__', }) {
+    const selectedSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
+    const isNoneSelected = allTogglesNone && selectedSet.has(noneValue);
+    const isAllSelected = showAllOption && !isNoneSelected && selectedSet.size === 0;
+    const toggleValue = (value) => {
+        if (disabled)
+            return;
+        // If we're in "none" state, selecting any option should exit none state
+        const next = new Set(selectedSet);
+        if (isNoneSelected)
+            next.delete(noneValue);
+        const willSelect = !next.has(value);
+        if (willSelect)
+            next.add(value);
+        else
+            next.delete(value);
+        const nextArr = Array.from(next);
+        onChange(nextArr);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(value, willSelect);
+    };
+    const toggleAll = () => {
+        if (disabled)
+            return;
+        if (!allTogglesNone) {
+            // Classic "All" = clear selection
+            onChange([]);
+            return;
+        }
+        // Toggle between All <-> None
+        if (isAllSelected) {
+            onChange([noneValue]);
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle(noneValue, true);
+        }
+        else if (isNoneSelected) {
+            onChange([]);
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle(noneValue, false);
+        }
+        else {
+            // If some are selected, clicking All goes to All (clear)
+            onChange([]);
+        }
+    };
+    return (_jsxs("div", { className: `${styles.wrapper} ${fullWidth ? styles.fullWidth : ''}`, children: [label && _jsx("span", { className: styles.label, children: label }), _jsxs("div", { className: styles.container, children: [showAllOption && (_jsx("button", { type: "button", className: styles.chipButton, onClick: toggleAll, "aria-pressed": isAllSelected || isNoneSelected, disabled: disabled, children: _jsx(Chip, { size: size, severity: (isAllSelected || isNoneSelected ? selectedSeverity : unselectedSeverity), customIcon: allIcon, type: unselectedSeverity === null ? 'outlined' : 'rounded', children: isNoneSelected ? `${allLabel} (ingen)` : allLabel }) }, "__all__")), options.map(opt => {
+                        // If none-state is active, everything else should look unselected
+                        const isSelected = !isNoneSelected && selectedSet.has(opt.value);
+                        return (_jsx("button", { type: "button", className: styles.chipButton, onClick: () => toggleValue(opt.value), "aria-pressed": isSelected, disabled: disabled, children: _jsx(Chip, { size: size, severity: (isSelected ? selectedSeverity : unselectedSeverity), customIcon: opt.icon, type: unselectedSeverity === null ? 'outlined' : 'rounded', children: opt.label }) }, opt.value));
+                    })] })] }));
+}