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

package/es/components/shared/QuizDraggbleDroppedOption.js

@@ -1,6 +1,25 @@
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
+import EbDroppable from '../eb-sortable/EbDroppable.js';
 import QuizDraggbleOption from './QuizDraggbleOption.js';
 
+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(EbDroppable, {
+  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,
@@ -9,16 +28,18 @@ var QuizDraggbleDroppedOption = function QuizDraggbleDroppedOption(_ref) {
     role = _ref.role,
     indexOrder = _ref.indexOrder,
     isMarkdown = _ref.isMarkdown;
-  return jsx(QuizDraggbleOption, {
-    id: id,
-    content: content,
-    className: "quiz-answer",
-    disabled: disabled,
-    role: role,
-    indexOrder: indexOrder,
-    clone: true,
-    isMarkdown: isMarkdown
-  }, id);
+  return jsx(StyledQuizDroppedOptionWrapper, {
+    id: "quiz-answer-zone-".concat(indexOrder - 1),
+    children: jsx(QuizDraggbleOption, {
+      id: id,
+      content: content,
+      className: "quiz-answer",
+      disabled: disabled,
+      role: role,
+      indexOrder: indexOrder,
+      isMarkdown: isMarkdown
+    }, id)
+  });
 };
 
 export { QuizDraggbleDroppedOption as default };

package/es/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/es/components/shared/QuizDraggbleDummyOption.js

@@ -4,18 +4,23 @@ import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import EbDroppable from '../eb-sortable/EbDroppable.js';
 
+//
+//
+//
 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);
 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);
+//
+//
+//
 var QuizDraggbleDummyOption = function QuizDraggbleDummyOption(_ref) {
   var children = _ref.children,
-    indexOrder = _ref.indexOrder,
-    onDrop = _ref.onDrop;
+    indexOrder = _ref.indexOrder;
   return jsxs(StyledQuizDraggbleDummyOption, {
-    onDrop: onDrop,
+    id: "quiz-dummy-zone-".concat(indexOrder - 1),
     children: [jsx(Text, {
       wordBreak: "break-all",
       customStyles: {

package/es/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/es/components/shared/QuizDraggbleOption.js

@@ -7,6 +7,9 @@ import EbDraggable from '../eb-sortable/EbDraggable.js';
 import { useMaterialQuizState } from '../material-quiz/context/MaterialQuizContext.js';
 import StyledMarkdown from './StyledMarkdown.js';
 
+//
+//
+//
 var StyledQuizDraggbleOptionHandle = styled.div.withConfig({
   componentId: "sc-19b0zkq-0"
 })(["display:flex;align-items:center;justify-content:center;background-color:", ";width:1.5rem;flex:none;"], base.color.navy5);
@@ -36,7 +39,7 @@ var StyledOrder = styled.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;"], base.color.navy0, base.color.navy4);
 var StyledQuizDraggbleOption = styled(EbDraggable).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);}"], base.color.navy4, 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);}"], base.color.navy4, base.color.navy5, StyledQuizDraggbleOptionHandle, function (_ref3) {
   var role = _ref3.role;
   switch (role) {
     case 'answer':
@@ -115,6 +118,9 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
       return base.color.navy0;
   }
 }, base.color.navy0, StyledQuizDraggbleOptionHandle, base.color.navy5, StyledQuizDraggbleOptionContent, base.color.navy4, base.color.navy4, StyledOrder, base.color.navy0, base.color.navy5, base.color.navy0);
+//
+//
+//
 var QuizDraggbleOption = function QuizDraggbleOption(_ref9) {
   var id = _ref9.id,
     className = _ref9.className,
@@ -124,18 +130,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 = useMaterialQuizState(),
     vertical = _useMaterialQuizState.vertical;
+  //
+  //
+  //
   return jsxs(StyledQuizDraggbleOption, {
     id: id,
     className: className,
     disabled: disabled,
     role: role,
-    clone: clone,
     vertical: vertical,
     children: [jsx(StyledQuizDraggbleOptionHandle, {
       children: jsx(Icon, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.240719.1",
+  "version": "1.240722.0-dev2.0",
   "description": "User view and editing components of Elice material quiz",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -23,6 +23,7 @@
     "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
   },
   "peerDependencies": {
+    "@dnd-kit/core": "^6.1.0",
     "@elice/api-client": "^1",
     "@elice/blocks": "^1",
     "@elice/design-tokens": "^1",
@@ -57,6 +58,7 @@
     "tslib": "^2.6.1"
   },
   "devDependencies": {
+    "@dnd-kit/core": "^6.1.0",
     "@elice/api-client": "^1.240619.0",
     "@elice/blocks": "^1.240529.0",
     "@elice/design-tokens": "^1.220803.0",
@@ -64,8 +66,8 @@
     "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
     "@elice/intl": "0.240425.0-rc.2",
     "@elice/markdown": "^1.240124.0",
-    "@elice/material-shared-types": "1.240719.1",
-    "@elice/material-shared-utils": "1.240719.1",
+    "@elice/material-shared-types": "1.240722.0-dev2.0",
+    "@elice/material-shared-utils": "1.240722.0-dev2.0",
     "@elice/mui-system": "^5.240108.1",
     "@elice/types": "1.240709.0",
     "@elice/wysiwyg": "1.240716.1",