@redocly/theme 0.59.0-next.0 → 0.59.0-next.1

package/lib/components/Accordion/Accordion.d.ts

@@ -0,0 +1,12 @@
+import type { PropsWithChildren, ReactNode, JSX } from 'react';
+import type { AccordionHeaderProps } from '../../components/Accordion/AccordionHeader';
+export type AccordionProps = {
+    expanded?: boolean;
+    isExpandable?: boolean;
+    className?: string;
+    renderChildrenHidden?: boolean;
+    header?: ReactNode | ((props: AccordionHeaderProps) => ReactNode);
+    onToggle?: (expanded: boolean) => void;
+    dataTestId?: string;
+};
+export declare function Accordion({ expanded, isExpandable, renderChildrenHidden, header, className, children, onToggle, dataTestId, }: PropsWithChildren<AccordionProps>): JSX.Element;

package/lib/components/Accordion/Accordion.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.Accordion = Accordion;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const AccordionBody_1 = require("../../components/Accordion/AccordionBody");
+const AccordionHeader_1 = require("../../components/Accordion/AccordionHeader");
+const AccordionTitle_1 = require("../../components/Accordion/AccordionTitle");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIcon");
+function Accordion({ expanded = true, isExpandable = true, renderChildrenHidden = false, header, className, children, onToggle, dataTestId, }) {
+    const [isExpanded, setExpanded] = (0, react_1.useState)(expanded);
+    const [animate, setAnimate] = (0, react_1.useState)(false);
+    const toggle = ({ target }) => {
+        if (target instanceof HTMLAnchorElement || !isExpandable)
+            return;
+        setAnimate(true);
+        setExpanded(!isExpanded);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isExpanded);
+    };
+    (0, react_1.useEffect)(() => setExpanded(expanded), [expanded]);
+    return (react_1.default.createElement(AccordionWrapper, { className: className, "data-testid": dataTestId, "data-component-name": "Accordion/Accordion" },
+        header &&
+            (typeof header === 'function' ? (header({ expanded: isExpanded })) : (react_1.default.createElement(AccordionHeader_1.AccordionHeader, { "data-testid": "accordion-header", onClick: toggle, expanded: isExpanded, isExpandable: isExpandable },
+                react_1.default.createElement(HeaderContent, null,
+                    react_1.default.createElement(AccordionTitle_1.AccordionTitle, { "data-testid": "title" }, header),
+                    isExpandable &&
+                        (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "--accordion-chevron-icon-color" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { color: "--accordion-chevron-icon-color" }))))))),
+        (isExpanded || renderChildrenHidden) && (react_1.default.createElement(AccordionBody_1.AccordionBody, { "data-testid": "accordion-body", hidden: !isExpanded, animate: animate }, children))));
+}
+const AccordionWrapper = styled_components_1.default.div `
+  background-color: transparent;
+  font-family: var(--accordion-font-family);
+  font-size: var(--accordion-font-size);
+  font-weight: var(--accordion-font-weight);
+  border-radius: var(--accordion-border-radius);
+  border: var(--accordion-border);
+
+  &:not(:last-child) {
+    margin-bottom: var(--accordion-gap);
+  }
+`;
+const HeaderContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--spacing-xs);
+`;
+//# sourceMappingURL=Accordion.js.map

package/lib/components/Accordion/AccordionBody.d.ts

@@ -0,0 +1,8 @@
+import type { JSX, ReactNode } from 'react';
+export type AccordionBodyProps = {
+    animate?: boolean;
+    hidden?: boolean;
+    children?: ReactNode;
+    className?: string;
+};
+export declare function AccordionBody({ animate, hidden, children, className, }: AccordionBodyProps): JSX.Element;

package/lib/components/Accordion/AccordionBody.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.AccordionBody = AccordionBody;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+function AccordionBody({ animate, hidden, children, className, }) {
+    return (react_1.default.createElement(AccordionBodyWrapper, { className: className, "$animate": animate, "$hidden": hidden, "data-component-name": "Accordion/AccordionBody" }, children));
+}
+const showAccordion = (0, styled_components_1.keyframes) `
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const showAccordionAnimation = (0, styled_components_1.css) `
+  animation: ${showAccordion} 0.15s ease-out;
+`;
+const AccordionBodyWrapper = styled_components_1.default.div `
+  ${({ $animate }) => $animate && showAccordionAnimation};
+  ${({ $hidden }) => $hidden && 'visibility: hidden'};
+
+  background-color: var(--accordion-body-bg-color);
+
+  font-family: var(--accordion-body-font-family);
+  font-size: var(--accordion-body-font-size);
+  font-weight: var(--accordion-body-font-weight);
+  border: var(--accordion-body-border);
+  padding: var(--accordion-body-padding);
+  color: var(--accordion-body-text-color);
+
+  border-radius: var(--accordion-border-radius);
+`;
+//# sourceMappingURL=AccordionBody.js.map

