@plaidev/karte-action-sdk 1.1.76 → 1.1.77

package/dist/hydrate/index.es.d.ts

@@ -78,6 +78,7 @@ type OperationArgumentTypes = {
     State: string;
     Url: string;
     Handler: string;
+    Trigger: string;
 };
 type OperationArgumentType = keyof OperationArgumentTypes;
 type BaseOperationOptions = ReadonlyArray<{
@@ -127,6 +128,10 @@ declare const OnClickOperationOptions: readonly [
     {
         readonly operation: "closeApp";
         readonly args: readonly [
+            {
+                readonly type: "Trigger";
+                readonly default: "button";
+            }
         ];
     },
     {
@@ -235,15 +240,14 @@ type OPTIONS = {
     isPreview?: boolean;
     initialState?: string;
 };
+type CloseTrigger = "button" | "overlay";
 type ActionEventHandler = (...args: any[]) => any | Promise<any>;
-declare const CONSTANTS: {
-    ALL_ACTION_ID: string;
-    STATE_EVENT: string;
-};
+declare const ALL_ACTION_ID = "KARTE_ALL_ACTION_ID";
 declare const actionId: string;
 declare const ACTION_SHOW_EVENT: string;
 declare const ACTION_CLOSE_EVENT: string;
 declare const ACTION_DESTROY_EVENT: string;
+declare const ACTION_CHANGE_STATE_EVENT: string;
 // Store to handle current state ID
 declare const state: Store<string>;
 // Store to handle all state IDs
@@ -284,7 +288,7 @@ declare const setMiximumZindex: (zindex?: number) => void;
 declare const none: () => () => void;
 declare const moveTo: (to: string) => () => void;
 declare const linkTo: (to: string, targetBlank?: boolean) => () => void;
-declare const closeApp: () => () => void;
+declare const closeApp: (trigger: CloseTrigger) => () => void;
 declare const runScript: (handlerName: string) => () => void;
 declare const execOnClickOperation: (onClickOperation: OnClickOperation) => void;
 declare const haveFunction: (onClickOperation: OnClickOperation) => boolean;
@@ -351,6 +355,14 @@ declare function applyGlobalCss(css: string): Promise<any>;
  * @param {string} href Link of style file
  */
 declare function loadGlobalStyle(href: string): Promise<any>;
+/**
+ * {@link hashCode} generate hash with FNV-1a hash
+ *
+ * @param {string} s Inputed string
+ * @return {string} Hashed string
+ * @see https://stackoverflow.com/a/22429679
+ */
+declare function hashCode(s: string): string;
 declare const handleFocus: (node: HTMLElement | null) => (e: any) => void;
 declare const setPreviousFocus: () => void;
 declare const handleKeydown: (handlers: {
@@ -441,7 +453,7 @@ interface ActionOptions<Props, Variables> {
      *
      * @default () => {}
      */
-    onClose?: (props: ActionProps<Props, Variables>) => void | Promise<void>;
+    onClose?: (props: ActionProps<Props, Variables>, trigger: CloseTrigger) => void | Promise<void>;
     /**
      * {@link onClose} function to hook the phase of changing action state in KARTE action.
      *
@@ -488,7 +500,7 @@ declare function show(): void;
  * Close KARTE action
  */
 declare function close(): void;
-declare const KARTE_ACTION_ROOT = "karte-modal-root";
+declare const KARTE_ACTION_ROOT = "karte-action-root";
 declare const KARTE_ACTION_RID = "karte-action-rid";
 declare function ensureActionRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
 /**
@@ -505,12 +517,13 @@ fn: (props: ActionProps<Props, Variables>) => void | Promise<void>): void;
  * {@link onClose} function to set the function to hook the phase before closing action.
  *
  * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ * @param {ClosePlace} fn Callback
  */
 declare function onClose<Props extends _Props, Variables>(/**
  * @param {ActionProps<Props, Variables>} props Properties of KARTE action
  * @returns {void|Promise<void>}
  */
-fn: (props: ActionProps<Props, Variables>) => void | Promise<void>): void;
+fn: (props: ActionProps<Props, Variables>, trigger: CloseTrigger) => void | Promise<void>): void;
 /**
  * {@link onDestory} function to set the function to hook the phase before destroying action.
  *
@@ -533,6 +546,9 @@ declare function onChangeState<Props extends _Props, Variables>(/**
  */
 fn: (props: ActionProps<Props, Variables>, newState: string) => void | Promise<void>): void;
 declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
+/**
+ * @deprecated
+ */
 declare function createFog({ color, opacity, zIndex, onclick }: {
     color?: string;
     opacity?: string;
@@ -544,6 +560,7 @@ declare function createFog({ color, opacity, zIndex, onclick }: {
 };
 type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
 declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
+declare function getActionShadowRoot(): ShadowRoot | null;
 /**
  * {@link applyCss} apply CSS to KARTE action.
  *
@@ -605,7 +622,7 @@ declare const collection: (config: {
     } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
     set(key: string, value: string, cb: (err: Error | null) => void): void;
 };
-export { Store, getStoreState, ActionEventHandler, CONSTANTS, actionId, ACTION_SHOW_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, state, states, closed, maximumZindex, internalHandlers, customHandlers, destroyed, stopped, customVariables, setAutoStart, setState, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, loadGlobalScript, applyGlobalCss, loadGlobalStyle, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, Style, StateName, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorStripe, DefaultListSeparator, ListDirection, ListItemSize, DefaultListItemSize, ListContext, hideOnScroll, hideOnTime, showOnScroll, showOnTime, NOOP, ActionProps, ActionOptions, create, dispatchDestroyEvent, destroy, show, close, KARTE_ACTION_ROOT, KARTE_ACTION_RID, ensureActionRoot, onShow, onClose, onDestroy, onChangeState, h, createFog, EmbedLogic, embed, applyCss, loadStyle, showModal, ModalOptions, KARTE_MODAL_ROOT, ensureModalRoot, AppOptions, App, createApp, collection };
+export { Store, getStoreState, CloseTrigger, ActionEventHandler, ALL_ACTION_ID, actionId, ACTION_SHOW_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_CHANGE_STATE_EVENT, state, states, closed, maximumZindex, internalHandlers, customHandlers, destroyed, stopped, customVariables, setAutoStart, setState, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, loadGlobalScript, applyGlobalCss, loadGlobalStyle, hashCode, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, Style, StateName, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorStripe, DefaultListSeparator, ListDirection, ListItemSize, DefaultListItemSize, ListContext, hideOnScroll, hideOnTime, showOnScroll, showOnTime, NOOP, ActionProps, ActionOptions, create, dispatchDestroyEvent, destroy, show, close, KARTE_ACTION_ROOT, KARTE_ACTION_RID, ensureActionRoot, onShow, onClose, onDestroy, onChangeState, h, createFog, EmbedLogic, embed, getActionShadowRoot, applyCss, loadStyle, showModal, ModalOptions, KARTE_MODAL_ROOT, ensureModalRoot, AppOptions, App, createApp, collection };
 export { default as State } from './components/State.svelte';
 export { default as StateItem } from './components/StateItem.svelte';
 export { default as Modal } from './components/Modal.svelte';

package/dist/hydrate/index.es.js

@@ -1,6 +1,6 @@
 import { writable, get } from 'svelte/store';
 import 'svelte/easing';
-import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, claim_component, claim_space, mount_component, insert_hydration, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, noop, element, claim_element, children, attr, listen, is_function, append_hydration, add_render_callback, create_in_transition, svg_element, claim_svg_element, binding_callbacks, destroy_each, text, claim_text, set_data, src_url_equal, null_to_empty } from 'https://esm.sh/svelte@3.53.1/internal';
+import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, claim_component, claim_space, mount_component, insert_hydration, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, element, claim_element, children, attr, noop, listen, is_function, append_hydration, add_render_callback, create_in_transition, svg_element, claim_svg_element, binding_callbacks, destroy_each, text, claim_text, set_data, src_url_equal, null_to_empty } from 'https://esm.sh/svelte@3.53.1/internal';
 import { createEventDispatcher, onMount, onDestroy as onDestroy$1, setContext, getContext } from 'https://esm.sh/svelte@3.53.1';
 
 /**
@@ -133,15 +133,13 @@ function randStr(digit = 8) {
  * UIから選択できる関数
  */
 const getStoreState = get;
-const CONSTANTS = {
-    ALL_ACTION_ID: 'KARTE_ALL_ACTION_ID',
-    STATE_EVENT: 'KARTE-ACTION-CHANGE-STATE',
-};
+const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
 const functionOptions = writable({});
 const actionId = randStr();
 const ACTION_SHOW_EVENT = `KARTE-ACTION-SHOW-${actionId}`;
 const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
 const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
+const ACTION_CHANGE_STATE_EVENT = `KARTE-ACTION-CHANGE-STATE-${actionId}`;
 // Store to handle current state ID
 const state = writable('/');
 // Store to handle all state IDs
@@ -169,7 +167,7 @@ const setAutoStart = (on = true) => {
     stopped.set(!on);
 };
 const setState = (event) => {
-    if (event.detail.actionId === actionId || event.detail.actionId === CONSTANTS.ALL_ACTION_ID) {
+    if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
         state.set(event.detail.to);
     }
 };
@@ -200,7 +198,7 @@ const setMiximumZindex = (zindex) => {
 const none = () => () => { };
 const moveTo = (to) => () => {
     send_event('_message_state_changed', { state: to });
-    window.dispatchEvent(new CustomEvent(CONSTANTS.STATE_EVENT, { detail: { to, actionId } }));
+    window.dispatchEvent(new CustomEvent(ACTION_CHANGE_STATE_EVENT, { detail: { to, actionId } }));
 };
 const linkTo = (to, targetBlank = true) => () => {
     send_event('message_click', { url: to });
@@ -211,8 +209,9 @@ const linkTo = (to, targetBlank = true) => () => {
         location.href = to;
     }
 };
-const closeApp = () => () => {
-    send_event('message_close', null);
+const closeApp = (trigger) => () => {
+    send_event('message_close', { trigger });
+    window.dispatchEvent(new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } }));
     closed.set(true);
 };
 const runScript = (handlerName) => () => {
@@ -235,7 +234,7 @@ const execOnClickOperation = (onClickOperation) => {
         moveTo(...onClickOperation.args)();
     }
     else if (onClickOperation.operation === 'closeApp') {
-        closeApp()();
+        closeApp(onClickOperation.args[0] || 'button')();
     }
     else if (onClickOperation.operation === 'runScript') {
         runScript(onClickOperation.args[0])();
@@ -298,6 +297,22 @@ async function loadGlobalStyle(href) {
         link.addEventListener('error', () => reject(link));
     });
 }
+/**
+ * {@link hashCode} generate hash with FNV-1a hash
+ *
+ * @param {string} s Inputed string
+ * @return {string} Hashed string
+ * @see https://stackoverflow.com/a/22429679
+ */
+function hashCode(s) {
+    const SEED = 0x41653150;
+    let hash = SEED;
+    Array.from(s).forEach((c, index) => {
+        hash ^= c.charCodeAt(index);
+        hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+    });
+    return ('0000000' + (hash >>> 0).toString(16)).substr(-8);
+}
 
 const PropTypes = [
     'BooleanKeyword',
@@ -355,7 +370,7 @@ const DefaultModalPlacement = {
         bottom: '0px',
     },
     backgroundOverlay: false,
-    backgroundClick: { operation: 'closeApp', args: [] },
+    backgroundClick: { operation: 'closeApp', args: ['overlay'] },
 };
 const OnClickOperationOptions = [
     {
@@ -386,7 +401,12 @@ const OnClickOperationOptions = [
     },
     {
         operation: 'closeApp',
-        args: [],
+        args: [
+            {
+                type: 'Trigger',
+                default: 'button',
+            },
+        ],
     },
     {
         operation: 'runScript',
@@ -468,26 +488,27 @@ function create(App, options = {
 }) {
     let app = null;
     const data = { ...options.props, ...options.variables };
-    const close = () => {
+    const close = (event = {}) => {
         if (!app) {
             return;
         }
         closed.set(true);
-        window.removeEventListener(CONSTANTS.STATE_EVENT, setState);
+        window.removeEventListener(ACTION_CHANGE_STATE_EVENT, setState);
+        const trigger = event.detail?.trigger ? event.detail?.trigger : 'button';
         if (options.onClose) {
-            options.onClose({ send: options.send, data });
+            options.onClose({ send: options.send, data }, trigger);
         }
         app.$destroy();
         app = null;
     };
     window.addEventListener(ACTION_CLOSE_EVENT, close);
-    const show = () => {
+    const show = (_event = {}) => {
         if (app) {
             return;
         }
         options.send('message_open');
         closed.set(false);
-        window.addEventListener(CONSTANTS.STATE_EVENT, setState);
+        window.addEventListener(ACTION_CHANGE_STATE_EVENT, setState);
         app = new App({
             target: ensureModalRoot(!true),
             hydrate: true,
@@ -540,7 +561,7 @@ function create(App, options = {
  * Dispatch the event to destroy KARTE action
  */
 function dispatchDestroyEvent() {
-    const event = new Event(ACTION_DESTROY_EVENT);
+    const event = new CustomEvent(ACTION_DESTROY_EVENT);
     window.dispatchEvent(event);
 }
 /**
@@ -554,22 +575,25 @@ function destroy() {
  * Show KARTE action
  */
 function show() {
-    const event = new Event(ACTION_SHOW_EVENT);
+    const event = new CustomEvent(ACTION_SHOW_EVENT);
     window.dispatchEvent(event);
 }
 /**
  * Close KARTE action
  */
 function close() {
-    const event = new Event(ACTION_CLOSE_EVENT);
+    const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger: 'button' } });
     window.dispatchEvent(event);
 }
-const KARTE_ACTION_ROOT = 'karte-modal-root';
+const KARTE_ACTION_ROOT = 'karte-action-root';
 const KARTE_ACTION_RID = 'karte-action-rid';
 function ensureActionRoot(useShadow = true) {
     let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
     if (el == null) {
-        el = h('div', { class: KARTE_MODAL_ROOT, [`data-${KARTE_ACTION_RID}`]: actionId });
+        el = h('div', {
+            class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
+            [`data-${KARTE_ACTION_RID}`]: actionId,
+        });
         document.body.appendChild(el);
     }
     const isShadow = !!document.body.attachShadow && useShadow;
@@ -600,6 +624,7 @@ fn) {
  * {@link onClose} function to set the function to hook the phase before closing action.
  *
  * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ * @param {ClosePlace} fn Callback
  */
 function onClose(
 /**
@@ -661,6 +686,9 @@ const h = (type, props, ...children) => {
     }
     return el;
 };
+/**
+ * @deprecated
+ */
 function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
     const root = ensureModalRoot(false);
     if (root.querySelector('.__krt-fog')) {
@@ -749,7 +777,7 @@ async function loadStyle(href) {
 }
 // -------- The following codes are deprecated --------
 const showModal = create; // @deprecated
-const KARTE_MODAL_ROOT = KARTE_ACTION_ROOT; // @deprecated
+const KARTE_MODAL_ROOT = 'karte-modal-root'; // @deprecated
 const ensureModalRoot = ensureActionRoot; // @deprecated
 /**
  * Create an application instance
@@ -865,14 +893,14 @@ function request(url, data, cb) {
 
 /* src/components/Normalize.svelte generated by Svelte v3.53.1 */
 
-function add_css$d(target) {
+function add_css$e(target) {
 	append_styles(target, "svelte-tr4qnr", "@import 'https://esm.sh/normalize.css';");
 }
 
 class Normalize extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, null, null, safe_not_equal, {}, add_css$d);
+		init(this, options, null, null, safe_not_equal, {}, add_css$e);
 	}
 }
 
@@ -961,19 +989,40 @@ class State extends SvelteComponent {
 
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
 
+function add_css$d(target) {
+	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
+}
+
+// (14:0) {#if $state === path}
 function create_if_block$3(ctx) {
+	let div;
+	let t;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[3].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[2], null);
 
 	return {
 		c() {
+			div = element("div");
+			t = space();
 			if (default_slot) default_slot.c();
+			this.h();
 		},
 		l(nodes) {
+			div = claim_element(nodes, "DIV", { "data-state-path": true, class: true });
+			children(div).forEach(detach);
+			t = claim_space(nodes);
 			if (default_slot) default_slot.l(nodes);
+			this.h();
+		},
+		h() {
+			attr(div, "data-state-path", /*path*/ ctx[0]);
+			attr(div, "class", "state-item svelte-2qb6dm");
 		},
 		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+			insert_hydration(target, t, anchor);
+
 			if (default_slot) {
 				default_slot.m(target, anchor);
 			}
@@ -981,6 +1030,10 @@ function create_if_block$3(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
+			if (!current || dirty & /*path*/ 1) {
+				attr(div, "data-state-path", /*path*/ ctx[0]);
+			}
+
 			if (default_slot) {
 				if (default_slot.p && (!current || dirty & /*$$scope*/ 4)) {
 					update_slot_base(
@@ -1006,6 +1059,8 @@ function create_if_block$3(ctx) {
 			current = false;
 		},
 		d(detaching) {
+			if (detaching) detach(div);
+			if (detaching) detach(t);
 			if (default_slot) default_slot.d(detaching);
 		}
 	};
@@ -1098,7 +1153,7 @@ function instance$g($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$g, create_fragment$g, safe_not_equal, { path: 0 });
+		init(this, options, instance$g, create_fragment$g, safe_not_equal, { path: 0 }, add_css$d);
 	}
 }
 
@@ -2183,8 +2238,8 @@ function create_fragment$b(ctx) {
 	let div1;
 	let div0;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[8].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[7], null);
+	const default_slot_template = /*#slots*/ ctx[9].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
 
 	return {
 		c() {
@@ -2194,7 +2249,12 @@ function create_fragment$b(ctx) {
 			this.h();
 		},
 		l(nodes) {
-			div1 = claim_element(nodes, "DIV", { class: true, style: true });
+			div1 = claim_element(nodes, "DIV", {
+				class: true,
+				"data-grid-item-id": true,
+				style: true
+			});
+
 			var div1_nodes = children(div1);
 			div0 = claim_element(div1_nodes, "DIV", { class: true });
 			var div0_nodes = children(div0);
@@ -2206,6 +2266,7 @@ function create_fragment$b(ctx) {
 		h() {
 			attr(div0, "class", "grid-item-inner svelte-n7kdl3");
 			attr(div1, "class", "grid-item svelte-n7kdl3");
+			attr(div1, "data-grid-item-id", /*gridItemId*/ ctx[1]);
 			attr(div1, "style", /*_style*/ ctx[0]);
 		},
 		m(target, anchor) {
@@ -2220,15 +2281,15 @@ function create_fragment$b(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 128)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[7],
+						/*$$scope*/ ctx[8],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[7])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[7], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
 						null
 					);
 				}
@@ -2263,23 +2324,30 @@ function instance$b($$self, $$props, $$invalidate) {
 	let { y2 } = $$props;
 	let { z } = $$props;
 	let { background = 'transparent' } = $$props;
+	let gridItemIdRaw = `${y1}-${x1}-${y2}-${x2}`;
+
+	if (z) {
+		gridItemIdRaw += `-${z}`;
+	}
+
+	const gridItemId = hashCode(gridItemIdRaw);
 
 	onMount(() => {
 		setMiximumZindex(z);
 	});
 
 	$$self.$$set = $$props => {
-		if ('x1' in $$props) $$invalidate(1, x1 = $$props.x1);
-		if ('x2' in $$props) $$invalidate(2, x2 = $$props.x2);
-		if ('y1' in $$props) $$invalidate(3, y1 = $$props.y1);
-		if ('y2' in $$props) $$invalidate(4, y2 = $$props.y2);
-		if ('z' in $$props) $$invalidate(5, z = $$props.z);
-		if ('background' in $$props) $$invalidate(6, background = $$props.background);
-		if ('$$scope' in $$props) $$invalidate(7, $$scope = $$props.$$scope);
+		if ('x1' in $$props) $$invalidate(2, x1 = $$props.x1);
+		if ('x2' in $$props) $$invalidate(3, x2 = $$props.x2);
+		if ('y1' in $$props) $$invalidate(4, y1 = $$props.y1);
+		if ('y2' in $$props) $$invalidate(5, y2 = $$props.y2);
+		if ('z' in $$props) $$invalidate(6, z = $$props.z);
+		if ('background' in $$props) $$invalidate(7, background = $$props.background);
+		if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*y1, x1, y2, x2, z, background*/ 126) {
+		if ($$self.$$.dirty & /*y1, x1, y2, x2, z, background*/ 252) {
 			$$invalidate(0, _style = [
 				`grid-area: ${y1 + 1} / ${x1 + 1} / ${y2 + 2} / ${x2 + 2}`,
 				`z-index: ${z}`,
@@ -2290,7 +2358,7 @@ function instance$b($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [_style, x1, x2, y1, y2, z, background, $$scope, slots];
+	return [_style, gridItemId, x1, x2, y1, y2, z, background, $$scope, slots];
 }
 
 class GridItem extends SvelteComponent {
@@ -2304,12 +2372,12 @@ class GridItem extends SvelteComponent {
 			create_fragment$b,
 			safe_not_equal,
 			{
-				x1: 1,
-				x2: 2,
-				y1: 3,
-				y2: 4,
-				z: 5,
-				background: 6
+				x1: 2,
+				x2: 3,
+				y1: 4,
+				y2: 5,
+				z: 6,
+				background: 7
 			},
 			add_css$a
 		);
@@ -3812,4 +3880,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, Alignments, AnimationStyles, BackgroundSizes, CONSTANTS, Cursors, DefaultListItemSize, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorNone, DefaultListSeparatorStripe, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, applyCss, applyGlobalCss, close, closeApp, closed, collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isPreview, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onDestroy, onScroll, onShow, onTime, randStr, runScript, send_event, setAutoStart, setMiximumZindex, setPreviousFocus, setState, show, showModal, showOnScroll, showOnTime, state, states, stopped, toBr };
+export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, Alignments, AnimationStyles, BackgroundSizes, Cursors, DefaultListItemSize, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorNone, DefaultListSeparatorStripe, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, applyCss, applyGlobalCss, close, closeApp, closed, collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getActionShadowRoot, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isPreview, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onDestroy, onScroll, onShow, onTime, randStr, runScript, send_event, setAutoStart, setMiximumZindex, setPreviousFocus, setState, show, showModal, showOnScroll, showOnTime, state, states, stopped, toBr };

package/dist/index.es.d.ts

@@ -78,6 +78,7 @@ type OperationArgumentTypes = {
     State: string;
     Url: string;
     Handler: string;
+    Trigger: string;
 };
 type OperationArgumentType = keyof OperationArgumentTypes;
 type BaseOperationOptions = ReadonlyArray<{
@@ -127,6 +128,10 @@ declare const OnClickOperationOptions: readonly [
     {
         readonly operation: "closeApp";
         readonly args: readonly [
+            {
+                readonly type: "Trigger";
+                readonly default: "button";
+            }
         ];
     },
     {
@@ -235,15 +240,14 @@ type OPTIONS = {
     isPreview?: boolean;
     initialState?: string;
 };
+type CloseTrigger = "button" | "overlay";
 type ActionEventHandler = (...args: any[]) => any | Promise<any>;
-declare const CONSTANTS: {
-    ALL_ACTION_ID: string;
-    STATE_EVENT: string;
-};
+declare const ALL_ACTION_ID = "KARTE_ALL_ACTION_ID";
 declare const actionId: string;
 declare const ACTION_SHOW_EVENT: string;
 declare const ACTION_CLOSE_EVENT: string;
 declare const ACTION_DESTROY_EVENT: string;
+declare const ACTION_CHANGE_STATE_EVENT: string;
 // Store to handle current state ID
 declare const state: Store<string>;
 // Store to handle all state IDs
@@ -284,7 +288,7 @@ declare const setMiximumZindex: (zindex?: number) => void;
 declare const none: () => () => void;
 declare const moveTo: (to: string) => () => void;
 declare const linkTo: (to: string, targetBlank?: boolean) => () => void;
-declare const closeApp: () => () => void;
+declare const closeApp: (trigger: CloseTrigger) => () => void;
 declare const runScript: (handlerName: string) => () => void;
 declare const execOnClickOperation: (onClickOperation: OnClickOperation) => void;
 declare const haveFunction: (onClickOperation: OnClickOperation) => boolean;
@@ -351,6 +355,14 @@ declare function applyGlobalCss(css: string): Promise<any>;
  * @param {string} href Link of style file
  */
 declare function loadGlobalStyle(href: string): Promise<any>;
+/**
+ * {@link hashCode} generate hash with FNV-1a hash
+ *
+ * @param {string} s Inputed string
+ * @return {string} Hashed string
+ * @see https://stackoverflow.com/a/22429679
+ */
+declare function hashCode(s: string): string;
 declare const handleFocus: (node: HTMLElement | null) => (e: any) => void;
 declare const setPreviousFocus: () => void;
 declare const handleKeydown: (handlers: {
@@ -441,7 +453,7 @@ interface ActionOptions<Props, Variables> {
      *
      * @default () => {}
      */
-    onClose?: (props: ActionProps<Props, Variables>) => void | Promise<void>;
+    onClose?: (props: ActionProps<Props, Variables>, trigger: CloseTrigger) => void | Promise<void>;
     /**
      * {@link onClose} function to hook the phase of changing action state in KARTE action.
      *
@@ -488,7 +500,7 @@ declare function show(): void;
  * Close KARTE action
  */
 declare function close(): void;
-declare const KARTE_ACTION_ROOT = "karte-modal-root";
+declare const KARTE_ACTION_ROOT = "karte-action-root";
 declare const KARTE_ACTION_RID = "karte-action-rid";
 declare function ensureActionRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
 /**
@@ -505,12 +517,13 @@ fn: (props: ActionProps<Props, Variables>) => void | Promise<void>): void;
  * {@link onClose} function to set the function to hook the phase before closing action.
  *
  * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ * @param {ClosePlace} fn Callback
  */
 declare function onClose<Props extends _Props, Variables>(/**
  * @param {ActionProps<Props, Variables>} props Properties of KARTE action
  * @returns {void|Promise<void>}
  */
-fn: (props: ActionProps<Props, Variables>) => void | Promise<void>): void;
+fn: (props: ActionProps<Props, Variables>, trigger: CloseTrigger) => void | Promise<void>): void;
 /**
  * {@link onDestory} function to set the function to hook the phase before destroying action.
  *
@@ -533,6 +546,9 @@ declare function onChangeState<Props extends _Props, Variables>(/**
  */
 fn: (props: ActionProps<Props, Variables>, newState: string) => void | Promise<void>): void;
 declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
+/**
+ * @deprecated
+ */
 declare function createFog({ color, opacity, zIndex, onclick }: {
     color?: string;
     opacity?: string;
@@ -544,6 +560,7 @@ declare function createFog({ color, opacity, zIndex, onclick }: {
 };
 type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
 declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
+declare function getActionShadowRoot(): ShadowRoot | null;
 /**
  * {@link applyCss} apply CSS to KARTE action.
  *
@@ -605,7 +622,7 @@ declare const collection: (config: {
     } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
     set(key: string, value: string, cb: (err: Error | null) => void): void;
 };
-export { Store, getStoreState, ActionEventHandler, CONSTANTS, actionId, ACTION_SHOW_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, state, states, closed, maximumZindex, internalHandlers, customHandlers, destroyed, stopped, customVariables, setAutoStart, setState, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, loadGlobalScript, applyGlobalCss, loadGlobalStyle, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, Style, StateName, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorStripe, DefaultListSeparator, ListDirection, ListItemSize, DefaultListItemSize, ListContext, hideOnScroll, hideOnTime, showOnScroll, showOnTime, NOOP, ActionProps, ActionOptions, create, dispatchDestroyEvent, destroy, show, close, KARTE_ACTION_ROOT, KARTE_ACTION_RID, ensureActionRoot, onShow, onClose, onDestroy, onChangeState, h, createFog, EmbedLogic, embed, applyCss, loadStyle, showModal, ModalOptions, KARTE_MODAL_ROOT, ensureModalRoot, AppOptions, App, createApp, collection };
+export { Store, getStoreState, CloseTrigger, ActionEventHandler, ALL_ACTION_ID, actionId, ACTION_SHOW_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_CHANGE_STATE_EVENT, state, states, closed, maximumZindex, internalHandlers, customHandlers, destroyed, stopped, customVariables, setAutoStart, setState, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, loadGlobalScript, applyGlobalCss, loadGlobalStyle, hashCode, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, Style, StateName, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorStripe, DefaultListSeparator, ListDirection, ListItemSize, DefaultListItemSize, ListContext, hideOnScroll, hideOnTime, showOnScroll, showOnTime, NOOP, ActionProps, ActionOptions, create, dispatchDestroyEvent, destroy, show, close, KARTE_ACTION_ROOT, KARTE_ACTION_RID, ensureActionRoot, onShow, onClose, onDestroy, onChangeState, h, createFog, EmbedLogic, embed, getActionShadowRoot, applyCss, loadStyle, showModal, ModalOptions, KARTE_MODAL_ROOT, ensureModalRoot, AppOptions, App, createApp, collection };
 export { default as State } from './components/State.svelte';
 export { default as StateItem } from './components/StateItem.svelte';
 export { default as Modal } from './components/Modal.svelte';

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { writable, get } from 'svelte/store';
 import { linear, elasticOut, cubicOut } from 'svelte/easing';
-import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, noop, element, attr, listen, is_function, append, add_render_callback, create_in_transition, svg_element, binding_callbacks, destroy_each, text, set_data, src_url_equal, null_to_empty } from 'svelte/internal';
+import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, element, attr, noop, listen, is_function, append, add_render_callback, create_in_transition, svg_element, binding_callbacks, destroy_each, text, set_data, src_url_equal, null_to_empty } from 'svelte/internal';
 import { createEventDispatcher, onMount, onDestroy as onDestroy$1, setContext, getContext } from 'svelte';
 
 /**
@@ -133,15 +133,13 @@ function randStr(digit = 8) {
  * UIから選択できる関数
  */
 const getStoreState = get;
-const CONSTANTS = {
-    ALL_ACTION_ID: 'KARTE_ALL_ACTION_ID',
-    STATE_EVENT: 'KARTE-ACTION-CHANGE-STATE',
-};
+const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
 const functionOptions = writable({});
 const actionId = randStr();
 const ACTION_SHOW_EVENT = `KARTE-ACTION-SHOW-${actionId}`;
 const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
 const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
+const ACTION_CHANGE_STATE_EVENT = `KARTE-ACTION-CHANGE-STATE-${actionId}`;
 // Store to handle current state ID
 const state = writable('/');
 // Store to handle all state IDs
@@ -169,7 +167,7 @@ const setAutoStart = (on = true) => {
     stopped.set(!on);
 };
 const setState = (event) => {
-    if (event.detail.actionId === actionId || event.detail.actionId === CONSTANTS.ALL_ACTION_ID) {
+    if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
         state.set(event.detail.to);
     }
 };
@@ -200,7 +198,7 @@ const setMiximumZindex = (zindex) => {
 const none = () => () => { };
 const moveTo = (to) => () => {
     send_event('_message_state_changed', { state: to });
-    window.dispatchEvent(new CustomEvent(CONSTANTS.STATE_EVENT, { detail: { to, actionId } }));
+    window.dispatchEvent(new CustomEvent(ACTION_CHANGE_STATE_EVENT, { detail: { to, actionId } }));
 };
 const linkTo = (to, targetBlank = true) => () => {
     send_event('message_click', { url: to });
@@ -211,8 +209,9 @@ const linkTo = (to, targetBlank = true) => () => {
         location.href = to;
     }
 };
-const closeApp = () => () => {
-    send_event('message_close', null);
+const closeApp = (trigger) => () => {
+    send_event('message_close', { trigger });
+    window.dispatchEvent(new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } }));
     closed.set(true);
 };
 const runScript = (handlerName) => () => {
@@ -235,7 +234,7 @@ const execOnClickOperation = (onClickOperation) => {
         moveTo(...onClickOperation.args)();
     }
     else if (onClickOperation.operation === 'closeApp') {
-        closeApp()();
+        closeApp(onClickOperation.args[0] || 'button')();
     }
     else if (onClickOperation.operation === 'runScript') {
         runScript(onClickOperation.args[0])();
@@ -350,6 +349,22 @@ async function loadGlobalStyle(href) {
         link.addEventListener('error', () => reject(link));
     });
 }
+/**
+ * {@link hashCode} generate hash with FNV-1a hash
+ *
+ * @param {string} s Inputed string
+ * @return {string} Hashed string
+ * @see https://stackoverflow.com/a/22429679
+ */
+function hashCode(s) {
+    const SEED = 0x41653150;
+    let hash = SEED;
+    Array.from(s).forEach((c, index) => {
+        hash ^= c.charCodeAt(index);
+        hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+    });
+    return ('0000000' + (hash >>> 0).toString(16)).substr(-8);
+}
 
 const PropTypes = [
     'BooleanKeyword',
@@ -407,7 +422,7 @@ const DefaultModalPlacement = {
         bottom: '0px',
     },
     backgroundOverlay: false,
-    backgroundClick: { operation: 'closeApp', args: [] },
+    backgroundClick: { operation: 'closeApp', args: ['overlay'] },
 };
 const OnClickOperationOptions = [
     {
@@ -438,7 +453,12 @@ const OnClickOperationOptions = [
     },
     {
         operation: 'closeApp',
-        args: [],
+        args: [
+            {
+                type: 'Trigger',
+                default: 'button',
+            },
+        ],
     },
     {
         operation: 'runScript',
@@ -570,26 +590,27 @@ function create(App, options = {
 }) {
     let app = null;
     const data = { ...options.props, ...options.variables };
-    const close = () => {
+    const close = (event = {}) => {
         if (!app) {
             return;
         }
         closed.set(true);
-        window.removeEventListener(CONSTANTS.STATE_EVENT, setState);
+        window.removeEventListener(ACTION_CHANGE_STATE_EVENT, setState);
+        const trigger = event.detail?.trigger ? event.detail?.trigger : 'button';
         if (options.onClose) {
-            options.onClose({ send: options.send, data });
+            options.onClose({ send: options.send, data }, trigger);
         }
         app.$destroy();
         app = null;
     };
     window.addEventListener(ACTION_CLOSE_EVENT, close);
-    const show = () => {
+    const show = (_event = {}) => {
         if (app) {
             return;
         }
         options.send('message_open');
         closed.set(false);
-        window.addEventListener(CONSTANTS.STATE_EVENT, setState);
+        window.addEventListener(ACTION_CHANGE_STATE_EVENT, setState);
         app = new App({
             target: ensureModalRoot(!false),
             hydrate: false,
@@ -650,7 +671,7 @@ function create(App, options = {
  * Dispatch the event to destroy KARTE action
  */
 function dispatchDestroyEvent() {
-    const event = new Event(ACTION_DESTROY_EVENT);
+    const event = new CustomEvent(ACTION_DESTROY_EVENT);
     window.dispatchEvent(event);
 }
 /**
@@ -664,22 +685,25 @@ function destroy() {
  * Show KARTE action
  */
 function show() {
-    const event = new Event(ACTION_SHOW_EVENT);
+    const event = new CustomEvent(ACTION_SHOW_EVENT);
     window.dispatchEvent(event);
 }
 /**
  * Close KARTE action
  */
 function close() {
-    const event = new Event(ACTION_CLOSE_EVENT);
+    const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger: 'button' } });
     window.dispatchEvent(event);
 }
-const KARTE_ACTION_ROOT = 'karte-modal-root';
+const KARTE_ACTION_ROOT = 'karte-action-root';
 const KARTE_ACTION_RID = 'karte-action-rid';
 function ensureActionRoot(useShadow = true) {
     let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
     if (el == null) {
-        el = h('div', { class: KARTE_MODAL_ROOT, [`data-${KARTE_ACTION_RID}`]: actionId });
+        el = h('div', {
+            class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
+            [`data-${KARTE_ACTION_RID}`]: actionId,
+        });
         document.body.appendChild(el);
     }
     const isShadow = !!document.body.attachShadow && useShadow;
@@ -710,6 +734,7 @@ fn) {
  * {@link onClose} function to set the function to hook the phase before closing action.
  *
  * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ * @param {ClosePlace} fn Callback
  */
 function onClose(
 /**
@@ -771,6 +796,9 @@ const h = (type, props, ...children) => {
     }
     return el;
 };
+/**
+ * @deprecated
+ */
 function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
     const root = ensureModalRoot(false);
     if (root.querySelector('.__krt-fog')) {
@@ -859,7 +887,7 @@ async function loadStyle(href) {
 }
 // -------- The following codes are deprecated --------
 const showModal = create; // @deprecated
-const KARTE_MODAL_ROOT = KARTE_ACTION_ROOT; // @deprecated
+const KARTE_MODAL_ROOT = 'karte-modal-root'; // @deprecated
 const ensureModalRoot = ensureActionRoot; // @deprecated
 /**
  * Create an application instance
@@ -974,14 +1002,14 @@ function request(url, data, cb) {
 
 /* src/components/Normalize.svelte generated by Svelte v3.53.1 */
 
-function add_css$d(target) {
+function add_css$e(target) {
 	append_styles(target, "svelte-tr4qnr", "@import 'https://esm.sh/normalize.css';");
 }
 
 class Normalize extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, null, null, safe_not_equal, {}, add_css$d);
+		init(this, options, null, null, safe_not_equal, {}, add_css$e);
 	}
 }
 
@@ -1065,16 +1093,30 @@ class State extends SvelteComponent {
 
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
 
+function add_css$d(target) {
+	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
+}
+
+// (14:0) {#if $state === path}
 function create_if_block$3(ctx) {
+	let div;
+	let t;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[3].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[2], null);
 
 	return {
 		c() {
+			div = element("div");
+			t = space();
 			if (default_slot) default_slot.c();
+			attr(div, "data-state-path", /*path*/ ctx[0]);
+			attr(div, "class", "state-item svelte-2qb6dm");
 		},
 		m(target, anchor) {
+			insert(target, div, anchor);
+			insert(target, t, anchor);
+
 			if (default_slot) {
 				default_slot.m(target, anchor);
 			}
@@ -1082,6 +1124,10 @@ function create_if_block$3(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
+			if (!current || dirty & /*path*/ 1) {
+				attr(div, "data-state-path", /*path*/ ctx[0]);
+			}
+
 			if (default_slot) {
 				if (default_slot.p && (!current || dirty & /*$$scope*/ 4)) {
 					update_slot_base(
@@ -1107,6 +1153,8 @@ function create_if_block$3(ctx) {
 			current = false;
 		},
 		d(detaching) {
+			if (detaching) detach(div);
+			if (detaching) detach(t);
 			if (default_slot) default_slot.d(detaching);
 		}
 	};
@@ -1195,7 +1243,7 @@ function instance$g($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$g, create_fragment$g, safe_not_equal, { path: 0 });
+		init(this, options, instance$g, create_fragment$g, safe_not_equal, { path: 0 }, add_css$d);
 	}
 }
 
@@ -2191,8 +2239,8 @@ function create_fragment$b(ctx) {
 	let div1;
 	let div0;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[8].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[7], null);
+	const default_slot_template = /*#slots*/ ctx[9].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
 
 	return {
 		c() {
@@ -2201,6 +2249,7 @@ function create_fragment$b(ctx) {
 			if (default_slot) default_slot.c();
 			attr(div0, "class", "grid-item-inner svelte-n7kdl3");
 			attr(div1, "class", "grid-item svelte-n7kdl3");
+			attr(div1, "data-grid-item-id", /*gridItemId*/ ctx[1]);
 			attr(div1, "style", /*_style*/ ctx[0]);
 		},
 		m(target, anchor) {
@@ -2215,15 +2264,15 @@ function create_fragment$b(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 128)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[7],
+						/*$$scope*/ ctx[8],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[7])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[7], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
 						null
 					);
 				}
@@ -2258,23 +2307,30 @@ function instance$b($$self, $$props, $$invalidate) {
 	let { y2 } = $$props;
 	let { z } = $$props;
 	let { background = 'transparent' } = $$props;
+	let gridItemIdRaw = `${y1}-${x1}-${y2}-${x2}`;
+
+	if (z) {
+		gridItemIdRaw += `-${z}`;
+	}
+
+	const gridItemId = hashCode(gridItemIdRaw);
 
 	onMount(() => {
 		setMiximumZindex(z);
 	});
 
 	$$self.$$set = $$props => {
-		if ('x1' in $$props) $$invalidate(1, x1 = $$props.x1);
-		if ('x2' in $$props) $$invalidate(2, x2 = $$props.x2);
-		if ('y1' in $$props) $$invalidate(3, y1 = $$props.y1);
-		if ('y2' in $$props) $$invalidate(4, y2 = $$props.y2);
-		if ('z' in $$props) $$invalidate(5, z = $$props.z);
-		if ('background' in $$props) $$invalidate(6, background = $$props.background);
-		if ('$$scope' in $$props) $$invalidate(7, $$scope = $$props.$$scope);
+		if ('x1' in $$props) $$invalidate(2, x1 = $$props.x1);
+		if ('x2' in $$props) $$invalidate(3, x2 = $$props.x2);
+		if ('y1' in $$props) $$invalidate(4, y1 = $$props.y1);
+		if ('y2' in $$props) $$invalidate(5, y2 = $$props.y2);
+		if ('z' in $$props) $$invalidate(6, z = $$props.z);
+		if ('background' in $$props) $$invalidate(7, background = $$props.background);
+		if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*y1, x1, y2, x2, z, background*/ 126) {
+		if ($$self.$$.dirty & /*y1, x1, y2, x2, z, background*/ 252) {
 			$$invalidate(0, _style = [
 				`grid-area: ${y1 + 1} / ${x1 + 1} / ${y2 + 2} / ${x2 + 2}`,
 				`z-index: ${z}`,
@@ -2285,7 +2341,7 @@ function instance$b($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [_style, x1, x2, y1, y2, z, background, $$scope, slots];
+	return [_style, gridItemId, x1, x2, y1, y2, z, background, $$scope, slots];
 }
 
 class GridItem extends SvelteComponent {
@@ -2299,12 +2355,12 @@ class GridItem extends SvelteComponent {
 			create_fragment$b,
 			safe_not_equal,
 			{
-				x1: 1,
-				x2: 2,
-				y1: 3,
-				y2: 4,
-				z: 5,
-				background: 6
+				x1: 2,
+				x2: 3,
+				y1: 4,
+				y2: 5,
+				z: 6,
+				background: 7
 			},
 			add_css$a
 		);
@@ -3658,4 +3714,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, Alignments, AnimationStyles, BackgroundSizes, CONSTANTS, Cursors, DefaultListItemSize, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorNone, DefaultListSeparatorStripe, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, applyCss, applyGlobalCss, close, closeApp, closed, collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isPreview, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onDestroy, onScroll, onShow, onTime, randStr, runScript, send_event, setAutoStart, setMiximumZindex, setPreviousFocus, setState, show, showModal, showOnScroll, showOnTime, state, states, stopped, toBr };
+export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, Alignments, AnimationStyles, BackgroundSizes, Cursors, DefaultListItemSize, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorNone, DefaultListSeparatorStripe, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, applyCss, applyGlobalCss, close, closeApp, closed, collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getActionShadowRoot, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isPreview, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onDestroy, onScroll, onShow, onTime, randStr, runScript, send_event, setAutoStart, setMiximumZindex, setPreviousFocus, setState, show, showModal, showOnScroll, showOnTime, state, states, stopped, toBr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.76",
+  "version": "1.1.77",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",