@redocly/theme 0.70.0-next.4 → 0.70.0-next.6

package/lib/components/Buttons/ConnectMCPButton.js

@@ -19,55 +19,50 @@ const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 const hooks_1 = require("../../core/hooks");
 const constants_1 = require("../../core/constants");
-const MENU_OPTIONS = [
-    {
-        key: 'cursor',
+const MENU_OPTIONS = {
+    cursor: {
         icon: CursorIcon_1.CursorIcon,
         titleTranslationKey: 'page.actions.connectMcp.cursor',
         titleDefault: 'Connect to Cursor',
         descriptionTranslationKey: 'page.actions.connectMcp.cursorDescription',
         descriptionDefault: 'Install MCP server on Cursor',
     },
-    {
-        key: 'vscode',
+    vscode: {
         icon: VSCodeIcon_1.VSCodeIcon,
         titleTranslationKey: 'page.actions.connectMcp.vscode',
         titleDefault: 'Connect to VS Code',
         descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
         descriptionDefault: 'Install MCP server on VS Code',
     },
-    {
-        key: 'claude-code',
+    'claude-code': {
         icon: ClaudeIcon_1.ClaudeIcon,
         titleTranslationKey: 'page.actions.connectMcp.claudeCode',
         titleDefault: 'Connect to Claude Code',
         descriptionTranslationKey: 'page.actions.connectMcp.claudeCodeDescription',
         descriptionDefault: 'Copy the Claude Code CLI command',
     },
-    {
-        key: 'codex',
+    codex: {
         icon: CodexIcon_1.CodexIcon,
         titleTranslationKey: 'page.actions.connectMcp.codex',
         titleDefault: 'Connect to Codex CLI',
         descriptionTranslationKey: 'page.actions.connectMcp.codexDescription',
         descriptionDefault: 'Copy the Codex CLI command',
     },
-    {
-        key: 'copy',
+    copy: {
         icon: CopyIcon_1.CopyIcon,
         titleTranslationKey: 'page.actions.connectMcp.copyConfig',
         titleDefault: 'Copy MCP Configuration',
         descriptionTranslationKey: 'page.actions.connectMcp.copyConfigDescription',
         descriptionDefault: 'Copy MCP JSON Configuration',
     },
-];
+};
 // Copy actions keep the dropdown open so the copied checkmark is visible.
 const COPY_OPTIONS = ['claude-code', 'codex', 'copy'];
 function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = constants_1.DEFAULT_MCP_OPTIONS, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { copiedOption, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({ options });
-    const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
+    const menuOptions = visibleOptions.map((key) => (Object.assign({ key }, MENU_OPTIONS[key])));
     const primaryOption = menuOptions[0];
     const dropdownOptions = menuOptions.slice(1);
     if (!primaryOption)

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.d.ts

@@ -1,2 +1,2 @@
 import type { CatalogEntityRelationsGraphProps } from '../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph';
-export declare const CatalogEntityRelationsGraph: import("react").ComponentType<CatalogEntityRelationsGraphProps>;
+export declare const CatalogEntityRelationsGraph: import("../../../../core/utils").DynamicComponent<CatalogEntityRelationsGraphProps>;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.js

@@ -35,5 +35,5 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityRelationsGraph = void 0;
 const utils_1 = require("../../../../core/utils");
-exports.CatalogEntityRelationsGraph = (0, utils_1.dynamic)(() => Promise.resolve().then(() => __importStar(require('./CatalogEntityRelationsGraph'))).then((mod) => mod.CatalogEntityRelationsGraph));
+exports.CatalogEntityRelationsGraph = (0, utils_1.dynamic)(() => Promise.resolve().then(() => __importStar(require('../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph'))).then((mod) => mod.CatalogEntityRelationsGraph));
 //# sourceMappingURL=CatalogEntityRelationsGraph.lazy.js.map

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.js

@@ -101,17 +101,20 @@ function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter = tru
                 react_1.default.createElement(FilterInput_1.FilterInput, { value: searchTerm, onChange: setSearchTerm })),
             react_1.default.createElement(FilterOptions_1.FilterOptions, null, filteredOptions.map(({ value, count }) => {
                 const id = 'filter--' + filter.property + '--' + value;
-                return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
-                        filter.toggleOption(value);
-                        telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
-                            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesFilterCheckboxId', 'checkbox')), { category: filter.property, value: value }),
-                        ]);
-                    } },
-                    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 }, highlightText((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.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesFilterCheckboxId', 'checkbox')), { category: filter.property, value: value }),
+                                ]);
+                            } }),
+                        highlightText((0, utils_1.changeTextCasing)(translate(value), filterValuesCasing) || '')),
                     showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
             })))));
 }
@@ -147,6 +150,22 @@ const HighlightedText = styled_components_1.default.span `
 `;
 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 FilterSearchWrapper = styled_components_1.default.div `
   padding-bottom: var(--spacing-xs);

package/lib/components/Catalog/CatalogFilter/CatalogFilterDateRange.js

@@ -46,6 +46,7 @@ const hooks_1 = require("../../../core/hooks");
 const utils_1 = require("../../../core/utils");
 const Accordion_1 = require("../../../components/Accordion/Accordion");
 function CatalogFilterDateRange({ filter, className, }) {
+    const [today] = (0, react_1.useState)(() => new Date());
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const from = (0, react_1.useMemo)(() => (filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined), [filter.selectedOptions.from]);
@@ -62,7 +63,7 @@ function CatalogFilterDateRange({ filter, className, }) {
                 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/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,15 +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);
@@ -78,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;
@@ -95,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 {
@@ -106,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;
@@ -123,7 +143,7 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
     const triggerChild = react_1.default.Children.only(trigger);
     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: alignment, $isOpen: isOpen, $portalled: portalled, style: portalled ? menuStyle : undefined, onClick: closeOnClick ? handleChildClick : undefined }, menuContent));
+    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/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/Search/SearchAiActivity.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from 'react';
+import type { ToolCall } from '../../core/types';
+export type SearchAiActivityProps = {
+    /** One run of consecutive tool calls; an empty list means the assistant has not called a tool yet. */
+    toolCalls: ToolCall[];
+    /** The assistant works on this group now; once it moves on, a call without a result counts as finished. */
+    isActive: boolean;
+    className?: string;
+};
+export declare function SearchAiActivity({ toolCalls, isActive, className, }: SearchAiActivityProps): JSX.Element;