@redocly/theme 0.58.0-next.7 → 0.58.0-next.9

package/lib/components/CatalogClassic/CatalogClassic.js

@@ -11,6 +11,7 @@ const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const H2_1 = require("../../components/Typography/H2");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
+const FilterInput_1 = require("../../components/Filter/FilterInput");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const CatalogClassicHighlight_1 = require("../../components/CatalogClassic/CatalogClassicHighlight");
 const CatalogClassicActions_1 = require("../../components/CatalogClassic/CatalogClassicActions");
@@ -25,7 +26,7 @@ function CatalogClassic(props) {
     (0, hooks_1.useModalScrollLock)(filterPopoverVisible);
     return (react_1.default.createElement(CatalogClassicHighlight_1.HighlightContext.Provider, { value: [filterTerm] },
         react_1.default.createElement(exports.CatalogPageWrapper, { "data-component-name": "CatalogClassic/CatalogClassic", withoutFilters: !filters.length },
-            react_1.default.createElement(FiltersSidebar, { menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: catalogConfig.filterValuesCasing }) }),
+            Boolean(filters.length) && (react_1.default.createElement(FiltersSidebar, { menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: catalogConfig.filterValuesCasing }) })),
             filterPopoverVisible && (react_1.default.createElement(FilterPopover_1.FilterPopover, { onClose: () => setFilterPopoverVisible(false), setFilterTerm: setFilterTerm, filterTerm: filterTerm, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),
             react_1.default.createElement(CatalogClassicActions_1.CatalogClassicActions, { onOpenFilter: () => setFilterPopoverVisible(true), filters: filters, filterTerm: filterTerm }),
             react_1.default.createElement(exports.CatalogPageContent, null,
@@ -37,7 +38,9 @@ function CatalogClassic(props) {
                     catalogConfig.description ? (react_1.default.createElement(exports.CatalogDescription, { "data-translation-key": catalogConfig.descriptionTranslationKey },
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
-                        ' ')) : null),
+                        ' ')) : null,
+                    !filters.length && (react_1.default.createElement(CatalogSearchWrapper, null,
+                        react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) })))),
                 react_1.default.createElement(CatalogClassicVirtualizedGroups_1.CatalogClassicVirtualizedGroups, { groups: groups, filters: filters, filterTerm: filterTerm })))));
 }
 exports.CatalogPageContent = styled_components_1.default.main `
@@ -110,4 +113,8 @@ const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
   }
   --menu-container-padding-top: 0;
 `;
+const CatalogSearchWrapper = styled_components_1.default.div `
+  margin-top: var(--spacing-base);
+  max-width: 300px;
+`;
 //# sourceMappingURL=CatalogClassic.js.map

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

@@ -1,5 +1,5 @@
 export type { UserClaims } from '../types/user-claims';
-export type { SearchDocument, SearchItemData, OperationParameter } from '../types/search';
+export type { OperationParameter, ParameterHighlight } from '../types/search';
 export type { TFunction, TOptions } from '../types/l10n';
 export type { SelectOption, SelectProps } from '../types/select';
 export { IS_BROWSER } from '../utils/dom';

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

@@ -13,7 +13,7 @@ export type OperationParameter = {
     example: string | undefined;
     enum: string[] | undefined;
 };
