@elementor/session 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @elementor/session
+
+## 0.1.0
+
+### Minor Changes
+
+- 43f1684: Save previous link value in session

package/dist/index.d.mts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+
+declare const getSessionStorageItem: <T>(key: string) => T | undefined;
+declare const setSessionStorageItem: (key: string, item: unknown) => void;
+declare const removeSessionStorageItem: (key: string) => void;
+
+declare const useSessionStorage: <T>(key: string) => readonly [T | null | undefined, (newValue: T) => void, () => void];
+
+type ContextValue = {
+    prefix: string;
+};
+declare const Context: React.Context<ContextValue | null>;
+type Props = PropsWithChildren<ContextValue>;
+declare function SessionStorageProvider({ children, prefix }: Props): React.JSX.Element;
+
+export { Context, SessionStorageProvider, getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem, useSessionStorage };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+
+declare const getSessionStorageItem: <T>(key: string) => T | undefined;
+declare const setSessionStorageItem: (key: string, item: unknown) => void;
+declare const removeSessionStorageItem: (key: string) => void;
+
+declare const useSessionStorage: <T>(key: string) => readonly [T | null | undefined, (newValue: T) => void, () => void];
+
+type ContextValue = {
+    prefix: string;
+};
+declare const Context: React.Context<ContextValue | null>;
+type Props = PropsWithChildren<ContextValue>;
+declare function SessionStorageProvider({ children, prefix }: Props): React.JSX.Element;
+
+export { Context, SessionStorageProvider, getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem, useSessionStorage };

package/dist/index.js

