@constructor-io/constructorio-ui-pia 2.17.0 → 2.18.0

package/lib/cjs/components/CioPia/CioPiaQna.js

@@ -12,6 +12,7 @@ const usePersistedConversation_1 = tslib_1.__importDefault(require("../../hooks/
 const useTracking_1 = tslib_1.__importDefault(require("../../hooks/useTracking"));
 const useViewportTracking_1 = tslib_1.__importDefault(require("../../hooks/useViewportTracking"));
 const useViewportCallbacks_1 = tslib_1.__importDefault(require("../../hooks/useViewportCallbacks"));
+const useReturnFocusToInput_1 = tslib_1.__importDefault(require("../../hooks/useReturnFocusToInput"));
 const ErrorBlock_1 = tslib_1.__importDefault(require("../Error/ErrorBlock"));
 const LoadingSkeleton_1 = tslib_1.__importDefault(require("../LoadingSkeleton/LoadingSkeleton"));
 const translate_1 = require("../../utils/translate");
@@ -64,6 +65,15 @@ function CioPiaQna(props) {
         initialConversationHistory,
         persisted,
     });
+    const { inputRef, returnFocusAfterLoading } = (0, useReturnFocusToInput_1.default)(isLoading);
+    const handleInlineSubmit = (0, react_1.useCallback)((question) => {
+        handleSubmitQuestion(question);
+        returnFocusAfterLoading();
+    }, [handleSubmitQuestion, returnFocusAfterLoading]);
+    const handleInlineQuestionClick = (0, react_1.useCallback)((question) => {
+        handleQuestionClick(question);
+        returnFocusAfterLoading();
+    }, [handleQuestionClick, returnFocusAfterLoading]);
     const { containerRef: viewportContainerRef } = (0, useViewportTracking_1.default)({
         tracking,
         questions: displayedQuestions,
@@ -127,12 +137,12 @@ function CioPiaQna(props) {
     return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
         react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: renderProps, override: children || (componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode) },
             react_1.default.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, (0, translate_1.translate)('Any questions about this product?', translations)),
-            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }),
+            react_1.default.createElement(Input_1.default, { onSubmit: handleInlineSubmit, onFocus: handleInputFocus, inputRef: inputRef, disabled: isLoading, value: currentQuestion, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }),
             isAnswerLoading && react_1.default.createElement(LoadingSkeleton_1.default, { componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.loading }),
             !isAnswerLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { key: error.message || (0, translate_1.translate)('Unexpected error', translations), message: error.message, translations: translations })),
             !isAnswerLoading && !error && currentAnswer && (react_1.default.createElement(PiaInlineAnswer_1.default, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, onFeedback: handleFeedback, onResultClick: tracking.trackResultClick, question: currentQuestion, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
             isLoading && react_1.default.createElement(SuggestedQuestionsSkeleton_1.default, null),
-            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
+            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleInlineQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
             checkoutElement),
         react_1.default.createElement(StatusRegion_1.default, { message: answerStatus, "data-testid": 'answer-status' })));
 }

package/lib/cjs/components/CioPiaRecs/RecsPodRefinement.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
 const SuggestedQuestion_1 = tslib_1.__importDefault(require("../SuggestedQuestion/SuggestedQuestion"));
 const icons_1 = require("../icons");
 const RecsOptionsSkeleton_1 = tslib_1.__importDefault(require("./RecsOptionsSkeleton"));
 const recs_1 = require("../../utils/recs");
 const constants_1 = require("../../constants");
