@myinterview/widget-react 1.0.52-experimental-6 → 1.0.52-experimental-7

package/dist/cjs/index.js

@@ -32496,6 +32496,7 @@ const displayedItemsNumber = isMobile ? 1 : 3;
 const CHANGE_SLIDE_COOLDOWN = 30;
 const SLIDE_RATIO = 0.25;
 const SLIDE_EDGE_TRANSFORM_RATIO = 0.25;
+const TRANSITION_DURATION = '300ms';
 const TITLE_TEXT_OPTIONS = {
     ONLY_ONE_TAKE: 'Click Submit to move to the next question',
     LAST_TAKE: 'Select your video to submit',
@@ -32556,8 +32557,8 @@ const PreviewList = ({ previewRef, onNextQuestion, onNextRetake, onQuestionMode,
             const indexOffset = Math.max(previewIndex.current - displayedItemsNumber, previewIndex.current);
             transformX.current = (-width / displayedItemsNumber) * indexOffset;
             itemsWrapperRef.current.style.setProperty('--myinterview-widget-preview-transform-x', '0px');
-            itemsWrapperRef.current.style.setProperty('--myinterview-widget-preview-item-transition', '300ms');
-            itemsWrapperRef.current.style.transitionDuration = '300ms';
+            itemsWrapperRef.current.style.setProperty('--myinterview-widget-preview-item-transition', TRANSITION_DURATION);
+            itemsWrapperRef.current.style.transitionDuration = TRANSITION_DURATION;
             updateWrapperPosition();
         }
     };
@@ -32620,13 +32621,16 @@ const PreviewList = ({ previewRef, onNextQuestion, onNextRetake, onQuestionMode,
         if (itemsWrapperRef.current) {
             itemsWrapperRef.current.style.setProperty('--myinterview-widget-item-width', `calc(100% / ${displayedItemsNumber})`);
         }
-        setTimeout(adjustWrapperPosition, 500);
         return () => {
             var _a, _b;
             (_a = myinterviewRef === null || myinterviewRef === void 0 ? void 0 : myinterviewRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--myitnerview-widget-background-height', 'calc(40vh - 100px)');
             (_b = myinterviewRef === null || myinterviewRef === void 0 ? void 0 : myinterviewRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('--myinterview-widget-background-preview-display', 'none');
         };
     }, []);
+    const handleItemsWrapperRef = React.useCallback((node) => {
+        itemsWrapperRef.current = node;
+        adjustWrapperPosition();
+    }, []);
     React.useEffect(() => {
         setPreviewModeIndex(null);
     }, [previewVideoIndex]);
@@ -32679,7 +32683,7 @@ const PreviewList = ({ previewRef, onNextQuestion, onNextRetake, onQuestionMode,
             previewVideoIndex > 0 && (React__default["default"].createElement("div", { className: "myinterview-widget-preview__arrow myinterview-widget-preview__arrow--prev" },
                 React__default["default"].createElement("div", { className: "myinterview-widget-preview__arrow-icon-wrapper", onClick: () => onUpdatePreviewIndex(previewVideoIndex - 1), role: "presentation" },
                     React__default["default"].createElement(Be, null)))),
-            React__default["default"].createElement("div", { role: "presentation", ref: itemsWrapperRef, className: itemsWrapperClassNames, 
+            React__default["default"].createElement("div", { role: "presentation", ref: handleItemsWrapperRef, className: itemsWrapperClassNames, 
                 // onMouseDown={resetTransition}
                 // onMouseMove={handleMouseMove}
                 // onMouseUp={handleMouseUp}