@redocly/theme 0.70.0-next.0 → 0.70.0-next.2

package/lib/components/Button/Button.js

@@ -118,7 +118,9 @@ const StyledButton = styled_components_1.default.button `
     height: var(--button-icon-size);
   }
 
-  &:hover {
+  /* A button that owns an open menu keeps its hovered appearance. */
+  &:hover,
+  &[aria-expanded='true'] {
     background-color: var(--button-bg-color-hover);
     color: var(--button-color-hover);
     border-color: var(--button-border-color-hover);
@@ -140,7 +142,8 @@ const StyledButton = styled_components_1.default.button `
     border-color: var(--button-border-color-danger);
     background-color: var(--button-bg-color-danger);
 
-    &:hover {
+    &:hover,
+    &[aria-expanded='true'] {
       color: var(--button-content-color-danger-hover);
       border-color: var(--button-border-color-danger-hover);
       background-color: var(--button-bg-color-danger-hover);

package/lib/components/Button/variables.js

@@ -251,21 +251,30 @@ exports.button = (0, styled_components_1.css) `
   --button-group-divider-opacity: 1;
   --button-group-divider-color-disabled: var(--color-warm-grey-2); // @presenter Color
 
-  .button-group-primary {
-    --button-group-divider-color: var(--button-content-color-inverse); // @presenter Color
+  .button-group-primary .button {
+    --button-group-divider-color: var(--button-color); // @presenter Color
     --button-group-divider-opacity: 0.32;
   }
 
-  .button-group-secondary {
-    --button-group-divider-color: var(--button-content-color); // @presenter Color
+  .button-group-secondary .button {
+    --button-group-divider-color: var(--button-color); // @presenter Color
     --button-group-divider-opacity: 0.12;
   }
 
-  .button-group-outlined {
+  .button-group-outlined .button {
     --button-group-divider-color: var(--button-border-color); // @presenter Color
     --button-group-divider-opacity: 1;
   }
 
+  .button-group-primary .button.button-tone-danger,
+  .button-group-secondary .button.button-tone-danger {
+    --button-group-divider-color: var(--button-content-color-danger); // @presenter Color
+  }
+
+  .button-group-outlined .button.button-tone-danger {
+    --button-group-divider-color: var(--button-border-color-danger); // @presenter Color
+  }
+
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Dropdown/Dropdown.js

@@ -142,13 +142,6 @@ const DropdownWrapper = styled_components_1.default.div `
   position: relative;
 
   text-decoration: none;
-
-  /* The trigger keeps its hovered appearance while the menu is open. */
-  > .button[aria-expanded='true'] {
-    background-color: var(--button-bg-color-hover);
-    color: var(--button-color-hover);
-    border-color: var(--button-border-color-hover);
-  }
 `;
 const ChildrenWrapper = styled_components_1.default.div `
   padding-top: var(--dropdown-menu-padding-top);

package/lib/components/ReplaySecuritySchemeActions/ReplaySecuritySchemeActions.d.ts

@@ -0,0 +1,11 @@
+export type ReplaySecurityType = 'oauth2' | 'openIdConnect' | 'apiKey' | 'http-bearer';
+export type ReplaySecuritySchemeActionsProps = {
+    schemeId: string | null;
+    securityType: ReplaySecurityType;
+    environment: string;
+    operationId?: string;
+    value: string;
+    setValue: (value: string) => void;
+    apiId?: string;
+};
+export declare function ReplaySecuritySchemeActions(_props: ReplaySecuritySchemeActionsProps): null;

package/lib/components/ReplaySecuritySchemeActions/ReplaySecuritySchemeActions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReplaySecuritySchemeActions = ReplaySecuritySchemeActions;
+function ReplaySecuritySchemeActions(_props) {
+    return null;
+}
+//# sourceMappingURL=ReplaySecuritySchemeActions.js.map

package/lib/components/Search/SearchAiConversationInput.js

@@ -48,17 +48,21 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const inputRef = (0, react_1.useRef)(null);
+    const wasGeneratingResponseRef = (0, react_1.useRef)(isGeneratingResponse);
     const [query, setQuery] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
-        if (!isGeneratingResponse && inputRef.current) {
+        const wasGeneratingResponse = wasGeneratingResponseRef.current;
+        wasGeneratingResponseRef.current = isGeneratingResponse;
+        if (wasGeneratingResponse && !isGeneratingResponse) {
             requestAnimationFrame(() => {
                 var _a;
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             });
         }
     }, [isGeneratingResponse]);
+    const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
     const handleSendMessage = () => {
-        if (disabled)
+        if (isDisabled)
             return;
         setQuery('');
         onMessageSent(query);
@@ -72,7 +76,6 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
             handleSendMessage();
         }
     };
