@ironsource/shared-ui 2.1.11-rc.47 → 2.1.11-rc.49

package/Chart.vue_vue_type_style_index_0_scoped_277fde76_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-277fde76]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px;border-radius:0 0 6px 6px;width:100%}.header-wrapper[data-v-277fde76]{height:76px}.chart-content[data-v-277fde76]{width:100%}.chart-content.with-legend[data-v-277fde76]{width:calc(100% - 221px)}.chart-sidebar[data-v-277fde76]{border-left:1px solid var(--common-divider)}.chart[data-v-277fde76]{width:100%;height:312px;position:relative}.chart__canvas[data-v-277fde76]{width:100%;height:100%}.chart__tooltip[data-v-277fde76]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}

package/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_e43ac1c9_lang.css

@@ -0,0 +1 @@
+.chip-trigger[data-v-e43ac1c9]{border:1px solid var(--default-outlined-border);padding:.3125rem .3125rem .3125rem .4375rem;border-radius:100px;cursor:pointer;user-select:none;display:inline-flex;max-width:250px}.chip-trigger[data-v-e43ac1c9]:hover{border-color:var(--action-active);background:var(--action-selected)}.chip-trigger.active[data-v-e43ac1c9]{border:none;background:var(--primary-light);padding:.375rem .375rem .375rem .5rem}.chip-trigger.active .chip-trigger--content[data-v-e43ac1c9]{color:var(--primary-contrast-text)}.chip-trigger.active[data-v-e43ac1c9]:hover{border:.0625rem solid var(--primary-main-50-p);padding:.3125rem .3125rem .3125rem .4375rem}.chip-trigger.open[data-v-e43ac1c9]{border:.125rem solid var(--action-active);padding:.25rem .25rem .25rem .375rem;background:var(--action-selected)}.chip-trigger.open.active[data-v-e43ac1c9]{border:.125rem solid var(--primary-main-50-p);background:var(--primary-light);padding:.25rem .25rem .25rem .375rem}.chip-trigger.disabled[data-v-e43ac1c9]{cursor:auto}.chip-trigger--content[data-v-e43ac1c9]{color:var(--text-primary);display:flex;width:100%}.chip-trigger--content .x-circle-wrapper[data-v-e43ac1c9]{margin-left:4px;color:var(--primary-dark)}.chip-trigger--content .x-circle-wrapper[data-v-e43ac1c9]:hover{color:var(--primary-darker)}.chip-trigger--text[data-v-e43ac1c9]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%}.chip-trigger--suffix[data-v-e43ac1c9]{white-space:nowrap}.chip-trigger--icon[data-v-e43ac1c9]{margin-left:4px;color:var(--action-active)}

package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_8f96cf5a_lang.css

@@ -0,0 +1 @@
+.custom-list-area[data-v-8f96cf5a]{color:var(--text-secondary);width:100%;text-align:center;box-sizing:border-box;padding:63px 43px}.inline-search[data-v-8f96cf5a]{width:100%}.contain-accept[data-v-8f96cf5a]{padding:6px 8px;margin-bottom:4px;cursor:pointer}.contain-accept[data-v-8f96cf5a]:hover{background-color:var(--action-hover);border-radius:.5rem}.contain-accept--query[data-v-8f96cf5a]{margin-left:4px;display:inline-flex;color:var(--primary-main)}

package/DataGrid.vue_vue_type_style_index_0_scoped_26488faf_lang.css

