@elice/material-quiz 1.240718.0-trasncript.1 → 1.240718.0-trasncript.2

package/es/components/shared/QuestionBox.js

@@ -1,4 +1,6 @@
+import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useEffect } from 'react';
 import { useIntersection } from 'react-use';
 import { Button, Flex, Text, Box } from '@elice/blocks';
@@ -11,206 +13,231 @@ import { MATERIAL_QUIZ_ANSWER_ID, MATERIAL_QUIZ_PASSIVE_ID } from '../../constan
 import { useMaterialQuizState } from '../material-quiz/context/MaterialQuizContext.js';
 import { mergeRefs } from './utils/mergeRefs.js';
 
-const easeInOutCubic = t => {
+var easeInOutCubic = function easeInOutCubic(t) {
   return t < 0.5 ? 4 * Math.pow(t, 3) : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
 };
-const StyledQuestionBox = styled.div.withConfig({
+var StyledQuestionBox = styled.div.withConfig({
   componentId: "sc-6qfyxj-0"
-})(["position:relative;display:flex;flex-direction:column;overflow:", ";border-radius:", ";width:100%;background-color:", ";", ";"], ({
-  vertical
-}) => vertical ? 'auto' : 'hidden', ({
-  vertical
-}) => vertical ? '0' : '8px', base.color.navy8, ({
-  vertical
-}) => vertical ? 'height: 100%' : `
-      max-height: 100%;
-      min-height: 100%;
-  `);
-const StyledQuestionBoxHeader = styled.div.withConfig({
+})(["position:relative;display:flex;flex-direction:column;overflow:", ";border-radius:", ";width:100%;background-color:", ";", ";"], function (_ref) {
+  var vertical = _ref.vertical;
+  return vertical ? 'auto' : 'hidden';
+}, function (_ref2) {
+  var vertical = _ref2.vertical;
+  return vertical ? '0' : '8px';
+}, base.color.navy8, function (_ref3) {
+  var vertical = _ref3.vertical;
+  return vertical ? 'height: 100%' : "\n      max-height: 100%;\n      min-height: 100%;\n  ";
+});
+var StyledQuestionBoxHeader = styled.div.withConfig({
   componentId: "sc-6qfyxj-1"
-})(["display:flex;justify-content:space-between;background-color:", ";padding:", ";flex:none;", ""], base.color.navy8, ({
-  vertical
-}) => !vertical ? '1.5rem' : '1.5rem 1rem 1rem', ({
-  vertical
-}) => vertical ? `
-        position: sticky;
-        top: -1px;
-        left: 0;
-        z-index: 1;
-      ` : '');
-const StyledQuestionBoxBody = styled.div.withConfig({
+})(["display:flex;justify-content:space-between;background-color:", ";padding:", ";flex:none;", ""], base.color.navy8, function (_ref4) {
+  var vertical = _ref4.vertical;
+  return !vertical ? '1.5rem' : '1.5rem 1rem 1rem';
+}, function (_ref5) {
+  var vertical = _ref5.vertical;
+  return vertical ? "\n        position: sticky;\n        top: -1px;\n        left: 0;\n        z-index: 1;\n      " : '';
+});
+var StyledQuestionBoxBody = styled.div.withConfig({
   componentId: "sc-6qfyxj-2"
-})(["background-color:", ";flex:auto;", ";"], base.color.navy8, ({
-  hasFooter,
-  vertical
-}) => hasFooter && !vertical ? 'height: 100%; padding: 0 1.5rem 1.5rem; overflow-y: auto;' : 'padding: 0.25rem 1.5rem 1.5rem');
-const StyledAnchorBox = styled.div.withConfig({
+})(["background-color:", ";flex:auto;", ";"], base.color.navy8, function (_ref6) {
+  var hasFooter = _ref6.hasFooter,
+    vertical = _ref6.vertical;
+  return hasFooter && !vertical ? 'height: 100%; padding: 0 1.5rem 1.5rem; overflow-y: auto;' : 'padding: 0.25rem 1.5rem 1.5rem';
+});
+var StyledAnchorBox = styled.div.withConfig({
   componentId: "sc-6qfyxj-3"
 })(["position:sticky;bottom:0;left:0;display:flex;justify-content:center;background-color:", ";border-top:1px solid ", ";"], base.color.navy8, base.color.gray7);
-const StyledQuestionBoxFooter = styled.div.withConfig({
+var StyledQuestionBoxFooter = styled.div.withConfig({
   componentId: "sc-6qfyxj-4"
-})(["flex:none;display:flex;align-items:center;padding:1rem;background-color:", ";", ""], base.color.navy8, ({
-  vertical
-}) => {
-  return vertical ? `
-          flex-direction: column;
-          align-items: flex-start;
-        ` : `
-          border-top: 1px solid ${base.color.gray7};
-          justify-content: end; 
-          gap: 0.75rem;
-        `;
+})(["flex:none;display:flex;align-items:center;padding:1rem;background-color:", ";", ""], base.color.navy8, function (_ref7) {
+  var vertical = _ref7.vertical;
+  return vertical ? "\n          flex-direction: column;\n          align-items: flex-start;\n        " : "\n          border-top: 1px solid ".concat(base.color.gray7, ";\n          justify-content: end; \n          gap: 0.75rem;\n        ");
 });
-const StyledQuestionBoxFooterActions = styled.div.withConfig({
+var StyledQuestionBoxFooterActions = styled.div.withConfig({
   componentId: "sc-6qfyxj-5"
-})(["display:flex;gap:0.75rem;", ";"], ({
-  vertical
-}) => {
+})(["display:flex;gap:0.75rem;", ";"], function (_ref8) {
+  var vertical = _ref8.vertical;
   return vertical ? 'width: 100%' : '';
 });
-const StyledPrimaryButton = styled(Button).withConfig({
+var StyledPrimaryButton = styled(Button).withConfig({
   componentId: "sc-6qfyxj-6"
 })(["background-color:", ";border-color:", ";"], base.color.primary6, base.color.primary6);
-const QuestionBox = _a => {
-  var {
-      children,
-      footerActions = [],
-      title,
-      titlePrefix,
-      submitResult,
-      submitStatus,
-      onNext,
-      isNextActive,
-      bodyContainerRef
-    } = _a,
+var QuestionBox = function QuestionBox(_a) {
+  var children = _a.children,
+    _a$footerActions = _a.footerActions,
+    footerActions = _a$footerActions === void 0 ? [] : _a$footerActions,
+    title = _a.title,
+    titlePrefix = _a.titlePrefix,
+    submitResult = _a.submitResult;
+    _a.submitStatus;
+    var onNext = _a.onNext,
+    isNextActive = _a.isNextActive,
+    bodyContainerRef = _a.bodyContainerRef,
     props = __rest(_a, ["children", "footerActions", "title", "titlePrefix", "submitResult", "submitStatus", "onNext", "isNextActive", "bodyContainerRef"]);
-  const theme = useTheme();
-  const intl = useRawEliceIntl();
-  const {
-    vertical,
-    isLongPassage
-  } = useMaterialQuizState();
-  const intersectionRef = React.useRef(null);
-  const headerRef = React.useRef(null);
-  const bodyRef = React.useRef(null);
-  const currentBodyRef = mergeRefs(bodyContainerRef, bodyRef);
-  const hasFooter = footerActions.length > 0;
-  const visibleAnchorSection = vertical && isLongPassage;
-  const intersection = useIntersection(intersectionRef, {
+  var theme = useTheme();
+  var intl = useRawEliceIntl();
+  var _useMaterialQuizState = useMaterialQuizState(),
+    vertical = _useMaterialQuizState.vertical,
+    isLongPassage = _useMaterialQuizState.isLongPassage;
+  var intersectionRef = React.useRef(null);
+  var headerRef = React.useRef(null);
+  var bodyRef = React.useRef(null);
+  var currentBodyRef = mergeRefs(bodyContainerRef, bodyRef);
+  var hasFooter = footerActions.length > 0;
+  var visibleAnchorSection = vertical && isLongPassage;
+  var intersection = useIntersection(intersectionRef, {
     root: null,
     rootMargin: '0px',
     threshold: 0.1
   });
-  const isViewingAnswerContainer = Boolean(intersection === null || intersection === void 0 ? void 0 : intersection.isIntersecting);
-  useEffect(() => {
-    const answerContainer = document.getElementById(MATERIAL_QUIZ_ANSWER_ID);
+  var isViewingAnswerContainer = Boolean(intersection === null || intersection === void 0 ? void 0 : intersection.isIntersecting);
+  useEffect(function () {
+    var answerContainer = document.getElementById(MATERIAL_QUIZ_ANSWER_ID);
     // only enable for vertical mode
     if (answerContainer && vertical) intersectionRef.current = answerContainer;
   }, [intersectionRef, vertical]);
-  const scrollToElement = async elementId => {
-    var _a, _b;
-    const target = document.getElementById(elementId);
-    if (target && bodyRef.current) {
-      await animateScrollTo(target.offsetTop, {
-        elementToScroll: bodyRef.current,
-        verticalOffset: -((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0),
-        easing: easeInOutCubic,
-        minDuration: 50,
-        speed: 200
-      });
-    }
-  };
-  const header = title ? React.createElement(StyledQuestionBoxHeader, {
+  var scrollToElement = /*#__PURE__*/function () {
+    var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(elementId) {
+      var _a, _b, target;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            target = document.getElementById(elementId);
+            if (!(target && bodyRef.current)) {
+              _context.next = 4;
+              break;
+            }
+            _context.next = 4;
+            return animateScrollTo(target.offsetTop, {
+              elementToScroll: bodyRef.current,
+              verticalOffset: -((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0),
+              easing: easeInOutCubic,
+              minDuration: 50,
+              speed: 200
+            });
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function scrollToElement(_x) {
+      return _ref9.apply(this, arguments);
+    };
+  }();
+  var header = title ? jsxs(StyledQuestionBoxHeader, {
     vertical: vertical,
-    ref: headerRef
-  }, React.createElement(Flex, null, titlePrefix ? React.createElement(Text, {
-    bold: true,
-    size: "large",
-    customStyles: {
-      color: base.color.primary3,
-      marginRight: '0.5rem'
-    }
-  }, titlePrefix) : null, React.createElement(Text, {
-    bold: true,
-    role: "navy0",
-    size: "large",
-    wordBreak: "break-word"
-  }, title)), submitResult ? React.createElement(Box, null, submitResult) : null) : null;
-  const body = React.createElement(StyledQuestionBoxBody, {
+    ref: headerRef,
+    children: [jsxs(Flex, {
+      children: [titlePrefix ? jsx(Text, {
+        bold: true,
+        size: "large",
+        customStyles: {
+          color: base.color.primary3,
+          marginRight: '0.5rem'
+        },
+        children: titlePrefix
+      }) : null, jsx(Text, {
+        bold: true,
+        role: "navy0",
+        size: "large",
+        wordBreak: "break-word",
+        children: title
+      })]
+    }), submitResult ? jsx(Box, {
+      children: submitResult
+    }) : null]
+  }) : null;
+  var body = jsx(StyledQuestionBoxBody, {
     ref: !vertical ? currentBodyRef : undefined,
     hasFooter: hasFooter,
-    vertical: vertical
-  }, children);
-  const footer = React.createElement(StyledQuestionBoxFooter, {
-    vertical: vertical
-  }, React.createElement(StyledQuestionBoxFooterActions, {
-    vertical: vertical
-  }, footerActions.map((action, index) => {
-    const Component = action.role === 'lightpurple' ? StyledPrimaryButton : Button;
-    return React.createElement(Component, Object.assign({
-      isFluid: vertical,
-      key: index,
-      size: "small"
-    }, action), action.children);
-  }), isNextActive ? React.createElement(StyledPrimaryButton, {
-    isFluid: vertical,
-    size: "small",
-    border: false,
-    tabIndex: 0,
-    transparent: false,
-    onClick: onNext,
-    customStyles: {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText
-    }
-  }, intl.formatMessage({
-    id: 'materialQuiz.next'
-  })) : null));
-  const _renderAnchorSection = () => {
-    const getCustomStyles = active => ({
-      borderBottom: '3px solid currentColor',
-      background: 'none',
-      borderColor: active ? 'currentColor' : 'transparent',
-      color: active ? theme.palette.primary.main : theme.palette.secondary.light
+    vertical: vertical,
+    children: children
+  });
+  var footer = jsx(StyledQuestionBoxFooter, {
+    vertical: vertical,
+    children: jsxs(StyledQuestionBoxFooterActions, {
+      vertical: vertical,
+      children: [footerActions.map(function (action, index) {
+        var Component = action.role === 'lightpurple' ? StyledPrimaryButton : Button;
+        return jsx(Component, Object.assign({
+          isFluid: vertical,
+          size: "small"
+        }, action, {
+          children: action.children
+        }), index);
+      }), isNextActive ? jsx(StyledPrimaryButton, {
+        isFluid: vertical,
+        size: "small",
+        border: false,
+        tabIndex: 0,
+        transparent: false,
+        onClick: onNext,
+        customStyles: {
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.primary.contrastText
+        },
+        children: intl.formatMessage({
+          id: 'materialQuiz.next'
+        })
+      }) : null]
+    })
+  });
+  var _renderAnchorSection = function _renderAnchorSection() {
+    var getCustomStyles = function getCustomStyles(active) {
+      return {
+        borderBottom: '3px solid currentColor',
+        background: 'none',
+        borderColor: active ? 'currentColor' : 'transparent',
+        color: active ? theme.palette.primary.main : theme.palette.secondary.light
+      };
+    };
+    return visibleAnchorSection && jsxs(StyledAnchorBox, {
+      children: [jsx(Button, {
+        size: "small",
+        border: false,
+        hasBorderRadius: false,
+        tabIndex: 0,
+        transparent: true,
+        onClick: scrollToElement.bind(null, MATERIAL_QUIZ_PASSIVE_ID),
+        customStyles: getCustomStyles(!isViewingAnswerContainer),
+        children: intl.formatMessage({
+          id: 'materialQuiz.anchorLabel.question'
+        })
+      }), jsx(Button, {
+        size: "small",
+        border: false,
+        hasBorderRadius: false,
+        tabIndex: 0,
+        transparent: true,
+        onClick: scrollToElement.bind(null, MATERIAL_QUIZ_ANSWER_ID),
+        customStyles: getCustomStyles(isViewingAnswerContainer),
+        children: intl.formatMessage({
+          id: 'materialQuiz.anchorLabel.answer'
+        })
+      })]
     });
-    return visibleAnchorSection && React.createElement(StyledAnchorBox, null, React.createElement(Button, {
-      size: "small",
-      border: false,
-      hasBorderRadius: false,
-      tabIndex: 0,
-      transparent: true,
-      onClick: scrollToElement.bind(null, MATERIAL_QUIZ_PASSIVE_ID),
-      customStyles: getCustomStyles(!isViewingAnswerContainer)
-    }, intl.formatMessage({
-      id: 'materialQuiz.anchorLabel.question'
-    })), React.createElement(Button, {
-      size: "small",
-      border: false,
-      hasBorderRadius: false,
-      tabIndex: 0,
-      transparent: true,
-      onClick: scrollToElement.bind(null, MATERIAL_QUIZ_ANSWER_ID),
-      customStyles: getCustomStyles(isViewingAnswerContainer)
-    }, intl.formatMessage({
-      id: 'materialQuiz.anchorLabel.answer'
-    })));
   };
-  const renderContent = () => {
-    const content = React.createElement(React.Fragment, null, body, footerActions.length > 0 ? footer : null);
+  var renderContent = function renderContent() {
+    var content = jsxs(Fragment, {
+      children: [body, footerActions.length > 0 ? footer : null]
+    });
     if (vertical) {
-      return React.createElement("div", {
+      return jsx("div", {
         ref: currentBodyRef,
         style: {
           height: '100%',
           overflow: 'auto'
-        }
-      }, content);
+        },
+        children: content
+      });
     }
     return content;
   };
-  return React.createElement(StyledQuestionBox, Object.assign({}, props, {
-    vertical: vertical
-  }), header, renderContent(), _renderAnchorSection());
+  return jsxs(StyledQuestionBox, Object.assign({}, props, {
+    vertical: vertical,
+    children: [header, renderContent(), _renderAnchorSection()]
+  }));
 };
 
 export { StyledQuestionBox, QuestionBox as default };

package/es/components/shared/QuizDraggbleDroppedOption.js

@@ -1,17 +1,16 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import QuizDraggbleOption from './QuizDraggbleOption.js';
 
-const QuizDraggbleDroppedOption = ({
-  id,
-  content,
-  disabled = false,
-  role,
-  indexOrder,
-  isMarkdown
-}) => {
-  return React.createElement(QuizDraggbleOption, {
+var QuizDraggbleDroppedOption = function QuizDraggbleDroppedOption(_ref) {
+  var id = _ref.id,
+    content = _ref.content,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    role = _ref.role,
+    indexOrder = _ref.indexOrder,
+    isMarkdown = _ref.isMarkdown;
+  return jsx(QuizDraggbleOption, {
     id: id,
-    key: id,
     content: content,
     className: "quiz-answer",
     disabled: disabled,
@@ -19,7 +18,7 @@ const QuizDraggbleDroppedOption = ({
     indexOrder: indexOrder,
     clone: true,
     isMarkdown: isMarkdown
-  });
+  }, id);
 };
 
 export { QuizDraggbleDroppedOption as default };

package/es/components/shared/QuizDraggbleDummyOption.js

@@ -1,28 +1,31 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import EbDroppable from '../eb-sortable/EbDroppable.js';
 
-const StyledQuizDraggbleDummyOption = styled(EbDroppable).withConfig({
+var StyledQuizDraggbleDummyOption = styled(EbDroppable).withConfig({
   componentId: "sc-1ayp8c1-0"
 })(["display:flex;justify-content:space-between;align-items:center;border:1px dashed ", ";border-radius:8px;overflow:hidden;background-color:", ";padding:0.875rem 1rem;color:", ";font-size:0.875rem;&:not(:last-of-type){margin-bottom:1rem;}&.ui-droppable-hover{outline:1px dashed ", ";}"], base.color.navy4, base.color.navy5, base.color.navy0, base.color.navy0);
-const StyledOrder = styled.div.withConfig({
+var StyledOrder = styled.div.withConfig({
   componentId: "sc-1ayp8c1-1"
 })(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], base.color.navy0, base.color.navy4);
-const QuizDraggbleDummyOption = ({
-  children,
-  indexOrder,
-  onDrop
-}) => {
-  return React.createElement(StyledQuizDraggbleDummyOption, {
-    onDrop: onDrop
-  }, React.createElement(Text, {
-    wordBreak: "break-all",
-    customStyles: {
-      color: base.color.navy0
-    }
-  }, children !== null && children !== void 0 ? children : 'drag here...'), React.createElement(StyledOrder, null, indexOrder));
+var QuizDraggbleDummyOption = function QuizDraggbleDummyOption(_ref) {
+  var children = _ref.children,
+    indexOrder = _ref.indexOrder,
+    onDrop = _ref.onDrop;
+  return jsxs(StyledQuizDraggbleDummyOption, {
+    onDrop: onDrop,
+    children: [jsx(Text, {
+      wordBreak: "break-all",
+      customStyles: {
+        color: base.color.navy0
+      },
+      children: children !== null && children !== void 0 ? children : 'drag here...'
+    }), jsx(StyledOrder, {
+      children: indexOrder
+    })]
+  });
 };
 
 export { QuizDraggbleDummyOption as default };