@elice/material-shared-utils 1.240718.0-trasncript.2 → 1.240718.2

package/cjs/components/MaterialIntlProvider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type MaterialIntlProviderPhrases = Record<string, Record<string, string>>;
+export interface MaterialIntlProviderProps {
+    children?: React.ReactNode;
+    /** Locale code. (default: `ko`) */
+    locale?: string;
+    /** I18n phrases. */
+    phrases?: MaterialIntlProviderPhrases;
+}
+/**
+ * IntlProvider for material components.
+ */
+declare const MaterialIntlProvider: React.FC<MaterialIntlProviderProps>;
+export default MaterialIntlProvider;

package/cjs/components/MaterialIntlProvider.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactIntl = require('react-intl');
+
+const INTL_DEFAULT_LOCALE = 'ko';
+const INTL_DEFAULT_PHRASES = {};
+/**
+ * IntlProvider for material components.
+ */
+const MaterialIntlProvider = ({
+  children,
+  locale = INTL_DEFAULT_LOCALE,
+  phrases = INTL_DEFAULT_PHRASES
+}) => {
+  const messages = React.useMemo(() => locale in phrases ? phrases[locale] : phrases[INTL_DEFAULT_LOCALE], [locale, phrases]);
+  return React.createElement(reactIntl.IntlProvider, {
+    children: children,
+    locale: locale,
+    defaultLocale: INTL_DEFAULT_LOCALE,
+    messages: messages
+  });
+};
+
+exports.default = MaterialIntlProvider;

package/cjs/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MaterialIntlProvider } from './MaterialIntlProvider';
+export type { MaterialIntlProviderProps, MaterialIntlProviderPhrases, } from './MaterialIntlProvider';

package/cjs/hooks/useCallbackProp.js