package/lib/components/Accordion/AccordionHeader.d.ts

@@ -0,0 +1,10 @@
+import type { BaseSyntheticEvent, JSX, ReactNode } from 'react';
+export type AccordionHeaderProps = {
+    isExpandable?: boolean;
+    expanded?: boolean;
+    disabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+    onClick?: (e: BaseSyntheticEvent) => void;
+};
+export declare function AccordionHeader({ isExpandable, expanded, disabled, children, className, onClick, }: AccordionHeaderProps): JSX.Element;

package/lib/components/Accordion/AccordionHeader.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionHeader = AccordionHeader;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function AccordionHeader({ isExpandable, expanded, disabled, children, className, onClick, }) {
+    return (react_1.default.createElement(AccordionHeaderWrapper, { className: className, "$isExpandable": isExpandable, "$expanded": expanded, "$disabled": disabled, onClick: onClick, "data-component-name": "Accordion/AccordionHeader" }, children));
+}
+const AccordionHeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  justify-content: space-between;
+  min-height: 32px;
+  color: var(--accordion-header-text-color);
+
+  cursor: ${({ $isExpandable = true }) => ($isExpandable ? 'pointer' : 'default')};
+
+  line-height: var(--accordion-header-line-height);
+  font-size: var(--accordion-header-font-size);
+  font-family: var(--accordion-header-font-family);
+  font-weight: var(--accordion-header-font-weight);
+  padding: var(--accordion-header-padding);
+  border: var(--accordion-header-border);
+  background-color: var(--accordion-header-bg-color);
+  border-radius: var(--accordion-border-radius);
+
+  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
+
+  &:hover {
+    color: ${({ $isExpandable = true }) => $isExpandable ? 'var(--text-color-primary)' : 'var(--accordion-header-text-color)'};
+  }
+`;
+//# sourceMappingURL=AccordionHeader.js.map

package/lib/components/Accordion/AccordionTitle.d.ts

@@ -0,0 +1,6 @@
+import type { JSX, ReactNode } from 'react';
+export type AccordionTitleProps = {
+    children?: ReactNode;
+    className?: string;
+};
+export declare function AccordionTitle({ children, className }: AccordionTitleProps): JSX.Element;

package/lib/components/Accordion/AccordionTitle.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionTitle = AccordionTitle;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function AccordionTitle({ children, className }) {
+    return (react_1.default.createElement(AccordionTitleWrapper, { className: className, "data-component-name": "Accordion/AccordionTitle" }, children));
+}
+const AccordionTitleWrapper = styled_components_1.default.span `
+  font-weight: var(--accordion-header-font-weight);
+  line-height: var(--line-height-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--accordion-header-text-color);
+  flex: 1;
+`;
+//# sourceMappingURL=AccordionTitle.js.map

package/lib/components/Accordion/variables.d.ts

@@ -0,0 +1 @@
+export declare const accordion: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Accordion/variables.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accordion = void 0;
+const styled_components_1 = require("styled-components");
+exports.accordion = (0, styled_components_1.css) `
+  /**
+  * @tokens Accordion spacing
+  * @presenter Spacing
+  */
+
+  --accordion-gap: var(--spacing-base);
+
+  /**
+  * @tokens Accordion common
+  */
+
+  --accordion-border-radius: var(--border-radius); // @presenter BorderRadius
+  --accordion-border: none; // @presenter Border
+
+  --accordion-line-height: var(--line-height-base); // @presenter LineHeight
+  --accordion-font-size: var(--font-size-base); // @presenter FontSize
+  --accordion-font-family: var(--font-family-base); // @presenter FontFamily
+  --accordion-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  /**
+  * @tokens Accordion header common
+  */
+
+  --accordion-header-font-family: var(--font-family-base); // @presenter FontFamily
+  --accordion-header-font-size: var(--font-size-base); // @presenter FontSize
+  --accordion-header-font-weight: var(--font-weight-medium, 500); // @presenter FontWeight
+  --accordion-header-text-color: var(--text-color-primary);
+  --accordion-header-padding: var(--spacing-sm) var(--spacing-base);
+  --accordion-header-line-height: var(--line-height-base); // @presenter LineHeight
+  --accordion-header-bg-color: transparent; // @presenter Color
+  --accordion-header-border: none; // @presenter Border
+
+  /**
+  * @tokens Accordion body common
+  */
+
+  --accordion-body-font-family: var(--font-family-base); // @presenter FontFamily
+  --accordion-body-font-size: var(--font-size-base); // @presenter FontSize
+  --accordion-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --accordion-body-text-color: var(--text-color-secondary);
+  --accordion-body-padding: 0 var(--spacing-xs) var(--spacing-sm);
+  --accordion-body-bg-color: transparent; // @presenter Color
+  --accordion-body-border: none; // @presenter Border
+
+  /**
+  * @tokens Accordion chevron icon
+  */
+
+  --accordion-chevron-icon-color: var(--text-color-secondary); // @presenter Color
+  --accordion-chevron-icon-size: 16px;
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Buttons/AIAssistantButton.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function AIAssistantButton(): React.JSX.Element | null;

