@elice/material-quiz 1.230817.1 → 1.230821.0

package/cjs/components/material-quiz-edit/MaterialQuizEdit.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactIntl = require('react-intl');
-var reactUse = require('react-use');
+var materialSharedUtils = require('@elice/material-shared-utils');
 var editValue = require('./utils/editValue.js');
 var context = require('./context.js');
 var locales = require('./locales.js');
@@ -37,7 +37,7 @@ var MaterialQuizEdit = React.forwardRef(function (_ref, ref) {
   // Reset from value, when `value` changes.
   // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
   //
-  reactUse.useDeepCompareEffect(function () {
+  materialSharedUtils.useDeepClonedCompareEffect(function () {
     useFormMethods.reset(editValue.manipulateValue(value), {
       keepDirty: true,
       keepErrors: true,
@@ -51,8 +51,8 @@ var MaterialQuizEdit = React.forwardRef(function (_ref, ref) {
   // Emit `onChange` handler when form value changed.
   // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
   //
-  reactUse.useDeepCompareEffect(function () {
-    return onChange(editValue.restoreValue(watchedMaterialQuizEditValue));
+  materialSharedUtils.useDeepClonedCompareEffect(function () {
+    onChange(editValue.restoreValue(watchedMaterialQuizEditValue));
   }, [watchedMaterialQuizEditValue]);
   //
   // Emit `onFormStateChange` handler when form state change.

package/cjs/components/material-quiz-edit/options/OptionEditor.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-interface OptionTextareaProps extends Omit<React.HTMLAttributes<HTMLTextAreaElement>, 'prefix'> {
+interface OptionTextareaProps extends Omit<React.HTMLAttributes<HTMLTextAreaElement>, 'prefix' | 'onChange'> {
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     invalid?: boolean;
     invalidText?: string;
     readOnly?: boolean;
     disabled?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
 }
 declare const OptionEditor: React.ForwardRefExoticComponent<OptionTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default OptionEditor;

package/cjs/components/material-quiz-edit/options/OptionEditor.js

@@ -44,6 +44,17 @@ var OptionEditor = React__default["default"].forwardRef(function (_a, ref) {
     invalidText = _a.invalidText,
     readOnly = _a.readOnly,
     props = tslib.__rest(_a, ["suffix", "prefix", "invalid", "invalidText", "readOnly"]);
+  /**
+   * Extract textarea element from legacy TextArea ref prop.
+   */
+  var handleTextAreaApi = React__default["default"].useCallback(function (textAreaApi) {
+    var _a;
+    if (!ref) {
+      return;
+    }
+    var textAreaInput = (_a = textAreaApi === null || textAreaApi === void 0 ? void 0 : textAreaApi.input) !== null && _a !== void 0 ? _a : null;
+    typeof ref === 'function' ? ref(textAreaInput) : ref.current = textAreaInput;
+  }, [ref]);
   return React__default["default"].createElement("div", {
     className: classNames__default["default"](PREFIX, props.className)
   }, React__default["default"].createElement(StyledTextareaWrap, {
@@ -51,9 +62,10 @@ var OptionEditor = React__default["default"].forwardRef(function (_a, ref) {
   }, prefix ? React__default["default"].createElement("div", {
     className: "".concat(PREFIX, "-adornment prefix")
   }, prefix) : null, React__default["default"].createElement(StyledTextarea, Object.assign({}, props, {
-    ref: ref,
+    ref: handleTextAreaApi,
     invalid: invalid,
     readOnly: readOnly,
+    resetFocus: props.onBlur,
     "aria-disabled": props.disabled
   })), suffix ? React__default["default"].createElement("div", {
     className: "".concat(PREFIX, "-adornment suffix")

package/cjs/components/material-quiz-edit/options/OptionSelectMultiple.js

@@ -37,6 +37,7 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
     setValue = _useFormContext.setValue,
     watch = _useFormContext.watch;
   var _useFieldArray = reactHookForm.useFieldArray({
+      control: control,
       name: 'options',
       keyName: 'id',
       shouldUnregister: true
@@ -139,7 +140,7 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
         var _a;
-        return React__default["default"].createElement(OptionEditor["default"], Object.assign({}, field, {
+        return React__default["default"].createElement(OptionEditor["default"], Object.assign({
           invalid: fieldState.invalid,
           invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
           readOnly: disabled,
@@ -169,7 +170,7 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
               return removeOptionInfo(index);
             }
           })))
-        }));
+        }, field));
       }
     });
   })), React__default["default"].createElement(blocks.Vspace, {

package/cjs/components/material-quiz-edit/options/OptionSelectOne.js

@@ -134,7 +134,7 @@ var OptionSelectOne = function OptionSelectOne() {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
         var _a;
-        return React__default["default"].createElement(OptionEditor["default"], Object.assign({}, field, {
+        return React__default["default"].createElement(OptionEditor["default"], Object.assign({
           invalid: fieldState.invalid,
           invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
           placeholder: intl.formatMessage({
@@ -164,7 +164,7 @@ var OptionSelectOne = function OptionSelectOne() {
               return removeOptionInfo(index);
             }
           })))
-        }));
+        }, field));
       }
     });
   })), React__default["default"].createElement(blocks.Vspace, {

package/cjs/components/material-quiz-edit/options/options-group/OptionGroupGroupListItem.js

@@ -77,9 +77,11 @@ var OptionGroupGroupListItem = function OptionGroupGroupListItem(_ref2) {
       render: function render(_ref3) {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
-        return React__default["default"].createElement(StyledInputGroup, Object.assign({}, field, {
+        return React__default["default"].createElement(StyledInputGroup, Object.assign({
           invalid: fieldState.invalid || !isGroupChildAnswer,
           width: "full"
+        }, field, {
+          ref: null
         }));
       }
     }));

package/es/components/material-quiz-edit/MaterialQuizEdit.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { IntlProvider } from 'react-intl';
-import { useDeepCompareEffect } from 'react-use';
+import { useDeepClonedCompareEffect } from '@elice/material-shared-utils';
 import { manipulateValue, restoreValue } from './utils/editValue.js';
 import MaterialQuizEditContext from './context.js';
 import * as locales from './locales.js';
@@ -30,7 +30,7 @@ var MaterialQuizEdit = forwardRef(function (_ref, ref) {
   // Reset from value, when `value` changes.
   // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
   //
-  useDeepCompareEffect(function () {
+  useDeepClonedCompareEffect(function () {
     useFormMethods.reset(manipulateValue(value), {
       keepDirty: true,
       keepErrors: true,
@@ -44,8 +44,8 @@ var MaterialQuizEdit = forwardRef(function (_ref, ref) {
   // Emit `onChange` handler when form value changed.
   // TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
   //
-  useDeepCompareEffect(function () {
-    return onChange(restoreValue(watchedMaterialQuizEditValue));
+  useDeepClonedCompareEffect(function () {
+    onChange(restoreValue(watchedMaterialQuizEditValue));
   }, [watchedMaterialQuizEditValue]);
   //
   // Emit `onFormStateChange` handler when form state change.

package/es/components/material-quiz-edit/options/OptionEditor.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-interface OptionTextareaProps extends Omit<React.HTMLAttributes<HTMLTextAreaElement>, 'prefix'> {
+interface OptionTextareaProps extends Omit<React.HTMLAttributes<HTMLTextAreaElement>, 'prefix' | 'onChange'> {
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     invalid?: boolean;
     invalidText?: string;
     readOnly?: boolean;
     disabled?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
 }
 declare const OptionEditor: React.ForwardRefExoticComponent<OptionTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default OptionEditor;

package/es/components/material-quiz-edit/options/OptionEditor.js

@@ -34,6 +34,17 @@ var OptionEditor = React.forwardRef(function (_a, ref) {
     invalidText = _a.invalidText,
     readOnly = _a.readOnly,
     props = __rest(_a, ["suffix", "prefix", "invalid", "invalidText", "readOnly"]);
+  /**
+   * Extract textarea element from legacy TextArea ref prop.
+   */
+  var handleTextAreaApi = React.useCallback(function (textAreaApi) {
+    var _a;
+    if (!ref) {
+      return;
+    }
+    var textAreaInput = (_a = textAreaApi === null || textAreaApi === void 0 ? void 0 : textAreaApi.input) !== null && _a !== void 0 ? _a : null;
+    typeof ref === 'function' ? ref(textAreaInput) : ref.current = textAreaInput;
+  }, [ref]);
   return React.createElement("div", {
     className: classNames(PREFIX, props.className)
   }, React.createElement(StyledTextareaWrap, {
@@ -41,9 +52,10 @@ var OptionEditor = React.forwardRef(function (_a, ref) {
   }, prefix ? React.createElement("div", {
     className: "".concat(PREFIX, "-adornment prefix")
   }, prefix) : null, React.createElement(StyledTextarea, Object.assign({}, props, {
-    ref: ref,
+    ref: handleTextAreaApi,
     invalid: invalid,
     readOnly: readOnly,
+    resetFocus: props.onBlur,
     "aria-disabled": props.disabled
   })), suffix ? React.createElement("div", {
     className: "".concat(PREFIX, "-adornment suffix")

package/es/components/material-quiz-edit/options/OptionSelectMultiple.js

@@ -28,6 +28,7 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
     setValue = _useFormContext.setValue,
     watch = _useFormContext.watch;
   var _useFieldArray = useFieldArray({
+      control: control,
       name: 'options',
       keyName: 'id',
       shouldUnregister: true
@@ -130,7 +131,7 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
         var _a;
-        return React.createElement(OptionEditor, Object.assign({}, field, {
+        return React.createElement(OptionEditor, Object.assign({
           invalid: fieldState.invalid,
           invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
           readOnly: disabled,
@@ -160,7 +161,7 @@ var OptionSelectMultiple = function OptionSelectMultiple() {
               return removeOptionInfo(index);
             }
           })))
-        }));
+        }, field));
       }
     });
   })), React.createElement(Vspace, {

package/es/components/material-quiz-edit/options/OptionSelectOne.js

@@ -125,7 +125,7 @@ var OptionSelectOne = function OptionSelectOne() {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
         var _a;
-        return React.createElement(OptionEditor, Object.assign({}, field, {
+        return React.createElement(OptionEditor, Object.assign({
           invalid: fieldState.invalid,
           invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
           placeholder: intl.formatMessage({
@@ -155,7 +155,7 @@ var OptionSelectOne = function OptionSelectOne() {
               return removeOptionInfo(index);
             }
           })))
-        }));
+        }, field));
       }
     });
   })), React.createElement(Vspace, {

package/es/components/material-quiz-edit/options/options-group/OptionGroupGroupListItem.js

@@ -67,9 +67,11 @@ var OptionGroupGroupListItem = function OptionGroupGroupListItem(_ref2) {
       render: function render(_ref3) {
         var field = _ref3.field,
           fieldState = _ref3.fieldState;
-        return React.createElement(StyledInputGroup, Object.assign({}, field, {
+        return React.createElement(StyledInputGroup, Object.assign({
           invalid: fieldState.invalid || !isGroupChildAnswer,
           width: "full"
+        }, field, {
+          ref: null
         }));
       }
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.230817.1",
+  "version": "1.230821.0",
   "description": "User view and editing components of Elice material quiz",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -54,8 +54,8 @@
     "@elice/icons": "^1.230814.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
     "@elice/markdown": "^1.220815.0",
-    "@elice/material-shared-types": "1.230817.1",
-    "@elice/material-shared-utils": "1.230817.1",
+    "@elice/material-shared-types": "1.230821.0",
+    "@elice/material-shared-utils": "1.230821.0",
     "@elice/types": "^1.230815.0",
     "@types/classnames": "^2.3.1",
     "@types/jquery": "^3.5.13",
@@ -69,5 +69,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "93a18ac95c6242a4985f6dc35ca03028312bff71"
+  "gitHead": "4f85930b4b7eb23121650c5c95b14620ea2fb198"
 }