@redocly/theme 0.69.0-next.5 → 0.69.0-next.7

package/lib/components/Dropdown/Dropdown.js

@@ -52,6 +52,9 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     };
     const handleClose = () => {
+        if (!isOpen) {
+            return;
+        }
         setIsOpen(false);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
@@ -109,9 +112,10 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
         };
     }, [portalled, isOpen, updateMenuPosition]);
     (0, hooks_1.useOutsideClick)(portalled ? [wrapperRef, menuRef] : wrapperRef, handleClose);
+    const menuContent = typeof children === 'function' ? children({ close: handleClose, isOpen }) : children;
     const triggerChild = react_1.default.Children.only(trigger);
-    const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
-    const menu = (react_1.default.createElement(ChildrenWrapper, { ref: menuRef, $placement: placement, $alignment: alignment, $isOpen: isOpen, $portalled: portalled, style: portalled ? menuStyle : undefined, onClick: closeOnClick ? handleChildClick : undefined }, children));
+    const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, 'aria-expanded': isOpen, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
+    const menu = (react_1.default.createElement(ChildrenWrapper, { ref: menuRef, $placement: placement, $alignment: alignment, $isOpen: isOpen, $portalled: portalled, style: portalled ? menuStyle : undefined, onClick: closeOnClick ? handleChildClick : undefined }, menuContent));
     const portalledMenu = isOpen && typeof document !== 'undefined' ? (0, react_dom_1.createPortal)(menu, document.body) : null;
     return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: wrapperRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
         dropdownTrigger,