package/lib/components/Buttons/AIAssistantButton.js

@@ -0,0 +1,125 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.AIAssistantButton = AIAssistantButton;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const SearchDialog_1 = require("../../components/Search/SearchDialog");
+const hooks_1 = require("../../core/hooks");
+const ChatIcon_1 = require("../../icons/ChatIcon/ChatIcon");
+const AiStarsGradientIcon_1 = require("../../icons/AiStarsGradientIcon/AiStarsGradientIcon");
+const RedoclyIcon_1 = require("../../icons/RedoclyIcon/RedoclyIcon");
+const defaultConfig = {
+    hide: false,
+    inputType: 'button',
+    inputIcon: 'redocly',
+};
+const getIcon = (iconType, inputType = 'button') => {
+    const iconSize = inputType === 'icon'
+        ? 'var(--ai-assistant-button-icon-icon-size)'
+        : 'var(--ai-assistant-button-text-icon-size)';
+    const redoclyIcon = (React.createElement(RedoclyIcon_1.RedoclyIcon, { size: iconSize, color: "var(--ai-assistant-button-redocly-icon-color)" }));
+    const sparklesIcon = (React.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { size: iconSize, color: "var(--search-ai-button-icon-color)" }));
+    const chatIcon = React.createElement(ChatIcon_1.ChatIcon, { size: iconSize });
+    switch (iconType) {
+        case 'chat':
+            return chatIcon;
+        case 'sparkles':
+            return sparklesIcon;
+        case 'redocly':
+            return redoclyIcon;
+        default:
+            return redoclyIcon;
+    }
+};
+function AIAssistantButton() {
+    var _a, _b;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const themeConfig = (0, hooks_1.useThemeConfig)();
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const buttonConfig = Object.assign(Object.assign({}, defaultConfig), ((_b = (_a = themeConfig.aiAssistant) === null || _a === void 0 ? void 0 : _a.trigger) !== null && _b !== void 0 ? _b : {}));
+    const { hide, inputIcon, inputType } = buttonConfig;
+    if (hide) {
+        return null;
+    }
+    const icon = getIcon(inputIcon, inputType);
+    const text = translate('aiAssistant.trigger', 'Ask AI');
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledAIAssistantButton, { variant: "outlined", size: "medium", "$inputType": inputType, onClick: handleOpen, "aria-label": `AI Assistant button - ${inputIcon}`, "data-component-name": "Buttons/AIAssistantButton" },
+            icon,
+            inputType === 'button' && text),
+        isOpen && React.createElement(SearchDialog_1.SearchDialog, { onClose: handleClose, initialMode: "ai-dialog" })));
+}
+const StyledAIAssistantButton = (0, styled_components_1.default)(Button_1.Button) `
+  position: fixed;
+  bottom: var(--ai-assistant-button-bottom);
+  right: var(--ai-assistant-button-right);
+  ${({ $inputType }) => $inputType === 'icon'
+    ? `
+    border-radius: var(--ai-assistant-button-border-radius-icon);
+    width: var(--ai-assistant-button-icon-size);
+    height: var(--ai-assistant-button-icon-size);
+  `
+    : `
+    border-radius: var(--ai-assistant-button-border-radius-text);
+    padding: var(--ai-assistant-button-text-padding);
+    height: var(--ai-assistant-button-text-height);
+  `}
+  min-width: var(--ai-assistant-button-min-width);
+  font-size: var(--ai-assistant-button-font-size);
+  font-weight: var(--ai-assistant-button-font-weight);
+  box-shadow: var(--bg-raised-shadow);
+  z-index: var(--ai-assistant-button-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ai-assistant-button-gap);
+  background-color: var(--ai-assistant-button-bg-color) !important;
+
+  transition: var(--ai-assistant-button-transition);
+
+  &:hover {
+    box-shadow: var(--ai-assistant-button-shadow-hover);
+    transform: var(--ai-assistant-button-transform-hover);
+  }
+
+  &:active {
+    transform: var(--bg-raised-shadow);
+    box-shadow: var(--ai-assistant-button-shadow-active);
+  }
+`;
+//# sourceMappingURL=AIAssistantButton.js.map

