@ironsource/shared-ui 2.2.0-test.20 → 2.2.0-test.23

package/Chart.vue_vue_type_style_index_0_scoped_a4d7b67a_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-a4d7b67a]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%;overflow:hidden}.chart-planes[data-v-a4d7b67a]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-a4d7b67a]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-a4d7b67a]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-a4d7b67a]{border-left:1px solid var(--common-divider)}

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

@@ -53,6 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     withSettingsHeader?: boolean;
     extraCharts?: Record<string, unknown>[];
     colorVariant?: ColorVariant;
+    height?: string;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -99,6 +100,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     withSettingsHeader: boolean;
     extraCharts: () => any[];
     colorVariant: string;
+    height: any;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (chartType: ChartType) => void;
     "update:visibleIds": (visibleIds: unknown[]) => void;
@@ -156,6 +158,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     withSettingsHeader?: boolean;
     extraCharts?: Record<string, unknown>[];
     colorVariant?: ColorVariant;
+    height?: string;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -202,6 +205,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     withSettingsHeader: boolean;
     extraCharts: () => any[];
     colorVariant: string;
+    height: any;
 }>>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
     "onUpdate:sortSelected"?: (sortOption: unknown) => any;
@@ -209,6 +213,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     header: string;
     testId: string;
+    height: string;
     loading: boolean;
     visibleIds: unknown[];
     minVisible: number;

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
 import o from "./Chart.vue2.js";
-/* empty css            */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Chart.vue_vue_type_style_index_0_scoped_3ed9f4bc_lang.css"; //*');
-const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-3ed9f4bc"]]);
+/* empty css            */import _ from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Chart.vue_vue_type_style_index_0_scoped_a4d7b67a_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-a4d7b67a"]]);
 export {
-  c as default
+  s as default
 };

package/components/chart/Chart.vue2.js

@@ -1,4 +1,4 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_3ed9f4bc_lang.css"; import { defineComponent as P, ref as U, computed as d, openBlock as n, createElementBlock as y, Fragment as S, createBlock as D, unref as l, isRef as b, withCtx as s, renderSlot as u, createCommentVNode as A, createElementVNode as L, mergeProps as g, normalizeClass as $, createVNode as k, createSlots as M, renderList as R } from "vue";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_a4d7b67a_lang.css"; import { defineComponent as P, ref as U, computed as d, openBlock as n, createElementBlock as g, Fragment as S, createBlock as D, unref as l, isRef as b, withCtx as s, renderSlot as u, createCommentVNode as A, createElementVNode as L, mergeProps as y, normalizeClass as $, createVNode as k, createSlots as M, renderList as R } from "vue";
 import { useVModel as B } from "@vueuse/core";
 import K from "./ChartLegend.vue.js";
 import X from "./SettingsHeader.vue.js";
@@ -60,7 +60,8 @@ const at = {
     fullHeightBottomSpacing: { default: 50 },
     withSettingsHeader: { type: Boolean, default: !0 },
     extraCharts: { default: () => [] },
-    colorVariant: { default: "default" }
+    colorVariant: { default: "default" },
+    height: { default: void 0 }
   },
   emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
   setup(e, { emit: c }) {
@@ -106,19 +107,20 @@ const at = {
       dataSets: E,
       visibleIds: I,
       variant: t.colorVariant
-    }), w = d(() => t.dataSets.map((a) => ({
+    }), H = d(() => t.dataSets.map((a) => ({
       id: a.id,
       label: a.label,
       caption: a.caption || null,
       color: m.value[a.id] || null,
       icon: a.icon || null,
       iconType: a.iconType || "branded"
-    }))), { containerProps: H, eachPlaneHeight: N } = Z({
+    }))), { containerProps: w, eachPlaneHeight: N } = Z({
       chartPlanesCount: C,
       useFullHeight: t.fullHeight,
-      bottomSpacing: t.fullHeightBottomSpacing
+      bottomSpacing: t.fullHeightBottomSpacing,
+      customHeight: t.height
     }), O = et(t.testId, p);
