@danske/sapphire-react-lab 0.105.2 → 0.106.2

package/build/esm/FileDropzone/src/FileTrigger.js

@@ -1,77 +1,45 @@
 import React from 'react';
-import { useObjectRef, filterDOMProps } from '@react-aria/utils';
-import { PressResponder } from '@react-aria/interactions';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+import { useObjectRef } from 'react-aria/useObjectRef';
+import { PressResponder } from 'react-aria/private/interactions/PressResponder';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const HiddenFileInput = React.forwardRef(function InputWrapper(props, ref) {
-  return /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
-    ref,
-    type: "file",
-    style: { display: "none" }
-  }));
+  return /* @__PURE__ */ React.createElement("input", { ...props, ref, type: "file", style: { display: "none" } });
 });
 const FileTrigger = React.forwardRef(function FileTriggerWrapper(props, ref) {
-  const _a = props, {
+  const {
     acceptedFileTypes,
     allowsMultiple = false,
     onSelect = () => null,
     children,
-    isDisabled = false
-  } = _a, rest = __objRest(_a, [
-    "acceptedFileTypes",
-    "allowsMultiple",
-    "onSelect",
-    "children",
-    "isDisabled"
-  ]);
+    isDisabled = false,
+    ...rest
+  } = props;
   const inputRef = useObjectRef(ref);
   const domProps = filterDOMProps(rest, { global: true });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PressResponder, {
-    isDisabled,
-    onPress: () => {
-      var _a2;
-      if (inputRef.current) {
-        inputRef.current.value = "";
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    PressResponder,
+    {
+      isDisabled,
+      onPress: () => {
+        if (inputRef.current) {
+          inputRef.current.value = "";
+        }
+        inputRef.current?.click();
       }
-      (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+    },
+    children
+  ), /* @__PURE__ */ React.createElement(
+    HiddenFileInput,
+    {
+      ...domProps,
+      disabled: isDisabled,
+      ref: inputRef,
+      accept: acceptedFileTypes?.toString(),
+      onChange: (e) => onSelect?.(e.target.files),
+      multiple: allowsMultiple
     }
-  }, children), /* @__PURE__ */ React.createElement(HiddenFileInput, __spreadProps(__spreadValues({}, domProps), {
-    disabled: isDisabled,
-    ref: inputRef,
-    accept: acceptedFileTypes == null ? void 0 : acceptedFileTypes.toString(),
-    onChange: (e) => onSelect == null ? void 0 : onSelect(e.target.files),
-    multiple: allowsMultiple
-  })));
+  ));
 });
 
 export { FileTrigger };