package/lib/components/Buttons/variables.d.ts

@@ -0,0 +1 @@
+export declare const aiAssistantButton: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Buttons/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const aiAssistantButtonDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Buttons/variables.dark.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aiAssistantButtonDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.aiAssistantButtonDarkMode = (0, styled_components_1.css) `
+
+ /* Background color */
+ --ai-assistant-button-bg-color: var(--color-warm-grey-4);
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/Buttons/variables.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aiAssistantButton = void 0;
+const styled_components_1 = require("styled-components");
+exports.aiAssistantButton = (0, styled_components_1.css) `
+  /**
+   * @tokens AI Assistant Button
+   * @presenter Color
+   */
+
+  /* Button sizing */
+  --ai-assistant-button-icon-size: 40px;
+  --ai-assistant-button-text-height: 40px;
+  --ai-assistant-button-text-padding: var(--spacing-sm) var(--spacing-md);
+  --ai-assistant-button-border-radius-icon: 50%;
+  --ai-assistant-button-border-radius-text: 1.75rem;
+  --ai-assistant-button-min-width: auto;
+
+  /* Icon sizing */
+  --ai-assistant-button-icon-icon-size: 18px;
+  --ai-assistant-button-text-icon-size: 20px;
+
+  /* Positioning */
+  --ai-assistant-button-bottom: var(--spacing-xl);
+  --ai-assistant-button-right: var(--spacing-xl);
+  --ai-assistant-button-z-index: 1000;
+
+  /* Typography */
+  --ai-assistant-button-font-size: var(--font-size-base);
+  --ai-assistant-button-font-weight: var(--font-weight-medium);
+  --ai-assistant-button-gap: var(--spacing-xs);
+
+  /* Background color */
+  --ai-assistant-button-bg-color: var(--color-static-white);
+
+  /* Icon colors */
+  --ai-assistant-button-redocly-icon-color: #297AFE;
+
+  /* Transform */
+  --ai-assistant-button-transform-hover: none;
+  --ai-assistant-button-transform-active: translateY(0);
+
+  /* Shadow */
+  --ai-assistant-button-shadow-hover:
+    2px 1px 12px 4px rgba(143, 98, 254, 0.2),
+    -3px -2px 24px 0px rgba(41, 122, 254, 0.2);
+
+  /* Transition */
+  --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Catalog/Catalog.js