+const useReturnFocusToInput_1 = tslib_1.__importDefault(require("../../hooks/useReturnFocusToInput"));
 /**
  * The row under the products: a prompt line, the short options the API suggested, and a box for
  * anything it did not think of. The prompt line is held still while the rest reloads, so the row
@@ -15,11 +16,20 @@ const constants_1 = require("../../constants");
  */
 function RecsPodRefinement({ refinement, isLoading, inputError, showInput, translations, componentOverrides, onRefine, onSubmit, onInputFocus, }) {
     const options = (refinement === null || refinement === void 0 ? void 0 : refinement.options) || [];
+    const { inputRef, returnFocusAfterLoading } = (0, useReturnFocusToInput_1.default)(isLoading);
+    const refine = (0, react_1.useCallback)((text) => {
+        onRefine(text);
+        returnFocusAfterLoading();
+    }, [onRefine, returnFocusAfterLoading]);
+    const submit = (0, react_1.useCallback)((value) => {
+        onSubmit(value);
+        returnFocusAfterLoading();
+    }, [onSubmit, returnFocusAfterLoading]);
     return (react_1.default.createElement("div", { className: 'cio-pia-recs-pod__refinement' },
         react_1.default.createElement("span", { className: 'cio-pia-recs-pod__refinement-label' }, (0, recs_1.resolveRefinementQuestion)(refinement, translations)),
-        isLoading ? (react_1.default.createElement(RecsOptionsSkeleton_1.default, { count: options.length || undefined })) : (options.map((option) => (react_1.default.createElement(SuggestedQuestion_1.default, { key: option, question: option, icon: react_1.default.createElement(icons_1.SparklesIcon, null), onClick: () => onRefine(option) })))),
+        isLoading ? (react_1.default.createElement(RecsOptionsSkeleton_1.default, { count: options.length || undefined })) : (options.map((option) => (react_1.default.createElement(SuggestedQuestion_1.default, { key: option, question: option, icon: react_1.default.createElement(icons_1.SparklesIcon, null), onClick: () => refine(option) })))),
         showInput && (react_1.default.createElement("div", { className: 'cio-pia-recs-pod__input' },
-            react_1.default.createElement(Input_1.default, { onSubmit: onSubmit, onFocus: onInputFocus, disabled: isLoading, error: inputError !== null && inputError !== void 0 ? inputError : undefined, placeholderKey: constants_1.RECS_INPUT_PLACEHOLDER, 
+            react_1.default.createElement(Input_1.default, { onSubmit: submit, onFocus: onInputFocus, inputRef: inputRef, disabled: isLoading, error: inputError !== null && inputError !== void 0 ? inputError : undefined, placeholderKey: constants_1.RECS_INPUT_PLACEHOLDER, 
                 // The pod's box sits in a row beside the options and submits on Enter. Q&A keeps
                 // its button; this one has none in the mocks.
                 showSendButton: false, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input })))));

package/lib/cjs/components/Input/Input.js

@@ -16,7 +16,7 @@ const icons_1 = require("../icons");
  * across its re-renders.
  */
 let inputIdCounter = 0;
-function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, error, placeholderKey = 'Ask anything', showSendButton = true, }) {
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, error, inputRef, placeholderKey = 'Ask anything', showSendButton = true, }) {
     const [value, setValue] = (0, react_1.useState)(providedValue || '');
     const [errorId] = (0, react_1.useState)(() => {
         inputIdCounter += 1;
@@ -53,10 +53,11 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
             onFocus,
             translations,
             error,
+            inputRef,
         }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
         react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: 'cio-pia-input-container' },
-                react_1.default.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, "aria-label": accessibleName, disabled: disabled, className: (0, classNames_1.cx)('cio-pia-input', error && 'cio-pia-input--error', !showSendButton && 'cio-pia-input--no-send'), "aria-invalid": error ? true : undefined, "aria-describedby": error ? errorId : undefined }),
+                react_1.default.createElement("input", { ref: inputRef, type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, "aria-label": accessibleName, disabled: disabled, className: (0, classNames_1.cx)('cio-pia-input', error && 'cio-pia-input--error', !showSendButton && 'cio-pia-input--no-send'), "aria-invalid": error ? true : undefined, "aria-describedby": error ? errorId : undefined }),
                 showSendButton && (react_1.default.createElement("button", { type: 'button', onClick: () => handleSubmit(value), className: 'cio-pia-send-button', disabled: disabled },
                     (0, translate_1.translate)('Send', translations),
                     react_1.default.createElement(icons_1.SendIcon, null)))),

package/lib/cjs/components/PiaConversation/PiaConversation.js

@@ -1,21 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
 const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
 const SuggestedQuestionsSkeleton_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton"));
 const translate_1 = require("../../utils/translate");
