@dbcdk/react-components 0.0.168 → 0.0.170

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

@@ -3,6 +3,7 @@
 
 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');
@@ -14,20 +15,20 @@ 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",
+  is: "er",
+  isNot: "er ikke",
+  contains: "indeholder",
+  notContains: "indeholder ikke",
+  startsWith: "starter med",
+  endsWith: "slutter med",
   gt: ">",
   lt: "<",
   gte: "\u2265",
   lte: "\u2264",
-  in: "",
-  notIn: "not in",
-  isEmpty: "empty",
-  isNotEmpty: "not empty"
+  in: "er en af",
+  notIn: "er ikke en af",
+  isEmpty: "er tom",
+  isNotEmpty: "er ikke tom"
 };
 const DEFAULT_TEXT_OPERATORS = [
   "is",
@@ -55,10 +56,12 @@ 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);
@@ -68,16 +71,21 @@ function OperatorDropdown({
     Popover.Popover,
     {
       ref: popRef,
+      contentId,
       minWidth: "140px",
       matchTriggerWidth: false,
-      trigger: (toggle, icon) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      trigger: (toggle, icon, open) => /* @__PURE__ */ jsxRuntime.jsxs(
+        Button.Button,
         {
-          type: "button",
+          variant: "outlined",
+          size,
           onClick: toggle,
           disabled,
-          "aria-label": "Skift operator",
-          className: `${styles__default.default.operatorTrigger} ${styles__default.default[size]}`,
+          "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
@@ -116,12 +124,21 @@ function FilterField({
   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(() => {
@@ -196,90 +213,109 @@ function FilterField({
       clearDebounce();
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  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: [
-        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,
+      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,
               {
-                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: "" });
-                }
+                value: selectedOperator,
+                onChange: handleOperatorChange,
+                operators: ops,
+                label: resolvedLabel,
+                size,
+                disabled
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              Typeahead.Typeahead,
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                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
+                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
+                  }
+                )
               }
             )
-          }
-        )
-      ]
+          ]
+        }
+      )
     }
   );
 }

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

@@ -29,9 +29,11 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     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, ...inputProps }: FilterFieldProps & {
+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

@@ -1,6 +1,7 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useMemo, useState, useEffect } from 'react';
+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';
@@ -8,20 +9,20 @@ 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",
+  is: "er",
+  isNot: "er ikke",
+  contains: "indeholder",
+  notContains: "indeholder ikke",
+  startsWith: "starter med",
+  endsWith: "slutter med",
   gt: ">",
   lt: "<",
   gte: "\u2265",
   lte: "\u2264",
-  in: "",
-  notIn: "not in",
-  isEmpty: "empty",
-  isNotEmpty: "not empty"
+  in: "er en af",
+  notIn: "er ikke en af",
+  isEmpty: "er tom",
+  isNotEmpty: "er ikke tom"
 };
 const DEFAULT_TEXT_OPERATORS = [
   "is",
@@ -49,10 +50,12 @@ function OperatorDropdown({
   value,
   onChange,
   operators,
+  label,
   size = "sm",
   disabled
 }) {
   const popRef = useRef(null);
+  const contentId = useId();
   const handleSelect = (op) => {
     var _a;
     onChange(op);
@@ -62,16 +65,21 @@ function OperatorDropdown({
     Popover,
     {
       ref: popRef,
+      contentId,
       minWidth: "140px",
       matchTriggerWidth: false,
-      trigger: (toggle, icon) => /* @__PURE__ */ jsxs(
-        "button",
+      trigger: (toggle, icon, open) => /* @__PURE__ */ jsxs(
+        Button,
         {
-          type: "button",
+          variant: "outlined",
+          size,
           onClick: toggle,
           disabled,
-          "aria-label": "Skift operator",
-          className: `${styles.operatorTrigger} ${styles[size]}`,
+          "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
@@ -110,12 +118,21 @@ function FilterField({
   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(() => {
@@ -190,90 +207,109 @@ function FilterField({
       clearDebounce();
     };
   }, []);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "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,
+      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,
               {
-                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: "" });
-                }
+                value: selectedOperator,
+                onChange: handleOperatorChange,
+                operators: ops,
+                label: resolvedLabel,
+                size,
+                disabled
               }
-            ) : /* @__PURE__ */ jsx(
-              Typeahead,
+            ) }),
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                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
+                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
+                  }
+                )
               }
             )
-          }
-        )
-      ]
+          ]
+        }
+      )
     }
   );
 }