@redocly/theme 0.68.0-next.3 → 0.68.0-next.4

package/lib/components/Panel/Panel.js

@@ -57,7 +57,7 @@ function Panel({ expanded = true, isExpandable = true, renderChildrenHidden = fa
     (0, react_1.useEffect)(() => setExpanded(expanded), [expanded]);
     return (react_1.default.createElement(PanelWrapper, { className: className, "data-testid": typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null, "data-component-name": "Panel/Panel" },
         header &&
-            (typeof header === 'function' ? (header({ expanded: isExpanded, toggle })) : (react_1.default.createElement(PanelHeader_1.PanelHeader, { "data-testid": "panel-header", onClick: toggle, expanded: isExpanded, isExpandable: isExpandable },
+            (typeof header === 'function' ? (header({ expanded: isExpanded, toggle })) : (react_1.default.createElement(PanelHeader_1.PanelHeader, { "data-testid": "panel-header", toggle: toggle, expanded: isExpanded, isExpandable: isExpandable },
                 react_1.default.createElement(InlineBox, null,
                     react_1.default.createElement(PanelHeaderTitle_1.PanelHeaderTitle, { "data-testid": "title" }, header),
                     isExpandable &&

package/lib/components/Search/SearchAiConversationInput.js

@@ -43,6 +43,7 @@ const constants_1 = require("../../core/constants");
 const Button_1 = require("../../components/Button/Button");
 const SendIcon_1 = require("../../icons/SendIcon/SendIcon");
 const hooks_1 = require("../../core/hooks");
+const utils_1 = require("../../core/utils");
 function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder, disabled, multiline = false, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -120,6 +121,11 @@ const inputStyles = `
   &:focus:disabled {
     border-color: var(--search-ai-conversation-input-border-color-disabled);
   }
+
+  // Keep at least 16px on mobile so iOS Safari doesn't auto-zoom the viewport on focus.
+  @media screen and (max-width: ${utils_1.breakpoints.small}) {
+    font-size: max(16px, var(--search-ai-conversation-input-font-size));
+  }
 `;
 const ConversationInput = styled_components_1.default.input `
   ${inputStyles}

package/lib/components/Search/SearchInput.js

@@ -60,6 +60,11 @@ const SearchInputField = styled_components_1.default.input `
   &::placeholder {
     color: var(--search-input-placeholder-color);
   }
+
+  // Keep at least 16px on mobile so iOS Safari doesn't auto-zoom the viewport on focus.
+  @media screen and (max-width: ${utils_1.breakpoints.small}) {
+    font-size: max(16px, var(--search-input-font-size));
+  }
 `;
 const ResetButton = (0, styled_components_1.default)(Button_1.Button) `
   color: var(--color-warm-grey-5);

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

@@ -33,6 +33,7 @@ export type SidebarNavItem = {
     linePosition?: 'top' | 'bottom';
     version?: string;
     variant?: 'primary' | 'secondary';
+    hideWhenEmpty?: boolean;
     badges?: ItemBadge[];
 };
 export type ItemState = Omit<SidebarNavItem, 'items'> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.68.0-next.3",
+  "version": "0.68.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.52.0"
+    "@redocly/config": "0.53.0"
   },
   "scripts": {
     "watch": "tsgo -p tsconfig.build.json && (concurrently \"tsgo -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Panel/Panel.tsx

@@ -58,7 +58,7 @@ export function Panel({
         ) : (
           <PanelHeader
             data-testid="panel-header"
-            onClick={toggle}
+            toggle={toggle}
             expanded={isExpanded}
             isExpandable={isExpandable}
           >

package/src/components/Search/SearchAiConversationInput.tsx

@@ -7,6 +7,7 @@ import { AI_SEARCH_MAX_MESSAGE_LENGTH } from '@redocly/theme/core/constants';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { SendIcon } from '@redocly/theme/icons/SendIcon/SendIcon';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { breakpoints } from '@redocly/theme/core/utils';
 
 type SearchAiConversationInputProps = {
   onMessageSent: (message: string) => void;
@@ -142,6 +143,11 @@ const inputStyles = `
   &:focus:disabled {
     border-color: var(--search-ai-conversation-input-border-color-disabled);
   }
+
+  // Keep at least 16px on mobile so iOS Safari doesn't auto-zoom the viewport on focus.
+  @media screen and (max-width: ${breakpoints.small}) {
+    font-size: max(16px, var(--search-ai-conversation-input-font-size));
+  }
 `;
 
 const ConversationInput = styled.input`

package/src/components/Search/SearchInput.tsx

@@ -9,7 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { useInputKeyCommands, useRecentSearches, useThemeHooks } from '@redocly/theme/core/hooks';
 import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
-import { getBaseDataAttributes } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type SearchInputProps = {
   placeholder?: string;
@@ -110,6 +110,11 @@ const SearchInputField = styled.input`
   &::placeholder {
     color: var(--search-input-placeholder-color);
   }
+
+  // Keep at least 16px on mobile so iOS Safari doesn't auto-zoom the viewport on focus.
+  @media screen and (max-width: ${breakpoints.small}) {
+    font-size: max(16px, var(--search-input-font-size));
+  }
 `;
 
 const ResetButton = styled(Button)`

package/src/core/types/sidebar.ts

@@ -40,6 +40,7 @@ export type SidebarNavItem = {
   linePosition?: 'top' | 'bottom';
   version?: string;
   variant?: 'primary' | 'secondary';
+  hideWhenEmpty?: boolean;
   badges?: ItemBadge[];
 };