@redocly/theme 0.58.1 → 0.59.0-next.1

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

@@ -0,0 +1,142 @@
+"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.CatalogFilterCheckboxes = CatalogFilterCheckboxes;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const highlight_words_core_1 = require("highlight-words-core");
+const FilterOptions_1 = require("../../../components/Filter/FilterOptions");
+const FilterOption_1 = require("../../../components/Filter/FilterOption");
+const FilterOptionLabel_1 = require("../../../components/Filter/FilterOptionLabel");
+const FilterInput_1 = require("../../../components/Filter/FilterInput");
+const hooks_1 = require("../../../core/hooks");
+const CheckboxIcon_1 = require("../../../icons/CheckboxIcon/CheckboxIcon");
+const CounterTag_1 = require("../../../components/Tags/CounterTag");
+const utils_1 = require("../../../core/utils");
+const Accordion_1 = require("../../../components/Accordion/Accordion");
+function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter = true, className, }) {
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const telemetry = useTelemetry();
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)('');
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        const options = filter.filteredOptions || filter.options;
+        if (!searchTerm.trim())
+            return options;
+        const lowerSearchTerm = searchTerm.toLowerCase();
+        return options.filter(({ value }) => {
+            const translatedValue = (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing);
+            if (!translatedValue)
+                return false;
+            return translatedValue.toLowerCase().includes(lowerSearchTerm);
+        });
+    }, [searchTerm, filter.filteredOptions, filter.options, translate, filterValuesCasing]);
+    const selectedCount = (0, react_1.useMemo)(() => {
+        if (filter.selectedOptions instanceof Set) {
+            return filter.selectedOptions.size;
+        }
+        return 0;
+    }, [filter.selectedOptions]);
+    const highlightText = (text) => {
+        if (!searchTerm.trim()) {
+            return react_1.default.createElement(react_1.default.Fragment, null, text);
+        }
+        const chunks = (0, highlight_words_core_1.findAll)({
+            searchWords: [searchTerm],
+            textToHighlight: text,
+        });
+        return (react_1.default.createElement(react_1.default.Fragment, null, chunks.map((chunk, idx) => {
+            const { end, highlight, start } = chunk;
+            const chunkText = text.substr(start, end - start);
+            if (highlight) {
+                return react_1.default.createElement(HighlightedText, { key: idx }, chunkText);
+            }
+            else {
+                return react_1.default.createElement("span", { key: idx }, chunkText);
+            }
+        })));
+    };
+    const headerContent = (react_1.default.createElement(AccordionHeaderContent, null,
+        react_1.default.createElement("span", null, translate(filter.titleTranslationKey, filter.title)),
+        selectedCount > 0 && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, selectedCount)));
+    return (react_1.default.createElement(AccordionWrapper, { className: className, "$hasSelection": selectedCount > 0 && !isExpanded, "data-component-name": "Catalog/CatalogFilterCheckboxes" },
+        react_1.default.createElement(Accordion_1.Accordion, { expanded: isExpanded, header: headerContent, onToggle: setIsExpanded },
+            react_1.default.createElement(FilterSearchWrapper, null,
+                react_1.default.createElement(FilterInput_1.FilterInput, { value: searchTerm, onChange: setSearchTerm })),
+            react_1.default.createElement(FilterOptions_1.FilterOptions, null, filteredOptions.map(({ value, count }) => {
+                const id = 'filter--' + filter.property + '--' + value;
+                return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
+                        filter.toggleOption(value);
+                        telemetry.sendFilterCheckboxToggledMessage({ id });
+                    } },
+                    react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
+                            ? filter.selectedOptions.has(value) ||
+                                filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
+                            : false }),
+                    react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, highlightText((0, utils_1.changeTextCasing)(translate(value), filterValuesCasing) || '')),
+                    showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
+            })))));
+}
+const AccordionWrapper = styled_components_1.default.div `
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) => $hasSelection &&
+    `
+    border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+const AccordionHeaderContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+const HighlightedText = styled_components_1.default.span `
+  background-color: var(--catalog-highlight-bg-color);
+  color: var(--catalog-highlight-text-color);
+`;
+const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `
+  padding-left: var(--filter-option-checkbox-padding-left);
+`;
+const FilterSearchWrapper = styled_components_1.default.div `
+  padding: var(--filter-content-search-padding);
+`;
+//# sourceMappingURL=CatalogFilterCheckboxes.js.map

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

