@adyen/adyen-platform-experience-web 0.1.2 → 1.0.0-beta

package/dist/es/components/internal/FilterBar/filters/AmountFilter/AmountFilter.js

@@ -1,39 +1,78 @@
-import { jsx as c } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { RangeSelection as f } from "./RangeSelection.js";
-import { useState as s, useCallback as x } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { PopoverContainerSize as S } from "../../../Popover/types.js";
-import v from "../BaseFilter/BaseFilter.js";
-import { EMPTY_OBJECT as C } from "../../../../../utils/common/constants.js";
-const r = 1e5, E = ({ updateFilters: t, selectedCurrencies: a, availableCurrencies: u, ...o }) => {
-  const [n, l] = s(), A = x(
-    (m) => {
-      l(m.filterValue);
-      const { minAmount: e, maxAmount: i } = m ?? C;
-      t({
-        minAmount: e !== void 0 ? String(e * r) : void 0,
-        maxAmount: i !== void 0 ? String(i * r) : void 0
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import BaseFilter from "../BaseFilter/BaseFilter.js";
+import { RangeSelection } from "./RangeSelection.js";
+import { h, F, T } from "../../../../../../hooks.module-8565d716.mjs";
+import "../../../../../utils/common/index.js";
+import { P as PopoverContainerSize } from "../../../../../../usePopoverPositioner-882fea89.mjs";
+import useCoreContext from "../../../../../core/Context/useCoreContext.js";
+import { AMOUNT_MULTIPLIER } from "./constants.js";
+import { EMPTY_OBJECT } from "../../../../../utils/common/constants.js";
+const AmountFilter = ({ updateFilters, selectedCurrencies, availableCurrencies, ...props }) => {
+  const { i18n } = useCoreContext();
+  const [value, setValue] = h();
+  const [formattedValue, setValueFormattedValue] = h();
+  const showCurrencySymbol = F(() => {
+    if ((selectedCurrencies == null ? void 0 : selectedCurrencies.length) === 1 || (availableCurrencies == null ? void 0 : availableCurrencies.length) === 1)
+      return true;
+    return false;
+  }, [availableCurrencies == null ? void 0 : availableCurrencies.length, selectedCurrencies == null ? void 0 : selectedCurrencies.length]);
+  const formatAmount = T(
+    (amount, showSymbol) => {
+      const currencyCode = (selectedCurrencies == null ? void 0 : selectedCurrencies[0]) || (availableCurrencies == null ? void 0 : availableCurrencies[0]);
+      const options = showSymbol && currencyCode ? {
+        style: "currency",
+        currency: currencyCode,
+        currencyDisplay: "symbol"
+      } : void 0;
+      return amount.toLocaleString(i18n.locale, options);
+    },
+    [availableCurrencies, i18n, selectedCurrencies]
+  );
+  const onFilterChange = T(
+    (params) => {
+      const { minAmount, maxAmount } = params ?? EMPTY_OBJECT;
+      setValue({ minAmount, maxAmount });
+      if (minAmount === void 0 && maxAmount === void 0)
+        setValueFormattedValue(void 0);
+      updateFilters({
+        minAmount: minAmount !== void 0 ? String(minAmount * AMOUNT_MULTIPLIER) : void 0,
+        maxAmount: maxAmount !== void 0 ? String(maxAmount * AMOUNT_MULTIPLIER) : void 0
       });
     },
-    [t]
+    [updateFilters]
   );
-  return /* @__PURE__ */ c(
-    v,
+  if (value && (value.minAmount || value.maxAmount)) {
+    const { minAmount, maxAmount } = value ?? {};
+    if (minAmount !== void 0 && maxAmount !== void 0 && minAmount <= maxAmount) {
+      setValueFormattedValue(
+        `${formatAmount(minAmount, showCurrencySymbol)} ${i18n.get("to").toLowerCase()} ${formatAmount(maxAmount, showCurrencySymbol)}`
+      );
+    } else if (minAmount !== void 0 && maxAmount === void 0 && minAmount >= 0) {
+      setValueFormattedValue(`${i18n.get("from")} ${formatAmount(minAmount, showCurrencySymbol)}`);
+    } else if (minAmount === void 0 && maxAmount !== void 0) {
+      setValueFormattedValue(`${i18n.get("to")} ${formatAmount(maxAmount, showCurrencySymbol)}`);
+    } else {
+      setValueFormattedValue(void 0);
+    }
+  }
+  return /* @__PURE__ */ o(
+    BaseFilter,
     {
-      ...o,
-      updateFilters: t,
-      minAmount: o.minAmount,
-      maxAmount: o.maxAmount,
-      onChange: A,
-      value: n,
-      label: n || o.label,
+      ...props,
+      updateFilters,
+      minAmount: props.minAmount,
+      maxAmount: props.maxAmount,
+      onChange: onFilterChange,
+      value: formattedValue,
+      label: formattedValue ? formattedValue : props.label,
       type: "text",
-      containerSize: S.MEDIUM,
-      selectedCurrencies: a,
-      availableCurrencies: u,
-      render: f
+      containerSize: PopoverContainerSize.MEDIUM,
+      selectedCurrencies,
+      availableCurrencies,
+      render: RangeSelection
     }
   );
 };
 export {
-  E as AmountFilter
+  AmountFilter
 };

package/dist/es/components/internal/FilterBar/filters/AmountFilter/RangeSelection.js

@@ -1,80 +1,88 @@
-import { jsx as u } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import y from "../../../FormFields/InputBase.js";
-import "./AmountFilter.scss.js";
-import { useMemo as $, useCallback as h, useState as V, useEffect as I } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { CommitAction as N } from "../../../../../hooks/useCommitAction/types.js";
-import _ from "../../../../../core/Context/useCoreContext.js";
-const j = ({
-  onChange: d,
-  editAction: i,
-  onValueUpdated: A,
-  selectedCurrencies: f,
-  availableCurrencies: o,
-  ...p
+import '../../../../../../RangeSelection.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import InputBase from "../../../FormFields/InputBase.js";
+import { h, T, p, F } from "../../../../../../hooks.module-8565d716.mjs";
+import { C as CommitAction } from "../../../../../../types-e6a6a3ff.mjs";
+import useCoreContext from "../../../../../core/Context/useCoreContext.js";
+import "../../../../../utils/common/index.js";
+import { AMOUNT_MULTIPLIER } from "./constants.js";
+const AmountFilter = "";
+const RangeSelection = ({
+  onChange,
+  editAction,
+  onValueUpdated,
+  selectedCurrencies,
+  availableCurrencies,
+  value,
+  ...props
 }) => {
-  const { i18n: m } = _(), g = $(() => (f == null ? void 0 : f.length) === 1 || (o == null ? void 0 : o.length) === 1 ? !0 : (((o == null ? void 0 : o.length) ?? 0) > 1, !1), [o == null ? void 0 : o.length, f == null ? void 0 : f.length]), l = h(
-    (r, M) => {
-      const S = new Intl.NumberFormat(m.locale);
-      return M ? m.amount(r, (f == null ? void 0 : f[0]) || (o == null ? void 0 : o[0]) || "EUR") : S.format(r);
-    },
-    [o, m, f]
-  ), [t, v] = V(p.minAmount !== void 0 ? parseFloat(p.minAmount) : void 0), [n, F] = V(p.maxAmount !== void 0 ? parseFloat(p.maxAmount) : void 0), a = $(() => {
-    if (t !== void 0 && t < 0)
-      return null;
-    if (t !== void 0 && n !== void 0)
-      return n < t ? null : `${l(t, g)} to ${l(n, g)}`;
-    if (t !== void 0)
-      return `${m.get("from")} ${l(t, g)}`;
-    if (n !== void 0)
-      return `${m.get("to")} ${l(n, g)}`;
-  }, [l, m, n, t, g]), x = h(() => {
-    d({ minAmount: t, maxAmount: n, filterValue: a !== void 0 ? a : void 0 });
-  }, [a, n, t, d]), T = h(() => {
-    d({ minAmount: void 0, maxAmount: void 0, filterValue: void 0 }), F(void 0), v(void 0);
-  }, [d]);
-  return I(() => {
-    i === N.APPLY && x(), i === N.CLEAR && T();
-  }, [x, T, i]), I(() => {
-    A(a);
-  }, [a, A]), /* @__PURE__ */ u("div", { className: "adyen-fp-range-selection-filter", children: [
-    /* @__PURE__ */ u("div", { className: "adyen-fp-range-selection-filter__input", children: [
-      /* @__PURE__ */ u("label", { htmlFor: "minValue", children: `${m.get("from")}:` }),
-      /* @__PURE__ */ u(
-        y,
+  const { i18n } = useCoreContext();
+  const [minAmount, setMinAmount] = h(
+    props.minAmount !== void 0 ? parseFloat(props.minAmount) / AMOUNT_MULTIPLIER : void 0
+  );
+  const [maxAmount, setMaxAmount] = h(
+    props.maxAmount !== void 0 ? parseFloat(props.maxAmount) / AMOUNT_MULTIPLIER : void 0
+  );
+  const applyFilter = T(() => {
+    onChange({ minAmount, maxAmount });
+  }, [maxAmount, minAmount, onChange]);
+  const clearFilter = T(() => {
+    onChange({ minAmount: void 0, maxAmount: void 0 });
+    setMaxAmount(void 0);
+    setMinAmount(void 0);
+  }, [onChange]);
+  p(() => {
+    if (editAction === CommitAction.APPLY)
+      applyFilter();
+    if (editAction === CommitAction.CLEAR)
+      clearFilter();
+  }, [applyFilter, clearFilter, editAction]);
+  const filterValue = F(() => ({ minAmount, maxAmount }), [maxAmount, minAmount]);
+  p(() => {
+    if (filterValue.minAmount || filterValue.maxAmount)
+      onValueUpdated(`${filterValue.minAmount}-${filterValue.maxAmount}`);
+    else
+      onValueUpdated(null);
+  }, [filterValue, onValueUpdated]);
+  return /* @__PURE__ */ o("div", { className: "adyen-pe-range-selection-filter", children: [
+    /* @__PURE__ */ o("div", { className: "adyen-pe-range-selection-filter__input", children: [
+      /* @__PURE__ */ o("label", { htmlFor: "minValue", children: `${i18n.get("from")}:` }),
+      /* @__PURE__ */ o(
+        InputBase,
         {
-          lang: m.locale,
+          lang: i18n.locale,
           name: "minValue",
           type: "number",
-          value: t,
-          onInput: (r) => {
-            r.currentTarget && v(r.currentTarget.value !== "" ? parseFloat(r.currentTarget.value) : void 0);
+          value: minAmount,
+          onInput: (e) => {
+            e.currentTarget && setMinAmount(e.currentTarget.value !== "" ? parseFloat(e.currentTarget.value) : void 0);
           },
           min: 0,
-          isInvalid: t ? t < 0 : !1,
-          errorMessage: m.get("noNegativeNumbersAllowed")
+          isInvalid: minAmount ? minAmount < 0 : false,
+          errorMessage: i18n.get("noNegativeNumbersAllowed")
         }
       )
     ] }),
-    /* @__PURE__ */ u("div", { className: "adyen-fp-range-selection-filter__input", children: [
-      /* @__PURE__ */ u("label", { htmlFor: "maxValue", children: `${m.get("to")}:` }),
-      /* @__PURE__ */ u(
-        y,
+    /* @__PURE__ */ o("div", { className: "adyen-pe-range-selection-filter__input", children: [
+      /* @__PURE__ */ o("label", { htmlFor: "maxValue", children: `${i18n.get("to")}:` }),
+      /* @__PURE__ */ o(
+        InputBase,
         {
-          lang: m.locale,
+          lang: i18n.locale,
           name: "maxValue",
           type: "number",
-          value: n,
-          onInput: (r) => {
-            r.currentTarget && F(r.currentTarget.value !== "" ? parseFloat(r.currentTarget.value) : void 0);
+          value: maxAmount,
+          onInput: (e) => {
+            e.currentTarget && setMaxAmount(e.currentTarget.value !== "" ? parseFloat(e.currentTarget.value) : void 0);
           },
-          min: t,
-          isInvalid: n !== void 0 && t !== void 0 ? n < t : !1,
-          errorMessage: m.get("secondValueShouldBeGreaterThanTheFirstOne")
+          min: minAmount,
+          isInvalid: maxAmount !== void 0 && minAmount !== void 0 ? maxAmount < minAmount : false,
+          errorMessage: i18n.get("secondValueShouldBeGreaterThanTheFirstOne")
         }
       )
     ] })
   ] });
 };
 export {
-  j as RangeSelection
+  RangeSelection
 };

package/dist/es/components/internal/FilterBar/filters/AmountFilter/constants.js

@@ -0,0 +1,4 @@
+const AMOUNT_MULTIPLIER = 1e5;
+export {
+  AMOUNT_MULTIPLIER
+};

package/dist/es/components/internal/FilterBar/filters/BaseFilter/BaseFilter.js

@@ -1,129 +1,185 @@
-import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import w from "../../components/FilterButton/FilterButton.js";
-import U from "../../../Popover/Popover.js";
-import { TypographyElement as F, TypographyVariant as N } from "../../../Typography/types.js";
-import B from "../../../Typography/Typography.js";
-import Y from "../../../../../hooks/useCommitAction/useCommitAction.js";
-import { CommitAction as _ } from "../../../../../hooks/useCommitAction/types.js";
-import $ from "../../../../../hooks/element/useUniqueIdentifier.js";
-import { isEmpty as z } from "../../../../../utils/validator-utils.js";
-import { memo as H } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useMemo as v, useCallback as D, useEffect as E, useState as L } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import f from "../../../../../hooks/useBooleanState/useBooleanState.js";
-import O from "../../../FormFields/InputText.js";
-import "./BaseFilter.scss.js";
-import { Fragment as j } from "../../../../../external/preact/dist/preact.module.js";
-const q = (d) => !d || z(d), R = (() => {
-  const d = (e) => {
-    const { editAction: t, name: y, onChange: c, onValueUpdated: l } = e, [a, o] = L(e.value), r = D(
-      (s) => {
-        const u = s.target.value.trim();
-        o(u), l(u);
+import '../../../../../../Select.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { useMediaQuery, mediaQueries } from "../../../../external/TransactionsOverview/hooks/useMediaQuery.js";
+import FilterButton from "../../components/FilterButton/FilterButton.js";
+import Popover from "../../../Popover/Popover.js";
+import { a as PopoverContainerVariant, b as PopoverContainerPosition } from "../../../../../../usePopoverPositioner-882fea89.mjs";
+import { T as Typography, a as TypographyElement, b as TypographyVariant } from "../../../../../../Typography-11b95870.mjs";
+import useCommitAction from "../../../../../hooks/useCommitAction/useCommitAction.js";
+import { C as CommitAction } from "../../../../../../types-e6a6a3ff.mjs";
+import useUniqueIdentifier from "../../../../../hooks/element/useUniqueIdentifier.js";
+import { isEmpty } from "../../../../../utils/validator-utils.js";
+import { x } from "../../../../../../compat.module-a4d537ff.mjs";
+import { F, T, p, h } from "../../../../../../hooks.module-8565d716.mjs";
+import useBooleanState from "../../../../../hooks/useBooleanState/useBooleanState.js";
+import InputText from "../../../FormFields/InputText.js";
+import "classnames";
+import "../../../../../utils/common/index.js";
+import "../../../../../core/Context/CoreContext.js";
+import "../../../Img/Img.js";
+import "../../../Button/Button.js";
+import "../../../SVGIcons/ChevronDown.js";
+import "../../../FormFields/Select/constants.js";
+import "../../../FormFields/Select/components/SelectList.js";
+/* empty css                                  */import "../../../FormFields/InputBase.js";
+import { k } from "../../../../../../preact.module-38e5a571.mjs";
+const isValueEmptyFallback = (value) => {
+  return !value || isEmpty(value);
+};
+const renderFallback = (() => {
+  const DefaultEditModalBody = (props) => {
+    const { editAction, name, onChange, onValueUpdated } = props;
+    const [currentValue, setCurrentValue] = h(props.value);
+    const handleInput = T(
+      (e) => {
+        const value = e.target.value.trim();
+        setCurrentValue(value);
+        onValueUpdated(value);
       },
-      [l]
+      [onValueUpdated]
     );
-    return E(() => {
-      if (t === _.CLEAR) {
-        const s = "";
-        o(s), l(s), c(s);
+    p(() => {
+      if (editAction === CommitAction.CLEAR) {
+        const value = "";
+        setCurrentValue(value);
+        onValueUpdated(value);
+        onChange(value);
+      }
+      if (editAction === CommitAction.APPLY) {
+        onChange(currentValue ?? "");
       }
-      t === _.APPLY && c(a ?? "");
-    }, [a, t, c, l]), /* @__PURE__ */ i(O, { name: y, value: a, onInput: r });
+    }, [currentValue, editAction, onChange, onValueUpdated]);
+    return /* @__PURE__ */ o(InputText, { name, value: currentValue, onInput: handleInput });
   };
-  return (e) => /* @__PURE__ */ i(d, { ...e });
-})(), G = ({ render: d, ...e }) => {
-  var C;
-  const [t, y] = f(!1), [c, l] = f(!1), a = v(() => e.isValueEmpty ?? q, [e.isValueEmpty]), [o, r] = f(a(e.value)), [s, u] = f(!1), [I, h] = f(!1), [P, g] = f(a(e.value)), b = $(), S = v(() => d ?? R, [d]), T = D(
-    (n) => {
-      const m = a(n ?? void 0);
-      r(m), g(n === null), h(s ? n !== e.value : !m);
+  return (props) => /* @__PURE__ */ o(DefaultEditModalBody, { ...props });
+})();
+const BaseFilter = ({ render, ...props }) => {
+  var _a;
+  const isSmViewport = useMediaQuery(mediaQueries.down.xs);
+  const [editMode, _updateEditMode] = useBooleanState(false);
+  const [editModalMounting, updateEditModalMounting] = useBooleanState(false);
+  const isValueEmpty = F(() => props.isValueEmpty ?? isValueEmptyFallback, [props.isValueEmpty]);
+  const [hasEmptyValue, updateHasEmptyValue] = useBooleanState(isValueEmpty(props.value));
+  const [hasInitialValue, updateHasInitialValue] = useBooleanState(false);
+  const [valueChanged, updateValueChanged] = useBooleanState(false);
+  const [disabledApply, updateDisabledApply] = useBooleanState(isValueEmpty(props.value));
+  const targetElement = useUniqueIdentifier();
+  const renderModalBody = F(() => render ?? renderFallback, [render]);
+  const onValueUpdated = T(
+    (currentValue) => {
+      const hasEmptyValue2 = isValueEmpty(currentValue ?? void 0);
+      updateHasEmptyValue(hasEmptyValue2);
+      updateDisabledApply(currentValue === null);
+      updateValueChanged(hasInitialValue ? currentValue !== props.value : !hasEmptyValue2);
     },
-    [a, r, g, h, s, e.value]
-  ), { commitAction: k, commitActionButtons: x, committing: A, resetCommitAction: V } = Y({
-    applyDisabled: P || !I,
-    resetDisabled: o
-  }), [p, M] = v(() => {
-    const n = (m) => () => {
-      m !== t && (m && (V(), h(!1), u(!1)), y(m), l(m));
+    [isValueEmpty, updateHasEmptyValue, updateDisabledApply, updateValueChanged, hasInitialValue, props.value]
+  );
+  const { commitAction, commitActionButtons, committing, resetCommitAction } = useCommitAction({
+    applyDisabled: disabledApply || !valueChanged,
+    resetDisabled: hasEmptyValue
+  });
+  const [closeEditDialog, openEditDialog] = F(() => {
+    const updateEditMode = (mode) => () => {
+      if (mode === editMode)
+        return;
+      if (mode) {
+        resetCommitAction();
+        updateValueChanged(false);
+        updateHasInitialValue(false);
+      }
+      _updateEditMode(mode);
+      updateEditModalMounting(mode);
     };
-    return [n(!1), n(!0)];
-  }, [y, t, V, l, u, h]);
-  return E(() => {
-    if (c) {
-      const n = a(e.value);
-      l(!1), r(n), u(!n);
+    return [updateEditMode(false), updateEditMode(true)];
+  }, [_updateEditMode, editMode, resetCommitAction, updateEditModalMounting, updateHasInitialValue, updateValueChanged]);
+  p(() => {
+    if (editModalMounting) {
+      const hasEmptyValue2 = isValueEmpty(props.value);
+      updateEditModalMounting(false);
+      updateHasEmptyValue(hasEmptyValue2);
+      updateHasInitialValue(!hasEmptyValue2);
     }
-  }, [e.value, c, a, l, r, u]), E(() => {
-    A && p(), r(o);
-  }, [A, p, r, o]), /* @__PURE__ */ i(j, { children: [
-    /* @__PURE__ */ i("div", { className: `adyen-fp-filter adyen-fp-filter--${e.type}`, children: v(
-      () => /* @__PURE__ */ i(
-        w,
+  }, [props.value, editModalMounting, isValueEmpty, updateEditModalMounting, updateHasEmptyValue, updateHasInitialValue]);
+  p(() => {
+    committing && closeEditDialog();
+    updateHasEmptyValue(hasEmptyValue);
+  }, [committing, closeEditDialog, updateHasEmptyValue, hasEmptyValue]);
+  const isOnlySmDevice = useMediaQuery(mediaQueries.only.sm);
+  const isOnlyMdDevice = useMediaQuery(mediaQueries.only.md);
+  return /* @__PURE__ */ o(k, { children: [
+    /* @__PURE__ */ o("div", { className: `adyen-pe-filter adyen-pe-filter--${props.type}`, children: F(
+      () => /* @__PURE__ */ o(
+        FilterButton,
         {
           classNameModifiers: [
-            ...e.appliedFilterAmount ? ["with-counter"] : [],
-            ...e.classNameModifiers ?? [],
-            ...t ? ["active"] : [],
-            ...o ? [] : ["has-selection"]
+            ...props.appliedFilterAmount ? ["with-counter"] : [],
+            ...props.classNameModifiers ?? [],
+            ...editMode ? ["active"] : [],
+            ...hasEmptyValue ? [] : ["has-selection"]
           ],
-          onClick: t ? p : M,
+          onClick: editMode ? closeEditDialog : openEditDialog,
           tabIndex: 0,
-          ref: b,
-          children: /* @__PURE__ */ i("div", { className: "adyen-fp-filter-button__default-container", children: [
-            /* @__PURE__ */ i(
-              B,
+          ref: targetElement,
+          children: /* @__PURE__ */ o("div", { className: "adyen-pe-filter-button__default-container", children: [
+            /* @__PURE__ */ o(
+              Typography,
               {
-                el: F.SPAN,
-                variant: N.BODY,
-                stronger: !0,
-                className: "adyen-fp-filter-button__label",
-                children: e.label
+                el: TypographyElement.SPAN,
+                variant: TypographyVariant.BODY,
+                stronger: true,
+                className: "adyen-pe-filter-button__label",
+                children: props.label
               }
             ),
-            !!e.appliedFilterAmount && /* @__PURE__ */ i("div", { className: "adyen-fp-filter-button__counter-wrapper", children: /* @__PURE__ */ i(
-              B,
+            !!props.appliedFilterAmount && /* @__PURE__ */ o("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ o(
+              Typography,
               {
-                el: F.SPAN,
-                variant: N.BODY,
-                stronger: !0,
-                className: "adyen-fp-filter-button__counter",
-                children: e.appliedFilterAmount
+                el: TypographyElement.SPAN,
+                variant: TypographyVariant.BODY,
+                stronger: true,
+                className: "adyen-pe-filter-button__counter",
+                children: props.appliedFilterAmount
               }
             ) })
           ] })
         }
       ),
       [
-        e.appliedFilterAmount,
-        e.classNameModifiers,
-        e.label,
-        t,
-        o,
-        p,
-        M,
-        b
+        props.appliedFilterAmount,
+        props.classNameModifiers,
+        props.label,
+        editMode,
+        hasEmptyValue,
+        closeEditDialog,
+        openEditDialog,
+        targetElement
       ]
     ) }),
-    t && /* @__PURE__ */ i(
-      U,
+    editMode && /* @__PURE__ */ o(
+      Popover,
       {
-        actions: x,
-        title: (C = e.title) == null ? void 0 : C.trim(),
+        actions: commitActionButtons,
+        title: (_a = props.title) == null ? void 0 : _a.trim(),
+        variant: PopoverContainerVariant.POPOVER,
         modifiers: ["filter"],
-        open: t,
-        "aria-label": `${e.label}`,
-        dismiss: p,
-        dismissible: !1,
-        withContentPadding: e.withContentPadding ?? !0,
-        divider: !0,
-        targetElement: b,
-        disableFocusTrap: !1,
-        containerSize: e.containerSize,
-        children: S({ ...e, editAction: k, onValueUpdated: T })
+        open: editMode,
+        "aria-label": `${props.label}`,
+        dismiss: closeEditDialog,
+        dismissible: false,
+        withContentPadding: props.withContentPadding ?? true,
+        divider: true,
+        targetElement,
+        disableFocusTrap: false,
+        position: PopoverContainerPosition.BOTTOM,
+        containerSize: props.containerSize,
+        showOverlay: isSmViewport,
+        fitPosition: isOnlySmDevice || isOnlyMdDevice,
+        children: renderModalBody({ ...props, editAction: commitAction, onValueUpdated })
       }
     )
   ] });
-}, de = H(G);
+};
+const BaseFilter$1 = x(BaseFilter);
 export {
-  de as default
+  BaseFilter$1 as default
 };

package/dist/es/components/internal/FilterBar/filters/BaseFilter/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./BaseFilter.js";
+export {
+  default2 as default
+};