@nethru/ui 1.0.53 → 1.0.55

package/dist/Editor.js

@@ -3,11 +3,12 @@ import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 import { EditorView } from "@codemirror/view";
 import { Box, Typography } from "@mui/material";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Editor({
   readOnly = false,
+  value,
   error = false,
   helperText,
   basicSetup,
@@ -17,18 +18,27 @@ export default function Editor({
   style,
   ...props
 }) {
+  const ref = useRef();
+  const [content, setContent] = useState('');
   const [focused, setFocused] = useState(false);
   const styles = useMemo(() => {
     return {
+      maxWidth: ref.current ? `${ref.current.offsetWidth}px` : 'unset',
       borderBottom: focused ? `3px solid ${error ? '#d32f2f' : '#1976d2'}` : `${!readOnly ? '2px' : '0px'} solid rgba(0, 0, 0, 0.42)`
     };
-  }, [readOnly, error, focused]);
+    // eslint-disable-next-line
+  }, [readOnly, error, focused, ref.current]);
   const handleUpdate = viewUpdate => {
     setFocused(viewUpdate.view.hasFocus);
     if (onUpdate) onUpdate(viewUpdate);
   };
+  useEffect(() => {
+    setTimeout(() => setContent(value), 100);
+  }, [value]);
   return /*#__PURE__*/_jsxs(Box, {
+    ref: ref,
     children: [/*#__PURE__*/_jsx(CodeMirror, {
+      value: content,
       editable: !readOnly,
       extensions: [jsonFormat ? json() : javascript({
         jsx: true

package/dist/Frame.js

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from "react";
 import { Box } from '@mui/material';
 import { SidebarContextProvider } from './sidebar/SidebarContext';
 import { variables } from './variables';
@@ -12,6 +13,8 @@ export default function Frame({
   menu,
   menuIcons = {}
 }) {
+  const ref = useRef();
+  const [width, setWidth] = useState('unset');
   const containerStyles = {
     display: 'flex',
     flexGrow: 1,
@@ -24,6 +27,17 @@ export default function Frame({
     overflow: 'auto',
     padding: '20px 40px'
   };
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new ResizeObserver(entries => {
+      const width = entries.length > 0 ? entries[0].borderBoxSize[0].inlineSize : 0;
+      setWidth(width > 0 ? `${width}px` : 'unset');
+    });
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [appBar, /*#__PURE__*/_jsxs(Box, {
       sx: containerStyles,
@@ -32,9 +46,13 @@ export default function Frame({
         icons: menuIcons,
         children: sideBar
       }), /*#__PURE__*/_jsxs(Box, {
+        ref: ref,
         component: "section",
         sx: contentStyles,
         children: [/*#__PURE__*/_jsx("main", {
+          style: {
+            maxWidth: width
+          },
           children: children
         }), footer]
       })]

package/dist/SearchableSelect.js

@@ -1,4 +1,4 @@
-import { Autocomplete, Box, Divider } from "@mui/material";
+import { Autocomplete, Box, Divider, Typography } from "@mui/material";
 import { TextField } from "@nethru/ui";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -30,6 +30,10 @@ export default function SearchableSelect({
     }),
     getOptionDisabled: option => option.type === 'divider',
     isOptionEqualToValue: (option, value) => option.id === value.id,
+    noOptionsText: /*#__PURE__*/_jsx(Typography, {
+      variant: "subtitle2",
+      children: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9 \uC5C6\uC74C"
+    }),
     ...props
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "main": "dist/index.js",
   "files": [
     "/dist"