@redocly/theme 0.47.1 → 0.48.1

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

@@ -1,4 +1,4 @@
-import type { AnonymousUserEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 export declare enum MOOD_STATES {
     SATISFIED = "satisfied",
     NEUTRAL = "neutral",
@@ -25,7 +25,7 @@ export type MoodProps = {
             neutral?: ReasonsSettingsSchema;
             dissatisfied?: ReasonsSettingsSchema;
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Mood.js

@@ -22,15 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MOOD_STATES = void 0;
 exports.Mood = Mood;
 const React = __importStar(require("react"));
 const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const Reasons_1 = require("../../components/Feedback/Reasons");
 const hooks_1 = require("../../core/hooks");
 const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
@@ -46,7 +43,7 @@ var MOOD_STATES;
     MOOD_STATES["DISSATISFIED"] = "dissatisfied";
 })(MOOD_STATES || (exports.MOOD_STATES = MOOD_STATES = {}));
 function Mood({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [score, setScore] = React.useState('');
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
@@ -109,7 +106,7 @@ function Mood({ settings, onSubmit, className }) {
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     const onSubmitMoodForm = () => {
         onSubmit({
             score: remapScore(score),
@@ -134,14 +131,14 @@ function Mood({ settings, onSubmit, className }) {
     if (isSubmitted) {
         return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood" },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
+                React.createElement(Label, { standAlone: true, "data-translation-key": "feedback.settings.submitText" }, submitText ||
                     translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
                 React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
     return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood", className: className },
         React.createElement(StyledForm, { onSubmit: onSubmitMoodForm },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
+                React.createElement(Label, { standAlone: true, "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(Button_1.Button, { "aria-label": MOOD_STATES.DISSATISFIED, type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
                             setScore(MOOD_STATES.DISSATISFIED);
@@ -160,10 +157,10 @@ function Mood({ settings, onSubmit, className }) {
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { type: "submit", variant: "secondary", size: "small" }, "Submit"))))));
@@ -189,9 +186,17 @@ const MoodWrapper = styled_components_1.default.div `
 const Label = styled_components_1.default.h4 `
   font-family: var(--feedback-font-family);
   font-weight: var(--font-weight-regular);
-  font-size: var(--feedback-header-font-size);
-  line-height: var(--feedback-header-line-height);
-  color: var(--feedback-header-text-color);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  color: var(--feedback-text-color);
+
+  ${({ standAlone = false }) => standAlone &&
+    (0, styled_components_1.css) `
+      font-size: var(--feedback-header-font-size);
+      line-height: var(--feedback-header-line-height);
+      color: var(--feedback-header-text-color);
+    `}
+
   margin: 0;
 `;
 const ButtonsContainer = styled_components_1.default.div `

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

@@ -1,4 +1,4 @@
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 export declare const FEEDBACK_MAX_RATING = 5;
 export type RatingProps = {
     onSubmit: (value: {
@@ -21,7 +21,7 @@ export type RatingProps = {
             component?: string;
             items: string[];
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Rating.js

@@ -39,7 +39,7 @@ const Stars_1 = require("../../components/Feedback/Stars");
 const Button_1 = require("../../components/Button/Button");
 exports.FEEDBACK_MAX_RATING = 5;
 function Rating({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [reasons, setReasons] = React.useState([]);
@@ -71,7 +71,7 @@ function Rating({ settings, onSubmit, className }) {
     const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     (0, react_1.useEffect)(() => {
         if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
             onSubmitRatingForm();
@@ -102,10 +102,10 @@ function Rating({ settings, onSubmit, className }) {
                             translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { onClick: onSubmitRatingForm, variant: "secondary", size: "small" }, "Submit"))))));

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

@@ -1,4 +1,4 @@
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 export declare const MAX_SCALE = 10;
 export type ScaleProps = {
     onSubmit: (value: {
@@ -23,7 +23,7 @@ export type ScaleProps = {
             component?: string;
             items: string[];
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Scale.js

@@ -39,7 +39,7 @@ const Reasons_1 = require("../../components/Feedback/Reasons");
 const Button_1 = require("../../components/Button/Button");
 exports.MAX_SCALE = 10;
 function Scale({ settings, onSubmit, className }) {
-    const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [score, setScore] = React.useState(0);
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
@@ -59,7 +59,7 @@ function Scale({ settings, onSubmit, className }) {
     const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!score && (displayReasons || displayComment);
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     const handleCancel = () => {
         setScore(0);
         setComment('');
@@ -109,10 +109,10 @@ function Scale({ settings, onSubmit, className }) {
                             translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } }))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel')),
                 React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.scale.send", type: "submit", variant: "secondary", size: "small" }, translate('feedback.settings.scale.send', 'Submit')))))));

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

@@ -1,4 +1,4 @@
-import type { ReasonsSettingsSchema, AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 export type SentimentProps = {
     onSubmit: (value: {
         score: number;
@@ -18,7 +18,7 @@ export type SentimentProps = {
             like?: ReasonsSettingsSchema;
             dislike?: ReasonsSettingsSchema;
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Sentiment.js

@@ -38,7 +38,7 @@ const Button_1 = require("../../components/Button/Button");
 const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
 const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon/ThumbUpIcon");
 function Sentiment({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
@@ -74,7 +74,7 @@ function Sentiment({ settings, onSubmit, className }) {
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||
             translate('feedback.settings.comment.likeLabel', 'What was most helpful?')
@@ -141,10 +141,10 @@ function Sentiment({ settings, onSubmit, className }) {
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, "Submit"))))));

package/lib/components/Search/SearchDialog.js

@@ -52,8 +52,8 @@ function SearchDialog({ onClose, className }) {
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
     const [mode, setMode] = (0, react_1.useState)('search');
     const autoSearchDisabled = mode !== 'search';
-    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
-    const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onTopFacetsReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
+    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);
     const aiSearch = useAiSearch({ filter });
     const modalRef = (0, react_1.useRef)(null);
     const { translate } = useTranslate();
@@ -80,10 +80,10 @@ function SearchDialog({ onClose, className }) {
         return react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct });
     };
     const showLoadMore = (groupKey, currentCount = 0) => {
-        const topFacet = facets.find((facet) => facet.isTop);
+        const groupFacet = facets.find((facet) => facet.field === groupField);
         let needLoadMore = false;
-        if (topFacet) {
-            const groupValue = topFacet.values.find((value) => {
+        if (groupFacet) {
+            const groupValue = groupFacet.values.find((value) => {
                 if (typeof value === 'object') {
                     return value.value === groupKey;
                 }
@@ -120,15 +120,15 @@ function SearchDialog({ onClose, className }) {
                                 setQuery('');
                                 aiSearch.askQuestion(query);
                             }
-                        } }, translate('search.aiButton', 'Search with AI'))) : null,
+                        } }, translate('search.ai.button', 'Search with AI'))) : null,
                     showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle }))))),
             react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchDialogBodyMainView, null,
-                    react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onTopFacetsReset: onTopFacetsReset }),
+                    react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onQuickFilterReset: onQuickFilterReset, groupField: groupField }),
                     showResults ? (items && Object.keys(items).some((key) => { var _a; return (_a = items[key]) === null || _a === void 0 ? void 0 : _a.length; }) ? (Object.keys(items).map((key) => {
                         var _a, _b, _c;
                         return ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(react_1.Fragment, { key: key },
-                            react_1.default.createElement(SearchGroupTitle, null, key), (_b = items[key]) === null || _b === void 0 ? void 0 :
+                            react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, key), (_b = items[key]) === null || _b === void 0 ? void 0 :
                             _b.map(mapItem),
                             showLoadMore(key, ((_c = items[key]) === null || _c === void 0 ? void 0 : _c.length) || 0) && (react_1.default.createElement(SearchGroupFooter, { "data-translation-key": "search.showMore", onClick: () => { var _a; return setLoadMore({ groupKey: key, offset: ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) || 0 }); } }, translate('search.showMore', 'Show more'))))) : null;
                     })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, null,
@@ -138,8 +138,8 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
                         react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
                 advancedSearch && mode === 'search' && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
-                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources }))),
-            mode === 'search' && (react_1.default.createElement(SearchDialogFooter, null,
+                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources }))),
+            react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchShortcuts, null,
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.select", combination: "\u23CE", text: translate('search.keys.select', 'to select') }),
@@ -147,7 +147,7 @@ function SearchDialog({ onClose, className }) {
                 isSearchLoading && (react_1.default.createElement(SearchLoading, null,
                     react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
                     translate('search.loading', 'Loading...'))),
-                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('search.cancel', 'Cancel')))))));
+                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('search.cancel', 'Cancel'))))))));
 }
 const SearchOverlay = styled_components_1.default.div `
   position: fixed;
@@ -296,4 +296,10 @@ const SearchHeaderButtons = styled_components_1.default.div `
   padding-left: var(--search-header-buttons-padding-left);
   border-left: var(--search-header-buttons-border-left);
 `;
+const AiDisclaimer = styled_components_1.default.div `
+  font-size: var(--search-ai-disclaimer-font-size);
+  line-height: var(--search-ai-disclaimer-line-height);
+  color: var(--search-ai-disclaimer-text-color);
+  margin: 0 auto;
+`;
 //# sourceMappingURL=SearchDialog.js.map

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

@@ -4,8 +4,9 @@ export type SearchFilterProps = {
     facets: SearchFacet[];
     filter: SearchFilterItem[];
     query: string;
-    onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+    quickFilterFields: string[];
+    onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
     onFilterReset: () => void;
     onFacetReset: (field: string) => void;
 };
-export declare function SearchFilter({ className, facets, filter, query, onFilterChange, onFilterReset, onFacetReset, }: SearchFilterProps): JSX.Element;
+export declare function SearchFilter({ className, facets, filter, query, quickFilterFields, onFilterChange, onFilterReset, onFacetReset, }: SearchFilterProps): JSX.Element;

package/lib/components/Search/SearchFilter.js

@@ -33,14 +33,14 @@ const Button_1 = require("../../components/Button/Button");
 const CleanIcon_1 = require("../../icons/CleanIcon/CleanIcon");
 const SearchFilterField_1 = require("../../components/Search/SearchFilterField");
 const hooks_1 = require("../../core/hooks");
-function SearchFilter({ className, facets, filter, query, onFilterChange, onFilterReset, onFacetReset, }) {
+function SearchFilter({ className, facets, filter, query, quickFilterFields, onFilterChange, onFilterReset, onFacetReset, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     return (React.createElement(SearchFilterWrapper, { "data-component-name": "Search/SearchFilter", className: className },
         React.createElement(SearchFilterHeader, null,
             React.createElement("span", { "data-translation-key": "search.filter.title" }, translate('search.filter.title', 'Advanced filter')),
             React.createElement(Button_1.Button, { "data-translation-key": "search.filter.reset", onClick: onFilterReset, variant: "ghost", icon: React.createElement(CleanIcon_1.CleanIcon, null) }, translate('search.filter.reset', 'Reset filters'))),
-        React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, onFilterChange: onFilterChange, onFacetReset: onFacetReset, filter: filter, query: query }))))));
+        React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, filter: filter, query: query, quickFilterFields: quickFilterFields, onFilterChange: onFilterChange, onFacetReset: onFacetReset }))))));
 }
 const SearchFilterWrapper = styled_components_1.default.div `
   width: var(--search-filter-width);

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

