@uxf/cms 13.0.3 → 14.0.0

package/README.md

@@ -16,7 +16,7 @@ It is not a general UI kit (`@uxf/ui`), a form library (`@uxf/form`), or a data
 yarn add @uxf/cms
 ```
 
-Peer dependencies: `@uxf/core`, `@uxf/core-react`, `@uxf/data-grid`, `@uxf/form`, `@uxf/router`, `@uxf/styles`, `@uxf/ui`, `@uxf/wysiwyg`, `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`, `@floating-ui/react`, `axios`, `axios-hooks`, `swr`, `react-hook-form`, `next` (>=15.0.4), `react` (^19.3.0), `react-dom` (^19.3.0).
+Peer dependencies: `@uxf/core`, `@uxf/core-react`, `@uxf/data-grid`, `@uxf/form`, `@uxf/router`, `@uxf/styles`, `@uxf/ui`, `@uxf/wysiwyg`, `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`, `@floating-ui/react`, `axios`, `axios-hooks`, `swr`, `react-hook-form`, `next` (>=16.0.0), `react` (^19.3.0), `react-dom` (^19.3.0).
 
 Because it builds on `@uxf/ui`, `@uxf/form` and `@uxf/data-grid`, complete their setup as well (see [`@uxf/ui`](../ui/README.md) and [`@uxf/form`](../form/README.md)) — the `UiContextProvider`, the token layer, and the component CSS they require.
 

package/lib/layout/sidebar.js

@@ -34,9 +34,11 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sidebar = void 0;
+const use_media_query_1 = require("@uxf/core-react/hooks/use-media-query");
 const rem_1 = require("@uxf/styles/units/rem");
 const react_1 = __importStar(require("react"));
 const tw_screens_1 = require("../../ui/tw-tokens/tw-screens");
+const use_visual_viewport_height_1 = require("../../utils/use-visual-viewport-height");
 const menu_1 = require("../menu");
 const mobile_bar_1 = require("../menu/mobile-bar");
 const user_menu_1 = require("../menu/ui/user-menu");
@@ -45,39 +47,29 @@ const uxfLogo = (react_1.default.createElement("svg", { height: "30", viewBox: "
     react_1.default.createElement("path", { clipRule: "evenodd", d: "M33.563 12.874a9.103 9.103 0 0 0 0-12.874L20.69 12.874l.107.105a9.103 9.103 0 0 0 12.766-.105Zm-20.69-6.437a9.103 9.103 0 0 1 .106 12.766l-.105.107L0 6.437a9.103 9.103 0 0 1 12.874 0ZM40 33.563 27.127 20.69l-.106.107a9.103 9.103 0 0 0 12.98 12.766Zm-20.69-6.437-.107-.105A9.103 9.103 0 0 0 6.437 40l12.874-12.874Z", fill: "#FFF", fillRule: "evenodd" }),
     react_1.default.createElement("path", { clipRule: "evenodd", d: "m84.325 7.295 5.133 8.675h.199l5.158-8.675h6.078l-7.768 12.727 7.942 12.727h-6.19l-5.22-8.687h-.199l-5.22 8.687h-6.165l7.967-12.727-7.818-12.727h6.103Zm-24.194 0v16.07c0 .97.214 1.832.64 2.586a4.58 4.58 0 0 0 1.809 1.777c.779.431 1.686.647 2.722.647 1.044 0 1.953-.216 2.728-.647a4.591 4.591 0 0 0 1.802-1.777c.427-.754.64-1.616.64-2.585V7.296h5.382v16.53c0 1.856-.441 3.48-1.324 4.872-.882 1.392-2.115 2.475-3.697 3.25-1.583.775-3.426 1.162-5.531 1.162-2.113 0-3.96-.387-5.543-1.162-1.583-.775-2.813-1.858-3.692-3.25-.878-1.392-1.317-3.016-1.317-4.872V7.296h5.381ZM170.25 13.41c2.411 0 4.311.51 5.698 1.529 1.388 1.019 2.198 2.407 2.43 4.164l-4.847.298a2.555 2.555 0 0 0-.534-1.125 2.942 2.942 0 0 0-1.075-.808c-.444-.203-.972-.304-1.585-.304-.821 0-1.512.172-2.076.515-.563.344-.845.802-.845 1.374 0 .456.182.84.547 1.156.364.315.99.567 1.877.758l3.455.696c1.856.381 3.24.994 4.151 1.84.912.845 1.367 1.955 1.367 3.33 0 1.252-.366 2.35-1.1 3.294-.733.945-1.736 1.68-3.007 2.206-1.272.526-2.737.79-4.394.79-2.527 0-4.539-.529-6.034-1.585-1.496-1.057-2.372-2.496-2.629-4.32l5.208-.273c.157.77.538 1.357 1.143 1.759.605.402 1.38.603 2.324.603.928 0 1.676-.18 2.244-.54.567-.361.855-.827.864-1.4-.009-.48-.212-.875-.609-1.186-.398-.31-1.011-.55-1.84-.715l-3.306-.659c-1.864-.372-3.25-1.019-4.157-1.938-.908-.92-1.361-2.093-1.361-3.518 0-1.226.333-2.283 1-3.17.667-.886 1.608-1.57 2.821-2.05 1.214-.48 2.637-.72 4.27-.72Zm-36.686.373a12.285 12.285 0 0 0-3.051-.373c-1.525 0-2.865.23-4.021.69-1.156.46-2.098 1.114-2.827 1.964-.73.849-1.219 1.854-1.467 3.014l4.897.397c.182-.63.555-1.153 1.119-1.572.563-.418 1.321-.627 2.274-.627.903 0 1.601.215 2.094.646.493.43.74 1.04.74 1.827v.075c0 .405-.153.712-.46.92-.307.206-.8.362-1.479.465-.68.104-1.574.214-2.685.33-.944.09-1.845.248-2.703.472a7.698 7.698 0 0 0-2.293.994 4.727 4.727 0 0 0-1.591 1.74c-.39.721-.584 1.612-.584 2.673 0 1.259.275 2.31.826 3.15a5.147 5.147 0 0 0 2.256 1.902c.953.427 2.038.64 3.257.64.944 0 1.777-.126 2.498-.38a5.55 5.55 0 0 0 1.852-1.055 5.31 5.31 0 0 0 1.23-1.573h.149v2.648h5.022V19.873c0-1.135-.22-2.11-.659-2.927a5.655 5.655 0 0 0-1.796-2.007 8.039 8.039 0 0 0-2.598-1.156Zm-13.424-2.05V7.294h-16.853v25.454h5.381V22.235h10.354v-4.438h-10.354v-6.065h11.472Zm32.603 1.677c1.326 0 2.482.29 3.468.87.986.58 1.753 1.407 2.3 2.48.546 1.073.82 2.35.82 3.834V32.75h-5.295V21.539c.008-1.169-.29-2.082-.895-2.74-.605-.66-1.437-.989-2.498-.989-.713 0-1.34.153-1.883.46a3.166 3.166 0 0 0-1.268 1.336c-.302.584-.458 1.286-.466 2.107V32.75h-5.295V13.659h5.047v3.368H147a5.358 5.358 0 0 1 2.126-2.641c.994-.65 2.2-.976 3.616-.976Zm-20.061 10.782c.286-.087.512-.184.678-.292v2.026c0 .671-.17 1.272-.51 1.802-.34.53-.808.951-1.404 1.262-.597.31-1.285.466-2.064.466-.812 0-1.481-.189-2.007-.566-.526-.377-.789-.925-.789-1.646 0-.497.128-.914.385-1.25.257-.335.617-.602 1.082-.801a6.547 6.547 0 0 1 1.628-.435l.969-.143a24.15 24.15 0 0 0 1.069-.186c.356-.071.677-.15.963-.237Z", fill: "#FFF", fillRule: "evenodd" })));
 const Sidebar = (props) => {
-    var _a, _b, _c;
-    const [deviceHeight, setDeviceHeight] = (0, react_1.useState)(0);
+    var _a, _b, _c, _d;
+    const deviceHeight = (_a = (0, use_visual_viewport_height_1.useVisualViewportHeight)()) !== null && _a !== void 0 ? _a : 0;
     const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
     const toggleMenu = () => setIsMenuOpen((prev) => !prev);
+    // The open menu covers the page below the md breakpoint, so the page must not scroll under it.
+    const isDesktop = (0, use_media_query_1.useMediaQuery)(`(min-width: ${tw_screens_1.twScreens.md})`);
+    const isPageLocked = isMenuOpen && !isDesktop;
     (0, react_1.useEffect)(() => {
-        const handler = () => { var _a, _b; return setDeviceHeight((_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : window.innerHeight); };
-        handler();
-        window.addEventListener("resize", handler);
+        if (!isPageLocked) {
+            return;
+        }
+        // Restored rather than cleared, so a lock someone else holds survives the menu closing.
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
         return () => {
-            window.removeEventListener("resize", handler);
+            document.body.style.overflow = previousOverflow;
         };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const handler = () => {
-            if (!window.matchMedia(`(min-width: ${tw_screens_1.twScreens.md})`).matches && isMenuOpen) {
-                document.body.style.overflow = "hidden";
-            }
-            else {
-                document.body.style.overflow = "";
-            }
-        };
-        handler();
-        window.addEventListener("resize", handler);
-        return () => {
-            document.body.style.overflow = "";
-            window.removeEventListener("resize", handler);
-        };
-    }, [isMenuOpen]);
-    return ((_a = props.CustomSidebar) !== null && _a !== void 0 ? _a : (react_1.default.createElement("div", { className: "uxf-cms-sidebar", style: { "--drawer-width": (0, rem_1.rem)(styles_1.drawerWidth) } },
+    }, [isPageLocked]);
+    return ((_b = props.CustomSidebar) !== null && _b !== void 0 ? _b : (react_1.default.createElement("div", { className: "uxf-cms-sidebar", style: { "--drawer-width": (0, rem_1.rem)(styles_1.drawerWidth) } },
         react_1.default.createElement("div", { className: `uxf-cms-sidebar__content ${isMenuOpen ? "uxf-cms-sidebar__content--open" : "uxf-cms-sidebar__content--closed"}`, style: { "--device-height": (0, rem_1.rem)(deviceHeight) } },
-            react_1.default.createElement("div", { className: "uxf-cms-sidebar__logo" }, (_b = props.Logo) !== null && _b !== void 0 ? _b : uxfLogo),
+            react_1.default.createElement("div", { className: "uxf-cms-sidebar__logo" }, (_c = props.Logo) !== null && _c !== void 0 ? _c : uxfLogo),
             props.menuConfiguration && props.menuConfiguration.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: `uxf-cms-sidebar__nav ${((_c = props.menuConfiguration.at(0)) === null || _c === void 0 ? void 0 : _c.type) === "super-section"
+                react_1.default.createElement("div", { className: `uxf-cms-sidebar__nav ${((_d = props.menuConfiguration.at(0)) === null || _d === void 0 ? void 0 : _d.type) === "super-section"
                         ? "uxf-cms-sidebar__nav--super-section"
                         : ""}` },
                     react_1.default.createElement(menu_1.Menu, { menu: props.menuConfiguration })),

package/lib/menu/ui/menu-item.js

@@ -50,9 +50,12 @@ const MenuItem = (props) => {
     const firstVisibleChild = visibleChildren.at(0);
     const isInitiallyOpen = (isActive || hasActiveChildren) && props.item.children.length > 0;
     const [isSubmenuOpen, setIsSubmenuOpen] = (0, react_1.useState)(isInitiallyOpen);
-    (0, react_1.useEffect)(() => {
+    // Follow the route during render instead of in an effect, which first rendered one commit with the old value.
+    const [previousIsInitiallyOpen, setPreviousIsInitiallyOpen] = (0, react_1.useState)(isInitiallyOpen);
+    if (isInitiallyOpen !== previousIsInitiallyOpen) {
+        setPreviousIsInitiallyOpen(isInitiallyOpen);
         setIsSubmenuOpen(isInitiallyOpen);
-    }, [isInitiallyOpen]);
+    }
     const toggle = () => setIsSubmenuOpen((prev) => !prev);
     if (!props.item.isVisible(loggedUser) ||
         (props.item.children.length !== 0 && !props.item.hasVisibleChildren(loggedUser))) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/cms",
-    "version": "13.0.3",
+    "version": "14.0.0",
     "description": "UXF Cms",
     "author": "UXFans <dev@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/cms#readme",
@@ -29,18 +29,18 @@
     },
     "peerDependencies": {
         "@floating-ui/react": "^0.27.20",
-        "@uxf/core": "13.0.0",
-        "@uxf/core-react": "13.0.3",
-        "@uxf/data-grid": "13.0.3",
-        "@uxf/dnd": "13.0.2",
-        "@uxf/form": "13.0.3",
-        "@uxf/router": "13.0.0",
-        "@uxf/styles": "13.0.0",
-        "@uxf/ui": "13.0.3",
-        "@uxf/wysiwyg": "13.0.3",
+        "@uxf/core": "14.0.0",
+        "@uxf/core-react": "14.0.0",
+        "@uxf/data-grid": "14.0.0",
+        "@uxf/dnd": "14.0.0",
+        "@uxf/form": "14.0.0",
+        "@uxf/router": "14.0.0",
+        "@uxf/styles": "14.0.0",
+        "@uxf/ui": "14.0.0",
+        "@uxf/wysiwyg": "14.0.0",
         "axios": "^1.20.0",
         "axios-hooks": "^5.1.1",
-        "next": ">=15.0.4",
+        "next": ">=16.0.0",
         "react": "^19.3.0",
         "react-dom": "^19.3.0",
         "react-hook-form": "^7.89.0",
@@ -51,15 +51,15 @@
         "@types/node": "24",
         "@types/react": "19.3.0",
         "@types/react-dom": "19.3.0",
-        "@uxf/core": "13.0.0",
-        "@uxf/core-react": "13.0.3",
-        "@uxf/data-grid": "13.0.3",
-        "@uxf/dnd": "13.0.2",
-        "@uxf/form": "13.0.3",
-        "@uxf/router": "13.0.0",
-        "@uxf/styles": "13.0.0",
-        "@uxf/ui": "13.0.3",
-        "@uxf/wysiwyg": "13.0.3",
+        "@uxf/core": "14.0.0",
+        "@uxf/core-react": "14.0.0",
+        "@uxf/data-grid": "14.0.0",
+        "@uxf/dnd": "14.0.0",
+        "@uxf/form": "14.0.0",
+        "@uxf/router": "14.0.0",
+        "@uxf/styles": "14.0.0",
+        "@uxf/ui": "14.0.0",
+        "@uxf/wysiwyg": "14.0.0",
         "axios": "^1.20.0",
         "axios-hooks": "^5.1.1",
         "next": "16.3.8",

package/pages/content-builder/content-header-behaviour.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/pages/content-builder/content-header-behaviour.spec.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const translations_1 = require("@uxf/core-react/translations");
+const create_default_t_1 = require("@uxf/core-react/translations/create-default-t");
+const react_2 = __importDefault(require("react"));
+const translations_2 = __importDefault(require("../translations"));
+const content_header_1 = require("./content-header");
+// The real icons need @uxf/ui's provider config. IconButton names the button through the icon's aria-label,
+// so the stand-in keeps it.
+jest.mock("@uxf/ui/icon", () => ({
+    Icon: (props) => react_2.default.createElement("svg", { "aria-label": props["aria-label"], role: "img" }),
+}));
+const cs = (0, create_default_t_1.createDefaultT)(JSON.parse(JSON.stringify(translations_2.default, (_key, value) => ((value === null || value === void 0 ? void 0 : value.cs) !== undefined ? value.cs : value))));
+test("names the delete button", () => {
+    (0, react_1.render)(react_2.default.createElement(translations_1.TranslationsProvider, { value: cs },
+        react_2.default.createElement(content_header_1.ContentHeader, { ...{ id: "1", onRemove: jest.fn(), title: "Section" } })));
+    expect(react_1.screen.getByRole("button", { name: "Smazat sekci" })).toBeTruthy();
+});

package/pages/content-builder/content-header.js

@@ -59,7 +59,7 @@ const ContentHeader = (props) => {
     return (react_1.default.createElement("div", { ...clickableProps },
         react_1.default.createElement("h3", { className: "uxf-typo-h6" }, props.title),
         react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-            react_1.default.createElement(icon_button_1.IconButton, { iconName: "delete", label: "d", onClick: removeHandler, size: "sm", variant: "secondary" }),
+            react_1.default.createElement(icon_button_1.IconButton, { iconName: "delete", label: t("uxf-cms-pages-content-builder:components.content-header.delete-section"), onClick: removeHandler, size: "sm", variant: "secondary" }),
             react_1.default.createElement(icon_1.Icon, { name: `${visibility ? "chevronUp" : "chevronDown"}`, size: 16 }))));
 };
 exports.ContentHeader = ContentHeader;

package/pages/content-builder/context/details-visibility-context.js

@@ -37,8 +37,8 @@ exports.DetailsVisibilityProvider = exports.useDetailsVisibilityControls = expor
 const noop_1 = require("@uxf/core/utils/noop");
 const global_context_1 = require("@uxf/core-react/global-context");
 const react_1 = __importStar(require("react"));
-const detailsVisibilityContext = (0, global_context_1.createGlobalContext)("cms/content-builder/details-visibility", [[], noop_1.noop, true, noop_1.noop]);
-const useDetailsVisibility = () => (0, react_1.useContext)(detailsVisibilityContext);
+const DetailsVisibilityContext = (0, global_context_1.createGlobalContext)("cms/content-builder/details-visibility", [[], noop_1.noop, true, noop_1.noop]);
+const useDetailsVisibility = () => (0, react_1.useContext)(DetailsVisibilityContext);
 const useDetailsVisibilityForSection = (sectionId) => {
     var _a;
     const [detailsVisibility, setDetailsVisibility, defaultVisibility] = useDetailsVisibility();
@@ -64,6 +64,6 @@ exports.useDetailsVisibilityControls = useDetailsVisibilityControls;
 const DetailsVisibilityProvider = (props) => {
     const [defaultVisibility, setDefaultVisibility] = (0, react_1.useState)(true);
     const [detailsVisibility, setDetailsVisibility] = (0, react_1.useState)([]);
-    return (react_1.default.createElement(detailsVisibilityContext.Provider, { value: [detailsVisibility, setDetailsVisibility, defaultVisibility, setDefaultVisibility] }, props.children));
+    return (react_1.default.createElement(DetailsVisibilityContext, { value: [detailsVisibility, setDetailsVisibility, defaultVisibility, setDefaultVisibility] }, props.children));
 };
 exports.DetailsVisibilityProvider = DetailsVisibilityProvider;

package/pages/grid-page/grid-page.js

@@ -53,10 +53,10 @@ const loader_1 = require("@uxf/ui/loader");
 const link_1 = __importDefault(require("next/link"));
 const router_2 = __importStar(require("next/router"));
 const react_1 = __importStar(require("react"));
-const url_1 = require("url");
 const swr_1 = require("../../api/swr");
 const api_1 = require("../../lib/api");
 const restricted_page_1 = require("../../security/restricted-page");
+const history_pathname_1 = require("./history-pathname");
 // TODO use swr
 const { axiosRequest } = (0, api_1.createAxiosInstance)("");
 const dataGridLoader = (gridName, request) => {
@@ -81,7 +81,7 @@ function GridPageComponent(props) {
         // save filter to url
         const newQuery = { ...query, filter: encodedRequest };
         // TODO @vejvis - dodělat vlastní router a tuhle magii smazat!
-        router_2.default.replace(`${(0, url_1.parse)(((_a = window.history.state) === null || _a === void 0 ? void 0 : _a.url) || "").pathname}?${(0, qs_1.stringify)(newQuery)}`, `${(0, url_1.parse)(((_b = window.history.state) === null || _b === void 0 ? void 0 : _b.as) || "").pathname}?${(0, qs_1.stringify)(newQuery)}`, { shallow: true });
+        router_2.default.replace(`${(0, history_pathname_1.historyPathname)((_a = window.history.state) === null || _a === void 0 ? void 0 : _a.url)}?${(0, qs_1.stringify)(newQuery)}`, `${(0, history_pathname_1.historyPathname)((_b = window.history.state) === null || _b === void 0 ? void 0 : _b.as)}?${(0, qs_1.stringify)(newQuery)}`, { shallow: true });
         return response;
     }, [query]);
     const { data, isLoading, error, reload } = (0, use_data_grid_fetching_1.useDataGridFetching)({

package/pages/grid-page/history-pathname.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The pathname of a URL kept in Next.js's `history.state` (`url` or `as`), resolved against the current page.
+ * Node's legacy `url.parse` used to do this: it is deprecated (DEP0169), dragged a `url` polyfill into the
+ * browser bundle, and for a missing URL returned `null`, which ended up in the address as "null?…".
+ */
+export declare function historyPathname(url: string | undefined): string;

package/pages/grid-page/history-pathname.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.historyPathname = historyPathname;
+/**
+ * The pathname of a URL kept in Next.js's `history.state` (`url` or `as`), resolved against the current page.
+ * Node's legacy `url.parse` used to do this: it is deprecated (DEP0169), dragged a `url` polyfill into the
+ * browser bundle, and for a missing URL returned `null`, which ended up in the address as "null?…".
+ */
+function historyPathname(url) {
+    return new URL(url !== null && url !== void 0 ? url : "", window.location.href).pathname;
+}

package/pages/grid-page/history-pathname.test.d.ts

@@ -0,0 +1 @@
+export {};

package/pages/grid-page/history-pathname.test.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const history_pathname_1 = require("./history-pathname");
+test("takes the pathname of a history-state URL", () => {
+    expect((0, history_pathname_1.historyPathname)("/cms/grid/[entity]?entity=user&filter=abc")).toBe("/cms/grid/[entity]");
+});
+test("falls back to the current page when history state has no URL", () => {
+    window.history.replaceState(null, "", "/cms/grid/user?x=1");
+    expect((0, history_pathname_1.historyPathname)(undefined)).toBe("/cms/grid/user");
+    expect((0, history_pathname_1.historyPathname)("")).toBe("/cms/grid/user");
+});

package/pages/translations.d.ts

@@ -5,6 +5,9 @@ declare const _default: {
                 "confirm-delete-section": {
                     cs: string;
                 };
+                "delete-section": {
+                    cs: string;
+                };
             };
             header: {
                 save: {

package/pages/translations.js

@@ -7,6 +7,9 @@ exports.default = {
                 "confirm-delete-section": {
                     cs: "Opravdu chcete smazat tuto sekci?",
                 },
+                "delete-section": {
+                    cs: "Smazat sekci",
+                },
             },
             header: {
                 save: {

package/security/restricted-page.js

@@ -16,7 +16,7 @@ function ErrorContent(props) {
     if (props.error.code === "UNAUTHORIZED") {
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", null, t("uxf-cms-restricted-page:login-required")),
-            react_1.default.createElement(button_1.Button, { href: `/admin/login?redirect=${window.location.href}` }, t("uxf-cms-restricted-page:login"))));
+            react_1.default.createElement(button_1.Button, { href: `/admin/login?${new URLSearchParams({ redirect: window.location.href })}` }, t("uxf-cms-restricted-page:login"))));
     }
     return react_1.default.createElement("div", null, t("uxf-cms-restricted-page:unknown-error"));
 }

package/translations/cs.json

@@ -69,7 +69,8 @@
   "uxf-cms-pages-content-builder": {
     "components": {
       "content-header": {
-        "confirm-delete-section": "Opravdu chcete smazat tuto sekci?"
+        "confirm-delete-section": "Opravdu chcete smazat tuto sekci?",
+        "delete-section": "Smazat sekci"
       },
       "header": {
         "save": "Uložit"

package/translations/translations.d.ts

@@ -31,6 +31,9 @@ declare const _default: {
                 "confirm-delete-section": {
                     cs: string;
                 };
+                "delete-section": {
+                    cs: string;
+                };
             };
             header: {
                 save: {

package/utils/use-viewport-height.js

@@ -2,27 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useViewportHeight = useViewportHeight;
 const react_1 = require("react");
-function getHeight() {
-    var _a, _b;
-    if (typeof window === "undefined") {
-        return "100vh";
-    }
-    return (_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : "100vh";
-}
+const use_visual_viewport_height_1 = require("./use-visual-viewport-height");
 function useViewportHeight(scrollLock) {
-    const [height, setHeight] = (0, react_1.useState)(() => getHeight());
+    var _a;
     (0, react_1.useEffect)(() => {
-        if (scrollLock) {
-            document.body.classList.add("xl:overflow-hidden");
+        if (!scrollLock) {
+            return;
         }
-        const handler = () => setHeight(getHeight());
-        window.addEventListener("resize", handler);
-        return () => {
-            if (scrollLock) {
-                document.body.classList.remove("xl:overflow-hidden");
-            }
-            window.removeEventListener("resize", handler);
-        };
+        document.body.classList.add("xl:overflow-hidden");
+        return () => document.body.classList.remove("xl:overflow-hidden");
     }, [scrollLock]);
-    return height;
+    return (_a = (0, use_visual_viewport_height_1.useVisualViewportHeight)()) !== null && _a !== void 0 ? _a : "100vh";
 }

package/utils/use-viewport-height.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/use-viewport-height.test.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const use_viewport_height_1 = require("./use-viewport-height");
+class FakeVisualViewport extends EventTarget {
+    constructor() {
+        super(...arguments);
+        this.height = 700;
+        this.scale = 1;
+    }
+}
+let visualViewport;
+beforeEach(() => {
+    visualViewport = new FakeVisualViewport();
+    Object.defineProperty(window, "visualViewport", { configurable: true, value: visualViewport });
+});
+afterEach(() => {
+    Object.defineProperty(window, "visualViewport", { configurable: true, value: undefined });
+});
+test("follows the visual viewport, which shrinks when the on-screen keyboard opens", () => {
+    const { result } = (0, react_1.renderHook)(() => (0, use_viewport_height_1.useViewportHeight)());
+    (0, react_1.act)(() => {
+        visualViewport.height = 400;
+        // iOS fires this on the visual viewport only; window gets no resize event.
+        visualViewport.dispatchEvent(new Event("resize"));
+    });
+    expect(result.current).toBe(400);
+});
+test("ignores pinch zoom, which shrinks the visual viewport by the zoom scale", () => {
+    const { result } = (0, react_1.renderHook)(() => (0, use_viewport_height_1.useViewportHeight)());
+    (0, react_1.act)(() => {
+        visualViewport.scale = 2;
+        visualViewport.height = 350;
+        visualViewport.dispatchEvent(new Event("resize"));
+    });
+    expect(result.current).toBe(700);
+});

package/utils/use-visual-viewport-height.d.ts

@@ -0,0 +1,2 @@
+/** Height of the visual viewport in px, not counting pinch zoom; `undefined` on the server and while hydrating. */
+export declare function useVisualViewportHeight(): number | undefined;

package/utils/use-visual-viewport-height.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVisualViewportHeight = useVisualViewportHeight;
+const react_1 = require("react");
+function subscribe(onStoreChange) {
+    var _a;
+    // The visual viewport has its own resize event: iOS fires it when the on-screen keyboard opens, and the window
+    // gets none.
+    const target = (_a = window.visualViewport) !== null && _a !== void 0 ? _a : window;
+    const controller = new AbortController();
+    target.addEventListener("resize", onStoreChange, { signal: controller.signal });
+    return () => controller.abort();
+}
+function getSnapshot() {
+    const viewport = window.visualViewport;
+    // Times the zoom scale: pinch zoom shrinks `height` by the scale, and the layout must not shrink with it. The
+    // on-screen keyboard shrinks it at scale 1, which is the change to follow.
+    return viewport ? viewport.height * viewport.scale : window.innerHeight;
+}
+/** Height of the visual viewport in px, not counting pinch zoom; `undefined` on the server and while hydrating. */
+function useVisualViewportHeight() {
+    return (0, react_1.useSyncExternalStore)(subscribe, getSnapshot, () => undefined);
+}