@redocly/theme 0.55.0-rc.1 → 0.55.0

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

@@ -8,9 +8,17 @@ exports.TabComponent = TabComponent;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
-function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, }) {
+function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }) {
     return (react_1.default.createElement(TabList_1.TabItem, { "data-component-name": "Markdoc/Tabs/Tab", size: size, tabIndex: 0 },
-        react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick }, label)));
+        react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
+            react_1.default.createElement(LabelWrapper, null,
+                icon,
+                label))));
 }
+const LabelWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
 exports.Tab = (0, styled_components_1.default)(TabComponent) ``;
 //# sourceMappingURL=Tab.js.map

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

@@ -26,8 +26,5 @@ export declare const TabItem: import("styled-components").StyledComponent<"li",
     size: TabsSize;
     tabIndex?: number;
 }, never>;
-export declare const TabButtonLink: import("styled-components").StyledComponent<"button", any, {
-    size: TabsSize;
-    disabled?: boolean;
-}, never>;
+export declare const TabButtonLink: import("styled-components").StyledComponent<React.FC<import("../../../components/Button/Button").ButtonProps>, any, import("../../../components/Button/Button").ButtonProps, never>;
 export {};

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

@@ -22,34 +22,29 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.TabButtonLink = exports.TabItem = exports.TabListContainer = void 0;
 exports.TabList = TabList;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Tab_1 = require("../../../markdoc/components/Tabs/Tab");
 const Dropdown_1 = require("../../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuItem");
-const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
-const ChevronUpIcon_1 = require("../../../icons/ChevronUpIcon/ChevronUpIcon");
+const Button_1 = require("../../../components/Button/Button");
 function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, onTabClick, handleKeyboard, getTabId, activeTab, isAnimating, highlightStyle, allTabsHidden, tabsContainerRef, }) {
-    const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
-    const handleDropdownOpen = (0, react_1.useCallback)(() => {
-        setIsDropdownOpen(true);
-    }, []);
-    const handleDropdownClose = (0, react_1.useCallback)(() => {
-        setIsDropdownOpen(false);
-    }, []);
     return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef, "data-animating": isAnimating },
         react_1.default.createElement(HighlightBar, { size: size, style: { left: highlightStyle.left, width: highlightStyle.width } },
             react_1.default.createElement("div", null)),
         childrenArray.map((child, index) => {
             if (!visibleTabs.includes(index))
                 return null;
-            const { label } = child.props;
+            const { label, icon } = child.props;
             const tabId = getTabId(label, index);
-            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, size: size, disabled: child.props.disable, setRef: (el) => {
+            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => {
                     setTabRef(el, index);
                     if (el) {
                         el.setAttribute('data-label', label);
@@ -59,20 +54,16 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
                     onTabClick(label);
                 } }));
         }),
-        react_1.default.createElement(exports.TabItem, { size: size, active: overflowTabs.some((index) => activeTab === childrenArray[index].props.label), tabIndex: 0 }, overflowTabs.length > 0 && (react_1.default.createElement("div", { onPointerEnter: handleDropdownOpen, onPointerLeave: handleDropdownClose },
-            react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
-                        ? 'active'
-                        : undefined },
-                    allTabsHidden ? activeTab : 'More',
-                    isDropdownOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)), alignment: "start", withArrow: false, active: isDropdownOpen, triggerEvent: "click" },
-                react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
-                    const { label } = childrenArray[index].props;
-                    const tabId = getTabId(label, index);
-                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
-                            onTabClick(index);
-                            handleDropdownClose();
-                        }, disabled: childrenArray[index].props.disable }, label));
-                }))))))));
+        react_1.default.createElement(exports.TabItem, { size: size, active: overflowTabs.some((index) => activeTab === childrenArray[index].props.label), tabIndex: 0 }, overflowTabs.length > 0 && (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
+                    ? 'active'
+                    : undefined }, allTabsHidden ? activeTab : 'More'), alignment: "start", withArrow: true },
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
+                const { label } = childrenArray[index].props;
+                const tabId = getTabId(label, index);
+                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
+                        onTabClick(index);
+                    }, disabled: childrenArray[index].props.disable }, label));
+            })))))));
 }
 exports.TabListContainer = styled_components_1.default.ul `
   position: relative;
@@ -166,22 +157,11 @@ const HighlightBar = styled_components_1.default.div `
     border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
   }
 `;
-exports.TabButtonLink = styled_components_1.default.button `
-  all: unset;
-  flex-grow: 1;
-  cursor: pointer;
-  width: 100%;
-  text-align: center;
+exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
   color: var(--md-tabs-tab-text-color);
   font-family: var(--md-tabs-tab-font-family);
   font-style: var(--md-tabs-tab-font-style);
   background-color: var(--md-tabs-tab-bg-color);