@@ -132,6 +136,13 @@ const DropdownWrapper = styled_components_1.default.div `
   position: relative;
 
   text-decoration: none;
+
+  /* The trigger keeps its hovered appearance while the menu is open. */
+  > .button[aria-expanded='true'] {
+    background-color: var(--button-bg-color-hover);
+    color: var(--button-color-hover);
+    border-color: var(--button-border-color-hover);
+  }
 `;
 const ChildrenWrapper = styled_components_1.default.div `
   padding-top: var(--dropdown-menu-padding-top);

package/lib/components/Dropdown/DropdownMenuItemContent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { JSX } from 'react';
+export type DropdownMenuItemContentProps = {
+    title: React.ReactNode;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    className?: string;
+};
+export declare function DropdownMenuItemContent(props: DropdownMenuItemContentProps): JSX.Element;

package/lib/components/Dropdown/DropdownMenuItemContent.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenuItemContent = DropdownMenuItemContent;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function DropdownMenuItemContent(props) {
+    const { title, icon, description, className } = props;
+    return (react_1.default.createElement(MenuItemContentWrapper, { "data-component-name": "Dropdown/DropdownMenuItemContent", className: className },
+        icon ? react_1.default.createElement(IconWrapper, null, icon) : null,
+        react_1.default.createElement(TextWrapper, null,
+            react_1.default.createElement(TitleWrapper, null, title),
+            description ? react_1.default.createElement(DescriptionWrapper, null, description) : null)));
+}
+const MenuItemContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--dropdown-menu-item-content-gap);
+  padding: var(--dropdown-menu-item-content-padding);
+`;
+const IconWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--dropdown-menu-item-content-icon-size);
+  height: var(--dropdown-menu-item-content-icon-size);
+  color: var(--dropdown-menu-item-content-icon-color);
+  border: var(--dropdown-menu-item-content-icon-border);
+  border-radius: var(--dropdown-menu-item-content-icon-border-radius);
+`;
+const TextWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: var(--dropdown-menu-item-content-text-gap);
+`;
+const TitleWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--dropdown-menu-item-content-title-icon-gap);
+  font-weight: var(--dropdown-menu-item-content-title-font-weight);
+  font-size: var(--dropdown-menu-item-content-title-font-size);
+  line-height: var(--dropdown-menu-item-content-title-line-height);
+  color: var(--dropdown-menu-item-content-title-color);
+`;
+const DescriptionWrapper = styled_components_1.default.div `
+  font-weight: var(--dropdown-menu-item-content-description-font-weight);
+  font-size: var(--dropdown-menu-item-content-description-font-size);
+  line-height: var(--dropdown-menu-item-content-description-line-height);
+  color: var(--dropdown-menu-item-content-description-color);
+`;
+//# sourceMappingURL=DropdownMenuItemContent.js.map

package/lib/components/Dropdown/variables.js

@@ -19,7 +19,7 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-max-width: 424px;
   --dropdown-menu-max-height: 300px;
   --dropdown-menu-padding: var(--spacing-xxs); // @presenter Spacing
-  --dropdown-menu-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --dropdown-menu-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --dropdown-menu-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
   --dropdown-menu-border-color: var(--border-color-secondary); // @presenter Color
   --dropdown-menu-bg-color: var(--bg-color-raised); // @presenter Color
@@ -29,7 +29,7 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-item-padding-vertical: 5px; // @presenter Spacing
   --dropdown-menu-item-separator-padding-top: var(--spacing-xs); // @presenter Spacing
   --dropdown-menu-item-separator-padding-bottom: var(--spacing-xxs); // @presenter Spacing
-  --dropdown-menu-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --dropdown-menu-item-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --dropdown-menu-item-bg-color: transparent;
   --dropdown-menu-item-bg-color-active: var(--bg-color-hover); // @presenter Color
   --dropdown-menu-item-bg-color-hover: var(--bg-color-hover); // @presenter Color
@@ -47,6 +47,23 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-item-color-dangerous: var(--color-error-base);
 
   --dropdown-menu-item-border-color-focused: var(--button-border-color-focused);
+
+  --dropdown-menu-item-content-gap: var(--spacing-sm); // @presenter Spacing
+  --dropdown-menu-item-content-padding: var(--spacing-xxs) 0; // @presenter Spacing
+  --dropdown-menu-item-content-icon-size: 32px;
+  --dropdown-menu-item-content-icon-color: var(--icon-color-secondary); // @presenter Color
+  --dropdown-menu-item-content-icon-border: 1px solid var(--border-color-secondary); // @presenter Border
+  --dropdown-menu-item-content-icon-border-radius: var(--border-radius); // @presenter BorderRadius
+  --dropdown-menu-item-content-text-gap: var(--spacing-xxs); // @presenter Spacing
+  --dropdown-menu-item-content-title-icon-gap: var(--spacing-xxs); // @presenter Spacing
+  --dropdown-menu-item-content-title-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --dropdown-menu-item-content-title-font-size: var(--font-size-base); // @presenter FontSize
+  --dropdown-menu-item-content-title-line-height: var(--line-height-base); // @presenter LineHeight
+  --dropdown-menu-item-content-title-color: var(--text-color-secondary); // @presenter Color
+  --dropdown-menu-item-content-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --dropdown-menu-item-content-description-font-size: var(--font-size-sm); // @presenter FontSize
+  --dropdown-menu-item-content-description-line-height: var(--line-height-sm); // @presenter LineHeight
+  --dropdown-menu-item-content-description-color: var(--text-color-description); // @presenter Color
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Feedback/Mood.js

@@ -36,7 +36,6 @@ 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 = __importStar(require("styled-components"));
 const Reasons_1 = require("../../components/Feedback/Reasons");
 const hooks_1 = require("../../core/hooks");
@@ -115,33 +114,38 @@ function Mood({ settings, onSubmit, className }) {
             return 'checkbox';
         return (_a = reasonsSettings[score]) === null || _a === void 0 ? void 0 : _a.component;
     };
+    const hasComment = !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide);
+    const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
     const displayReasons = checkIfShouldDisplayReasons(score);
-    const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
+    const displayComment = !!score && hasComment;
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
-    const onSubmitMoodForm = () => {
+    const displayFeedbackEmail = !!score && hasOptionalEmail;
+    const submitMood = (moodScore) => {
         const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
         const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
         onSubmit({
-            score: remapScore(score),
+            score: remapScore(moodScore),
             comment: trimmedComment,
             reasons,
             email: trimmedEmail,
         });
         setIsSubmitted(true);
     };
+    const onSubmitMoodForm = () => {
+        submitMood(score);
+    };
+    const onScoreChange = (newScore) => {
+        setScore(newScore);
+        if (newScore && !checkIfShouldDisplayReasons(newScore) && !hasComment && !hasOptionalEmail) {
+            submitMood(newScore);
+        }
+    };
     const onCancelMoodForm = () => {
         setScore('');
         setComment('');
         setReasons([]);
         setEmail(undefined);
     };
-    (0, react_1.useEffect)(() => {
-        if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
-            onSubmitMoodForm();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [score, displayComment, displayReasons, displayFeedbackEmail]);
     if (isSubmitted) {
         return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood" },
             React.createElement(StyledFormMandatoryFields, null,
@@ -155,13 +159,13 @@ function Mood({ settings, onSubmit, className }) {
                 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);
+                            onScoreChange(MOOD_STATES.DISSATISFIED);
                         }, icon: React.createElement(FaceDissatisfiedIcon_1.FaceDissatisfiedIcon, null) }),
                     React.createElement(Button_1.Button, { "aria-label": MOOD_STATES.NEUTRAL, type: "button", variant: score === MOOD_STATES.NEUTRAL ? 'primary' : 'secondary', size: "medium", onClick: () => {
-                            setScore(MOOD_STATES.NEUTRAL);
+                            onScoreChange(MOOD_STATES.NEUTRAL);
                         }, icon: React.createElement(FaceNeutralIcon_1.FaceNeutralIcon, null) }),
                     React.createElement(Button_1.Button, { "aria-label": MOOD_STATES.SATISFIED, type: "button", variant: score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary', size: "medium", onClick: () => {
-                            setScore(MOOD_STATES.SATISFIED);
+                            onScoreChange(MOOD_STATES.SATISFIED);
                         }, icon: React.createElement(FaceSatisfiedIcon_1.FaceSatisfiedIcon, null) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
                 displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {

package/lib/components/Feedback/Rating.js

@@ -39,7 +39,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FEEDBACK_MAX_RATING = void 0;
 exports.Rating = Rating;
 const React = __importStar(require("react"));
-const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Reasons_1 = require("../../components/Feedback/Reasons");
 const hooks_1 = require("../../core/hooks");
@@ -59,15 +58,18 @@ function Rating({ settings, onSubmit, className }) {
     const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
     const { userData } = useUserMenu();
     const { translate } = useTranslate();
+    const hasReasons = !!(reasonsSettings && !reasonsSettings.hide);
+    const hasComment = !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide);
+    const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
     const onEmailChange = (e) => {
         const value = e.target.value;
         setEmail(value || undefined);
     };
-    const onSubmitRatingForm = () => {
+    const submitRating = (ratingScore) => {
         const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
         const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
         onSubmit({
-            score,
+            score: ratingScore,
             comment: trimmedComment,
             reasons,
             max: exports.FEEDBACK_MAX_RATING,
@@ -75,22 +77,25 @@ function Rating({ settings, onSubmit, className }) {
         });
         setIsSubmitted(true);
     };
+    const onSubmitRatingForm = () => {
+        submitRating(score);
+    };
+    const onScoreChange = (newScore) => {
+        setScore(newScore);
+        if (newScore && !hasReasons && !hasComment && !hasOptionalEmail) {
+            submitRating(newScore);
+        }
+    };
     const onCancelRatingForm = () => {
         setScore(0);
         setComment('');
         setReasons([]);
         setEmail(undefined);
     };
-    const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
-    const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
+    const displayReasons = !!score && hasReasons;
+    const displayComment = !!score && hasComment;
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
-    (0, react_1.useEffect)(() => {
-        if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
-            onSubmitRatingForm();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [score, displayComment, displayReasons, displayFeedbackEmail]);
+    const displayFeedbackEmail = !!score && hasOptionalEmail;
     if (isSubmitted) {
         return (React.createElement(RatingWrapper, { "data-component-name": "Feedback/Rating" },
             React.createElement(StyledFormMandatoryFields, null,
@@ -103,7 +108,7 @@ function Rating({ settings, onSubmit, className }) {
             React.createElement(StyledFormMandatoryFields, null,
                 React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
-                    React.createElement(Stars_1.Stars, { max: exports.FEEDBACK_MAX_RATING, onChange: setScore, value: score }))),
+                    React.createElement(Stars_1.Stars, { max: exports.FEEDBACK_MAX_RATING, onChange: onScoreChange, value: score }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
                 displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
                         label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,

package/lib/components/Feedback/Scale.js

@@ -39,7 +39,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MAX_SCALE = void 0;
 exports.Scale = Scale;
 const React = __importStar(require("react"));
-const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
@@ -63,25 +62,14 @@ function Scale({ settings, onSubmit, className }) {
         const value = e.target.value;
         setEmail(value || undefined);
     };
-    const scaleOptions = [];
-    for (let i = 1; i <= exports.MAX_SCALE; i++) {
-        scaleOptions.push(React.createElement(Button_1.Button, { id: `scale-option-${i}`, key: `scale-option-${i}`, type: "button", onClick: () => setScore(i), className: `${score === i ? 'active' : ''}` }, i));
-    }
-    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 && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
-    const handleCancel = () => {
-        setScore(0);
-        setComment('');
-        setReasons([]);
-        setEmail(undefined);
-    };
-    const onSubmitScaleForm = () => {
+    const hasReasons = !!(reasonsSettings && !reasonsSettings.hide);
+    const hasComment = !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide);
+    const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
+    const submitScale = (scaleScore) => {
         const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
         const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
         onSubmit({
-            score,
+            score: scaleScore,
             comment: trimmedComment,
             reasons,
             max: exports.MAX_SCALE,
@@ -89,12 +77,29 @@ function Scale({ settings, onSubmit, className }) {
         });
         setIsSubmitted(true);
     };
-    (0, react_1.useEffect)(() => {
-        if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
-            onSubmitScaleForm();
+    const onSubmitScaleForm = () => {
+        submitScale(score);
+    };
+    const onScoreChange = (newScore) => {
+        setScore(newScore);
+        if (newScore && !hasReasons && !hasComment && !hasOptionalEmail) {
+            submitScale(newScore);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [score, displayComment, displayReasons, displayFeedbackEmail]);
+    };
+    const handleCancel = () => {
+        setScore(0);
+        setComment('');
+        setReasons([]);
+        setEmail(undefined);
+    };
+    const scaleOptions = [];
+    for (let i = 1; i <= exports.MAX_SCALE; i++) {
+        scaleOptions.push(React.createElement(Button_1.Button, { id: `scale-option-${i}`, key: `scale-option-${i}`, type: "button", onClick: () => onScoreChange(i), className: `${score === i ? 'active' : ''}` }, i));
+    }
+    const displayReasons = !!score && hasReasons;
+    const displayComment = !!score && hasComment;
+    const displaySubmitBnt = !!score && (displayReasons || displayComment);
+    const displayFeedbackEmail = !!score && hasOptionalEmail;
     if (isSubmitted) {
         return (React.createElement(ScaleWrapper, { "data-component-name": "Feedback/Scale" },
             React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||

package/lib/components/Feedback/Sentiment.js

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sentiment = Sentiment;
 const React = __importStar(require("react"));
-const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Reasons_1 = require("../../components/Feedback/Reasons");
 const hooks_1 = require("../../core/hooks");
@@ -82,10 +81,12 @@ function Sentiment({ settings, onSubmit, className }) {
         }
         return !(scoreSpecificReasonsSettings === null || scoreSpecificReasonsSettings === void 0 ? void 0 : scoreSpecificReasonsSettings.hide);
     };
+    const hasComment = !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide);
+    const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
     const displayReasons = checkIfShouldDisplayReasons(score);
-    const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
+    const displayComment = !!score && hasComment;
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && hasOptionalEmail;
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||
             translate('feedback.settings.comment.likeLabel', 'What was most helpful?')
@@ -105,29 +106,32 @@ function Sentiment({ settings, onSubmit, className }) {
         const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
         return scoreSpecificReasonSettings === null || scoreSpecificReasonSettings === void 0 ? void 0 : scoreSpecificReasonSettings.component;
     };
-    const onSubmitSentimentForm = () => {
+    const submitSentiment = (sentimentScore) => {
         const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
         const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
         onSubmit({
-            score,
+            score: sentimentScore,
             comment: trimmedComment,
             reasons,
             email: trimmedEmail,
         });
         setIsSubmitted(true);
     };
+    const onSubmitSentimentForm = () => {
+        submitSentiment(score);
+    };
+    const onScoreChange = (newScore) => {
+        setScore(newScore);
+        if (newScore && !checkIfShouldDisplayReasons(newScore) && !hasComment && !hasOptionalEmail) {
+            submitSentiment(newScore);
+        }
+    };
     const onCancelSentimentForm = () => {
         setScore(0);
         setComment('');
         setReasons([]);
         setEmail(undefined);
     };
-    (0, react_1.useEffect)(() => {
-        if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
-            onSubmitSentimentForm();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [score, displayComment, displayReasons, displayFeedbackEmail]);
     if (isSubmitted) {
         return (React.createElement(SentimentWrapper, { "data-component-name": "Feedback/Sentiment" },
             React.createElement(StyledFormMandatoryFields, null,
@@ -141,10 +145,10 @@ function Sentiment({ settings, onSubmit, className }) {
                 React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === 1 ? 'primary' : 'secondary', onClick: () => {
-                            setScore(1);
+                            onScoreChange(1);
                         }, "aria-label": translate('feedback.sentiment.thumbUp', 'Like'), icon: React.createElement(ThumbUpIcon_1.ThumbUpIcon, null) }),
                     React.createElement(Button_1.Button, { size: "medium", type: "button", variant: score === -1 ? 'primary' : 'secondary', tone: score === -1 ? 'danger' : 'default', onClick: () => {
-                            setScore(-1);
+                            onScoreChange(-1);
                         }, "aria-label": translate('feedback.sentiment.thumbDown', 'Dislike'), icon: React.createElement(ThumbDownIcon_1.ThumbDownIcon, null) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
                 displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {

package/lib/components/Filter/FilterSelect.js

@@ -53,6 +53,7 @@ const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
   --select-text-color: var(--filter-select-color);
   border: 1px solid var(--filter-select-border-color);
   --select-border-radius: var(--filter-select-border-radius);
+  --select-input-border-radius: var(--filter-select-border-radius);
   padding: var(--filter-select-padding);
 
   &:hover {

package/lib/components/Filter/variables.js

@@ -74,7 +74,7 @@ exports.filter = (0, styled_components_1.css) `
   --filter-select-max-width: 100%;
   --filter-select-color: var(--text-color-primary);
   --filter-select-border-color: var(--border-color-primary);
