@creopse/react 0.0.10 → 0.0.12

package/dist/hooks/index.cjs

@@ -1,50 +1,33 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-ZewuA4XM.cjs");
-const React = require("react");
+const index = require("../index-hI__ihu3.cjs");
 const react = require("@inertiajs/react");
-const useProps = () => {
-  const manager = React.useContext(index.PropsContext);
-  if (!manager) {
-    throw new Error("[@creopse/react] CreopseProvider not found in tree");
-  }
-  const [props, setProps] = React.useState(manager.getState().props);
-  React.useEffect(() => {
-    const unsubscribe = manager.subscribe((newProps) => {
-      setProps(newProps);
-    });
-    return unsubscribe;
-  }, [manager]);
-  return props;
-};
+const React = require("react");
 const useContent = () => {
   const { request } = index.useApi();
   const { fileUrl } = index.useHelper();
+  const props = index.useProps();
   const page = react.usePage();
   const resolveSections = React.useContext(index.ResolveSectionsContext);
-  const getProps = React.useCallback(
-    () => page.props,
-    [page.props]
-  );
   const pageData = React.useMemo(
-    () => page.props.pageData,
-    [page.props.pageData]
+    () => props.pageData,
+    [props.pageData]
   );
   const newsArticle = React.useMemo(
-    () => page.props.article,
-    [page.props.article]
+    () => props.article,
+    [props.article]
   );
   const newsCategory = React.useMemo(
-    () => page.props.category,
-    [page.props.category]
+    () => props.category,
+    [props.category]
   );
   const newsTag = React.useMemo(
-    () => page.props.tag,
-    [page.props.tag]
+    () => props.tag,
+    [props.tag]
   );
   const contentModelItem = React.useMemo(
-    () => page.props.contentModelItem,
-    [page.props.contentModelItem]
+    () => props.contentModelItem,
+    [props.contentModelItem]
   );
   const getSectionData = React.useCallback(
     (key) => {
@@ -52,11 +35,11 @@ const useContent = () => {
       const keyParts = key.split("__");
       const slug = keyParts.length ? keyParts[0] : "";
       const linkId = keyParts.length > 1 ? keyParts[1] : "";
-      return page.props.pageData?.sections?.find(
+      return props.pageData?.sections?.find(
         (section) => section.slug === slug && section.pivot?.linkId === linkId
       )?.pivot?.data || null;
     },
-    [page.props.pageData?.sections]
+    [props.pageData?.sections]
   );
   const getSectionRootData = React.useCallback(
     (key) => getSectionData(key)?.index,
@@ -68,11 +51,11 @@ const useContent = () => {
       const keyParts = key.split("__");
       const slug = keyParts.length ? keyParts[0] : "";
       const linkId = keyParts.length > 1 ? keyParts[1] : "";
-      return page.props.pageData?.sections?.find(
+      return props.pageData?.sections?.find(
         (section) => section.slug === slug && section.pivot?.linkId === linkId
       )?.pivot?.settings || null;
     },
-    [page.props.pageData?.sections]
+    [props.pageData?.sections]
   );
   const getSectionSettingsGroup = React.useCallback(
     (key, group) => {
@@ -143,11 +126,11 @@ const useContent = () => {
   }, [resolveSections]);
   const getContentModel = React.useCallback(
     (name) => {
-      return page.props?.contentModels?.find(
+      return props?.contentModels?.find(
         (contentModel) => contentModel.name === name
       );
     },
-    [page.props?.contentModels]
+    [props?.contentModels]
   );
   const formatContentModelItemData = React.useCallback(
     (item) => {
@@ -203,7 +186,7 @@ const useContent = () => {
   );
   const getMenu = React.useCallback(
     (name, filterByIsActive = true) => {
-      const menu = page.props?.menus?.find((menu2) => menu2.name === name);
+      const menu = props?.menus?.find((menu2) => menu2.name === name);
       if (menu) {
         menu.items = index.cloneDeep(
           menu.items?.filter((item) => !filterByIsActive || item.isActive)?.sort((a, b) => a.position - b.position)
@@ -211,13 +194,11 @@ const useContent = () => {
       }
       return menu;
     },
-    [page.props?.menus]
+    [props?.menus]
   );
   const getMenuByLocation = React.useCallback(
     (name, filterByIsActive = true) => {
-      const menu = page.props?.menus?.find(
-        (menu2) => menu2.location?.name === name
-      );
+      const menu = props?.menus?.find((menu2) => menu2.location?.name === name);
       if (menu) {
         menu.items = index.cloneDeep(
           menu.items?.filter((item) => !filterByIsActive || item.isActive)?.sort((a, b) => a.position - b.position)
@@ -225,7 +206,7 @@ const useContent = () => {
       }
       return menu;
     },
-    [page.props?.menus]
+    [props?.menus]
   );
   const getMenuItems = React.useCallback(
     (name, filterByIsVisible = true) => {
@@ -236,13 +217,13 @@ const useContent = () => {
   const getMenuItemById = React.useCallback(
     (id) => {
       const menuItems = [];
-      const menus = page.props?.menus || [];
+      const menus = props?.menus || [];
       menus.forEach((menu) => {
         if (Array.isArray(menu.items)) menuItems.push(...menu.items);
       });
       return menuItems.find((item) => item.id === id);
     },
-    [page.props?.menus]
+    [props?.menus]
   );
   const getMenuItemsByLocation = React.useCallback(
     (name, filterByIsVisible = true) => {
@@ -260,7 +241,7 @@ const useContent = () => {
             (group) => group.id === item.menuItemGroupId
           );
           if (!groupAlreadyExists) {
-            const group = page.props?.menuItemGroups?.find(
+            const group = props?.menuItemGroups?.find(
               (group2) => group2.id === item.menuItemGroupId
             );
             if (group) groups.push(group);
@@ -269,7 +250,7 @@ const useContent = () => {
       }
       return groups;
     },
-    [getMenuItems, getMenuItemsByLocation, page.props?.menuItemGroups]
+    [getMenuItems, getMenuItemsByLocation, props?.menuItemGroups]
   );
   const getMenuItemsByGroup = React.useCallback(
     (name, groupId, byLocation = false, filterByIsVisible = true) => {
@@ -302,7 +283,7 @@ const useContent = () => {
   );
   const getAppInformationValue = React.useCallback(
     (key, type = "string") => {
-      const appInformation = page.props.appInformation;
+      const appInformation = props.appInformation;
       const setting = appInformation.find((s) => s.key === key);
       let value = "";
       switch (type) {
@@ -324,7 +305,7 @@ const useContent = () => {
       }
       return value;
     },
-    [page.props.appInformation]
+    [props.appInformation]
   );
   const appPrimaryColor = React.useMemo(() => {
     const primaryColor = getAppInformationValue(
@@ -359,7 +340,6 @@ const useContent = () => {
     newsCategory,
     newsTag,
     contentModelItem,
-    getProps,
     getMenu,
     getMenuByLocation,
     getMenuItems,
@@ -433,6 +413,6 @@ const useNewsletter = () => {
 exports.useApi = index.useApi;
 exports.useConfig = index.useConfig;
 exports.useHelper = index.useHelper;
+exports.useProps = index.useProps;
 exports.useContent = useContent;
 exports.useNewsletter = useNewsletter;
-exports.useProps = useProps;

package/dist/hooks/index.mjs

@@ -1,49 +1,32 @@
-import { P as PropsContext, b as useApi, u as useHelper, a as ResolveSectionsContext, c as cloneDeep } from "../index-4XGApE5d.js";
-import { d } from "../index-4XGApE5d.js";
-import { useContext, useState, useEffect, useCallback, useMemo } from "react";
+import { c as useApi, u as useHelper, a as useProps, b as ResolveSectionsContext, d as cloneDeep } from "../index-jw_2nhs3.js";
+import { e } from "../index-jw_2nhs3.js";
 import { usePage } from "@inertiajs/react";
-const useProps = () => {
-  const manager = useContext(PropsContext);
-  if (!manager) {
-    throw new Error("[@creopse/react] CreopseProvider not found in tree");
-  }
-  const [props, setProps] = useState(manager.getState().props);
-  useEffect(() => {
-    const unsubscribe = manager.subscribe((newProps) => {
-      setProps(newProps);
-    });
-    return unsubscribe;
-  }, [manager]);
-  return props;
-};
+import { useContext, useMemo, useCallback, useState } from "react";
 const useContent = () => {
   const { request } = useApi();
   const { fileUrl } = useHelper();
+  const props = useProps();
   const page = usePage();
   const resolveSections = useContext(ResolveSectionsContext);
-  const getProps = useCallback(
-    () => page.props,
-    [page.props]
-  );
   const pageData = useMemo(
-    () => page.props.pageData,
-    [page.props.pageData]
+    () => props.pageData,
+    [props.pageData]
   );
   const newsArticle = useMemo(
-    () => page.props.article,
-    [page.props.article]
+    () => props.article,
+    [props.article]
   );
   const newsCategory = useMemo(
-    () => page.props.category,
-    [page.props.category]
+    () => props.category,
+    [props.category]
   );
   const newsTag = useMemo(
-    () => page.props.tag,
-    [page.props.tag]
+    () => props.tag,
+    [props.tag]
   );
   const contentModelItem = useMemo(
-    () => page.props.contentModelItem,
-    [page.props.contentModelItem]
+    () => props.contentModelItem,
+    [props.contentModelItem]
   );
   const getSectionData = useCallback(
     (key) => {
@@ -51,11 +34,11 @@ const useContent = () => {
       const keyParts = key.split("__");
       const slug = keyParts.length ? keyParts[0] : "";
       const linkId = keyParts.length > 1 ? keyParts[1] : "";
-      return page.props.pageData?.sections?.find(
+      return props.pageData?.sections?.find(
         (section) => section.slug === slug && section.pivot?.linkId === linkId
       )?.pivot?.data || null;
     },
-    [page.props.pageData?.sections]
+    [props.pageData?.sections]
   );
   const getSectionRootData = useCallback(
     (key) => getSectionData(key)?.index,
@@ -67,11 +50,11 @@ const useContent = () => {
       const keyParts = key.split("__");
       const slug = keyParts.length ? keyParts[0] : "";
       const linkId = keyParts.length > 1 ? keyParts[1] : "";
-      return page.props.pageData?.sections?.find(
+      return props.pageData?.sections?.find(
         (section) => section.slug === slug && section.pivot?.linkId === linkId
       )?.pivot?.settings || null;
     },
-    [page.props.pageData?.sections]
+    [props.pageData?.sections]
   );
   const getSectionSettingsGroup = useCallback(
     (key, group) => {
@@ -142,11 +125,11 @@ const useContent = () => {
   }, [resolveSections]);
   const getContentModel = useCallback(
     (name) => {
-      return page.props?.contentModels?.find(
+      return props?.contentModels?.find(
         (contentModel) => contentModel.name === name
       );
     },
-    [page.props?.contentModels]
+    [props?.contentModels]
   );
   const formatContentModelItemData = useCallback(
     (item) => {
@@ -202,7 +185,7 @@ const useContent = () => {
   );
   const getMenu = useCallback(
     (name, filterByIsActive = true) => {
-      const menu = page.props?.menus?.find((menu2) => menu2.name === name);
+      const menu = props?.menus?.find((menu2) => menu2.name === name);
       if (menu) {
         menu.items = cloneDeep(
           menu.items?.filter((item) => !filterByIsActive || item.isActive)?.sort((a, b) => a.position - b.position)
@@ -210,13 +193,11 @@ const useContent = () => {
       }
       return menu;
     },
-    [page.props?.menus]
+    [props?.menus]
   );
   const getMenuByLocation = useCallback(
     (name, filterByIsActive = true) => {
-      const menu = page.props?.menus?.find(
-        (menu2) => menu2.location?.name === name
-      );
+      const menu = props?.menus?.find((menu2) => menu2.location?.name === name);
       if (menu) {
         menu.items = cloneDeep(
           menu.items?.filter((item) => !filterByIsActive || item.isActive)?.sort((a, b) => a.position - b.position)
@@ -224,7 +205,7 @@ const useContent = () => {
       }
       return menu;
     },
-    [page.props?.menus]
+    [props?.menus]
   );
   const getMenuItems = useCallback(
     (name, filterByIsVisible = true) => {
@@ -235,13 +216,13 @@ const useContent = () => {
   const getMenuItemById = useCallback(
     (id) => {
       const menuItems = [];
-      const menus = page.props?.menus || [];
+      const menus = props?.menus || [];
       menus.forEach((menu) => {
         if (Array.isArray(menu.items)) menuItems.push(...menu.items);
       });
       return menuItems.find((item) => item.id === id);
     },
-    [page.props?.menus]
+    [props?.menus]
   );
   const getMenuItemsByLocation = useCallback(
     (name, filterByIsVisible = true) => {
@@ -259,7 +240,7 @@ const useContent = () => {
             (group) => group.id === item.menuItemGroupId
           );
           if (!groupAlreadyExists) {
-            const group = page.props?.menuItemGroups?.find(
+            const group = props?.menuItemGroups?.find(
               (group2) => group2.id === item.menuItemGroupId
             );
             if (group) groups.push(group);
@@ -268,7 +249,7 @@ const useContent = () => {
       }
       return groups;
     },
-    [getMenuItems, getMenuItemsByLocation, page.props?.menuItemGroups]
+    [getMenuItems, getMenuItemsByLocation, props?.menuItemGroups]
   );
   const getMenuItemsByGroup = useCallback(
     (name, groupId, byLocation = false, filterByIsVisible = true) => {
@@ -301,7 +282,7 @@ const useContent = () => {
   );
   const getAppInformationValue = useCallback(
     (key, type = "string") => {
-      const appInformation = page.props.appInformation;
+      const appInformation = props.appInformation;
       const setting = appInformation.find((s) => s.key === key);
       let value = "";
       switch (type) {
@@ -323,7 +304,7 @@ const useContent = () => {
       }
       return value;
     },
-    [page.props.appInformation]
+    [props.appInformation]
   );
   const appPrimaryColor = useMemo(() => {
     const primaryColor = getAppInformationValue(
@@ -358,7 +339,6 @@ const useContent = () => {
     newsCategory,
     newsTag,
     contentModelItem,
-    getProps,
     getMenu,
     getMenuByLocation,
     getMenuItems,
@@ -431,7 +411,7 @@ const useNewsletter = () => {
 };
 export {
   useApi,
-  d as useConfig,
+  e as useConfig,
   useContent,
   useHelper,
   useNewsletter,

package/dist/{index-ZewuA4XM.cjs → index-hI__ihu3.cjs}

@@ -6934,6 +6934,28 @@ const useApi = () => {
     handleError
   };
 };
+const useProps = () => {
+  const manager = React.useContext(PropsContext);
+  const page = react.usePage();
+  const [props, setProps] = React.useState(
+    manager ? manager.getState().props : {}
+  );
+  React.useEffect(() => {
+    if (!manager) return;
+    setProps(manager.getState().props);
+    const unsubscribe = manager.subscribe((newProps) => {
+      setProps(newProps);
+    });
+    return unsubscribe;
+  }, [manager]);
+  if (!manager) {
+    console.warn(
+      "[@creopse/react] Using native Inertia props - live preview disabled"
+    );
+    return page.props;
+  }
+  return props;
+};
 const useMediaQuery = (query) => {
   const [matches, setMatches] = React.useState(false);
   React.useEffect(() => {
@@ -6948,9 +6970,10 @@ const useMediaQuery = (query) => {
   return matches;
 };
 const useHelper = () => {
+  const props = useProps();
   const page = react.usePage();
   const { request } = useApi();
-  const { apiBaseUrl } = useConfig();
+  const { apiBaseUrl, langKey } = useConfig();
   const currentRoutePath = React.useMemo(() => page.url, [page.url]);
   const resolveUrl = React.useCallback(
     (path) => {
@@ -6991,15 +7014,19 @@ const useHelper = () => {
     },
     [fileUrl]
   );
-  const getTranslation = React.useCallback((data, lang2) => {
-    let parsedData;
-    try {
-      parsedData = JSON.parse(data);
-    } catch (e) {
-      parsedData = {};
-    }
-    return parsedData ? parsedData[lang2.toUpperCase()] || parsedData[lang2] || parsedData["en"] || "" : "";
-  }, []);
+  const getTranslation = React.useCallback(
+    (data, lang2) => {
+      let parsedData;
+      if (!lang2) lang2 = localStorage.getItem(langKey) || "en";
+      try {
+        parsedData = JSON.parse(data);
+      } catch (e) {
+        parsedData = {};
+      }
+      return parsedData ? parsedData[lang2.toUpperCase()] || parsedData[lang2] || parsedData["en"] || "" : "";
+    },
+    [langKey]
+  );
   const tr = React.useCallback(
     (data, lang2) => {
       return getTranslation(data, lang2);
@@ -7075,17 +7102,18 @@ const useHelper = () => {
     (label) => languages.find((l) => l.label === label)?.value,
     [languages]
   );
-  const updateUserLang = React.useCallback(
+  const updateLang = React.useCallback(
     async (val, reload = true, updateUserPrefs = true) => {
-      if (page.props.isUserLoggedIn && updateUserPrefs) {
-        const userPrefs = page.props.userData?.preferences || {
+      localStorage.setItem(langKey, val);
+      if (props.isUserLoggedIn && updateUserPrefs) {
+        const userPrefs = props.userData?.preferences || {
           inAppNotifEnabled: Bool.TRUE,
           emailNotifEnabled: Bool.TRUE,
           locale: val
         };
         userPrefs.locale = val;
         await request({
-          url: `/users/self/${page.props.userData?.id}`,
+          url: `/users/self/${props.userData?.id}`,
           method: "put",
           data: {
             preferences: userPrefs
@@ -7094,7 +7122,7 @@ const useHelper = () => {
       }
       if (reload) location.reload();
     },
-    [page.props, request]
+    [langKey, props, request]
   );
   const displayFormErrors = React.useCallback(
     (errors, displayError) => {
@@ -7184,7 +7212,7 @@ const useHelper = () => {
     displayFormErrors,
     resolveHtmlLinks,
     resolveUrl,
-    updateUserLang,
+    updateLang,
     languages,
     getImage,
     fileUrl,
@@ -7785,3 +7813,4 @@ exports.slideToId = slideToId;
 exports.useApi = useApi;
 exports.useConfig = useConfig;
 exports.useHelper = useHelper;
+exports.useProps = useProps;

package/dist/{index-4XGApE5d.js → index-jw_2nhs3.js}

@@ -1,5 +1,5 @@
 import { usePage, router } from "@inertiajs/react";
-import React__default, { createContext, useContext, useMemo, useCallback } from "react";
+import React__default, { createContext, useContext, useMemo, useCallback, useState, useEffect } from "react";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -6933,6 +6933,28 @@ const useApi = () => {
     handleError
   };
 };
+const useProps = () => {
+  const manager = useContext(PropsContext);
+  const page = usePage();
+  const [props, setProps] = useState(
+    manager ? manager.getState().props : {}
+  );
+  useEffect(() => {
+    if (!manager) return;
+    setProps(manager.getState().props);
+    const unsubscribe = manager.subscribe((newProps) => {
+      setProps(newProps);
+    });
+    return unsubscribe;
+  }, [manager]);
+  if (!manager) {
+    console.warn(
+      "[@creopse/react] Using native Inertia props - live preview disabled"
+    );
+    return page.props;
+  }
+  return props;
+};
 const useMediaQuery = (query) => {
   const [matches, setMatches] = React__default.useState(false);
   React__default.useEffect(() => {
@@ -6947,9 +6969,10 @@ const useMediaQuery = (query) => {
   return matches;
 };
 const useHelper = () => {
+  const props = useProps();
   const page = usePage();
   const { request } = useApi();
-  const { apiBaseUrl } = useConfig();
+  const { apiBaseUrl, langKey } = useConfig();
   const currentRoutePath = useMemo(() => page.url, [page.url]);
   const resolveUrl = useCallback(
     (path) => {
@@ -6990,15 +7013,19 @@ const useHelper = () => {
     },
     [fileUrl]
   );
-  const getTranslation = useCallback((data, lang2) => {
-    let parsedData;
-    try {
-      parsedData = JSON.parse(data);
-    } catch (e) {
-      parsedData = {};
-    }
-    return parsedData ? parsedData[lang2.toUpperCase()] || parsedData[lang2] || parsedData["en"] || "" : "";
-  }, []);
+  const getTranslation = useCallback(
+    (data, lang2) => {
+      let parsedData;
+      if (!lang2) lang2 = localStorage.getItem(langKey) || "en";
+      try {
+        parsedData = JSON.parse(data);
+      } catch (e) {
+        parsedData = {};
+      }
+      return parsedData ? parsedData[lang2.toUpperCase()] || parsedData[lang2] || parsedData["en"] || "" : "";
+    },
+    [langKey]
+  );
   const tr = useCallback(
     (data, lang2) => {
       return getTranslation(data, lang2);
@@ -7074,17 +7101,18 @@ const useHelper = () => {
     (label) => languages.find((l) => l.label === label)?.value,
     [languages]
   );
-  const updateUserLang = useCallback(
+  const updateLang = useCallback(
     async (val, reload = true, updateUserPrefs = true) => {
-      if (page.props.isUserLoggedIn && updateUserPrefs) {
-        const userPrefs = page.props.userData?.preferences || {
+      localStorage.setItem(langKey, val);
+      if (props.isUserLoggedIn && updateUserPrefs) {
+        const userPrefs = props.userData?.preferences || {
           inAppNotifEnabled: Bool.TRUE,
           emailNotifEnabled: Bool.TRUE,
           locale: val
         };
         userPrefs.locale = val;
         await request({
-          url: `/users/self/${page.props.userData?.id}`,
+          url: `/users/self/${props.userData?.id}`,
           method: "put",
           data: {
             preferences: userPrefs
@@ -7093,7 +7121,7 @@ const useHelper = () => {
       }
       if (reload) location.reload();
     },
-    [page.props, request]
+    [langKey, props, request]
   );
   const displayFormErrors = useCallback(
     (errors, displayError) => {
@@ -7183,7 +7211,7 @@ const useHelper = () => {
     displayFormErrors,
     resolveHtmlLinks,
     resolveUrl,
-    updateUserLang,
+    updateLang,
     languages,
     getImage,
     fileUrl,
@@ -7780,10 +7808,11 @@ export {
   EditorMessageType as E,
   PropsContext as P,
   RouterContext as R,
-  ResolveSectionsContext as a,
-  useApi as b,
-  cloneDeep as c,
-  useConfig as d,
+  useProps as a,
+  ResolveSectionsContext as b,
+  useApi as c,
+  cloneDeep as d,
+  useConfig as e,
   slideToId as s,
   useHelper as u
 };

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const index = require("./index-ZewuA4XM.cjs");
+const index = require("./index-hI__ihu3.cjs");
 require("@inertiajs/react");
 const reactDom = require("react-dom");
 function _interopNamespaceDefault(e) {
@@ -8105,6 +8105,8 @@ const RootContainer = ({
   }, [page, sections]);
   const sectionsStateRef = React.useRef({});
   const sectionsRef = React.useRef(sections);
+  const pageProps = index.useProps();
+  console.log(pageProps);
   React.useEffect(() => {
     const deselectAllSections = () => {
       Object.keys(sectionsStateRef.current).forEach((key) => {
@@ -8183,14 +8185,29 @@ const RootContainer = ({
           break;
         }
         case index.EditorMessageType.SEND_BASE_SECTION_SETTINGS:
+          {
+            console.log(event.data);
+          }
           break;
         case index.EditorMessageType.SEND_BASE_SECTION_DATA:
+          {
+            console.log(event.data);
+          }
           break;
         case index.EditorMessageType.SEND_SECTION_SETTINGS:
+          {
+            console.log(event.data);
+          }
           break;
         case index.EditorMessageType.SEND_SECTION_DATA:
+          {
+            console.log(event.data);
+          }
           break;
         case index.EditorMessageType.SEND_PAGE_SECTIONS:
+          {
+            console.log(event.data);
+          }
           break;
       }
     };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { useState, useEffect, createContext, useRef, useLayoutEffect, useId, useContext, useInsertionEffect, useMemo, useCallback, Children, isValidElement, Fragment, createElement, forwardRef, Component } from "react";
-import { u as useHelper, s as slideToId, E as EditorMessageType, R as RouterContext, C as ConfigContext, a as ResolveSectionsContext, P as PropsContext } from "./index-4XGApE5d.js";
+import { u as useHelper, s as slideToId, a as useProps, E as EditorMessageType, R as RouterContext, C as ConfigContext, b as ResolveSectionsContext, P as PropsContext } from "./index-jw_2nhs3.js";
 import "@inertiajs/react";
 import { createPortal } from "react-dom";
 var jsxRuntime = { exports: {} };
@@ -8087,6 +8087,8 @@ const RootContainer = ({
   }, [page, sections]);
   const sectionsStateRef = useRef({});
   const sectionsRef = useRef(sections);
+  const pageProps = useProps();
+  console.log(pageProps);
   useEffect(() => {
     const deselectAllSections = () => {
       Object.keys(sectionsStateRef.current).forEach((key) => {
@@ -8165,14 +8167,29 @@ const RootContainer = ({
           break;
         }
         case EditorMessageType.SEND_BASE_SECTION_SETTINGS:
+          {
+            console.log(event.data);
+          }
           break;
         case EditorMessageType.SEND_BASE_SECTION_DATA:
+          {
+            console.log(event.data);
+          }
           break;
         case EditorMessageType.SEND_SECTION_SETTINGS:
+          {
+            console.log(event.data);
+          }
           break;
         case EditorMessageType.SEND_SECTION_DATA:
+          {
+            console.log(event.data);
+          }
           break;
         case EditorMessageType.SEND_PAGE_SECTIONS:
+          {
+            console.log(event.data);
+          }
           break;
       }
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@creopse/react",
   "description": "Creopse React Toolkit",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "private": false,
   "author": "Noé Gnanih <noegnanih@gmail.com>",
   "license": "MIT",

package/types/core/contexts.d.ts

@@ -1,6 +1,6 @@
 import type { PluginConfig } from '@/types/plugin';
 import type PropsManager from './props-manager';
-declare const PropsContext: import("react").Context<PropsManager | null>;
+declare const PropsContext: import("react").Context<PropsManager<import("@/types/plugin").Props> | null>;
 declare const ConfigContext: import("react").Context<PluginConfig | null>;
 declare const RouterContext: import("react").Context<any>;
 declare const ResolveSectionsContext: import("react").Context<any>;

package/types/core/props-manager.d.ts

@@ -1,13 +1,14 @@
-declare class PropsManager {
+import type { Props } from '@/types/plugin';
+declare class PropsManager<T extends Props = Props> {
     private state;
     private listeners;
-    constructor(initialProps: Record<string, any>);
-    update(payload: Record<string, any>): void;
+    constructor(initialProps: T);
+    update(payload: T): void;
     getState(): {
-        props: Record<string, any>;
+        props: T;
     };
-    sync(newProps: Record<string, any>): void;
-    subscribe(callback: (props: Record<string, any>) => void): () => void;
+    sync(newProps: T): void;
+    subscribe(callback: (props: T) => void): () => void;
     private notify;
     private deepMerge;
     private isObject;

package/types/hooks/config.d.ts

@@ -17,4 +17,5 @@ export declare const useConfig: () => {
     appUrl: string;
     xApiKey: string;
     encryptionKey: string;
+    langKey: string;
 };

package/types/hooks/content.d.ts

@@ -1,5 +1,4 @@
 import type { AppInformationKey, ContentModelItemModel, ContentModelModel, MenuItemGroupModel, MenuItemModel, MenuModel, NewsArticleModel, NewsCategoryModel, NewsTagModel, PageModel, SectionModel, SettingType, SharedProps } from '@creopse/utils';
-import type { ErrorBag, Errors, PageProps } from '@inertiajs/core';
 /**
  * A hook that provides a set of functions and properties for
  * easily accessing and manipulating page data, content models, menus,
@@ -16,9 +15,6 @@ export declare const useContent: () => {
     newsCategory: NewsCategoryModel | undefined;
     newsTag: NewsTagModel | undefined;
     contentModelItem: ContentModelItemModel | undefined;
-    getProps: () => PageProps & SharedProps & {
-        errors: Errors & ErrorBag;
-    };
     getMenu: (name: string, filterByIsActive?: boolean) => MenuModel | undefined;
     getMenuByLocation: (name: string, filterByIsActive?: boolean) => MenuModel | undefined;
     getMenuItems: (name: string, filterByIsVisible?: boolean) => MenuItemModel[] | undefined;

package/types/hooks/helper.d.ts

@@ -10,14 +10,14 @@ export declare const useHelper: () => {
     isLgScreen: boolean;
     isMdScreen: boolean;
     isSmScreen: boolean;
-    getTranslation: (data: any, lang: string) => string;
+    getTranslation: (data: any, lang?: string) => string;
     getLangageLabel: (value: string) => string | undefined;
     getLanguageValue: (label: string) => string | undefined;
     ckEditorToolbarItems: string[];
     displayFormErrors: (errors: any, displayError: (message: string) => void) => void;
-    resolveHtmlLinks: (data: string | null | undefined, lang: string) => string;
+    resolveHtmlLinks: (data: string | null | undefined, lang?: string) => string;
     resolveUrl: (path: string) => string;
-    updateUserLang: (val: string, reload?: boolean, updateUserPrefs?: boolean) => Promise<void>;
+    updateLang: (val: string, reload?: boolean, updateUserPrefs?: boolean) => Promise<void>;
     languages: Language[];
     getImage: (path: string, size?: "small" | "medium" | "large" | "original") => Promise<string>;
     fileUrl: (path: string) => string;
@@ -25,6 +25,6 @@ export declare const useHelper: () => {
     openLink: (str: string) => void;
     openMenu: (menu?: MenuItemModel) => void;
     getMenuHref: (menu: MenuItemModel) => string;
-    rHtml: (data: string | null | undefined, lang: string) => string;
-    tr: (data: any, lang: string) => string;
+    rHtml: (data: string | null | undefined, lang?: string) => string;
+    tr: (data: any, lang?: string) => string;
 };

package/types/hooks/props.d.ts

@@ -1,9 +1,10 @@
+import type { Props } from '@/types/plugin';
 /**
  * A hook that returns the props of the page.
  *
  * It subscribes to the PropsManager and updates when props change.
  *
  * @throws {Error} if the CreopseProvider is not found in tree
- * @returns {Record<string, any>} the props of the page
+ * @returns {T} the props of the page
  */
-export declare const useProps: <T = Record<string, any>>() => T;
+export declare const useProps: <T extends Props = Props>() => T;

package/types/types/plugin.d.ts

@@ -1,12 +1,18 @@
-import type { Router } from '@inertiajs/core';
+import type { SharedProps } from '@creopse/utils';
+import type { ErrorBag, Errors, PageProps, Router } from '@inertiajs/core';
+export type Props = SharedProps & PageProps & {
+    errors: Errors & ErrorBag;
+    [key: string]: any;
+};
 export interface PluginConfig {
     debug: boolean;
     appUrl: string;
     xApiKey: string;
     encryptionKey: string;
+    langKey: string;
 }
 export interface PluginOptions {
-    initialProps: Record<string, any>;
+    initialProps: Props;
     router?: Router;
     resolveSections: () => Record<string, unknown>;
     config: PluginConfig;