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

package/cjs/components/shared/QuestionBox.js

@@ -2,9 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
@@ -17,237 +15,206 @@ var element = require('../../constant/element.js');
 var MaterialQuizContext = require('../material-quiz/context/MaterialQuizContext.js');
 var mergeRefs = require('./utils/mergeRefs.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var animateScrollTo__default = /*#__PURE__*/_interopDefaultCompat(animateScrollTo);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var easeInOutCubic = function easeInOutCubic(t) {
+const easeInOutCubic = t => {
   return t < 0.5 ? 4 * Math.pow(t, 3) : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
 };
-var StyledQuestionBox = styled__default.default.div.withConfig({
+const StyledQuestionBox = styled.div.withConfig({
   componentId: "sc-6qfyxj-0"
-})(["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';
-}, designTokens.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__default.default.div.withConfig({
+})(["position:relative;display:flex;flex-direction:column;overflow:", ";border-radius:", ";width:100%;background-color:", ";", ";"], ({
+  vertical
+}) => vertical ? 'auto' : 'hidden', ({
+  vertical
+}) => vertical ? '0' : '8px', designTokens.base.color.navy8, ({
+  vertical
+}) => vertical ? 'height: 100%' : `
+      max-height: 100%;
+      min-height: 100%;
+  `);
+const StyledQuestionBoxHeader = styled.div.withConfig({
   componentId: "sc-6qfyxj-1"
-})(["display:flex;justify-content:space-between;background-color:", ";padding:", ";flex:none;", ""], designTokens.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__default.default.div.withConfig({
+})(["display:flex;justify-content:space-between;background-color:", ";padding:", ";flex:none;", ""], designTokens.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({
   componentId: "sc-6qfyxj-2"
-})(["background-color:", ";flex:auto;", ";"], designTokens.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__default.default.div.withConfig({
+})(["background-color:", ";flex:auto;", ";"], designTokens.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({
   componentId: "sc-6qfyxj-3"
 })(["position:sticky;bottom:0;left:0;display:flex;justify-content:center;background-color:", ";border-top:1px solid ", ";"], designTokens.base.color.navy8, designTokens.base.color.gray7);
-var StyledQuestionBoxFooter = styled__default.default.div.withConfig({
+const StyledQuestionBoxFooter = styled.div.withConfig({
   componentId: "sc-6qfyxj-4"
-})(["flex:none;display:flex;align-items:center;padding:1rem;background-color:", ";", ""], designTokens.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(designTokens.base.color.gray7, ";\n          justify-content: end; \n          gap: 0.75rem;\n        ");
+})(["flex:none;display:flex;align-items:center;padding:1rem;background-color:", ";", ""], designTokens.base.color.navy8, ({
+  vertical
+}) => {
+  return vertical ? `
+          flex-direction: column;
+          align-items: flex-start;
+        ` : `
+          border-top: 1px solid ${designTokens.base.color.gray7};
+          justify-content: end; 
+          gap: 0.75rem;
+        `;
 });
-var StyledQuestionBoxFooterActions = styled__default.default.div.withConfig({
+const StyledQuestionBoxFooterActions = styled.div.withConfig({
   componentId: "sc-6qfyxj-5"
-})(["display:flex;gap:0.75rem;", ";"], function (_ref8) {
-  var vertical = _ref8.vertical;
+})(["display:flex;gap:0.75rem;", ";"], ({
+  vertical
+}) => {
   return vertical ? 'width: 100%' : '';
 });
-var StyledPrimaryButton = styled__default.default(blocks.Button).withConfig({
+const StyledPrimaryButton = styled(blocks.Button).withConfig({
   componentId: "sc-6qfyxj-6"
 })(["background-color:", ";border-color:", ";"], designTokens.base.color.primary6, designTokens.base.color.primary6);
-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,
+const QuestionBox = _a => {
+  var {
+      children,
+      footerActions = [],
+      title,
+      titlePrefix,
+      submitResult,
+      submitStatus,
+      onNext,
+      isNextActive,
+      bodyContainerRef
+    } = _a,
     props = tslib.__rest(_a, ["children", "footerActions", "title", "titlePrefix", "submitResult", "submitStatus", "onNext", "isNextActive", "bodyContainerRef"]);
-  var theme = material.useTheme();
-  var intl$1 = intl.useRawEliceIntl();
-  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
-    vertical = _useMaterialQuizState.vertical,
-    isLongPassage = _useMaterialQuizState.isLongPassage;
-  var intersectionRef = React__default.default.useRef(null);
-  var headerRef = React__default.default.useRef(null);
-  var bodyRef = React__default.default.useRef(null);
-  var currentBodyRef = mergeRefs.mergeRefs(bodyContainerRef, bodyRef);
-  var hasFooter = footerActions.length > 0;
-  var visibleAnchorSection = vertical && isLongPassage;
-  var intersection = reactUse.useIntersection(intersectionRef, {
+  const theme = material.useTheme();
+  const intl$1 = intl.useRawEliceIntl();
+  const {
+    vertical,
+    isLongPassage
+  } = MaterialQuizContext.useMaterialQuizState();
+  const intersectionRef = React.useRef(null);
+  const headerRef = React.useRef(null);
+  const bodyRef = React.useRef(null);
+  const currentBodyRef = mergeRefs.mergeRefs(bodyContainerRef, bodyRef);
+  const hasFooter = footerActions.length > 0;
+  const visibleAnchorSection = vertical && isLongPassage;
+  const intersection = reactUse.useIntersection(intersectionRef, {
     root: null,
     rootMargin: '0px',
     threshold: 0.1
   });
-  var isViewingAnswerContainer = Boolean(intersection === null || intersection === void 0 ? void 0 : intersection.isIntersecting);
-  React.useEffect(function () {
-    var answerContainer = document.getElementById(element.MATERIAL_QUIZ_ANSWER_ID);
+  const isViewingAnswerContainer = Boolean(intersection === null || intersection === void 0 ? void 0 : intersection.isIntersecting);
+  React.useEffect(() => {
+    const answerContainer = document.getElementById(element.MATERIAL_QUIZ_ANSWER_ID);
     // only enable for vertical mode
     if (answerContainer && vertical) intersectionRef.current = answerContainer;
   }, [intersectionRef, vertical]);
-  var scrollToElement = /*#__PURE__*/function () {
-    var _ref9 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(elementId) {
-      var _a, _b, target;
-      return _rollupPluginBabelHelpers.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__default.default(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 ? jsxRuntime.jsxs(StyledQuestionBoxHeader, {
+  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, {
     vertical: vertical,
-    ref: headerRef,
-    children: [jsxRuntime.jsxs(blocks.Flex, {
-      children: [titlePrefix ? jsxRuntime.jsx(blocks.Text, {
-        bold: true,
-        size: "large",
-        customStyles: {
-          color: designTokens.base.color.primary3,
-          marginRight: '0.5rem'
-        },
-        children: titlePrefix
-      }) : null, jsxRuntime.jsx(blocks.Text, {
-        bold: true,
-        role: "navy0",
-        size: "large",
-        wordBreak: "break-word",
-        children: title
-      })]
-    }), submitResult ? jsxRuntime.jsx(blocks.Box, {
-      children: submitResult
-    }) : null]
-  }) : null;
-  var body = jsxRuntime.jsx(StyledQuestionBoxBody, {
+    ref: headerRef
+  }, React.createElement(blocks.Flex, null, titlePrefix ? React.createElement(blocks.Text, {
+    bold: true,
+    size: "large",
+    customStyles: {
+      color: designTokens.base.color.primary3,
+      marginRight: '0.5rem'
+    }
+  }, titlePrefix) : null, React.createElement(blocks.Text, {
+    bold: true,
+    role: "navy0",
+    size: "large",
+    wordBreak: "break-word"
+  }, title)), submitResult ? React.createElement(blocks.Box, null, submitResult) : null) : null;
+  const body = React.createElement(StyledQuestionBoxBody, {
     ref: !vertical ? currentBodyRef : undefined,
     hasFooter: hasFooter,
-    vertical: vertical,
-    children: children
-  });
-  var footer = jsxRuntime.jsx(StyledQuestionBoxFooter, {
-    vertical: vertical,
-    children: jsxRuntime.jsxs(StyledQuestionBoxFooterActions, {
-      vertical: vertical,
-      children: [footerActions.map(function (action, index) {
-        var Component = action.role === 'lightpurple' ? StyledPrimaryButton : blocks.Button;
-        return jsxRuntime.jsx(Component, Object.assign({
-          isFluid: vertical,
-          size: "small"
-        }, action, {
-          children: action.children
-        }), index);
-      }), isNextActive ? jsxRuntime.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$1.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 && jsxRuntime.jsxs(StyledAnchorBox, {
-      children: [jsxRuntime.jsx(blocks.Button, {
-        size: "small",
-        border: false,
-        hasBorderRadius: false,
-        tabIndex: 0,
-        transparent: true,
-        onClick: scrollToElement.bind(null, element.MATERIAL_QUIZ_PASSIVE_ID),
-        customStyles: getCustomStyles(!isViewingAnswerContainer),
-        children: intl$1.formatMessage({
-          id: 'materialQuiz.anchorLabel.question'
-        })
-      }), jsxRuntime.jsx(blocks.Button, {
-        size: "small",
-        border: false,
-        hasBorderRadius: false,
-        tabIndex: 0,
-        transparent: true,
-        onClick: scrollToElement.bind(null, element.MATERIAL_QUIZ_ANSWER_ID),
-        customStyles: getCustomStyles(isViewingAnswerContainer),
-        children: intl$1.formatMessage({
-          id: 'materialQuiz.anchorLabel.answer'
-        })
-      })]
+    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 : blocks.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$1.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
     });
+    return visibleAnchorSection && React.createElement(StyledAnchorBox, null, React.createElement(blocks.Button, {
+      size: "small",
+      border: false,
+      hasBorderRadius: false,
+      tabIndex: 0,
+      transparent: true,
+      onClick: scrollToElement.bind(null, element.MATERIAL_QUIZ_PASSIVE_ID),
+      customStyles: getCustomStyles(!isViewingAnswerContainer)
+    }, intl$1.formatMessage({
+      id: 'materialQuiz.anchorLabel.question'
+    })), React.createElement(blocks.Button, {
+      size: "small",
+      border: false,
+      hasBorderRadius: false,
+      tabIndex: 0,
+      transparent: true,
+      onClick: scrollToElement.bind(null, element.MATERIAL_QUIZ_ANSWER_ID),
+      customStyles: getCustomStyles(isViewingAnswerContainer)
+    }, intl$1.formatMessage({
+      id: 'materialQuiz.anchorLabel.answer'
+    })));
   };
-  var renderContent = function renderContent() {
-    var content = jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [body, footerActions.length > 0 ? footer : null]
-    });
+  const renderContent = () => {
+    const content = React.createElement(React.Fragment, null, body, footerActions.length > 0 ? footer : null);
     if (vertical) {
-      return jsxRuntime.jsx("div", {
+      return React.createElement("div", {
         ref: currentBodyRef,
         style: {
           height: '100%',
           overflow: 'auto'
-        },
-        children: content
-      });
+        }
+      }, content);
     }
     return content;
   };
-  return jsxRuntime.jsxs(StyledQuestionBox, Object.assign({}, props, {
-    vertical: vertical,
-    children: [header, renderContent(), _renderAnchorSection()]
-  }));
+  return React.createElement(StyledQuestionBox, Object.assign({}, props, {
+    vertical: vertical
+  }), header, renderContent(), _renderAnchorSection());
 };
 
 exports.StyledQuestionBox = StyledQuestionBox;

package/cjs/components/shared/QuizDraggbleDroppedOption.js

@@ -2,19 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var QuizDraggbleOption = require('./QuizDraggbleOption.js');
 
-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 jsxRuntime.jsx(QuizDraggbleOption.default, {
+const QuizDraggbleDroppedOption = ({
+  id,
+  content,
+  disabled = false,
+  role,
+  indexOrder,
+  isMarkdown
+}) => {
+  return React.createElement(QuizDraggbleOption.default, {
     id: id,
+    key: id,
     content: content,
     className: "quiz-answer",
     disabled: disabled,
@@ -22,7 +23,7 @@ var QuizDraggbleDroppedOption = function QuizDraggbleDroppedOption(_ref) {
     indexOrder: indexOrder,
     clone: true,
     isMarkdown: isMarkdown
-  }, id);
+  });
 };
 
 exports.default = QuizDraggbleDroppedOption;

package/cjs/components/shared/QuizDraggbleDummyOption.js

@@ -2,38 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 var EbDroppable = require('../eb-sortable/EbDroppable.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledQuizDraggbleDummyOption = styled__default.default(EbDroppable.default).withConfig({
+const StyledQuizDraggbleDummyOption = styled(EbDroppable.default).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 ", ";}"], designTokens.base.color.navy4, designTokens.base.color.navy5, designTokens.base.color.navy0, designTokens.base.color.navy0);
-var StyledOrder = styled__default.default.div.withConfig({
+const 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;"], designTokens.base.color.navy0, designTokens.base.color.navy4);
-var QuizDraggbleDummyOption = function QuizDraggbleDummyOption(_ref) {
-  var children = _ref.children,
-    indexOrder = _ref.indexOrder,
-    onDrop = _ref.onDrop;
-  return jsxRuntime.jsxs(StyledQuizDraggbleDummyOption, {
-    onDrop: onDrop,
-    children: [jsxRuntime.jsx(blocks.Text, {
-      wordBreak: "break-all",
-      customStyles: {
-        color: designTokens.base.color.navy0
-      },
-      children: children !== null && children !== void 0 ? children : 'drag here...'
-    }), jsxRuntime.jsx(StyledOrder, {
-      children: indexOrder
-    })]
-  });
+const QuizDraggbleDummyOption = ({
+  children,
+  indexOrder,
+  onDrop
+}) => {
+  return React.createElement(StyledQuizDraggbleDummyOption, {
+    onDrop: onDrop
+  }, React.createElement(blocks.Text, {
+    wordBreak: "break-all",
+    customStyles: {
+      color: designTokens.base.color.navy0
+    }
+  }, children !== null && children !== void 0 ? children : 'drag here...'), React.createElement(StyledOrder, null, indexOrder));
 };
 
 exports.default = QuizDraggbleDummyOption;