@@ -4,8 +4,9 @@ type SearchFilterFieldProps = {
     facet: SearchFacet;
     filter: SearchFilterItem[];
     query: string;
-    onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+    quickFilterFields: string[];
+    onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
     onFacetReset: (filed: string) => void;
 };
-export declare function SearchFilterField({ className, facet, filter, query, onFilterChange, onFacetReset, }: SearchFilterFieldProps): JSX.Element;
+export declare function SearchFilterField({ className, facet, filter, query, quickFilterFields, onFilterChange, onFacetReset, }: SearchFilterFieldProps): JSX.Element;
 export {};

package/lib/components/Search/SearchFilterField.js

@@ -11,13 +11,13 @@ const ResetIcon_1 = require("../../icons/ResetIcon/ResetIcon");
 const hooks_1 = require("../../core/hooks");
 const SearchFilterFieldSelect_1 = require("../../components/Search/FilterFields/SearchFilterFieldSelect");
 const SearchFilterFieldTags_1 = require("../../components/Search/FilterFields/SearchFilterFieldTags");
-function SearchFilterField({ className, facet, filter, query, onFilterChange, onFacetReset, }) {
+function SearchFilterField({ className, facet, filter, query, quickFilterFields, onFilterChange, onFacetReset, }) {
     var _a;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const selectedValues = ((_a = filter.find((item) => item.field === facet.field)) === null || _a === void 0 ? void 0 : _a.values) || [];
     const onChange = (value) => {
-        onFilterChange(facet.field, value, facet.isTop);
+        onFilterChange(facet.field, value, facet.field in quickFilterFields);
     };
     const onReset = () => {
         onFacetReset(facet.field);

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

@@ -1,9 +1,10 @@
-import type { SearchFacet, SearchFilterItem } from '../../index.js';
+import { type SearchFacet, type SearchFilterItem } from '../../core/types';
 type SearchGroupsProps = {
     facets: SearchFacet[];
     searchFilter: SearchFilterItem[];
-    onFilterChange: (field: string, value: string[], isTop?: boolean) => void;
-    onTopFacetsReset: () => void;
+    groupField: string;
+    onFilterChange: (field: string, value: string[], isQuickFilter?: boolean) => void;
+    onQuickFilterReset: () => void;
 };
-export declare function SearchGroups({ facets, searchFilter, onFilterChange, onTopFacetsReset, }: SearchGroupsProps): JSX.Element;
+export declare function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuickFilterReset, }: SearchGroupsProps): JSX.Element;
 export {};

package/lib/components/Search/SearchGroups.js

@@ -30,8 +30,8 @@ exports.SearchGroups = SearchGroups;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../components/Tag/Tag");
-function SearchGroups({ facets, searchFilter, onFilterChange, onTopFacetsReset, }) {
-    const groupFacets = facets.filter((facet) => facet.isTop);
+function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuickFilterReset, }) {
+    const groupFacets = facets.filter((facet) => facet.field === groupField);
     const handleGroupTagClick = (value, fieldId, active, currentValues) => {
         const values = active
             ? currentValues.filter((item) => item !== value)
@@ -39,7 +39,7 @@ function SearchGroups({ facets, searchFilter, onFilterChange, onTopFacetsReset,
         onFilterChange(fieldId, values, true);
     };
     return (React.createElement(SearchGroupsWrapper, null,
-        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isTop), onClick: () => searchFilter.some((item) => item.isTop) && onTopFacetsReset() }, "All"),
+        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isQuickFilter), onClick: () => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset() }, "All"),
         React.createElement(Divider, null),
         groupFacets.flatMap((facet) => facet.values.map((facetCount, index) => {
             var _a;

package/lib/components/Search/variables.js

@@ -178,6 +178,10 @@ exports.search = (0, styled_components_1.css) `
   --search-ai-resource-tag-text-color: var(--text-color-secondary);
   --search-ai-resource-tag-icon-color: var(--text-color-secondary);
 
+  --search-ai-disclaimer-font-size: var(--font-size-sm);
+  --search-ai-disclaimer-line-height: var(--line-height-sm);
+  --search-ai-disclaimer-text-color: var(--text-color-secondary);
+
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Segmented/Segmented.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ForwardedRef, ReactElement } from 'react';
 import type { SelectOption } from '../../core/types/select';
 export type SegmentedProps<T> = {
     options: SelectOption<T>[];
@@ -7,6 +7,6 @@ export type SegmentedProps<T> = {
     className?: string;
     size?: 'regular' | 'small';
 };
-declare function SegmentedComponent<T>({ options, onChange, value, className, size, }: SegmentedProps<T>): ReactElement;
-export declare const Segmented: typeof SegmentedComponent;
-export {};
+export declare const Segmented: <T>(props: SegmentedProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement;

package/lib/components/Segmented/Segmented.js

@@ -22,18 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const typedMemo_1 = require("../../core/hoc/typedMemo");
-function SegmentedComponent({ options, onChange, value, className = '', size = 'regular', }) {
-    return (react_1.default.createElement(SegmentedGroup, { "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt) => (react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.label)))));
+function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
+    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt) => (react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.label)))));
 }
-exports.Segmented = (0, typedMemo_1.typedMemo)(SegmentedComponent);
+exports.Segmented = (0, typedMemo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
 const SegmentedGroup = styled_components_1.default.div `
   display: flex;
   background: var(--segmented-buttons-bg-color-main);

package/lib/components/Tag/Tag.d.ts

@@ -21,4 +21,5 @@ export type TagProps = {
     onClose?: (event: React.MouseEvent) => void;
 };
 export declare function Tag({ children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Tag/Tag.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWrapper = void 0;
 exports.Tag = Tag;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -23,14 +24,14 @@ function Tag(_a) {
     var { children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "onClick", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
     return (react_1.default.createElement(TagWrapper, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, hasCloseButton: closable }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
-        react_1.default.createElement(ContentWrapper, null, children),
+        react_1.default.createElement(exports.ContentWrapper, null, children),
         closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
                 onClose === null || onClose === void 0 ? void 0 : onClose(event);
             } },
             react_1.default.createElement(CloseIcon_1.CloseIcon, null))),
         active && react_1.default.createElement(ActiveIcon, null)));
 }
-const ContentWrapper = styled_components_1.default.div `
+exports.ContentWrapper = styled_components_1.default.div `
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/lib/core/hooks/__mocks__/search/use-search-filter.d.ts

@@ -4,5 +4,5 @@ export declare const useSearchFilter: jest.Mock<{
     onFilterChange: () => void;
     onFilterToggle: () => void;
     onFilterReset: () => void;
-    onTopFacetsReset: () => void;
+    onQuickFilterReset: () => void;
 }, [], any>;

package/lib/core/hooks/__mocks__/search/use-search-filter.js

@@ -8,7 +8,7 @@ exports.useSearchFilter = jest.fn(() => {
         onFilterChange: () => { },
         onFilterToggle: () => { },
         onFilterReset: () => { },
-        onTopFacetsReset: () => { },
+        onQuickFilterReset: () => { },
     };
 });
 //# sourceMappingURL=use-search-filter.js.map

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.d.ts