-    const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
     const commonProps = {
         placeholder: placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'),
         onChange: (e) => setQuery(e.target.value),
@@ -83,7 +86,7 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
     };
     return (react_1.default.createElement(SearchAiConversationInputWrapper, { "data-component-name": "Search/SearchAiConversationInput", className: className },
         multiline ? (react_1.default.createElement(ConversationTextarea, Object.assign({ ref: inputRef }, commonProps))) : (react_1.default.createElement(ConversationInput, Object.assign({ ref: inputRef, type: "text" }, commonProps))),
-        react_1.default.createElement(SendButton, { disabled: isDisabled, size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: isDisabled
+        react_1.default.createElement(SendButton, { "aria-label": translate('search.ai.send', 'Send question'), "aria-disabled": isDisabled, size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: isDisabled
                     ? '--button-content-color-disabled'
                     : 'var(--search-ai-conversation-input-send-button-icon-color)' }), onClick: handleSendMessage })));
 }
@@ -151,11 +154,12 @@ const SendButton = (0, styled_components_1.default)(Button_1.Button) `
   border-radius: var(--search-ai-conversation-input-send-button-border-radius);
   padding: var(--search-ai-conversation-input-send-button-padding);
 
-  &:hover {
+  &:hover:not([aria-disabled='true']) {
     background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);
   }
 
-  &:disabled {
+  &[aria-disabled='true'] {
+    cursor: default;
     background-color: var(--search-ai-conversation-input-send-button-bg-color-disabled);
     border: var(--search-ai-conversation-input-send-button-border-disabled);
   }

package/lib/components/Search/SearchAiDialog.js

@@ -52,6 +52,13 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
     const { aiAssistant } = (0, hooks_1.useThemeConfig)();
     const { translate } = useTranslate();
     const conversationEndRef = react_1.default.useRef(null);
+    const wrapperRef = react_1.default.useRef(null);
+    (0, react_1.useEffect)(() => {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-component-name="Search/SearchAiConversationInput"] :is(input, textarea):not(:disabled)')) === null || _b === void 0 ? void 0 : _b.focus();
+        });
+    }, []);
     const suggestions = (_a = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions) !== null && _a !== void 0 ? _a : [];
     const placeholder = isGeneratingResponse
         ? translate('search.ai.generatingResponse', 'Generating response...')
@@ -139,7 +146,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
     const handleFeedbackChange = (0, react_1.useCallback)((messageId, feedback) => {
         setConversation((prev) => prev.map((item) => (item.messageId === messageId ? Object.assign(Object.assign({}, item), { feedback }) : item)));
     }, [setConversation]);
-    return (react_1.default.createElement(SearchAiDialogWrapper, { "data-component-name": "Search/SearchAiDialog", className: className },
+    return (react_1.default.createElement(SearchAiDialogWrapper, { ref: wrapperRef, "data-component-name": "Search/SearchAiDialog", className: className },
         !conversation.length && (react_1.default.createElement(WelcomeWrapper, null,
             react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { color: "var(--search-ai-icon-color)", size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", margin: "0 var(--spacing-xs) 0 0" }),
             translate('search.ai.welcomeText', 'Welcome to AI assistant! Feel free to ask me anything. How can I help you? '))),

package/lib/components/Search/SearchItem.js

@@ -99,7 +99,15 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
                         (0, SearchHighlight_1.searchHighlight)(parameter.path.join(' → ')),
                         ` → `)) : null,
                     (0, SearchHighlight_1.searchHighlight)(parameter.name)),
-                react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)))) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
+                react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)),
+                parameter.enum ? (react_1.default.createElement("div", null,
+                    translate('search.searchItem.enum', 'Enum'),
+                    ': ',
+                    (0, SearchHighlight_1.searchHighlight)(parameter.enum))) : null,
+                parameter.example ? (react_1.default.createElement("div", null,
+                    translate('search.searchItem.example', 'Example'),
+                    ': ',
+                    (0, SearchHighlight_1.searchHighlight)(parameter.example))) : null)) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
                 ? (0, SearchHighlight_1.searchHighlight)(highlight.path.join(' → '))
                 : (_c = document.path) === null || _c === void 0 ? void 0 : _c.join(' → '))))),
         react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" })));

package/lib/components/SplitButton/SplitButton.d.ts

@@ -8,6 +8,7 @@ export type SplitButtonProps = {
     children: ComponentProps<typeof Dropdown>['children'];
     variant?: ButtonGroupVariant;
     size?: ButtonGroupSize;
+    tone?: ButtonProps['tone'];
     placement?: 'top' | 'bottom';
     alignment?: 'start' | 'end';
     portalled?: boolean;

package/lib/components/SplitButton/SplitButton.js

@@ -10,12 +10,12 @@ const Button_1 = require("../../components/Button/Button");
 const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 function SplitButton(props) {
-    const { button, children, variant, size, placement = 'bottom', alignment = 'end', portalled, closeOnSelect = true, disabled, toggleAriaLabel, onOpen, onClose, className, } = props;
+    const { button, children, variant, size, tone, placement = 'bottom', alignment = 'end', portalled, closeOnSelect = true, disabled, toggleAriaLabel, onOpen, onClose, className, } = props;
     const hasMenu = typeof children === 'function' || react_1.default.Children.toArray(children).length > 0;
     return (react_1.default.createElement(SplitButtonWrapper, { "data-component-name": "SplitButton/SplitButton", className: className },
         react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: variant, size: size },
             button,
-            hasMenu ? (react_1.default.createElement(ToggleDropdown, { closeOnClick: closeOnSelect, placement: placement, alignment: alignment, portalled: portalled, withArrow: true, onOpen: onOpen, onClose: onClose, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": toggleAriaLabel, "aria-haspopup": "menu", variant: variant, size: size, disabled: disabled }) }, children)) : null)));
+            hasMenu ? (react_1.default.createElement(ToggleDropdown, { closeOnClick: closeOnSelect, placement: placement, alignment: alignment, portalled: portalled, withArrow: true, onOpen: onOpen, onClose: onClose, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": toggleAriaLabel, "aria-haspopup": "menu", variant: variant, size: size, tone: tone, disabled: disabled }) }, children)) : null)));
 }
 const SplitButtonWrapper = styled_components_1.default.div `
   position: relative;