-  white-space: nowrap;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xxs);
-  z-index: 2;
 
   transition:
     background-color 300ms ease-in-out,

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

@@ -9,12 +9,14 @@ export type TabItemProps = {
     disable?: boolean;
     onClick?: () => void;
     children: React.ReactNode;
+    icon?: React.ReactNode;
 };
 type TabsProps = {
     children: React.ReactElement<TabItemProps>[];
     className?: string;
     size: TabsSize;
+    forceReady?: boolean;
 };
-export declare function Tabs({ children, className, size }: TabsProps): JSX.Element;
+export declare function Tabs({ children, className, size, forceReady }: 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 }) {
+function Tabs({ children, className, size, forceReady = false }) {
     var _a, _b;
     const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
     (0, react_1.useEffect)(() => {
@@ -92,14 +92,10 @@ function Tabs({ children, className, size }) {
                         else {
                             setHighlightStyle({ left: offsetLeft, width: offsetWidth });
                         }
-                        const timeoutId = setTimeout(() => {
-                            if (visibleTabs.includes(activeIndex)) {
-                                activeTabElement === null || activeTabElement === void 0 ? void 0 : activeTabElement.classList.add('active');
-                            }
-                            setIsAnimating(false);
-                        }, 300);
+                        if (visibleTabs.includes(activeIndex)) {
+                            activeTabElement === null || activeTabElement === void 0 ? void 0 : activeTabElement.classList.add('active');
+                        }
                         return () => {
-                            clearTimeout(timeoutId);
                             container.querySelectorAll('[data-label]').forEach((el) => {
                                 el.classList.remove('active');
                             });
@@ -115,7 +111,7 @@ function Tabs({ children, className, size }) {
             setIsAnimating(false);
         }
     }, [activeTab, prevTab, childrenArray, visibleTabs, overflowTabs]);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, isReady: ready },
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, isReady: ready || forceReady },
         react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, overflowTabs: overflowTabs, setTabRef: setTabRef, onTabClick: onTabClick, handleKeyboard: handleKeyboard, getTabId: getTabId, activeTab: activeTab, isAnimating: isAnimating, highlightStyle: highlightStyle, visibleTabs: visibleTabs, allTabsHidden: allTabsHidden, tabsContainerRef: tabsContainerRef }),
         childrenArray.map((child, index) => {
             const { label } = child.props;

package/lib/markdoc/tags/code-step.js

@@ -18,9 +18,6 @@ exports.codeStep = {
             unless: {
                 type: Object,
             },
-            stepKey: {
-                type: Number, // internal
-            },
         },
         render: 'CodeStep',
     },

package/lib/markdoc/tags/code-walkthrough.js

@@ -149,7 +149,6 @@ exports.codeWalkthrough = {
 function collectStepsFromChildren(children, idx = 0) {
     return children.flatMap((child) => {
         if (child instanceof markdoc_1.default.Tag && child.name === 'CodeStep') {
-            child.attributes.stepKey = idx++;
             return [child];
         }
         if (child instanceof markdoc_1.default.Tag) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.55.0-rc.1",
+  "version": "0.55.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -76,6 +76,7 @@
     "webpack": "5.94.0"
   },
   "dependencies": {
+    "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "copy-to-clipboard": "3.3.3",
     "file-saver": "2.0.5",
@@ -88,8 +89,8 @@
     "nprogress": "0.2.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.27.0-rc.0",
-    "@redocly/realm-asyncapi-sdk": "0.1.0-rc.0"
+    "@redocly/config": "0.26.2",
+    "@redocly/realm-asyncapi-sdk": "0.1.0-next.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Admonition/Admonition.tsx

@@ -56,6 +56,10 @@ const Content = styled.div`
   & > p:first-child {
     margin-top: 0;
   }
+
+  & > p:last-child {
+    margin-bottom: 0;
+  }
 `;
 
 const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
+import { BreadcrumbItem } from '@redocly/config';
 
 import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Breadcrumb } from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 
-export function Breadcrumbs(props: { className?: string }): JSX.Element | null {
+export function Breadcrumbs(props: {
+  className?: string;
+  additionalBreadcrumbs?: BreadcrumbItem[];
+}): JSX.Element | null {
   const { useBreadcrumbs, useTelemetry } = useThemeHooks();
+  const fileBreadcrumbs = useBreadcrumbs();
+  const breadcrumbs = [...fileBreadcrumbs, ...(props.additionalBreadcrumbs || [])];
   const telemetry = useTelemetry();
-  const breadcrumbs = useBreadcrumbs();
 
   if (breadcrumbs.length === 0) {
     return null;

package/src/components/Button/Button.tsx

@@ -32,7 +32,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   title?: string;
   tabIndex?: number;
   onClick?: (e?: any) => void;
-
+  ref?: React.Ref<HTMLButtonElement>;
   type?: 'button' | 'submit' | 'reset';
 }
 

package/src/components/Catalog/Catalog.tsx

@@ -0,0 +1,235 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig } from '@redocly/config';
+
+import { BffCatalogEntityList } from '@redocly/theme/core/types';
+import { breakpoints } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { H3 } from '@redocly/theme/components/Typography/H3';
+import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
+import { Sidebar, SidebarHeader } from '@redocly/theme/components/Sidebar/Sidebar';
+import { CatalogSwitcherItem } from '@redocly/theme/core';
+import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelector';
+import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
+import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
+import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
+
+export type CatalogProps = {
+  catalogConfig: CatalogEntityConfig;
+  entitiesTypes: string[];
+  initialEntitiesList?: BffCatalogEntityList;
+  catalogSwitcherItems: CatalogSwitcherItem[];
+};
+
+export function Catalog(props: CatalogProps): JSX.Element {
+  const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
+
+  const { useTranslate, useCatalog } = useThemeHooks();
+
+  const { translate } = useTranslate();
+
+  const {
+    filters,
+    searchQuery,
+    setSearchQuery,
+    filterQuery,
+    sortOption,
+    setSortOption,
+    handleSortClick,
+    isColumnSorted,
+    viewMode,
+    setViewMode,
+    entitiesCounter,
+    setEntitiesCounter,
+    onChangeViewClick,
+    onChangeCollapseSidebarClick,
+    layout,
+    collapsedSidebar,
+  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0);
+
+  return (
+    <>
+      <CatalogPageWrapper data-component-name="Catalog/Catalog">
+        <FiltersSidebar
+          collapsed={collapsedSidebar}
+          header={
+            collapsedSidebar ? null : (
+              <CatalogSelector
+                catalogSwitcherItems={catalogSwitcherItems}
+                setSearchQuery={setSearchQuery}
+                setSortOption={setSortOption}
+              />
+            )
+          }
+          menu={
+            <FilterContent
+              setFilterTerm={setSearchQuery}
+              filters={filters}
+              filterTerm={searchQuery}
+              hideSearch={true}
+              showCounter={false}
+              filterValuesCasing="sentence"
+            />
+          }
+          footer={
+            <SidebarActions
+              layout={layout}
+              collapsedSidebar={collapsedSidebar}
+              isApiDocs={false}
+              onChangeViewClick={onChangeViewClick}
+              onChangeCollapseSidebarClick={onChangeCollapseSidebarClick}
+            />
+          }
+        />
+        <CatalogPageContent>
+          <CatalogPageDescription>
+            <CatalogTitleWrapper>
+              <CatalogTitle data-translation-key={catalogConfig?.titleTranslationKey}>
+                {translate(catalogConfig?.titleTranslationKey)}{' '}
+              </CatalogTitle>
+              <CounterTag borderless>{entitiesCounter}</CounterTag>
+            </CatalogTitleWrapper>
+            <CatalogDescription data-translation-key={catalogConfig?.descriptionTranslationKey}>
+              {translate(catalogConfig?.descriptionTranslationKey)}
+            </CatalogDescription>
+          </CatalogPageDescription>
+
+          <CatalogActionsRow>
+            <CatalogSearchInputWrapper>
+              <FilterInput
+                value={searchQuery}
+                onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
+              />
+            </CatalogSearchInputWrapper>
+
+            <CatalogControlsWrapper>
+              <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+              <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
+            </CatalogControlsWrapper>
+          </CatalogActionsRow>
+
+          <CatalogEntities
+            catalogConfig={catalogConfig}
+            excludedEntities={catalogConfig?.excludes}
+            filterQuery={filterQuery}
+            entitiesTypes={entitiesTypes}
+            sortOption={sortOption}
+            searchQuery={searchQuery}
+            viewMode={viewMode}
+            setEntitiesCounter={setEntitiesCounter}
+            initialEntitiesList={initialEntitiesList}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+          />
+        </CatalogPageContent>
+      </CatalogPageWrapper>
+    </>
+  );
+}
+
+const CatalogActionsRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const CatalogControlsWrapper = styled.div`
+  display: var(--catalog-controls-wrapper-display);
+  align-items: var(--catalog-controls-wrapper-align-items);
+  margin-left: var(--catalog-controls-wrapper-margin-left);
+  gap: var(--catalog-controls-wrapper-gap);
+`;
+
+const CatalogPageContent = styled.main`
+  flex: 1;
+  width: var(--catalog-page-content-width-mobile);
+  margin: var(--catalog-page-content-margin-mobile);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    width: var(--catalog-page-content-width-desktop);
+    padding: var(--catalog-page-padding);
+  }
+`;
+
+const CatalogTitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight) !important;
+  font-size: var(--catalog-title-font-size);
+`;
+
+const CatalogTitle = styled(H3)`
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight) !important;
+  font-size: var(--catalog-title-font-size);
+  margin: var(--catalog-title-margin);
+  margin-right: var(--catalog-title-spacing-right);
+`;
+
+const CatalogDescription = styled.p`
+  color: var(--catalog-description-text-color);
+  font-weight: var(--catalog-description-font-weight);
+  font-size: var(--catalog-description-font-size);
+  margin: var(--catalog-description-margin);
+  line-height: var(--catalog-description-line-height);
+`;
+
+const CatalogPageWrapper = styled.div`
+  --sidebar-width: var(--catalog-sidebar-width);
+
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(--catalog-page-wrapper-font-weight);
+  color: var(--catalog-page-wrapper-text-color);
+  font-size: var(--catalog-page-wrapper-font-size);
+  font-family: var(--catalog-page-wrapper-font-family);
+  line-height: var(--catalog-page-wrapper-line-height);
+
+  hr {
+    border: 0;
+    width: var(--catalog-hr-width);
+    margin: var(--catalog-hr-margin);
+    border-top: var(--catalog-hr-border-width) solid var(--catalog-hr-border-color);
+  }
+  a:not([role='button']) {
+    text-decoration: var(--catalog-link-text-decoration);
+    color: var(--catalog-link-color);
+    font-weight: var(--catalog-link-font-weight);
+  }
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    flex-direction: row;
+    padding: 0;
+  }
+`;
+
+const CatalogPageDescription = styled.div`
+  margin: var(--catalog-heading-margin);
+  display: var(--catalog-page-description-display-mobile);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: var(--catalog-page-description-display-desktop);
+  }
+`;
+
+const FiltersSidebar = styled(Sidebar)`
+  display: var(--catalog-sidebar-display-mobile);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: var(--catalog-sidebar-display-desktop);
+  }
+  --menu-container-padding-top: var(--catalog-sidebar-menu-container-padding-top);
+
+  ${SidebarHeader} {
+    border: none;
+  }
+`;
+
+const CatalogSearchInputWrapper = styled.div`
+  width: var(--catalog-search-input-wrapper-width);
+`;

package/src/components/Catalog/CatalogActionsRow.tsx

@@ -0,0 +1,58 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { SortOption, CatalogViewMode } from '@redocly/theme/core/types';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
+import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
+
+export type CatalogActionsRowProps = {
+  searchQuery: string;
+  setSearchQuery: (updatedTerm: string) => void;
+  sortOption: SortOption | null;
+  setSortOption: (option: SortOption | null) => void;
+  viewMode?: CatalogViewMode;
+  onViewModeChange?: (mode: CatalogViewMode) => void;
+  style?: React.CSSProperties;
+};
+
+export function CatalogActionsRow({
+  searchQuery,
+  setSearchQuery,
+  sortOption,
+  setSortOption,
+  viewMode,
+  onViewModeChange,
+  style,
+}: CatalogActionsRowProps): JSX.Element {
+  return (
+    <CatalogActionsRowWrapper style={style}>
+      <CatalogSearchInputWrapper>
+        <FilterInput value={searchQuery} onChange={(updatedTerm) => setSearchQuery(updatedTerm)} />
+      </CatalogSearchInputWrapper>
+
+      <CatalogControlsWrapper>
+        <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+        {viewMode && onViewModeChange && (
+          <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />
+        )}
+      </CatalogControlsWrapper>
+    </CatalogActionsRowWrapper>
+  );
+}
+
+export const CatalogActionsRowWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const CatalogControlsWrapper = styled.div`
+  display: var(--catalog-controls-wrapper-display);
+  align-items: var(--catalog-controls-wrapper-align-items);
+  margin-left: var(--catalog-controls-wrapper-margin-left);
+  gap: var(--catalog-controls-wrapper-gap);
+`;
+
+export const CatalogSearchInputWrapper = styled.div`
+  width: var(--catalog-search-input-wrapper-width);
+`;