@nethru/ui 2.0.16 → 2.1.1

package/base/AddableFormList.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useMemo } from "react";
 import { IconButton, Stack, Tooltip, Typography } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from '@mui/icons-material/Remove';
@@ -8,6 +8,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 const AddableFormList = /*#__PURE__*/forwardRef(({
   forms = [],
   renderForm,
+  renderButton = () => [true, true],
   onAdd,
   onRemove,
   readOnly,
@@ -18,6 +19,7 @@ const AddableFormList = /*#__PURE__*/forwardRef(({
   allowEmpty = false,
   ...props
 }, ref) => {
+  const removable = useMemo(() => allowEmpty || forms.length > 1, [allowEmpty, forms.length]);
   return /*#__PURE__*/_jsx(Stack, {
     ref: ref,
     gap: gap,
@@ -32,19 +34,20 @@ const AddableFormList = /*#__PURE__*/forwardRef(({
           alignItems: "start",
           gap: 1,
           marginTop: `${margins[index > 0 ? 1 : 0]}px`,
-          children: [showRemoveButton && /*#__PURE__*/_jsx(Tooltip, {
+          children: [showRemoveButton && renderButton(form, index)[0] && /*#__PURE__*/_jsx(Tooltip, {
             title: "\uC0AD\uC81C",
             children: /*#__PURE__*/_jsx(IconButton, {
               variant: "menu",
               onClick: _ => onRemove(index),
-              disabled: !allowEmpty && forms.length === 1,
+              disabled: !removable,
+              component: !removable ? 'span' : undefined,
               children: /*#__PURE__*/_jsx(RemoveIcon, {
                 sx: {
                   fontSize: 17
                 }
               })
             })
-          }), showAddButton && /*#__PURE__*/_jsx(Tooltip, {
+          }), showAddButton && renderButton(form, index)[1] && /*#__PURE__*/_jsx(Tooltip, {
             title: "\uCD94\uAC00",
             children: /*#__PURE__*/_jsx(IconButton, {
               variant: "menu",

package/base/datagrid/DataGrid.js

@@ -31,7 +31,7 @@ const DataGrid = /*#__PURE__*/forwardRef(({
     localeText: {
       ...koKR.components.MuiDataGrid.defaultProps.localeText,
       noRowsLabel: '항목이 없습니다.',
-      ...props.localText
+      ...props.localeText
     },
     slots: {
       toolbar: hideToolbar ? null : Toolbar,

package/base/editor/Editor.js

@@ -66,6 +66,9 @@ export default function Editor({
     '.cm-content .cm-selectionMatch': {
       backgroundColor: blue[100]
     },
+    '.cm-selectionLayer': {
+      zIndex: 'unset !important'
+    },
     '.cm-selectionLayer .cm-selectionBackground': {
       backgroundColor: `${blue[200]} !important`
     },

package/base/frame/sidebar/css/sidebar.module.css

@@ -10,6 +10,7 @@
 }
 .container.closed {
     width: calc(var(--primary-menu-width) + var(--secondary-menu-collapsed-width));
+    min-width: calc(var(--primary-menu-width) + var(--secondary-menu-collapsed-width));
 }
 
 

package/base/index.js

@@ -42,15 +42,12 @@ export * from './frame/sidebar/SidebarContext';
 export { default as Error } from "./error/Error";
 export { default as HttpError } from "./error/HttpError";
 export { default as AppendableFormList } from "./deprecated/AppendableFormList";
-export { default as AvatarDropdown } from "./deprecated/AvatarDropdown";
 export { default as CircularProgress } from "./deprecated/CircularProgress";
 export { default as FormLabel } from "./deprecated/FormLabel";
-export { default as GroupSelect } from "./deprecated/GroupSelect";
 export { default as ListItem } from "./deprecated/ListItem";
 export { default as ListItemDivider } from "./deprecated/ListItemDivider";
 export { default as ListItemGrid } from "./deprecated/ListItemGrid";
 export { default as ListItemText } from "./deprecated/ListItemText";
 export { default as ShadowedSection } from "./deprecated/ShadowedSection";
-export { default as StatusChip } from "./deprecated/StatusChip";
 export { default as TabbedSection } from "./deprecated/TabbedSection";
 export { default as Tabs } from "./deprecated/Tabs";

package/base/styles/createTheme.js

@@ -22,6 +22,7 @@ import * as formLabel from "./mui/formLabel";
 import * as outlinedInput from "./mui/outlinedInput";
 import * as formHelperText from "./mui/formHelperText";
 import * as inputLabel from "./mui/inputLabel";
+import * as inputAdornment from "./mui/inputAdornment";
 import * as popover from "./mui/popover";
 import * as paper from "./mui/paper";
 import * as list from "./mui/list";
@@ -72,6 +73,7 @@ export default function createTheme() {
       MuiFormControlLabel: formControlLabel.styles,
       MuiFormLabel: formLabel.styles,
       MuiInputLabel: inputLabel.styles,
+      MuiInputAdornment: inputAdornment.styles,
       MuiOutlinedInput: outlinedInput.styles,
       MuiFormHelperText: formHelperText.styles,
       MuiPopover: popover.styles,

package/base/styles/mui/dataGrid.js

@@ -54,13 +54,13 @@ export const styles = {
       '.MuiDataGrid-cell .MuiDataGrid-actions': {
         display: 'none'
       },
-      '&.Mui-hovered': {
+      '&:hover': {
         backgroundColor: grey[5],
         '.MuiDataGrid-cell .MuiDataGrid-actions': {
           display: 'block'
         }
       },
-      '&.Mui-selected, &.Mui-selected.Mui-hovered': {
+      '&.Mui-selected, &.Mui-selected:hover': {
         backgroundColor: blue[5]
       }
     },
@@ -104,7 +104,8 @@ export const styles = {
       }
     },
     overlayWrapperInner: {
-      ...typography.bodySmRegular
+      ...typography.bodySmRegular,
+      height: '60px !important'
     }
   }
 };

package/base/styles/mui/inputAdornment.js

@@ -0,0 +1,9 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodySmRegular
+    }
+  }
+};

package/base/styles/mui/outlinedInput.js

@@ -44,8 +44,7 @@ export const styles = {
       paddingLeft: 10,
       paddingRight: 10,
       '&.Mui-disabled': {
-        color: grey[500],
-        '-webkit-text-fill-color': grey[500]
+        color: grey[500]
       }
     },
     multiline: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.0.16",
+  "version": "2.1.1",
   "main": "base/index.js",
   "files": [
     "/base"

package/base/deprecated/AvatarDropdown.js

@@ -1,80 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Avatar, Box, IconButton } from '@mui/material';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Divider from '@mui/material/Divider';
-import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
-import { red } from '@mui/material/colors';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function AvatarDropdown({
-  name,
-  color,
-  bgcolor,
-  children,
-  onProfileClick,
-  onLogoutClick,
-  ...props
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const firstLetter = useMemo(() => {
-    return name && name.length > 0 ? name[0].toUpperCase() : "?";
-  }, [name]);
-  const handleClick = event => setAnchorEl(event.currentTarget);
-  const handleClose = () => setAnchorEl(null);
-  const styles = {
-    color: color ? color : '#fff',
-    bgcolor: bgcolor ? bgcolor : red[900],
-    width: 32,
-    height: 32,
-    fontSize: 16
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    ...props,
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      onClick: handleClick,
-      size: "small",
-      sx: {
-        ml: 2
-      },
-      children: /*#__PURE__*/_jsx(Avatar, {
-        sx: styles,
-        children: firstLetter
-      })
-    }), /*#__PURE__*/_jsxs(Menu, {
-      anchorEl: anchorEl,
-      open: open,
-      onClose: handleClose,
-      onClick: handleClose,
-      sx: {
-        '.MuiButtonBase-root.MuiMenuItem-root': {
-          fontSize: 14
-        }
-      },
-      children: [/*#__PURE__*/_jsxs(MenuItem, {
-        onClick: onProfileClick,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            sx: {
-              ...styles,
-              mr: 1,
-              fontSize: 13,
-              width: 22,
-              height: 22
-            },
-            children: firstLetter
-          })
-        }), name]
-      }), /*#__PURE__*/_jsx(Divider, {}), children, children && /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: onLogoutClick,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(LogoutRoundedIcon, {
-            fontSize: "small"
-          })
-        }), "\uB85C\uADF8\uC544\uC6C3"]
-      })]
-    })]
-  });
-}

package/base/deprecated/GroupSelect.js

@@ -1,67 +0,0 @@
-import { Autocomplete, TextField } from "@mui/material";
-import Paper from "@mui/material/Paper";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function GroupSelect({
-  id,
-  options,
-  groupKey,
-  value,
-  onSelect,
-  placeholder,
-  disableClearable = false,
-  sx,
-  ...props
-}) {
-  const styles = {
-    '.MuiInputLabel-root, .MuiInputBase-input': {
-      fontSize: '0.875rem'
-    }
-  };
-  const paperStyles = {
-    '& .MuiAutocomplete-groupLabel': {
-      fontSize: '0.8rem',
-      paddingTop: 0,
-      paddingBottom: 0
-    },
-    '& .MuiAutocomplete-option': {
-      color: '#333',
-      fontSize: '0.875rem',
-      paddingTop: '3px',
-      paddingBottom: '3px'
-    },
-    '& .MuiAutocomplete-noOptions': {
-      fontSize: '0.8rem'
-    }
-  };
-  const handleSelect = (event, value, reason) => {
-    if (reason !== 'selectOption') return;
-    if (onSelect) onSelect(id, value);
-  };
-  function CustomPaper(props) {
-    return /*#__PURE__*/_jsx(Paper, {
-      ...props,
-      sx: paperStyles
-    });
-  }
-  return /*#__PURE__*/_jsx(Autocomplete, {
-    id: id,
-    size: "small",
-    options: options,
-    groupBy: option => option[groupKey],
-    value: value,
-    onChange: handleSelect,
-    blurOnSelect: true,
-    disableClearable: disableClearable,
-    noOptionsText: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4",
-    PaperComponent: CustomPaper,
-    renderInput: params => /*#__PURE__*/_jsx(TextField, {
-      ...params,
-      label: placeholder
-    }),
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props
-  });
-}

package/base/deprecated/StatusChip.js

@@ -1,34 +0,0 @@
-import { Chip } from "@mui/material";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import ErrorIcon from "@mui/icons-material/Error";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function StatusChip({
-  id,
-  label,
-  status,
-  onOperate,
-  sx,
-  ...props
-}) {
-  const styles = {
-    '&': {
-      bgcolor: status === 'normal' ? '#4caf50' : '#fff'
-    },
-    '.MuiSvgIcon-root.MuiChip-deleteIcon': {
-      cursor: onOperate ? 'pointer' : 'default'
-    }
-  };
-  return /*#__PURE__*/_jsx(Chip, {
-    id: id,
-    label: label,
-    variant: status === 'normal' ? 'filled' : 'outlined',
-    color: status === 'normal' ? 'success' : 'default',
-    deleteIcon: status === 'normal' ? /*#__PURE__*/_jsx(CheckCircleIcon, {}) : /*#__PURE__*/_jsx(ErrorIcon, {}),
-    onDelete: _ => onOperate && onOperate(id, status),
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props
-  });
-}