@ironsource/shared-ui 2.1.7-rc.10 → 2.1.7-rc.12

package/components/table-cells/common/Editable.common.js

@@ -1,39 +1,50 @@
-import { ref as a, provide as v } from "vue";
-import { useTableContext as s } from "../../table/common/TableContext.js";
-import { EditableContext as d } from "./EditableContext.js";
-import { onClickOutside as f } from "@vueuse/core";
-const g = (e) => {
-  const l = a(!1), n = a(e.cell), u = a(null), r = s("Editable"), o = a(null);
-  v(d, {
+import { ref as t, provide as d } from "vue";
+import { useTableContext as f } from "../../table/common/TableContext.js";
+import { EditableContext as C } from "./EditableContext.js";
+import { onClickOutside as m } from "@vueuse/core";
+const k = (e) => {
+  const l = t(!1), n = t(e.cell), o = t(e.saveOnClickOutside), i = t(null), r = f("Editable"), a = t(null), v = () => {
+    if (e.cell === n.value) {
+      l.value = !1;
+      return;
+    }
+    const u = e.validateFunction?.(n.value);
+    a.value = u, !u && (r.onClose({
+      rowIndex: e.rowIndex,
+      cellIndex: e.cellIndex,
+      value: n.value
+    }), l.value = !1);
+  };
+  d(C, {
     focusable: !0,
     value: n,
-    error: o,
+    error: a,
     confirmable: !0,
-    onChange(t) {
-      n.value = t, o.value = e.validateFunction?.(n.value);
+    saveOnClickOutside: o.value,
+    onChange(u) {
+      n.value = u, a.value = e.validateFunction?.(n.value);
     },
-    onClose: () => {
-      const t = e.validateFunction?.(n.value);
-      o.value = t, !t && (r.onClose({
-        rowIndex: e.rowIndex,
-        cellIndex: e.cellIndex,
-        value: n.value
-      }), l.value = !1);
-    }
+    onClose: v
   });
-  const i = () => {
+  const c = () => {
     l.value || e.isLoading || (l.value = !l.value);
-  }, c = () => {
-    n.value = e.cell, o.value = null;
+  }, s = () => {
+    n.value = e.cell, a.value = null;
   };
-  return f(u, () => {
-    l.value = !1, c(), r.onClose();
+  return m(i, () => {
+    if (l.value) {
+      if (o.value) {
+        v();
+        return;
+      }
+      l.value = !1, s(), r.onClose();
+    }
   }), {
-    onEdit: i,
-    target: u,
+    onEdit: c,
+    target: i,
     isEditing: l
   };
 };
 export {
-  g as editableCommon
+  k as editableCommon
 };

package/components/table-cells/common/EditableContext.d.ts

@@ -6,6 +6,7 @@ export interface EditableContextProps {
     error?: Ref<string>;
     value?: Ref<unknown>;
     confirmable?: boolean;
+    saveOnClickOutside?: boolean;
 }
 export declare const EditableContext: InjectionKey<EditableContextProps>;
 export declare function useEditableContext(): EditableContextProps;

package/components/table-cells/v4/EditableV4.vue.d.ts

@@ -4,12 +4,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowIndex: number;
     cellIndex: number;
     type: "input" | "dropdown";
+    saveOnClickOutside?: boolean;
     validateFunction?: (value: unknown) => string | boolean;
     displayValue?: (option: unknown) => unknown;
 }>, {
     cell: string;
     isLoading: boolean;
     type: string;
+    saveOnClickOutside: boolean;
     validateFunction: () => false;
     displayValue: (cell: unknown) => unknown;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -18,17 +20,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowIndex: number;
     cellIndex: number;
     type: "input" | "dropdown";
+    saveOnClickOutside?: boolean;
     validateFunction?: (value: unknown) => string | boolean;
     displayValue?: (option: unknown) => unknown;
 }>, {
     cell: string;
     isLoading: boolean;
     type: string;
+    saveOnClickOutside: boolean;
     validateFunction: () => false;
     displayValue: (cell: unknown) => unknown;
 }>>>, {
     type: "input" | "dropdown";
     cell: string;
+    saveOnClickOutside: boolean;
     validateFunction: (value: unknown) => string | boolean;
     isLoading: boolean;
     displayValue: (option: unknown) => unknown;

package/components/table-cells/v4/EditableV4.vue.js

@@ -1,7 +1,7 @@
-import o from "./EditableV4.vue2.js";
-/* empty css                 */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../EditableV4.vue_vue_type_style_index_0_scoped_31bfb722_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-31bfb722"]]);
+import e from "./EditableV4.vue2.js";
+/* empty css                 */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../EditableV4.vue_vue_type_style_index_0_scoped_e0c047b4_lang.css"; //*');
+const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-e0c047b4"]]);
 export {
-  p as default
+  c as default
 };

package/components/table-cells/v4/EditableV4.vue2.js

@@ -1,13 +1,13 @@
- import "../../../EditableV4.vue_vue_type_style_index_0_scoped_31bfb722_lang.css"; import { defineComponent as m, openBlock as o, createElementBlock as i, unref as t, createElementVNode as f, renderSlot as r, createVNode as d, withCtx as y, createTextVNode as k, toDisplayString as V, createBlock as b, createCommentVNode as g } from "vue";
-import { editableCommon as x } from "../common/Editable.common.js";
-import v from "../../typography/v4/Typography.vue.js";
-import w from "../../input/v4/TextField.vue.js";
-import C from "../../icon/v4/IconV4.vue.js";
+ import "../../../EditableV4.vue_vue_type_style_index_0_scoped_e0c047b4_lang.css"; import { defineComponent as m, openBlock as o, createElementBlock as i, unref as t, createElementVNode as f, renderSlot as r, createVNode as d, withCtx as y, createTextVNode as k, toDisplayString as V, createBlock as b, createCommentVNode as g } from "vue";
+import { editableCommon as v } from "../common/Editable.common.js";
+import x from "../../typography/v4/Typography.vue.js";
+import C from "../../input/v4/TextField.vue.js";
+import w from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
-const E = { class: "editable-wrapper" }, B = {
+const B = { class: "editable-wrapper" }, E = {
   key: 1,
   class: "editable-content"
-}, _ = /* @__PURE__ */ m({
+}, S = /* @__PURE__ */ m({
   __name: "EditableV4",
   props: {
     cell: { default: "" },
@@ -15,30 +15,31 @@ const E = { class: "editable-wrapper" }, B = {
     rowIndex: null,
     cellIndex: null,
     type: { default: "input" },
+    saveOnClickOutside: { type: Boolean, default: !0 },
     validateFunction: { type: Function, default: () => !1 },
     displayValue: { type: Function, default: (e) => e }
   },
   setup(e) {
-    const c = e, { onEdit: n, target: s, isEditing: p } = x(c);
+    const s = e, { onEdit: n, target: c, isEditing: u } = v(s);
     return (l, a) => (o(), i("div", {
       ref_key: "target",
-      ref: s,
+      ref: c,
       class: "editable",
       onClick: a[0] || (a[0] = //@ts-ignore
-      (...u) => t(n) && t(n)(...u))
+      (...p) => t(n) && t(n)(...p))
     }, [
-      f("div", E, [
-        t(p) ? r(l.$slots, "input", { key: 0 }, () => [
-          d(t(w))
-        ], !0) : (o(), i("div", B, [
+      f("div", B, [
+        t(u) ? r(l.$slots, "input", { key: 0 }, () => [
+          d(t(C))
+        ], !0) : (o(), i("div", E, [
           r(l.$slots, "content", {}, () => [
-            d(t(v), { variant: "body1" }, {
+            d(t(x), { variant: "body1" }, {
               default: y(() => [
                 k(V(e.displayValue(e.cell)), 1)
               ]),
               _: 1
             }),
-            e.type === "dropdown" ? (o(), b(t(C), {
+            e.type === "dropdown" ? (o(), b(t(w), {
               key: 0,
               class: "caret-icon",
               name: "caret-down",
@@ -51,5 +52,5 @@ const E = { class: "editable-wrapper" }, B = {
   }
 });
 export {
-  _ as default
+  S as default
 };

package/components/table-cells/v4/index.d.ts

@@ -6,6 +6,7 @@ declare const EditableTypes: () => ({
         $props: Partial<{
             type: "input" | "dropdown";
             cell: string;
+            saveOnClickOutside: boolean;
             validateFunction: (value: unknown) => string | boolean;
             isLoading: boolean;
             displayValue: (option: unknown) => unknown;
@@ -19,6 +20,10 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            saveOnClickOutside: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             validateFunction: {
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
@@ -39,7 +44,7 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<(option: unknown) => unknown>;
                 default: (cell: unknown) => unknown;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "cell" | "validateFunction" | "isLoading" | "displayValue">;
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "cell" | "saveOnClickOutside" | "validateFunction" | "isLoading" | "displayValue">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -63,6 +68,10 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            saveOnClickOutside: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             validateFunction: {
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
@@ -86,6 +95,7 @@ declare const EditableTypes: () => ({
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             type: "input" | "dropdown";
             cell: string;
+            saveOnClickOutside: boolean;
             validateFunction: (value: unknown) => string | boolean;
             isLoading: boolean;
             displayValue: (option: unknown) => unknown;
@@ -119,6 +129,10 @@ declare const EditableTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        saveOnClickOutside: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         validateFunction: {
             type: import("vue").PropType<(value: unknown) => string | boolean>;
             default: () => false;
@@ -153,6 +167,10 @@ declare const EditableTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    saveOnClickOutside: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     validateFunction: {
         type: import("vue").PropType<(value: unknown) => string | boolean>;
         default: () => false;
@@ -176,6 +194,7 @@ declare const EditableTypes: () => ({
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     type: "input" | "dropdown";
     cell: string;
+    saveOnClickOutside: boolean;
     validateFunction: (value: unknown) => string | boolean;
     isLoading: boolean;
     displayValue: (option: unknown) => unknown;

package/components/tooltip/v4/TooltipV4.vue.d.ts

@@ -52,12 +52,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>> & {
     onShow?: () => any;
 }, {
-    container: string;
     header: string;
     text: string;
     theme: string;
     disabled: boolean;
     testId: string;
+    container: string;
     delay: number;
     triggers: Triggers[];
     forceShowWithTruncate: boolean;

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

@@ -4,22 +4,18 @@ declare const TooltipTypes: () => ({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            container: string;
             header: string;
             text: string;
             theme: string;
             disabled: boolean;
             testId: string;
+            container: string;
             delay: number;
             triggers: ("touch" | "click" | "focus" | "hover")[];
             forceShowWithTruncate: boolean;
             placement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
             distance: string | number;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            container: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
             header: {
                 type: import("vue").PropType<string>;
                 default: any;
@@ -40,6 +36,10 @@ declare const TooltipTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            container: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             delay: {
                 type: import("vue").PropType<number>;
                 default: number;
@@ -62,7 +62,7 @@ declare const TooltipTypes: () => ({
             };
         }>> & {
             onShow?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "container" | "header" | "text" | "theme" | "disabled" | "testId" | "delay" | "triggers" | "forceShowWithTruncate" | "placement" | "distance">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "text" | "theme" | "disabled" | "testId" | "container" | "delay" | "triggers" | "forceShowWithTruncate" | "placement" | "distance">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -77,10 +77,6 @@ declare const TooltipTypes: () => ({
         $emit: (event: "show") => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            container: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
             header: {
                 type: import("vue").PropType<string>;
                 default: any;
@@ -101,6 +97,10 @@ declare const TooltipTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            container: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             delay: {
                 type: import("vue").PropType<number>;
                 default: number;
@@ -126,12 +126,12 @@ declare const TooltipTypes: () => ({
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             show: () => void;
         }, string, {
-            container: string;
             header: string;
             text: string;
             theme: string;
             disabled: boolean;
             testId: string;
+            container: string;
             delay: number;
             triggers: ("touch" | "click" | "focus" | "hover")[];
             forceShowWithTruncate: boolean;
@@ -158,10 +158,6 @@ declare const TooltipTypes: () => ({
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
-        container: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         header: {
             type: import("vue").PropType<string>;
             default: any;
@@ -182,6 +178,10 @@ declare const TooltipTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        container: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         delay: {
             type: import("vue").PropType<number>;
             default: number;
@@ -209,10 +209,6 @@ declare const TooltipTypes: () => ({
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    container: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     header: {
         type: import("vue").PropType<string>;
         default: any;
@@ -233,6 +229,10 @@ declare const TooltipTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    container: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     delay: {
         type: import("vue").PropType<number>;
         default: number;
@@ -258,12 +258,12 @@ declare const TooltipTypes: () => ({
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     show: () => void;
 }, string, {
-    container: string;
     header: string;
     text: string;
     theme: string;
     disabled: boolean;
     testId: string;
+    container: string;
     delay: number;
     triggers: ("touch" | "click" | "focus" | "hover")[];
     forceShowWithTruncate: boolean;