@ironsource/shared-ui 2.1.12-rc.0 → 2.1.12-rc.2

package/components/dropdown/v4/DropdownV4.vue2.js

@@ -1,42 +1,42 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_75002075_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as fe, computed as U, openBlock as n, createElementBlock as r, mergeProps as y, unref as t, renderSlot as f, createElementVNode as m, createVNode as i, withCtx as u, Transition as me, normalizeClass as O, normalizeStyle as pe, createTextVNode as T, createCommentVNode as a, isRef as ge, toDisplayString as G, withModifiers as W, Fragment as Te, renderList as ke, toRaw as C, createBlock as X, resolveDynamicComponent as he } from "vue";
-import L from "../../button/v4/ButtonV4.vue.js";
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_d154c5da_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as fe, computed as H, watch as me, openBlock as a, createElementBlock as s, mergeProps as y, unref as t, renderSlot as f, createElementVNode as m, createVNode as i, withCtx as u, Transition as pe, normalizeClass as E, normalizeStyle as ge, createTextVNode as T, createCommentVNode as d, isRef as Te, toDisplayString as U, withModifiers as G, Fragment as ke, renderList as he, toRaw as C, createBlock as X, resolveDynamicComponent as be } from "vue";
+import O from "../../button/v4/ButtonV4.vue.js";
 import "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
 import "../../button/v4/ToggleButtonGroupAB.vue.js";
 import "./DropdownV4.vue.js";
-import be from "./DefaultDropdownTrigger.vue.js";
-import we from "./IconButtonDropdownTrigger.vue.js";
-import Ie from "./ChipDropdownTrigger.vue.js";
-import ve from "./AppDropdownTrigger.vue.js";
+import we from "./DefaultDropdownTrigger.vue.js";
+import Ie from "./IconButtonDropdownTrigger.vue.js";
+import ve from "./ChipDropdownTrigger.vue.js";
+import Ce from "./AppDropdownTrigger.vue.js";
 import "./ButtonDropdownTrigger.vue.js";
 import "./ButtonFilterDropdownTrigger.vue.js";
 import "./TreeDropdown.vue.js";
 import q from "./OptionV4.vue.js";
 import "./ConditionalDropdown.vue.js";
-import Ce from "../../search/v4/SearchV4.vue.js";
+import Se from "../../search/v4/SearchV4.vue.js";
 import Y from "../../typography/v4/Typography.vue.js";
-import { Dropdown as Se } from "floating-vue";
+import { Dropdown as Ke } from "floating-vue";
 import { DropdownTestIdModifiers as p } from "../../../testids/index.js";
-import { dropdownCommon as Ke } from "../common/Dropdown.common.js";
+import { dropdownCommon as Ae } from "../common/Dropdown.common.js";
 import S from "../../skeleton/v4/SkeletonV4.vue.js";
-import { useTestIdAttrs as Ae } from "../../../utils/testIds.js";
+import { useTestIdAttrs as Le } from "../../../utils/testIds.js";
 import { TRIGGERS as k } from "./Dropdown.types.js";
 import { useElementSize as Ee } from "@vueuse/core";
 import Oe from "../../shared/FieldHelpText.vue.js";