package/build/esm/FileDropzone/src/FileTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileTrigger.js","sources":["../../../../src/FileDropzone/src/FileTrigger.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport { filterDOMProps, useObjectRef } from '@react-aria/utils';\nimport { PressResponder } from '@react-aria/interactions';\n\nexport interface FileSelectProps {\n  /**\n   * List of file types that are allowed to be selected using the file select.\n   * When no list is passed, all file types will be allowed to be selected.\n   * @default \"\"\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * Whether multiple files are allowed to be selected using the file select.\n   * @default \"false\"\n   */\n  allowsMultiple?: boolean;\n}\n\nexport interface FileTriggerProps extends FileSelectProps {\n  /**\n   * Callback for file selection.\n   * @param files - the list of selected files\n   * @default \"() => null\"\n   */\n  onSelect?: (files: FileList | null) => void;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n}\n\nconst HiddenFileInput = React.forwardRef(function InputWrapper(\n  props: React.HTMLProps<HTMLInputElement>,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  return <input {...props} ref={ref} type=\"file\" style={{ display: 'none' }} />;\n});\n\nexport const FileTrigger = React.forwardRef(function FileTriggerWrapper(\n  props: FileTriggerProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  const {\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onSelect = () => null,\n    children,\n    isDisabled = false,\n    ...rest\n  } = props;\n  const inputRef = useObjectRef(ref);\n  const domProps = filterDOMProps(rest, { global: true });\n\n  return (\n    <>\n      <PressResponder\n        isDisabled={isDisabled}\n        onPress={() => {\n          if (inputRef.current) {\n            inputRef.current.value = '';\n          }\n          inputRef.current?.click();\n        }}\n      >\n        {children}\n      </PressResponder>\n      <HiddenFileInput\n        {...domProps}\n        disabled={isDisabled}\n        ref={inputRef}\n        accept={acceptedFileTypes?.toString()}\n        onChange={(e) => onSelect?.((e.target as HTMLInputElement).files)}\n        multiple={allowsMultiple}\n      />\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,eAAkB,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CACvC,OACA,GACA,EAAA;AACA,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,KAAX,CAAA,EAAA;AAAA,IAAkB,GAAA;AAAA,IAAU,IAAK,EAAA,MAAA;AAAA,IAAO,KAAA,EAAO,EAAE,OAAS,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA;AAG5D,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,kBAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,MAOI,EANF,GAAA,KAAA,EAAA;AAAA,IAAA,iBAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,WAAW,MAAM,IAAA;AAAA,IACjB,QAAA;AAAA,IACA,UAAa,GAAA,KAAA;AAAA,GAEX,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IALH,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,MAAM,WAAW,YAAa,CAAA,GAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,QAAW,GAAA,cAAA,CAAe,IAAM,EAAA,EAAE,MAAQ,EAAA,IAAA,EAAA,CAAA,CAAA;AAEhD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,cAAD,EAAA;AAAA,IACE,UAAA;AAAA,IACA,SAAS,MAAM;AAvDvB,MAAA,IAAA,GAAA,CAAA;AAwDU,MAAA,IAAI,SAAS,OAAS,EAAA;AACpB,QAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,EAAA,CAAA;AAAA,OAAA;AAE3B,MAAA,CAAA,GAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAGnB,QAEH,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,eAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,QADN,CAAA,EAAA;AAAA,IAEE,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,QAAA;AAAA,IACL,QAAQ,iBAAmB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,QAAA,EAAA;AAAA,IAC3B,QAAU,EAAA,CAAC,CAAM,KAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAY,EAAE,MAA4B,CAAA,KAAA,CAAA;AAAA,IAC3D,QAAU,EAAA,cAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"FileTrigger.js","sources":["../../../../src/FileDropzone/src/FileTrigger.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { PressResponder } from 'react-aria/private/interactions/PressResponder';\n\nexport interface FileSelectProps {\n  /**\n   * List of file types that are allowed to be selected using the file select.\n   * When no list is passed, all file types will be allowed to be selected.\n   * @default \"\"\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * Whether multiple files are allowed to be selected using the file select.\n   * @default \"false\"\n   */\n  allowsMultiple?: boolean;\n}\n\nexport interface FileTriggerProps extends FileSelectProps {\n  /**\n   * Callback for file selection.\n   * @param files - the list of selected files\n   * @default \"() => null\"\n   */\n  onSelect?: (files: FileList | null) => void;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n}\n\nconst HiddenFileInput = React.forwardRef(function InputWrapper(\n  props: React.HTMLProps<HTMLInputElement>,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  return <input {...props} ref={ref} type=\"file\" style={{ display: 'none' }} />;\n});\n\nexport const FileTrigger = React.forwardRef(function FileTriggerWrapper(\n  props: FileTriggerProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  const {\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onSelect = () => null,\n    children,\n    isDisabled = false,\n    ...rest\n  } = props;\n  const inputRef = useObjectRef(ref);\n  const domProps = filterDOMProps(rest, { global: true });\n\n  return (\n    <>\n      <PressResponder\n        isDisabled={isDisabled}\n        onPress={() => {\n          if (inputRef.current) {\n            inputRef.current.value = '';\n          }\n          inputRef.current?.click();\n        }}\n      >\n        {children}\n      </PressResponder>\n      <HiddenFileInput\n        {...domProps}\n        disabled={isDisabled}\n        ref={inputRef}\n        accept={acceptedFileTypes?.toString()}\n        onChange={(e) => onSelect?.((e.target as HTMLInputElement).files)}\n        multiple={allowsMultiple}\n      />\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;;AA8BA,MAAM,kBAAkB,KAAA,CAAM,UAAA,CAAW,SAAS,YAAA,CAChD,OACA,GAAA,EACA;AACA,EAAA,uBAAO,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAO,GAAG,KAAA,EAAO,GAAA,EAAU,IAAA,EAAK,MAAA,EAAO,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAO,EAAG,CAAA;AAC7E,CAAC,CAAA;AAEM,MAAM,cAAc,KAAA,CAAM,UAAA,CAAW,SAAS,kBAAA,CACnD,OACA,GAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,iBAAA;AAAA,IACA,cAAA,GAAiB,KAAA;AAAA,IACjB,WAAW,MAAM,IAAA;AAAA,IACjB,QAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,MAAM,WAAW,cAAA,CAAe,IAAA,EAAM,EAAE,MAAA,EAAQ,MAAM,CAAA;AAEtD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,SAAS,MAAM;AACb,QAAA,IAAI,SAAS,OAAA,EAAS;AACpB,UAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,EAAA;AAAA,QAC3B;AACA,QAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,MAC1B;AAAA,KAAA;AAAA,IAEC;AAAA,GACH,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,QAAA;AAAA,MACJ,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,QAAA;AAAA,MACL,MAAA,EAAQ,mBAAmB,QAAA,EAAS;AAAA,MACpC,UAAU,CAAC,CAAA,KAAM,QAAA,GAAY,CAAA,CAAE,OAA4B,KAAK,CAAA;AAAA,MAChE,QAAA,EAAU;AAAA;AAAA,GAEd,CAAA;AAEJ,CAAC;;;;"}

package/build/esm/FileDropzone/src/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/FileDropzone/src/utils.ts"],"sourcesContent":["import { FileDropItem } from '@react-types/shared';\n\nexport const convertFileListToFileDropItems = (\n  fileList: FileList | null\n): FileDropItem[] => {\n  if (!fileList) {\n    return [];\n  }\n\n  return Array.from(fileList).map((file) => ({\n    kind: 'file',\n    type: file.type,\n    name: file.name,\n    getFile: () => Promise.resolve(file),\n    getText: () =>\n      new Promise<string>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = () => resolve(reader.result as string);\n        reader.onerror = () => reject(reader.error);\n        reader.readAsText(file);\n      }),\n  }));\n};\n"],"names":[],"mappings":"AAEa,MAAA,8BAAA,GAAiC,CAC5C,QACmB,KAAA;AACnB,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAO,OAAA,EAAA,CAAA;AAAA,GAAA;AAGT,EAAA,OAAO,KAAM,CAAA,IAAA,CAAK,QAAU,CAAA,CAAA,GAAA,CAAI,CAAC,IAAU,MAAA;AAAA,IACzC,IAAM,EAAA,MAAA;AAAA,IACN,MAAM,IAAK,CAAA,IAAA;AAAA,IACX,MAAM,IAAK,CAAA,IAAA;AAAA,IACX,OAAA,EAAS,MAAM,OAAA,CAAQ,OAAQ,CAAA,IAAA,CAAA;AAAA,IAC/B,SAAS,MACP,IAAI,OAAgB,CAAA,CAAC,SAAS,MAAW,KAAA;AACvC,MAAA,MAAM,SAAS,IAAI,UAAA,EAAA,CAAA;AACnB,MAAO,MAAA,CAAA,MAAA,GAAS,MAAM,OAAA,CAAQ,MAAO,CAAA,MAAA,CAAA,CAAA;AACrC,MAAO,MAAA,CAAA,OAAA,GAAU,MAAM,MAAA,CAAO,MAAO,CAAA,KAAA,CAAA,CAAA;AACrC,MAAA,MAAA,CAAO,UAAW,CAAA,IAAA,CAAA,CAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/FileDropzone/src/utils.ts"],"sourcesContent":["import { FileDropItem } from '@react-types/shared';\n\nexport const convertFileListToFileDropItems = (\n  fileList: FileList | null\n): FileDropItem[] => {\n  if (!fileList) {\n    return [];\n  }\n\n  return Array.from(fileList).map((file) => ({\n    kind: 'file',\n    type: file.type,\n    name: file.name,\n    getFile: () => Promise.resolve(file),\n    getText: () =>\n      new Promise<string>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = () => resolve(reader.result as string);\n        reader.onerror = () => reject(reader.error);\n        reader.readAsText(file);\n      }),\n  }));\n};\n"],"names":[],"mappings":"AAEO,MAAM,8BAAA,GAAiC,CAC5C,QAAA,KACmB;AACnB,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,OAAO,MAAM,IAAA,CAAK,QAAQ,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,MAAU;AAAA,IACzC,IAAA,EAAM,MAAA;AAAA,IACN,MAAM,IAAA,CAAK,IAAA;AAAA,IACX,MAAM,IAAA,CAAK,IAAA;AAAA,IACX,OAAA,EAAS,MAAM,OAAA,CAAQ,OAAA,CAAQ,IAAI,CAAA;AAAA,IACnC,SAAS,MACP,IAAI,OAAA,CAAgB,CAAC,SAAS,MAAA,KAAW;AACvC,MAAA,MAAM,MAAA,GAAS,IAAI,UAAA,EAAW;AAC9B,MAAA,MAAA,CAAO,MAAA,GAAS,MAAM,OAAA,CAAQ,MAAA,CAAO,MAAgB,CAAA;AACrD,MAAA,MAAA,CAAO,OAAA,GAAU,MAAM,MAAA,CAAO,MAAA,CAAO,KAAK,CAAA;AAC1C,MAAA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,IACxB,CAAC;AAAA,GACL,CAAE,CAAA;AACJ;;;;"}