@@ -9,7 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const H3_1 = require("../../components/Typography/H3");
-const FilterContent_1 = require("../../components/Filter/FilterContent");
+const CatalogFilterContent_1 = require("../../components/Catalog/CatalogFilter/CatalogFilterContent");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar");
 const CatalogSelector_1 = require("../../components/Catalog/CatalogSelector");
 const SidebarActions_1 = require("../../components/SidebarActions/SidebarActions");
@@ -38,7 +38,7 @@ function Catalog(props) {
     const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog(catalogConfig, (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0, initialViewMode);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/Catalog" },
-            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, setSearchQuery: setSearchQuery, setSortOption: setSortOption })), menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setSearchQuery, filters: filters, filterTerm: searchQuery, hideSearch: true, showCounter: false, filterValuesCasing: customCatalogOptionsCasing }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
+            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, setSearchQuery: setSearchQuery, setSortOption: setSortOption })), menu: react_1.default.createElement(CatalogFilterContent_1.CatalogFilterContent, { setFilterTerm: setSearchQuery, filters: filters, filterTerm: searchQuery, hideSearch: true, showCounter: false, filterValuesCasing: customCatalogOptionsCasing }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
             react_1.default.createElement(CatalogPageContent, null,
                 react_1.default.createElement(CatalogPageDescription, null,
                     react_1.default.createElement(CatalogTitleWrapper, null,
@@ -51,7 +51,7 @@ function Catalog(props) {
                     react_1.default.createElement(CatalogDescription, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey }, translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey))),
                 react_1.default.createElement(CatalogActionsRow, null,
                     react_1.default.createElement(CatalogSearchInputWrapper, null,
-                        react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm) })),
+                        react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm), dataTestId: "catalog-search-input" })),
                     react_1.default.createElement(CatalogControlsWrapper, null,
                         react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
                         react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: setViewMode }))),

package/lib/components/Catalog/CatalogFilter/CatalogFilter.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { FilterProps } from '../../../core/types';
+export type CatalogFilterProps = FilterProps & {
+    className?: string;
+};
+export declare function CatalogFilter({ filter, filterValuesCasing, showCounter, className, }: CatalogFilterProps): JSX.Element | null;

package/lib/components/Catalog/CatalogFilter/CatalogFilter.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogFilter = CatalogFilter;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogFilterSelect_1 = require("../../../components/Catalog/CatalogFilter/CatalogFilterSelect");
+const CatalogFilterCheckboxes_1 = require("../../../components/Catalog/CatalogFilter/CatalogFilterCheckboxes");
+const CatalogFilterDateRange_1 = require("../../../components/Catalog/CatalogFilter/CatalogFilterDateRange");
+const filterComponents = {
+    select: CatalogFilterSelect_1.CatalogFilterSelect,
+    'date-range': CatalogFilterDateRange_1.CatalogFilterDateRange,
+    checkboxes: CatalogFilterCheckboxes_1.CatalogFilterCheckboxes,
+};
+function CatalogFilter({ filter, filterValuesCasing, showCounter = true, className, }) {
+    if (!filter.parentUsed)
+        return null;
+    const FilterComponent = filterComponents[(filter.type || 'checkboxes')];
+    return (react_1.default.createElement(CatalogFilterGroup, { className: className, "data-component-name": "Catalog/CatalogFilter", key: filter.property + filter.title },
+        react_1.default.createElement(FilterComponent, { filter: filter, filterValuesCasing: filterValuesCasing, showCounter: showCounter })));
+}
+const CatalogFilterGroup = styled_components_1.default.div `
+  padding: var(--filter-group-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  border-bottom: 1px solid var(--catalog-table-border-color);
+
+  &:first-child {
+    border-top: 1px solid var(--catalog-table-border-color);
+  }
+`;
+//# sourceMappingURL=CatalogFilter.js.map

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { FilterProps } from '../../../core/types';
+export type CatalogFilterCheckboxesProps = FilterProps & {
+    className?: string;
+};
+export declare function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter, className, }: CatalogFilterCheckboxesProps): JSX.Element;