@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/lib/components/Consent/variables.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.consent = void 0;
+const styled_components_1 = require("styled-components");
+exports.consent = (0, styled_components_1.css) `
+  /**
+  * @tokens Consent
+  */
+  --consent-banner-width: 380px;
+  --consent-banner-offset: var(--spacing-base); // @presenter Spacing
+  --consent-banner-bg-color: var(--bg-color); // @presenter Color
+  --consent-banner-text-color: var(--text-color-primary); // @presenter Color
+  --consent-banner-border-color: var(--border-color-primary); // @presenter Color
+  --consent-banner-border-radius: var(--border-radius-lg);
+  --consent-banner-box-shadow: var(--bg-raised-shadow);
+  --consent-banner-padding: var(--spacing-base); // @presenter Spacing
+  --consent-banner-gap: var(--spacing-sm); // @presenter Spacing
+  --consent-banner-title-font-size: var(--font-size-base);
+  --consent-banner-font-size: var(--font-size-sm);
+  --consent-banner-z-index: var(--z-index-overlay);
+
+  --consent-dialog-width: 560px;
+  --consent-dialog-max-width: calc(100vw - 2 * var(--spacing-base));
+  --consent-dialog-padding: var(--spacing-lg); // @presenter Spacing
+  --consent-dialog-border-radius: var(--border-radius-lg);
+  --consent-dialog-bg-color: var(--modal-bg-color); // @presenter Color
+  --consent-dialog-box-shadow: var(--modal-box-shadow);
+  --consent-dialog-row-border-color: var(--border-color-primary); // @presenter Color
+  --consent-dialog-description-color: var(--text-color-secondary); // @presenter Color
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { RenderableChildren } from '../../core/types';
+import type { DropdownAlignment, RenderableChildren } from '../../core/types';
 type DropdownMenuContext = {
     close: () => void;
     isOpen: boolean;
@@ -9,13 +9,15 @@ export type DropdownProps = {
     children: RenderableChildren<DropdownMenuContext>;
     triggerEvent?: 'click' | 'hover';
     placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
+    alignment?: DropdownAlignment;
     active?: boolean;
     closeOnClick?: boolean;
     dataAttributes?: Record<string, string>;
     className?: string;
     withArrow?: boolean;
     portalled?: boolean;
+    /** Element the menu lines up with when it is not the dropdown itself, e.g. a whole split button. */
+    alignmentAnchorRef?: React.RefObject<HTMLElement | null>;
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
     onOpen?: () => void;

package/lib/components/Dropdown/Dropdown.js

@@ -38,14 +38,17 @@ const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
+const utils_1 = require("../../core/utils");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;
-exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, portalled = false, onClick, onClose, onOpen, }, ref) => {
+exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, portalled = false, alignmentAnchorRef, onClick, onClose, onOpen, }, ref) => {
+    var _a, _b;
     const dropdownRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(false, active);
     const [menuStyle, setMenuStyle] = (0, react_1.useState)({});
+    const [fittedAlignment, setFittedAlignment] = (0, react_1.useState)(alignment);
     const wrapperRef = ref || dropdownRef;
     const handleOpen = () => {
         setIsOpen(true);
@@ -77,13 +80,13 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
         }
     };
     const updateMenuPosition = (0, react_1.useCallback)(() => {
-        var _a;
-        var _b;
+        var _a, _b;
+        var _c, _d, _e;
         const wrapper = wrapperRef.current;
         if (!wrapper)
             return;
-        const rect = wrapper.getBoundingClientRect();
-        const menuHeight = (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+        const rect = ((_c = alignmentAnchorRef === null || alignmentAnchorRef === void 0 ? void 0 : alignmentAnchorRef.current) !== null && _c !== void 0 ? _c : wrapper).getBoundingClientRect();
+        const menuHeight = (_d = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _d !== void 0 ? _d : 0;
         const fitsBelow = rect.bottom + menuHeight <= window.innerHeight;
         const fitsAbove = rect.top - menuHeight >= 0;
         const openUpward = placement === 'top' ? fitsAbove || !fitsBelow : !fitsBelow && fitsAbove;
@@ -94,7 +97,7 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
         else {
             style.top = rect.bottom;
         }
-        if (alignment === 'end') {
+        if ((0, utils_1.fitDropdownAlignment)(rect, (_e = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== null && _e !== void 0 ? _e : 0, alignment) === 'end') {
             style.right = window.innerWidth - rect.right;
         }
         else {
@@ -105,7 +108,25 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
             style.zIndex = zIndex;
         }
         setMenuStyle(style);
-    }, [placement, alignment, wrapperRef]);
+    }, [placement, alignment, wrapperRef, alignmentAnchorRef]);
+    /* The absolute-positioned menu is placed by CSS, so the side is measured once it is
+       shown and again on resize; a side that runs off the viewport flips to the other one. */
+    const updateFittedAlignment = (0, react_1.useCallback)(() => {
+        var _a;
+        const wrapper = wrapperRef.current;
+        const menu = menuRef.current;
+        if (!wrapper || !menu)
+            return;
+        const rect = ((_a = alignmentAnchorRef === null || alignmentAnchorRef === void 0 ? void 0 : alignmentAnchorRef.current) !== null && _a !== void 0 ? _a : wrapper).getBoundingClientRect();
+        setFittedAlignment((0, utils_1.fitDropdownAlignment)(rect, menu.offsetWidth, alignment));
+    }, [alignment, wrapperRef, alignmentAnchorRef]);
+    useIsomorphicLayoutEffect(() => {
+        if (portalled || !isOpen)
+            return;
+        updateFittedAlignment();
+        window.addEventListener('resize', updateFittedAlignment);
+        return () => window.removeEventListener('resize', updateFittedAlignment);
+    }, [portalled, isOpen, updateFittedAlignment]);
     useIsomorphicLayoutEffect(() => {
         if (!portalled || !isOpen)
             return;
@@ -120,8 +141,9 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
     (0, hooks_1.useOutsideClick)(portalled ? [wrapperRef, menuRef] : wrapperRef, handleClose);
     const menuContent = typeof children === 'function' ? children({ close: handleClose, isOpen }) : children;
     const triggerChild = react_1.default.Children.only(trigger);
-    const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, 'aria-expanded': isOpen, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
-    const menu = (react_1.default.createElement(ChildrenWrapper, { ref: menuRef, $placement: placement, $alignment: alignment, $isOpen: isOpen, $portalled: portalled, style: portalled ? menuStyle : undefined, onClick: closeOnClick ? handleChildClick : undefined }, menuContent));
+    const isLinkTrigger = Boolean(((_a = triggerChild.props) === null || _a === void 0 ? void 0 : _a.to) || ((_b = triggerChild.props) === null || _b === void 0 ? void 0 : _b.href));
+    const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, 'aria-haspopup': 'menu', 'aria-expanded': isOpen, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' || !isLinkTrigger ? handleKeyDown : undefined }));
+    const menu = (react_1.default.createElement(ChildrenWrapper, { ref: menuRef, $placement: placement, $alignment: fittedAlignment, $isOpen: isOpen, $portalled: portalled, style: portalled ? menuStyle : undefined, onClick: closeOnClick ? handleChildClick : undefined }, menuContent));
     const portalledMenu = isOpen && typeof document !== 'undefined' ? (0, react_dom_1.createPortal)(menu, document.body) : null;
     return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: wrapperRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
         dropdownTrigger,

package/lib/components/Dropdown/DropdownMenu.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ReactNode, JSX } from 'react';
 import type { DropdownMenuItemProps } from '../../components/Dropdown/DropdownMenuItem';
 export type DropdownMenuProps = {
+    id?: string;
     className?: string;
     role?: string;
     footer?: React.ReactNode;

package/lib/components/Dropdown/DropdownMenu.js

@@ -15,7 +15,7 @@ function DropdownMenu(props) {
     if ('items' in props) {
         content = props.items.map((item, idx) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, Object.assign({ key: idx }, item), item.content)));
     }
-    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", className: props.className, role: props.role || 'menu' },
+    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", id: props.id, className: props.className, role: props.role || 'menu' },
         content,
         props.footer || null));
 }

package/lib/components/Feedback/Reasons.js

@@ -43,6 +43,7 @@ const hooks_1 = require("../../core/hooks");
 function Reasons({ settings, onChange, className }) {
     const { label, component = 'checkbox', items = [] } = settings;
     const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+    const idPrefix = React.useId();
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     if (!items.length) {
@@ -59,8 +60,8 @@ function Reasons({ settings, onChange, className }) {
         React.createElement(Label, null, label ||
             translate('feedback.settings.reasons.label', 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
-            React.createElement("input", { type: component, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
-            React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
+            React.createElement("input", { id: `${idPrefix}-${idx}`, type: component, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
+            React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, htmlFor: `${idPrefix}-${idx}` }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
 }
 const ReasonsWrapper = styled_components_1.default.div `
   font-family: var(--feedback-font-family);