+const useReturnFocusToInput_1 = tslib_1.__importDefault(require("../../hooks/useReturnFocusToInput"));
+const PiaModal_1 = require("./PiaModal");
 const ConversationHistory_1 = tslib_1.__importDefault(require("../ConversationHistory/ConversationHistory"));
 function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, priceCurrency, checkoutElement, }) {
     const hasHistory = conversationHistory.length > 0;
+    const { inputRef, returnFocusAfterLoading } = (0, useReturnFocusToInput_1.default)(isLoading);
+    const modalInputRef = (0, react_1.useContext)(PiaModal_1.ModalInputRefContext);
+    const attachInput = (0, react_1.useCallback)((node) => {
+        inputRef(node);
+        modalInputRef === null || modalInputRef === void 0 ? void 0 : modalInputRef(node);
+    }, [inputRef, modalInputRef]);
+    const submitQuestion = (0, react_1.useCallback)((question) => {
+        handleSubmitQuestion(question);
+        returnFocusAfterLoading();
+    }, [handleSubmitQuestion, returnFocusAfterLoading]);
+    const clickQuestion = (0, react_1.useCallback)((question) => {
+        handleQuestionClick(question);
+        returnFocusAfterLoading();
+    }, [handleQuestionClick, returnFocusAfterLoading]);
     return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
         !hasHistory && (react_1.default.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, (0, translate_1.translate)('Any questions about this product?', translations))),
         react_1.default.createElement(ConversationHistory_1.default, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, showPreviousItems: showPreviousItems, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, handleFeedback: handleFeedback, onResultClick: onResultClick, qnaResultId: qnaResultId, priceCurrency: priceCurrency }),
         checkoutElement && react_1.default.createElement("div", { className: 'cio-pia-conversation-checkout' }, checkoutElement),
         react_1.default.createElement("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && react_1.default.createElement(SuggestedQuestionsSkeleton_1.default, null),
-            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
-            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }))));
+            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: clickQuestion, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
+            react_1.default.createElement(Input_1.default, { onSubmit: submitQuestion, onFocus: onInputFocus, inputRef: attachInput, disabled: isLoading, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }))));
 }
 exports.default = PiaConversation;

package/lib/cjs/components/PiaConversation/PiaModal.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalInputRefContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
 const translate_1 = require("../../utils/translate");
 const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
 const OVERFLOW_HIDDEN_CLASS = 'cio-pia-modal-open';
+/** Lets the conversation rendered as the modal's children hand it the node of its input. */
+exports.ModalInputRefContext = (0, react_1.createContext)(undefined);
 function CloseIcon() {
     return (react_1.default.createElement("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' },
         react_1.default.createElement("path", { d: 'M15.8334 5.34166L14.6584 4.16666L10.0001 8.82499L5.34175 4.16666L4.16675 5.34166L8.82508 9.99999L4.16675 14.6583L5.34175 15.8333L10.0001 11.175L14.6584 15.8333L15.8334 14.6583L11.1751 9.99999L15.8334 5.34166Z', fill: 'currentColor' })));
@@ -14,6 +17,11 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const dialogRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
+    const initialFocusRef = (0, react_1.useRef)(null);
+    const inputNodeRef = (0, react_1.useRef)(null);
+    const setInputNode = (0, react_1.useCallback)((node) => {
+        inputNodeRef.current = node;
+    }, []);
     const openModal = (0, react_1.useCallback)(() => {
         const active = document.activeElement;
         const isRealTrigger = !!active && active !== document.body && active !== document.documentElement;
@@ -30,6 +38,7 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
             return undefined;
         if (isOpen) {
             dialog.showModal();
+            initialFocusRef.current = document.activeElement;
             document.body.classList.add(OVERFLOW_HIDDEN_CLASS);
         }
         else {
@@ -41,6 +50,19 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
             document.body.classList.remove(OVERFLOW_HIDDEN_CLASS);
         };
     }, [isOpen]);
+    // The input is disabled when the dialog opens, so showModal() parks focus on the first enabled
+    // control. Hand it to the input once the answer has loaded, unless the shopper has moved it.
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!isOpen || isLoading || !initialFocusRef.current)
+            return;
+        const placed = initialFocusRef.current;
+        initialFocusRef.current = null;
+        const active = document.activeElement;
+        if (active !== placed && active !== document.body)
+            return;
+        (_a = inputNodeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [isOpen, isLoading]);
     // Restore focus to the trigger. Re-runs on `isLoading`: the input trigger is
     // disabled while a request is in flight and `focus()` would no-op.
     (0, react_1.useEffect)(() => {
@@ -92,6 +114,7 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
                     react_1.default.createElement("p", { className: 'cio-pia-title', id: 'cio-pia-modal-title' }, (0, translate_1.translate)('Ask about this product', translations)),
                     react_1.default.createElement("button", { type: 'button', className: 'cio-pia-modal-close-button', "aria-label": (0, translate_1.translate)('Close', translations), onClick: closeModal },
                         react_1.default.createElement(CloseIcon, null))),
-                react_1.default.createElement("div", { className: 'cio-pia-modal-body' }, children)))));
+                react_1.default.createElement("div", { className: 'cio-pia-modal-body' },
+                    react_1.default.createElement(exports.ModalInputRefContext.Provider, { value: setInputNode }, children))))));
 }
 exports.default = PiaModal;