@@ -0,0 +1,13 @@
+import type { JSX } from 'react';
+import type { ResolvedFilter } from '../../../core/types';
+import type { RedoclyConfig } from '../../../config';
+export type CatalogFilterContentProps = {
+    setFilterTerm: (value: string) => void;
+    filters: ResolvedFilter[];
+    filterTerm: string;
+    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'] | ((str: string) => string);
+    hideSearch?: boolean;
+    showCounter?: boolean;
+    className?: string;
+};
+export declare function CatalogFilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, hideSearch, showCounter, className, }: CatalogFilterContentProps): JSX.Element | null;

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

@@ -0,0 +1,92 @@
+"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.CatalogFilterContent = CatalogFilterContent;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const FilterInput_1 = require("../../../components/Filter/FilterInput");
+const hooks_1 = require("../../../core/hooks");
+const Button_1 = require("../../../components/Button/Button");
+const CatalogFilter_1 = require("../../../components/Catalog/CatalogFilter/CatalogFilter");
+const utils_1 = require("../../../core/utils");
+function CatalogFilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, hideSearch, showCounter = true, className, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const hasActiveFilters = filters.some((filter) => {
+        if (filterTerm)
+            return true;
+        if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
+            return filter.selectedOptions.size;
+        }
+        else if ((0, utils_1.isFromToSelectedOptions)(filter.selectedOptions) &&
+            filter.selectedOptions.from &&
+            filter.selectedOptions.to) {
+            return true;
+        }
+    });
+    const handleClearAll = () => {
+        filters.forEach((filter) => filter.selectOption(''));
+        setFilterTerm('');
+    };
+    if (!filters.length) {
+        return null;
+    }
+    return (react_1.default.createElement(CatalogFilterContentWrapper, { className: className, "data-component-name": "Catalog/CatalogFilterContent" },
+        react_1.default.createElement(FiltersHeader, null,
+            react_1.default.createElement(FiltersTitle, { "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
+            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('catalog.filters.clearAll', 'Clear filters'))) : null),
+        !hideSearch && (react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) })),
+        react_1.default.createElement(FilterItems, { hideSearch: hideSearch }, filters.map((filter, idx) => (react_1.default.createElement(CatalogFilter_1.CatalogFilter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing, showCounter: showCounter }))))));
+}
+const CatalogFilterContentWrapper = styled_components_1.default.div `
+  padding: 0 0 var(--filter-content-padding-vertical) 0;
+  display: flex;
+  flex-direction: column;
+`;
+const FiltersHeader = styled_components_1.default.div `
+  display: flex;
+  padding: var(--filter-content-header-padding-vertical)
+    var(--filter-content-header-padding-horizontal);
+`;
+const FiltersTitle = styled_components_1.default.div `
+  margin-right: auto;
+  font-size: var(--filter-content-title-font-size);
+  font-weight: var(--filter-content-title-font-weight);
+  line-height: var(--filter-content-title-line-height);
+`;
+const FilterItems = styled_components_1.default.div `
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border-color-secondary);
+  ${({ hideSearch }) => hideSearch &&
+    (0, styled_components_1.css) `
+      border-top: none;
+    `}
+`;
+//# sourceMappingURL=CatalogFilterContent.js.map

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

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

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