@@ -0,0 +1 @@
+.sticky[data-v-26488faf]{position:sticky}.table-container[data-v-26488faf]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-26488faf]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-26488faf]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-26488faf]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-26488faf]{width:13.75rem}.table-header.isStickyHeader[data-v-26488faf]{z-index:calc(var(--7552e08c) + 3);top:0}.table-head-container[data-v-26488faf]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-26488faf]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-26488faf]{display:inline-table}.table-header-actions[data-v-26488faf]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-26488faf]{position:relative}.table-row.loading[data-v-26488faf]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-26488faf]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-26488faf]{border-bottom:none}.expanded-row[data-v-26488faf]{grid-column:var(--7f4c0eae);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-26488faf]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md);border-collapse:collapse;border-spacing:0}table.hasFooter[data-v-26488faf]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-26488faf],table th[data-v-26488faf]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-26488faf]:first-of-type,table th[data-v-26488faf]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-26488faf]:last-of-type,table th[data-v-26488faf]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-26488faf],table th.expand-toggle-cell[data-v-26488faf]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-26488faf]{border-bottom:none;z-index:calc(var(--7552e08c) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-26488faf]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--b761a3b2)}table>thead>tr>th[data-v-26488faf]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-26488faf]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-26488faf]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-26488faf]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-26488faf]{cursor:pointer}table>thead.sticky[data-v-26488faf]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-26488faf]{z-index:calc(var(--7552e08c) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-26488faf]{display:block}table>tbody>*>tr[data-v-26488faf]{background-color:var(--background-default);min-height:var(--79122e22);height:auto;display:grid;align-items:center;grid-template-columns:var(--b761a3b2)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-26488faf]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-26488faf],table>tbody>*>tr.activeMenu>td[data-v-26488faf]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-26488faf]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--79122e22);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-26488faf]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-26488faf]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-26488faf]{justify-content:flex-end;text-align:right}.section-container[data-v-26488faf]{left:0}.sections[data-v-26488faf]{display:flex}.section[data-v-26488faf]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-26488faf]{width:100%}.empty-state[data-v-26488faf]{min-height:250px}.floating-row[data-v-26488faf]{display:flex;inset:0;pointer-events:none;position:absolute;z-index:calc(var(--7552e08c) + 1)}.floating-row *[data-v-26488faf-s]{pointer-events:auto}

package/DropdownV4.vue_vue_type_style_index_0_scoped_75002075_lang.css

@@ -0,0 +1 @@
+.v-enter-active[data-v-75002075],.v-leave-active[data-v-75002075]{transition:opacity .25s ease}ol[data-v-75002075],ul[data-v-75002075],menu[data-v-75002075]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-75002075],.dropdown.full-width .button__container[data-v-75002075]{width:100%}.dropdown-list-wrapper[data-v-75002075]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-75002075]{padding:.5rem}.list-container--multi[data-v-75002075]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-75002075]{display:flex;gap:4px;padding-bottom:.25rem}.inline-search .inline-search-wrapper .search-container[data-v-75002075]{width:100%}.inline-search .list-container[data-v-75002075]{padding-top:0}.no-result-container[data-v-75002075]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-75002075]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-75002075]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-75002075]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.list--with-conditions[data-v-75002075]{min-height:0;margin-bottom:0}.image-slot[data-v-75002075]{margin-right:.5rem}.actions-wrapper[data-v-75002075]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-75002075]{margin-left:.5rem}

package/TreeDropdown.vue_vue_type_style_index_0_scoped_b883d1fa_lang.css

@@ -0,0 +1 @@
+.child-options[data-v-b883d1fa]{padding-left:1rem}.tree-search[data-v-b883d1fa]{width:100%}

package/components/chart/Chart.vue.d.ts

@@ -19,6 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     noDataSubtitle?: string;
     withSettingsHeader?: boolean;
     maxLimitTooltipText?: string;
+    withAnimation?: boolean;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -40,6 +41,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     withSettingsHeader: boolean;
     withSubheaderTooltip: boolean;
     maxLimitTooltipText: string;
+    withAnimation: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (chartType: ChartType) => void;
     "update:visibleIds": (visibleIds: unknown[]) => void;
@@ -63,6 +65,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     noDataSubtitle?: string;
     withSettingsHeader?: boolean;
     maxLimitTooltipText?: string;
+    withAnimation?: boolean;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -84,6 +87,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     withSettingsHeader: boolean;
     withSubheaderTooltip: boolean;
     maxLimitTooltipText: string;