@@ -2,13 +2,9 @@
 
 var React = require('react');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var useCallbackProp = function useCallbackProp(cb) {
-  var cbRef = React__default.default.useRef(cb);
-  React__default.default.useEffect(function () {
+const useCallbackProp = cb => {
+  const cbRef = React.useRef(cb);
+  React.useEffect(() => {
     cbRef.current = cb;
   }, [cb]);
   return cbRef;

package/cjs/hooks/useDeepClonedCompareEffect.js

@@ -4,14 +4,10 @@ var React = require('react');
 var reactUse = require('react-use');
 var lodashEs = require('lodash-es');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var DEBOUNCE_TIME = 10;
-var useDeepClonedCompareEffect = function useDeepClonedCompareEffect(effect, deps) {
-  var _ref = React__default.default.useRef();
-  reactUse.useDebounce(function () {
+const DEBOUNCE_TIME = 10;
+const useDeepClonedCompareEffect = (effect, deps) => {
+  const _ref = React.useRef();
+  reactUse.useDebounce(() => {
     if (!_ref.current || !lodashEs.isEqual(deps, _ref.current)) {
       _ref.current = lodashEs.cloneDeep(deps);
       effect();

package/cjs/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components';
 export * from './hooks';
 export * from './material-config';
 export * from './material-fetch';

package/cjs/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var MaterialIntlProvider = require('./components/MaterialIntlProvider.js');
 var useCallbackProp = require('./hooks/useCallbackProp.js');
 var useDeepClonedCompareEffect = require('./hooks/useDeepClonedCompareEffect.js');
 var MaterialConfigProvider = require('./material-config/MaterialConfigProvider.js');
@@ -12,6 +13,7 @@ var withMaterial = require('./material-hoc/withMaterial.js');
 
 
 
+exports.MaterialIntlProvider = MaterialIntlProvider.default;
 exports.useCallbackProp = useCallbackProp.useCallbackProp;
 exports.useDeepClonedCompareEffect = useDeepClonedCompareEffect.useDeepClonedCompareEffect;
 exports.MaterialConfigProvider = MaterialConfigProvider.default;

package/cjs/material-config/MaterialConfigContext.js

@@ -3,8 +3,8 @@
 var React = require('react');
 var rxjs = require('rxjs');
 
-var MaterialConfigContext = React.createContext(null);
-var sessionKeySubject$ = new rxjs.BehaviorSubject(null);
+const MaterialConfigContext = React.createContext(null);
+const sessionKeySubject$ = new rxjs.BehaviorSubject(null);
 
 exports.MaterialConfigContext = MaterialConfigContext;
 exports.sessionKeySubject$ = sessionKeySubject$;

package/cjs/material-config/MaterialConfigProvider.js

@@ -2,54 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var MaterialConfigContext = require('./MaterialConfigContext.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var MaterialConfigProvider = function MaterialConfigProvider(_ref) {
-  var children = _ref.children,
-    apiOriginUrl = _ref.apiOriginUrl,
-    apiWsOriginUrl = _ref.apiWsOriginUrl,
-    _ref$orgNameShort = _ref.orgNameShort,
-    orgNameShortProp = _ref$orgNameShort === void 0 ? 'academy' : _ref$orgNameShort;
-  var _React$useState = React__default.default.useState(orgNameShortProp),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    orgNameShort = _React$useState2[0],
-    setOrgNameShort = _React$useState2[1];
-  var _React$useState3 = React__default.default.useState(null),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    sessionKey = _React$useState4[0],
-    setSessionKey = _React$useState4[1];
+const MaterialConfigProvider = ({
+  children,
+  apiOriginUrl,
+  apiWsOriginUrl,
+  orgNameShort: orgNameShortProp = 'academy'
+}) => {
+  const [orgNameShort, setOrgNameShort] = React.useState(orgNameShortProp);
+  const [sessionKey, setSessionKey] = React.useState(null);
   //
   // Update org name short.
   //
-  React__default.default.useEffect(function () {
-    return setOrgNameShort(orgNameShortProp);
-  }, [orgNameShortProp]);
+  React.useEffect(() => setOrgNameShort(orgNameShortProp), [orgNameShortProp]);
   //
   // Update session key when session key subject emits.
   //
-  React__default.default.useEffect(function () {
-    var sub = MaterialConfigContext.sessionKeySubject$.subscribe(setSessionKey);
-    return function () {
+  React.useEffect(() => {
+    const sub = MaterialConfigContext.sessionKeySubject$.subscribe(setSessionKey);
+    return () => {
       sub.unsubscribe();
     };
   }, []);
   //
   //
   //
-  return jsxRuntime.jsx(MaterialConfigContext.MaterialConfigContext.Provider, {
+  return React.createElement(MaterialConfigContext.MaterialConfigContext.Provider, {
     children: children,
     value: {
-      apiOriginUrl: apiOriginUrl,
-      apiWsOriginUrl: apiWsOriginUrl,
-      orgNameShort: orgNameShort,
-      sessionKey: sessionKey
+      apiOriginUrl,
+      apiWsOriginUrl,
+      orgNameShort,
+      sessionKey
     }
   });
 };

package/cjs/material-config/useMaterialConfig.js

@@ -3,8 +3,8 @@
 var React = require('react');
 var MaterialConfigContext = require('./MaterialConfigContext.js');
 
-var useMaterialConfig = function useMaterialConfig() {
-  var context = React.useContext(MaterialConfigContext.MaterialConfigContext);
+const useMaterialConfig = () => {
+  const context = React.useContext(MaterialConfigContext.MaterialConfigContext);
   if (context === undefined) {
     throw new Error('Oops, `useMaterialConfig` must be used within a `MaterialConfigProvider`');
   }

package/cjs/material-config/useMaterialConfigApiClientUpdate.js

@@ -1,20 +1,16 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var reactUse = require('react-use');
 var MaterialConfigContext = require('./MaterialConfigContext.js');
 
-var useMaterialConfigApiClientUpdate = function useMaterialConfigApiClientUpdate(callback) {
-  var context = React.useContext(MaterialConfigContext.MaterialConfigContext);
+const useMaterialConfigApiClientUpdate = callback => {
+  const context = React.useContext(MaterialConfigContext.MaterialConfigContext);
   if (!context) {
     throw new Error('Oops, Elice material component must be used within a `MaterialConfigProvider`');
   }
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isReady = _useState2[0],
-    setReady = _useState2[1];
-  reactUse.useDeepCompareEffect(function () {
+  const [isReady, setReady] = React.useState(false);
+  reactUse.useDeepCompareEffect(() => {
     var _a;
     callback({
       apiBaseUrl: context.apiOriginUrl,

package/cjs/material-fetch/useMaterialFetch.d.ts

@@ -67,7 +67,7 @@ export declare const useMaterialFetch: <MT extends enums.LectureMaterialType, R
         title: string;
     } | null;
 } & {
-    status: import("@elice/material-shared-types").APIStatus;
+    status: import("packages/elice-material-shared-types/es").APIStatus;
     refetch: (signal?: AbortSignal | undefined) => Promise<void>;
 };
 export {};

package/cjs/material-fetch/useMaterialFetch.js

@@ -1,6 +1,5 @@
 'use strict';
 
-require('react/jsx-runtime');
 require('react');
 require('../material-config/MaterialConfigContext.js');
 var useMaterialConfigApiClientUpdate = require('../material-config/useMaterialConfigApiClientUpdate.js');
@@ -27,8 +26,8 @@ var useMaterialFetchRaw = require('./useMaterialFetchRaw.js');
  *     eliceApiClientConfigs.init
  *   );
  */
-var useMaterialFetch = function useMaterialFetch(materialType, materialFetchFn, init) {
-  var isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(init);
+const useMaterialFetch = (materialType, materialFetchFn, init) => {
+  const isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(init);
   return useMaterialFetchRaw.useMaterialFetchRaw(materialType, materialFetchFn, isReady);
 };
 

package/cjs/material-fetch/useMaterialFetchRaw.js

@@ -1,12 +1,26 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var types = require('@elice/types');
 
-var _Object$freeze;
-var MATERIAL_FETCH_KEY_MAP = Object.freeze((_Object$freeze = {}, _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.Nothing, 'materialNothing'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.Note, 'materialNote'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.Video, 'materialVideo'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.PDF, 'materialPdf'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.Exercise, 'materialExercise'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.Quiz, 'materialQuiz'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.LegacyRunbox, 'materialLegacyRunbox'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.VideoFile, 'materialVideoFile'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.Live, 'materialLive'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.Assignment, 'materialAssignment'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.LMSPublicContent, 'materialLmsPublicContent'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.External, 'materialExternal'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.Survey, 'materialSurvey'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.Runbox, 'materialRunbox'), _rollupPluginBabelHelpers.defineProperty(_Object$freeze, types.enums.LectureMaterialType.Cloud, 'materialCloud'), _Object$freeze));
+const MATERIAL_FETCH_KEY_MAP = Object.freeze({
+  [types.enums.LectureMaterialType.Nothing]: 'materialNothing',
+  [types.enums.LectureMaterialType.Note]: 'materialNote',
+  [types.enums.LectureMaterialType.Video]: 'materialVideo',
+  [types.enums.LectureMaterialType.PDF]: 'materialPdf',
+  [types.enums.LectureMaterialType.Exercise]: 'materialExercise',
+  [types.enums.LectureMaterialType.Quiz]: 'materialQuiz',
+  [types.enums.LectureMaterialType.LegacyRunbox]: 'materialLegacyRunbox',
+  [types.enums.LectureMaterialType.VideoFile]: 'materialVideoFile',
+  [types.enums.LectureMaterialType.Live]: 'materialLive',
+  [types.enums.LectureMaterialType.Assignment]: 'materialAssignment',
+  [types.enums.LectureMaterialType.LMSPublicContent]: 'materialLmsPublicContent',
+  [types.enums.LectureMaterialType.External]: 'materialExternal',
+  [types.enums.LectureMaterialType.Survey]: 'materialSurvey',
+  [types.enums.LectureMaterialType.Runbox]: 'materialRunbox',
+  [types.enums.LectureMaterialType.Cloud]: 'materialCloud'
+});
 //
 //
 //
@@ -28,85 +42,54 @@ var MATERIAL_FETCH_KEY_MAP = Object.freeze((_Object$freeze = {}, _rollupPluginBa
  *     isReady // boolean
  *   );
  */
-var useMaterialFetchRaw = function useMaterialFetchRaw(materialType, materialFetchFn) {
-  var isReady = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  var _return = React.useRef({});
-  var materialKey = MATERIAL_FETCH_KEY_MAP[materialType];
-  var _createEmptyFetchRes = function _createEmptyFetchRes() {
-    var _ref;
-    return _ref = {}, _rollupPluginBabelHelpers.defineProperty(_ref, materialKey, null), _rollupPluginBabelHelpers.defineProperty(_ref, "materialLecturePage", null), _ref;
-  };
-  var _useState = React.useState(_createEmptyFetchRes),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    matFetchRes = _useState2[0],
-    setMatFetchRes = _useState2[1];
-  var _useState3 = React.useState('idle'),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    matFetchStatus = _useState4[0],
-    setMatFetchStatus = _useState4[1];
+const useMaterialFetchRaw = (materialType, materialFetchFn, isReady = true) => {
+  const _return = React.useRef({});
+  const materialKey = MATERIAL_FETCH_KEY_MAP[materialType];
+  const _createEmptyFetchRes = () => ({
+    [materialKey]: null,
+    materialLecturePage: null
+  });
+  const [matFetchRes, setMatFetchRes] = React.useState(_createEmptyFetchRes);
+  const [matFetchStatus, setMatFetchStatus] = React.useState('idle');
   /**
    * fetch material and lecture page
    */
-  var fetch = React.useCallback( /*#__PURE__*/function () {
-    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(signal) {
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setMatFetchStatus('pending');
-            return _context.abrupt("return", materialFetchFn(signal).then(function (resMaterialGet) {
-              return resMaterialGet[materialKey];
-            }).then(function (material) {
-              return Promise.all([material, apiClient.getOrgLecturePageResolve({
-                materialId: material.id,
-                materialType: materialType
-              }, {
-                signal: signal
-              }).then(function (resLecturePageResolve) {
-                return apiClient.getOrgLecturePageGet({
-                  lecturePageId: resLecturePageResolve.lecturePageId
-                }, {
-                  signal: signal
-                });
-              }).then(function (resLecturePageGet) {
-                return resLecturePageGet.lecturePage;
-              })]);
-            }).then(function (_ref3) {
-              var _setMatFetchRes;
-              var _ref4 = _rollupPluginBabelHelpers.slicedToArray(_ref3, 2),
-                material = _ref4[0],
-                materialLecturePage = _ref4[1];
-              setMatFetchRes((_setMatFetchRes = {}, _rollupPluginBabelHelpers.defineProperty(_setMatFetchRes, materialKey, material), _rollupPluginBabelHelpers.defineProperty(_setMatFetchRes, "materialLecturePage", materialLecturePage), _setMatFetchRes));
-              setMatFetchStatus('resolved');
-            }).catch(function (err) {
-              if (err.name !== 'AbortError') {
-                setMatFetchRes(_createEmptyFetchRes);
-                setMatFetchStatus('rejected');
-              }
-            }));
-          case 2:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(),
+  const fetch = React.useCallback(async signal => {
+    setMatFetchStatus('pending');
+    return materialFetchFn(signal).then(resMaterialGet => resMaterialGet[materialKey]).then(material => Promise.all([material, apiClient.getOrgLecturePageResolve({
+      materialId: material.id,
+      materialType
+    }, {
+      signal: signal
+    }).then(resLecturePageResolve => apiClient.getOrgLecturePageGet({
+      lecturePageId: resLecturePageResolve.lecturePageId
+    }, {
+      signal: signal
+    })).then(resLecturePageGet => resLecturePageGet.lecturePage)])).then(([material, materialLecturePage]) => {
+      setMatFetchRes({
+        [materialKey]: material,
+        materialLecturePage
+      });
+      setMatFetchStatus('resolved');
+    }).catch(err => {
+      if (err.name !== 'AbortError') {
+        setMatFetchRes(_createEmptyFetchRes);
+        setMatFetchStatus('rejected');
+      }
+    });
+  },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [materialKey, materialFetchFn]);
   //
   // emit `fetch` when `isReady` is changed
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!isReady) {
       return;
     }
-    var abortCtrl = new AbortController();
-    fetch(abortCtrl.signal).catch(function () {
-      return void 0;
-    });
-    return function () {
+    const abortCtrl = new AbortController();
+    fetch(abortCtrl.signal).catch(() => void 0);
+    return () => {
       abortCtrl.abort();
     };
   },

package/cjs/material-hoc/withMaterial.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { MaterialIntlProviderPhrases } from '../components/MaterialIntlProvider';
 import type { MaterialConfigApiClientUpdateCallback } from '../material-config';
 type AnyObject = Record<string, any>;
 /**
@@ -10,6 +11,16 @@ export interface WithMaterialOptions {
      * - ref: https://recoiljs.org/docs/api-reference/core/RecoilRoot/#props -> `override`
      */
     overrideRecoilScope?: boolean;
+    /**
+     * Phrases for `IntlProvider`.
+     */
+    phrases?: MaterialIntlProviderPhrases;
+}
+/**
+ * Common props for material components.
+ */
+export interface MaterialCommponentCommonProps {
+    locale?: string;
 }
 /**
  * HOC for material components.
@@ -18,7 +29,7 @@ export interface WithMaterialOptions {
  * - `<RecoilRoot />`
  * - `<IntlProvider />`
  */
-export declare const withMaterial: <P extends AnyObject>(Component: React.VFC<P>, eliceApiClientConfigInit: MaterialConfigApiClientUpdateCallback, options?: WithMaterialOptions) => React.VFC<P>;
+export declare const withMaterial: <P extends AnyObject>(Component: React.VFC<P & MaterialCommponentCommonProps>, eliceApiClientConfigInit: MaterialConfigApiClientUpdateCallback, options?: WithMaterialOptions) => React.VFC<P & MaterialCommponentCommonProps>;
 /**
  * HOC for material forward ref exotic components.
  *
@@ -26,5 +37,5 @@ export declare const withMaterial: <P extends AnyObject>(Component: React.VFC<P>
  * - `<RecoilRoot />`
  * - `<IntlProvider />`
  */
-export declare const withForwardRefMaterial: <T, P extends AnyObject>(Component: React.ForwardRefExoticComponent<P & React.RefAttributes<T>>, eliceApiClientConfigInit: MaterialConfigApiClientUpdateCallback, options?: WithMaterialOptions) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+export declare const withForwardRefMaterial: <T, P extends AnyObject>(Component: React.ForwardRefExoticComponent<P & MaterialCommponentCommonProps & React.RefAttributes<T>>, eliceApiClientConfigInit: MaterialConfigApiClientUpdateCallback, options?: WithMaterialOptions) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & MaterialCommponentCommonProps> & React.RefAttributes<T>>;
 export {};

package/cjs/material-hoc/withMaterial.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var recoil = require('recoil');
+var MaterialIntlProvider = require('../components/MaterialIntlProvider.js');
 require('../material-config/MaterialConfigContext.js');
 var useMaterialConfigApiClientUpdate = require('../material-config/useMaterialConfigApiClientUpdate.js');
 
@@ -17,27 +17,27 @@ var useMaterialConfigApiClientUpdate = require('../material-config/useMaterialCo
  * - `<RecoilRoot />`
  * - `<IntlProvider />`
  */
-var withMaterial = function withMaterial(Component, eliceApiClientConfigInit) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  return function (props) {
+const withMaterial = (Component, eliceApiClientConfigInit, options = {}) => {
+  return props => {
     var _a;
-    var isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(eliceApiClientConfigInit);
+    const isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(eliceApiClientConfigInit);
     // do not render component, if material config is not ready
     if (!isReady) {
-      return jsxRuntime.jsx(blocks.Flex, {
+      return React.createElement(blocks.Flex, {
         justify: "center",
         align: "center",
         width: "100%",
-        height: "100%",
-        children: jsxRuntime.jsx(blocks.Spinner, {
-          size: "small"
-        })
-      });
+        height: "100%"
+      }, React.createElement(blocks.Spinner, {
+        size: "small"
+      }));
     }
-    return jsxRuntime.jsx(recoil.RecoilRoot, {
-      override: (_a = options.overrideRecoilScope) !== null && _a !== void 0 ? _a : false,
-      children: jsxRuntime.jsx(Component, Object.assign({}, props))
-    });
+    return React.createElement(recoil.RecoilRoot, {
+      override: (_a = options.overrideRecoilScope) !== null && _a !== void 0 ? _a : false
+    }, React.createElement(MaterialIntlProvider.default, {
+      locale: props.locale,
+      phrases: options.phrases
+    }, React.createElement(Component, Object.assign({}, props))));
   };
 };
 /**
@@ -47,29 +47,29 @@ var withMaterial = function withMaterial(Component, eliceApiClientConfigInit) {
  * - `<RecoilRoot />`
  * - `<IntlProvider />`
  */
-var withForwardRefMaterial = function withForwardRefMaterial(Component, eliceApiClientConfigInit) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  return React.forwardRef(function (props, ref) {
+const withForwardRefMaterial = (Component, eliceApiClientConfigInit, options = {}) => {
+  return React.forwardRef((props, ref) => {
     var _a;
-    var isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(eliceApiClientConfigInit);
+    const isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(eliceApiClientConfigInit);
     // do not render component, if material config is not ready
     if (!isReady) {
-      return jsxRuntime.jsx(blocks.Flex, {
+      return React.createElement(blocks.Flex, {
         justify: "center",
         align: "center",
         width: "100%",
-        height: "100%",
-        children: jsxRuntime.jsx(blocks.Spinner, {
-          size: "small"
-        })
-      });
+        height: "100%"
+      }, React.createElement(blocks.Spinner, {
+        size: "small"
+      }));
     }
-    return jsxRuntime.jsx(recoil.RecoilRoot, {
-      override: (_a = options.overrideRecoilScope) !== null && _a !== void 0 ? _a : false,
-      children: jsxRuntime.jsx(Component, Object.assign({}, props, {
-        ref: ref
-      }))
-    });
+    return React.createElement(recoil.RecoilRoot, {
+      override: (_a = options.overrideRecoilScope) !== null && _a !== void 0 ? _a : false
+    }, React.createElement(MaterialIntlProvider.default, {
+      locale: props.locale,
+      phrases: options.phrases
+    }, React.createElement(Component, Object.assign({}, props, {
+      ref: ref
+    }))));
   });
 };
 

package/es/components/MaterialIntlProvider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type MaterialIntlProviderPhrases = Record<string, Record<string, string>>;
+export interface MaterialIntlProviderProps {
+    children?: React.ReactNode;
+    /** Locale code. (default: `ko`) */
+    locale?: string;
+    /** I18n phrases. */
+    phrases?: MaterialIntlProviderPhrases;
+}
+/**
+ * IntlProvider for material components.
+ */
+declare const MaterialIntlProvider: React.FC<MaterialIntlProviderProps>;
+export default MaterialIntlProvider;

package/es/components/MaterialIntlProvider.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+
+const INTL_DEFAULT_LOCALE = 'ko';
+const INTL_DEFAULT_PHRASES = {};
+/**
+ * IntlProvider for material components.
+ */
+const MaterialIntlProvider = ({
+  children,
+  locale = INTL_DEFAULT_LOCALE,
+  phrases = INTL_DEFAULT_PHRASES
+}) => {
+  const messages = React.useMemo(() => locale in phrases ? phrases[locale] : phrases[INTL_DEFAULT_LOCALE], [locale, phrases]);
+  return React.createElement(IntlProvider, {
+    children: children,
+    locale: locale,
+    defaultLocale: INTL_DEFAULT_LOCALE,
+    messages: messages
+  });
+};
+
+export { MaterialIntlProvider as default };

package/es/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MaterialIntlProvider } from './MaterialIntlProvider';
+export type { MaterialIntlProviderProps, MaterialIntlProviderPhrases, } from './MaterialIntlProvider';

package/es/hooks/useCallbackProp.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-var useCallbackProp = function useCallbackProp(cb) {
-  var cbRef = React.useRef(cb);
-  React.useEffect(function () {
+const useCallbackProp = cb => {
+  const cbRef = React.useRef(cb);
+  React.useEffect(() => {
     cbRef.current = cb;
   }, [cb]);
   return cbRef;

package/es/hooks/useDeepClonedCompareEffect.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { useDebounce } from 'react-use';
 import { isEqual, cloneDeep } from 'lodash-es';
 
-var DEBOUNCE_TIME = 10;
-var useDeepClonedCompareEffect = function useDeepClonedCompareEffect(effect, deps) {
-  var _ref = React.useRef();
-  useDebounce(function () {
+const DEBOUNCE_TIME = 10;
+const useDeepClonedCompareEffect = (effect, deps) => {
+  const _ref = React.useRef();
+  useDebounce(() => {
     if (!_ref.current || !isEqual(deps, _ref.current)) {
       _ref.current = cloneDeep(deps);
       effect();

package/es/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components';
 export * from './hooks';
 export * from './material-config';
 export * from './material-fetch';

package/es/index.js

@@ -1,3 +1,4 @@
+export { default as MaterialIntlProvider } from './components/MaterialIntlProvider.js';
 export { useCallbackProp } from './hooks/useCallbackProp.js';
 export { useDeepClonedCompareEffect } from './hooks/useDeepClonedCompareEffect.js';
 export { default as MaterialConfigProvider } from './material-config/MaterialConfigProvider.js';