@@ -0,0 +1,122 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Context: () => Context,
+  SessionStorageProvider: () => SessionStorageProvider,
+  getSessionStorageItem: () => getSessionStorageItem,
+  removeSessionStorageItem: () => removeSessionStorageItem,
+  setSessionStorageItem: () => setSessionStorageItem,
+  useSessionStorage: () => useSessionStorage
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/session-storage.ts
+var getSessionStorageItem = (key) => {
+  return JSON.parse(sessionStorage.getItem(key) || "{}")?.item;
+};
+var setSessionStorageItem = (key, item) => {
+  sessionStorage.setItem(key, JSON.stringify({ item }));
+  window.dispatchEvent(
+    new StorageEvent("storage", {
+      key,
+      storageArea: sessionStorage
+    })
+  );
+};
+var removeSessionStorageItem = (key) => {
+  sessionStorage.removeItem(key);
+  window.dispatchEvent(
+    new StorageEvent("storage", {
+      key,
+      storageArea: sessionStorage
+    })
+  );
+};
+
+// src/use-session-storage.ts
+var import_react2 = require("react");
+
+// src/session-storage-context.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var Context = (0, import_react.createContext)(null);
+function SessionStorageProvider({ children, prefix }) {
+  const contextPrefix = (0, import_react.useContext)(Context)?.prefix ?? "";
+  const chainedPrefix = contextPrefix ? `${contextPrefix}/${prefix}` : prefix;
+  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { prefix: chainedPrefix } }, children);
+}
+
+// src/use-session-storage.ts
+var useSessionStorage = (key) => {
+  const prefix = (0, import_react2.useContext)(Context)?.prefix ?? "";
+  const prefixedKey = `${prefix}/${key}`;
+  const [value, setValue] = (0, import_react2.useState)();
+  (0, import_react2.useEffect)(() => {
+    return subscribeToSessionStorage(prefixedKey, (newValue) => {
+      setValue(newValue ?? null);
+    });
+  }, [prefixedKey]);
+  const saveValue = (newValue) => {
+    setSessionStorageItem(prefixedKey, newValue);
+  };
+  const removeValue = () => {
+    removeSessionStorageItem(prefixedKey);
+  };
+  return [value, saveValue, removeValue];
+};
+var subscribeToSessionStorage = (key, subscriber) => {
+  subscriber(getSessionStorageItem(key));
+  const abortController = new AbortController();
+  window.addEventListener(
+    "storage",
+    (e) => {
+      if (e.key !== key || e.storageArea !== sessionStorage) {
+        return;
+      }
+      subscriber(getSessionStorageItem(key));
+    },
+    { signal: abortController.signal }
+  );
+  return () => {
+    abortController.abort();
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Context,
+  SessionStorageProvider,
+  getSessionStorageItem,
+  removeSessionStorageItem,
+  setSessionStorageItem,
+  useSessionStorage
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/session-storage.ts","../src/use-session-storage.ts","../src/session-storage-context.tsx"],"sourcesContent":["export * from './session-storage';\nexport * from './use-session-storage';\nexport * from './session-storage-context';\n","export const getSessionStorageItem = < T >( key: string ): T | undefined => {\n\treturn JSON.parse( sessionStorage.getItem( key ) || '{}' )?.item;\n};\n\nexport const setSessionStorageItem = ( key: string, item: unknown ) => {\n\tsessionStorage.setItem( key, JSON.stringify( { item } ) );\n\n\t// The browser doesn't dispatch the `storage` event for the current tab,\n\t// so we need to dispatch it manually.\n\t//\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event\n\twindow.dispatchEvent(\n\t\tnew StorageEvent( 'storage', {\n\t\t\tkey,\n\t\t\tstorageArea: sessionStorage,\n\t\t} )\n\t);\n};\n\nexport const removeSessionStorageItem = ( key: string ) => {\n\tsessionStorage.removeItem( key );\n\n\t// The browser doesn't dispatch the `storage` event for the current tab,\n\t// so we need to dispatch it manually.\n\t//\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event\n\twindow.dispatchEvent(\n\t\tnew StorageEvent( 'storage', {\n\t\t\tkey,\n\t\t\tstorageArea: sessionStorage,\n\t\t} )\n\t);\n};\n","import { useContext, useEffect, useState } from 'react';\n\nimport { getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem } from './session-storage';\nimport { Context } from './session-storage-context';\n\nexport const useSessionStorage = < T >( key: string ) => {\n\tconst prefix = useContext( Context )?.prefix ?? '';\n\tconst prefixedKey = `${ prefix }/${ key }`;\n\n\tconst [ value, setValue ] = useState< T | null >();\n\n\tuseEffect( () => {\n\t\treturn subscribeToSessionStorage< T | null >( prefixedKey, ( newValue ) => {\n\t\t\tsetValue( newValue ?? null );\n\t\t} );\n\t}, [ prefixedKey ] );\n\n\tconst saveValue = ( newValue: T ) => {\n\t\tsetSessionStorageItem( prefixedKey, newValue );\n\t};\n\n\tconst removeValue = () => {\n\t\tremoveSessionStorageItem( prefixedKey );\n\t};\n\n\treturn [ value, saveValue, removeValue ] as const;\n};\n\nconst subscribeToSessionStorage = < T >( key: string, subscriber: ( value: T ) => void ) => {\n\tsubscriber( getSessionStorageItem( key ) as T );\n\n\tconst abortController = new AbortController();\n\n\twindow.addEventListener(\n\t\t'storage',\n\t\t( e ) => {\n\t\t\tif ( e.key !== key || e.storageArea !== sessionStorage ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsubscriber( getSessionStorageItem( key ) as T );\n\t\t},\n\t\t{ signal: abortController.signal }\n\t);\n\n\treturn () => {\n\t\tabortController.abort();\n\t};\n};\n","import * as React from 'react';\nimport { createContext, type PropsWithChildren, useContext } from 'react';\n\ntype ContextValue = {\n\tprefix: string;\n};\n\nexport const Context = createContext< ContextValue | null >( null );\n\ntype Props = PropsWithChildren< ContextValue >;\n\nexport function SessionStorageProvider( { children, prefix }: Props ) {\n\tconst contextPrefix = useContext( Context )?.prefix ?? '';\n\tconst chainedPrefix = contextPrefix ? `${ contextPrefix }/${ prefix }` : prefix;\n\n\treturn <Context.Provider value={ { prefix: chainedPrefix } }>{ children }</Context.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,wBAAwB,CAAO,QAAgC;AAC3E,SAAO,KAAK,MAAO,eAAe,QAAS,GAAI,KAAK,IAAK,GAAG;AAC7D;AAEO,IAAM,wBAAwB,CAAE,KAAa,SAAmB;AACtE,iBAAe,QAAS,KAAK,KAAK,UAAW,EAAE,KAAK,CAAE,CAAE;AAMxD,SAAO;AAAA,IACN,IAAI,aAAc,WAAW;AAAA,MAC5B;AAAA,MACA,aAAa;AAAA,IACd,CAAE;AAAA,EACH;AACD;AAEO,IAAM,2BAA2B,CAAE,QAAiB;AAC1D,iBAAe,WAAY,GAAI;AAM/B,SAAO;AAAA,IACN,IAAI,aAAc,WAAW;AAAA,MAC5B;AAAA,MACA,aAAa;AAAA,IACd,CAAE;AAAA,EACH;AACD;;;AChCA,IAAAA,gBAAgD;;;ACAhD,YAAuB;AACvB,mBAAkE;AAM3D,IAAM,cAAU,4BAAsC,IAAK;AAI3D,SAAS,uBAAwB,EAAE,UAAU,OAAO,GAAW;AACrE,QAAM,oBAAgB,yBAAY,OAAQ,GAAG,UAAU;AACvD,QAAM,gBAAgB,gBAAgB,GAAI,aAAc,IAAK,MAAO,KAAK;AAEzE,SAAO,oCAAC,QAAQ,UAAR,EAAiB,OAAQ,EAAE,QAAQ,cAAc,KAAM,QAAU;AAC1E;;;ADXO,IAAM,oBAAoB,CAAO,QAAiB;AACxD,QAAM,aAAS,0BAAY,OAAQ,GAAG,UAAU;AAChD,QAAM,cAAc,GAAI,MAAO,IAAK,GAAI;AAExC,QAAM,CAAE,OAAO,QAAS,QAAI,wBAAqB;AAEjD,+BAAW,MAAM;AAChB,WAAO,0BAAuC,aAAa,CAAE,aAAc;AAC1E,eAAU,YAAY,IAAK;AAAA,IAC5B,CAAE;AAAA,EACH,GAAG,CAAE,WAAY,CAAE;AAEnB,QAAM,YAAY,CAAE,aAAiB;AACpC,0BAAuB,aAAa,QAAS;AAAA,EAC9C;AAEA,QAAM,cAAc,MAAM;AACzB,6BAA0B,WAAY;AAAA,EACvC;AAEA,SAAO,CAAE,OAAO,WAAW,WAAY;AACxC;AAEA,IAAM,4BAA4B,CAAO,KAAa,eAAsC;AAC3F,aAAY,sBAAuB,GAAI,CAAO;AAE9C,QAAM,kBAAkB,IAAI,gBAAgB;AAE5C,SAAO;AAAA,IACN;AAAA,IACA,CAAE,MAAO;AACR,UAAK,EAAE,QAAQ,OAAO,EAAE,gBAAgB,gBAAiB;AACxD;AAAA,MACD;AAEA,iBAAY,sBAAuB,GAAI,CAAO;AAAA,IAC/C;AAAA,IACA,EAAE,QAAQ,gBAAgB,OAAO;AAAA,EAClC;AAEA,SAAO,MAAM;AACZ,oBAAgB,MAAM;AAAA,EACvB;AACD;","names":["import_react"]}

package/dist/index.mjs

@@ -0,0 +1,80 @@
+// src/session-storage.ts
+var getSessionStorageItem = (key) => {
+  return JSON.parse(sessionStorage.getItem(key) || "{}")?.item;
+};
+var setSessionStorageItem = (key, item) => {
+  sessionStorage.setItem(key, JSON.stringify({ item }));
+  window.dispatchEvent(
+    new StorageEvent("storage", {
+      key,
+      storageArea: sessionStorage
+    })
+  );
+};
+var removeSessionStorageItem = (key) => {
+  sessionStorage.removeItem(key);
+  window.dispatchEvent(
+    new StorageEvent("storage", {
+      key,
+      storageArea: sessionStorage
+    })
+  );
+};
+
+// src/use-session-storage.ts
+import { useContext as useContext2, useEffect, useState } from "react";
+
+// src/session-storage-context.tsx
+import * as React from "react";
+import { createContext, useContext } from "react";
+var Context = createContext(null);
+function SessionStorageProvider({ children, prefix }) {
+  const contextPrefix = useContext(Context)?.prefix ?? "";
+  const chainedPrefix = contextPrefix ? `${contextPrefix}/${prefix}` : prefix;
+  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { prefix: chainedPrefix } }, children);
+}
+
+// src/use-session-storage.ts
+var useSessionStorage = (key) => {
+  const prefix = useContext2(Context)?.prefix ?? "";
+  const prefixedKey = `${prefix}/${key}`;
+  const [value, setValue] = useState();
+  useEffect(() => {
+    return subscribeToSessionStorage(prefixedKey, (newValue) => {
+      setValue(newValue ?? null);
+    });
+  }, [prefixedKey]);
+  const saveValue = (newValue) => {
+    setSessionStorageItem(prefixedKey, newValue);
+  };
+  const removeValue = () => {
+    removeSessionStorageItem(prefixedKey);
+  };
+  return [value, saveValue, removeValue];
+};
+var subscribeToSessionStorage = (key, subscriber) => {
+  subscriber(getSessionStorageItem(key));
+  const abortController = new AbortController();
+  window.addEventListener(
+    "storage",
+    (e) => {
+      if (e.key !== key || e.storageArea !== sessionStorage) {
+        return;
+      }
+      subscriber(getSessionStorageItem(key));
+    },
+    { signal: abortController.signal }
+  );
+  return () => {
+    abortController.abort();
+  };
+};
+export {
+  Context,
+  SessionStorageProvider,
+  getSessionStorageItem,
+  removeSessionStorageItem,
+  setSessionStorageItem,
+  useSessionStorage
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/session-storage.ts","../src/use-session-storage.ts","../src/session-storage-context.tsx"],"sourcesContent":["export const getSessionStorageItem = < T >( key: string ): T | undefined => {\n\treturn JSON.parse( sessionStorage.getItem( key ) || '{}' )?.item;\n};\n\nexport const setSessionStorageItem = ( key: string, item: unknown ) => {\n\tsessionStorage.setItem( key, JSON.stringify( { item } ) );\n\n\t// The browser doesn't dispatch the `storage` event for the current tab,\n\t// so we need to dispatch it manually.\n\t//\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event\n\twindow.dispatchEvent(\n\t\tnew StorageEvent( 'storage', {\n\t\t\tkey,\n\t\t\tstorageArea: sessionStorage,\n\t\t} )\n\t);\n};\n\nexport const removeSessionStorageItem = ( key: string ) => {\n\tsessionStorage.removeItem( key );\n\n\t// The browser doesn't dispatch the `storage` event for the current tab,\n\t// so we need to dispatch it manually.\n\t//\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event\n\twindow.dispatchEvent(\n\t\tnew StorageEvent( 'storage', {\n\t\t\tkey,\n\t\t\tstorageArea: sessionStorage,\n\t\t} )\n\t);\n};\n","import { useContext, useEffect, useState } from 'react';\n\nimport { getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem } from './session-storage';\nimport { Context } from './session-storage-context';\n\nexport const useSessionStorage = < T >( key: string ) => {\n\tconst prefix = useContext( Context )?.prefix ?? '';\n\tconst prefixedKey = `${ prefix }/${ key }`;\n\n\tconst [ value, setValue ] = useState< T | null >();\n\n\tuseEffect( () => {\n\t\treturn subscribeToSessionStorage< T | null >( prefixedKey, ( newValue ) => {\n\t\t\tsetValue( newValue ?? null );\n\t\t} );\n\t}, [ prefixedKey ] );\n\n\tconst saveValue = ( newValue: T ) => {\n\t\tsetSessionStorageItem( prefixedKey, newValue );\n\t};\n\n\tconst removeValue = () => {\n\t\tremoveSessionStorageItem( prefixedKey );\n\t};\n\n\treturn [ value, saveValue, removeValue ] as const;\n};\n\nconst subscribeToSessionStorage = < T >( key: string, subscriber: ( value: T ) => void ) => {\n\tsubscriber( getSessionStorageItem( key ) as T );\n\n\tconst abortController = new AbortController();\n\n\twindow.addEventListener(\n\t\t'storage',\n\t\t( e ) => {\n\t\t\tif ( e.key !== key || e.storageArea !== sessionStorage ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsubscriber( getSessionStorageItem( key ) as T );\n\t\t},\n\t\t{ signal: abortController.signal }\n\t);\n\n\treturn () => {\n\t\tabortController.abort();\n\t};\n};\n","import * as React from 'react';\nimport { createContext, type PropsWithChildren, useContext } from 'react';\n\ntype ContextValue = {\n\tprefix: string;\n};\n\nexport const Context = createContext< ContextValue | null >( null );\n\ntype Props = PropsWithChildren< ContextValue >;\n\nexport function SessionStorageProvider( { children, prefix }: Props ) {\n\tconst contextPrefix = useContext( Context )?.prefix ?? '';\n\tconst chainedPrefix = contextPrefix ? `${ contextPrefix }/${ prefix }` : prefix;\n\n\treturn <Context.Provider value={ { prefix: chainedPrefix } }>{ children }</Context.Provider>;\n}\n"],"mappings":";AAAO,IAAM,wBAAwB,CAAO,QAAgC;AAC3E,SAAO,KAAK,MAAO,eAAe,QAAS,GAAI,KAAK,IAAK,GAAG;AAC7D;AAEO,IAAM,wBAAwB,CAAE,KAAa,SAAmB;AACtE,iBAAe,QAAS,KAAK,KAAK,UAAW,EAAE,KAAK,CAAE,CAAE;AAMxD,SAAO;AAAA,IACN,IAAI,aAAc,WAAW;AAAA,MAC5B;AAAA,MACA,aAAa;AAAA,IACd,CAAE;AAAA,EACH;AACD;AAEO,IAAM,2BAA2B,CAAE,QAAiB;AAC1D,iBAAe,WAAY,GAAI;AAM/B,SAAO;AAAA,IACN,IAAI,aAAc,WAAW;AAAA,MAC5B;AAAA,MACA,aAAa;AAAA,IACd,CAAE;AAAA,EACH;AACD;;;AChCA,SAAS,cAAAA,aAAY,WAAW,gBAAgB;;;ACAhD,YAAY,WAAW;AACvB,SAAS,eAAuC,kBAAkB;AAM3D,IAAM,UAAU,cAAsC,IAAK;AAI3D,SAAS,uBAAwB,EAAE,UAAU,OAAO,GAAW;AACrE,QAAM,gBAAgB,WAAY,OAAQ,GAAG,UAAU;AACvD,QAAM,gBAAgB,gBAAgB,GAAI,aAAc,IAAK,MAAO,KAAK;AAEzE,SAAO,oCAAC,QAAQ,UAAR,EAAiB,OAAQ,EAAE,QAAQ,cAAc,KAAM,QAAU;AAC1E;;;ADXO,IAAM,oBAAoB,CAAO,QAAiB;AACxD,QAAM,SAASC,YAAY,OAAQ,GAAG,UAAU;AAChD,QAAM,cAAc,GAAI,MAAO,IAAK,GAAI;AAExC,QAAM,CAAE,OAAO,QAAS,IAAI,SAAqB;AAEjD,YAAW,MAAM;AAChB,WAAO,0BAAuC,aAAa,CAAE,aAAc;AAC1E,eAAU,YAAY,IAAK;AAAA,IAC5B,CAAE;AAAA,EACH,GAAG,CAAE,WAAY,CAAE;AAEnB,QAAM,YAAY,CAAE,aAAiB;AACpC,0BAAuB,aAAa,QAAS;AAAA,EAC9C;AAEA,QAAM,cAAc,MAAM;AACzB,6BAA0B,WAAY;AAAA,EACvC;AAEA,SAAO,CAAE,OAAO,WAAW,WAAY;AACxC;AAEA,IAAM,4BAA4B,CAAO,KAAa,eAAsC;AAC3F,aAAY,sBAAuB,GAAI,CAAO;AAE9C,QAAM,kBAAkB,IAAI,gBAAgB;AAE5C,SAAO;AAAA,IACN;AAAA,IACA,CAAE,MAAO;AACR,UAAK,EAAE,QAAQ,OAAO,EAAE,gBAAgB,gBAAiB;AACxD;AAAA,MACD;AAEA,iBAAY,sBAAuB,GAAI,CAAO;AAAA,IAC/C;AAAA,IACA,EAAE,QAAQ,gBAAgB,OAAO;AAAA,EAClC;AAEA,SAAO,MAAM;AACZ,oBAAgB,MAAM;AAAA,EACvB;AACD;","names":["useContext","useContext"]}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@elementor/session",
+  "description": "This package provides a session management utility.",
+  "version": "0.1.0",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/libs/session"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './session-storage';
+export * from './use-session-storage';
+export * from './session-storage-context';

package/src/session-storage-context.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
+
+type ContextValue = {
+	prefix: string;
+};
+
+export const Context = createContext< ContextValue | null >( null );
+
+type Props = PropsWithChildren< ContextValue >;
+
+export function SessionStorageProvider( { children, prefix }: Props ) {
+	const contextPrefix = useContext( Context )?.prefix ?? '';
+	const chainedPrefix = contextPrefix ? `${ contextPrefix }/${ prefix }` : prefix;
+
+	return <Context.Provider value={ { prefix: chainedPrefix } }>{ children }</Context.Provider>;
+}

package/src/session-storage.ts

@@ -0,0 +1,33 @@
+export const getSessionStorageItem = < T >( key: string ): T | undefined => {
+	return JSON.parse( sessionStorage.getItem( key ) || '{}' )?.item;
+};
+
+export const setSessionStorageItem = ( key: string, item: unknown ) => {
+	sessionStorage.setItem( key, JSON.stringify( { item } ) );
+
+	// The browser doesn't dispatch the `storage` event for the current tab,
+	// so we need to dispatch it manually.
+	//
+	// https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
+	window.dispatchEvent(
+		new StorageEvent( 'storage', {
+			key,
+			storageArea: sessionStorage,
+		} )
+	);
+};
+
+export const removeSessionStorageItem = ( key: string ) => {
+	sessionStorage.removeItem( key );
+
+	// The browser doesn't dispatch the `storage` event for the current tab,
+	// so we need to dispatch it manually.
+	//
+	// https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
+	window.dispatchEvent(
+		new StorageEvent( 'storage', {
+			key,
+			storageArea: sessionStorage,
+		} )
+	);
+};

package/src/use-session-storage.ts

@@ -0,0 +1,49 @@
+import { useContext, useEffect, useState } from 'react';
+
+import { getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem } from './session-storage';
+import { Context } from './session-storage-context';
+
+export const useSessionStorage = < T >( key: string ) => {
+	const prefix = useContext( Context )?.prefix ?? '';
+	const prefixedKey = `${ prefix }/${ key }`;
+
+	const [ value, setValue ] = useState< T | null >();
+
+	useEffect( () => {
+		return subscribeToSessionStorage< T | null >( prefixedKey, ( newValue ) => {
+			setValue( newValue ?? null );
+		} );
+	}, [ prefixedKey ] );
+
+	const saveValue = ( newValue: T ) => {
+		setSessionStorageItem( prefixedKey, newValue );
+	};
+
+	const removeValue = () => {
+		removeSessionStorageItem( prefixedKey );
+	};
+
+	return [ value, saveValue, removeValue ] as const;
+};
+
+const subscribeToSessionStorage = < T >( key: string, subscriber: ( value: T ) => void ) => {
+	subscriber( getSessionStorageItem( key ) as T );
+
+	const abortController = new AbortController();
+
+	window.addEventListener(
+		'storage',
+		( e ) => {
+			if ( e.key !== key || e.storageArea !== sessionStorage ) {
+				return;
+			}
+
+			subscriber( getSessionStorageItem( key ) as T );
+		},
+		{ signal: abortController.signal }
+	);
+
+	return () => {
+		abortController.abort();
+	};
+};