-export type SearchDocument = {
+export type SearchHit = {
     id: string;
     url: string;
     title: string | string[];
@@ -24,7 +24,6 @@ export type SearchDocument = {
     deprecated?: boolean;
     security?: string[];
     parameters?: OperationParameter[];
-    metadata?: Record<string, any>;
     version?: string;
     versionFolderId?: string;
     isDefaultVersion?: boolean;
@@ -48,7 +47,7 @@ export type ParameterHighlight = {
     path: string[];
 };
 export type SearchItemData = {
-    document: SearchDocument;
+    document: SearchHit;
     highlight: Record<string, string> & {
         parameters?: ParameterHighlight[];
         path?: string[];

package/lib/markdoc/components/Tabs/Tabs.d.ts

@@ -16,7 +16,8 @@ type TabsProps = {
     className?: string;
     size: TabsSize;
     forceReady?: boolean;
+    initialTab?: string;
 };
-export declare function Tabs({ children, className, size, forceReady }: TabsProps): JSX.Element;
+export declare function Tabs({ children, className, size, forceReady, initialTab: propInitialTab, }: TabsProps): JSX.Element;
 export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/markdoc/components/Tabs/Tabs.js

@@ -34,7 +34,7 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ children, className, size, forceReady = false }) {
+function Tabs({ children, className, size, forceReady = false, initialTab: propInitialTab, }) {
     var _a, _b;
     const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
     (0, react_1.useEffect)(() => {
@@ -42,7 +42,8 @@ function Tabs({ children, className, size, forceReady = false }) {
     }, [children]);
     const tabsContainerRef = (0, react_1.useRef)(null);
     const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
-    const initialTab = (_b = (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
+    const defaultInitialTab = (_b = (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
+    const initialTab = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : defaultInitialTab;
     const { activeTab, setTabRef, onTabClick, handleKeyboard, getTabId, visibleTabs, overflowTabs, ready, allTabsHidden, } = (0, hooks_1.useTabs)({
         initialTab,
         totalTabs: childrenArray.length,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.58.0-next.7",
+  "version": "0.58.0-next.9",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,8 +87,8 @@
     "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.34.0",
-    "@redocly/realm-asyncapi-sdk": "0.4.0-next.2"
+    "@redocly/config": "0.35.0",
+    "@redocly/realm-asyncapi-sdk": "0.4.0-next.4"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/CatalogClassic/CatalogClassic.tsx

@@ -8,6 +8,7 @@ import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks, useModalScrollLock } from '@redocly/theme/core/hooks';
 import { H2 } from '@redocly/theme/components/Typography/H2';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { FilterPopover } from '@redocly/theme/components/Filter/FilterPopover';
 import { HighlightContext } from '@redocly/theme/components/CatalogClassic/CatalogClassicHighlight';
 import { CatalogClassicActions } from '@redocly/theme/components/CatalogClassic/CatalogClassicActions';
@@ -37,16 +38,18 @@ export default function CatalogClassic(props: CatalogClassicProps): JSX.Element
         data-component-name="CatalogClassic/CatalogClassic"
         withoutFilters={!filters.length}
       >
-        <FiltersSidebar
-          menu={
-            <FilterContent
-              setFilterTerm={setFilterTerm}
-              filters={filters}
-              filterTerm={filterTerm}
-              filterValuesCasing={catalogConfig.filterValuesCasing}
-            />
-          }
-        />
+        {Boolean(filters.length) && (
+          <FiltersSidebar
+            menu={
+              <FilterContent
+                setFilterTerm={setFilterTerm}
+                filters={filters}
+                filterTerm={filterTerm}
+                filterValuesCasing={catalogConfig.filterValuesCasing}
+              />
+            }
+          />
+        )}
         {filterPopoverVisible && (
           <FilterPopover
             onClose={() => setFilterPopoverVisible(false)}
@@ -75,6 +78,14 @@ export default function CatalogClassic(props: CatalogClassicProps): JSX.Element
                 {translate(catalogConfig.descriptionTranslationKey, catalogConfig.description)}{' '}
               </CatalogDescription>
             ) : null}
+            {!filters.length && (
+              <CatalogSearchWrapper>
+                <FilterInput
+                  value={filterTerm}
+                  onChange={(updatedTerm) => setFilterTerm(updatedTerm)}
+                />
+              </CatalogSearchWrapper>
+            )}
           </CatalogPageDescriptionWrapper>
 
           <CatalogClassicVirtualizedGroups
@@ -163,3 +174,8 @@ const FiltersSidebar = styled(Sidebar)`
   }
   --menu-container-padding-top: 0;
 `;
+
+const CatalogSearchWrapper = styled.div`
+  margin-top: var(--spacing-base);
+  max-width: 300px;
+`;

package/src/core/openapi/index.ts

@@ -5,7 +5,7 @@
 // the overall bundle size by avoiding importing the entire theme package
 // when only specific functionality is needed.
 export type { UserClaims } from '../types/user-claims';
-export type { SearchDocument, SearchItemData, OperationParameter } from '../types/search';
+export type { OperationParameter, ParameterHighlight } from '../types/search';
 export type { TFunction, TOptions } from '../types/l10n';
 export type { SelectOption, SelectProps } from '../types/select';
 export { IS_BROWSER } from '../utils/dom';

package/src/core/types/search.ts

@@ -15,7 +15,8 @@ export type OperationParameter = {
   enum: string[] | undefined;
 };
 
-export type SearchDocument = {
+// TODO: review SearchHit type as it might contain properties that are not in the search results
+export type SearchHit = {
   id: string;
   url: string;
   title: string | string[];
@@ -26,7 +27,6 @@ export type SearchDocument = {
   deprecated?: boolean;
   security?: string[];
   parameters?: OperationParameter[];
-  metadata?: Record<string, any>;
   version?: string;
   versionFolderId?: string;
   isDefaultVersion?: boolean;
@@ -47,7 +47,7 @@ export type ParameterHighlight = {
 };
 
 export type SearchItemData = {
-  document: SearchDocument;
+  document: SearchHit;
   highlight: Record<string, string> & { parameters?: ParameterHighlight[]; path?: string[] };
 };
 

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -24,9 +24,16 @@ type TabsProps = {
   className?: string;
   size: TabsSize;
   forceReady?: boolean;
+  initialTab?: string;
 };
 
-export function Tabs({ children, className, size, forceReady = false }: TabsProps): JSX.Element {
+export function Tabs({
+  children,
+  className,
+  size,
+  forceReady = false,
+  initialTab: propInitialTab,
+}: TabsProps): JSX.Element {
   const [childrenArray, setChildrenArray] = useState<React.ReactElement<TabItemProps>[]>(
     React.Children.toArray(children) as React.ReactElement<TabItemProps>[],
   );
@@ -36,7 +43,8 @@ export function Tabs({ children, className, size, forceReady = false }: TabsProp
   }, [children]);
   const tabsContainerRef = useRef<HTMLUListElement>(null);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
-  const initialTab = childrenArray[0]?.props.label ?? '';
+  const defaultInitialTab = childrenArray[0]?.props.label ?? '';
+  const initialTab = propInitialTab ?? defaultInitialTab;
   const {
     activeTab,
     setTabRef,