@@ -19,4 +19,4 @@ export type WalkthroughControlsState = {
     getFileText: (file: CodeWalkthroughFile) => string;
     populateInputsWithValue: (node: string) => string;
 };
-export declare function useCodeWalkthroughControls(filters: Record<string, CodeWalkthroughFilter>, inputs: InputsMarkdocAttr, toggles: TogglesMarkdocAttr): WalkthroughControlsState;
+export declare function useCodeWalkthroughControls(filters: Record<string, CodeWalkthroughFilter>, inputs: InputsMarkdocAttr, toggles: TogglesMarkdocAttr, enableDeepLink: boolean): WalkthroughControlsState;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -9,14 +9,14 @@ const defaultControlsValues = {
     toggle: false,
     filter: '',
 };
-function useCodeWalkthroughControls(filters, inputs, toggles) {
+function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
     const location = (0, react_router_dom_1.useLocation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
     const [togglesState, setTogglesState] = (0, react_1.useState)(() => {
         const initialState = {};
         for (const [id, toggle] of Object.entries(toggles)) {
-            initialState[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: searchParams.get(id) === 'true' });
+            initialState[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: enableDeepLink ? searchParams.get(id) === 'true' : false });
         }
         return initialState;
     });
@@ -44,9 +44,10 @@ function useCodeWalkthroughControls(filters, inputs, toggles) {
         }
     };
     const [inputsState, setInputsState] = (0, react_1.useState)(() => {
+        var _a;
         const initialState = {};
         for (const [id, input] of Object.entries(inputs)) {
-            initialState[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: searchParams.get(id) || input.value });
+            initialState[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: enableDeepLink ? ((_a = searchParams.get(id)) !== null && _a !== void 0 ? _a : input.value) : input.value });
         }
         return initialState;
     });
@@ -74,10 +75,11 @@ function useCodeWalkthroughControls(filters, inputs, toggles) {
         }
     };
     const [filtersState, setFiltersState] = (0, react_1.useState)(() => {
-        var _a, _b;
+        var _a, _b, _c;
         const initialState = {};
         for (const [id, filter] of Object.entries(filters)) {
-            initialState[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: searchParams.get(id) || ((_b = (_a = filter === null || filter === void 0 ? void 0 : filter.items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value) || '' });
+            const defaultValue = ((_b = (_a = filter === null || filter === void 0 ? void 0 : filter.items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value) || '';
+            initialState[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: enableDeepLink ? ((_c = searchParams.get(id)) !== null && _c !== void 0 ? _c : defaultValue) : defaultValue });
         }
         return initialState;
     });
@@ -157,6 +159,9 @@ function useCodeWalkthroughControls(filters, inputs, toggles) {
      * Update the URL search params with the current state of the filters and inputs
      */
     (0, react_1.useEffect)(() => {
+        if (!enableDeepLink) {
+            return;
+        }
         const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
         for (const [id, { value }] of Object.entries(state)) {
             if (value) {