@dbcdk/react-components 0.0.169 → 0.0.171

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

@@ -0,0 +1,324 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Button = require('../../components/button/Button');
+var Input = require('../../components/forms/input/Input');
+var Typeahead = require('../../components/forms/typeahead/Typeahead');
+var styles = require('./FilterField.module.css');
+var Menu = require('../menu/Menu');
+var Popover = require('../popover/Popover');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const LABELS = {
+  is: "er",
+  isNot: "er ikke",
+  contains: "indeholder",
+  notContains: "indeholder ikke",
+  startsWith: "starter med",
+  endsWith: "slutter med",
+  gt: ">",
+  lt: "<",
+  gte: "\u2265",
+  lte: "\u2264",
+  in: "er en af",
+  notIn: "er ikke en af",
+  isEmpty: "er tom",
+  isNotEmpty: "er ikke tom"
+};
+const DEFAULT_TEXT_OPERATORS = [
+  "is",
+  "isNot",
+  "contains",
+  "notContains",
+  "startsWith",
+  "endsWith",
+  "isEmpty",
+  "isNotEmpty"
+];
+const NUMBER_OPERATORS = [
+  "is",
+  "isNot",
+  "gt",
+  "lt",
+  "gte",
+  "lte",
+  "isEmpty",
+  "isNotEmpty"
+];
+const VALUELESS_OPERATORS = ["isEmpty", "isNotEmpty"];
+const INPUT_DEBOUNCE_MS = 500;
+function OperatorDropdown({
+  value,
+  onChange,
+  operators,
+  label,
+  size = "sm",
+  disabled
+}) {
+  const popRef = react.useRef(null);
+  const contentId = react.useId();
+  const handleSelect = (op) => {
+    var _a;
+    onChange(op);
+    (_a = popRef.current) == null ? void 0 : _a.close();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      ref: popRef,
+      contentId,
+      minWidth: "140px",
+      matchTriggerWidth: false,
+      trigger: (toggle, icon, open) => /* @__PURE__ */ jsxRuntime.jsxs(
+        Button.Button,
+        {
+          variant: "outlined",
+          size,
+          onClick: toggle,
+          disabled,
+          "aria-label": `Skift operator for ${label}`,
+          "aria-haspopup": "menu",
+          "aria-expanded": open,
+          "aria-controls": contentId,
+          className: [styles__default.default.operatorTrigger, open ? styles__default.default.operatorTriggerOpen : ""].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.operatorText, children: LABELS[value] }),
+            icon
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: operators.map((op) => {
+        const selected = op === value;
+        return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: selected, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => handleSelect(op), disabled, children: LABELS[op] }) }, op);
+      }) })
+    }
+  );
+}
+function isFilterActive(value) {
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === "string") return value.trim().length > 0;
+  return value != null;
+}
+function FilterField({
+  field,
+  control,
+  operator,
+  value,
+  onChange,
+  operators,
+  options = [],
+  single = true,
+  size = "md",
+  variant = "surface",
+  label,
+  placeholder = "Type value\u2026",
+  disabled,
+  "data-cy": dataCy,
+  minWidth,
+  width,
+  maxWidth,
+  popoverWidth,
+  debounceTime = INPUT_DEBOUNCE_MS,
+  maxVisibleOptions,
+  allowCustomValue = false,
+  ...inputProps
+}) {
+  var _a, _b, _c, _d;
+  const filterFieldRef = react.useRef(null);
+  const reactId = react.useId();
+  const labelId = `filter-field-label-${reactId}`;
+  const valueInputId = `filter-field-value-${reactId}`;
+  const ops = react.useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
+  const shouldAutoFitTypeahead = control === "select" && single && !width;
+  const resolvedLabel = label != null ? label : field;
+  const describedBy = [inputProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+  const labelledBy = [labelId, inputProps["aria-labelledby"]].filter(Boolean).join(" ");
+  const invalid = inputProps["aria-invalid"];
+  const [selectedOperator, setSelectedOperator] = react.useState(operator);
+  const active = isFilterActive(value);
+  react.useEffect(() => {
+    if (ops.includes(operator)) {
+      setSelectedOperator(operator);
+    }
+  }, [operator, ops]);
+  const [localValue, setLocalValue] = react.useState(value != null ? value : "");
+  const debounceRef = react.useRef(null);
+  const pendingValueRef = react.useRef(null);
+  const emit = (next) => {
+    var _a2, _b2;
+    const nextOperator = (_a2 = next.operator) != null ? _a2 : selectedOperator;
+    const nextValue = (_b2 = next.value) != null ? _b2 : value;
+    if (next.operator) {
+      setSelectedOperator(nextOperator);
+    }
+    onChange({
+      field,
+      operator: nextOperator,
+      value: nextValue
+    });
+  };
+  const clearDebounce = () => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+  };
+  const scheduleEmitValue = (nextVal) => {
+    clearDebounce();
+    pendingValueRef.current = nextVal;
+    debounceRef.current = setTimeout(() => {
+      emit({ value: nextVal });
+    }, debounceTime);
+  };
+  const flushPendingValue = () => {
+    if (control !== "input") return;
+    clearDebounce();
+    pendingValueRef.current = localValue;
+    emit({ value: localValue });
+  };
+  const handleOperatorChange = (op) => {
+    setSelectedOperator(op);
+    if (!active && !VALUELESS_OPERATORS.includes(op)) return;
+    if (VALUELESS_OPERATORS.includes(op)) {
+      clearDebounce();
+      pendingValueRef.current = null;
+      emit({ operator: op, value: null });
+      return;
+    }
+    clearDebounce();
+    pendingValueRef.current = control === "input" ? localValue : typeof value === "string" ? value : null;
+    emit({ operator: op });
+  };
+  react.useEffect(() => {
+    if (control !== "input") return;
+    const incoming = value != null ? value : "";
+    const pending = pendingValueRef.current;
+    if (pending !== null) {
+      if (incoming === pending) {
+        pendingValueRef.current = null;
+      }
+      return;
+    }
+    if (incoming !== localValue) {
+      setLocalValue(incoming);
+    }
+  }, [value, control, localValue]);
+  react.useEffect(() => {
+    return () => {
+      clearDebounce();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: filterFieldRef,
+      ...dataCy ? { "data-cy": dataCy } : {},
+      className: [styles__default.default.filterField, styles__default.default[size], styles__default.default[variant], active ? styles__default.default.active : ""].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: [
+            styles__default.default.controlGroup,
+            invalid ? styles__default.default.invalid : "",
+            disabled ? styles__default.default.disabled : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: styles__default.default.label, children: resolvedLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.operatorWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+              OperatorDropdown,
+              {
+                value: selectedOperator,
+                onChange: handleOperatorChange,
+                operators: ops,
+                label: resolvedLabel,
+                size,
+                disabled
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: [
+                  styles__default.default.valueWrapper,
+                  control === "input" ? "dbc-flex dbc-flex-grow" : "",
+                  shouldAutoFitTypeahead ? styles__default.default.autoWidth : ""
+                ].filter(Boolean).join(" "),
+                style: shouldAutoFitTypeahead ? maxWidth || minWidth ? { minWidth, maxWidth } : void 0 : { minWidth, width, maxWidth },
+                children: control === "input" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Input.Input,
+                  {
+                    variant: "embedded",
+                    ...inputProps,
+                    id: valueInputId,
+                    "aria-labelledby": labelledBy,
+                    "aria-describedby": describedBy,
+                    fieldClassName: styles__default.default.embeddedInputField,
+                    inputClassName: styles__default.default.embeddedInputElement,
+                    value: localValue,
+                    onChange: (e) => {
+                      const next = e.currentTarget.value;
+                      setLocalValue(next);
+                      scheduleEmitValue(next);
+                    },
+                    onBlur: () => {
+                      flushPendingValue();
+                    },
+                    fullWidth: true,
+                    inputSize: size,
+                    placeholder,
+                    disabled,
+                    autoComplete: (_a = inputProps.autoComplete) != null ? _a : "off",
+                    autoCorrect: (_b = inputProps.autoCorrect) != null ? _b : "off",
+                    autoCapitalize: (_c = inputProps.autoCapitalize) != null ? _c : "none",
+                    spellCheck: (_d = inputProps.spellCheck) != null ? _d : false,
+                    onClear: () => {
+                      clearDebounce();
+                      pendingValueRef.current = "";
+                      setLocalValue("");
+                      emit({ value: "" });
+                    }
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  Typeahead.Typeahead,
+                  {
+                    options,
+                    mode: single ? "single" : "multi",
+                    selectedValue: single ? value != null ? value : null : Array.isArray(value) ? value : [],
+                    onChange: (v) => emit({ value: v }),
+                    minWidth,
+                    popoverWidth,
+                    maxVisibleOptions,
+                    allowCustomValue,
+                    popoverAnchorRef: filterFieldRef,
+                    placeholder,
+                    variant: "embedded",
+                    inputProps: {
+                      id: valueInputId,
+                      "aria-labelledby": labelledBy,
+                      "aria-describedby": describedBy,
+                      inputSize: size,
+                      fieldClassName: styles__default.default.embeddedInputField,
+                      inputClassName: styles__default.default.embeddedInputElement
+                    },
+                    onClear: () => emit({ value: single ? "" : [] }),
+                    disabled,
+                    fullWidth: !shouldAutoFitTypeahead,
+                    fitContent: shouldAutoFitTypeahead
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+exports.FilterField = FilterField;
+exports.NUMBER_OPERATORS = NUMBER_OPERATORS;

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+export type Operator = 'is' | 'isNot' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'gt' | 'lt' | 'gte' | 'lte' | 'in' | 'notIn' | 'isEmpty' | 'isNotEmpty';
+export interface FilterEvent {
+    field: string;
+    operator: Operator;
+    value: string | string[] | null;
+}
+interface MultiselectOption {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+}
+export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'value'> {
+    field: string;
+    control: 'input' | 'select';
+    operator: Operator;
+    value: string | string[] | null;
+    onChange: (e: FilterEvent) => void;
+    operators?: Operator[];
+    options?: MultiselectOption[];
+    single?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'surface' | 'outlined' | 'subtle';
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    minWidth?: string;
+    width?: string;
+    maxWidth?: string;
+    popoverWidth?: string;
+    debounceTime?: number;
+    maxVisibleOptions?: number;
+    allowCustomValue?: boolean;
+}
+export declare const NUMBER_OPERATORS: Operator[];
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, minWidth, width, maxWidth, popoverWidth, debounceTime, maxVisibleOptions, allowCustomValue, ...inputProps }: FilterFieldProps & {
+    'data-cy'?: string;
+}): React.ReactElement;
+export {};

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

@@ -0,0 +1,317 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useId, useMemo, useState, useEffect } from 'react';
+import { Button } from '../../components/button/Button';
+import { Input } from '../../components/forms/input/Input';
+import { Typeahead } from '../../components/forms/typeahead/Typeahead';
+import styles from './FilterField.module.css';
+import { Menu } from '../menu/Menu';
+import { Popover } from '../popover/Popover';
+
+const LABELS = {
+  is: "er",
+  isNot: "er ikke",
+  contains: "indeholder",
+  notContains: "indeholder ikke",
+  startsWith: "starter med",
+  endsWith: "slutter med",
+  gt: ">",
+  lt: "<",
+  gte: "\u2265",
+  lte: "\u2264",
+  in: "er en af",
+  notIn: "er ikke en af",
+  isEmpty: "er tom",
+  isNotEmpty: "er ikke tom"
+};
+const DEFAULT_TEXT_OPERATORS = [
+  "is",
+  "isNot",
+  "contains",
+  "notContains",
+  "startsWith",
+  "endsWith",
+  "isEmpty",
+  "isNotEmpty"
+];
+const NUMBER_OPERATORS = [
+  "is",
+  "isNot",
+  "gt",
+  "lt",
+  "gte",
+  "lte",
+  "isEmpty",
+  "isNotEmpty"
+];
+const VALUELESS_OPERATORS = ["isEmpty", "isNotEmpty"];
+const INPUT_DEBOUNCE_MS = 500;
+function OperatorDropdown({
+  value,
+  onChange,
+  operators,
+  label,
+  size = "sm",
+  disabled
+}) {
+  const popRef = useRef(null);
+  const contentId = useId();
+  const handleSelect = (op) => {
+    var _a;
+    onChange(op);
+    (_a = popRef.current) == null ? void 0 : _a.close();
+  };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      ref: popRef,
+      contentId,
+      minWidth: "140px",
+      matchTriggerWidth: false,
+      trigger: (toggle, icon, open) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outlined",
+          size,
+          onClick: toggle,
+          disabled,
+          "aria-label": `Skift operator for ${label}`,
+          "aria-haspopup": "menu",
+          "aria-expanded": open,
+          "aria-controls": contentId,
+          className: [styles.operatorTrigger, open ? styles.operatorTriggerOpen : ""].filter(Boolean).join(" "),
+          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__ */ jsx("button", { type: "button", onClick: () => handleSelect(op), disabled, children: LABELS[op] }) }, op);
+      }) })
+    }
+  );
+}
+function isFilterActive(value) {
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === "string") return value.trim().length > 0;
+  return value != null;
+}
+function FilterField({
+  field,
+  control,
+  operator,
+  value,
+  onChange,
+  operators,
+  options = [],
+  single = true,
+  size = "md",
+  variant = "surface",
+  label,
+  placeholder = "Type value\u2026",
+  disabled,
+  "data-cy": dataCy,
+  minWidth,
+  width,
+  maxWidth,
+  popoverWidth,
+  debounceTime = INPUT_DEBOUNCE_MS,
+  maxVisibleOptions,
+  allowCustomValue = false,
+  ...inputProps
+}) {
+  var _a, _b, _c, _d;
+  const filterFieldRef = useRef(null);
+  const reactId = useId();
+  const labelId = `filter-field-label-${reactId}`;
+  const valueInputId = `filter-field-value-${reactId}`;
+  const ops = useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
+  const shouldAutoFitTypeahead = control === "select" && single && !width;
+  const resolvedLabel = label != null ? label : field;
+  const describedBy = [inputProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+  const labelledBy = [labelId, inputProps["aria-labelledby"]].filter(Boolean).join(" ");
+  const invalid = inputProps["aria-invalid"];
+  const [selectedOperator, setSelectedOperator] = useState(operator);
+  const active = isFilterActive(value);
+  useEffect(() => {
+    if (ops.includes(operator)) {
+      setSelectedOperator(operator);
+    }
+  }, [operator, ops]);
+  const [localValue, setLocalValue] = useState(value != null ? value : "");
+  const debounceRef = useRef(null);
+  const pendingValueRef = useRef(null);
+  const emit = (next) => {
+    var _a2, _b2;
+    const nextOperator = (_a2 = next.operator) != null ? _a2 : selectedOperator;
+    const nextValue = (_b2 = next.value) != null ? _b2 : value;
+    if (next.operator) {
+      setSelectedOperator(nextOperator);
+    }
+    onChange({
+      field,
+      operator: nextOperator,
+      value: nextValue
+    });
+  };
+  const clearDebounce = () => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+  };
+  const scheduleEmitValue = (nextVal) => {
+    clearDebounce();
+    pendingValueRef.current = nextVal;
+    debounceRef.current = setTimeout(() => {
+      emit({ value: nextVal });
+    }, debounceTime);
+  };
+  const flushPendingValue = () => {
+    if (control !== "input") return;
+    clearDebounce();
+    pendingValueRef.current = localValue;
+    emit({ value: localValue });
+  };
+  const handleOperatorChange = (op) => {
+    setSelectedOperator(op);
+    if (!active && !VALUELESS_OPERATORS.includes(op)) return;
+    if (VALUELESS_OPERATORS.includes(op)) {
+      clearDebounce();
+      pendingValueRef.current = null;
+      emit({ operator: op, value: null });
+      return;
+    }
+    clearDebounce();
+    pendingValueRef.current = control === "input" ? localValue : typeof value === "string" ? value : null;
+    emit({ operator: op });
+  };
+  useEffect(() => {
+    if (control !== "input") return;
+    const incoming = value != null ? value : "";
+    const pending = pendingValueRef.current;
+    if (pending !== null) {
+      if (incoming === pending) {
+        pendingValueRef.current = null;
+      }
+      return;
+    }
+    if (incoming !== localValue) {
+      setLocalValue(incoming);
+    }
+  }, [value, control, localValue]);
+  useEffect(() => {
+    return () => {
+      clearDebounce();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: filterFieldRef,
+      ...dataCy ? { "data-cy": dataCy } : {},
+      className: [styles.filterField, styles[size], styles[variant], active ? styles.active : ""].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: [
+            styles.controlGroup,
+            invalid ? styles.invalid : "",
+            disabled ? styles.disabled : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsx("span", { id: labelId, className: styles.label, children: resolvedLabel }),
+            /* @__PURE__ */ jsx("div", { className: styles.operatorWrapper, children: /* @__PURE__ */ jsx(
+              OperatorDropdown,
+              {
+                value: selectedOperator,
+                onChange: handleOperatorChange,
+                operators: ops,
+                label: resolvedLabel,
+                size,
+                disabled
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: [
+                  styles.valueWrapper,
+                  control === "input" ? "dbc-flex dbc-flex-grow" : "",
+                  shouldAutoFitTypeahead ? styles.autoWidth : ""
+                ].filter(Boolean).join(" "),
+                style: shouldAutoFitTypeahead ? maxWidth || minWidth ? { minWidth, maxWidth } : void 0 : { minWidth, width, maxWidth },
+                children: control === "input" ? /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    variant: "embedded",
+                    ...inputProps,
+                    id: valueInputId,
+                    "aria-labelledby": labelledBy,
+                    "aria-describedby": describedBy,
+                    fieldClassName: styles.embeddedInputField,
+                    inputClassName: styles.embeddedInputElement,
+                    value: localValue,
+                    onChange: (e) => {
+                      const next = e.currentTarget.value;
+                      setLocalValue(next);
+                      scheduleEmitValue(next);
+                    },
+                    onBlur: () => {
+                      flushPendingValue();
+                    },
+                    fullWidth: true,
+                    inputSize: size,
+                    placeholder,
+                    disabled,
+                    autoComplete: (_a = inputProps.autoComplete) != null ? _a : "off",
+                    autoCorrect: (_b = inputProps.autoCorrect) != null ? _b : "off",
+                    autoCapitalize: (_c = inputProps.autoCapitalize) != null ? _c : "none",
+                    spellCheck: (_d = inputProps.spellCheck) != null ? _d : false,
+                    onClear: () => {
+                      clearDebounce();
+                      pendingValueRef.current = "";
+                      setLocalValue("");
+                      emit({ value: "" });
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Typeahead,
+                  {
+                    options,
+                    mode: single ? "single" : "multi",
+                    selectedValue: single ? value != null ? value : null : Array.isArray(value) ? value : [],
+                    onChange: (v) => emit({ value: v }),
+                    minWidth,
+                    popoverWidth,
+                    maxVisibleOptions,
+                    allowCustomValue,
+                    popoverAnchorRef: filterFieldRef,
+                    placeholder,
+                    variant: "embedded",
+                    inputProps: {
+                      id: valueInputId,
+                      "aria-labelledby": labelledBy,
+                      "aria-describedby": describedBy,
+                      inputSize: size,
+                      fieldClassName: styles.embeddedInputField,
+                      inputClassName: styles.embeddedInputElement
+                    },
+                    onClear: () => emit({ value: single ? "" : [] }),
+                    disabled,
+                    fullWidth: !shouldAutoFitTypeahead,
+                    fitContent: shouldAutoFitTypeahead
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { FilterField, NUMBER_OPERATORS };