package/build/esm/Filtering/src/FilterDropdown.js

@@ -1,132 +1,110 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { useEffectEvent, filterDOMProps } from '@react-aria/utils';
-import { useControlledState } from '@react-stately/utils';
+import { VisuallyHidden } from 'react-aria/VisuallyHidden';
+import { useEffectEvent } from 'react-aria/private/utils/useEffectEvent';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+import { useControlledState } from 'react-stately/useControlledState';
 import { useSapphireStyleProps, PopoverTrigger, ButtonGroup, Button, ToggleButton } from '@danske/sapphire-react';
 import { ChevronUp, ChevronDown } from '@danske/sapphire-icons/react';
 import styles from '@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function FilterDropdown(_a) {
-  var _b = _a, {
-    children,
-    label,
-    value,
-    isDisabled = false,
-    isApplyDisabled = false,
-    isClearDisabled,
-    isOpen: isOpenProp,
-    applyButtonLabel = "Apply",
-    clearButtonLabel = "Clear",
-    hideClearButton = false,
-    defaultOpen = false,
-    hasApplyButton = false,
-    noMaxWidth,
-    onApply,
-    onClear,
-    onOpenChange,
-    buttonSize = "md"
-  } = _b, props = __objRest(_b, [
-    "children",
-    "label",
-    "value",
-    "isDisabled",
-    "isApplyDisabled",
-    "isClearDisabled",
-    "isOpen",
-    "applyButtonLabel",
-    "clearButtonLabel",
-    "hideClearButton",
-    "defaultOpen",
-    "hasApplyButton",
-    "noMaxWidth",
-    "onApply",
-    "onClear",
-    "onOpenChange",
-    "buttonSize"
-  ]);
+function FilterDropdown({
+  children,
+  label,
+  value,
+  isDisabled = false,
+  isApplyDisabled = false,
+  isClearDisabled,
+  isOpen: isOpenProp,
+  applyButtonLabel = "Apply",
+  clearButtonLabel = "Clear",
+  hideClearButton = false,
+  defaultOpen = false,
+  hasApplyButton = false,
+  noMaxWidth,
+  onApply,
+  onClear,
+  onOpenChange,
+  buttonSize = "md",
+  ...props
+}) {
   const triggerRef = useRef(null);
   const { styleProps } = useSapphireStyleProps(props);
-  const [isOpen, setIsOpen] = useControlledState(isOpenProp, defaultOpen, useEffectEvent(onOpenChange));
+  const [isOpen, setIsOpen] = useControlledState(
+    isOpenProp,
+    defaultOpen,
+    useEffectEvent(onOpenChange)
+  );
   const hasValue = value != null && value !== "";
   const close = () => setIsOpen(false);
   const onSubmit = (e) => {
-    var _a2;
     e.preventDefault();
-    onApply == null ? void 0 : onApply();
+    onApply?.();
     close();
-    (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
   };
-  const applyButton = /* @__PURE__ */ React.createElement(Button, {
-    type: "submit",
-    size: buttonSize,
-    excludeFromTabOrder: !hasApplyButton,
-    isDisabled: isApplyDisabled
-  }, applyButtonLabel);
-  return /* @__PURE__ */ React.createElement(PopoverTrigger, {
-    ref: triggerRef,
-    placement: "bottom left",
-    isOpen,
-    onOpenChange: setIsOpen,
-    noMaxWidth,
-    noPadding: true,
-    popoverContent: /* @__PURE__ */ React.createElement("form", __spreadProps(__spreadValues({}, filterDOMProps(props, { global: true })), {
-      onSubmit,
-      className: clsx(styles["sapphire-filter-dropdown"], styleProps.className),
-      style: __spreadValues({}, styleProps.style)
-    }), /* @__PURE__ */ React.createElement("div", {
-      className: styles["sapphire-filter-dropdown__body"]
-    }, children), /* @__PURE__ */ React.createElement("div", {
-      className: styles["sapphire-filter-dropdown__footer"]
-    }, /* @__PURE__ */ React.createElement(ButtonGroup, {
-      align: "right"
-    }, !hideClearButton && /* @__PURE__ */ React.createElement(Button, {
+  const applyButton = /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "submit",
       size: buttonSize,
-      variant: "text",
-      onPress: () => {
-        close();
-        onClear == null ? void 0 : onClear();
+      excludeFromTabOrder: !hasApplyButton,
+      isDisabled: isApplyDisabled
+    },
+    applyButtonLabel
+  );
+  return /* @__PURE__ */ React.createElement(
+    PopoverTrigger,
+    {
+      ref: triggerRef,
+      placement: "bottom left",
+      isOpen,
+      onOpenChange: setIsOpen,
+      noMaxWidth,
+      noPadding: true,
+      popoverContent: /* @__PURE__ */ React.createElement(
+        "form",
+        {
+          ...filterDOMProps(props, { global: true }),
+          onSubmit,
+          className: clsx(
+            styles["sapphire-filter-dropdown"],
+            styleProps.className
+          ),
+          style: { ...styleProps.style }
+        },
+        /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-filter-dropdown__body"] }, children),
+        /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-filter-dropdown__footer"] }, /* @__PURE__ */ React.createElement(ButtonGroup, { align: "right" }, !hideClearButton && /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            size: buttonSize,
+            variant: "text",
+            onPress: () => {
+              close();
+              onClear?.();
+            },
+            isDisabled: isClearDisabled ?? !hasValue
+          },
+          clearButtonLabel
+        ), hasApplyButton ? applyButton : (
+          // The following is necessary to have the form submitted on "Enter", if there is more than one field
+          /* @__PURE__ */ React.createElement(VisuallyHidden, null, applyButton)
+        )))
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      ToggleButton,
+      {
+        icon: isOpen ? /* @__PURE__ */ React.createElement(ChevronUp, null) : /* @__PURE__ */ React.createElement(ChevronDown, null),
+        iconAlign: "right",
+        isSelected: hasValue,
+        isDisabled,
+        size: buttonSize
       },
-      isDisabled: isClearDisabled != null ? isClearDisabled : !hasValue
-    }, clearButtonLabel), hasApplyButton ? applyButton : /* @__PURE__ */ React.createElement(VisuallyHidden, null, applyButton))))
-  }, /* @__PURE__ */ React.createElement(ToggleButton, {
-    icon: isOpen ? /* @__PURE__ */ React.createElement(ChevronUp, null) : /* @__PURE__ */ React.createElement(ChevronDown, null),
-    iconAlign: "right",
-    isSelected: hasValue,
-    isDisabled,
-    size: buttonSize
-  }, label, value ? ": " : "", value));
+      label,
+      value ? ": " : "",
+      value
+    )
+  );
 }
 
 export { FilterDropdown };