package/lib/components/Filter/FilterCheckboxes.js

@@ -22,22 +22,41 @@ function FilterCheckboxes({ filter, filterValuesCasing, showCounter = true, }) {
         react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
         react_1.default.createElement(FilterOptions_1.FilterOptions, null, (filter.filteredOptions || filter.options).map(({ value, count }) => {
             const id = 'filter--' + filter.property + '--' + value;
-            return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
-                    filter.toggleOption(value);
-                    telemetry.sendFilterCheckboxToggledMessage([
-                        (0, utils_1.getBaseDataAttributes)('filterId', 'checkbox'),
-                    ]);
-                } },
-                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
-                        ? filter.selectedOptions.has(value) ||
-                            filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
-                        : false }),
-                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
+            const checked = filter.selectedOptions instanceof Set
+                ? filter.selectedOptions.has(value) ||
+                    filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
+                : false;
+            return (react_1.default.createElement(FilterCheckboxOption, { key: id },
+                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: checked }),
+                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value },
+                    react_1.default.createElement(FilterCheckboxInput, { checked: checked, onChange: () => {
+                            filter.toggleOption(value);
+                            telemetry.sendFilterCheckboxToggledMessage([
+                                (0, utils_1.getBaseDataAttributes)('filterId', 'checkbox'),
+                            ]);
+                        } }),
+                    (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
                 showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
         }))));
 }
 const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+const FilterCheckboxInput = styled_components_1.default.input.attrs({ type: 'checkbox' }) `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 const FilterCheckboxesWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Filter/FilterDateRange.js

@@ -1,10 +1,43 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterDateRange = FilterDateRange;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const FilterOptions_1 = require("../../components/Filter/FilterOptions");
 const FilterTitle_1 = require("../../components/Filter/FilterTitle");
@@ -12,6 +45,7 @@ const DatePicker_1 = require("../../components/DatePicker/DatePicker");
 const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 function FilterDateRange({ filter }) {
+    const [today] = (0, react_1.useState)(() => new Date());
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const from = filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined;
@@ -22,7 +56,7 @@ function FilterDateRange({ filter }) {
             react_1.default.createElement(DateRangeWrapper, null,
                 react_1.default.createElement(DateRangeRow, null,
                     react_1.default.createElement("span", null, translate('filter.dateRange.from', 'From:')),
-                    react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: new Date(), onChange: (from) => {
+                    react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: today, onChange: (from) => {
                             if (Array.isArray(from))
                                 return;
                             filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: (0, utils_1.formatDateWithoutTimeZone)(from), to: (0, utils_1.formatDateWithoutTimeZone)(to) }));

package/lib/components/Footer/Footer.js

@@ -11,6 +11,7 @@ const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const FooterCopyright_1 = require("../../components/Footer/FooterCopyright");
 const FooterColumn_1 = require("../../components/Footer/FooterColumn");
+const ConsentSettingsLink_1 = require("../../components/Consent/ConsentSettingsLink");
 function Footer({ className }) {
     const { footer } = (0, hooks_1.useThemeConfig)() || {};
     const { items = [], copyrightText } = footer || {};
@@ -22,7 +23,9 @@ function Footer({ className }) {
         !!items.length && (react_1.default.createElement(FooterColumnsSection, null, withColumns
             ? items.map((column, index) => (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: `${column.label}_${index}`, column: column })))
             : items.map((item, index) => (react_1.default.createElement(FooterItem_1.FooterItem, { key: index, item: item }))))),
-        react_1.default.createElement(FooterCopyrightWrapper, null, copyrightText && react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText }))));
+        react_1.default.createElement(FooterCopyrightWrapper, null,
+            copyrightText && react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText }),
+            react_1.default.createElement(ConsentSettingsLink_1.ConsentSettingsLink, null))));
 }
 const FooterCopyrightWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Image/Image.js

@@ -43,6 +43,7 @@ const Button_1 = require("../../components/Button/Button");
 function Image(props) {
     const { src, srcSet, images: galleryImages, alt, className, width, height, border, caption, framed, style, withLightbox, lightboxStyle, } = props;
     const lightboxContainerRef = (0, react_1.useRef)(null);
+    const lightboxTriggerRef = (0, react_1.useRef)(null);
     const [lightboxImage, setLightboxImage] = (0, react_1.useState)(undefined);
     const parsedSourceSetMap = (0, react_1.useMemo)(() => {
         return srcSet ? (0, utils_1.parseSrcSet)(srcSet) : new Map();
@@ -53,28 +54,47 @@ function Image(props) {
             setLightboxImage(undefined);
         }
     }, []);
-    const handleImageClick = (0, react_1.useCallback)((src) => {
+    const handleImageClick = (0, react_1.useCallback)((src, trigger) => {
         if (!withLightbox || lightboxImage) {
             return;
         }
+        lightboxTriggerRef.current = trigger;
         setLightboxImage(src);
     }, [withLightbox, lightboxImage]);
+    const getLightboxTriggerProps = (imageSrc) => withLightbox
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            'aria-label': alt ? undefined : 'Open image',
+            onClick: (e) => handleImageClick(imageSrc, e.currentTarget),
+            onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleImageClick(imageSrc, e.currentTarget);
+                }
+            },
+        }
+        : {};
     const handleCloseLightbox = (0, react_1.useCallback)(() => {
         setLightboxImage(undefined);
     }, []);
     (0, hooks_1.useModalScrollLock)(!!lightboxImage);
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b;
         if (lightboxImage) {
             (_a = lightboxContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
+        else {
+            (_b = lightboxTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            lightboxTriggerRef.current = null;
+        }
     }, [lightboxImage]);
     const combinedStyles = Object.assign(Object.assign(Object.assign({}, (withLightbox && { cursor: 'pointer' })), (border && { border })), (typeof style === 'string' ? (0, utils_1.parseStyleString)(style) : style));
     const lightboxOverlayStyles = typeof lightboxStyle === 'string' ? (0, utils_1.parseStyleString)(lightboxStyle) : lightboxStyle;
-    const images = src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles, onClick: () => handleImageClick(src) })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, $colorMode: key, src: value, alt: alt, className: className, width: width, height: height, $withLightbox: withLightbox, style: combinedStyles, onClick: () => handleImageClick(value) }))));
+    const images = src ? (react_1.default.createElement("img", Object.assign({ src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles }, getLightboxTriggerProps(src)))) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, Object.assign({ key: key, $colorMode: key, src: value, alt: alt, className: className, width: width, height: height, $withLightbox: withLightbox, style: combinedStyles }, getLightboxTriggerProps(value))))));
     const hasGallery = Array.isArray(galleryImages) && galleryImages.length > 0;
     const visibleGalleryImages = hasGallery ? galleryImages.slice(0, 3) : [];
-    const gallery = hasGallery ? (react_1.default.createElement(GalleryRow, null, visibleGalleryImages.map((galleryImageSrc, index) => (react_1.default.createElement("img", { key: `${galleryImageSrc}-${index}`, src: galleryImageSrc, alt: alt, style: withLightbox ? { cursor: 'pointer' } : undefined, onClick: () => handleImageClick(galleryImageSrc) }))))) : null;
+    const gallery = hasGallery ? (react_1.default.createElement(GalleryRow, null, visibleGalleryImages.map((galleryImageSrc, index) => (react_1.default.createElement("img", Object.assign({ key: `${galleryImageSrc}-${index}`, src: galleryImageSrc, alt: alt, style: withLightbox ? { cursor: 'pointer' } : undefined }, getLightboxTriggerProps(galleryImageSrc))))))) : null;
     const hasCaption = Boolean(caption);
     const hasWrapper = Boolean(framed || hasCaption || hasGallery);
     const wrapperContent = hasGallery ? gallery : images;

package/lib/components/JsonViewer/Helpers.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
+export type JsonFold = {
+    isExpanded: (path: string, level: number) => boolean;
+    setExpanded: (path: string, expanded: boolean) => void;
+};
+type Foldable = [path: string, level: number];
+export declare function isFoldable(value: unknown): value is Record<string, unknown>;
+export declare function collectFoldables(value: unknown, path?: string, level?: number): Foldable[];
 export declare function JsonValue(props: {
     value: any;
     level: number;
+    path: string;
     standalone?: boolean;
-    defaultExpandLevel: number;
-    expandAllSignal: boolean | undefined;
+    fold: JsonFold;
     maxStringLength?: number;
 }): React.ReactNode;
+export {};

package/lib/components/JsonViewer/Helpers.js

@@ -3,30 +3,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFoldable = isFoldable;
+exports.collectFoldables = collectFoldables;
 exports.JsonValue = JsonValue;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const ShowMoreToggleButton_1 = require("../../components/Button/ShowMoreToggleButton");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+function isFoldable(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        Object.values(value).some((item) => item !== undefined));
+}
+function collectFoldables(value, path = '', level = 1) {
+    if (!isFoldable(value))
+        return [];
+    return Object.entries(value).flatMap(([key, child]) => {
+        const childPath = `${path}/${key}`;
+        return isFoldable(child)
+            ? [[childPath, level], ...collectFoldables(child, childPath, level + 1)]
+            : [];
+    });
+}
 function JsonValue(props) {
-    const { standalone, defaultExpandLevel, level, value, expandAllSignal, maxStringLength } = props;
+    const { standalone, fold, level, path, value, maxStringLength } = props;
     const indent = ' '.repeat(level * 2);
-    const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
-    const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
-    const [prevExpandAllSignal, setPrevExpandAllSignal] = react_1.default.useState(expandAllSignal);
-    const [prevLevel, setPrevLevel] = react_1.default.useState(level);
-    if (prevExpandAllSignal !== expandAllSignal || prevLevel !== level) {
-        setPrevExpandAllSignal(expandAllSignal);
-        setPrevLevel(level);
-        if (expandAllSignal !== undefined && !(expandAllSignal === false && level === 0)) {
-            setExpanded(expandAllSignal);
-        }
-    }
+    const isExpanded = fold.isExpanded(path, level);
     const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
     const valueType = typeof value;
-    const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
-    if (isPrimitive) {
+    if (!isFoldable(value)) {
         const isOversizedString = typeof value === 'string' && maxStringLength !== undefined && value.length > maxStringLength;
         return (react_1.default.createElement(react_1.default.Fragment, null,
             standalone ? indent : null,
@@ -36,14 +42,14 @@ function JsonValue(props) {
     const closingPunctuation = Array.isArray(value) ? ']' : '}';
     const valueElement = Array.isArray(value)
         ? value.map((item, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
-            react_1.default.createElement(JsonValue, { value: item, level: level + 1, standalone: true, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }),
-            index < value.length - 1 ? ',\n' : null)))
+            react_1.default.createElement(JsonValue, { value: item, level: level + 1, path: `${path}/${index}`, standalone: true, fold: fold, maxStringLength: maxStringLength }),
+            index < value.length - 1 ? react_1.default.createElement("span", null, ',\n') : null)))
         : keys.map((key, index) => (react_1.default.createElement(react_1.default.Fragment, { key: key },
-            react_1.default.createElement(JsonKeyValue, { name: key, value: value[key], level: level + 1, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }),
-            index < keys.length - 1 ? ',\n' : null)));
+            react_1.default.createElement(JsonKeyValue, { name: key, value: value[key], level: level + 1, path: `${path}/${key}`, fold: fold, maxStringLength: maxStringLength }),
+            index < keys.length - 1 ? react_1.default.createElement("span", null, ',\n') : null)));
     const openingPunctuationElement = standalone ? (react_1.default.createElement(react_1.default.Fragment, null,
         indent,
-        level > 0 ? (react_1.default.createElement(ExpandIcon, { onClick: () => setExpanded((v) => !v), isExpanded: isExpanded })) : null,
+        level > 0 ? (react_1.default.createElement(ExpandIcon, { onClick: () => fold.setExpanded(path, !isExpanded), isExpanded: isExpanded })) : null,
         openingPunctuation,
         isExpanded ? '\n' : null)) : null;
     const closingPunctuationElement = standalone ? (react_1.default.createElement(react_1.default.Fragment, null,
@@ -56,34 +62,24 @@ function JsonValue(props) {
         closingPunctuationElement));
 }
 function JsonKeyValue(props) {
-    const { defaultExpandLevel, level, name, value, expandAllSignal, maxStringLength } = props;
+    const { fold, level, name, path, value, maxStringLength } = props;
     const indent = ' '.repeat(level * 2);
-    const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
-    const isCollapsible = typeof value === 'object' && value !== null && keys.length > 0;
-    const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
-    const isExpanded = expandAllSignal !== undefined ? expandAllSignal : isExpandedState;
-    const [prevExpandAllSignal, setPrevExpandAllSignal] = react_1.default.useState(expandAllSignal);
-    if (prevExpandAllSignal !== expandAllSignal) {
-        setPrevExpandAllSignal(expandAllSignal);
-        if (expandAllSignal !== undefined) {
-            setExpanded(expandAllSignal);
-        }
-    }
+    const isExpanded = fold.isExpanded(path, level);
     const openingPunctuation = Array.isArray(value) ? '[' : '{';
     const closingPunctuation = Array.isArray(value) ? ']' : '}';
-    const valueElement = isCollapsible ? (react_1.default.createElement(react_1.default.Fragment, null,
+    const valueElement = isFoldable(value) ? (react_1.default.createElement(react_1.default.Fragment, null,
         openingPunctuation,
         isExpanded ? (react_1.default.createElement(react_1.default.Fragment, null,
             '\n',
-            react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }),
+            react_1.default.createElement(JsonValue, { value: value, level: level, path: path, fold: fold, maxStringLength: maxStringLength }),
             '\n')) : (' … '),
         isExpanded ? indent : null,
-        closingPunctuation)) : (react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }));
+        closingPunctuation)) : (react_1.default.createElement(JsonValue, { value: value, level: level, path: path, fold: fold, maxStringLength: maxStringLength }));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         indent,
-        isCollapsible ? (react_1.default.createElement(ExpandIcon, { onClick: () => setExpanded((v) => !v), isExpanded: isExpanded })) : null,
+        isFoldable(value) ? (react_1.default.createElement(ExpandIcon, { onClick: () => fold.setExpanded(path, !isExpanded), isExpanded: isExpanded })) : null,
         react_1.default.createElement("span", { className: "property token string" }, `"${name}"`),
-        ": ",
+        react_1.default.createElement("span", null, ': '),
         valueElement));
 }
 function TruncatedStringValue({ value, maxStringLength, }) {

package/lib/components/JsonViewer/JsonViewer.js

@@ -42,21 +42,18 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const Helpers_1 = require("../../components/JsonViewer/Helpers");
 function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, maxStringLength, }) {
-    const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
-    const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
-    const expandAll = () => {
-        setExpandAllSignal(true);
-        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(true);
-        setTimeout(() => {
-            setExpandAllSignal(undefined);
-        });
+    const defaultExpandLevel = Math.max(1, expandLevel);
+    const foldables = react_1.default.useMemo(() => (0, Helpers_1.collectFoldables)(data), [data]);
+    const [expandedPaths, setExpandedPaths] = react_1.default.useState({});
+    const fold = {
+        isExpanded: (path, level) => { var _a; return (_a = expandedPaths[path]) !== null && _a !== void 0 ? _a : level < defaultExpandLevel; },
+        setExpanded: (path, expanded) => setExpandedPaths((prev) => (Object.assign(Object.assign({}, prev), { [path]: expanded }))),
     };
-    const collapseAll = () => {
-        setExpandAllSignal(false);
-        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(false);
-        setTimeout(() => {
-            setExpandAllSignal(undefined);
-        });
+    const hasFoldables = foldables.length > 0;
+    const allExpanded = foldables.every(([path, level]) => fold.isExpanded(path, level));
+    const toggleAll = () => {
+        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(!allExpanded);
+        setExpandedPaths(Object.fromEntries(foldables.map(([path]) => [path, !allExpanded])));
     };
     const source = JSON.stringify(data, null, 2);
     const hasHeader = title || controls;
@@ -65,13 +62,13 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelT
                 ? {
                     title,
                     className: 'code-block-header',
-                    controls: controls && Object.assign(Object.assign({}, controls), { copy: Object.assign(Object.assign({}, controls.copy), { data, onClick: onCopyClick, handleOutside: true }), expand: showFoldingButtons
-                            ? Object.assign(Object.assign({}, controls.expand), { onClick: expandAll }) : undefined, collapse: showFoldingButtons
-                            ? Object.assign(Object.assign({}, controls.collapse), { onClick: collapseAll }) : undefined }),
+                    controls: controls && Object.assign(Object.assign({}, controls), { copy: Object.assign(Object.assign({}, controls.copy), { data, onClick: onCopyClick, handleOutside: true }), expand: hasFoldables && !allExpanded
+                            ? Object.assign(Object.assign({}, controls.expand), { onClick: toggleAll }) : undefined, collapse: hasFoldables && allExpanded
+                            ? Object.assign(Object.assign({}, controls.collapse), { onClick: toggleAll }) : undefined }),
                 }
                 : undefined, source: source },
             react_1.default.createElement(FoldingWrap, null,
-                react_1.default.createElement(Helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel), maxStringLength: maxStringLength })))));
+                react_1.default.createElement(Helpers_1.JsonValue, { value: data, level: 0, path: "", standalone: true, fold: fold, maxStringLength: maxStringLength })))));
 }
 exports.JsonViewer = (0, react_1.memo)(JsonComponent);
 const FoldingWrap = styled_components_1.default.div `

package/lib/components/LoadProgressBar/LoadProgressBar.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+export type LoadProgressBarProps = {
+    /** Also shows the bar while the host's own navigation is pending. */
+    pending?: boolean;
+    className?: string;
+};
+/** A top-of-page bar while a page load is pending. */
+export declare function LoadProgressBar({ pending, className, }: LoadProgressBarProps): JSX.Element | null;