@redocly/theme 0.58.0-next.8 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.58.0-next.8",
+  "version": "0.58.0-next.9",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -88,7 +88,7 @@
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
     "@redocly/config": "0.35.0",
-    "@redocly/realm-asyncapi-sdk": "0.4.0-next.3"
+    "@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;
+`;