@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,291 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var react = require('react');
-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: "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 = react.useRef(null);
-  const handleSelect = (op) => {
-    var _a;
-    onChange(op);
-    (_a = popRef.current) == null ? void 0 : _a.close();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Popover.Popover,
-    {
-      ref: popRef,
-      minWidth: "160px",
-      trigger: (toggle, icon) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: toggle,
-          disabled,
-          "aria-label": "Skift operator",
-          className: `${styles__default.default.operatorTrigger} ${styles__default.default[size]}`,
-          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.jsxs("button", { type: "button", onClick: () => handleSelect(op), disabled, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: selected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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 = react.useRef(null);
-  const ops = react.useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
-  const shouldAutoFitTypeahead = control === "select" && single && !width;
-  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.jsxs(
-    "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: [
-        label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.label} ${styles__default.default[size]}`, children: label }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.operatorWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
-          OperatorDropdown,
-          {
-            value: selectedOperator,
-            onChange: handleOperatorChange,
-            operators: ops,
-            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 ? { maxWidth } : void 0 : { width, maxWidth },
-            children: control === "input" ? /* @__PURE__ */ jsxRuntime.jsx(
-              Input.Input,
-              {
-                variant: "embedded",
-                ...inputProps,
-                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,
-                popoverAnchorRef: filterFieldRef,
-                placeholder,
-                variant: "embedded",
-                inputProps: {
-                  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

@@ -1,37 +0,0 @@
-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;
-}
-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, ...inputProps }: FilterFieldProps & {
-    'data-cy'?: string;
-}): React.ReactElement;
-export {};

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

@@ -1,284 +0,0 @@
-'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 handleSelect = (op) => {
-    var _a;
-    onChange(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 };