package/lib/components/Tooltip/AnchorTooltip.js

@@ -103,15 +103,13 @@ const PLACEMENTS = {
     ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 0H16L9.414 6.586A2 2 0 0 1 6.586 6.586Z');
           bottom: 0;
-          ${$arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(100%);'}
           ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
-          ${$arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(100%);'}
         }
       `}
   `,
@@ -135,15 +133,13 @@ const PLACEMENTS = {
     ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 8H16L9.414 1.414A2 2 0 0 0 6.586 1.414Z');
           top: 0;
-          ${$arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(-100%);'}
           ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
-          ${$arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(-100%);'}
         }
       `}
   `,
@@ -156,11 +152,9 @@ const PLACEMENTS = {
     ${({ $withArrow }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M0 0V16L6.586 9.414A2 2 0 0 0 6.586 6.586Z');
           right: -9px;
           top: 50%;
           transform: translateY(-50%);
@@ -176,11 +170,9 @@ const PLACEMENTS = {
     ${({ $withArrow }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M8 0V16L1.414 9.414A2 2 0 0 1 1.414 6.586Z');
           left: -9px;
           top: 50%;
           transform: translateY(-50%);
@@ -222,9 +214,7 @@ const TooltipBody = styled_components_1.default.span.attrs(({ $anchorName }) =>
 
     content: ' ';
     display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+    background: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);

package/lib/components/Tooltip/JsTooltip.js

@@ -112,12 +112,12 @@ function TooltipComponent({ children, isOpen, tip, withArrow = true, placement =
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);
 const PLACEMENTS = {
     top: (0, styled_components_1.css) `
-    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
+    ${({ $withArrow, $arrowPosition }) => $withArrow && $arrowPosition === 'left'
         ? (0, styled_components_1.css) `
             transform: translate(0, -100%);
             margin-top: -10px;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
             ? (0, styled_components_1.css) `
               transform: translate(-100%, -100%);
               margin-top: -10px;
@@ -127,28 +127,26 @@ const PLACEMENTS = {
               margin-top: -10px;
             `}
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 0H16L9.414 6.586A2 2 0 0 1 6.586 6.586Z');
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(99%);'}
         }
       `}
   `,
     bottom: (0, styled_components_1.css) `
-    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
+    ${({ $withArrow, $arrowPosition }) => $withArrow && $arrowPosition === 'left'
         ? (0, styled_components_1.css) `
             transform: translate(0, 10px);
             margin-top: 0;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
             ? (0, styled_components_1.css) `
               transform: translate(-100%, 10px);
               margin-top: 0;
@@ -158,18 +156,16 @@ const PLACEMENTS = {
               margin-top: 0;
             `}
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 8H16L9.414 1.414A2 2 0 0 0 6.586 1.414Z');
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(-99%);'}
         }
       `}
   `,
@@ -177,19 +173,17 @@ const PLACEMENTS = {
     transform: translate(-100%, -50%);
     margin-left: -10px;
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M0 0V16L6.586 9.414A2 2 0 0 0 6.586 6.586Z');
           top: 50%;
           right: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(99%);'}
         }
       `}
   `,
@@ -197,19 +191,17 @@ const PLACEMENTS = {
     transform: translate(0, -50%);
     margin-left: 10px;
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M8 0V16L1.414 9.414A2 2 0 0 1 1.414 6.586Z');
           top: 50%;
           left: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(-99%);'}
         }
       `}
   `,
@@ -240,9 +232,7 @@ const TooltipBody = styled_components_1.default.span `
 
     content: ' ';
     display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+    background: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);
@@ -252,8 +242,6 @@ const TooltipBody = styled_components_1.default.span `
   box-shadow: var(--bg-raised-shadow);
 
   width: ${({ $width }) => $width || 'max-content'};
-  ${({ $placement }) => (0, styled_components_1.css) `
-    ${PLACEMENTS[$placement]};
-  `}
+  ${({ $placement }) => PLACEMENTS[$placement]}
 `;
 //# sourceMappingURL=JsTooltip.js.map

package/lib/components/Tooltip/Tooltip.js

@@ -41,8 +41,7 @@ const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 function TooltipComponent(props) {
     var _a, _b;
-    const { useAnchorPositioning } = (0, hooks_1.useThemeHooks)();
-    const { isSupported } = useAnchorPositioning();
+    const { isSupported } = (0, hooks_1.useAnchorPositioning)();
     const fallbackPlacements = (_a = props.fallbackPlacements) !== null && _a !== void 0 ? _a : (0, utils_1.getDefaultFallbackPlacements)((_b = props.placement) !== null && _b !== void 0 ? _b : 'top');
     if (isSupported) {
         return (react_1.default.createElement(AnchorTooltip_1.Tooltip, Object.assign({}, props, { fallbackPlacements: fallbackPlacements, arrowPosition: prepareArrowPosition(props.arrowPosition) })));

package/lib/core/constants/search.d.ts

@@ -13,7 +13,7 @@ export declare const AiSearchConversationRole: {
 export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof typeof AiSearchConversationRole];
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
 export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
-export declare const SEARCH_DEBOUNCE_TIME_MS = 300;
+export declare const SEARCH_DEBOUNCE_TIME_MS = 500;
 export declare const DEFAULT_KEYBOARD_SHORTCUTS = "\u2318+K,CTRL+K";
 export declare const TOOL_CALL_DISPLAY_TEXT: Partial<Record<string, {
     inProgressText: string;

package/lib/core/constants/search.js

@@ -38,7 +38,7 @@ exports.AI_SEARCH_ERROR_CONFIG = {
     [AiSearchError.ErrorProcessingResponse]: defaultErrorConfig,
 };
 exports.AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
-exports.SEARCH_DEBOUNCE_TIME_MS = 300;
+exports.SEARCH_DEBOUNCE_TIME_MS = 500;
 exports.DEFAULT_KEYBOARD_SHORTCUTS = '⌘+K,CTRL+K';
 exports.TOOL_CALL_DISPLAY_TEXT = {
     [search_1.ToolCallName.SearchDocumentation]: {

package/lib/core/hooks/catalog/use-catalog-entity-schema.js

@@ -8,7 +8,7 @@ function useCatalogEntitySchema({ entity, relatedEntity }) {
     try {
         parsedSchema = JSON.parse(schema);
     }
-    catch (error) {
+    catch (_c) {
         parsedSchema = undefined;
     }
     let parsedApiDefinition;
@@ -17,7 +17,7 @@ function useCatalogEntitySchema({ entity, relatedEntity }) {
             ? JSON.parse(relatedEntity.metadata.schema)
             : undefined;
     }
-    catch (err) {
+    catch (_d) {
         parsedApiDefinition = undefined;
     }
     const definition = !parsedApiDefinition || ((_b = relatedEntity === null || relatedEntity === void 0 ? void 0 : relatedEntity.metadata) === null || _b === void 0 ? void 0 : _b.specType) !== 'openapi'

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -42,7 +42,7 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
         Object.entries(newState).forEach(([id, control]) => {
             const existingControl = controlsState[id];
             if (existingControl && existingControl.type === control.type) {
-                // @ts-ignore
+                // @ts-expect-error
                 newState[id] = Object.assign(Object.assign({}, control), { value: existingControl.value });
             }
         });

package/lib/core/hooks/index.d.ts

@@ -55,3 +55,4 @@ export * from './use-toast';
 export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
+export * from './use-anchor-positioning';

package/lib/core/hooks/index.js

@@ -71,4 +71,5 @@ __exportStar(require("./use-toast"), exports);
 __exportStar(require("./use-toast-logic"), exports);
 __exportStar(require("./use-banner-telemetry"), exports);
 __exportStar(require("./use-tooltip-fallback-placement"), exports);
+__exportStar(require("./use-anchor-positioning"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/menu/use-nested-menu.js

@@ -46,9 +46,9 @@ function useNestedMenu({ item, labelRef, nestedMenuRef }) {
             rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
             rect.right <= (window.innerWidth || document.documentElement.clientWidth);
         // Only scroll if element is in viewport to prevent page jumping
-        // @ts-ignore
+        // @ts-expect-error
         if (isInViewport && typeof el.scrollIntoViewIfNeeded === 'function') {
-            // @ts-ignore
+            // @ts-expect-error
             el.scrollIntoViewIfNeeded(centerIfNeeded);
         }
     }

package/lib/core/hooks/use-anchor-positioning.d.ts

@@ -0,0 +1,3 @@
+export declare const useAnchorPositioning: () => {
+    isSupported: boolean;
+};

package/lib/core/hooks/use-anchor-positioning.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnchorPositioning = void 0;
+const react_1 = require("react");
+const useAnchorPositioning = () => {
+    const [isSupported, setIsSupported] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsSupported(isAnchorPositioningSupported());
+    }, []);
+    return { isSupported };
+};
+exports.useAnchorPositioning = useAnchorPositioning;
+function isAnchorPositioningSupported() {
+    if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+        return false;
+    }
+    return (CSS.supports('anchor-name: --a') &&
+        CSS.supports('position-anchor: --a') &&
+        CSS.supports('top: anchor(top)'));
+}
+//# sourceMappingURL=use-anchor-positioning.js.map

package/lib/core/hooks/use-dialog-hotkeys.js

@@ -23,8 +23,10 @@ function useDialogHotKeys(ref, onClose) {
     };
     const onFocusableElementsHandler = () => {
         var _a;
-        const focusableElements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input, [href], [tabindex]:not([tabindex="-1"])');
-        if (focusableElements && focusableElements.length > 0) {
+        var _b;
+        const focusableElements = Array.from((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input, textarea, select, button, [href], [tabindex]:not([tabindex="-1"])')) !== null && _b !== void 0 ? _b : []).filter((element) => !element.hasAttribute('disabled') &&
+            (typeof element.checkVisibility !== 'function' || element.checkVisibility()));
+        if (focusableElements.length > 0) {
             firstFocusableRef.current = focusableElements[0];
             lastFocusableRef.current = focusableElements[focusableElements.length - 1];
         }

package/lib/core/hooks/use-theme-hooks.js

@@ -5,7 +5,6 @@ const react_1 = require("react");
 const ThemeDataContext_1 = require("../contexts/ThemeDataContext");
 const use_telemetry_fallback_1 = require("./use-telemetry-fallback");
 const fallbacks = {
-    useAnchorPositioning: () => ({ isSupported: false }),
     useTranslate: () => ({
         translate: (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '',
     }),

package/lib/core/types/hooks.d.ts

@@ -14,9 +14,6 @@ import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
 import type { AiSearchError } from '../constants/search';
 export type ThemeHooks = {
-    useAnchorPositioning: () => {
-        isSupported: boolean;
-    };
     useTranslate: () => {
         translate: TFunction;
     };