@dbcdk/react-components 0.0.102 → 0.0.104

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

@@ -0,0 +1,289 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { useRef, useMemo, useState, useEffect } from 'react';
+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: "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"
+};
+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,
+  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: "160px",
+      trigger: (toggle, icon) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: toggle,
+          disabled,
+          "aria-label": "Skift 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", { type: "button", onClick: () => handleSelect(op), disabled, children: [
+          /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: selected ? /* @__PURE__ */ jsx(Check, { size: 16 }) : null }),
+          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,
+  ...inputProps
+}) {
+  var _a, _b, _c, _d;
+  const filterFieldRef = useRef(null);
+  const ops = useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
+  const shouldAutoFitTypeahead = control === "select" && single && !width;
+  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__ */ jsxs(
+    "div",
+    {
+      ref: filterFieldRef,
+      ...dataCy ? { "data-cy": dataCy } : {},
+      className: [styles.filterField, styles[size], styles[variant], active ? styles.active : ""].filter(Boolean).join(" "),
+      children: [
+        label ? /* @__PURE__ */ jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null,
+        /* @__PURE__ */ jsx("div", { className: styles.operatorWrapper, children: /* @__PURE__ */ jsx(
+          OperatorDropdown,
+          {
+            value: selectedOperator,
+            onChange: handleOperatorChange,
+            operators: ops,
+            size,
+            disabled
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              styles.valueWrapper,
+              control === "input" ? "dbc-flex dbc-flex-grow" : "",
+              shouldAutoFitTypeahead ? styles.autoWidth : ""
+            ].filter(Boolean).join(" "),
+            style: shouldAutoFitTypeahead ? maxWidth ? { maxWidth } : void 0 : { width, maxWidth },
+            children: control === "input" ? /* @__PURE__ */ jsx(
+              Input,
+              {
+                variant: "embedded",
+                ...inputProps,
+                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,
+                popoverAnchorRef: filterFieldRef,
+                placeholder,
+                variant: "embedded",
+                inputProps: {
+                  inputSize: size,
+                  fieldClassName: styles.embeddedInputField,
+                  inputClassName: styles.embeddedInputElement
+                },
+                onClear: () => emit({ value: single ? "" : [] }),
+                disabled,
+                fullWidth: !shouldAutoFitTypeahead,
+                fitContent: shouldAutoFitTypeahead
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FilterField, NUMBER_OPERATORS };

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

@@ -0,0 +1,379 @@
+.filterField {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  position: relative;
+  z-index: 0;
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family);
+  color: var(--color-fg-default);
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-default);
+  overflow: visible;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+}
+
+/* =========================
+   VARIANTS
+   ========================= */
+
+.filterField.surface {
+  background: var(--color-bg-surface);
+  border-color: var(--color-border-subtle);
+  box-shadow: var(--shadow-xs);
+  --filter-operator-bg: var(--color-bg-surface);
+}
+
+.filterField.surface:hover {
+  border-color: var(--color-border-default);
+  box-shadow: var(--shadow-sm);
+}
+
+.filterField.surface.active {
+  background: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
+  border-color: var(--color-border-selected);
+  box-shadow: var(--shadow-sm);
+  --filter-operator-bg: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
+}
+
+.filterField.outlined {
+  background: var(--color-bg-surface);
+  border-color: var(--color-border-subtle);
+  box-shadow: none;
+  --filter-operator-bg: var(--color-bg-surface);
+}
+
+.filterField.outlined:hover {
+  border-color: var(--color-border-default);
+}
+
+.filterField.outlined.active {
+  background: color-mix(in srgb, var(--color-bg-selected) 38%, var(--color-bg-surface));
+  border-color: var(--color-border-selected);
+  box-shadow: none;
+  --filter-operator-bg: color-mix(in srgb, var(--color-bg-selected) 38%, var(--color-bg-surface));
+}
+
+.filterField.subtle {
+  background: var(--color-bg-toolbar);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px transparent;
+  --filter-operator-bg: color-mix(in srgb, var(--color-fg-default) 4%, var(--color-bg-toolbar));
+}
+
+.filterField.subtle:hover {
+  background: var(--color-bg-surface-strong);
+  --filter-operator-bg: color-mix(
+    in srgb,
+    var(--color-fg-default) 6%,
+    var(--color-bg-surface-strong)
+  );
+}
+
+.filterField.subtle.active {
+  background: color-mix(in srgb, var(--color-bg-selected) 55%, var(--color-bg-surface-strong));
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px transparent;
+  --filter-operator-bg: color-mix(
+    in srgb,
+    var(--color-bg-selected) 55%,
+    var(--color-bg-surface-strong)
+  );
+}
+
+.filterField.active .label {
+  color: var(--color-fg-default);
+}
+
+/* =========================
+   FOCUS
+   ========================= */
+
+.filterField:focus-within {
+  z-index: 1;
+}
+
+.filterField.surface:focus-within,
+.filterField.outlined:focus-within,
+.filterField.subtle:focus-within {
+  border-color: var(--color-border-selected);
+}
+
+.filterField.surface:focus-within {
+  box-shadow: var(--shadow-sm);
+}
+
+.filterField.outlined:focus-within,
+.filterField.subtle:focus-within {
+  box-shadow: none;
+}
+
+.filterField.surface.active:focus-within {
+  box-shadow: var(--shadow-sm);
+}
+
+.filterField.outlined.active:focus-within,
+.filterField.subtle.active:focus-within {
+  box-shadow: none;
+}
+
+/* =========================
+   SIZES
+   ========================= */
+
+.filterField.sm {
+  block-size: var(--component-size-sm);
+}
+
+.filterField.md {
+  block-size: var(--component-size-md);
+}
+
+.filterField.lg {
+  block-size: var(--component-size-lg);
+}
+
+/* =========================
+   LABEL
+   ========================= */
+
+.filterField .label {
+  display: inline-flex;
+  align-items: center;
+  padding-block: var(--spacing-2xs);
+  padding-inline: var(--spacing-xs);
+  padding-inline-end: var(--spacing-xxs);
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-subtle);
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* =========================
+   OPERATOR
+   ========================= */
+
+.filterField .operatorWrapper {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.filterField .operatorTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xxs);
+  height: 100%;
+  padding-block: var(--spacing-2xs);
+  padding-inline: var(--spacing-xxs);
+  color: var(--color-fg-default);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  position: relative;
+  z-index: 0;
+  font-weight: var(--font-weight-default);
+  font-size: var(--font-size-sm);
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.filterField .operatorTrigger::after {
+  content: '';
+  position: absolute;
+  inset: 1px 0;
+  background: var(--filter-operator-bg, transparent);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.filterField .operatorTrigger > * {
+  position: relative;
+  z-index: 1;
+}
+
+.filterField .operatorTrigger:hover:not(:disabled) {
+  color: var(--color-fg-default);
+}
+
+.filterField .operatorTrigger:hover:not(:disabled)::after {
+  background: color-mix(
+    in srgb,
+    var(--color-fg-default) 8%,
+    var(--filter-operator-bg, transparent)
+  );
+}
+
+/* =========================
+   SEPARATORS
+   ========================= */
+
+.filterField .operatorTrigger::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--color-border-subtle);
+  pointer-events: none;
+}
+
+/* =========================
+   DISABLED
+   ========================= */
+
+.filterField .operatorTrigger:disabled,
+.filterField .operatorTrigger[aria-disabled='true'] {
+  cursor: not-allowed;
+  color: var(--color-disabled-fg);
+}
+
+.filterField.surface .operatorTrigger:disabled,
+.filterField.outlined .operatorTrigger:disabled {
+  --filter-operator-bg: var(--color-disabled-bg);
+}
+
+.filterField.subtle .operatorTrigger:disabled {
+  --filter-operator-bg: color-mix(
+    in srgb,
+    var(--color-fg-default) 3%,
+    var(--color-bg-surface-subtle)
+  );
+}
+
+.operatorTrigger svg {
+  height: var(--component-size-xxs);
+  width: var(--component-size-xxs);
+  flex: 0 0 auto;
+}
+
+/* =========================
+   VALUE WRAPPER
+   ========================= */
+
+.filterField .valueWrapper {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  height: 100%;
+  flex: 1 1 auto;
+  min-width: 0;
+  position: relative;
+}
+
+/* Base child sizing */
+.filterField .valueWrapper > * {
+  height: 100%;
+  min-width: 0;
+}
+
+.filterField .valueWrapper > div {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  min-width: 0;
+}
+
+/* Fill mode: regular inputs should stretch */
+.filterField .valueWrapper:not(.autoWidth) > * {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.filterField .valueWrapper:not(.autoWidth) > div {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+/* Auto-width mode: let Typeahead keep its measured width */
+.filterField .valueWrapper.autoWidth {
+  flex: 1 1 auto;
+  width: auto;
+  min-width: 0;
+}
+
+.filterField .valueWrapper.autoWidth > * {
+  width: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.filterField .valueWrapper.autoWidth > div {
+  width: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Embedded Input internals */
+.filterField .valueWrapper .field {
+  min-height: unset;
+  height: 100%;
+  block-size: 100%;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+  min-width: 0;
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+/* Keep a small breathing space inside the filter row */
+.embeddedInputField {
+  min-width: 0;
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.embeddedInputElement {
+  flex: 1 1 auto;
+  inline-size: 100%;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  block-size: 100%;
+  min-height: unset;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding-block: 0;
+  padding-inline: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.filterField .valueWrapper .startAdornment {
+  margin-left: 0;
+  gap: 2px;
+  min-width: 0;
+}
+
+/* =========================
+   TEXT
+   ========================= */
+
+.filterField .operatorText {
+  white-space: nowrap;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+}
+
+.filterField input {
+  height: 100%;
+  min-width: 0;
+}
+
+.filterField input::placeholder {
+  color: var(--color-fg-subtle);
+}