@redocly/theme 0.69.0-next.1 → 0.69.0-next.11

package/lib/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath.js

@@ -34,7 +34,7 @@ const PathLabel = styled_components_1.default.label `
 const LinksWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
   margin: 0 0 var(--spacing-base) 0;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.js

@@ -48,9 +48,11 @@ function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelation
     const { useCatalogSort, useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
     const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
     const [filter, setFilter] = (0, react_1.useState)(ENTITY_DEFAULT_FILTERS[entity.type]);
-    (0, react_1.useEffect)(() => {
-        setFilter(ENTITY_DEFAULT_FILTERS[entity.key]);
-    }, [entity.key]);
+    const [prevEntityKey, setPrevEntityKey] = (0, react_1.useState)(entity.key);
+    if (prevEntityKey !== entity.key) {
+        setPrevEntityKey(entity.key);
+        setFilter(ENTITY_DEFAULT_FILTERS[entity.type]);
+    }
     const combinedFilter = (0, react_1.useMemo)(() => {
         const baseFilter = filter !== null && filter !== void 0 ? filter : ENTITY_DEFAULT_FILTERS[entity.type];
         if (entity.version && entity.revision) {

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.js

@@ -68,7 +68,7 @@ function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider
 const MetadataWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--catalog-metadata-bg-color);
   margin-bottom: var(--spacing-lg);
 `;

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

@@ -116,6 +116,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/Catalog/CatalogViewModeToggle.d.ts

@@ -4,4 +4,4 @@ export type CatalogViewModeToggleProps = {
     viewMode: CatalogViewMode;
     onViewModeChange: (mode: CatalogViewMode) => void;
 };
-export declare function CatalogViewModeToggle({ viewMode: initialViewMode, onViewModeChange, }: CatalogViewModeToggleProps): React.JSX.Element;
+export declare function CatalogViewModeToggle({ viewMode, onViewModeChange }: CatalogViewModeToggleProps): React.JSX.Element;

package/lib/components/Catalog/CatalogViewModeToggle.js

@@ -1,55 +1,14 @@
 "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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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.CatalogViewModeToggle = CatalogViewModeToggle;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const TableIcon_1 = require("../../icons/TableIcon/TableIcon");
 const CardsIcon_1 = require("../../icons/CardsIcon/CardsIcon");