-  --filter-select-border-radius: calc(var(--spacing-unit) * 1.5);
+  --filter-select-border-radius: var(--input-border-radius);
   --filter-select-padding: 0;
   --filter-select-border-color-hover: var(--text-color-primary);
   --filter-select-option-margin: 0;
@@ -94,7 +94,7 @@ exports.filter = (0, styled_components_1.css) `
   --filter-date-picker-icon-width: var(--spacing-sm);
   --filter-date-picker-icon-stroke-hover: var(--text-color-primary);
   --filter-date-picker-wrapper-border-color: var(--border-color-primary);
-  --filter-date-picker-wrapper-radius: calc(var(--spacing-unit) * 1.5);
+  --filter-date-picker-wrapper-radius: var(--border-radius-md);
   --filter-date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
 
   // @tokens End

package/lib/components/Image/variables.js

@@ -12,7 +12,7 @@ exports.image = (0, styled_components_1.css) `
   --image-frame-border-color: var(--border-color-secondary);
   --image-frame-border-radius: var(--border-radius-xxl);
   --image-frame-bg-color: var(--bg-color-raised);
-  --image-frame-image-border-radius: var(--border-radius-lg);
+  --image-frame-image-border-radius: var(--border-radius-xl);
 
   /**
     * @tokens Image caption
@@ -26,7 +26,7 @@ exports.image = (0, styled_components_1.css) `
   /**
     * @tokens Image gallery
     */
