@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Feedback/Stars.js

@@ -0,0 +1,54 @@
+"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.Stars = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Stars = ({ max = 5, onChange, value }) => {
+    const [hovered, setHovered] = React.useState(value || 0);
+    const stars = [];
+    for (let index = 1; index <= max; index++) {
+        stars.push(React.createElement(Star, { key: index, onClick: () => onChange(index), onMouseOver: () => setHovered(index), onMouseLeave: () => !value && setHovered(0) },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20" }, hovered < index ? (React.createElement("g", { fill: "#e8c002" },
+                React.createElement("path", { d: "M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" }))) : (React.createElement("g", { fill: "#e8c002" },
+                React.createElement("path", { d: "M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" }))))));
+    }
+    return React.createElement(StarsWrapper, null, stars);
+};
+exports.Stars = Stars;
+const StarsWrapper = styled_components_1.default.div `
+  display: flex;
+  gap: 8px;
+  flex-direction: row;
+  align-items: center;
+`;
+const Star = styled_components_1.default.span `
+  cursor: pointer;
+  gap: 8px;
+`;
+//# sourceMappingURL=Stars.js.map

package/lib/components/Feedback/Thumbs.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const ThumbUp: () => React.JSX.Element;
+export declare const ThumbDown: () => React.JSX.Element;

package/lib/components/Feedback/Thumbs.js

