@keycloakify/keycloak-account-ui/ui-shared/scroll-form/ScrollForm.js

<p align="center"> <img src="https://github.com/user-attachments/assets/e31c4910-7205-441c-9a35-e134b806b3a8"> </p> <p align="center"> <i>Repackaged Keycloak Account UI</i> <br> <br> <a href="https://github.com/keycloakify/keycloak-a

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Grid, GridItem, JumpLinks, JumpLinksItem, PageSection, } from "@patternfly/react-core";
import { Fragment, useMemo } from "react";
import { FormPanel } from "../../ui-shared/scroll-form/FormPanel";
import { ScrollPanel } from "../../ui-shared/scroll-form/ScrollPanel";
import style from "@keycloakify/keycloak-account-ui/ui-shared/scroll-form/scroll-form.module.css";
export const mainPageContentId = "kc-main-content-page-container";
const spacesToHyphens = (string) => {
    return string.replace(/\s+/g, "-");
};
export const ScrollForm = (_a) => {
    var { label, sections, borders = false } = _a, rest = __rest(_a, ["label", "sections", "borders"]);
    const shownSections = useMemo(() => sections.filter(({ isHidden }) => !isHidden), [sections]);
    return (_jsxs(Grid, Object.assign({ hasGutter: true }, rest, { children: [_jsx(GridItem, { md: 8, sm: 12, children: shownSections.map(({ title, panel }) => {
                    const scrollId = spacesToHyphens(title.toLowerCase());
                    return (_jsx(Fragment, { children: borders ? (_jsx(FormPanel, { scrollId: scrollId, title: title, className: style.panel, children: panel })) : (_jsx(ScrollPanel, { scrollId: scrollId, title: title, children: panel })) }, title));
                }) }), _jsx(GridItem, { md: 4, sm: 12, order: { default: "-1", md: "1" }, children: _jsx(PageSection, { className: style.sticky, children: _jsx(JumpLinks, { isVertical: true, 
                        // scrollableSelector has to point to the id of the element whose scrollTop changes
                        // to scroll the entire main section, it has to be the pf-v5-c-page__main
                        scrollableSelector: `#${mainPageContentId}`, label: label, offset: 100, children: shownSections.map(({ title }) => {
                            const scrollId = spacesToHyphens(title.toLowerCase());
                            return (
                            // note that JumpLinks currently does not work with spaces in the href
                            _jsx(JumpLinksItem, { href: `#${scrollId}`, "data-testid": `jump-link-${scrollId}`, children: title }, title));
                        }) }) }) })] })));
};
//# sourceMappingURL=ScrollForm.js.map