package/build/esm/Filtering/src/FilterDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { useRef, ReactNode, FormEvent } from 'react';\nimport clsx from 'clsx';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useEffectEvent, filterDOMProps } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  Button,\n  ButtonGroup,\n  PopoverTrigger,\n  PopoverTriggerProps,\n  SapphireStyleProps,\n  ToggleButton,\n  GlobalDomAttributes,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport { ChevronDown, ChevronUp } from '@danske/sapphire-icons/react';\nimport { FocusableRefValue } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css';\n\nexport interface FilterDropdownProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Pick<\n      PopoverTriggerProps,\n      'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'\n    > {\n  /**\n   * \"Filter by\" label, shown inside the trigger button.\n   */\n  label: ReactNode;\n  /**\n   * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are\n   * considered as unset value.\n   */\n  value: ReactNode;\n  /**\n   * Filtering UI controls, rendered in a popover.\n   */\n  children: ReactNode;\n  /**\n   * Called when:\n   * - `Enter` is pressed on form fields rendered inside the popover.\n   * - 'Apply' button is pressed (if `hasApplyButton` is true)\n   */\n  onApply?: () => void;\n  /**\n   * Whether to show the 'Apply' button.\n   */\n  hasApplyButton?: boolean;\n  /**\n   * Called when 'Clear' button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Whether the button is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the 'Apply' button is disabled.\n   */\n  isApplyDisabled?: boolean;\n  /**\n   * Whether the 'Clear' button is hidden.\n   */\n  hideClearButton?: boolean;\n  /**\n   * Whether the 'Clear' button is disabled.\n   */\n  isClearDisabled?: boolean;\n  /**\n   * The label of the 'Clear' button.\n   * @default \"Clear\"\n   */\n  clearButtonLabel?: ReactNode;\n  /**\n   * The label of the 'Apply' button.\n   * @default \"Apply\"\n   */\n  applyButtonLabel?: ReactNode;\n  /**\n   * The size of the buttons incl. the trigger itself.\n   * @default 'md'\n   */\n  buttonSize?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function FilterDropdown({\n  children,\n  label,\n  value,\n  isDisabled = false,\n  isApplyDisabled = false,\n  isClearDisabled,\n  isOpen: isOpenProp,\n  applyButtonLabel = 'Apply',\n  clearButtonLabel = 'Clear',\n  hideClearButton = false,\n  defaultOpen = false,\n  hasApplyButton = false,\n  noMaxWidth,\n  onApply,\n  onClear,\n  onOpenChange,\n  buttonSize = 'md',\n  ...props\n}: FilterDropdownProps): JSX.Element {\n  const triggerRef = useRef<FocusableRefValue>(null);\n  const { styleProps } = useSapphireStyleProps(props);\n\n  // We need to know if the dropdown is open or not, so we control the state here, still\n  // allowing for both controlled and uncontrolled modes.\n  const [isOpen, setIsOpen] = useControlledState(\n    isOpenProp,\n    defaultOpen,\n    useEffectEvent(onOpenChange)\n  );\n  const hasValue = value != null && value !== '';\n  const close = () => setIsOpen(false);\n  const onSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    onApply?.();\n    close();\n    // We need to manually restore focus to trigger as apply button is a form submit button\n    triggerRef.current?.focus();\n  };\n\n  const applyButton = (\n    <Button\n      type=\"submit\"\n      size={buttonSize}\n      excludeFromTabOrder={!hasApplyButton}\n      isDisabled={isApplyDisabled}\n    >\n      {applyButtonLabel}\n    </Button>\n  );\n\n  return (\n    <PopoverTrigger\n      ref={triggerRef}\n      placement=\"bottom left\"\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      noMaxWidth={noMaxWidth}\n      noPadding\n      popoverContent={\n        <form\n          {...filterDOMProps(props, { global: true })}\n          onSubmit={onSubmit}\n          className={clsx(\n            styles['sapphire-filter-dropdown'],\n            styleProps.className\n          )}\n          style={{ ...styleProps.style }}\n        >\n          <div className={styles['sapphire-filter-dropdown__body']}>\n            {children}\n          </div>\n          <div className={styles['sapphire-filter-dropdown__footer']}>\n            <ButtonGroup align=\"right\">\n              {!hideClearButton && (\n                <Button\n                  size={buttonSize}\n                  variant=\"text\"\n                  onPress={() => {\n                    close();\n                    onClear?.();\n                  }}\n                  isDisabled={isClearDisabled ?? !hasValue}\n                >\n                  {clearButtonLabel}\n                </Button>\n              )}\n              {hasApplyButton ? (\n                applyButton\n              ) : (\n                // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n                <VisuallyHidden>{applyButton}</VisuallyHidden>\n              )}\n            </ButtonGroup>\n          </div>\n        </form>\n      }\n    >\n      <ToggleButton\n        icon={isOpen ? <ChevronUp /> : <ChevronDown />}\n        iconAlign=\"right\"\n        isSelected={hasValue}\n        isDisabled={isDisabled}\n        size={buttonSize}\n      >\n        {label}\n        {value ? ': ' : ''}\n        {value}\n      </ToggleButton>\n    </PopoverTrigger>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { useRef, ReactNode, FormEvent } from 'react';\nimport clsx from 'clsx';\nimport { VisuallyHidden } from 'react-aria/VisuallyHidden';\nimport { useEffectEvent } from 'react-aria/private/utils/useEffectEvent';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport {\n  Button,\n  ButtonGroup,\n  PopoverTrigger,\n  PopoverTriggerProps,\n  SapphireStyleProps,\n  ToggleButton,\n  GlobalDomAttributes,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport { ChevronDown, ChevronUp } from '@danske/sapphire-icons/react';\nimport { FocusableRefValue } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css';\n\nexport interface FilterDropdownProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Pick<\n      PopoverTriggerProps,\n      'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'\n    > {\n  /**\n   * \"Filter by\" label, shown inside the trigger button.\n   */\n  label: ReactNode;\n  /**\n   * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are\n   * considered as unset value.\n   */\n  value: ReactNode;\n  /**\n   * Filtering UI controls, rendered in a popover.\n   */\n  children: ReactNode;\n  /**\n   * Called when:\n   * - `Enter` is pressed on form fields rendered inside the popover.\n   * - 'Apply' button is pressed (if `hasApplyButton` is true)\n   */\n  onApply?: () => void;\n  /**\n   * Whether to show the 'Apply' button.\n   */\n  hasApplyButton?: boolean;\n  /**\n   * Called when 'Clear' button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Whether the button is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the 'Apply' button is disabled.\n   */\n  isApplyDisabled?: boolean;\n  /**\n   * Whether the 'Clear' button is hidden.\n   */\n  hideClearButton?: boolean;\n  /**\n   * Whether the 'Clear' button is disabled.\n   */\n  isClearDisabled?: boolean;\n  /**\n   * The label of the 'Clear' button.\n   * @default \"Clear\"\n   */\n  clearButtonLabel?: ReactNode;\n  /**\n   * The label of the 'Apply' button.\n   * @default \"Apply\"\n   */\n  applyButtonLabel?: ReactNode;\n  /**\n   * The size of the buttons incl. the trigger itself.\n   * @default 'md'\n   */\n  buttonSize?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function FilterDropdown({\n  children,\n  label,\n  value,\n  isDisabled = false,\n  isApplyDisabled = false,\n  isClearDisabled,\n  isOpen: isOpenProp,\n  applyButtonLabel = 'Apply',\n  clearButtonLabel = 'Clear',\n  hideClearButton = false,\n  defaultOpen = false,\n  hasApplyButton = false,\n  noMaxWidth,\n  onApply,\n  onClear,\n  onOpenChange,\n  buttonSize = 'md',\n  ...props\n}: FilterDropdownProps): JSX.Element {\n  const triggerRef = useRef<FocusableRefValue>(null);\n  const { styleProps } = useSapphireStyleProps(props);\n\n  // We need to know if the dropdown is open or not, so we control the state here, still\n  // allowing for both controlled and uncontrolled modes.\n  const [isOpen, setIsOpen] = useControlledState(\n    isOpenProp,\n    defaultOpen,\n    useEffectEvent(onOpenChange)\n  );\n  const hasValue = value != null && value !== '';\n  const close = () => setIsOpen(false);\n  const onSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    onApply?.();\n    close();\n  };\n\n  const applyButton = (\n    <Button\n      type=\"submit\"\n      size={buttonSize}\n      excludeFromTabOrder={!hasApplyButton}\n      isDisabled={isApplyDisabled}\n    >\n      {applyButtonLabel}\n    </Button>\n  );\n\n  return (\n    <PopoverTrigger\n      ref={triggerRef}\n      placement=\"bottom left\"\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      noMaxWidth={noMaxWidth}\n      noPadding\n      popoverContent={\n        <form\n          {...filterDOMProps(props, { global: true })}\n          onSubmit={onSubmit}\n          className={clsx(\n            styles['sapphire-filter-dropdown'],\n            styleProps.className\n          )}\n          style={{ ...styleProps.style }}\n        >\n          <div className={styles['sapphire-filter-dropdown__body']}>\n            {children}\n          </div>\n          <div className={styles['sapphire-filter-dropdown__footer']}>\n            <ButtonGroup align=\"right\">\n              {!hideClearButton && (\n                <Button\n                  size={buttonSize}\n                  variant=\"text\"\n                  onPress={() => {\n                    close();\n                    onClear?.();\n                  }}\n                  isDisabled={isClearDisabled ?? !hasValue}\n                >\n                  {clearButtonLabel}\n                </Button>\n              )}\n              {hasApplyButton ? (\n                applyButton\n              ) : (\n                // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n                <VisuallyHidden>{applyButton}</VisuallyHidden>\n              )}\n            </ButtonGroup>\n          </div>\n        </form>\n      }\n    >\n      <ToggleButton\n        icon={isOpen ? <ChevronUp /> : <ChevronDown />}\n        iconAlign=\"right\"\n        isSelected={hasValue}\n        isDisabled={isDisabled}\n        size={buttonSize}\n      >\n        {label}\n        {value ? ': ' : ''}\n        {value}\n      </ToggleButton>\n    </PopoverTrigger>\n  );\n}\n"],"names":[],"mappings":"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"}

package/build/esm/Filtering/src/SearchableSelectFilter.js

@@ -4,97 +4,80 @@ import '../../Accordion/index.js';
 import '@danske/sapphire-icons/react';
 import '@danske/sapphire-css/components/alert/alert.module.css';
 import 'clsx';
-import { mergeRefs } from '@react-aria/utils';
-import '@react-aria/i18n';
+import 'react-aria/filterDOMProps';
+import 'react-aria/I18nProvider';
 import '@danske/sapphire-css/components/amount/amount.module.css';
-import '@react-aria/combobox';
+import 'react-aria/useComboBox';
+import '@react-aria/i18n';
 import '@react-spectrum/utils';
 import '../../Breadcrumbs/src/Breadcrumbs.js';
 import '../../Breadcrumbs/src/BreadcrumbItem.js';
 import '../../FileDropzone/src/FileDropzone.js';
 import '../../FileDropzone/src/FileTrigger.js';
 import { FilterDropdown } from './FilterDropdown.js';
-import { useControlledState } from '@react-stately/utils';
+import { mergeRefs } from 'react-aria/mergeRefs';
+import { useControlledState } from 'react-stately/useControlledState';
 import '../../Flag/src/Flag.js';
-import '@react-aria/label';
+import 'react-aria/useField';
+import 'react-aria/mergeProps';
 import '../../NumberField/src/NumberField.js';
 import '../../Sidebar/index.js';
 import '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';
-import '@react-aria/progress';
+import 'react-aria/useProgressBar';
 import '../../Slider/index.js';
-import '@react-aria/tag';
-import '@react-stately/list';
+import 'react-aria/useTagGroup';
+import 'react-stately/useListState';
 import '@danske/sapphire-css/components/tag/tag.module.css';
-import '@react-aria/button';
-import '@react-aria/interactions';
-import '@react-aria/focus';
-import '@react-stately/collections';
+import 'react-aria/useButton';
+import 'react-aria/useHover';
+import 'react-aria/FocusRing';
+import 'react-stately/Item';
 import '../../TimeField/src/TimeField.js';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 function SearchableSelectFilter(props) {
-  var _b, _c;
-  const _a = props, { searchField, listBox, size = "md" } = _a, otherProps = __objRest(_a, ["searchField", "listBox", "size"]);
+  const { searchField, listBox, size = "md", ...otherProps } = props;
   const searchFieldRef = useRef(null);
   const searchFieldProps = searchField.props;
   const listBoxProps = listBox.props;
-  const [searchQuery, setSearchQuery] = useControlledState(searchFieldProps == null ? void 0 : searchFieldProps.value, "", searchFieldProps.onChange);
-  if (listBoxProps.connectedInputRef && typeof process !== "undefined" && ((_b = process.env) == null ? void 0 : _b.NODE_ENV) === "development") {
-    console.warn("The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually.");
+  const [searchQuery, setSearchQuery] = useControlledState(
+    searchFieldProps?.value,
+    "",
+    searchFieldProps.onChange
+  );
+  if (listBoxProps.connectedInputRef && typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
+    console.warn(
+      "The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually."
+    );
   }
   const hasSelection = listBoxProps.selectedKeys === "all" || Array.from(listBoxProps.selectedKeys || []).length > 0;
-  return /* @__PURE__ */ React.createElement(FilterDropdown, __spreadProps(__spreadValues({}, otherProps), {
-    noMaxWidth: (_c = otherProps.noMaxWidth) != null ? _c : true,
-    buttonSize: size,
-    hasApplyButton: Boolean(otherProps.onApply),
-    isClearDisabled: otherProps.isClearDisabled || !hasSelection && !otherProps.value
-  }), /* @__PURE__ */ React.createElement(Flex, {
-    flexDirection: "column",
-    height: "100%"
-  }, cloneElement(searchField, {
-    size: "md",
-    value: searchFieldProps.value || searchQuery,
-    inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),
-    width: searchFieldProps.width || "100%",
-    marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,
-    onChange: setSearchQuery
-  }), cloneElement(listBox, {
-    connectedInputRef: searchFieldRef,
-    selectionMode: listBoxProps.selectionMode || "multiple",
-    marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,
-    hasScrollDividers: true,
-    filter: "filter" in listBoxProps ? listBoxProps.filter : (textValue) => textValue.toLowerCase().includes(searchQuery.toLowerCase())
-  })));
+  return /* @__PURE__ */ React.createElement(
+    FilterDropdown,
+    {
+      ...otherProps,
+      noMaxWidth: otherProps.noMaxWidth ?? true,
+      buttonSize: size,
+      hasApplyButton: Boolean(otherProps.onApply),
+      isClearDisabled: otherProps.isClearDisabled || !hasSelection && !otherProps.value
+    },
+    /* @__PURE__ */ React.createElement(Flex, { flexDirection: "column", height: "100%" }, cloneElement(searchField, {
+      size: "md",
+      value: searchFieldProps.value || searchQuery,
+      inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),
+      width: searchFieldProps.width || "100%",
+      marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,
+      onChange: setSearchQuery
+    }), cloneElement(listBox, {
+      connectedInputRef: searchFieldRef,
+      selectionMode: listBoxProps.selectionMode || "multiple",
+      marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,
+      hasScrollDividers: true,
+      filter: (
+        // This is a way to also allow opting out of the internal filter with filter={undefined}
+        // without us having to allow for more values on the ListBox filter prop
+        "filter" in listBoxProps ? listBoxProps.filter : (textValue) => textValue.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    }))
+  );
 }
 
 export { SearchableSelectFilter };

package/build/esm/Filtering/src/SearchableSelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchableSelectFilter.js","sources":["../../../../src/Filtering/src/SearchableSelectFilter.tsx"],"sourcesContent":["import React, { cloneElement, ReactElement, useRef } from 'react';\nimport {\n  Flex,\n  ListBoxProps,\n  SapphireStyleProps,\n  SearchFieldPropsWithRef,\n  tokens,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FilterDropdown, FilterDropdownProps } from '../..';\nimport { mergeRefs } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\n\nexport interface SearchableSelectFilterProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Omit<FilterDropdownProps, 'children'> {\n  /**\n   * The SearchField to search items with.\n   */\n  searchField: ReactElement<SearchFieldPropsWithRef<object>>;\n  /**\n   * The ListBox to select items from.\n   */\n  listBox: ReactElement<ListBoxProps<object>>;\n  /**\n   * The Button size of the trigger\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function SearchableSelectFilter(\n  props: SearchableSelectFilterProps\n): JSX.Element {\n  const { searchField, listBox, size = 'md', ...otherProps } = props;\n  const searchFieldRef = useRef<HTMLInputElement>(null);\n\n  const searchFieldProps = searchField.props;\n  const listBoxProps = listBox.props;\n\n  const [searchQuery, setSearchQuery] = useControlledState(\n    searchFieldProps?.value,\n    '',\n    searchFieldProps.onChange\n  );\n\n  if (\n    listBoxProps.connectedInputRef &&\n    typeof process !== 'undefined' &&\n    process.env?.NODE_ENV === 'development'\n  ) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually.'\n    );\n  }\n\n  const hasSelection =\n    listBoxProps.selectedKeys === 'all' ||\n    Array.from(listBoxProps.selectedKeys || []).length > 0;\n\n  return (\n    <FilterDropdown\n      {...otherProps}\n      noMaxWidth={otherProps.noMaxWidth ?? true}\n      buttonSize={size}\n      // Since useCollectionFocusProxy disables normal form submission behaviour on \"Enter\"\n      // the apply button is the only way to submit, which is why we add it if an onApply function is passed\n      hasApplyButton={Boolean(otherProps.onApply)}\n      // In scenarios where selections are not applied immediately we want to allow cancelling\n      // the filter selection via 'Clear' button as soon as at least 1 item is selected\n      isClearDisabled={\n        otherProps.isClearDisabled || (!hasSelection && !otherProps.value)\n      }\n    >\n      <Flex flexDirection=\"column\" height=\"100%\">\n        {cloneElement(searchField, {\n          size: 'md',\n          value: searchFieldProps.value || searchQuery,\n          inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),\n          width: searchFieldProps.width || '100%',\n          marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,\n          onChange: setSearchQuery,\n        })}\n        {cloneElement(listBox, {\n          connectedInputRef: searchFieldRef,\n          selectionMode: listBoxProps.selectionMode || 'multiple',\n          marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,\n          hasScrollDividers: true,\n          filter:\n            // This is a way to also allow opting out of the internal filter with filter={undefined}\n            // without us having to allow for more values on the ListBox filter prop\n            'filter' in listBoxProps\n              ? listBoxProps.filter\n              : (textValue: string) =>\n                  textValue.toLowerCase().includes(searchQuery.toLowerCase()),\n        })}\n      </Flex>\n    </FilterDropdown>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchableSelectFilter.js","sources":["../../../../src/Filtering/src/SearchableSelectFilter.tsx"],"sourcesContent":["import React, { cloneElement, ReactElement, useRef } from 'react';\nimport {\n  Flex,\n  ListBoxProps,\n  SapphireStyleProps,\n  SearchFieldPropsWithRef,\n  tokens,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FilterDropdown, FilterDropdownProps } from '../..';\nimport { mergeRefs } from 'react-aria/mergeRefs';\nimport { useControlledState } from 'react-stately/useControlledState';\n\nexport interface SearchableSelectFilterProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Omit<FilterDropdownProps, 'children'> {\n  /**\n   * The SearchField to search items with.\n   */\n  searchField: ReactElement<SearchFieldPropsWithRef<object>>;\n  /**\n   * The ListBox to select items from.\n   */\n  listBox: ReactElement<ListBoxProps<object>>;\n  /**\n   * The Button size of the trigger\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function SearchableSelectFilter(\n  props: SearchableSelectFilterProps\n): JSX.Element {\n  const { searchField, listBox, size = 'md', ...otherProps } = props;\n  const searchFieldRef = useRef<HTMLInputElement>(null);\n\n  const searchFieldProps = searchField.props;\n  const listBoxProps = listBox.props;\n\n  const [searchQuery, setSearchQuery] = useControlledState(\n    searchFieldProps?.value,\n    '',\n    searchFieldProps.onChange\n  );\n\n  if (\n    listBoxProps.connectedInputRef &&\n    typeof process !== 'undefined' &&\n    process.env?.NODE_ENV === 'development'\n  ) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually.'\n    );\n  }\n\n  const hasSelection =\n    listBoxProps.selectedKeys === 'all' ||\n    Array.from(listBoxProps.selectedKeys || []).length > 0;\n\n  return (\n    <FilterDropdown\n      {...otherProps}\n      noMaxWidth={otherProps.noMaxWidth ?? true}\n      buttonSize={size}\n      // Since useCollectionFocusProxy disables normal form submission behaviour on \"Enter\"\n      // the apply button is the only way to submit, which is why we add it if an onApply function is passed\n      hasApplyButton={Boolean(otherProps.onApply)}\n      // In scenarios where selections are not applied immediately we want to allow cancelling\n      // the filter selection via 'Clear' button as soon as at least 1 item is selected\n      isClearDisabled={\n        otherProps.isClearDisabled || (!hasSelection && !otherProps.value)\n      }\n    >\n      <Flex flexDirection=\"column\" height=\"100%\">\n        {cloneElement(searchField, {\n          size: 'md',\n          value: searchFieldProps.value || searchQuery,\n          inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),\n          width: searchFieldProps.width || '100%',\n          marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,\n          onChange: setSearchQuery,\n        })}\n        {cloneElement(listBox, {\n          connectedInputRef: searchFieldRef,\n          selectionMode: listBoxProps.selectionMode || 'multiple',\n          marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,\n          hasScrollDividers: true,\n          filter:\n            // This is a way to also allow opting out of the internal filter with filter={undefined}\n            // without us having to allow for more values on the ListBox filter prop\n            'filter' in listBoxProps\n              ? listBoxProps.filter\n              : (textValue: string) =>\n                  textValue.toLowerCase().includes(searchQuery.toLowerCase()),\n        })}\n      </Flex>\n    </FilterDropdown>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCO,SAAS,uBACd,KAAA,EACa;AACb,EAAA,MAAM,EAAE,WAAA,EAAa,OAAA,EAAS,OAAO,IAAA,EAAM,GAAG,YAAW,GAAI,KAAA;AAC7D,EAAA,MAAM,cAAA,GAAiB,OAAyB,IAAI,CAAA;AAEpD,EAAA,MAAM,mBAAmB,WAAA,CAAY,KAAA;AACrC,EAAA,MAAM,eAAe,OAAA,CAAQ,KAAA;AAE7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,kBAAA;AAAA,IACpC,gBAAA,EAAkB,KAAA;AAAA,IAClB,EAAA;AAAA,IACA,gBAAA,CAAiB;AAAA,GACnB;AAEA,EAAA,IACE,YAAA,CAAa,qBACb,OAAO,OAAA,KAAY,eACnB,OAAA,CAAQ,GAAA,EAAK,aAAa,aAAA,EAC1B;AAEA,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,YAAA,GACJ,YAAA,CAAa,YAAA,KAAiB,KAAA,IAC9B,KAAA,CAAM,IAAA,CAAK,YAAA,CAAa,YAAA,IAAgB,EAAE,CAAA,CAAE,MAAA,GAAS,CAAA;AAEvD,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,UAAA,EAAY,WAAW,UAAA,IAAc,IAAA;AAAA,MACrC,UAAA,EAAY,IAAA;AAAA,MAGZ,cAAA,EAAgB,OAAA,CAAQ,UAAA,CAAW,OAAO,CAAA;AAAA,MAG1C,iBACE,UAAA,CAAW,eAAA,IAAoB,CAAC,YAAA,IAAgB,CAAC,UAAA,CAAW;AAAA,KAAA;AAAA,wCAG7D,IAAA,EAAA,EAAK,aAAA,EAAc,UAAS,MAAA,EAAO,MAAA,EAAA,EACjC,aAAa,WAAA,EAAa;AAAA,MACzB,IAAA,EAAM,IAAA;AAAA,MACN,KAAA,EAAO,iBAAiB,KAAA,IAAS,WAAA;AAAA,MACjC,QAAA,EAAU,SAAA,CAAU,cAAA,EAAgB,gBAAA,CAAiB,QAAQ,CAAA;AAAA,MAC7D,KAAA,EAAO,iBAAiB,KAAA,IAAS,MAAA;AAAA,MACjC,YAAA,EAAc,gBAAA,CAAiB,YAAA,IAAgB,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,MAC3D,QAAA,EAAU;AAAA,KACX,CAAA,EACA,YAAA,CAAa,OAAA,EAAS;AAAA,MACrB,iBAAA,EAAmB,cAAA;AAAA,MACnB,aAAA,EAAe,aAAa,aAAA,IAAiB,UAAA;AAAA,MAC7C,OAAA,EAAS,CAAA,KAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,6BAA6B,KAAK,CAAA,MAAA,CAAA;AAAA,MAC/D,iBAAA,EAAmB,IAAA;AAAA,MACnB,MAAA;AAAA;AAAA;AAAA,QAGE,QAAA,IAAY,YAAA,GACR,YAAA,CAAa,MAAA,GACb,CAAC,SAAA,KACC,SAAA,CAAU,WAAA,EAAY,CAAE,QAAA,CAAS,WAAA,CAAY,WAAA,EAAa;AAAA;AAAA,KACnE,CACH;AAAA,GACF;AAEJ;;;;"}