pds-dev-kit-web-test 2.7.610 → 2.7.612

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -24,7 +24,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
-var IntersectionObserverContext_1 = require("./IntersectionObserverContext");
 function DynamicLayout(_a) {
     var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef, zoomScale = _a.zoomScale, queryData = _a.queryData, placementRestriction = _a.placementRestriction;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
@@ -44,7 +43,7 @@ function DynamicLayout(_a) {
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
     var editorType = 'DYNAMIC_LAYOUT_EDITOR';
-    return ((0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+    return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
             device: device,
             mode: mode,
             isPreview: isPreview,
@@ -57,7 +56,7 @@ function DynamicLayout(_a) {
             queryData: queryData,
             placementRestriction: placementRestriction,
             editorType: editorType
-        } }, { children: (0, jsx_runtime_1.jsxs)(IntersectionObserverContext_1.IntersectionObserverProvider, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { dynamicLayoutRef: dynamicLayoutRef, editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
-                    (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] }) })));
+        } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { dynamicLayoutRef: dynamicLayoutRef, editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
+                (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }
 exports.default = DynamicLayout;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
 var sections_1 = require("../../../DynamicLayout/sections");
 var SectionBox_1 = __importDefault(require("./SectionBox"));
 function EditModeSectionMatcher(_a) {
@@ -53,25 +52,9 @@ function EditModeSectionMatcher(_a) {
             }
         };
     }, [selectedSectionRef]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(ContextWrapper, __assign({ isEditing: editingSectionId === iframeSection.id }, { children: (0, jsx_runtime_1.jsx)(DesignedSectionsMatcher, __assign({}, iframeSection)) })) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: (0, jsx_runtime_1.jsx)(ContextWrapper, __assign({ isEditing: editingSectionId === section.id }, { children: section.type === 'CUSTOM' ? ((0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, section, { ref: editingSectionId === section.id ? refCallback : null }))) : ((0, jsx_runtime_1.jsx)(DesignedSectionsMatcher, __assign({}, section))) })) }), section.id)); })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(DesignedSectionsMatcher, __assign({}, iframeSection)) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: section.type === 'CUSTOM' ? ((0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, section, { ref: editingSectionId === section.id ? refCallback : null }))) : ((0, jsx_runtime_1.jsx)(DesignedSectionsMatcher, __assign({}, section))) }), section.id)); })) }));
 }
 exports.default = EditModeSectionMatcher;