package/lib/cjs/hooks/useReturnFocusToInput.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * While an answer loads, the control the shopper used to ask is disabled or swapped for a
+ * skeleton, and the browser drops focus to <body>.
+ */
+function useReturnFocusToInput(isLoading) {
+    const inputNodeRef = (0, react_1.useRef)(null);
+    const pendingRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (isLoading || !pendingRef.current)
+            return;
+        pendingRef.current = false;
+        const active = document.activeElement;
+        const focusWasDropped = !active || active === document.body;
+        if (inputNodeRef.current && focusWasDropped)
+            inputNodeRef.current.focus();
+    }, [isLoading]);
+    const inputRef = (0, react_1.useCallback)((node) => {
+        inputNodeRef.current = node;
+    }, []);
+    const returnFocusAfterLoading = (0, react_1.useCallback)(() => {
+        pendingRef.current = true;
+    }, []);
+    return { inputRef, returnFocusAfterLoading };
+}
+exports.default = useReturnFocusToInput;

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.17.0';
+exports.default = '2.18.0';

package/lib/mjs/components/CioPia/CioPiaQna.js

@@ -9,6 +9,7 @@ import usePersistedConversation from '../../hooks/usePersistedConversation';
 import useTracking from '../../hooks/useTracking';
 import useViewportTracking from '../../hooks/useViewportTracking';
 import useViewportCallbacks from '../../hooks/useViewportCallbacks';
+import useReturnFocusToInput from '../../hooks/useReturnFocusToInput';
 import ErrorBlock from '../Error/ErrorBlock';
 import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
 import { translate } from '../../utils/translate';
@@ -60,6 +61,15 @@ export default function CioPiaQna(props) {
         initialConversationHistory,
         persisted,
     });
+    const { inputRef, returnFocusAfterLoading } = useReturnFocusToInput(isLoading);
+    const handleInlineSubmit = useCallback((question) => {
+        handleSubmitQuestion(question);
+        returnFocusAfterLoading();
+    }, [handleSubmitQuestion, returnFocusAfterLoading]);
+    const handleInlineQuestionClick = useCallback((question) => {
+        handleQuestionClick(question);
+        returnFocusAfterLoading();
+    }, [handleQuestionClick, returnFocusAfterLoading]);
     const { containerRef: viewportContainerRef } = useViewportTracking({
         tracking,
         questions: displayedQuestions,
@@ -123,12 +133,12 @@ export default function CioPiaQna(props) {
     return (React.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
         React.createElement(RenderPropsWrapper, { props: renderProps, override: children || componentOverrides?.reactNode },
             React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
-            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations, componentOverride: componentOverrides?.input }),
+            React.createElement(Input, { onSubmit: handleInlineSubmit, onFocus: handleInputFocus, inputRef: inputRef, disabled: isLoading, value: currentQuestion, translations: translations, componentOverride: componentOverrides?.input }),
             isAnswerLoading && React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }),
             !isAnswerLoading && error && (React.createElement(ErrorBlock, { key: error.message || translate('Unexpected error', translations), message: error.message, translations: translations })),
             !isAnswerLoading && !error && currentAnswer && (React.createElement(PiaInlineAnswer, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, onFeedback: handleFeedback, onResultClick: tracking.trackResultClick, question: currentQuestion, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
             isLoading && React.createElement(SuggestedQuestionsSkeleton, null),
-            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),
+            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleInlineQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),
             checkoutElement),
         React.createElement(StatusRegion, { message: answerStatus, "data-testid": 'answer-status' })));
 }

package/lib/mjs/components/CioPiaRecs/RecsPodRefinement.js

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import Input from '../Input/Input';
 import SuggestedQuestion from '../SuggestedQuestion/SuggestedQuestion';
 import { SparklesIcon } from '../icons';
 import RecsOptionsSkeleton from './RecsOptionsSkeleton';
 import { resolveRefinementQuestion } from '../../utils/recs';
 import { RECS_INPUT_PLACEHOLDER } from '../../constants';