+    withAnimation: boolean;
 }>>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
     "onUpdate:chartType"?: (chartType: ChartType) => any;
@@ -107,6 +111,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
+    withAnimation: boolean;
 }>, {
     metric?(_: {}): any;
     breakdowns?(_: {}): any;

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
 import o from "./Chart.vue2.js";
-/* empty css            */import _ from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Chart.vue_vue_type_style_index_0_scoped_04b9d6b3_lang.css"; //*');
-const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-04b9d6b3"]]);
+/* empty css            */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Chart.vue_vue_type_style_index_0_scoped_277fde76_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-277fde76"]]);
 export {
   p as default
 };

package/components/chart/Chart.vue2.js

@@ -1,23 +1,23 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_04b9d6b3_lang.css"; import { defineComponent as j, ref as g, computed as l, onMounted as q, watch as T, nextTick as J, openBlock as d, createElementBlock as C, Fragment as O, createBlock as h, unref as u, isRef as D, withCtx as k, renderSlot as x, createCommentVNode as v, createElementVNode as p, normalizeClass as Q, createVNode as F, normalizeStyle as Y } from "vue";
-import { useVModel as _ } from "@vueuse/core";
-import { Chart as N, ArcElement as ee, LineElement as te, BarElement as ae, PointElement as oe, LineController as ie, BarController as le, PieController as re, ScatterController as ne, CategoryScale as se, LinearScale as de, Filler as ue, Tooltip as ce } from "chart.js";
-import { HoverVerticalLine as pe } from "./plugins/HoverVerticalLine.js";
-import { formatValue as H, calcStepSize as me } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as fe, DEFAULT_MIN_VISIBLE as he, DEFAULT_MAX_VISIBLE as ve, COLOR_PALETTE as ye, POINT_BORDER_COLOR as be, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as U, GRID_LINE_COLOR as z } from "./consts.js";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_277fde76_lang.css"; import { defineComponent as q, computed as l, ref as g, onMounted as J, watch as T, nextTick as Q, openBlock as d, createElementBlock as C, Fragment as O, createBlock as f, unref as u, isRef as D, withCtx as k, renderSlot as x, createCommentVNode as v, createElementVNode as p, normalizeClass as Y, createVNode as F, normalizeStyle as _ } from "vue";
+import { useVModel as ee } from "@vueuse/core";
+import { Chart as N, ArcElement as te, LineElement as ae, BarElement as oe, PointElement as ie, LineController as le, BarController as re, PieController as ne, ScatterController as se, CategoryScale as de, LinearScale as ue, Filler as ce, Tooltip as pe } from "chart.js";
+import { HoverVerticalLine as me } from "./plugins/HoverVerticalLine.js";
+import { formatValue as H, calcStepSize as he } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as fe, DEFAULT_MIN_VISIBLE as ve, DEFAULT_MAX_VISIBLE as ye, COLOR_PALETTE as be, POINT_BORDER_COLOR as ge, TICK_LABEL_COLOR as U, TICK_LABEL_FONT as P, GRID_LINE_COLOR as z } from "./consts.js";
 import { ChartType as n } from "./types.js";
