@ironsource/shared-ui 2.1.11-rc.24 → 2.1.11-rc.26

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

@@ -1,4 +1,4 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_b1bde483_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 W, withModifiers as M, Fragment as Te, renderList as ke, toRaw as C, createBlock as X, resolveDynamicComponent as he } from "vue";
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_6466948d_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as fe, computed as G, 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 U, 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 "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
@@ -30,13 +30,13 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
 }, Pe = { class: "dropdown-conditions" }, Re = {
   key: 0,
   class: "no-result-container"
-}, ze = {
-  key: 1,
+}, ze = ["aria-selected", "aria-disabled", "onClick"], $e = {
+  key: 3,
   class: "loader"
-}, $e = ["aria-selected", "aria-disabled", "onClick"], He = {
+}, Me = {
   key: 1,
   class: "actions-wrapper"
-}, Ge = { class: "actions-clear-all" }, Ue = { class: "actions-apply-cancel" }, Tt = /* @__PURE__ */ fe({
+}, He = { class: "actions-clear-all" }, Ge = { class: "actions-apply-cancel" }, Tt = /* @__PURE__ */ fe({
   __name: "DropdownV4",
   props: {
     modelValue: { default: null },
@@ -46,6 +46,8 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
     disabled: { type: Boolean, default: !1 },
     popperClass: { default: "" },
     loading: { type: Boolean },
+    loadMoreLoading: { type: Boolean },
+    infiniteLoading: { type: Boolean, default: !1 },
     testId: { default: "" },
     isOpen: { type: Boolean },
     options: null,
@@ -99,7 +101,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
     overrideOptionCountCalculation: { type: Function, default: null },
     withConditions: { type: Boolean, default: !1 }
   },
-  emits: ["update:selected", "update:isOpen", "closed", "opened", "apply", "selectAll", "clear", "copyToClipboard", "onsearch"],
+  emits: ["update:selected", "update:isOpen", "closed", "opened", "apply", "selectAll", "clear", "copyToClipboard", "onsearch", "loadMore", "allSelectedChanged"],
   setup(e, { expose: j, emit: B }) {
     const d = e, F = {
       MULTILINE_LIST_HEIGHT: 48,
@@ -140,7 +142,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
       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: H } = Ee(R), ye = U(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === k.DEFAULT || d.predefinedTrigger === k.APP ? H.value - 2 > 240 ? `${H.value - 2}px` : `${F.DROPLIST_MIN_WIDTH}px` : "auto"), G = () => {
+    } = Ke(d, B, F), g = Ae(d.testId, p), $ = G(() => !d.predefinedTrigger || d.predefinedTrigger === k.DEFAULT ? be : d.predefinedTrigger === k.APP ? ve : null), { width: M } = Ee(R), ye = G(() => 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 = () => {
       I();
     };
     return j({
@@ -240,18 +242,12 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                         !t(_).length && !e.loading && !e.withConditions ? (n(), r("li", Re, [
                           i(t(Y), y({ variant: "body2" }, t(g)[t(p).NO_RESULT]), {
                             default: u(() => [
-                              T(W(e.noResultsText), 1)
+                              T(U(e.noResultsText), 1)
                             ]),
                             _: 1
                           }, 16)
                         ])) : a("", !0),
-                        e.loading ? (n(), r("li", ze, [
-                          i(t(S), { round: "" }),
-                          i(t(S), { round: "" }),
-                          i(t(S), { round: "" }),
-                          i(t(S), { round: "" })
-                        ])) : a("", !0),
-                        e.showSelectAll !== !1 && e.multi && !t(v) && !e.loading && e.options.length ? f(c.$slots, "select-all", { key: 2 }, () => [
+                        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(
                               {
@@ -264,7 +260,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                               },
                               t(g)[t(p).SELECT_ALL],
                               {
-                                onClick: l[5] || (l[5] = M((o) => t(te)(), ["stop"]))
+                                onClick: l[5] || (l[5] = W((o) => t(te)(), ["stop"]))
                               }
                             ), {
                               default: u(() => [
@@ -274,16 +270,16 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                             }, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate", "is-multi"])
                           ])
                         ], !0) : a("", !0),
-                        t(x).length && !e.loading ? (n(!0), r(Te, { key: 3 }, ke(t(x), ({ data: o, index: w }) => (n(), r("li", {
+                        t(x).length && !e.loading ? (n(!0), r(Te, { key: 2 }, ke(t(x), ({ data: o, index: w }) => (n(), r("li", {
                           key: w,
                           "aria-selected": t(A)(C(t(h)), o),
                           "aria-disabled": !!e.disabled,
-                          onClick: M(() => t(D)(o, w), ["stop"])
+                          onClick: W(() => t(D)(o, w), ["stop"])
                         }, [
                           e.groupedOptions && t(ce)(o) ? f(c.$slots, "group-option", { key: 0 }, () => [
                             i(Le, null, {
                               default: u(() => [
-                                T(W(e.displayValue(o) || o[e.optionNameKey]), 1)
+                                T(U(e.displayValue(o) || o[e.optionNameKey]), 1)
                               ]),
                               _: 2
                             }, 1024)
@@ -313,11 +309,17 @@ 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, $e))), 128)) : a("", !0)
+                        ], 8, ze))), 128)) : a("", !0),
+                        e.loading || e.loadMoreLoading ? (n(), r("li", $e, [
+                          i(t(S), { round: "" }),
+                          i(t(S), { round: "" }),
+                          i(t(S), { round: "" }),
+                          i(t(S), { round: "" })
+                        ])) : a("", !0)
                       ], 16)
                     ], 16),
-                    e.multi ? (n(), r("div", He, [
-                      m("div", Ge, [
+                    e.multi ? (n(), r("div", Me, [
+                      m("div", He, [
                         i(t(L), y(
                           {
                             ref_key: "clearAll",
@@ -337,7 +339,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                           _: 1
                         }, 16)
                       ]),
-                      m("div", Ue, [
+                      m("div", Ge, [
                         i(t(L), y(
                           {
                             ref_key: "cancel",
@@ -420,7 +422,7 @@ const Be = ["tabindex"], Fe = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                     showAllSelectedText: e.triggerShowAllSelectedText,
                     allSelected: t(K),
                     onKeydown: t(N),
-                    onClick: G
+                    onClick: H
                   }
                 }, () => [
                   t($) ? (n(), r("div", Ne, [
@@ -451,7 +453,7 @@ 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: G,
+                      onClick: H,
                       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),

package/components/dropdown/v4/OptionV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./OptionV4.vue2.js";
 /* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_df830bf5_lang.css"; //*');
-const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-df830bf5"]]);
+// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_2c2947b3_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-2c2947b3"]]);
 export {
   s as default
 };

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

@@ -1,4 +1,4 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_df830bf5_lang.css"; import { defineComponent as N, ref as I, watch as L, computed as w, openBlock as o, createBlock as v, unref as n, createSlots as P, withCtx as d, createElementVNode as c, normalizeClass as k, createCommentVNode as l, createElementBlock as i, renderSlot as m, createVNode as s, toDisplayString as r, createTextVNode as y, withModifiers as $, Fragment as V, renderList as F } from "vue";
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_2c2947b3_lang.css"; import { defineComponent as N, ref as I, watch as L, computed as w, openBlock as o, createBlock as v, unref as n, createSlots as P, withCtx as d, createElementVNode as c, normalizeClass as k, createCommentVNode as l, createElementBlock as i, renderSlot as m, createVNode as s, toDisplayString as r, createTextVNode as y, withModifiers as $, Fragment as V, renderList as F } from "vue";
 import "../../typography/Heading.vue.js";
 import D from "../../typography/Text.vue.js";
 import R from "../../checkbox/v4/CheckboxV4.vue.js";
@@ -158,7 +158,7 @@ const Q = { class: "multiline-tooltip" }, W = {
                           class: "conditional-option-value"
                         }, {
                           default: d(() => [
-                            y("'" + r(e.option[e.nameKey]) + "'", 1)
+                            y('"' + r(e.option[e.nameKey]) + '"', 1)
                           ]),
                           _: 1
                         })

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

@@ -1631,6 +1631,14 @@ declare const DropdownTypes: () => (({
         required: true;
         default: string;
     };
+    cancelAllSelectedDisplay: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    displayValueInQuotes: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -1681,6 +1689,14 @@ declare const DropdownTypes: () => (({
         required: true;
         default: string;
     };
+    cancelAllSelectedDisplay: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    displayValueInQuotes: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     onClear?: () => any;
 }, {
@@ -1691,6 +1707,8 @@ declare const DropdownTypes: () => (({
     feedbackVariant: string;
     allSelected: boolean;
     displayedValue: any;
+    cancelAllSelectedDisplay: boolean;
+    displayValueInQuotes: boolean;
 }> | ({
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -1712,6 +1730,7 @@ declare const DropdownTypes: () => (({
             valueToCopy: string;
             placeholder: string;
             multi: boolean;
+            infiniteLoading: boolean;
             showSelectAll: boolean;
             defaultOpen: boolean;
             keepOpen: boolean;
@@ -1826,6 +1845,13 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            loadMoreLoading: {
+                type: import("vue").PropType<boolean>;
+            };
+            infiniteLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             showSelectAll: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -1992,11 +2018,13 @@ declare const DropdownTypes: () => (({
             onApply?: (value: unknown) => any;
             onSelectAll?: () => any;
             "onUpdate:selected"?: (value: unknown) => any;
+            onAllSelectedChanged?: (value: boolean) => any;
             "onUpdate:isOpen"?: (value: unknown) => any;
             onOnsearch?: (value: string) => any;
+            onLoadMore?: () => 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" | "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" | "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;
         };
@@ -2008,7 +2036,7 @@ declare const DropdownTypes: () => (({
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-        $emit: ((event: "clear") => void) & ((event: "copyToClipboard") => void) & ((event: "apply", value: unknown) => void) & ((event: "update:selected", value: unknown) => void) & ((event: "update:isOpen", value: unknown) => void) & ((event: "onsearch", value: string) => void) & ((event: "selectAll") => void) & ((event: "opened") => void) & ((event: "closed") => void);
+        $emit: ((event: "clear") => void) & ((event: "copyToClipboard") => void) & ((event: "apply", value: unknown) => void) & ((event: "update:selected", value: unknown) => void) & ((event: "allSelectedChanged", value: boolean) => void) & ((event: "update:isOpen", value: unknown) => void) & ((event: "onsearch", value: string) => void) & ((event: "selectAll") => void) & ((event: "loadMore") => void) & ((event: "opened") => void) & ((event: "closed") => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             theme: {
@@ -2085,6 +2113,13 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            loadMoreLoading: {
+                type: import("vue").PropType<boolean>;
+            };
+            infiniteLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             showSelectAll: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -2251,8 +2286,10 @@ declare const DropdownTypes: () => (({
             onApply?: (value: unknown) => any;
             onSelectAll?: () => any;
             "onUpdate:selected"?: (value: unknown) => any;
+            onAllSelectedChanged?: (value: boolean) => any;
             "onUpdate:isOpen"?: (value: unknown) => any;
             onOnsearch?: (value: string) => any;
+            onLoadMore?: () => any;
             onOpened?: () => any;
             onClosed?: () => any;
         }, {
@@ -2268,6 +2305,8 @@ declare const DropdownTypes: () => (({
             clear: () => void;
             copyToClipboard: () => void;
             onsearch: (value: string) => void;
+            loadMore: () => void;
+            allSelectedChanged: (value: boolean) => void;
         }, string, {
             theme: string;
             testId: string;
@@ -2285,6 +2324,7 @@ declare const DropdownTypes: () => (({
             valueToCopy: string;
             placeholder: string;
             multi: boolean;
+            infiniteLoading: boolean;
             showSelectAll: boolean;
             defaultOpen: boolean;
             keepOpen: boolean;
@@ -2419,6 +2459,13 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        loadMoreLoading: {
+            type: import("vue").PropType<boolean>;
+        };
+        infiniteLoading: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         showSelectAll: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -2585,8 +2632,10 @@ declare const DropdownTypes: () => (({
         onApply?: (value: unknown) => any;
         onSelectAll?: () => any;
         "onUpdate:selected"?: (value: unknown) => any;
+        onAllSelectedChanged?: (value: boolean) => any;
         "onUpdate:isOpen"?: (value: unknown) => any;
         onOnsearch?: (value: string) => any;
+        onLoadMore?: () => any;
         onOpened?: () => any;
         onClosed?: () => any;
     } & import("vue").ShallowUnwrapRef<{
@@ -2671,6 +2720,13 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    loadMoreLoading: {
+        type: import("vue").PropType<boolean>;
+    };
+    infiniteLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     showSelectAll: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -2837,8 +2893,10 @@ declare const DropdownTypes: () => (({
     onApply?: (value: unknown) => any;
     onSelectAll?: () => any;
     "onUpdate:selected"?: (value: unknown) => any;
+    onAllSelectedChanged?: (value: boolean) => any;
     "onUpdate:isOpen"?: (value: unknown) => any;
     onOnsearch?: (value: string) => any;
+    onLoadMore?: () => any;
     onOpened?: () => any;
     onClosed?: () => any;
 }, {
@@ -2854,6 +2912,8 @@ declare const DropdownTypes: () => (({
     clear: () => void;
     copyToClipboard: () => void;
     onsearch: (value: string) => void;
+    loadMore: () => void;
+    allSelectedChanged: (value: boolean) => void;
 }, string, {
     theme: string;
     testId: string;
@@ -2871,6 +2931,7 @@ declare const DropdownTypes: () => (({
     valueToCopy: string;
     placeholder: string;
     multi: boolean;
+    infiniteLoading: boolean;
     showSelectAll: boolean;
     defaultOpen: boolean;
     keepOpen: boolean;
@@ -3506,6 +3567,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    infiniteLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     optionNameKey: {
         type: import("vue").PropType<string>;
         required: true;
@@ -3548,6 +3613,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<string>;
         default: string;
     };
+    loadMoreFn: {
+        type: import("vue").PropType<() => Promise<void>>;
+        default: any;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedCondition": (value: {
         label: string;
@@ -3570,6 +3639,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    infiniteLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     optionNameKey: {
         type: import("vue").PropType<string>;
         required: true;
@@ -3612,6 +3685,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<string>;
         default: string;
     };
+    loadMoreFn: {
+        type: import("vue").PropType<() => Promise<void>>;
+        default: any;
+    };
 }>> & {
     onClear?: () => any;
     "onUpdate:selectedCondition"?: (value: {
@@ -3624,9 +3701,11 @@ declare const DropdownTypes: () => (({
     label: string;
     testId: string;
     isOpen: boolean;
+    infiniteLoading: boolean;
     optionNameKey: string;
     comparingKey: string;
     minCharsToStart: number;
     searchQuery: string;
+    loadMoreFn: () => Promise<void>;
 }>)[];
 export { Dropdown, DefaultDropdownTrigger, IconButtonDropdownTrigger, ChipDropdownTrigger, ButtonDropdownTrigger, ButtonFilterDropdownTrigger, AppDropdownTrigger, DropdownTypes, Option, TreeDropdown, ConditionalDropdown, };

package/components/table/common/Table.common.js

@@ -1,43 +1,43 @@
-import { useSlots as G, ref as c, provide as N, computed as s, onMounted as V, nextTick as j } from "vue";
+import { useSlots as N, ref as a, provide as V, computed as l, onMounted as Y, nextTick as j } from "vue";
 import { useVirtualList as q, useInfiniteScroll as F } from "@vueuse/core";
 import { TableContext as J } from "./TableContext.js";
-const Q = 46, U = 46, tt = (e, u) => {
-  const S = G(), a = c([]);
-  N(J, {
-    onClose({ rowIndex: t, cellIndex: o, value: l } = {}) {
-      a.value = [...a.value, t], u("saveRow", {
+const Q = 46, U = 46, Z = 60, ot = (e, d) => {
+  const y = N(), u = a([]);
+  V(J, {
+    onClose({ rowIndex: t, cellIndex: o, value: s } = {}) {
+      u.value = [...u.value, t], d("saveRow", {
         rowIndex: t,
         cellIndex: o,
-        value: l,
+        value: s,
         confirm: () => {
-          a.value = a.value.filter((n) => n !== t);
+          u.value = u.value.filter((n) => n !== t);
         }
       });
     },
     setActiveMenuRow(t) {
-      x.value = t;
+      T.value = t;
     }
   });
-  const y = s(() => !!e.selection), C = s(() => {
-    const t = (y.value ? `${U}px ` : "") + (g.value ? `${Q}px ` : "");
-    return e.columns.reduce((o, l) => {
-      const n = l.width ? `${l.width}px` : `${l.colSpan || 1}fr`;
-      return `${o} ${n}`;
+  const C = l(() => !!e.selection), H = () => e.isSelectionSticky ? Z : U, b = l(() => {
+    const t = (C.value ? `${H()}px ` : "") + (g.value ? `${Q}px ` : "");
+    return e.columns.reduce((o, { width: s, colSpan: n }) => {
+      const r = typeof s == "number" ? `${s}px` : s, m = r || `${n || 1}fr`;
+      return `${o} ${m}`;
     }, t);
-  }), g = s(() => !!S.expanded), A = c(null), x = c(null), R = s(() => Array(e.loadingRowCount).fill(
+  }), g = l(() => !!y.expanded), k = a(null), T = a(null), x = l(() => Array(e.loadingRowCount).fill(
     Array(e.columns.length).fill("")
-  )), H = s(() => e.rows.length && Array.isArray(e.rows[0]) ? e.isLoading ? [...e.rows, ...R.value] : e.rows : e.isLoading ? [
+  )), A = l(() => e.rows.length && Array.isArray(e.rows[0]) ? e.isLoading ? [...e.rows, ...x.value] : e.rows : e.isLoading ? [
     ...e.rows.map((o) => o[e.rowDataKey]),
-    ...R.value
-  ] : e.rows.map((o) => o[e.rowDataKey])), { list: T, containerProps: i, wrapperProps: $, scrollTo: b } = q(
-    H,
+    ...x.value
+  ] : e.rows.map((o) => o[e.rowDataKey])), { list: R, containerProps: i, wrapperProps: I, scrollTo: O } = q(
+    A,
     {
       itemHeight: g.value ? (t) => w[t] ?? e.rowHeight : e.rowHeight
     }
-  ), k = c(null), h = c(0), B = s(() => !!S.search), I = (t) => {
-    i.onScroll(), h.value = t.target.scrollLeft + t.target.getBoundingClientRect().width, u("onScroll", t.target.scrollTop);
+  ), $ = a(null), h = a(0), B = l(() => !!y.search), L = (t) => {
+    i.onScroll(), h.value = t.target.scrollLeft + t.target.getBoundingClientRect().width, d("onScroll", t.target.scrollTop);
   };
-  V(() => {
+  Y(() => {
     h.value = i.ref.value?.getBoundingClientRect().width, e.defaultScrollPosition && setTimeout(() => {
       i.ref.value?.scrollTo({
         top: e.defaultScrollPosition,
@@ -45,79 +45,79 @@ const Q = 46, U = 46, tt = (e, u) => {
       });
     }, 300);
   });
-  const O = s(() => {
-    const [t] = T.value;
+  const P = l(() => {
+    const [t] = R.value;
     return t && t.index > 0;
-  }), P = s(() => i.style), L = s(() => e.columns.reduce((t, o) => (o.isSticky && (t[o.id] = M(o)), t), {}));
+  }), E = l(() => i.style), _ = l(() => e.columns.reduce((t, o) => (o.isSticky && (t[o.id] = W(o)), t), {}));
   F(
     i.ref,
     () => {
-      e.isInfiniteScroll && u("loadMore");
+      e.isInfiniteScroll && d("loadMore");
     },
     { distance: e.infiniteScrollThreshold }
   );
-  function E() {
+  function D() {
     i.ref.value?.scrollTo({
       top: 0,
       behavior: "smooth"
     });
   }
-  function D(t) {
+  function K(t) {
     if (!e.sort)
       return;
     const o = e.sort.sortBy === t.id;
     if (!(t.isSortable || t.isSortable === void 0))
       return;
-    let n = e.sort.sortOrder, f = e.sort.sortBy;
-    o ? n = e.sort.sortOrder === "asc" ? "desc" : "asc" : f = t.id, u("update:sort", { sortBy: f, sortOrder: n });
+    let n = e.sort.sortOrder, r = e.sort.sortBy;
+    o ? n = e.sort.sortOrder === "asc" ? "desc" : "asc" : r = t.id, d("update:sort", { sortBy: r, sortOrder: n });
   }
-  function M(t) {
-    const { isSticky: o, width: l } = t;
-    if (!o || !l)
+  function W(t) {
+    const { isSticky: o, width: s } = t;
+    if (!o || !s)
       return null;
-    const n = e.columns.findIndex((r) => r.id === t.id), f = e.columns.reduce((r, v, m) => m < n ? r + v.width : r, 0), z = e.columns.reduce((r, v, m) => m > n ? r + v.width : r, 0);
+    const n = e.columns.findIndex((c) => c.id === t.id), r = e.columns.reduce((c, v, S) => S < n ? c + v.width : c, 0), m = e.columns.reduce((c, v, S) => S > n ? c + v.width : c, 0);
     return {
-      ...t.isStickyRight ? { right: `${z}px` } : { left: `${f}px` },
+      ...t.isStickyRight ? { right: `${m}px` } : { left: `${r}px` },
       zIndex: 1
     };
   }
-  const d = c([]), w = {}, _ = (t) => d.value.includes(t), K = async (t, o) => {
-    const l = d.value.indexOf(t);
-    if (l === -1) {
-      d.value.push(t);
+  const f = a([]), w = {}, M = (t) => f.value.includes(t), X = async (t, o) => {
+    const s = f.value.indexOf(t);
+    if (s === -1) {
+      f.value.push(t);
       const n = o.target.closest("tr");
       await j(), n && (w[t] = n.offsetHeight);
     } else
-      d.value.splice(l, 1), delete w[t];
-  }, W = s(() => `${e.rowHeight}px`), X = s(
+      f.value.splice(s, 1), delete w[t];
+  }, z = l(() => `${e.rowHeight}px`), G = l(
     () => `1 / span ${e.columns.length + 1}`
   );
   return {
-    list: T,
+    list: R,
     containerProps: i,
-    wrapperProps: $,
-    activeRow: A,
-    gridColumnTemplate: C,
-    floatingActionRef: k,
-    scrollToTop: E,
-    toggleSortOrder: D,
-    columnsStickyPositions: L,
+    wrapperProps: I,
+    activeRow: k,
+    gridColumnTemplate: b,
+    floatingActionRef: $,
+    scrollToTop: D,
+    toggleSortOrder: K,
+    columnsStickyPositions: _,
     hasSearchSlot: B,
-    showBackToTopButton: O,
-    containerStyle: P,
-    onScroll: I,
-    scrollTo: b,
-    savingRows: a,
+    showBackToTopButton: P,
+    containerStyle: E,
+    onScroll: L,
+    scrollTo: O,
+    savingRows: u,
     floatingActionPosition: h,
     hasExpandSlot: g,
-    hasCheckboxes: y,
-    toggleExpandRow: K,
-    isRowExpanded: _,
-    cssRowHeight: W,
-    cssExpandGridCol: X,
-    activeMenuRow: x
+    hasCheckboxes: C,
+    toggleExpandRow: X,
+    isRowExpanded: M,
+    cssRowHeight: z,
+    cssExpandGridCol: G,
+    activeMenuRow: T
   };
 };
 export {
-  tt as tableCommon
+  ot as tableCommon
 };

package/components/table/common/Table.types.d.ts

@@ -7,7 +7,7 @@ export type Column = {
     isBordered?: boolean;
     isSortable?: boolean;
     colSpan?: number;
-    width?: number;
+    width?: number | string;
     isTextRight?: boolean;
     isStickyRight?: boolean;
     helpText?: string;

package/components/table/v3/Table.vue.d.ts

@@ -67,10 +67,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     defaultScrollPosition: any;
     testId: string;
 }>>> & {
+    onLoadMore?: () => any;
     onOnScroll?: (event: Event) => any;
     "onUpdate:sort"?: (newSort: Sort) => any;
     onSaveRow?: (args_0: SaveRowEvent) => any;
-    onLoadMore?: () => any;
 }, {
     testId: string;
     isLoading: boolean;