+import useReturnFocusToInput from '../../hooks/useReturnFocusToInput';
 /**
  * The row under the products: a prompt line, the short options the API suggested, and a box for
  * anything it did not think of. The prompt line is held still while the rest reloads, so the row
@@ -12,11 +13,20 @@ import { RECS_INPUT_PLACEHOLDER } from '../../constants';
  */
 export default function RecsPodRefinement({ refinement, isLoading, inputError, showInput, translations, componentOverrides, onRefine, onSubmit, onInputFocus, }) {
     const options = refinement?.options || [];
+    const { inputRef, returnFocusAfterLoading } = useReturnFocusToInput(isLoading);
+    const refine = useCallback((text) => {
+        onRefine(text);
+        returnFocusAfterLoading();
+    }, [onRefine, returnFocusAfterLoading]);
+    const submit = useCallback((value) => {
+        onSubmit(value);
+        returnFocusAfterLoading();
+    }, [onSubmit, returnFocusAfterLoading]);
     return (React.createElement("div", { className: 'cio-pia-recs-pod__refinement' },
         React.createElement("span", { className: 'cio-pia-recs-pod__refinement-label' }, resolveRefinementQuestion(refinement, translations)),
-        isLoading ? (React.createElement(RecsOptionsSkeleton, { count: options.length || undefined })) : (options.map((option) => (React.createElement(SuggestedQuestion, { key: option, question: option, icon: React.createElement(SparklesIcon, null), onClick: () => onRefine(option) })))),
+        isLoading ? (React.createElement(RecsOptionsSkeleton, { count: options.length || undefined })) : (options.map((option) => (React.createElement(SuggestedQuestion, { key: option, question: option, icon: React.createElement(SparklesIcon, null), onClick: () => refine(option) })))),
         showInput && (React.createElement("div", { className: 'cio-pia-recs-pod__input' },
-            React.createElement(Input, { onSubmit: onSubmit, onFocus: onInputFocus, disabled: isLoading, error: inputError ?? undefined, placeholderKey: RECS_INPUT_PLACEHOLDER, 
+            React.createElement(Input, { onSubmit: submit, onFocus: onInputFocus, inputRef: inputRef, disabled: isLoading, error: inputError ?? undefined, placeholderKey: RECS_INPUT_PLACEHOLDER, 
                 // The pod's box sits in a row beside the options and submits on Enter. Q&A keeps
                 // its button; this one has none in the mocks.
                 showSendButton: false, translations: translations, componentOverride: componentOverrides?.input })))));

package/lib/mjs/components/Input/Input.js

@@ -13,7 +13,7 @@ import { SendIcon } from '../icons';
  * across its re-renders.
  */
 let inputIdCounter = 0;
-function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, error, placeholderKey = 'Ask anything', showSendButton = true, }) {
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, error, inputRef, placeholderKey = 'Ask anything', showSendButton = true, }) {
     const [value, setValue] = useState(providedValue || '');
     const [errorId] = useState(() => {
         inputIdCounter += 1;
@@ -50,10 +50,11 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
             onFocus,
             translations,
             error,
+            inputRef,
         }, override: componentOverride?.reactNode },
         React.createElement(React.Fragment, null,
             React.createElement("div", { className: 'cio-pia-input-container' },
-                React.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, "aria-label": accessibleName, disabled: disabled, className: cx('cio-pia-input', error && 'cio-pia-input--error', !showSendButton && 'cio-pia-input--no-send'), "aria-invalid": error ? true : undefined, "aria-describedby": error ? errorId : undefined }),
+                React.createElement("input", { ref: inputRef, type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, "aria-label": accessibleName, disabled: disabled, className: cx('cio-pia-input', error && 'cio-pia-input--error', !showSendButton && 'cio-pia-input--no-send'), "aria-invalid": error ? true : undefined, "aria-describedby": error ? errorId : undefined }),
                 showSendButton && (React.createElement("button", { type: 'button', onClick: () => handleSubmit(value), className: 'cio-pia-send-button', disabled: disabled },
                     translate('Send', translations),
                     React.createElement(SendIcon, null)))),

package/lib/mjs/components/PiaConversation/PiaConversation.js