-    return (a, i) => (n(), y(S, null, [
+    return (a, i) => (n(), g(S, null, [
       e.withSettingsHeader ? (n(), D(X, {
         key: 0,
         "chart-type": l(r),
@@ -137,14 +139,14 @@ const at = {
         ]),
         _: 3
       }, 8, ["chart-type", "hide-legend", "test-id"])) : A("", !0),
-      L("div", g({ class: "chart-container" }, {
-        ...l(H),
+      L("div", y({ class: "chart-container" }, {
+        ...l(w),
         ...l(O)[l(p).CONTAINER]
-      }, { style: { height: "100%" } }), [
+      }), [
         L("section", {
           class: $(["chart-planes", [{ "with-legend": !e.hideLegend }]])
         }, [
-          k(V, g({
+          k(V, y({
             "chart-type": l(r),
             "onUpdate:chart-type": i[1] || (i[1] = (o) => b(r) ? r.value = o : null)
           }, l(v)), M({ _: 2 }, [
@@ -156,7 +158,7 @@ const at = {
               key: "0"
             } : void 0
           ]), 1040, ["chart-type"]),
-          (n(!0), y(S, null, R(e.extraCharts, (o, T) => (n(), D(V, g({
+          (n(!0), g(S, null, R(e.extraCharts, (o, T) => (n(), D(V, y({
             key: T,
             class: "extra-chart-plane"
           }, { ...l(v), ...o }, {
@@ -167,13 +169,13 @@ const at = {
             "test-id": `${e.testId}-${l(p).EXTRA_CHART}-${T}`
           }), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge", "test-id"]))), 128))
         ], 2),
-        e.hideLegend ? A("", !0) : (n(), y("section", at, [
+        e.hideLegend ? A("", !0) : (n(), g("section", at, [
           k(K, {
             "sort-selected": l(f),
             "onUpdate:sort-selected": i[2] || (i[2] = (o) => b(f) ? f.value = o : null),
             "highlighted-id": h.value,
             "onUpdate:highlighted-id": i[3] || (i[3] = (o) => h.value = o),
-            items: l(w),
+            items: l(H),
             "visible-ids": l(I),
             "max-limit-tooltip-text": e.maxLimitTooltipText,
             "sort-options": e.sortOptions,

package/components/chart/composables/useChartHeight.d.ts

@@ -1,5 +1,5 @@
 import { UseChartHeightArgs } from '@/components/chart/types';
-export declare const useChartHeight: ({ chartPlanesCount, useFullHeight, bottomSpacing, }: UseChartHeightArgs) => {
+export declare const useChartHeight: ({ chartPlanesCount, useFullHeight, bottomSpacing, customHeight, }: UseChartHeightArgs) => {
     containerProps: import("vue").ComputedRef<Record<string, unknown>>;
     eachPlaneHeight: import("vue").ComputedRef<string>;
 };

package/components/chart/composables/useChartHeight.js

@@ -1,24 +1,25 @@
-import { ref as g, computed as o } from "vue";
-import { useElementBounding as m, useWindowScroll as f } from "@vueuse/core";
-import { useFullPageHeight as p } from "../../../composables/useFullPageHeight.js";
-import { DEFAULT_CHART_PLANE_HEIGHT as E, HEADER_HEIGHT as v, MIN_PLANE_HEIGHT as r } from "../consts.js";
-const T = ({
+import { ref as f, computed as r } from "vue";
+import { useElementBounding as m, useWindowScroll as p } from "@vueuse/core";
+import { useFullPageHeight as E } from "../../../composables/useFullPageHeight.js";
+import { DEFAULT_CHART_PLANE_HEIGHT as v, HEADER_HEIGHT as d, MIN_PLANE_HEIGHT as n } from "../consts.js";
+const I = ({
   chartPlanesCount: e,
-  useFullHeight: n,
-  bottomSpacing: i = 50
+  useFullHeight: i,
+  bottomSpacing: c = 50,
+  customHeight: o
 }) => {
-  const t = g(), { height: c } = m(t), { cssHeightValue: l } = p({
+  const t = f(), { height: l } = m(t), { cssHeightValue: u } = E({
     elem: t,
-    bottomSpacing: i
-  }), { y: s } = f(), u = o(() => n && !s.value ? l.value : E + v + "px"), h = o(() => ({
+    bottomSpacing: c
+  }), { y: s } = p(), h = r(() => o || (i && !s.value ? u.value : v + d + "px")), a = r(() => ({
     ref: t,
-    style: { height: u.value }
-  })), a = o(() => e.value === 1 ? "100%" : c.value / e.value < r ? `${r}px` : 100 / e.value + "%");
+    style: { height: h.value }
+  })), H = r(() => e.value === 1 ? "100%" : l.value / e.value < n ? `${n}px` : 100 / e.value + "%");
   return {
-    containerProps: h,
-    eachPlaneHeight: a
+    containerProps: a,
+    eachPlaneHeight: H
   };
 };
 export {
-  T as useChartHeight
+  I as useChartHeight
 };

package/components/chart/index.d.ts

@@ -7,6 +7,7 @@ declare const ChartTypes: () => ({
         $props: Partial<{
             header: string;
             testId: string;
+            height: string;
             loading: boolean;
             visibleIds: unknown[];
             minVisible: number;
@@ -59,6 +60,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            height: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             loading: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -244,7 +249,7 @@ declare const ChartTypes: () => ({
             "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
             "onUpdate:sortSelected"?: (sortOption: unknown) => any;
             "onUpdate:chartType"?: (chartType: ChartType) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "testId" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "headerTooltip" | "trendValue" | "trendDirection" | "noteText" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "indicateIncompleteData" | "tooltipExcludeTotalItem" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts" | "colorVariant">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "testId" | "height" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "headerTooltip" | "trendValue" | "trendDirection" | "noteText" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "indicateIncompleteData" | "tooltipExcludeTotalItem" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts" | "colorVariant">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -267,6 +272,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            height: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             loading: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -459,6 +468,7 @@ declare const ChartTypes: () => ({
         }, string, {
             header: string;
             testId: string;
+            height: string;
             loading: boolean;
             visibleIds: unknown[];
             minVisible: number;
@@ -531,6 +541,10 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        height: {
+            type: import("vue").PropType<string>;
+            default: any;
+        };
         loading: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -729,6 +743,10 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    height: {
+        type: import("vue").PropType<string>;
+        default: any;
+    };
     loading: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -921,6 +939,7 @@ declare const ChartTypes: () => ({
 }, string, {
     header: string;
     testId: string;
+    height: string;
     loading: boolean;
     visibleIds: unknown[];
     minVisible: number;

package/components/chart/types.d.ts

@@ -64,6 +64,7 @@ export type UseChartHeightArgs = {
     chartPlanesCount: Ref<number>;
     useFullHeight: boolean;
     bottomSpacing?: number;
+    customHeight?: string;
 };
 export type HexColor = `#${string}`;
 export type DataSetConfig = ChartDataset<'line'> & ChartDataSet;

package/index.js

@@ -1,4 +1,4 @@
-import './IncludeExclude.vue_vue_type_style_index_0_scoped_cc2adbf5_lang.css';
+import './Heading.vue_vue_type_style_index_0_scoped_19878c4b_lang.css';
 import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as ao } from "./components/menuItem/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.2.0-test.20",
+  "version": "2.2.0-test.23",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -47,7 +47,8 @@
     "upload:visual": "aws s3 cp ./visual-tests s3://mobile-shared-ui-platform/visual-tests/$FOLDER  --recursive  --exclude '.gitkeep' ",
     "release": "commit-and-tag-version",
     "pw:ci": "cd e2e/playwright && BASE_URL=http://localhost:6006/ npx playwright test --reporter=list --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}",
-    "test-storybook-pw": "concurrently 'npm run storybook:dist:pw --silent' 'npx wait-on http://localhost:6006 && npm run pw:ci'  --kill-others --success first"
+    "test-storybook-pw": "concurrently 'npm run storybook:dist:pw --silent' 'npx wait-on http://localhost:6006 && npm run pw:ci'  --kill-others --success first",
+    "migrate-colors": "node scripts/migrate-colors.mjs"
   },
   "dependencies": {
     "@phosphor-icons/vue": "^2.1.6",
@@ -227,6 +228,7 @@
     "./banner": "./components/banner/Banner.vue.js",
     "./alert": "./components/alert/index.js",
     "./link": "./components/link/index.js",
+    "./helpText": "./components/helpText/index.js",
     "./multibar": "./components/multibar/index.js",
     "./typography": "./components/typography/v4/index.js",
     "./themeWrapper": "./components/ThemeWrapper/index.js",
@@ -237,7 +239,8 @@
     "./sortableList": "./components/sortableList/index.js",
     "./composables/useFormValidation": "./composables/useFormValidation.js",
     "./composables/useDateService": "./composables/useDateService.js",
-    "./utils/": "./utils/index.ts"
+    "./utils/": "./utils/index.ts",
+    "./tag": "./components/tag/index.js"
   },
   "typesVersions": {
     "*": {
@@ -454,6 +457,9 @@
       "link": [
         "./components/link/index.d.ts"
       ],
+      "helpText": [
+        "./components/helpText/index.d.ts"
+      ],
       "multibar": [
         "./components/multibar/index.d.ts"
       ],
@@ -489,6 +495,9 @@
       ],
       "composables/useDateService": [
         "./composables/useDateService.d.ts"
+      ],
+      "tag": [
+        "./components/tag/index.d.ts"
       ]
     }
   },

package/Chart.vue_vue_type_style_index_0_scoped_3ed9f4bc_lang.css

@@ -1 +0,0 @@
-.chart-container[data-v-3ed9f4bc]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%;overflow:hidden}.chart-planes[data-v-3ed9f4bc]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-3ed9f4bc]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-3ed9f4bc]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-3ed9f4bc]{border-left:1px solid var(--common-divider)}