@elice/material-quiz 1.240719.0 → 1.240722.0-dev2.0

package/cjs/components/shared/QuizDraggbleDroppedOption.d.ts

@@ -5,7 +5,7 @@ interface QuizDraggbleDroppedOptionProps {
     content: string;
     disabled: boolean;
     role: QuizDraggbleOptionRole;
-    indexOrder?: number;
+    indexOrder: number;
     isMarkdown?: boolean;
 }
 declare const QuizDraggbleDroppedOption: React.FC<QuizDraggbleDroppedOptionProps>;

package/cjs/components/shared/QuizDraggbleDroppedOption.js

@@ -2,9 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
+var EbDroppable = require('../eb-sortable/EbDroppable.js');
 var QuizDraggbleOption = require('./QuizDraggbleOption.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+//
+//
+//
+var StyledQuizDroppedOptionWrapper = /*#__PURE__*/_styled__default.default(EbDroppable.default, {
+  target: "e1dhzt110"
+})("production" === "production" ? {
+  name: "15nejzs",
+  styles: "&:not(:last-of-type){margin-bottom:1rem;}"
+} : {
+  name: "15nejzs",
+  styles: "&:not(:last-of-type){margin-bottom:1rem;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+//
+//
+//
 var QuizDraggbleDroppedOption = function QuizDraggbleDroppedOption(_ref) {
   var id = _ref.id,
     content = _ref.content,
@@ -13,16 +36,18 @@ var QuizDraggbleDroppedOption = function QuizDraggbleDroppedOption(_ref) {
     role = _ref.role,
     indexOrder = _ref.indexOrder,
     isMarkdown = _ref.isMarkdown;
-  return jsxRuntime.jsx(QuizDraggbleOption.default, {
-    id: id,
-    content: content,
-    className: "quiz-answer",
-    disabled: disabled,
-    role: role,
-    indexOrder: indexOrder,
-    clone: true,
-    isMarkdown: isMarkdown
-  }, id);
+  return jsxRuntime.jsx(StyledQuizDroppedOptionWrapper, {
+    id: "quiz-answer-zone-".concat(indexOrder - 1),
+    children: jsxRuntime.jsx(QuizDraggbleOption.default, {
+      id: id,
+      content: content,
+      className: "quiz-answer",
+      disabled: disabled,
+      role: role,
+      indexOrder: indexOrder,
+      isMarkdown: isMarkdown
+    }, id)
+  });
 };
 
 exports.default = QuizDraggbleDroppedOption;

package/cjs/components/shared/QuizDraggbleDummyOption.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import type { EbDroppableProps } from '../eb-sortable/EbDroppable';
 interface QuizDraggbleDummyOptionProps {
-    children?: React.ReactNode;
     indexOrder: number;
-    onDrop: EbDroppableProps['onDrop'];
+    children?: React.ReactNode;
 }
 declare const QuizDraggbleDummyOption: React.FC<QuizDraggbleDummyOptionProps>;
 export default QuizDraggbleDummyOption;

package/cjs/components/shared/QuizDraggbleDummyOption.js

@@ -12,18 +12,23 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
+//
+//
+//
 var StyledQuizDraggbleDummyOption = styled__default.default(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({
   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;
+    indexOrder = _ref.indexOrder;
   return jsxRuntime.jsxs(StyledQuizDraggbleDummyOption, {
-    onDrop: onDrop,
+    id: "quiz-dummy-zone-".concat(indexOrder - 1),
     children: [jsxRuntime.jsx(blocks.Text, {
       wordBreak: "break-all",
       customStyles: {

package/cjs/components/shared/QuizDraggbleOption.d.ts

@@ -7,7 +7,6 @@ export interface QuizDraggbleOptionProps {
     disabled?: boolean;
     role?: QuizDraggbleOptionRole;
     indexOrder?: number;
-    clone?: boolean;
     isMarkdown?: boolean;
 }
 declare const QuizDraggbleOption: React.FC<QuizDraggbleOptionProps>;

package/cjs/components/shared/QuizDraggbleOption.js

@@ -15,6 +15,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
+//
+//
+//
 var StyledQuizDraggbleOptionHandle = styled__default.default.div.withConfig({
   componentId: "sc-19b0zkq-0"
 })(["display:flex;align-items:center;justify-content:center;background-color:", ";width:1.5rem;flex:none;"], designTokens.base.color.navy5);
@@ -44,7 +47,7 @@ var StyledOrder = styled__default.default.div.withConfig({
 })(["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 StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).withConfig({
   componentId: "sc-19b0zkq-3"
-})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;z-index:980 !important;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, StyledQuizDraggbleOptionHandle, function (_ref3) {
+})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, StyledQuizDraggbleOptionHandle, function (_ref3) {
   var role = _ref3.role;
   switch (role) {
     case 'answer':
@@ -123,6 +126,9 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
       return designTokens.base.color.navy0;
   }
 }, designTokens.base.color.navy0, StyledQuizDraggbleOptionHandle, designTokens.base.color.navy5, StyledQuizDraggbleOptionContent, designTokens.base.color.navy4, designTokens.base.color.navy4, StyledOrder, designTokens.base.color.navy0, designTokens.base.color.navy5, designTokens.base.color.navy0);
+//
+//
+//
 var QuizDraggbleOption = function QuizDraggbleOption(_ref9) {
   var id = _ref9.id,
     className = _ref9.className,
@@ -132,18 +138,18 @@ var QuizDraggbleOption = function QuizDraggbleOption(_ref9) {
     _ref9$role = _ref9.role,
     role = _ref9$role === void 0 ? 'default' : _ref9$role,
     indexOrder = _ref9.indexOrder,
-    _ref9$clone = _ref9.clone,
-    clone = _ref9$clone === void 0 ? false : _ref9$clone,
     _ref9$isMarkdown = _ref9.isMarkdown,
     isMarkdown = _ref9$isMarkdown === void 0 ? false : _ref9$isMarkdown;
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
     vertical = _useMaterialQuizState.vertical;
+  //
+  //
+  //
   return jsxRuntime.jsxs(StyledQuizDraggbleOption, {
     id: id,
     className: className,
     disabled: disabled,
     role: role,
-    clone: clone,
     vertical: vertical,
     children: [jsxRuntime.jsx(StyledQuizDraggbleOptionHandle, {
       children: jsxRuntime.jsx(blocks.Icon, {

package/es/components/eb-sortable/EbDraggable.d.ts

@@ -1,19 +1,8 @@
-/// <reference types="jquery" />
-/// <reference types="jquery" />
-/// <reference types="jqueryui" />
 import React from 'react';
-import 'jquery-ui/ui/widgets/draggable';
 interface EbDraggableProps {
-    id?: string;
+    id: string;
     className?: string;
-    connectWith?: JQuery.Selector;
     disabled?: boolean;
-    revert?: boolean;
-    clone?: boolean;
-    onStart?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
-    onStop?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
-    onDrag?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
-    onCreate?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
 }
 declare const EbDraggable: React.FC<EbDraggableProps>;
 export default EbDraggable;

package/es/components/eb-sortable/EbDraggable.js

@@ -1,106 +1,41 @@
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
-import $ from 'jquery';
-import 'jquery-ui/ui/widgets/draggable';
+import { useDraggable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
 
+//
+//
+//
 var EbDraggable = function EbDraggable(_ref) {
   var children = _ref.children,
     id = _ref.id,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$revert = _ref.revert,
-    revert = _ref$revert === void 0 ? true : _ref$revert,
-    _ref$clone = _ref.clone,
-    clone = _ref$clone === void 0 ? false : _ref$clone,
     className = _ref.className,
-    onStart = _ref.onStart,
-    onStop = _ref.onStop,
-    onDrag = _ref.onDrag,
-    onCreate = _ref.onCreate;
-  var rootEl = React.useRef(null);
-  var onStartCallback = React.useCallback(function (event, ui) {
-    if (onStart) {
-      return onStart(event, ui);
-    } else {
-      return function () {
-        return;
-      };
-    }
-  }, [onStart]);
-  var onStopCallback = React.useCallback(function (event, ui) {
-    if (onStop) {
-      return onStop(event, ui);
-    } else {
-      return function () {
-        return;
-      };
-    }
-  }, [onStop]);
-  var onDragCallback = React.useCallback(function (event, ui) {
-    if (onDrag) {
-      return onDrag(event, ui);
-    } else {
-      return function () {
-        return;
-      };
-    }
-  }, [onDrag]);
-  var onCreateCallback = React.useCallback(function (event, ui) {
-    if (onCreate) {
-      return onCreate(event, ui);
-    } else {
-      return function () {
-        return;
-      };
-    }
-  }, [onCreate]);
-  React.useEffect(function () {
-    if (!rootEl.current) {
-      return;
-    }
-    var draggableEl = $(rootEl.current);
-    draggableEl.draggable(Object.assign(Object.assign(Object.assign(Object.assign({}, disabled ? {
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useDraggable = useDraggable({
+      id: id,
       disabled: disabled
-    } : null), revert ? {
-      revert: revert
-    } : null), clone ? {
-      helper: 'clone'
-    } : null), {
-      zIndex: 200,
-      revertDuration: 0,
-      start: function start(event, ui) {
-        if (!onStartCallback) {
-          return;
-        }
-        onStartCallback(event, ui);
-      },
-      stop: function stop(event, ui) {
-        if (!onStopCallback) {
-          return;
-        }
-        // draggableEl.draggable('cancel');
-        onStopCallback(event, ui);
-      },
-      drag: function drag(event, ui) {
-        onDragCallback(event, ui);
-      },
-      create: function create(event, ui) {
-        onCreateCallback(event, ui);
-      }
-    }));
-    return function () {
-      draggableEl.draggable('destroy');
-    };
-  }, [clone, disabled, onCreateCallback, onDragCallback, onStartCallback, onStopCallback, revert]);
-  return jsx("div", {
-    ref: rootEl,
-    id: id,
+    }),
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    setNodeRef = _useDraggable.setNodeRef,
+    transform = _useDraggable.transform,
+    isDragging = _useDraggable.isDragging;
+  var style = {
+    transform: CSS.Translate.toString(transform),
+    cursor: disabled ? 'auto' : 'move'
+  };
+  //
+  //
+  //
+  return jsx("div", Object.assign({
+    ref: setNodeRef,
     className: className,
-    style: {
-      cursor: disabled ? 'auto' : 'move'
-    },
+    style: isDragging ? Object.assign(Object.assign({}, style), {
+      zIndex: 1000
+    }) : style
+  }, listeners, attributes, {
     children: children
-  });
+  }));
 };
 
 export { EbDraggable as default };

package/es/components/eb-sortable/EbDroppable.d.ts

@@ -1,14 +1,9 @@
-/// <reference types="jquery" />
-/// <reference types="jquery" />
-/// <reference types="jqueryui" />
 import React from 'react';
-import 'jquery-ui/ui/widgets/droppable';
-export interface EbDroppableProps {
-    id?: string;
+interface EbDroppableProps {
+    id: string;
     className?: string;
     disabled?: boolean;
-    accept?: JQuery.Selector;
-    onDrop?: (event: JQueryEventObject, ui: JQueryUI.DroppableEventUIParam) => void;
+    accept?: string;
 }
 declare const EbDroppable: React.FC<EbDroppableProps>;
 export default EbDroppable;

package/es/components/eb-sortable/EbDroppable.js

@@ -1,50 +1,29 @@
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
-import $ from 'jquery';
-import 'jquery-ui/ui/widgets/droppable';
+import { useDroppable } from '@dnd-kit/core';
 
+//
+//
+//
 var EbDroppable = function EbDroppable(_ref) {
   var children = _ref.children,
     id = _ref.id,
+    className = _ref.className,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    accept = _ref.accept,
-    className = _ref.className,
-    onDrop = _ref.onDrop;
-  var rootEl = React.useRef(null);
-  var onDropCallback = React.useCallback(function (event, ui) {
-    if (onDrop) {
-      return onDrop(event, ui);
-    } else {
-      return function () {
-        return;
-      };
-    }
-  }, [onDrop]);
-  React.useEffect(function () {
-    if (!rootEl.current) {
-      return;
-    }
-    var draggableEl = $(rootEl.current);
-    draggableEl.droppable(Object.assign(Object.assign(Object.assign({}, disabled ? {
-      disabled: disabled
-    } : null), accept ? {
-      accept: accept
-    } : null), {
-      drop: function drop(event, ui) {
-        if (!onDropCallback) {
-          return;
-        }
-        onDropCallback(event, ui);
+    accept = _ref.accept;
+  var _useDroppable = useDroppable({
+      id: id,
+      disabled: disabled,
+      data: {
+        accept: accept
       }
-    }));
-    return function () {
-      draggableEl.droppable('destroy');
-    };
-  }, [accept, disabled, onDropCallback]);
+    }),
+    setNodeRef = _useDroppable.setNodeRef;
+  //
+  //
+  //
   return jsx("div", {
-    ref: rootEl,
-    id: id,
+    ref: setNodeRef,
     className: className,
     children: children
   });

package/es/components/material-quiz/MaterialQuizSelectMultiple.js

@@ -8,8 +8,9 @@ import { useTheme, Stack } from '@mui/material';
 import { MATERIAL_QUIZ_PASSIVE_ID, MATERIAL_QUIZ_ANSWER_ID } from '../../constant/element.js';
 import { checkUserLectureTestEnded, shouldResetOptions, getOptionStatus, getQuizResult } from '../../helpers/index.js';
 import { useCaculatePassage } from '../../hooks/useCaculatePassage.js';
-import '../shared/QuizDraggbleOption.js';
+import '../shared/QuizDraggbleDroppedOption.js';
 import '../shared/QuizDraggbleDummyOption.js';
+import '../shared/QuizDraggbleOption.js';
 import '../shared/question-radio/QuestionRadio.js';
 import '../shared/question-radio/QuestionRadioOption.js';
 import QuestionCheckbox from '../shared/question-checkbox/QuestionCheckbox.js';