@@ -1,17 +1,33 @@
-import React from 'react';
+import React, { useCallback, useContext } from 'react';
 import Input from '../Input/Input';
 import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
 import SuggestedQuestionsSkeleton from '../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton';
 import { translate } from '../../utils/translate';
+import useReturnFocusToInput from '../../hooks/useReturnFocusToInput';
+import { ModalInputRefContext } from './PiaModal';
 import ConversationHistory from '../ConversationHistory/ConversationHistory';
 export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, priceCurrency, checkoutElement, }) {
     const hasHistory = conversationHistory.length > 0;
+    const { inputRef, returnFocusAfterLoading } = useReturnFocusToInput(isLoading);
+    const modalInputRef = useContext(ModalInputRefContext);
+    const attachInput = useCallback((node) => {
+        inputRef(node);
+        modalInputRef?.(node);
+    }, [inputRef, modalInputRef]);
+    const submitQuestion = useCallback((question) => {
+        handleSubmitQuestion(question);
+        returnFocusAfterLoading();
+    }, [handleSubmitQuestion, returnFocusAfterLoading]);
+    const clickQuestion = useCallback((question) => {
+        handleQuestionClick(question);
+        returnFocusAfterLoading();
+    }, [handleQuestionClick, returnFocusAfterLoading]);
     return (React.createElement("div", { ref: containerRef, className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
         !hasHistory && (React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations))),
         React.createElement(ConversationHistory, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, showPreviousItems: showPreviousItems, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, handleFeedback: handleFeedback, onResultClick: onResultClick, qnaResultId: qnaResultId, priceCurrency: priceCurrency }),
         checkoutElement && React.createElement("div", { className: 'cio-pia-conversation-checkout' }, checkoutElement),
         React.createElement("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && React.createElement(SuggestedQuestionsSkeleton, null),
-            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),
-            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations, componentOverride: componentOverrides?.input }))));
+            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: clickQuestion, componentOverride: componentOverrides?.suggestedQuestions })),
+            React.createElement(Input, { onSubmit: submitQuestion, onFocus: onInputFocus, inputRef: attachInput, disabled: isLoading, translations: translations, componentOverride: componentOverrides?.input }))));
 }

package/lib/mjs/components/PiaConversation/PiaModal.js

@@ -1,8 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { createContext, useCallback, useEffect, useRef, useState, } from 'react';
 import Input from '../Input/Input';
 import { translate } from '../../utils/translate';
 import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
 const OVERFLOW_HIDDEN_CLASS = 'cio-pia-modal-open';
+/** Lets the conversation rendered as the modal's children hand it the node of its input. */
+export const ModalInputRefContext = createContext(undefined);
 function CloseIcon() {
     return (React.createElement("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' },
         React.createElement("path", { d: 'M15.8334 5.34166L14.6584 4.16666L10.0001 8.82499L5.34175 4.16666L4.16675 5.34166L8.82508 9.99999L4.16675 14.6583L5.34175 15.8333L10.0001 11.175L14.6584 15.8333L15.8334 14.6583L11.1751 9.99999L15.8334 5.34166Z', fill: 'currentColor' })));
@@ -11,6 +13,11 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
     const [isOpen, setIsOpen] = useState(false);
     const dialogRef = useRef(null);
     const triggerRef = useRef(null);
+    const initialFocusRef = useRef(null);
+    const inputNodeRef = useRef(null);
+    const setInputNode = useCallback((node) => {
+        inputNodeRef.current = node;
+    }, []);
     const openModal = useCallback(() => {
         const active = document.activeElement;
         const isRealTrigger = !!active && active !== document.body && active !== document.documentElement;
@@ -27,6 +34,7 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
             return undefined;
         if (isOpen) {
             dialog.showModal();
+            initialFocusRef.current = document.activeElement;
             document.body.classList.add(OVERFLOW_HIDDEN_CLASS);
         }
         else {
@@ -38,6 +46,18 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
             document.body.classList.remove(OVERFLOW_HIDDEN_CLASS);
         };
     }, [isOpen]);
+    // The input is disabled when the dialog opens, so showModal() parks focus on the first enabled
+    // control. Hand it to the input once the answer has loaded, unless the shopper has moved it.
+    useEffect(() => {
+        if (!isOpen || isLoading || !initialFocusRef.current)
+            return;
+        const placed = initialFocusRef.current;
+        initialFocusRef.current = null;
+        const active = document.activeElement;
+        if (active !== placed && active !== document.body)
+            return;
+        inputNodeRef.current?.focus();
+    }, [isOpen, isLoading]);
     // Restore focus to the trigger. Re-runs on `isLoading`: the input trigger is
     // disabled while a request is in flight and `focus()` would no-op.
     useEffect(() => {
@@ -89,5 +109,6 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
                     React.createElement("p", { className: 'cio-pia-title', id: 'cio-pia-modal-title' }, translate('Ask about this product', translations)),
                     React.createElement("button", { type: 'button', className: 'cio-pia-modal-close-button', "aria-label": translate('Close', translations), onClick: closeModal },
                         React.createElement(CloseIcon, null))),
-                React.createElement("div", { className: 'cio-pia-modal-body' }, children)))));
+                React.createElement("div", { className: 'cio-pia-modal-body' },
+                    React.createElement(ModalInputRefContext.Provider, { value: setInputNode }, children))))));
 }

