@nethru/ui 2.0.3 → 2.0.5

package/base/AccordionSummary.js

@@ -0,0 +1,52 @@
+import { forwardRef } from "react";
+import { Stack, Typography } from "@mui/material";
+import MuiAccordionSummary from "@mui/material/AccordionSummary";
+import { ExpandMoreIcon, NethruBulletIcon } from "./assets/icons";
+import { grey } from "./colors";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AccordionSummary = /*#__PURE__*/forwardRef(({
+  expandable = true,
+  subcontent,
+  children,
+  sx,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(MuiAccordionSummary, {
+    ref: ref,
+    expandIcon: expandable ? /*#__PURE__*/_jsx(ExpandMoreIcon, {
+      sx: expandMoreStyles
+    }) : undefined,
+    sx: {
+      pointerEvents: 'none',
+      ...sx
+    },
+    ...props,
+    children: /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: 1.5,
+      children: [/*#__PURE__*/_jsx(NethruBulletIcon, {
+        sx: bulletStyles
+      }), children, subcontent && /*#__PURE__*/_jsx(Typography, {
+        variant: "bodySmSemibold",
+        color: grey[600],
+        children: subcontent
+      })]
+    })
+  });
+});
+export default AccordionSummary;
+const expandMoreStyles = {
+  pointerEvents: 'auto',
+  fontSize: 24,
+  path: {
+    fill: grey[900]
+  }
+};
+const bulletStyles = {
+  fontSize: 18,
+  path: {
+    fill: grey[800]
+  }
+};

package/base/AddableFormList.js