@@ -0,0 +1,111 @@
+"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.CatalogFilterDateRange = CatalogFilterDateRange;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FilterOptions_1 = require("../../../components/Filter/FilterOptions");
+const DatePicker_1 = require("../../../components/DatePicker/DatePicker");
+const CounterTag_1 = require("../../../components/Tags/CounterTag");
+const hooks_1 = require("../../../core/hooks");
+const utils_1 = require("../../../core/utils");
+const Accordion_1 = require("../../../components/Accordion/Accordion");
+function CatalogFilterDateRange({ filter, className, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const from = (0, react_1.useMemo)(() => (filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined), [filter.selectedOptions.from]);
+    const to = (0, react_1.useMemo)(() => (filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : undefined), [filter.selectedOptions.to]);
+    const selectedCount = (0, react_1.useMemo)(() => {
+        return from && to ? 1 : 0;
+    }, [from, to]);
+    const headerContent = (react_1.default.createElement(AccordionHeaderContent, null,
+        react_1.default.createElement("span", null, translate(filter.titleTranslationKey, filter.title)),
+        selectedCount > 0 && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, selectedCount)));
+    return (react_1.default.createElement(AccordionWrapper, { className: className, "$hasSelection": selectedCount > 0, "data-component-name": "Catalog/CatalogFilterDateRange" },
+        react_1.default.createElement(Accordion_1.Accordion, { expanded: false, header: headerContent },
+            react_1.default.createElement(FilterOptions_1.FilterOptions, null,
+                react_1.default.createElement(DateRangeWrapper, null,
+                    react_1.default.createElement(DateRangeRow, null,
+                        react_1.default.createElement("span", null, "From:"),
+                        react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: new Date(), onChange: (from) => {
+                                if (Array.isArray(from))
+                                    return;
+                                filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: (0, utils_1.formatDateWithoutTimeZone)(from), to: (0, utils_1.formatDateWithoutTimeZone)(to) }));
+                            } })),
+                    react_1.default.createElement(DateRangeRow, null,
+                        react_1.default.createElement("span", null, "To:"),
+                        react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", format: "y-MM-dd", minDate: from, value: to, onChange: (to) => {
+                                if (Array.isArray(to))
+                                    return;
+                                filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: (0, utils_1.formatDateWithoutTimeZone)(from), to: (0, utils_1.formatDateWithoutTimeZone)(to) }));
+                            } })))))));
+}
+const AccordionWrapper = styled_components_1.default.div `
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) => $hasSelection &&
+    `border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+const AccordionHeaderContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+const DateRangeWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-options-gap);
+`;
+const DateRangeRow = styled_components_1.default.div `
+  color: var(--filter-date-picker-color);
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  gap: var(--filter-date-picker-gap);
+
+  > span {
+    width: var(--filter-date-picker-width);
+    color: var(--filter-option-label-color);
+  }
+`;
+//# sourceMappingURL=CatalogFilterDateRange.js.map

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

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

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

@@ -0,0 +1,116 @@
+"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.CatalogFilterSelect = CatalogFilterSelect;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FilterOption_1 = require("../../../components/Filter/FilterOption");
+const FilterOptionLabel_1 = require("../../../components/Filter/FilterOptionLabel");
+const Select_1 = require("../../../components/Select/Select");
+const CounterTag_1 = require("../../../components/Tags/CounterTag");
+const utils_1 = require("../../../core/utils");
+const hooks_1 = require("../../../core/hooks");
+const Accordion_1 = require("../../../components/Accordion/Accordion");
+function CatalogFilterSelect({ filter, filterValuesCasing, showCounter = true, className, }) {
+    var _a;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const selectedCount = (0, react_1.useMemo)(() => {
+        var _a;
+        if (filter.selectedOptions instanceof Set) {
+            const firstValue = (_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value;
+            return firstValue && firstValue !== '' ? 1 : 0;
+        }
+        return 0;
+    }, [filter.selectedOptions]);
+    let selectOptions = [];
+    const defaultOptionCount = filter.options.reduce((acc, option) => acc + option.count, 0);
+    selectOptions = [
+        {
+            value: '',
+            element: (react_1.default.createElement(FilterOption_1.FilterOption, { key: "all", onClick: () => filter.selectOption('') },
+                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": "catalog.filters.select.all" }, translate('catalog.filters.select.all', 'All')),
+                react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, defaultOptionCount))),
+        },
+        ...filter.options.map((option) => ({
+            value: option.value,
+            element: (react_1.default.createElement(FilterOption_1.FilterOption, { key: option.value },
+                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": option.value }, (0, utils_1.changeTextCasing)(translate(option.value), filterValuesCasing)),
+                showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, option.count))),
+        })),
+    ];
+    const headerContent = (react_1.default.createElement(AccordionHeaderContent, null,
+        react_1.default.createElement("span", null, translate(filter.titleTranslationKey, filter.title)),
+        selectedCount > 0 && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, selectedCount)));
+    return (react_1.default.createElement(AccordionWrapper, { className: className, "$hasSelection": selectedCount > 0 && !isExpanded, "data-component-name": "Catalog/CatalogFilterSelect" },
+        react_1.default.createElement(Accordion_1.Accordion, { expanded: isExpanded, header: headerContent, onToggle: setIsExpanded },
+            react_1.default.createElement(StyledSelect, { value: ((_a = (filter.selectedOptions instanceof Set ? filter.selectedOptions : new Set())
+                    .values()
+                    .next()) === null || _a === void 0 ? void 0 : _a.value) || '', onChange: (value) => filter.selectOption(value), options: selectOptions }))));
+}
+const AccordionWrapper = styled_components_1.default.div `
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) => $hasSelection &&
+    `border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+const AccordionHeaderContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
+  --select-list-max-width: var(--filter-select-max-width);
+
+  min-height: var(--filter-select-min-height);
+  --select-text-color: var(--filter-select-color);
+  border: 1px solid var(--filter-select-border-color);
+  --select-border-radius: var(--filter-select-border-radius);
+  padding: var(--filter-select-padding);
+
+  :hover {
+    border-color: var(--filter-select-border-color-hover);
+  }
+  --filter-option-margin: var(--filter-select-option-margin);
+`;
+//# sourceMappingURL=CatalogFilterSelect.js.map