-function useViewMode(initialViewMode) {
-    const [viewMode, setViewMode] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        setViewMode(initialViewMode);
-    }, [initialViewMode]);
-    return viewMode;
-}
-function CatalogViewModeToggle({ viewMode: initialViewMode, onViewModeChange, }) {
-    const viewMode = useViewMode(initialViewMode);
+function CatalogViewModeToggle({ viewMode, onViewModeChange }) {
     return (react_1.default.createElement(ViewModeToggleWrapper, { "data-component-name": "Catalog/CatalogViewModeToggle" },
         react_1.default.createElement(ViewModeButton, { className: viewMode === 'table' ? 'active' : '', onClick: () => onViewModeChange('table') },
             react_1.default.createElement(TableIcon_1.TableIcon, { size: "var(--catalog-view-mode-table-icon-size)" })),

package/lib/components/Catalog/variables.js

@@ -192,7 +192,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-sort-trigger-gap: var(--spacing-xs);
   --catalog-sort-trigger-padding: 6px 8px;
-  --catalog-sort-trigger-border-radius: var(--border-radius-md);
+  --catalog-sort-trigger-border-radius: var(--border-radius-lg);
   --catalog-sort-trigger-hover-bg-color: var(--button-bg-color-secondary-hover);
   --catalog-sort-icon-color: var(--text-color-secondary);
   --catalog-sort-text-font-size: var(--font-size-sm);
@@ -222,7 +222,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-border-width: var(--border-width);
   --catalog-card-border-style: var(--border-style);
   --catalog-card-border-color-hover: var(--border-color-primary);
-  --catalog-card-border-radius: var(--border-radius-lg);
+  --catalog-card-border-radius: var(--border-radius-xl);
   --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
   --catalog-cards-group-gap: var(--spacing-lg);
 
@@ -231,7 +231,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-card-icon-width: 30px;
   --catalog-card-icon-height: 30px;
-  --catalog-card-icon-border-radius: 4px;
+  --catalog-card-icon-border-radius: var(--border-radius);
   --catalog-card-icon-bg-color: var(--bg-color);
   --catalog-card-icon-border-color: var(--border-color-secondary);
   --catalog-card-icon-border-width: 1px;
@@ -309,7 +309,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-actions-min-height: 40px;
   --catalog-actions-bg-color: var(--bg-color-tonal);
 
-  --catalog-page-badge-border-radius: var(--border-radius);
+  --catalog-page-badge-border-radius: var(--badge-border-radius);
   --catalog-page-badge-padding: 0 var(--spacing-xs);
   --catalog-page-badge-font-size: var(--font-size-base);
   --catalog-page-badge-line-height: var(--line-height-base);
@@ -345,7 +345,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-table-icon-width: 32px;
   --catalog-table-icon-height: 32px;
-  --catalog-table-icon-border-radius: 4px;
+  --catalog-table-icon-border-radius: var(--border-radius);
   --catalog-table-icon-bg-color: var(--bg-color-tonal);
   --catalog-table-icon-border-color: var(--border-color-secondary);
   --catalog-table-icon-border-width: 1px;

package/lib/components/CatalogClassic/variables.js

@@ -59,7 +59,7 @@ exports.catalogClassic = (0, styled_components_1.css) `
   --catalog-classic-card-border-width: var(--border-width);
   --catalog-classic-card-border-style: var(--border-style);
   --catalog-classic-card-border-color-hover: var(--border-color-primary);
-  --catalog-classic-card-border-radius: var(--border-radius-xxl);
+  --catalog-classic-card-border-radius: var(--border-radius-xl);
   --catalog-classic-cards-group-margin: 0 0 var(--spacing-base) 0;
   --catalog-classic-cards-group-gap: var(--spacing-xl);
 
@@ -96,7 +96,7 @@ exports.catalogClassic = (0, styled_components_1.css) `
   --catalog-classic-actions-min-height: 40px;
   --catalog-classic-actions-bg-color: var(--bg-color-tonal);
 
-  --catalog-classic-page-badge-border-radius: var(--border-radius);
+  --catalog-classic-page-badge-border-radius: var(--border-radius-md);
   --catalog-classic-page-badge-padding: 0 var(--spacing-xs);
   --catalog-classic-page-badge-font-size: var(--font-size-base);
   --catalog-classic-page-badge-line-height: var(--line-height-base);

package/lib/components/CodeBlock/CodeBlock.js

@@ -98,6 +98,7 @@ function CodeBlock(_a) {
         var _a, _b;
         const _source = source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource));
         if (_source) {
+            // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
             setSourceCode(_source);
         }
     }, [source, externalSource]);
@@ -128,7 +129,7 @@ const ContainerWrapper = styled_components_1.default.div `
 `;
 const CodeBlockWrapper = styled_components_1.default.div `
   border: 1px solid var(--border-color-secondary);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--code-block-bg-color);
   margin: 0 0 var(--spacing-sm);
 

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -68,6 +68,7 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
     white-space: ${({ $wrapContents }) => ($wrapContents ? 'pre-wrap' : 'var(--code-wrap, pre)')};
     max-height: ${({ $maxHeight }) => $maxHeight ? $maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);
+    border-radius: var(--border-radius-xl);
 
     pre,
     code {

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

@@ -1,7 +1,12 @@
 import React from 'react';
-import type { PropsWithChildren } from 'react';
-export type DropdownProps = PropsWithChildren<{
+import type { RenderableChildren } from '../../core/types';
+type DropdownMenuContext = {
+    close: () => void;
+    isOpen: boolean;
+};
+export type DropdownProps = {
     trigger: React.ReactNode;
+    children: RenderableChildren<DropdownMenuContext>;
     triggerEvent?: 'click' | 'hover';
     placement?: 'top' | 'bottom';
     alignment?: 'start' | 'end';
@@ -14,21 +19,6 @@ export type DropdownProps = PropsWithChildren<{
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
     onOpen?: () => void;
-}>;
-export declare const Dropdown: React.ForwardRefExoticComponent<{
-    trigger: React.ReactNode;
-    triggerEvent?: 'click' | 'hover';
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
-    active?: boolean;
-    closeOnClick?: boolean;
-    dataAttributes?: Record<string, string>;
-    className?: string;
-    withArrow?: boolean;
-    portalled?: boolean;
-    onClick?: (event: React.UIEvent) => void;
-    onClose?: () => void;
-    onOpen?: () => void;
-} & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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 ||