-  --image-gallery-border-radius: var(--border-radius-lg);
+  --image-gallery-border-radius: var(--border-radius-xl);
   --image-gallery-image-bg-color: var(--bg-color-tonal);
 
   /**
@@ -51,9 +51,11 @@ exports.image = (0, styled_components_1.css) `
   --image-lightbox-close-size: 40px;
   --image-lightbox-close-icon-size: 18px;
   --image-lightbox-close-offset: var(--spacing-base);
-  --image-lightbox-close-border-radius: var(--border-radius-lg);
+  --image-lightbox-close-border-radius: var(--border-radius-xl);
   --image-lightbox-side-gutter: calc(
     var(--image-lightbox-close-size) + var(--image-lightbox-close-offset) + var(--spacing-sm)
   );
+
+  // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/LanguagePicker/variables.js

@@ -24,7 +24,7 @@ exports.languagePicker = (0, styled_components_1.css) `
   --language-picker-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing
   --language-picker-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing
   --language-picker-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing
-  --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
+  --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius); // @presenter BorderRadius
   --language-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --language-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
   --language-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color

package/lib/components/Markdown/variables.js

@@ -42,7 +42,7 @@ exports.markdown = (0, styled_components_1.css) `
   --md-table-line-height: var(--line-height-md); // @presenter FontSize
   --md-table-margin-vertical: 20px; // @presenter Spacing
   --md-table-bg-color: transparent; // @presenter Color
-  --md-table-border-radius: var(--border-radius);
+  --md-table-border-radius: var(--border-radius-xl);
 
   --md-table-border-width: 1px;
   --md-table-header-bg-color: var(--layer-color);

package/lib/components/Menu/variables.js

@@ -58,7 +58,7 @@ exports.menu = (0, styled_components_1.css) `
   --menu-item-label-margin: var(--menu-item-label-margin-vertical) var(--menu-item-label-margin-horizontal);
   --menu-item-label-padding: var(--menu-item-padding-vertical) var(--menu-item-padding-horizontal);
   --menu-item-label-gap: var(--spacing-xxs);
-  --menu-item-label-border-radius: 6px;
+  --menu-item-label-border-radius: var(--border-radius-lg);
   --menu-item-label-chevron-size: 12px;
   --menu-item-label-chevron-offset: calc(var(--menu-item-label-gap) + var(--menu-item-label-chevron-size));
 

package/lib/components/Navbar/variables.js

@@ -29,7 +29,7 @@ exports.navbar = (0, styled_components_1.css) `
 
   --navbar-item-line-height: var(--line-height-base);
   --navbar-item-bg-color-active: var(--bg-color-active);
-  --navbar-item-border-radius: var(--border-radius);
+  --navbar-item-border-radius: var(--border-radius-lg);
   --navbar-item-bottom-border: none;
 
   --navbar-item-text-color-hover: var(--text-color-primary);

package/lib/components/PageActions/PageActions.js

@@ -51,9 +51,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const PageActionsMenuItem_1 = require("../../components/PageActions/PageActionsMenuItem");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const Link_1 = require("../../components/Link/Link");
-const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
 const Button_1 = require("../../components/Button/Button");
-const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const SplitButton_1 = require("../../components/SplitButton/SplitButton");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const Spinner_1 = require("../../icons/Spinner/Spinner");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
@@ -61,6 +60,8 @@ const hooks_1 = require("../../core/hooks");
 const ACTION_DONE_DISPLAY_DURATION = 1000;
 function PageActions(props) {
     const { pageSlug, mcpUrl } = props;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const actions = (0, hooks_1.usePageActions)(pageSlug || '/', mcpUrl, props.actions);
     const [actionState, setActionState] = (0, react_1.useState)('idle');
     if (!actions.length) {
@@ -86,10 +87,7 @@ function PageActions(props) {
         return (react_1.default.createElement(StyledDropdownMenuItem, { key: key, onAction: () => handleActionClick(action) }, content));
     });
     return (react_1.default.createElement(PageActionsWrapper, { "data-component-name": "PageActions/PageActions" },
-        react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: "outlined", size: "medium" },
-            react_1.default.createElement(Button_1.Button, { icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText),
-            actions.length > 1 ? (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, portalled: true, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": "More actions" }), placement: "bottom", alignment: "end" },
-                react_1.default.createElement(StyledDropdownMenu, null, menuItems))) : null)));
+        react_1.default.createElement(SplitButton_1.SplitButton, { portalled: true, variant: "outlined", size: "medium", toggleAriaLabel: translate('page.actions.moreActions', 'More actions'), button: react_1.default.createElement(Button_1.Button, { variant: "outlined", icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText) }, actions.length > 1 ? react_1.default.createElement(StyledDropdownMenu, null, menuItems) : null)));
 }
 function renderIcon(buttonAction, actionState) {
     switch (actionState) {

package/lib/components/PageActions/PageActionsMenuItem.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import type { JSX } from 'react';
 import type { PageAction } from '../../core/types';
-type PageActionsMenuItemProps = {
+export type PageActionsMenuItemProps = {
     pageAction: PageAction;
+    className?: string;
 };
-export declare function PageActionsMenuItem(props: PageActionsMenuItemProps): React.JSX.Element;
-export {};
+export declare function PageActionsMenuItem(props: PageActionsMenuItemProps): JSX.Element;