-import { useTooltipPosition as ge } from "./composables/useTooltipPosition.js";
-import Te from "./ChartTooltip.vue.js";
-import Ce from "./ChartLegend.vue.js";
-import ke from "./ChartHeader.vue.js";
-import { hexColorToRgba as xe } from "../../utils/color.js";
-import { useChartValues as Le } from "./composables/useChartValues.js";
-import Se from "./ChartLoader.vue.js";
-import we from "../emptyState/v4/EmptyStateV4.vue.js";
-import Be from "./SettingsHeader.vue.js";
-const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee = { class: "chart" }, Re = {
+import { useTooltipPosition as Te } from "./composables/useTooltipPosition.js";
+import Ce from "./ChartTooltip.vue.js";
+import ke from "./ChartLegend.vue.js";
+import xe from "./ChartHeader.vue.js";
+import { hexColorToRgba as Le } from "../../utils/color.js";
+import { useChartValues as Se } from "./composables/useChartValues.js";
+import we from "./ChartLoader.vue.js";
+import Be from "../emptyState/v4/EmptyStateV4.vue.js";
+import Ie from "./SettingsHeader.vue.js";
+const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve = { class: "chart" }, Re = {
   key: 0,
   class: "chart-sidebar"
-}, je = /* @__PURE__ */ j({
+}, qe = /* @__PURE__ */ q({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
@@ -31,20 +31,20 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
     subheader: { default: "" },
     withSubheaderTooltip: { type: Boolean, default: !1 },
     hideLegend: { type: Boolean, default: !1 },
-    minVisible: { default: he },
-    maxVisible: { default: ve },
+    minVisible: { default: ve },
+    maxVisible: { default: ye },
     loading: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-x" },
     noDataTitle: { default: "No data to display" },
     noDataSubtitle: { default: "Search again with different filters" },
     withSettingsHeader: { type: Boolean, default: !0 },
-    maxLimitTooltipText: { default: "" }
+    maxLimitTooltipText: { default: "" },
+    withAnimation: { type: Boolean, default: !0 }
   },
   emits: ["update:chartType", "update:visibleIds"],
   setup(a, { emit: L }) {
     const t = a;
     N.register(
-      ee,
       te,
       ae,
       oe,
@@ -56,30 +56,33 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
       de,
       ue,
       ce,
-      pe
+      pe,
+      me
     );
-    const c = _(t, "chartType", L), m = g(null);
+    const c = ee(t, "chartType", L), M = l(
+      () => t.withAnimation ? "" : "none"
+    ), m = g(null);
     let s = null;
     const S = l(() => t.dataSets.length === 0), w = l(() => !t.loading && !S.value), y = () => {
       m.value && (s && s.destroy(), s = new N(m.value, I.value));
-    }, M = () => {
-      s && (s.data.datasets = b.value, s.options = I.value.options, s.update());
+    }, $ = () => {
+      s && (s.data.datasets = b.value, s.options = I.value.options, s.update(M.value));
     };
-    q(y), T(() => t.chartType, y), T(w, async (e) => {
-      e && (await J(), y());
-    }), T([() => t.visibleIds, () => t.dataSets], M);
-    const f = l(
+    J(y), T(() => t.chartType, y), T(w, async (e) => {
+      e && (await Q(), y());
+    }), T([() => t.visibleIds, () => t.dataSets], $);
+    const h = l(
       () => t.chartType === n.StackedLine || t.chartType === n.StackedBar
-    ), $ = l(
+    ), K = l(
       () => t.chartType === n.Line || t.chartType === n.StackedLine
     ), B = l(
       () => t.dataSets.filter((e) => t.visibleIds.includes(e.id))
     ), b = l(() => B.value.map((e, o) => {
-      const i = e.color || ye[o] || "#000000";
+      const i = e.color || be[o] || "#000000";
       return {
         ...e,
-        fill: f.value ? "start" : void 0,
-        backgroundColor: xe(
+        fill: h.value ? "start" : void 0,
+        backgroundColor: Le(
           i,
           t.chartType === n.StackedLine ? 10 : 70
         ),
@@ -111,7 +114,7 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
           plugins: {
             legend: { display: !1 },
             title: { display: !1 },
-            hoverVerticalLine: $.value,
+            hoverVerticalLine: K.value,
             // tooltip
             tooltip: {
               enabled: !1,
@@ -121,7 +124,7 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
               },
               callbacks: {
                 footer: (e) => {
-                  const o = e.reduce((i, X) => i + (X.parsed.y || 0), 0);
+                  const o = e.reduce((i, j) => i + (j.parsed.y || 0), 0);
                   return ["Total", String(o)];
                 }
               }
@@ -149,7 +152,7 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
               borderWidth: 0,
               hoverRadius: 4,
               hoverBorderWidth: 2,
-              pointHoverBackgroundColor: be
+              pointHoverBackgroundColor: ge
             },
             bar: {
               borderRadius: 4
@@ -160,12 +163,12 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
             x: {
               beginAtZero: !0,
               border: { display: !1 },
-              stacked: f.value,
+              stacked: h.value,
               // stack on top of each other
               // ticks
               ticks: {
-                color: P,
-                font: U,
+                color: U,
+                font: P,
                 padding: 4,
                 callback: function(e) {
                   return H(
@@ -188,16 +191,16 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
               beginAtZero: !0,
               border: { display: !1 },
               // hide left borderline
-              stacked: f.value,
+              stacked: h.value,
               // stack on top of each other
               // ticks
               ticks: {
-                color: P,
-                font: U,
+                color: U,
+                font: P,
                 padding: 8,
-                stepSize: V.value,
-                min: R.value,
-                max: V.value * t.tickCount,
+                stepSize: R.value,
+                min: V.value,
+                max: R.value * t.tickCount,
                 callback: (e) => H(e, t.yAxisFormat)
               },
               // grid lines
@@ -210,32 +213,32 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
           }
         }
       })
-    ), K = l(
+    ), W = l(
       () => b.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
-    ), W = l(() => t.dataSets.map((e) => ({
+    ), Z = l(() => t.dataSets.map((e) => ({
       id: e.id,
       label: e.label,
       caption: e.caption || null,
-      color: K.value[e.id] || null,
+      color: W.value[e.id] || null,
       icon: e.icon || null,
       iconType: e.iconType || "branded"
-    }))), A = g(null), r = g(null), { position: E } = ge(
+    }))), A = g(null), r = g(null), { position: E } = Te(
       m,
       A,
       r
-    ), Z = l(() => ({
+    ), G = l(() => ({
       left: `${E.value.left}px`,
       top: `${E.value.top}px`,
       opacity: r.value?.opacity || 0
-    })), { minValue: R, maxValue: G } = Le({
+    })), { minValue: V, maxValue: X } = Se({
       parsingConfig: t.parsing,
       dataSets: B,
-      isStacked: f
-    }), V = l(
-      () => me(R.value, G.value, t.tickCount)
+      isStacked: h
+    }), R = l(
+      () => he(V.value, X.value, t.tickCount)
     );
     return (e, o) => (d(), C(O, null, [
-      a.withSettingsHeader ? (d(), h(Be, {
+      a.withSettingsHeader ? (d(), f(Ie, {
         key: 0,
         "chart-type": u(c),
         "onUpdate:chart-type": o[0] || (o[0] = (i) => D(c) ? c.value = i : null),
@@ -249,13 +252,13 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
         ]),
         _: 3
       }, 8, ["chart-type", "hide-legend"])) : v("", !0),
-      p("div", Ie, [
+      p("div", Ae, [
         u(w) ? (d(), C(O, { key: 0 }, [
           p("section", {
-            class: Q(["chart-content", [{ "with-legend": !a.hideLegend }]])
+            class: Y(["chart-content", [{ "with-legend": !a.hideLegend }]])
           }, [
-            p("div", Ae, [
-              F(ke, {
+            p("div", Ee, [
+              F(xe, {
                 "chart-type": u(c),
                 "onUpdate:chart-type": o[1] || (o[1] = (i) => D(c) ? c.value = i : null),
                 "with-settings-header": a.withSettingsHeader,
@@ -269,7 +272,7 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
                 _: 3
               }, 8, ["chart-type", "with-settings-header", "header", "subheader", "with-subheader-tooltip"])
             ]),
-            p("div", Ee, [
+            p("div", Ve, [
               p("canvas", {
                 ref_key: "chartRef",
                 ref: m,
@@ -279,9 +282,9 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
                 ref_key: "tooltipRef",
                 ref: A,
                 class: "chart__tooltip",
-                style: Y(u(Z))
+                style: _(u(G))
               }, [
-                r.value ? (d(), h(Te, {
+                r.value ? (d(), f(Ce, {
                   key: 0,
                   title: String(r.value.title),
                   "data-points": r.value.dataPoints,
@@ -294,14 +297,14 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
             ])
           ], 2),
           a.hideLegend ? v("", !0) : (d(), C("section", Re, [
-            F(Ce, {
-              items: u(W),
+            F(ke, {
+              items: u(Z),
               "visible-ids": a.visibleIds,
               "max-limit-tooltip-text": a.maxLimitTooltipText,
               "onUpdate:visibleIds": o[2] || (o[2] = (i) => L("update:visibleIds", i))
             }, null, 8, ["items", "visible-ids", "max-limit-tooltip-text"])
           ]))
-        ], 64)) : a.loading ? (d(), h(Se, { key: 1 })) : u(S) ? (d(), h(u(we), {
+        ], 64)) : a.loading ? (d(), f(we, { key: 1 })) : u(S) ? (d(), f(u(Be), {
           key: 2,
           title: a.noDataTitle,
           subtitle: a.noDataSubtitle,
@@ -312,5 +315,5 @@ const Ie = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee =
   }
 });
 export {
-  je as default
+  qe as default
 };

package/components/chart/index.d.ts

@@ -23,6 +23,7 @@ declare const ChartTypes: () => ({
             noDataIcon: string;
             noDataTitle: string;
             noDataSubtitle: string;
+            withAnimation: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             header: {
                 type: import("vue").PropType<string>;
@@ -102,10 +103,14 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            withAnimation: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
             "onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "chartType" | "withSettingsHeader" | "subheader" | "withSubheaderTooltip" | "dataSets" | "hideLegend" | "tickCount" | "noDataIcon" | "noDataTitle" | "noDataSubtitle">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "chartType" | "withSettingsHeader" | "subheader" | "withSubheaderTooltip" | "dataSets" | "hideLegend" | "tickCount" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -198,6 +203,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            withAnimation: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
             "onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
@@ -224,6 +233,7 @@ declare const ChartTypes: () => ({
             noDataIcon: string;
             noDataTitle: string;
             noDataSubtitle: string;
+            withAnimation: boolean;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -323,6 +333,10 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        withAnimation: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
         "onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
@@ -409,6 +423,10 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    withAnimation: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
     "onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
@@ -435,6 +453,7 @@ declare const ChartTypes: () => ({
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
+    withAnimation: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         metric?(_: {}): any;

package/components/dropdown/common/Dropdown.common.js

@@ -1,17 +1,17 @@
 import { useToggle as _e } from "../../../composables/useToggle.js";
 import { inject as Ve, ref as r, computed as c, watch as b, useSlots as ke, toRaw as P, nextTick as K, provide as Ge, onMounted as Le } from "vue";
 import { isObjectInArray as ae } from "../../../utils/array.js";
-import { objectsEqual as Be } from "../../../utils/object.js";
-import { useClamp as He, useVirtualList as Ue, onClickOutside as ne, useInfiniteScroll as qe } from "@vueuse/core";
+import { objectsEqual as Ue } from "../../../utils/object.js";
+import { useClamp as Be, useVirtualList as He, onClickOutside as ne, useInfiniteScroll as qe } from "@vueuse/core";
 import { Mode as T, Type as L, DropdownContext as Xe } from "./DropdownContext.js";
 import { pxToRem as $e } from "../../../utils/style.js";
 import { useEditableContext as je } from "../../table-cells/common/EditableContext.js";
 import { useGroupedOptions as ze } from "./useGroupedOptions.js";
-const tl = (l, f, g) => {
-  const B = Ve("isTreeDropdown", !1), {
-    sortOutGroups: H,
+const tl = (l, v, g) => {
+  const U = Ve("isTreeDropdown", !1), {
+    sortOutGroups: B,
     flattenAndMarkGroupOptions: ue,
-    isGroup: U,
+    isGroup: H,
     selectAllWithGroups: ie,
     isIndeterminateGrouped: re,
     allSelectedGrouped: q,
@@ -30,7 +30,7 @@ const tl = (l, f, g) => {
       return R?.value?.value ?? a.value;
     },
     set(e) {
-      R.onChange?.(e), R.onClose?.(), f("update:selected", e);
+      R.onChange?.(e), R.onClose?.(), v("update:selected", e);
     }
   });
   b(
@@ -56,9 +56,9 @@ const tl = (l, f, g) => {
       return l.isOpen;
     },
     set(e) {
-      f("update:isOpen", e);
+      v("update:isOpen", e);
     }
-  }), Oe = c(() => o.value.length - 1), v = He(0, 0, Oe), Z = c(() => n.value ? l.displayValue(n.value) : ""), Se = (e) => {
+  }), Oe = c(() => o.value.length - 1), f = Be(0, 0, Oe), Z = c(() => n.value ? l.displayValue(n.value) : ""), Se = (e) => {
     if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
       return l.placeholder;
     const t = !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${l.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${l.multiOptionsPlaceholderSuffix ?? ""}`;
@@ -92,13 +92,13 @@ const tl = (l, f, g) => {
       ) > -1 : d.value.includes(i)) ? "selected" : "notSelected";
       e[u].push(i);
     });
-    const t = l.groupedOptions ? H(e.notSelected) : e.notSelected;
+    const t = l.groupedOptions ? B(e.notSelected) : e.notSelected;
     return [].concat(e.selected, t);
   }), o = c(() => {
-    const e = Array.isArray(d.value) && l.multi && g.VERSION === 4 && !B ? be.value : N.value;
+    const e = Array.isArray(d.value) && l.multi && g.VERSION === 4 && !U ? be.value : N.value;
     if (l.onSearch) {
-      const t = e.filter((i) => l.groupedOptions && U(i) ? i : l.onSearch(i, h.value));
-      return l.groupedOptions ? H(t) : t;
+      const t = e.filter((i) => l.groupedOptions && H(i) ? i : l.onSearch(i, h.value));
+      return l.groupedOptions ? B(t) : t;
     } else
       return e;
   }), Pe = c(() => y.value[0]?.hasSubtitle), F = c(() => s.mode === T.Multi), p = c(
@@ -108,7 +108,7 @@ const tl = (l, f, g) => {
     containerProps: V,
     wrapperProps: Te,
     scrollTo: C
-  } = Ue(o, {
+  } = He(o, {
     itemHeight: p.value,
     overscan: l.disableVirtualScroll ? 1 / 0 : 2
   });
@@ -120,20 +120,20 @@ const tl = (l, f, g) => {
   ), b([x], async () => {
     await K();
   }), b(
-    [O, v, x],
+    [O, f, x],
     async ([e], [t]) => {
       O.value && (await K(), x.value !== -1 && e !== t && setTimeout(() => {
         l.multi && g.VERSION === 4 || C(x.value);
-      }), v.value && setTimeout(() => {
-        C(v.value);
+      }), f.value && setTimeout(() => {
+        C(f.value);
       }));
     }
   ), b(h, () => {
-    f("onsearch", h.value), C(0);
+    v("onsearch", h.value), C(0);
   });
   const A = (e, t = !1) => {
     l.disabled || (Y(e), K(() => {
-      O.value && f("opened"), O.value || f("closed"), w.value && t && w.value.focus();
+      O.value && v("opened"), O.value || v("closed"), w.value && t && w.value.focus();
     }));
   };
   b(O, (e) => {
@@ -158,12 +158,12 @@ const tl = (l, f, g) => {
         }
         a.value = o.value;
       }
-      f("selectAll");
+      v("selectAll");
     }
   }, Ie = () => {
     we(), g.VERSION !== 4 && (n.value = a.value);
   }, xe = (e = !0) => {
-    a.value = [], e && (n.value = [], d.value = []), f("clear");
+    a.value = [], e && (n.value = [], d.value = []), v("clear");
   }, k = (e, t) => {
     if (e = P(e), g.VERSION === 4 ? e[l.disabledOptionKey] : y.value[t]?.disabled)
       return;
@@ -181,14 +181,14 @@ const tl = (l, f, g) => {
     if (ae(S, e) || l.comparingKey && S.findIndex(
       (u) => u[l.comparingKey] === e[l.comparingKey]
     ) > -1) {
-      a.value = S.filter((u) => l.comparingKey ? u[l.comparingKey] !== e[l.comparingKey] : !Be(u, e));
+      a.value = S.filter((u) => l.comparingKey ? u[l.comparingKey] !== e[l.comparingKey] : !Ue(u, e));
       return;
     } else {
       a.value = [...S, e];
       return;
     }
   }, De = (e) => y.value[e]?.disabled, s = {
-    activeIndex: v,
+    activeIndex: f,
     options: y,
     selectedOption: n,
     labelRef: j,
@@ -213,17 +213,17 @@ const tl = (l, f, g) => {
     goToOption: async (e) => {
       if (!O.value)
         return;
-      let t = v.value + e;
+      let t = f.value + e;
       const i = y.value.filter(
         (u) => u.disabled
       ).length, S = o.value.length - i;
       for (t > S && (t = S + 1); ; ) {
         if (!y.value[t]?.disabled) {
-          E.value = o.value[t], v.value = t;
+          E.value = o.value[t], f.value = t;
           return;
         }
-        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!De(v.value)) {
-          E.value = o.value[t], v.value = t;
+        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!De(f.value)) {
+          E.value = o.value[t], f.value = t;
           return;
         }
       }
@@ -260,13 +260,13 @@ const tl = (l, f, g) => {
   Le(async () => {
     l.autoFocus && (await K(), setTimeout(() => {
       $.value.focus();
-    })), s.goToOption(0), l.multi && !B && (l.groupedOptions ? D.value = q(
+    })), s.goToOption(0), l.multi && !U && (l.groupedOptions ? D.value = q(
       o,
       a
     ) : D.value = l.options.length === l.selected.length);
   });
   const le = () => {
-    l.multi && (D.value = M.value, n.value = a.value, Array.isArray(n.value) && (d.value = P(n.value).slice())), f("apply", n.value), f("allSelectedChanged", M.value), A(!1), Me();
+    l.multi && (D.value = M.value, n.value = a.value, Array.isArray(n.value) && (d.value = P(n.value).slice())), v("apply", n.value), v("allSelectedChanged", M.value), A(!1), Me();
   }, te = () => {
     F.value && Array.isArray(d.value) && (n.value = P(d.value).slice()), h.value = "", A(!1);
   }, Ne = (e) => {
@@ -318,7 +318,7 @@ const tl = (l, f, g) => {
             A(!0);
             return;
           }
-          k(o.value[v.value], v.value), s.mode === T.Single && !l.keepOpen && A(!1), e.preventDefault();
+          k(o.value[f.value], f.value), s.mode === T.Single && !l.keepOpen && A(!1), e.preventDefault();
           break;
         }
       }
@@ -337,10 +337,12 @@ const tl = (l, f, g) => {
   return qe(
     V.ref,
     () => {
-      !l.loadMoreLoading && l.infiniteLoading && f("loadMore");
+      !l.loadMoreLoading && l.infiniteLoading && v("loadMore");
     },
     { distance: l.infiniteScrollThreshold }
-  ), {
+  ), b(a, () => {
+    v("unsavedSelectionUpdate", a.value);
+  }), {
     onKeydown: Ce,
     location: fe,
     open: O,
@@ -363,7 +365,7 @@ const tl = (l, f, g) => {
     selectedOptionPrevious: d,
     selectedValue: Z,
     onSelect: k,
-    activeIndex: v,
+    activeIndex: f,
     onCancel: te,
     onApply: le,
     scrollTo: C,
@@ -376,7 +378,7 @@ const tl = (l, f, g) => {
     triggerRef: de,
     clearAll: J,
     onClearAllSelections: xe,
-    isGroup: U
+    isGroup: H
   };
 };
 export {