-import Le from "./GroupOption.vue.js";
-const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve = { key: 1 }, xe = { key: 2 }, De = {
+import Be from "./GroupOption.vue.js";
+const Fe = ["tabindex"], Ne = { style: { width: "100%" } }, Ve = { key: 0 }, xe = { key: 1 }, De = { key: 2 }, Pe = {
   key: 0,
   class: "inline-search-wrapper"
-}, Pe = { class: "dropdown-conditions" }, Re = {
+}, Re = { class: "dropdown-conditions" }, ze = {
   key: 0,
   class: "no-result-container"
-}, ze = ["aria-selected", "aria-disabled", "onClick"], $e = {
+}, $e = ["aria-selected", "aria-disabled", "onClick"], Me = {
   key: 3,
   class: "loader"
-}, Me = {
+}, We = {
   key: 1,
   class: "actions-wrapper"
-}, He = { class: "actions-clear-all" }, Ue = { class: "actions-apply-cancel" }, Tt = /* @__PURE__ */ fe({
+}, He = { class: "actions-clear-all" }, Ue = { class: "actions-apply-cancel" }, kt = /* @__PURE__ */ fe({
   __name: "DropdownV4",
   props: {
     modelValue: { default: null },
@@ -56,6 +56,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
     keepOpen: { type: Boolean, default: !1 },
     autoSize: { type: Boolean, default: !1 },
     disableKeyboardEvents: { type: Boolean, default: !1 },
+    dynamicFilterMode: { type: Boolean, default: !1 },
     isOnTop: { type: Boolean, default: !1 },
     distance: { default: 0 },
     container: { default: "body" },
@@ -103,7 +104,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
   },
   emits: ["update:selected", "update:isOpen", "closed", "opened", "apply", "selectAll", "clear", "copyToClipboard", "onsearch", "loadMore", "allSelectedChanged", "unsavedSelectionUpdate"],
   setup(e, { expose: j, emit: B }) {
-    const d = e, F = {
+    const n = e, F = {
       MULTILINE_LIST_HEIGHT: 48,
       LIST_HEIGHT: 32 + 4,
       MAX_NUMBER_OF_OPTIONS: 7.5,
@@ -112,7 +113,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
       VERSION: 4
     }, {
       onKeydown: b,
-      open: s,
+      open: r,
       toggleMenu: I,
       onButtonKeydown: N,
       query: v,
@@ -127,7 +128,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
       virtualOptions: x,
       isSelected: A,
       selectedOption: h,
-      selectedOptionPrevious: E,
+      selectedOptionPrevious: L,
       selectedValue: oe,
       onSelect: D,
       activeIndex: P,
@@ -137,20 +138,30 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
       listRef: ae,
       buttonRef: R,
       apply: de,
-      cancel: re,
-      el: se,
+      cancel: se,
+      el: re,
       onClearAllSelections: z,
       clearAll: ue,
       isGroup: ce
-    } = Ke(d, B, F), g = Ae(d.testId, p), $ = U(() => !d.predefinedTrigger || d.predefinedTrigger === k.DEFAULT ? be : d.predefinedTrigger === k.APP ? ve : null), { width: M } = Ee(R), ye = U(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === k.DEFAULT || d.predefinedTrigger === k.APP ? M.value - 2 > 240 ? `${M.value - 2}px` : `${F.DROPLIST_MIN_WIDTH}px` : "auto"), H = () => {
+    } = Ae(n, B, F), g = Le(n.testId, p), $ = H(() => !n.predefinedTrigger || n.predefinedTrigger === k.DEFAULT ? we : n.predefinedTrigger === k.APP ? Ce : null), { width: M } = Ee(R), ye = H(() => n.optionsListWidth ? n.optionsListWidth : !n.predefinedTrigger || n.predefinedTrigger === k.DEFAULT || n.predefinedTrigger === k.APP ? M.value - 2 > 240 ? `${M.value - 2}px` : `${F.DROPLIST_MIN_WIDTH}px` : "auto");
+    me(
+      () => n.optionsListWidth,
+      () => {
+        n.optionsListWidth && document.documentElement.style.setProperty(
+          "--options-list-width",
+          n.optionsListWidth
+        );
+      }
+    );
+    const W = () => {
       I();
     };
     return j({
       selectItem: D,
       scrollTo: ne
-    }), (c, l) => (n(), r("div", y({
+    }), (c, l) => (a(), s("div", y({
       ref_key: "el",
-      ref: se,
+      ref: re,
       class: ["dropdown dropdown--main-wrapper", [{ "dropdown--disabled": e.disabled, "full-width": e.fullWidth }]],
       tabindex: e.disabled ? -1 : 0
     }, t(g)[t(p).WRAPPER], {
@@ -158,8 +169,8 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
       (...o) => t(b) && t(b)(...o))
     }), [
       f(c.$slots, "label", {}, void 0, !0),
-      m("div", Fe, [
-        i(t(Se), y({
+      m("div", Ne, [
+        i(t(Ke), y({
           theme: e.theme,
           "popper-class": [
             e.popperClass,
@@ -172,33 +183,33 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
           distance: e.distance,
           flip: e.flip,
           triggers: [],
-          shown: !!t(s),
+          shown: !!t(r),
           "auto-hide": !1,
           container: e.container,
           "auto-size": e.autoSize
         }, t(g)[t(p).TRIGGER]), {
           popper: u(() => [
-            i(me, null, {
+            i(pe, null, {
               default: u(() => [
-                t(s) ? (n(), r("div", {
+                t(r) ? (a(), s("div", {
                   key: 0,
                   ref_key: "listRef",
                   ref: ae,
-                  class: O(["light-theme-v4", {
+                  class: E(["light-theme-v4", {
                     "dropdown--disabled": e.disabled,
                     "inline-search": e.inlineSearch
                   }]),
-                  style: pe({ width: t(ye) })
+                  style: ge({ width: t(ye) })
                 }, [
-                  t(s) ? (n(), r("div", {
+                  t(r) ? (a(), s("div", {
                     key: 0,
-                    class: O(["dropdown-list-wrapper", { "dropdown-list-wrapper--multi": e.multi }]),
+                    class: E(["dropdown-list-wrapper", { "dropdown-list-wrapper--multi": e.multi }]),
                     onKeydown: l[7] || (l[7] = //@ts-ignore
                     (...o) => t(b) && t(b)(...o))
                   }, [
-                    t(s) && e.inlineSearch ? (n(), r("div", De, [
+                    t(r) && e.inlineSearch ? (a(), s("div", Pe, [
                       e.withConditions ? f(c.$slots, "dropdown-conditions", { key: 0 }, () => [
-                        m("div", Pe, [
+                        m("div", Re, [
                           i(t(Y), { variant: "body2" }, {
                             default: u(() => [
                               T("Conditions")
@@ -206,12 +217,12 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                             _: 1
                           })
                         ])
-                      ], !0) : a("", !0),
+                      ], !0) : d("", !0),
                       f(c.$slots, "inline-search", {}, () => [
-                        i(t(Ce), {
+                        i(t(Se), {
                           modelValue: t(v),
                           "onUpdate:modelValue": [
-                            l[4] || (l[4] = (o) => ge(v) ? v.value = o : null),
+                            l[4] || (l[4] = (o) => Te(v) ? v.value = o : null),
                             e.onClearSearch
                           ],
                           placeholder: e.inlineSearchPlaceholder,
@@ -222,8 +233,8 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                           onKeydown: t(b)
                         }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id", "onUpdate:modelValue", "onKeydown"])
                       ], !0)
-                    ])) : a("", !0),
-                    f(c.$slots, "input-list", { open: t(s) }, void 0, !0),
+                    ])) : d("", !0),
+                    f(c.$slots, "input-list", { open: t(r) }, void 0, !0),
                     m("div", y({
                       class: ["list-container", { "list-container--multi": e.multi }],
                       style: { height: `${t(Q)}rem` }
@@ -239,14 +250,14 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                           "list--with-conditions": e.withConditions
                         }]
                       }), [
-                        !t(_).length && !e.loading && !e.withConditions ? (n(), r("li", Re, [
+                        !t(_).length && !e.loading && !e.withConditions ? (a(), s("li", ze, [
                           i(t(Y), y({ variant: "body2" }, t(g)[t(p).NO_RESULT]), {
                             default: u(() => [
-                              T(G(e.noResultsText), 1)
+                              T(U(e.noResultsText), 1)
                             ]),
                             _: 1
                           }, 16)
-                        ])) : a("", !0),
+                        ])) : d("", !0),
                         e.showSelectAll !== !1 && e.multi && !t(v) && !e.loading && e.options.length ? f(c.$slots, "select-all", { key: 1 }, () => [
                           m("li", null, [
                             i(t(q), y(
@@ -260,7 +271,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                               },
                               t(g)[t(p).SELECT_ALL],
                               {
-                                onClick: l[5] || (l[5] = W((o) => t(te)(), ["stop"]))
+                                onClick: l[5] || (l[5] = G((o) => t(te)(), ["stop"]))
                               }
                             ), {
                               default: u(() => [
@@ -269,17 +280,17 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                               _: 1
                             }, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate", "is-multi"])
                           ])
-                        ], !0) : a("", !0),
-                        t(x).length && !e.loading ? (n(!0), r(Te, { key: 2 }, ke(t(x), ({ data: o, index: w }) => (n(), r("li", {
+                        ], !0) : d("", !0),
+                        t(x).length && !e.loading ? (a(!0), s(ke, { key: 2 }, he(t(x), ({ data: o, index: w }) => (a(), s("li", {
                           key: w,
                           "aria-selected": t(A)(C(t(h)), o),
                           "aria-disabled": !!e.disabled,
-                          onClick: W(() => t(D)(o, w), ["stop"])
+                          onClick: G(() => t(D)(o, w), ["stop"])
                         }, [
                           e.groupedOptions && t(ce)(o) ? f(c.$slots, "group-option", { key: 0 }, () => [
-                            i(Le, null, {
+                            i(Be, null, {
                               default: u(() => [
-                                T(G(e.displayValue(o) || o[e.optionNameKey]), 1)
+                                T(U(e.displayValue(o) || o[e.optionNameKey]), 1)
                               ]),
                               _: 2
                             }, 1024)
@@ -289,13 +300,13 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                             index: w,
                             selected: t(A)(C(t(h)), o),
                             active: C(t(P)) === w,
-                            disabled: o[d.disabledOptionKey]
+                            disabled: o[n.disabledOptionKey]
                           }, () => [
                             i(t(q), {
                               option: o,
                               "selected-prop": t(A)(t(h), o),
                               active: C(t(P)) === w,
-                              disabled: o[d.disabledOptionKey],
+                              disabled: o[n.disabledOptionKey],
                               "name-key": e.optionNameKey,
                               "image-key": e.optionImageKey,
                               "icon-key": e.optionIconKey,
@@ -309,18 +320,18 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                               "is-multi": e.multi
                             }, null, 8, ["option", "selected-prop", "active", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "end-text-icon-key", "option-flag-key", "option-two-lines-variant", "option-two-lines-key", "is-multi"])
                           ], !0)
-                        ], 8, ze))), 128)) : a("", !0),
-                        e.loading || e.loadMoreLoading ? (n(), r("li", $e, [
+                        ], 8, $e))), 128)) : d("", !0),
+                        e.loading || e.loadMoreLoading ? (a(), s("li", Me, [
                           i(t(S), { round: "" }),
                           i(t(S), { round: "" }),
                           i(t(S), { round: "" }),
                           i(t(S), { round: "" })
-                        ])) : a("", !0)
+                        ])) : d("", !0)
                       ], 16)
                     ], 16),
-                    e.multi ? (n(), r("div", Me, [
+                    e.multi ? (a(), s("div", We, [
                       m("div", He, [
-                        i(t(L), y(
+                        i(t(O), y(
                           {
                             ref_key: "clearAll",
                             ref: ue,
@@ -340,10 +351,10 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                         }, 16)
                       ]),
                       m("div", Ue, [
-                        i(t(L), y(
+                        i(t(O), y(
                           {
                             ref_key: "cancel",
-                            ref: re,
+                            ref: se,
                             size: "small",
                             variant: "outlined",
                             color: "primary"
@@ -356,7 +367,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                           ]),
                           _: 1
                         }, 16, ["onClick"]),
-                        i(t(L), y({
+                        i(t(O), y({
                           ref_key: "apply",
                           ref: de,
                           "data-testid": "mutli-apply",
@@ -369,17 +380,17 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                           _: 1
                         }, 16, ["onClick"])
                       ])
-                    ])) : a("", !0)
-                  ], 34)) : a("", !0)
-                ], 6)) : a("", !0)
+                    ])) : d("", !0)
+                  ], 34)) : d("", !0)
+                ], 6)) : d("", !0)
               ]),
               _: 3
             })
           ]),
           default: u(() => [
             m("div", {
-              class: O(["button__container", {
-                "button__container--open": !!t(s),
+              class: E(["button__container", {
+                "button__container--open": !!t(r),
                 [`button__container--${e.size}`]: !0,
                 "button__container--disabled": e.disabled
               }])
@@ -390,21 +401,21 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
               }, [
                 f(c.$slots, "dropdown-trigger", {
                   buttonTriggerProps: {
-                    open: t(s),
+                    open: t(r),
                     disabled: e.disabled,
                     label: t(oe) || e.placeholder,
                     onClick: () => t(I)()
                   },
                   defaultTriggerProps: {
                     placeholder: e.placeholder,
-                    open: t(s),
+                    open: t(r),
                     label: e.triggerLabel,
                     showFeedbackIcon: e.triggerFeedbackShowIcon,
                     mandatory: e.mandatory,
                     testId: e.testId,
                     multi: e.multi,
                     disabled: e.disabled,
-                    selectedOption: e.multi ? t(E) : t(h),
+                    selectedOption: e.multi ? t(L) : t(h),
                     displayValue: e.displayValue,
                     options: e.options,
                     optionNameKey: e.optionNameKey,
@@ -422,20 +433,20 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                     showAllSelectedText: e.triggerShowAllSelectedText,
                     allSelected: t(K),
                     onKeydown: t(N),
-                    onClick: H
+                    onClick: W
                   }
                 }, () => [
-                  t($) ? (n(), r("div", Ne, [
-                    (n(), X(he(t($)), {
+                  t($) ? (a(), s("div", Ve, [
+                    (a(), X(be(t($)), {
                       placeholder: e.placeholder,
-                      open: t(s),
+                      open: t(r),
                       label: e.triggerLabel,
                       "show-feedback-icon": e.triggerFeedbackShowIcon,
                       mandatory: e.mandatory,
                       "test-id": e.testId,
                       multi: e.multi,
                       disabled: e.disabled,
-                      "selected-option": e.multi ? t(E) : t(h),
+                      "selected-option": e.multi ? t(L) : t(h),
                       "display-value": e.displayValue,
                       options: e.options,
                       "option-name-key": e.optionNameKey,
@@ -453,47 +464,47 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                       "show-all-selected-text": e.triggerShowAllSelectedText,
                       "all-selected": t(K),
                       onKeydown: t(N),
-                      onClick: H,
+                      onClick: W,
                       onCopyToClipboard: l[0] || (l[0] = (o) => B("copyToClipboard"))
                     }, null, 40, ["placeholder", "open", "label", "show-feedback-icon", "mandatory", "test-id", "multi", "disabled", "selected-option", "display-value", "options", "option-name-key", "option-image-key", "option-icon-key", "option-icon-type", "option-end-icon-key", "option-end-icon-type", "options-end-text-icon-key", "option-flag-key", "feedback-variant", "value-to-copy", "status-dot-type", "size", "show-all-selected-text", "all-selected", "onKeydown"]))
-                  ])) : a("", !0),
-                  e.predefinedTrigger === t(k).ICON_BUTTON ? (n(), r("div", Ve, [
-                    i(t(we), {
+                  ])) : d("", !0),
+                  e.predefinedTrigger === t(k).ICON_BUTTON ? (a(), s("div", xe, [
+                    i(t(Ie), {
                       onClick: l[1] || (l[1] = (o) => t(I)())
                     })
-                  ])) : a("", !0),
-                  e.predefinedTrigger === t(k).CHIP ? (n(), r("div", xe, [
-                    i(t(Ie), {
-                      open: t(s),
+                  ])) : d("", !0),
+                  e.predefinedTrigger === t(k).CHIP ? (a(), s("div", De, [
+                    i(t(ve), {
+                      open: t(r),
                       label: e.placeholder,
                       "test-id": e.testId,
                       options: e.options,
-                      "selected-option": e.multi ? t(E) : t(h),
+                      "selected-option": e.multi ? t(L) : t(h),
                       "display-value": e.displayValue,
                       multi: e.multi,
                       "all-selected": t(K),
                       onClick: l[2] || (l[2] = (o) => t(I)()),
                       onClear: l[3] || (l[3] = (o) => t(z)())
                     }, null, 8, ["open", "label", "test-id", "options", "selected-option", "display-value", "multi", "all-selected"])
-                  ])) : a("", !0)
+                  ])) : d("", !0)
                 ], !0)
               ], 512)
             ], 2)
           ]),
           _: 3
         }, 16, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size"]),
-        e.triggerFeedbackText ? (n(), X(Oe, {
+        e.triggerFeedbackText ? (a(), X(Oe, {
           key: 0,
           text: e.triggerFeedbackText,
           variant: e.triggerFeedbackVariant,
           "show-icon": e.triggerFeedbackShowIcon,
           "test-id": e.testId,
           class: "dropdown-field-help-text"
-        }, null, 8, ["text", "variant", "show-icon", "test-id"])) : a("", !0)
+        }, null, 8, ["text", "variant", "show-icon", "test-id"])) : d("", !0)
       ])
-    ], 16, Be));
+    ], 16, Fe));
   }
 });
 export {
-  Tt as default
+  kt as default
 };

package/components/dropdown/v4/dropdownStoryArgs.d.ts

@@ -54,36 +54,66 @@ export declare const dropDownStoryArgs: {
         control: {
             type: string;
         };
+        table: {
+            category: string;
+        };
     };
     placeholder: {
         control: {
             type: string;
         };
+        table: {
+            category: string;
+        };
     };
     disabled: {
         control: {
             type: string;
         };
+        table: {
+            category: string;
+        };
     };
     mandatory: {
         control: {
             type: string;
         };
+        table: {
+            category: string;
+        };
     };
     loading: {
         control: {
             type: string;
         };
+        table: {
+            category: string;
+        };
     };
     testId: {
         control: {
             type: string;
         };
+        table: {
+            category: string;
+        };
     };
     isOpen: {
         control: {
             type: string;
         };
+        table: {
+            category: string;
+        };
+    };
+    dynamicFilterMode: {
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+        description: string;
     };
     isOnTop: {
         control: {

package/components/dropdown/v4/index.d.ts

@@ -1736,6 +1736,7 @@ declare const DropdownTypes: () => (({
             keepOpen: boolean;
             autoSize: boolean;
             disableKeyboardEvents: boolean;
+            dynamicFilterMode: boolean;
             isOnTop: boolean;
             triggerLabel: string;
             triggerHelperText: string;
@@ -1872,6 +1873,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            dynamicFilterMode: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             isOnTop: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -2025,7 +2030,7 @@ declare const DropdownTypes: () => (({
             onUnsavedSelectionUpdate?: (value: unknown[]) => any;
             onOpened?: () => any;
             onClosed?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "testId" | "placement" | "disabled" | "distance" | "container" | "popperClass" | "size" | "flip" | "mandatory" | "skidding" | "modelValue" | "selected" | "valueToCopy" | "placeholder" | "multi" | "infiniteLoading" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "triggerShowAllSelectedText" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClearSearch" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "optionEndIconKey" | "optionEndIconType" | "optionsEndTextIconKey" | "optionFlagKey" | "disabledOptionKey" | "optionTwoLinesVariant" | "optionTwoLinesKey" | "groupedOptions" | "comparingKey" | "customNumberOfDisplayedOptions" | "fullWidth" | "optionsListWidth" | "statusType" | "disableVirtualScroll" | "overrideOptionCountCalculation" | "withConditions">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "testId" | "placement" | "disabled" | "distance" | "container" | "popperClass" | "size" | "flip" | "mandatory" | "skidding" | "modelValue" | "selected" | "valueToCopy" | "placeholder" | "multi" | "infiniteLoading" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "dynamicFilterMode" | "isOnTop" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "triggerShowAllSelectedText" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClearSearch" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "optionEndIconKey" | "optionEndIconType" | "optionsEndTextIconKey" | "optionFlagKey" | "disabledOptionKey" | "optionTwoLinesVariant" | "optionTwoLinesKey" | "groupedOptions" | "comparingKey" | "customNumberOfDisplayedOptions" | "fullWidth" | "optionsListWidth" | "statusType" | "disableVirtualScroll" | "overrideOptionCountCalculation" | "withConditions">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -2141,6 +2146,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            dynamicFilterMode: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             isOnTop: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -2333,6 +2342,7 @@ declare const DropdownTypes: () => (({
             keepOpen: boolean;
             autoSize: boolean;
             disableKeyboardEvents: boolean;
+            dynamicFilterMode: boolean;
             isOnTop: boolean;
             triggerLabel: string;
             triggerHelperText: string;
@@ -2489,6 +2499,10 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        dynamicFilterMode: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         isOnTop: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -2751,6 +2765,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    dynamicFilterMode: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     isOnTop: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -2943,6 +2961,7 @@ declare const DropdownTypes: () => (({
     keepOpen: boolean;
     autoSize: boolean;
     disableKeyboardEvents: boolean;
+    dynamicFilterMode: boolean;
     isOnTop: boolean;
     triggerLabel: string;
     triggerHelperText: string;

package/components/table/v4/DataGrid.vue.js

@@ -1,7 +1,7 @@
 import o from "./DataGrid.vue2.js";
 /* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DataGrid.vue_vue_type_style_index_0_scoped_26488faf_lang.css"; //*');
-const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-26488faf"]]);
+// import "../../../DataGrid.vue_vue_type_style_index_0_scoped_020072b0_lang.css"; //*');
+const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-020072b0"]]);
 export {
-  s as default
+  a as default
 };

package/components/table/v4/DataGrid.vue2.js

@@ -1,4 +1,4 @@
- import "../../../DataGrid.vue_vue_type_style_index_0_scoped_26488faf_lang.css"; import { defineComponent as ne, useCssVars as ce, unref as t, useSlots as re, computed as g, openBlock as i, createElementBlock as o, createElementVNode as u, normalizeStyle as T, normalizeClass as f, renderSlot as c, createVNode as h, withCtx as w, createTextVNode as B, toDisplayString as E, isRef as ue, createCommentVNode as r, Fragment as I, renderList as p, mergeProps as V, createBlock as z } from "vue";
+ import "../../../DataGrid.vue_vue_type_style_index_0_scoped_020072b0_lang.css"; import { defineComponent as ne, useCssVars as ce, unref as t, useSlots as re, computed as g, openBlock as i, createElementBlock as o, createElementVNode as u, normalizeStyle as T, normalizeClass as f, renderSlot as c, createVNode as h, withCtx as w, createTextVNode as B, toDisplayString as E, isRef as ue, createCommentVNode as r, Fragment as I, renderList as p, mergeProps as V, createBlock as z } from "vue";
 import A from "../../typography/v4/Typography.vue.js";
 import he from "../../skeleton/v4/SkeletonV4.vue.js";
 import ye from "../../emptyState/v4/EmptyStateV4.vue.js";
@@ -64,10 +64,10 @@ const Ce = ["data-testid"], $e = ["data-testid"], Re = ["data-testid"], xe = ["d
   setup(s, { expose: k, emit: y }) {
     const a = s;
     ce((l) => ({
-      "7552e08c": s.zIndexBase,
-      "7f4c0eae": t(_),
-      b761a3b2: t(N),
-      "79122e22": t(Z)
+      "213d426c": s.zIndexBase,
+      "1bb95c84": t(_),
+      "833c2592": t(N),
+      d3eb9802: t(Z)
     }));
     const b = re(), Y = (l) => a.rowCustomClassKey && a.rows[l] ? a.rows[l][a.rowCustomClassKey] : "", {
       list: H,
@@ -342,6 +342,7 @@ const Ce = ["data-testid"], $e = ["data-testid"], Re = ["data-testid"], xe = ["d
                 title: s.emptyStateTitle,
                 subtitle: t(de),
                 variant: t(oe),
+                "icon-name": "file-search",
                 "test-id": `${s.testId}-${t(S).EMPTY_STATE}`
               }, null, 8, ["title", "subtitle", "variant", "test-id"])
             ])