@ironsource/shared-ui 2.1.12-rc.3 → 2.1.12-rc.30

package/components/chart/mockData.d.ts

@@ -1,30 +1,53 @@
 export declare const SINGLE_DATASET_DATE: {
+    id: string;
+    label: string;
+    data: {
+        date: string;
+        value: number;
+    }[];
+}[];
+export declare const SINGLE_DATASET_DATE_MONTHLY: {
+    id: string;
     label: string;
     data: {
         date: string;
         value: number;
     }[];
-    color: string;
 }[];
 export declare const SINGLE_DATASET_COUNTRY: {
+    id: string;
+    countryFlag: string;
     label: string;
     data: {
-        country: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
 }[];
-export declare const MULTIPLE_DATASETS_DATE: ({
+export declare const SINGLE_DATASET_APP: {
     id: string;
     label: string;
+    icon: string;
+    image: string;
+    data: {
+        app: string;
+        value: number;
+    }[];
+}[];
+export declare const MULTIPLE_DATASETS_DATE: ({
+    id: number;
+    label: string;
     caption: string;
     icon: string;
     data: {
         date: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
     iconType?: undefined;
 } | {
-    id: string;
+    id: number;
     label: string;
     caption: string;
     icon: string;
@@ -32,14 +55,30 @@ export declare const MULTIPLE_DATASETS_DATE: ({
     data: {
         date: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
 })[];
 export declare const MULTIPLE_DATASETS_SINGLE_DATE: {
-    id: string;
+    id: number;
     label: string;
     data: {
         date: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
 }[];
 export declare const generateMockData: (numSeries?: number) => any[];
+export declare const metricOptions: {
+    id: string;
+    label: string;
+}[];
+export declare const breakdownsOptions: {
+    id: string;
+    label: string;
+}[];
+export declare const LEGEND_SORTING_OPTIONS: {
+    id: string;
+    label: string;
+}[];

package/components/chart/types.d.ts

@@ -1,22 +1,29 @@
 import { Ref } from 'vue';
 import { UseVirtualListItem } from '@vueuse/core';
 import { IconTypes } from '../icon/v4/Icon.types';
-import { ChartTypeRegistry, TooltipItem } from 'chart.js';
+import { ChartDataset, ChartTypeRegistry, TooltipItem } from 'chart.js';
 export declare enum ChartType {
     Line = "line",
     Bar = "bar",
     StackedLine = "stackedLine",
     StackedBar = "stackedBar"
 }
+export declare enum DateInterval {
+    DAILY = "daily",
+    WEEKLY = "weekly",
+    MONTHLY = "monthly"
+}
 export type ChartDataRecord = Record<string, unknown>;
 export type ChartDataSet = {
     id: string | number;
     label: string;
     data: ChartDataRecord[];
     caption?: string;
-    color?: string;
+    color?: HexColor;
     icon?: string;
     iconType?: IconTypes;
+    countryFlag?: string;
+    image?: string;
 };
 export type ChartParsingConfig = {
     xAxisKey: string;
@@ -32,10 +39,7 @@ export type LegendItem = {
     iconType?: IconTypes;
 };
 export interface MyTooltipItem<T extends keyof ChartTypeRegistry = keyof ChartTypeRegistry> extends TooltipItem<T> {
-    dataset: {
-        icon?: string;
-        iconType?: IconTypes;
-    } & TooltipItem<T>['dataset'];
+    dataset: ChartDataSet & TooltipItem<T>['dataset'];
 }
 export type UseVirtualListResult = {
     list: Ref<UseVirtualListItem<LegendItem>[]>;
@@ -55,3 +59,31 @@ export type DropdownTypeOption = {
     id: ChartType;
     name: string;
 };
+export type UseChartHeightArgs = {
+    chartPlanesCount: Ref<number>;
+    useFullHeight: boolean;
+    bottomSpacing?: number;
+};
+export type HexColor = `#${string}`;
+export type DataSetConfig = ChartDataset<'line'> & ChartDataSet;
+export interface Font {
+    size: number;
+    weight: number;
+    family: string;
+}
+export type PrepareTicksLabelArgs = {
+    label: string;
+    format: ValueFormat;
+    availableSpace: number;
+    truncate?: boolean;
+};
+export declare enum TooltipOrder {
+    Legend = "legend",
+    YAxis = "yAxis"
+}
+export declare enum TrendDirection {
+    UP = "up",
+    DOWN = "down",
+    NEUTRAL = "right"
+}
+export type ColorVariant = 'default' | 'mediation';

package/components/chart/types.js

@@ -1,4 +1,7 @@
-var a = /* @__PURE__ */ ((e) => (e.Line = "line", e.Bar = "bar", e.StackedLine = "stackedLine", e.StackedBar = "stackedBar", e))(a || {});
+var e = /* @__PURE__ */ ((L) => (L.Line = "line", L.Bar = "bar", L.StackedLine = "stackedLine", L.StackedBar = "stackedBar", L))(e || {}), r = /* @__PURE__ */ ((L) => (L.DAILY = "daily", L.WEEKLY = "weekly", L.MONTHLY = "monthly", L))(r || {}), a = /* @__PURE__ */ ((L) => (L.Legend = "legend", L.YAxis = "yAxis", L))(a || {}), n = /* @__PURE__ */ ((L) => (L.UP = "up", L.DOWN = "down", L.NEUTRAL = "right", L))(n || {});
 export {
-  a as ChartType
+  e as ChartType,
+  r as DateInterval,
+  a as TooltipOrder,
+  n as TrendDirection
 };

package/components/chart/utils/formatNumber.d.ts

@@ -1,2 +1 @@
 export declare const DEFAULT_FALLBACK = "N/A";
-export declare const formatNumber: (num: number | string, fallback?: string | null) => string;

package/components/chart/utils/highlightUtils.d.ts

@@ -0,0 +1,3 @@
+import { DataSetConfig } from '@/components/chart/types';
+export declare const storeOriginalDatasetColors: (dataset: DataSetConfig) => void;
+export declare const restoreOriginalDatasetColors: (dataset: DataSetConfig) => void;

package/components/chart/utils/highlightUtils.js

@@ -0,0 +1,18 @@
+const _ = [
+  "borderColor",
+  "backgroundColor",
+  "pointBackgroundColor",
+  "pointHoverBorderColor"
+], l = (o) => {
+  _.forEach((r) => {
+    o[`___${r}`] = o[r];
+  });
+}, n = (o) => {
+  _.forEach((r) => {
+    o[`___${r}`] && (o[r] = o[`___${r}`], delete o[`___${r}`]);
+  });
+};
+export {
+  n as restoreOriginalDatasetColors,
+  l as storeOriginalDatasetColors
+};

package/components/chart/utils/utils.d.ts

@@ -1,3 +1,3 @@
-import { ValueFormat } from '@/components/chart/types';
-export declare const calcStepSize: (min: number, max: number, tickCount: number) => number;
-export declare const formatValue: (value: number | string, valueFormat: ValueFormat) => string;
+import { PrepareTicksLabelArgs, ValueFormat } from '@/components/chart/types';
+export declare const formatValue: (value: number | string | Date, valueFormat: ValueFormat, formatLowDigits?: boolean) => string;
+export declare const prepareTickLabel: ({ label, format, availableSpace, truncate, }: PrepareTicksLabelArgs) => string | string[];

package/components/chart/utils/utils.js

@@ -1,12 +1,21 @@
-import { format as n } from "date-fns";
-import { formatNumber as d } from "./formatNumber.js";
-const p = (r, t, e) => {
-  if (e === 0)
-    return 0;
-  const f = t - r, o = f / e * 0.4;
-  return (f + o) / e;
-}, M = (r, t) => t === "day" ? n(new Date(r), "EEEE") : t === "number" ? d(r) : t === "date" ? n(new Date(r), "MMM dd") : t === "dateLong" ? n(new Date(r), "MMM dd, yyyy") : String(r);
+import { format as e } from "date-fns";
+import { TICK_LABEL_FONT as p } from "../consts.js";
+import { nFormatter as E } from "../../../utils/formatNumbers.js";
+import { truncateTextToFit as a } from "../../../utils/text.js";
+import { REGEX_LINEBREAK as m } from "../../../consts/regex.js";
+const c = (r, t, n = !1) => t === "day" ? e(new Date(r), "EEEE") : t === "number" ? E(r, n) : t === "date" ? e(new Date(r), "MMM dd") : t === "dateLong" ? e(new Date(r), "MMM dd, yyyy") : String(r), w = ({
+  label: r,
+  format: t,
+  availableSpace: n,
+  truncate: i = !1
+}) => {
+  const s = m.test(r), o = (d) => {
+    const f = c(d, t);
+    return i && n > 0 ? a(f, p, n) : f;
+  };
+  return s ? r.split(m).map(o) : o(r);
+};
 export {
-  p as calcStepSize,
-  M as formatValue
+  c as formatValue,
+  w as prepareTickLabel
 };

package/components/checkbox/v3/Checkbox.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     isChecked: boolean;
     isIndeterminate?: boolean;
     disabled?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: "md" | "sm" | "lg";
     label?: string;
     testId?: string;
 }>, {
@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     isChecked: boolean;
     isIndeterminate?: boolean;
     disabled?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: "md" | "sm" | "lg";
     label?: string;
     testId?: string;
 }>, {
@@ -29,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     label: string;
     testId: string;
-    size: "sm" | "md" | "lg";
+    size: "md" | "sm" | "lg";
 }>, {
     default?(_: {}): any;
 }>;

package/components/checkbox/v3/index.d.ts

@@ -5,7 +5,7 @@ declare const CheckboxTypes: () => ({
         $props: Partial<{
             label: string;
             testId: string;
-            size: "sm" | "md" | "lg";
+            size: "md" | "sm" | "lg";
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             label: {
                 type: import("vue").PropType<string>;
@@ -19,7 +19,7 @@ declare const CheckboxTypes: () => ({
                 type: import("vue").PropType<boolean>;
             };
             size: {
-                type: import("vue").PropType<"sm" | "md" | "lg">;
+                type: import("vue").PropType<"md" | "sm" | "lg">;
                 default: string;
             };
             isIndeterminate: {
@@ -59,7 +59,7 @@ declare const CheckboxTypes: () => ({
                 type: import("vue").PropType<boolean>;
             };
             size: {
-                type: import("vue").PropType<"sm" | "md" | "lg">;
+                type: import("vue").PropType<"md" | "sm" | "lg">;
                 default: string;
             };
             isIndeterminate: {
@@ -78,7 +78,7 @@ declare const CheckboxTypes: () => ({
         }, string, {
             label: string;
             testId: string;
-            size: "sm" | "md" | "lg";
+            size: "md" | "sm" | "lg";
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -112,7 +112,7 @@ declare const CheckboxTypes: () => ({
             type: import("vue").PropType<boolean>;
         };
         size: {
-            type: import("vue").PropType<"sm" | "md" | "lg">;
+            type: import("vue").PropType<"md" | "sm" | "lg">;
             default: string;
         };
         isIndeterminate: {
@@ -142,7 +142,7 @@ declare const CheckboxTypes: () => ({
         type: import("vue").PropType<boolean>;
     };
     size: {
-        type: import("vue").PropType<"sm" | "md" | "lg">;
+        type: import("vue").PropType<"md" | "sm" | "lg">;
         default: string;
     };
     isIndeterminate: {
@@ -161,7 +161,7 @@ declare const CheckboxTypes: () => ({
 }, string, {
     label: string;
     testId: string;
-    size: "sm" | "md" | "lg";
+    size: "md" | "sm" | "lg";
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;

package/components/dateRange/common/DateRange.common.js

@@ -1,13 +1,13 @@
 import { onClickOutside as ie } from "@vueuse/core";
 import { useToggle as fe } from "../../../composables/useToggle.js";
-import { ref as r, computed as b, onMounted as ce, onBeforeMount as de, onUnmounted as ve, watch as Q } from "vue";
+import { ref as r, computed as b, onMounted as de, onBeforeMount as ce, onUnmounted as ve, watch as Q } from "vue";
 import { min as me, addDays as ge, format as X } from "date-fns";
 import { presetsList as he, formatError as De, mandatoryValuesError as Me, navigatePrev as Z, navigateNext as V } from "./consts.common.js";
 import m from "./DateServices.common.js";
-const Te = (o, y) => {
-  const N = r(null), c = r({ started: !1, date: null }), x = r(!1), _ = 2, S = r({ from: null, to: null }), s = r({}), g = r([]), k = r(null), f = r({}), T = r({}), w = r(!1), P = r(null), u = r(null), j = r("left"), p = r(null), O = r(null), E = r([]), K = r(null), [h] = fe({ initialValue: !1 }), q = r(null);
+const pe = (o, y) => {
+  const N = r(null), d = r({ started: !1, date: null }), x = r(!1), _ = 2, S = r({ from: null, to: null }), u = r({}), g = r([]), k = r(null), i = r({}), p = r({}), C = r(!1), w = r(null), s = r(null), j = r("left"), P = r(null), O = r(null), E = r([]), K = r(null), [D] = fe({ initialValue: !1 }), q = r(null);
   ie(q, () => {
-    h.value = !1;
+    D.value = !1;
   });
   const L = (e, t) => {
     const a = {
@@ -17,27 +17,27 @@ const Te = (o, y) => {
       year: t
     };
     let n, l;
-    const d = new Date(t, e, 1).getDay();
+    const c = new Date(t, e, 1).getDay();
     let v = 1;
-    const i = /* @__PURE__ */ new Date();
-    i.setHours(0, 0, 0, 0);
-    const se = m.daysInMonth(e, t);
+    const f = /* @__PURE__ */ new Date();
+    f.setHours(0, 0, 0, 0);
+    const ue = m.daysInMonth(e, t);
     for (let I = 0; I < 6; I++) {
       l = [];
       for (let H = 0; H < 7; H++)
-        n = {}, I === 0 && d > 0 && H < d && (n.value = 0), v > se && (n.value = 0), !n.value && n.value !== 0 && (n.value = v, v += 1, a.days[n.value] = n, n.date = new Date(t, e, n.value), i < n.date ? n.isFuture = !0 : n.date.getTime() === i.getTime() && (n.isToday = !0, o.includeToday || (n.disabled = !0))), l.push(n);
+        n = {}, I === 0 && c > 0 && H < c && (n.value = 0), v > ue && (n.value = 0), !n.value && n.value !== 0 && (n.value = v, v += 1, a.days[n.value] = n, n.date = new Date(t, e, n.value), f < n.date ? n.isFuture = !0 : n.date.getTime() === f.getTime() && (n.isToday = !0, o.includeToday || (n.disabled = !0))), l.push(n);
       a.weeks.push(l);
     }
     return a;
-  }, C = () => {
+  }, T = () => {
     let e = m.getCurrentTimeUTC();
-    if (u.value && u.value.toEnd ? e = u.value.toEnd : o.range && o.range.to && (e = o.range.to), !s.value[`${e.getFullYear().toString()}_${e.getMonth().toString()}`]) {
-      s.value = {}, g.value = [];
+    if (s.value && s.value.toEnd ? e = s.value.toEnd : o.range && o.range.to && (e = o.range.to), !u.value[`${e.getFullYear().toString()}_${e.getMonth().toString()}`]) {
+      u.value = {}, g.value = [];
       for (let t = 0; t < _; t++) {
         const a = new Date(e);
         a.setDate(1), a.setMonth(e.getMonth() - t);
         const n = `${a.getFullYear().toString()}_${a.getMonth().toString()}`;
-        s.value[n] = {
+        u.value[n] = {
           parsedMonth: L(
             a.getMonth(),
             a.getFullYear()
@@ -47,60 +47,60 @@ const Te = (o, y) => {
       }
     }
   }, z = (e, t) => {
-    P.value = e;
+    w.value = e;
     let a = e;
-    e === "date" && (a = o.datePresetList), E.value = he[a], t && (u.value = {
+    e === "date" && (a = o.datePresetList), E.value = he[a], t && (s.value = {
       fromStart: null,
       fromEnd: null,
       toStart: null,
       toEnd: null
-    }, S.value.from = "", S.value.to = "", c.value = { started: !1, date: null }, f.value = "custom"), y("rangeTypeChanged", P.value);
+    }, S.value.from = "", S.value.to = "", d.value = { started: !1, date: null }, i.value = "custom"), y("rangeTypeChanged", w.value);
   }, ee = (e) => {
-    f.value = e.id, D(k.value[e.id].dates()), C();
-  }, D = (e, t = !1) => {
+    i.value = e.id, M(k.value[e.id].dates()), T();
+  }, M = (e, t = !1) => {
     let a = e;
-    return (!e || !e.from && !e.to) && (a = k.value[E.value[0]]), o.maxDaysInRange && (K.value = t ? ge(a.from, o.maxDaysInRange) : null), w.value = !1, !a.from || !a.to || !(a.from instanceof Date) || !(a.to instanceof Date) ? (O.value = De, w.value = !0, !1) : a.from > a.to ? (O.value = `"From" date can't be bigger than "To" date`, w.value = !0, !1) : (u.value = R(a), S.value.from = X(
-      u.value.fromStart,
+    return !e.from && !e.to && e.preset ? a = k.value[e.preset]?.dates() : (!e || !e.from && !e.to) && (a = k.value[E.value[0]]), o.maxDaysInRange && (K.value = t ? ge(a.from, o.maxDaysInRange) : null), C.value = !1, !a.from || !a.to || !(a.from instanceof Date) || !(a.to instanceof Date) ? (O.value = De, C.value = !0, !1) : a.from > a.to ? (O.value = `"From" date can't be bigger than "To" date`, C.value = !0, !1) : (s.value = R(a), S.value.from = X(
+      s.value.fromStart,
       o.dateFormat
-    ), S.value.to = X(u.value.toEnd, o.dateFormat), !0);
+    ), S.value.to = X(s.value.toEnd, o.dateFormat), !0);
   }, F = () => {
-    f.value === "custom" ? p.value = m.getDateRangeString(u.value) : p.value = J.value, y("currentDateChanged", p.value);
+    i.value === "custom" ? P.value = m.getDateRangeString(s.value) : P.value = J.value, y("currentDateChanged", P.value);
   }, te = () => {
-    if (u.value.fromStart == null || u.value.toEnd == null) {
-      w.value = !0, O.value = Me;
+    if (s.value.fromStart == null || s.value.toEnd == null) {
+      C.value = !0, O.value = Me;
       return;
     }
     const e = m.getCurrentTimeUTC();
-    u.value.toEnd > e && (u.value.toEnd = e), F(), T.value = f.value, y("rangeChanged", {
-      from: u.value.fromStart,
-      to: u.value.toEnd,
-      preset: T.value
+    s.value.toEnd > e && (s.value.toEnd = e), F(), p.value = i.value, y("rangeChanged", {
+      from: s.value.fromStart,
+      to: s.value.toEnd,
+      preset: p.value
     }), W(!1);
   }, ae = (e, t) => e ? Z : t ? V : null, ne = (e) => {
     let t = null, a = null;
     const n = _ - 1;
-    let l = "", M = null, d = null;
+    let l = "", h = null, c = null;
     switch (e) {
       case V:
-        Object.keys(s.value).forEach((v) => {
-          const i = s.value[v];
-          i.order === 0 && (M = i), i.order === n ? (g.value.splice(
+        Object.keys(u.value).forEach((v) => {
+          const f = u.value[v];
+          f.order === 0 && (h = f), f.order === n ? (g.value.splice(
             g.value.indexOf(v),
             1
-          ), delete s.value[v]) : i.order += 1;
-        }), t = M.parsedMonth.month + 1, a = M.parsedMonth.year, t > 11 && (t = 0, a += 1), l = `${a.toString()}_${t.toString()}`, s.value[l] = {
+          ), delete u.value[v]) : f.order += 1;
+        }), t = h.parsedMonth.month + 1, a = h.parsedMonth.year, t > 11 && (t = 0, a += 1), l = `${a.toString()}_${t.toString()}`, u.value[l] = {
           parsedMonth: L(t, a),
           order: 0
         }, g.value.push(l);
         break;
       case Z:
-        Object.keys(s.value).forEach((v) => {
-          const i = s.value[v];
-          i.order === n && (d = i), i.order === 0 ? (g.value.splice(
+        Object.keys(u.value).forEach((v) => {
+          const f = u.value[v];
+          f.order === n && (c = f), f.order === 0 ? (g.value.splice(
             g.value.indexOf(v),
             1
-          ), delete s.value[v]) : i.order -= 1;
-        }), t = d.parsedMonth.month - 1, a = d.parsedMonth.year, t < 0 && (t = 11, a -= 1), l = `${a.toString()}_${t.toString()}`, s.value[l] = {
+          ), delete u.value[v]) : f.order -= 1;
+        }), t = c.parsedMonth.month - 1, a = c.parsedMonth.year, t < 0 && (t = 11, a -= 1), l = `${a.toString()}_${t.toString()}`, u.value[l] = {
           parsedMonth: L(t, a),
           order: n
         }, g.value.unshift(l);
@@ -108,7 +108,7 @@ const Te = (o, y) => {
     }
   }, R = (e) => {
     let t;
-    switch (P.value) {
+    switch (w.value) {
       case "week":
         t = {
           fromStart: m.getFirstDayOfWeek(e.from),
@@ -146,6 +146,12 @@ const Te = (o, y) => {
     return t;
   }, U = (e, t) => e.getUTCFullYear() === t.getUTCFullYear() && e.getUTCMonth() === t.getUTCMonth() && e.getUTCDate() === t.getUTCDate(), $ = (e) => {
     let t = !1;
+    if (!e.from && !e.to && e.preset) {
+      const l = E.value.find(
+        (h) => h.id === e.preset
+      );
+      i.value = l.id, t = !0;
+    }
     const a = {
       from: new Date(e.from),
       to: new Date(e.to)
@@ -153,53 +159,53 @@ const Te = (o, y) => {
     a.from.setHours(0, 0, 0, 0), a.to.setHours(0, 0, 0, 0);
     const n = E.value.map((l) => l.id);
     if (Object.keys(k.value).forEach((l) => {
-      const M = k.value[l];
+      const h = k.value[l];
       if (l !== "custom" && !t && n.indexOf(l) !== -1) {
-        const d = M.dates();
-        d.from.setHours(0, 0, 0, 0), d.to.setHours(0, 0, 0, 0), U(d.from, a.from) && U(d.to, a.to) && (f.value = l, t = !0);
+        const c = h.dates();
+        c.from.setHours(0, 0, 0, 0), c.to.setHours(0, 0, 0, 0), U(c.from, a.from) && U(c.to, a.to) && (i.value = l, t = !0);
       }
     }), t) {
       const l = E.value.find(
-        (M) => M.id === f.value
+        (h) => h.id === i.value
       );
       y("dateRangePresetNameChanged", l.name);
     } else
-      y("dateRangePresetNameChanged", null), f.value = "custom";
-    T.value = f.value;
+      y("dateRangePresetNameChanged", null), i.value = "custom";
+    p.value = i.value;
   }, A = (e, t, a) => {
-    if (!c.value.started)
-      f.value = "custom", c.value.started = !0, c.value.date = new Date(a, t, e.value), D(
-        { from: c.value.date, to: c.value.date },
+    if (!d.value.started)
+      i.value = "custom", d.value.started = !0, d.value.date = new Date(a, t, e.value), M(
+        { from: d.value.date, to: d.value.date },
         !0
       );
     else {
-      const n = new Date(a, t, e.value), l = c.value.date;
-      c.value.started = !1, c.value.date = null, n < l ? A(e, t, a) : D({ from: l, to: n });
+      const n = new Date(a, t, e.value), l = d.value.date;
+      d.value.started = !1, d.value.date = null, n < l ? A(e, t, a) : M({ from: l, to: n });
     }
   }, B = () => {
     const e = N.value.offsetLeft;
     return window.innerWidth - e > 930 ? "left" : "right";
   }, W = (e = !0) => {
-    h.value = !h.value, h.value ? (j.value = B(), D(o.range), C(), y("opened")) : (D(o.range), C(), f.value = T.value, e && y("dismissed"));
+    D.value = !D.value, D.value ? (j.value = B(), M(o.range), T(), y("opened")) : (M(o.range), T(), i.value = p.value, e && y("dismissed"));
   }, G = () => {
-    h.value && W();
+    D.value && W();
   }, le = () => {
     k.value = m.getPresetsFunctions(o.includeToday), k.value.custom = {
       dates: () => o.range
     };
   }, oe = b(() => (g.value || []).reduce((e, t) => {
-    const n = s.value[t].parsedMonth.weeks[s.value[t].parsedMonth.weeks.length - 1].filter(
+    const n = u.value[t].parsedMonth.weeks[u.value[t].parsedMonth.weeks.length - 1].filter(
       (l) => l.value !== 0
     ).length;
     return e && !n;
   }, !0)), Y = () => {
-    o.range && (x.value = !0, z(o.initialType || o.types[0]), le(), $(o.range), D(o.range), C(), F());
+    o.range && (x.value = !0, z(o.initialType || o.types[0]), le(), $(o.range), M(o.range), T(), F());
   };
-  ce(() => {
+  de(() => {
     Y();
-  }), de(() => {
+  }), ce(() => {
     const e = (t) => {
-      t.key === "Escape" && h.value && G();
+      t.key === "Escape" && D.value && G();
     };
     document.addEventListener("keyup", e), ve(() => {
       document.removeEventListener("keyup", e);
@@ -207,44 +213,44 @@ const Te = (o, y) => {
   }), Q(
     () => o.range,
     (e, t) => {
-      e && e !== t && (x.value ? ($(e), D(e), F()) : Y());
+      e && e !== t && (x.value ? ($(e), M(e), F()) : Y());
     }
-  ), Q(h, (e) => {
-    e || (c.value.started = !1);
+  ), Q(D, (e) => {
+    e || (d.value.started = !1);
   });
   const J = b(() => {
     const e = E.value.find(
-      (t) => t.id === f.value
+      (t) => t.id === i.value
     );
     return e ? e.name : "";
-  }), re = b(() => `datepicker${o.uniqueId}`), ue = b(() => {
+  }), re = b(() => `datepicker${o.uniqueId}`), se = b(() => {
     const e = [o.maxDate, K.value].filter((t) => t);
     return e.length ? me(e) : null;
   });
   return {
     datePicker: N,
     datePickerId: re,
-    getMaxAllowedDate: ue,
+    getMaxAllowedDate: se,
     selectedPresetName: J,
-    selectedPreset: f,
-    displayError: w,
-    rangeType: P,
-    selectedRange: u,
+    selectedPreset: i,
+    displayError: C,
+    rangeType: w,
+    selectedRange: s,
     placement: j,
-    currentDate: p,
+    currentDate: P,
     error: O,
     presets: E,
-    isOpen: h,
+    isOpen: D,
     popup: q,
-    selectionStart: c,
+    selectionStart: d,
     initialized: x,
     textDates: S,
-    currentMonths: s,
+    currentMonths: u,
     displayedMonthsKeys: g,
-    initMonths: C,
+    initMonths: T,
     changeType: z,
     presetChanged: ee,
-    initRange: D,
+    initRange: M,
     setCurrentDate: F,
     apply: te,
     getNavigation: ae,
@@ -261,5 +267,5 @@ const Te = (o, y) => {
   };
 };
 export {
-  Te as dateRangeCommon
+  pe as dateRangeCommon
 };

package/components/dateRange/common/DateServices.common.d.ts

@@ -6,7 +6,7 @@ export type Day = {
     disabled?: boolean;
 };
 export type Week = Day[];
-declare class DateServices {
+export declare class DateServices {
     getCurrentTimeUTC(): Date;
     daysInMonth(month: any, year: any): number;
     getDateRangeString(dateRange: any): string;
@@ -117,6 +117,12 @@ declare class DateServices {
                 to?: Date;
             };
         };
+        last9months: {
+            dates(): {
+                from?: Date;
+                to?: Date;
+            };
+        };
         last12months: {
             dates(): {
                 from?: Date;