@elice/material-external 1.260908.0 → 1.260915.0-edsmigration.0

package/cjs/components/material-external/MaterialExternal.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var muiSystem = require('@elice/mui-system');
-var material = require('@mui/material');
 var classnames = require('classnames');
 var MaterialExternalAdminContent = require('./MaterialExternalAdminContent.js');
 var MaterialExternalContent = require('./MaterialExternalContent.js');
@@ -32,7 +31,7 @@ var ExternalContainer = /*#__PURE__*/_styled__default.default("div", {
   styles: "display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:#fff",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var eliceTheme = muiSystem.createEliceTheme({
+var eliceTheme = edsMaterial.createEliceTheme({
   paletteMode: 'light',
   paletteName: 'purple'
 });
@@ -53,7 +52,7 @@ var MaterialExternal = function MaterialExternal(_ref) {
   var prefixCls = 'em-material-external';
   return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
     value: __intl,
-    children: jsxRuntime.jsx(material.ThemeProvider, {
+    children: jsxRuntime.jsx(edsMaterial.ThemeProvider, {
       theme: eliceTheme,
       children: jsxRuntime.jsx(ExternalContainer, {
         className: classnames__default.default(prefixCls, className),

package/cjs/components/material-external/MaterialExternalAdminContent.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var apiClient = require('@elice/api-client');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
 var MaterialExternalIframe = require('./MaterialExternalIframe.js');
 
@@ -39,10 +39,10 @@ var MaterialExternalAdminContent = function MaterialExternalAdminContent(_ref) {
   //
   //
   if (isLoading) {
-    return jsxRuntime.jsx(material.CircularProgress, {});
+    return jsxRuntime.jsx(edsMaterial.CircularProgress, {});
   }
   if (isError || !externalUrl) {
-    return jsxRuntime.jsx(material.Typography, {
+    return jsxRuntime.jsx(edsMaterial.Typography, {
       children: intl$1.formatMessage({
         id: 'external.status.rejected'
       })

package/cjs/components/material-external/MaterialExternalContent.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var types = require('@elice/types');
-var material = require('@mui/material');
 var MaterialExternalIframe = require('./MaterialExternalIframe.js');
 var MaterialExternalNewWindow = require('./MaterialExternalNewWindow.js');
 var MaterialExternalNotSupported = require('./MaterialExternalNotSupported.js');
@@ -44,14 +44,14 @@ var MaterialExternalContent = function MaterialExternalContent(_ref) {
     materialExternal = _useMaterialFetch.materialExternal,
     externalGetStatus = _useMaterialFetch.status;
   if (externalGetStatus === 'rejected') {
-    return jsxRuntime.jsx(material.Typography, {
+    return jsxRuntime.jsx(edsMaterial.Typography, {
       children: intl$1.formatMessage({
         id: 'external.status.rejected'
       })
     });
   }
   if (externalGetStatus === 'pending' || !materialExternal) {
-    return jsxRuntime.jsx(material.CircularProgress, {});
+    return jsxRuntime.jsx(edsMaterial.CircularProgress, {});
   }
   /**
    *

package/cjs/components/material-external/MaterialExternalNewWindow.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 var calendar = require('../../assets/calendar.png.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -38,13 +38,17 @@ var MaterialExternalNewWindow = function MaterialExternalNewWindow(_ref) {
   /**
    *
    */
-  var newTabReOpenContentPage = jsxRuntime.jsxs(material.Stack, {
-    gap: "2rem",
-    alignItems: "center",
-    children: [jsxRuntime.jsxs(material.Stack, {
-      gap: "1rem",
-      alignItems: "center",
-      children: [jsxRuntime.jsx(material.Box, {
+  var newTabReOpenContentPage = jsxRuntime.jsxs(edsMaterial.Stack, {
+    sx: {
+      gap: '2rem',
+      alignItems: 'center'
+    },
+    children: [jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        gap: '1rem',
+        alignItems: 'center'
+      },
+      children: [jsxRuntime.jsx(edsMaterial.Box, {
         component: "img",
         src: calendar.default,
         alt: "newWindow",
@@ -52,26 +56,32 @@ var MaterialExternalNewWindow = function MaterialExternalNewWindow(_ref) {
           width: '8rem',
           height: '6rem'
         }
-      }), jsxRuntime.jsxs(material.Stack, {
-        gap: "0.25rem",
-        alignItems: "center",
-        children: [jsxRuntime.jsx(material.Typography, {
+      }), jsxRuntime.jsxs(edsMaterial.Stack, {
+        sx: {
+          gap: '0.25rem',
+          alignItems: 'center'
+        },
+        children: [jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "h6",
-          color: "text.primary",
-          textAlign: "center",
+          sx: {
+            color: 'text.primary',
+            textAlign: 'center'
+          },
           children: intl$1.formatMessage({
             id: 'external.newWindow.title'
           })
-        }), jsxRuntime.jsx(material.Typography, {
+        }), jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "body2",
-          color: "text.secondary",
-          textAlign: "center",
+          sx: {
+            color: 'text.secondary',
+            textAlign: 'center'
+          },
           children: intl$1.formatMessage({
             id: 'external.newWindow.description'
           })
         })]
       })]
-    }), jsxRuntime.jsx(material.Button, {
+    }), jsxRuntime.jsx(edsMaterial.Button, {
       size: "small",
       onClick: function onClick() {
         return window.open(materialExternal === null || materialExternal === void 0 ? void 0 : materialExternal.externalUrl);
@@ -84,12 +94,16 @@ var MaterialExternalNewWindow = function MaterialExternalNewWindow(_ref) {
   /**
    * Open new tab external page after 5 seconds.
    */
-  var waitExternalPage = jsxRuntime.jsxs(material.Stack, {
-    gap: "0.5rem",
-    alignItems: "center",
-    children: [jsxRuntime.jsx(material.CircularProgress, {}), jsxRuntime.jsx(material.Typography, {
+  var waitExternalPage = jsxRuntime.jsxs(edsMaterial.Stack, {
+    sx: {
+      gap: '0.5rem',
+      alignItems: 'center'
+    },
+    children: [jsxRuntime.jsx(edsMaterial.CircularProgress, {}), jsxRuntime.jsx(edsMaterial.Typography, {
       variant: "body2",
-      color: "text.secondary",
+      sx: {
+        color: 'text.secondary'
+      },
       children: intl$1.formatMessage({
         id: 'external.loader.newWindow.description'
       })

package/cjs/components/material-external/MaterialExternalNotSupported.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 var emptyDefault = require('../../assets/empty-default.png.js');
 
 //
@@ -17,23 +17,29 @@ var MaterialExternalNotSupported = function MaterialExternalNotSupported() {
   //
   return (
     // ref: https://elicer.atlassian.net/browse/LXP-6090
-    jsxRuntime.jsxs(material.Stack, {
-      justifyContent: "center",
-      alignItems: "center",
-      padding: "2rem",
-      bgcolor: "#fff",
-      gap: "2rem",
-      width: "100%",
-      height: "100%",
-      children: [jsxRuntime.jsx(material.Box, {
+    jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '2rem',
+        bgcolor: '#fff',
+        gap: '2rem',
+        width: '100%',
+        height: '100%'
+      },
+      children: [jsxRuntime.jsx(edsMaterial.Box, {
         component: "img",
         src: emptyDefault.default,
         alt: "empty",
-        maxWidth: "7.5rem"
-      }), jsxRuntime.jsx(material.Typography, {
+        sx: {
+          maxWidth: '7.5rem'
+        }
+      }), jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "h6",
-        color: "text.primary",
-        textAlign: "center",
+        sx: {
+          color: 'text.primary',
+          textAlign: 'center'
+        },
         children: intl$1.formatMessage({
           id: 'external.notSupported'
         })

package/cjs/components/material-external/MaterialExternalRedirect.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -28,13 +28,17 @@ var MaterialExternalRedirect = function MaterialExternalRedirect(_ref) {
       window.clearTimeout(timeoutId);
     };
   }, [materialExternal]);
-  return jsxRuntime.jsxs(material.Stack, {
-    gap: "0.5rem",
-    alignItems: "center",
-    children: [jsxRuntime.jsx(material.CircularProgress, {}), jsxRuntime.jsx(material.Typography, {
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
+    sx: {
+      gap: '0.5rem',
+      alignItems: 'center'
+    },
+    children: [jsxRuntime.jsx(edsMaterial.CircularProgress, {}), jsxRuntime.jsx(edsMaterial.Typography, {
       variant: "body2",
-      color: "text.secondary",
-      textAlign: "center",
+      sx: {
+        color: 'text.secondary',
+        textAlign: 'center'
+      },
       children: intl$1.formatMessage({
         id: 'external.loader.redirect.description'
       })

package/es/components/material-external/MaterialExternal.js

@@ -1,8 +1,7 @@
 import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
+import { createEliceTheme, ThemeProvider } from '@elice/eds-material';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
-import { createEliceTheme } from '@elice/mui-system';
-import { ThemeProvider } from '@mui/material';
 import classnames from 'classnames';
 import MaterialExternalAdminContent from './MaterialExternalAdminContent.js';
 import MaterialExternalContent from './MaterialExternalContent.js';

package/es/components/material-external/MaterialExternalAdminContent.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { getOrgMaterialExternalTutorExternalUrlGet } from '@elice/api-client';
+import { CircularProgress, Typography } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { CircularProgress, Typography } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
 import MaterialExternalIframe from './MaterialExternalIframe.js';
 

package/es/components/material-external/MaterialExternalContent.js

@@ -1,10 +1,10 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { getOrgMaterialExternalGet, config } from '@elice/api-client';
+import { Typography, CircularProgress } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { useMaterialFetch } from '@elice/material-shared-utils';
 import { enums } from '@elice/types';
-import { Typography, CircularProgress } from '@mui/material';
 import MaterialExternalIframe from './MaterialExternalIframe.js';
 import MaterialExternalNewWindow from './MaterialExternalNewWindow.js';
 import MaterialExternalNotSupported from './MaterialExternalNotSupported.js';

package/es/components/material-external/MaterialExternalNewWindow.js

@@ -1,8 +1,8 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState } from 'react';
+import { Stack, Box, Typography, Button, CircularProgress } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { Stack, Box, Typography, Button, CircularProgress } from '@mui/material';
 import img from '../../assets/calendar.png.js';
 
 //
@@ -31,11 +31,15 @@ var MaterialExternalNewWindow = function MaterialExternalNewWindow(_ref) {
    *
    */
   var newTabReOpenContentPage = jsxs(Stack, {
-    gap: "2rem",
-    alignItems: "center",
+    sx: {
+      gap: '2rem',
+      alignItems: 'center'
+    },
     children: [jsxs(Stack, {
-      gap: "1rem",
-      alignItems: "center",
+      sx: {
+        gap: '1rem',
+        alignItems: 'center'
+      },
       children: [jsx(Box, {
         component: "img",
         src: img,
@@ -45,19 +49,25 @@ var MaterialExternalNewWindow = function MaterialExternalNewWindow(_ref) {
           height: '6rem'
         }
       }), jsxs(Stack, {
-        gap: "0.25rem",
-        alignItems: "center",
+        sx: {
+          gap: '0.25rem',
+          alignItems: 'center'
+        },
         children: [jsx(Typography, {
           variant: "h6",
-          color: "text.primary",
-          textAlign: "center",
+          sx: {
+            color: 'text.primary',
+            textAlign: 'center'
+          },
           children: intl.formatMessage({
             id: 'external.newWindow.title'
           })
         }), jsx(Typography, {
           variant: "body2",
-          color: "text.secondary",
-          textAlign: "center",
+          sx: {
+            color: 'text.secondary',
+            textAlign: 'center'
+          },
           children: intl.formatMessage({
             id: 'external.newWindow.description'
           })
@@ -77,11 +87,15 @@ var MaterialExternalNewWindow = function MaterialExternalNewWindow(_ref) {
    * Open new tab external page after 5 seconds.
    */
   var waitExternalPage = jsxs(Stack, {
-    gap: "0.5rem",
-    alignItems: "center",
+    sx: {
+      gap: '0.5rem',
+      alignItems: 'center'
+    },
     children: [jsx(CircularProgress, {}), jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
+      sx: {
+        color: 'text.secondary'
+      },
       children: intl.formatMessage({
         id: 'external.loader.newWindow.description'
       })

package/es/components/material-external/MaterialExternalNotSupported.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Stack, Box, Typography } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { Stack, Box, Typography } from '@mui/material';
 import img from '../../assets/empty-default.png.js';
 
 //
@@ -14,22 +14,28 @@ var MaterialExternalNotSupported = function MaterialExternalNotSupported() {
   return (
     // ref: https://elicer.atlassian.net/browse/LXP-6090
     jsxs(Stack, {
-      justifyContent: "center",
-      alignItems: "center",
-      padding: "2rem",
-      bgcolor: "#fff",
-      gap: "2rem",
-      width: "100%",
-      height: "100%",
+      sx: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '2rem',
+        bgcolor: '#fff',
+        gap: '2rem',
+        width: '100%',
+        height: '100%'
+      },
       children: [jsx(Box, {
         component: "img",
         src: img,
         alt: "empty",
-        maxWidth: "7.5rem"
+        sx: {
+          maxWidth: '7.5rem'
+        }
       }), jsx(Typography, {
         variant: "h6",
-        color: "text.primary",
-        textAlign: "center",
+        sx: {
+          color: 'text.primary',
+          textAlign: 'center'
+        },
         children: intl.formatMessage({
           id: 'external.notSupported'
         })

package/es/components/material-external/MaterialExternalRedirect.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
+import { Stack, CircularProgress, Typography } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { Stack, CircularProgress, Typography } from '@mui/material';
 
 //
 //
@@ -21,12 +21,16 @@ var MaterialExternalRedirect = function MaterialExternalRedirect(_ref) {
     };
   }, [materialExternal]);
   return jsxs(Stack, {
-    gap: "0.5rem",
-    alignItems: "center",
+    sx: {
+      gap: '0.5rem',
+      alignItems: 'center'
+    },
     children: [jsx(CircularProgress, {}), jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
-      textAlign: "center",
+      sx: {
+        color: 'text.secondary',
+        textAlign: 'center'
+      },
       children: intl.formatMessage({
         id: 'external.loader.redirect.description'
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-external",
-  "version": "1.260908.0",
+  "version": "1.260915.0-edsmigration.0",
   "description": "User view and editing components of Elice material external",
   "repository": {
     "type": "git",
@@ -19,23 +19,20 @@
   "sideEffects": false,
   "peerDependencies": {
     "@elice/api-client": "^1",
+    "@elice/eds-kit": "^1.260911.0",
+    "@elice/eds-material": "^1.260911.0",
     "@elice/intl": "^0",
-    "@elice/mui-elements": "^5",
-    "@elice/mui-system": "^5",
     "@elice/types": "^1",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@fortawesome/pro-regular-svg-icons": "^6",
     "@fortawesome/pro-solid-svg-icons": "^6",
-    "@mui/lab": "^5.0.0-alpha.112",
-    "@mui/material": "^5.10.16",
-    "@mui/x-data-grid": "^6.7.0",
-    "@mui/x-date-pickers": "^6.7.0",
+    "@mui/material": "^9.1.0",
     "@tanstack/react-query": "^4",
-    "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+    "react": "^18.0.0 || ^19.0.0",
     "react-use": "^17.0.0",
-    "@elice/material-shared-types": "1.260908.0",
-    "@elice/material-shared-utils": "1.260908.0"
+    "@elice/material-shared-types": "1.260915.0-edsmigration.0",
+    "@elice/material-shared-utils": "1.260915.0-edsmigration.0"
   },
   "dependencies": {
     "classnames": "^2.2.0",
@@ -43,19 +40,17 @@
   },
   "devDependencies": {
     "@elice/api-client": "1.260529.0",
+    "@elice/eds-kit": "1.260911.0",
+    "@elice/eds-material": "1.260911.0",
     "@elice/intl": "0.260526.0",
-    "@elice/mui-elements": "5.251204.0",
-    "@elice/mui-system": "5.251204.0",
     "@elice/rollup-config": "^1.260406.0",
     "@elice/types": "1.260608.0",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@fortawesome/pro-regular-svg-icons": "^6.4.2",
     "@fortawesome/pro-solid-svg-icons": "^6.4.2",
-    "@mui/lab": "^5.0.0-alpha.112",
-    "@mui/material": "^5.10.16",
-    "@mui/x-data-grid": "^6.7.0",
-    "@mui/x-date-pickers": "^6.7.0",
+    "@mui/material": "9.1.0",
+    "@mui/system": "9.1.0",
     "@tanstack/react-query": "^4.29.3",
     "@types/classnames": "^2.3.1",
     "@types/react": "^18.2.0",
@@ -67,8 +62,8 @@
     "react-use": "^17.2.4",
     "rollup": "^4.0.0",
     "typescript": "~5.9.3",
-    "@elice/material-shared-types": "1.260908.0",
-    "@elice/material-shared-utils": "1.260908.0"
+    "@elice/material-shared-types": "1.260915.0-edsmigration.0",
+    "@elice/material-shared-utils": "1.260915.0-edsmigration.0"
   },
   "scripts": {
     "start": "run-s watch",