-function ContextWrapper(_a) {
-    var children = _a.children, isEditing = _a.isEditing;
-    var contextValue = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext);
-    if (isEditing) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-    }
-    // Temporary performance test: Do not render non-editing sections
-    return null;
-    /*
-    return (
-      <dynamicLayoutContext.Provider value={{ ...contextValue, mode: 'PREVIEW' }}>
-        {children}
-      </dynamicLayoutContext.Provider>
-    );
-    */
-}
 function DesignedSectionsMatcher(_a) {
     var props = __rest(_a, []);
     var schema = props.manifest.schema;

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -51,7 +51,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var publ_echo_1 = require("publ-echo");
+var publ_echo_test_1 = require("publ-echo-test");
 var group_1 = require("publ-echo/dist/lib/GridLayoutEditor/group");
 var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
 var react_1 = __importStar(require("react"));
@@ -67,7 +67,7 @@ var clsx_1 = require("./newUtils/clsx");
 var group_2 = require("./newUtils/group");
 var util_1 = require("./util");
 var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
-var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
+var Responsive = (0, publ_echo_test_1.WidthProvider)(publ_echo_test_1.ResponsiveGridEditor);
 var GRID_CELL_MIN = 24;
 var DESKTOP_GRID_COLS = 24;
 var MOBILE_GRID_COLS = 8;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useIntersectionObserver.js

@@ -11,11 +11,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIntersectionObserver = void 0;
 var react_1 = require("react");
-var IntersectionObserverContext_1 = require("../../../IntersectionObserverContext");
 function useIntersectionObserver(elementRef, _a, deps) {
     var _b = _a.threshold, threshold = _b === void 0 ? 0 : _b, _c = _a.root, root = _c === void 0 ? null : _c, _d = _a.rootMargin, rootMargin = _d === void 0 ? '0%' : _d, _e = _a.freezeOnceVisible, freezeOnceVisible = _e === void 0 ? false : _e;
     var _f = (0, react_1.useState)(), entry = _f[0], setEntry = _f[1];
-    var context = (0, IntersectionObserverContext_1.useIntersectionObserverContext)();
     var frozen = (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && freezeOnceVisible;
     (0, react_1.useLayoutEffect)(function () {
         var updateEntry = function (_a) {
@@ -28,12 +26,6 @@ function useIntersectionObserver(elementRef, _a, deps) {
             return;
         }
         var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
-        if (context) {
-            context.observe(node, updateEntry, observerParams);
-            return function () {
-                context.unobserve(node, observerParams);
-            };
-        }
         var observer = new IntersectionObserver(updateEntry, observerParams);
         observer.observe(node);
         return function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.7.610",
+  "version": "2.7.612",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -25,6 +25,7 @@
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
     "publ-echo": "^0.0.133",
+    "publ-echo-test": "^0.0.400",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/dist/src/sub/DynamicLayout/IntersectionObserverContext.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-type ObservationOptions = {
-    root?: Element | Document | null;
-    rootMargin?: string;
-    threshold?: number | number[];
-};
-type IntersectionObserverContextType = {
-    observe: (element: Element, callback: IntersectionObserverCallback, options?: ObservationOptions) => void;
-    unobserve: (element: Element, options?: ObservationOptions) => void;
-};
-export declare const useIntersectionObserverContext: () => IntersectionObserverContextType | null;
-export declare function IntersectionObserverProvider({ children }: {
-    children: React.ReactNode;
-}): JSX.Element;
-export {};

package/dist/src/sub/DynamicLayout/IntersectionObserverContext.js

@@ -1,96 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntersectionObserverProvider = exports.useIntersectionObserverContext = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var IntersectionObserverContext = (0, react_1.createContext)(null);
-var useIntersectionObserverContext = function () { return (0, react_1.useContext)(IntersectionObserverContext); };
-exports.useIntersectionObserverContext = useIntersectionObserverContext;
-function IntersectionObserverProvider(_a) {
-    var children = _a.children;
-    // Map of options hash -> IntersectionObserver instance
-    var observers = (0, react_1.useRef)(new Map());
-    // Map of options hash -> Map of Element -> Callback
-    var callbacks = (0, react_1.useRef)(new Map());
-    var getOptionsHash = function (options) {
-        var _a = options || {}, _b = _a.root, root = _b === void 0 ? null : _b, _c = _a.rootMargin, rootMargin = _c === void 0 ? '0px' : _c, _d = _a.threshold, threshold = _d === void 0 ? 0 : _d;
-        // Note: 'root' element reference cannot be easily hashed if it's not null/window.
-        // Ideally we assume root is usually viewport (null). If root is an element, this simplistic hashing might fail if we have multiple roots.
-        // For this specific use case (DynamicLayout), root is usually viewport.
-        // If specific root handling is needed, we need a better way to map it.
-        // For now, let's treat root object as 'null' in hash if it is object, or use a WeakMap if strictness is needed.
-        // However, typical usage here is viewport.
-        return JSON.stringify({
-            root: root ? 'element' : 'null',
-            rootMargin: rootMargin,
-            threshold: threshold
-        });
-    };
-    var observe = function (element, callback, options) {
-        var hash = getOptionsHash(options);
-        if (!observers.current.has(hash)) {
-            var observerCallback = function (entries, observer) {
-                var hashCallbacks = callbacks.current.get(hash);
-                if (!hashCallbacks)
-                    return;
-                entries.forEach(function (entry) {
-                    var cb = hashCallbacks.get(entry.target);
-                    if (cb) {
-                        cb([entry], observer);
-                    }
-                });
-            };
-            var newObserver = new IntersectionObserver(observerCallback, options);
-            observers.current.set(hash, newObserver);
-            callbacks.current.set(hash, new Map());
-        }
-        var observer = observers.current.get(hash);
-        var hashCallbacks = callbacks.current.get(hash);
-        if (!hashCallbacks.has(element)) {
-            hashCallbacks.set(element, callback);
-            observer.observe(element);
-        }
-    };
-    var unobserve = function (element, options) {
-        var hash = getOptionsHash(options);
-        var observer = observers.current.get(hash);
-        var hashCallbacks = callbacks.current.get(hash);
-        if (observer && hashCallbacks) {
-            if (hashCallbacks.has(element)) {
-                hashCallbacks.delete(element);
-                observer.unobserve(element);
-            }
-            // Optional: Cleanup observer if no elements
-            if (hashCallbacks.size === 0) {
-                observer.disconnect();
-                observers.current.delete(hash);
-                callbacks.current.delete(hash);
-            }
-        }
-    };
-    var value = (0, react_1.useMemo)(function () { return ({
-        observe: observe,
-        unobserve: unobserve
-    }); }, []);
-    (0, react_1.useEffect)(function () {
-        return function () {
-            // Cleanup all observers on unmount
-            observers.current.forEach(function (observer) { return observer.disconnect(); });
-            observers.current.clear();
-            callbacks.current.clear();
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(IntersectionObserverContext.Provider, __assign({ value: value }, { children: children })));
-}
-exports.IntersectionObserverProvider = IntersectionObserverProvider;