package/lib/mjs/hooks/useReturnFocusToInput.js

@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * While an answer loads, the control the shopper used to ask is disabled or swapped for a
+ * skeleton, and the browser drops focus to <body>.
+ */
+export default function useReturnFocusToInput(isLoading) {
+    const inputNodeRef = useRef(null);
+    const pendingRef = useRef(false);
+    useEffect(() => {
+        if (isLoading || !pendingRef.current)
+            return;
+        pendingRef.current = false;
+        const active = document.activeElement;
+        const focusWasDropped = !active || active === document.body;
+        if (inputNodeRef.current && focusWasDropped)
+            inputNodeRef.current.focus();
+    }, [isLoading]);
+    const inputRef = useCallback((node) => {
+        inputNodeRef.current = node;
+    }, []);
+    const returnFocusAfterLoading = useCallback(() => {
+        pendingRef.current = true;
+    }, []);
+    return { inputRef, returnFocusAfterLoading };
+}

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '2.17.0';
+export default '2.18.0';

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

@@ -11,6 +11,7 @@ interface InputProps {
     translations?: Translations;
     componentOverride?: ComponentOverrideProps<InputRenderProps>;
     error?: string;
+    inputRef?: (node: HTMLElement | null) => void;
     placeholderKey?: string;
     /**
      * Render the Send button after the field.
@@ -19,5 +20,5 @@ interface InputProps {
      */
     showSendButton?: boolean;
 }
-declare function Input({ value: providedValue, placeholder, disabled, onSubmit, onFocus, translations, componentOverride, error, placeholderKey, showSendButton, }: InputProps): React.JSX.Element;
+declare function Input({ value: providedValue, placeholder, disabled, onSubmit, onFocus, translations, componentOverride, error, inputRef, placeholderKey, showSendButton, }: InputProps): React.JSX.Element;
 export default Input;

package/lib/types/components/PiaConversation/PiaModal.d.ts

@@ -1,5 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { Translations, Question, CioPiaComponentOverrides } from '../../types';
+/** Lets the conversation rendered as the modal's children hand it the node of its input. */
+export declare const ModalInputRefContext: React.Context<((node: HTMLElement | null) => void) | undefined>;
 interface PiaModalProps {
     initialQuestions: Question[];
     handleSubmitQuestion: (question: string) => void;

package/lib/types/hooks/useReturnFocusToInput.d.ts

@@ -0,0 +1,9 @@
+export interface UseReturnFocusToInputReturn {
+    inputRef: (node: HTMLElement | null) => void;
+    returnFocusAfterLoading: () => void;
+}
+/**
+ * While an answer loads, the control the shopper used to ask is disabled or swapped for a
+ * skeleton, and the browser drops focus to <body>.
+ */
+export default function useReturnFocusToInput(isLoading: boolean): UseReturnFocusToInputReturn;

package/lib/types/types.d.ts

@@ -291,6 +291,11 @@ export interface InputRenderProps {
     translations?: Translations;
     /** Validation message for the value that was just submitted, when there is one. */
     error?: string;
+    /**
+     * Attach to your text field (`ref={inputRef}`) so focus returns to it after an answer loads.
+     * Without it, keyboard focus is lost while your field is disabled or a suggestion is replaced.
+     */
+    inputRef?: (node: HTMLElement | null) => void;
 }
 /**
  * Component overrides for CioPia.

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.17.0";
+declare const _default: "2.18.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",