@@ -0,0 +1,49 @@
+"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.ThumbDown = exports.ThumbUp = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon");
+const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon");
+const ThumbUp = () => {
+    return (React.createElement(Wrapper, null,
+        React.createElement(ThumbUpIcon_1.ThumbUpIcon, null)));
+};
+exports.ThumbUp = ThumbUp;
+const ThumbDown = () => {
+    return (React.createElement(Wrapper, null,
+        React.createElement(ThumbDownIcon_1.ThumbDownIcon, null)));
+};
+exports.ThumbDown = ThumbDown;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  align-items: center;
+`;
+//# sourceMappingURL=Thumbs.js.map

package/lib/components/Feedback/index.d.ts

@@ -0,0 +1,10 @@
+export { Feedback } from '../../components/Feedback/Feedback';
+export { Rating } from '../../components/Feedback/Rating';
+export { Sentiment } from '../../components/Feedback/Sentiment';
+export { Mood } from '../../components/Feedback/Mood';
+export { Scale } from '../../components/Feedback/Scale';
+export { Comment } from '../../components/Feedback/Comment';
+export { Reasons } from '../../components/Feedback/Reasons';
+export { ReportDialog } from '../../components/Feedback/ReportDialog';
+export { useReportDialog } from '../../components/Feedback/useReportDialog';
+export * from './types';

package/lib/components/Feedback/index.js

@@ -0,0 +1,37 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReportDialog = exports.ReportDialog = exports.Reasons = exports.Comment = exports.Scale = exports.Mood = exports.Sentiment = exports.Rating = exports.Feedback = void 0;
+var Feedback_1 = require("../../components/Feedback/Feedback");
+Object.defineProperty(exports, "Feedback", { enumerable: true, get: function () { return Feedback_1.Feedback; } });
+var Rating_1 = require("../../components/Feedback/Rating");
+Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return Rating_1.Rating; } });
+var Sentiment_1 = require("../../components/Feedback/Sentiment");
+Object.defineProperty(exports, "Sentiment", { enumerable: true, get: function () { return Sentiment_1.Sentiment; } });
+var Mood_1 = require("../../components/Feedback/Mood");
+Object.defineProperty(exports, "Mood", { enumerable: true, get: function () { return Mood_1.Mood; } });
+var Scale_1 = require("../../components/Feedback/Scale");
+Object.defineProperty(exports, "Scale", { enumerable: true, get: function () { return Scale_1.Scale; } });
+var Comment_1 = require("../../components/Feedback/Comment");
+Object.defineProperty(exports, "Comment", { enumerable: true, get: function () { return Comment_1.Comment; } });
+var Reasons_1 = require("../../components/Feedback/Reasons");
+Object.defineProperty(exports, "Reasons", { enumerable: true, get: function () { return Reasons_1.Reasons; } });
+var ReportDialog_1 = require("../../components/Feedback/ReportDialog");
+Object.defineProperty(exports, "ReportDialog", { enumerable: true, get: function () { return ReportDialog_1.ReportDialog; } });
+var useReportDialog_1 = require("../../components/Feedback/useReportDialog");
+Object.defineProperty(exports, "useReportDialog", { enumerable: true, get: function () { return useReportDialog_1.useReportDialog; } });
+__exportStar(require("./types"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Feedback/types.d.ts

@@ -0,0 +1,128 @@
+import type { SubmitFeedbackParams } from '../../types/portal/src/shared/types/feedback';
+export type RatingProps = {
+    onSubmit: (value: {
+        score: number;
+        comment?: string;
+        reasons?: string[];
+        max: number;
+    }) => void;
+    settings?: {
+        label?: string;
+        submitText?: string;
+        comment?: {
+            hide?: boolean;
+            label?: string;
+        };
+        reasons?: {
+            hide?: boolean;
+            label?: string;
+            component?: string;
+            items: string[];
+        };
+    };
+    className?: string;
+};
+export type ScaleProps = {
+    onSubmit: (value: {
+        score: number;
+        comment?: string;
+        reasons?: string[];
+        max?: number;
+    }) => void;
+    settings?: {
+        label?: string;
+        submitText?: string;
+        leftScaleLabel?: string;
+        rightScaleLabel?: string;
+        comment?: {
+            hide?: boolean;
+            label?: string;
+        };
+        reasons?: {
+            hide?: boolean;
+            label?: string;
+            component?: string;
+            items: string[];
+        };
+    };
+    className?: string;
+};
+export type MoodProps = {
+    onSubmit: (value: {
+        score: number;
+        comment?: string;
+        reasons?: string[];
+    }) => void;
+    settings?: {
+        label?: string;
+        submitText?: string;
+        comment?: {
+            hide?: boolean;
+            satisfiedLabel?: string;
+            neutralLabel?: string;
+            dissatisfiedLabel?: string;
+        };
+        reasons?: {
+            hide?: boolean;
+            label?: string;
+            component?: string;
+            items: string[];
+        };
+    };
+    className?: string;
+};
+export type SentimentProps = {
+    onSubmit: (value: {
+        score: number;
+        comment?: string;
+        reasons?: string[];
+    }) => void;
+    settings?: {
+        label?: string;
+        submitText?: string;
+        comment?: {
+            hide?: boolean;
+            likeLabel?: string;
+            dislikeLabel?: string;
+        };
+        reasons?: {
+            hide?: boolean;
+            label?: string;
+            component?: string;
+            items: string[];
+        };
+    };
+    className?: string;
+};
+export type CommentProps = {
+    onSubmit: (value: {
+        comment: string;
+    }) => void;
+    onCancel?: () => unknown;
+    settings?: {
+        label?: string;
+        submitText?: string;
+    };
+    standAlone?: boolean;
+    className?: string;
+};
+export type ReasonsProps = {
+    onChange: (value: string[]) => void;
+    settings: {
+        label?: string;
+        component?: string;
+        items: string[];
+    };
+    className?: string;
+};
+export type ReportDialogProps = {
+    location: string;
+    lang?: string;
+    onSubmit: () => void;
+    onCancel: () => void;
+    settings: {
+        label?: string;
+    };
+    submitFeedback: ({ type, values, path, location }: SubmitFeedbackParams) => Promise<void>;
+    className?: string;
+};

package/lib/components/Feedback/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/components/Feedback/useReportDialog.d.ts

@@ -0,0 +1,13 @@
+import type { ReportDialogProps } from '../../components/Feedback/types';
+export interface ReportButtonProps {
+    onClick: () => void;
+    buttonText: string;
+    tooltip: string;
+    visible: boolean;
+}
+interface ReportComponentsProps {
+    visible?: boolean;
+    props: Partial<ReportDialogProps> | ReportButtonProps;
+}
+export declare function useReportDialog(): Record<string, ReportComponentsProps>;
+export {};

package/lib/components/Feedback/useReportDialog.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReportDialog = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../../mocks/hooks");
+const hooks_2 = require("../../hooks");
+const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
+function useReportDialog() {
+    const { codeSnippet: { report = {} } = {} } = (0, hooks_2.useThemeConfig)();
+    const [isReportDialogShown, setIsReportDialogShown] = (0, react_1.useState)(false);
+    const isReportButtonShown = (report === null || report === void 0 ? void 0 : report.hide) !== true;
+    const { tooltipText, buttonText, label } = report;
+    const { translate } = (0, hooks_1.useTranslate)();
+    const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
+    const showReportDialog = () => {
+        setIsReportDialogShown(true);
+    };
+    const hideReportDialog = () => {
+        setTimeout(function () {
+            setIsReportDialogShown(false);
+        }, 1000);
+    };
+    const closeReportDialog = () => {
+        setIsReportDialogShown(false);
+    };
+    const reportButtonProps = {
+        onClick: showReportDialog,
+        buttonText: buttonText || translate('theme.codeSnippet.report.buttonText', 'Report'),
+        tooltip: tooltipText || translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
+        visible: isReportButtonShown,
+    };
+    const reportDialogProps = {
+        settings: {
+            label: label || translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
+        },
+        onSubmit: hideReportDialog,
+        onCancel: closeReportDialog,
+        submitFeedback,
+    };
+    return {
+        reportDialog: { visible: isReportDialogShown, props: reportDialogProps },
+        reportButton: { props: reportButtonProps },
+    };
+}
+exports.useReportDialog = useReportDialog;
+//# sourceMappingURL=useReportDialog.js.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
+import type { ThemeConfig } from '../../config';
+export declare function Filter({ filter, filterValuesCasing, }: {
+    filter: ResolvedFilter & {
+        selectedOptions: any;
+    };
+    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+}): React.JSX.Element | null;

package/lib/components/Filter/Filter.js

@@ -0,0 +1,199 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filter = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_date_picker_1 = require("react-date-picker");
+const hooks_1 = require("../../mocks/hooks");
+const icons_1 = require("../../icons");
+const Select_1 = require("../../components/Select");
+function Filter({ filter, filterValuesCasing, }) {
+    var _a;
+    const { translate } = (0, hooks_1.useTranslate)();
+    if (!filter.parentUsed)
+        return null;
+    let selectOptions = [];
+    if (filter.type === 'select') {
+        const defaultOptionCount = filter.filteredOptions.reduce((acc, option) => acc + option.count, 0);
+        selectOptions = [
+            {
+                value: '',
+                element: (react_1.default.createElement(FilterOption, { key: "all", onClick: () => filter.selectOption('') },
+                    react_1.default.createElement(FilterOptionLabel, null, translate('theme.catalog.filters.select.all', 'All')),
+                    react_1.default.createElement(FilterOptionCount, null, defaultOptionCount))),
+            },
+        ];
+        selectOptions.push(...filter.filteredOptions.map((option) => ({
+            value: option.value,
+            element: (react_1.default.createElement(FilterOption, { key: option.value },
+                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(option.value), filterValuesCasing)),
+                react_1.default.createElement(FilterOptionCount, null, option.count))),
+        })));
+    }
+    return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
+        react_1.default.createElement(FilterTitle, null,
+            translate(filter.titleTranslationKey, filter.title),
+            " "),
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '', onChange: (value) => filter.selectOption(value), options: selectOptions })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(DatePickerWrapper, null,
+                react_1.default.createElement("span", null, "From:"),
+                react_1.default.createElement(react_date_picker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null, minDetail: "decade", maxDate: new Date(), onChange: (from) => {
+                        if (Array.isArray(from))
+                            return;
+                        filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: formatDateWithNoTimeZone(from) }));
+                    } })),
+            react_1.default.createElement(DatePickerWrapper, null,
+                react_1.default.createElement("span", null, "To:"),
+                react_1.default.createElement(react_date_picker_1.DatePicker, { closeCalendar: true, dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", format: "y-MM-dd", minDate: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined, value: filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : null, minDetail: "decade", onChange: (to) => {
+                        if (Array.isArray(to))
+                            return;
+                        filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
+                    } })))) : (filter.filteredOptions.map((value) => {
+            const id = 'filter--' + filter.property + '--' + value.value;
+            return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
+                react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
+                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
+                react_1.default.createElement(FilterOptionCount, null, value.count)));
+        }))));
+}
+exports.Filter = Filter;
+function changeCasing(str, casing) {
+    if (!casing || casing === 'original' || !str)
+        return str;
+    if (casing === 'lowercase') {
+        return str.toLowerCase();
+    }
+    if (casing === 'uppercase') {
+        return str.toUpperCase();
+    }
+    if (casing === 'sentence') {
+        const words = str === null || str === void 0 ? void 0 : str.split(/[\s-_]+/);
+        return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+    }
+}
+const FilterGroup = styled_components_1.default.div `
+  padding: var(--filter-group-padding);
+`;
+const FilterOptionLabel = styled_components_1.default.label `
+  cursor: pointer;
+  font-size: var(--filter-option-label-font-size);
+  font-weight: var(--filter-option-label-font-weight);
+  margin: var(--filter-option-label-margin);
+  color: var(--filter-option-label-color);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+const FilterOptionCount = styled_components_1.default.label `
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: var(--filter-option-count-height);
+  color: var(--filter-option-count-color);
+  text-align: center;
+  font-size: var(--filter-option-count-font-size);
+  font-weight: var(--filter-option-count-font-weight);
+  padding: var(--filter-option-count-padding);
+  border-radius: var(--filter-option-count-border-radius);
+  border: var(--filter-option-count-border);
+  background-color: var(--filter-option-count-background-color);
+`;
+const FilterTitle = styled_components_1.default.h4 `
+  font-weight: var(--filter-title-font-weight);
+  font-size: var(--filter-title-font-size);
+  margin: var(--filter-title-margin);
+`;
+const FilterOption = styled_components_1.default.label.attrs({ 'data-cy': 'Filter/FilterOption' }) `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-weight: var(--filter-option-font-weight);
+  font-size: var(--filter-option-font-size);
+  margin: var(--filter-option-margin);
+
+  input {
+    cursor: pointer;
+  }
+`;
+const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
+  min-height: var(--filter-select-min-height);
+  color: var(--filter-select-color);
+  border: 1px solid var(--filter-select-border-color);
+  border-radius: var(--filter-select-border-radius);
+  padding: var(--filter-select-padding);
+
+  :hover {
+    border-color: var(--filter-select-hover-border-color);
+  }
+
+  ${FilterOption} {
+    margin: var(--filter-select-option-margin);
+  }
+`;
+const DatePickerWrapper = styled_components_1.default.div `
+  color: var(--filter-date-picker-color);
+  display: flex;
+  flex-direction: row;
+  margin: var(--filter-date-picker-margin);
+
+  align-items: center;
+  gap: var(--filter-date-picker-gap);
+
+  > span {
+    width: var(--filter-date-picker-width);
+  }
+
+  .react-date-picker {
+    flex: 1;
+  }
+
+  .react-calendar__tile--now {
+    background: var(--filter-date-picker-tile-background);
+    color: var(--filter-date-picker-tile-color);
+
+    &:enabled:hover,
+    &:enabled:focus {
+      background: var(--filter-date-picker-tile-hover-background);
+      color: var(--filter-date-picker-tile-hover-color);
+    }
+  }
+
+  .react-date-picker__inputGroup__input {
+    width: var(--filter-date-picker-input-width);
+
+    &:invalid {
+      background: var(--filter-date-picker-invalid-input-background);
+    }
+  }
+
+  .react-date-picker__button {
+    padding: var(--filter-date-picker-button-padding);
+
+    svg {
+      stroke: var(--filter-date-picker-icon-stroke);
+      width: var(--filter-date-picker-icon-width);
+    }
+
+    &:enabled:hover .react-date-picker__button__icon {
+      stroke: var(--filter-date-picker-hover-icon-stroke);
+    }
+  }
+
+  .react-date-picker__wrapper {
+    border: 1px solid var(--filter-date-picker-wrapper-border-color);
+    border-radius: var(--filter-date-picker-wrapper-radius);
+    padding: var(--filter-date-picker-wrapper-padding);
+  }
+`;
+function padZero(num) {
+    return num < 10 ? '0' + num : num;
+}
+function formatDateWithNoTimeZone(date) {
+    if (!date)
+        return date;
+    return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
+}
+//# sourceMappingURL=Filter.js.map

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ThemeConfig } from '../../config';
+import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
+interface FilterContentProps {
+    setFilterTerm: (value: string) => void;
+    filters: ResolvedFilter[];
+    filterTerm: string;
+    isMobile: boolean;
+    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+}
+export declare function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }: FilterContentProps): React.JSX.Element;
+export declare const FilterItems: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/components/Filter/FilterContent.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterItems = exports.FilterContent = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button");
+const hooks_1 = require("../../mocks/hooks");
+const Catalog_1 = require("../../components/Catalog");
+const Filter_1 = require("../../components/Filter");
+const Sidebar_1 = require("../../components/Sidebar");
+const FilterPopover_1 = require("../../components/Filter/FilterPopover");
+function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }) {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const hasActiveFilters = filters.some((filter) => {
+        if (filterTerm)
+            return true;
+        if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
+            return filter.selectedOptions.size;
+        }
+        else if (filter.selectedOptions.from && filter.selectedOptions.to) {
+            return true;
+        }
+    });
+    const handleClearAll = () => {
+        filters.forEach((filter) => filter.selectOption(''));
+        setFilterTerm('');
+    };
+    return (react_1.default.createElement(FilterContentWrapper, { isMobile: isMobile },
+        react_1.default.createElement(Catalog_1.FilterControls, null,
+            react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate('theme.catalog.filters.placeholder', 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
+        react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing })))),
+        hasActiveFilters && (react_1.default.createElement(ActionsContainer, null,
+            react_1.default.createElement(ClearAllButton, { size: "default", variant: "outlined", onClick: handleClearAll }, translate('theme.catalog.filters.clearAll', 'Clear all filters'))))));
+}
+exports.FilterContent = FilterContent;
+const FilterContentWrapper = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
+  width: var(--sidebar-width);
+  display: none;
+
+  ${Button_1.Button} {
+    width: var(--filter-content-clear-button-width);
+  }
+
+  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
+    display: flex;
+    border-right: 1px solid var(--filter-content-border-color);
+
+    ${Catalog_1.FilterControls} {
+      background: var(--filter-controls-background-color);
+    }
+  }
+`;
+exports.FilterItems = styled_components_1.default.div `
+  overflow: scroll;
+  padding: var(--filter-content-items-padding);
+`;
+const ActionsContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-base) var(--spacing-lg);
+  margin-top: auto;
+`;
+const ClearAllButton = (0, styled_components_1.default)(Button_1.Button) `
+  width: var(--filter-content-clear-button-width);
+`;
+//# sourceMappingURL=FilterContent.js.map

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ThemeConfig } from '../../config';
+import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
+interface FilterPopoverProps {
+    setIsAddingFilter: (value: boolean) => void;
+    filters: ResolvedFilter[];
+    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+}
+export declare function FilterPopover({ setIsAddingFilter, filters, filterValuesCasing, }: FilterPopoverProps): React.JSX.Element;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {
+    'data-cy': string;
+}, "data-cy">;
+export {};