@@ -13,6 +13,8 @@ const AddableFormList = /*#__PURE__*/forwardRef(({
   readOnly,
   gap = 2,
   margins = [5, 5],
+  showAddButton = true,
+  showRemoveButton = true,
   ...props
 }, ref) => {
   return /*#__PURE__*/_jsx(Stack, {
@@ -29,20 +31,28 @@ const AddableFormList = /*#__PURE__*/forwardRef(({
           alignItems: "start",
           gap: 1,
           marginTop: `${margins[index > 0 ? 1 : 0]}px`,
-          children: [/*#__PURE__*/_jsx(Tooltip, {
+          children: [showRemoveButton && /*#__PURE__*/_jsx(Tooltip, {
             title: "\uC0AD\uC81C",
             children: /*#__PURE__*/_jsx(IconButton, {
-              color: "crud",
+              variant: "menu",
               onClick: _ => onRemove(index),
               disabled: forms.length === 1,
-              children: /*#__PURE__*/_jsx(RemoveIcon, {})
+              children: /*#__PURE__*/_jsx(RemoveIcon, {
+                sx: {
+                  fontSize: 17
+                }
+              })
             })
-          }), /*#__PURE__*/_jsx(Tooltip, {
+          }), showAddButton && /*#__PURE__*/_jsx(Tooltip, {
             title: "\uCD94\uAC00",
             children: /*#__PURE__*/_jsx(IconButton, {
-              color: "crud",
+              variant: "menu",
               onClick: _ => onAdd(index),
-              children: /*#__PURE__*/_jsx(AddIcon, {})
+              children: /*#__PURE__*/_jsx(AddIcon, {
+                sx: {
+                  fontSize: 17
+                }
+              })
             })
           })]
         })]

package/base/Switch.js

@@ -10,6 +10,7 @@ const Switch = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/_jsx(FormControlLabel, {
     ref: ref,
     label: label,
+    labelPlacement: "start",
     control: /*#__PURE__*/_jsx(MuiSwitch, {
       ...props,
       color: "info"

package/base/assets/icons.js

@@ -300,6 +300,17 @@ export const CollapseIcon = createSvgIcon( /*#__PURE__*/_jsx("svg", {
     fill: "#333333"
   })
 }), 'Collapse');
+export const ExpandMoreIcon = createSvgIcon( /*#__PURE__*/_jsx("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.40531 8.96412L6.35156 10.0181L12.0053 15.6719L17.6591 10.0181L16.6053 8.96412L12.0053 13.5641L7.40531 8.96412Z",
+    fill: "#7B7B7B"
+  })
+}), 'Expand');
 export const MonitoringIcon = createSvgIcon( /*#__PURE__*/_jsx("svg", {
   width: "24",
   height: "24",

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

@@ -50,9 +50,6 @@
 }
 
 
-.icon {
-    margin: 4px 15px 0px 16px;
-}
 .icon > svg {
     width: 24px;
     height: 24px;
@@ -65,5 +62,5 @@
     line-height: 1.4;
     letter-spacing: 0;
     white-space: nowrap;
-    overflow-x: hidden;
+    overflow: hidden;
 }

package/base/index.js

@@ -5,6 +5,7 @@ import globalStyles from './styles/globalStyles';
 import createTheme from './styles/createTheme';
 export { colors };
 export { borderRadius, shadow, globalStyles, createTheme };
+export { default as AccordionSummary } from "./AccordionSummary";
 export { default as AddableFormList } from "./AddableFormList";
 export { default as AlertDialog } from "./dialog/AlertDialog";
 export { default as AppBar } from "./frame/AppBar";
@@ -32,9 +33,6 @@ export { default as Switch } from "./Switch";
 export * from './frame/sidebar/SidebarContext';
 export { default as Error } from "./error/Error";
 export { default as HttpError } from "./error/HttpError";
-export { default as Accordion } from "./deprecated/Accordion";
-export { default as AccordionDetails } from "./deprecated/AccordionDetails";
-export { default as AccordionSummary } from "./deprecated/AccordionSummary";
 export { default as AppendableFormList } from "./deprecated/AppendableFormList";
 export { default as AvatarDropdown } from "./deprecated/AvatarDropdown";
 export { default as CircularProgress } from "./deprecated/CircularProgress";

package/base/styles/createTheme.js

@@ -2,6 +2,9 @@ import { createTheme as createMuiTheme } from "@mui/material";
 import typography from "./typography";
 import palette from "./palette";
 import * as cssBaseline from "./mui/cssBaseline";
+import * as accordion from "./mui/accordion";
+import * as accordionSummary from "./mui/accordionSummary";
+import * as accordionDetails from "./mui/accordionDetails";
 import * as buttonBase from "./mui/buttonBase";
 import * as icon from "./mui/icon";
 import * as button from "./mui/button";
@@ -48,6 +51,9 @@ export default function createTheme() {
   theme = createMuiTheme(theme, {
     components: {
       MuiCssBaseline: cssBaseline.styles,
+      MuiAccordion: accordion.styles,
+      MuiAccordionSummary: accordionSummary.styles,
+      MuiAccordionDetails: accordionDetails.styles,
       MuiButtonBase: buttonBase.styles,
       MuiButton: button.styles,
       MuiToggleButton: toggleButton.styles,

package/base/styles/mui/accordion.js

@@ -0,0 +1,16 @@
+import { blueGrey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: {
+      backgroundColor: blueGrey.contentBg,
+      boxShadow: 'none',
+      margin: '32px 0px',
+      '&.Mui-expanded': {
+        margin: '32px 0px'
+      },
+      '&:before': {
+        display: 'none'
+      }
+    }
+  }
+};

package/base/styles/mui/accordionDetails.js

@@ -0,0 +1,7 @@
+export const styles = {
+  styleOverrides: {
+    root: {
+      padding: '24px 0px 0px 0px'
+    }
+  }
+};

package/base/styles/mui/accordionSummary.js

@@ -0,0 +1,21 @@
+import { grey } from "../../colors";
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      minHeight: 42,
+      padding: '0px 0px',
+      borderBottom: `1px ${grey[300]} solid`,
+      '&.Mui-expanded': {
+        minHeight: 42
+      }
+    },
+    content: {
+      ...typography.headline2,
+      margin: '0px 0px',
+      '&.Mui-expanded': {
+        margin: '0px 0px'
+      }
+    }
+  }
+};

package/base/styles/mui/dataGrid.js

@@ -67,24 +67,31 @@ export const styles = {
     rowReorderCell: {
       color: grey[700]
     },
+    'row--editing': {
+      boxShadow: 'none'
+    },
     cell: ({
       ownerState
     }) => ({
-      minHeight: '45px !important',
-      paddingTop: 10,
-      paddingBottom: 10,
+      minHeight: '40px !important',
       '&.MuiTypography-bold': {
         fontWeight: 'bold'
       },
       '&.MuiTypography-greyed': {
         color: grey[600]
       },
-      '&:focus, &:focus-within': {
+      '&:focus': {
+        outline: ownerState?.editable ? `solid ${blue[500]} 1px` : 'none'
+      },
+      '&:focus-within': {
         outline: ownerState?.editable ? `solid ${blue[500]} 1px` : 'none'
       },
       '&.MuiDataGrid-cell--editing': {
         boxShadow: 'none',
-        '&:focus, &:focus-within': {
+        '&:focus': {
+          outline: `solid ${blue[500]} 1px`
+        },
+        '&:focus-within': {
           outline: `solid ${blue[500]} 1px`
         }
       }

package/base/styles/mui/grid.js

@@ -1,6 +1,9 @@
 import { grey } from "../../colors";
 import borderRadius from "../borderRadius";
 export const styles = {
+  defaultProps: {
+    columnSpacing: 5
+  },
   styleOverrides: {
     item: {
       '.MuiGrid-box': {

package/base/styles/mui/iconButton.js

@@ -27,7 +27,7 @@ export const styles = {
     },
     style: {
       '&': {
-        backgroundColor: undefined,
+        backgroundColor: grey[5],
         borderRadius: borderRadius[2],
         '&:active': {
           backgroundColor: grey[10],

package/package.json

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

package/base/deprecated/Accordion.js

@@ -1,45 +0,0 @@
-import MuiAccordion from "@mui/material/Accordion";
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  border: '1px solid #eaeaea',
-  boxShadow: 'none',
-  '.MuiAccordionDetails-root': {
-    pt: 0,
-    pl: 8,
-    pr: 8
-  },
-  '.MuiFormLabel-root.MuiInputLabel-root': {
-    fontSize: '14px'
-  },
-  '.MuiInputBase-input.MuiInput-input': {
-    color: '#555',
-    fontSize: '15px'
-  },
-  '.MuiTabs-root.MuiTabs-vertical': {
-    mt: 2
-  },
-  '.MuiTabs-root.MuiTabs-vertical .MuiButtonBase-root.MuiTab-root': {
-    fontSize: '14px',
-    minWidth: '32px',
-    maxWidth: '32px'
-  },
-  '.MuiButtonBase-root.MuiToggleButton-root': {
-    pt: '1px',
-    pb: '1px',
-    fontSize: '12px'
-  }
-};
-export default function Accordion({
-  children,
-  sx,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(MuiAccordion, {
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props,
-    children: children
-  });
-}

package/base/deprecated/AccordionDetails.js

@@ -1,19 +0,0 @@
-import MuiAccordionDetails from "@mui/material/AccordionDetails";
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  mb: 2
-};
-export default function AccordionDetails({
-  children,
-  sx,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(MuiAccordionDetails, {
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props,
-    children: children
-  });
-}

package/base/deprecated/AccordionSummary.js

@@ -1,35 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import MuiAccordionSummary from "@mui/material/AccordionSummary";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export default function AccordionSummary({
-  title,
-  desc,
-  children,
-  ...props
-}) {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [title && /*#__PURE__*/_jsx(MuiAccordionSummary, {
-      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
-      ...props,
-      children: /*#__PURE__*/_jsxs(Stack, {
-        direction: "row",
-        alignItems: "flex-end",
-        gap: 1,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          children: title
-        }), desc && /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          color: "#aaa",
-          children: desc
-        })]
-      })
-    }), !title && /*#__PURE__*/_jsx(MuiAccordionSummary, {
-      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
-      ...props,
-      children: children
-    })]
-  });
-}