package/lib/components/Catalog/CatalogSelector.js

@@ -33,7 +33,6 @@ function CatalogSelector({ catalogSwitcherItems, setSearchQuery, setSortOption,
 }
 exports.CatalogSelectWrapper = styled_components_1.default.div `
   margin-top: var(--catalog-select-wrapper-margin-top);
-  margin-bottom: var(--catalog-select-wrapper-margin-bottom);
 `;
 exports.CatalogSelectLabel = styled_components_1.default.label `
   display: block;

package/lib/components/Catalog/variables.js

@@ -82,7 +82,6 @@ exports.catalog = (0, styled_components_1.css) `
     * @tokens Catalog selector
     */
   --catalog-select-wrapper-margin-top: var(--spacing-xxs);
-  --catalog-select-wrapper-margin-bottom: var(--spacing-base);
   --catalog-select-label-margin-bottom: var(--spacing-xxs);
   --catalog-select-label-font-weight: var(--filter-title-font-weight);
   --catalog-select-label-font-size: var(--filter-title-font-size);

package/lib/components/Filter/FilterInput.d.ts

@@ -2,5 +2,6 @@ import type { JSX } from 'react';
 export type FilterInputProps = {
     value: string;
     onChange: (newValue: string) => void;
+    dataTestId?: string;
 };
 export declare function FilterInput(props: FilterInputProps): JSX.Element;

package/lib/components/Filter/FilterInput.js

@@ -32,7 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
 function FilterInput(props) {
-    const { value: initialValue, onChange } = props;
+    const { value: initialValue, onChange, dataTestId } = props;
     const [value, setValue] = (0, react_1.useState)(initialValue);
     (0, react_1.useEffect)(() => {
         setValue(initialValue);
@@ -44,7 +44,7 @@ function FilterInput(props) {
     };
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    return (react_1.default.createElement(InputWrapper, { "data-component-name": "Filter/FilterInput" },
+    return (react_1.default.createElement(InputWrapper, { "data-component-name": "Filter/FilterInput", "data-testid": dataTestId },
         react_1.default.createElement(InputIcon, null),
         react_1.default.createElement(Input, { value: value, onChange: handleChange, placeholder: translate('catalog.filters.placeholder', 'Search') })));
 }

package/lib/components/Filter/FilterOptions.js

@@ -14,5 +14,7 @@ const FilterOptionsComponent = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
   gap: var(--filter-options-gap);
+  max-height: var(--filter-options-max-height);
+  overflow-y: scroll;
 `;
 //# sourceMappingURL=FilterOptions.js.map

package/lib/components/Filter/variables.js

@@ -17,6 +17,7 @@ exports.filter = (0, styled_components_1.css) `
   --filter-options-padding-vertical: 0;
   --filter-options-padding-horizontal: 0;
   --filter-options-gap: var(--spacing-sm);
+  --filter-options-max-height: 350px;
 
   --filter-option-font-size: var(--font-size-base);
   --filter-option-gap: var(--spacing-xs);
@@ -27,12 +28,14 @@ exports.filter = (0, styled_components_1.css) `
 
   --filter-option-checkbox-padding-left: var(--spacing-xs);
 
-  --filter-content-header-padding-vertical: 5px;
-  --filter-content-header-padding-horizontal: 0;
+  --filter-content-header-padding-vertical: var(--spacing-xs) var(--spacing-sm);
+  --filter-content-header-padding-horizontal: var(--spacing-base);
 
-  --filter-content-title-font-size: var(--font-size-base);
-  --filter-content-title-line-height: var(--line-height-base);
+  --filter-content-title-font-size: var(--font-size-lg);
+  --filter-content-title-line-height: var(--line-height-lg);
   --filter-content-title-font-weight: var(--font-weight-semibold);
+
+  --filter-content-search-padding: 0 var(--spacing-xs) var(--spacing-sm);
   
   --filter-content-padding-vertical: var(--spacing-sm);
   --filter-content-padding-horizontal: var(--spacing-base);

package/lib/components/Search/SearchAiDialog.js

@@ -37,12 +37,11 @@ const SearchAiMessage_1 = require("../../components/Search/SearchAiMessage");
 const Admonition_1 = require("../../components/Admonition/Admonition");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error, resources, onMessageSent, className, conversation, setConversation, }) {
-    var _a;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
-    const { search } = (0, hooks_1.useThemeConfig)();
+    const { aiAssistant } = (0, hooks_1.useThemeConfig)();
     const { translate } = useTranslate();
     const conversationEndRef = react_1.default.useRef(null);
-    const suggestions = (_a = search === null || search === void 0 ? void 0 : search.ai) === null || _a === void 0 ? void 0 : _a.suggestions;
+    const suggestions = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions;
     const placeholder = isGeneratingResponse
         ? translate('search.ai.generatingResponse', 'Generating response...')
         : conversation.length > 0

package/lib/components/Search/SearchAiResponse.js

@@ -19,15 +19,14 @@ const ErrorFilledIcon_1 = require("../../icons/ErrorFilledIcon/ErrorFilledIcon")
 const constants_1 = require("../../core/constants");
 const ChatIcon_1 = require("../../icons/ChatIcon/ChatIcon");
 function SearchAiResponse(props) {
-    var _a;
     const { useMarkdownText } = (0, hooks_1.useThemeHooks)();
     const { question, response, isGeneratingResponse, resources, error, onSuggestionClick } = props;
-    const { search } = (0, hooks_1.useThemeConfig)();
+    const { aiAssistant } = (0, hooks_1.useThemeConfig)();
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const markdownResponse = useMarkdownText(response || '');
     let responseContainer = null;
-    const suggestions = (_a = search === null || search === void 0 ? void 0 : search.ai) === null || _a === void 0 ? void 0 : _a.suggestions;
+    const suggestions = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions;
     const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
     if (hasPendingOrReceivedResponse) {
         let icon;

package/lib/components/Search/SearchDialog.d.ts

@@ -2,5 +2,6 @@ import type { JSX } from 'react';
 export type SearchDialogProps = {
     onClose: () => void;
     className?: string;
+    initialMode?: 'search' | 'ai-dialog';
 };
-export declare function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element;
+export declare function SearchDialog({ onClose, className, initialMode, }: SearchDialogProps): JSX.Element;

package/lib/components/Search/SearchDialog.js

@@ -50,13 +50,13 @@ const ReturnKeyIcon_1 = require("../../icons/ReturnKeyIcon/ReturnKeyIcon");
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
 const AiStarsGradientIcon_1 = require("../../icons/AiStarsGradientIcon/AiStarsGradientIcon");
-function SearchDialog({ onClose, className }) {
+function SearchDialog({ onClose, className, initialMode = 'search', }) {
     const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const products = useProducts();
     const currentProduct = useCurrentProduct();
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
-    const [mode, setMode] = (0, react_1.useState)('search');
+    const [mode, setMode] = (0, react_1.useState)(initialMode);
     const autoSearchDisabled = mode !== 'search';
     const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
     const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);