@nethru/ui 2.0.8 → 2.0.10

package/base/ColumnedSection.js

@@ -8,6 +8,7 @@ const ColumnedSection = /*#__PURE__*/forwardRef(({
   contents = [],
   spacing = 5,
   breakpoints,
+  showBox = true,
   ...props
 }, ref) => {
   const arrangedBreakpoints = useMemo(() => {
@@ -35,7 +36,7 @@ const ColumnedSection = /*#__PURE__*/forwardRef(({
       item: true,
       ...arrangedBreakpoints,
       children: [labels[index], /*#__PURE__*/_jsx(Box, {
-        className: "MuiGrid-box",
+        className: showBox ? 'MuiGrid-box' : undefined,
         children: content
       })]
     }, index))

package/base/LabelContentFormList.js

@@ -0,0 +1,30 @@
+import React, { forwardRef } from "react";
+import { Box, Stack } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const LabelContentFormList = /*#__PURE__*/forwardRef(({
+  hgap = 3,
+  vgap = 6,
+  labelWidth = 130,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(Stack, {
+    ref: ref,
+    gap: vgap,
+    ...props,
+    children: children.filter(form => form instanceof Array && form.length >= 2).map((form, index) => /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: hgap,
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          width: labelWidth,
+          wordBreak: 'break-all'
+        },
+        children: form[0]
+      }), form[1]]
+    }, index))
+  });
+});
+export default LabelContentFormList;

package/base/MainHeader.js

@@ -1,12 +1,16 @@
-import { Button, Stack, Typography } from "@mui/material";
 import { forwardRef } from "react";
+import { Button, IconButton, Stack, Typography } from "@mui/material";
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import { grey } from "./colors";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const MainHeader = /*#__PURE__*/forwardRef(({
   title,
+  enableBackward = false,
   editable = false,
   edit = false,
+  onBackwardClick,
   onEditClick,
   onConfirmClick,
   onCancelClick,
@@ -25,9 +29,19 @@ const MainHeader = /*#__PURE__*/forwardRef(({
       mb: 2.5
     },
     ...props,
-    children: [/*#__PURE__*/_jsx(Typography, {
-      variant: "headline1",
-      children: title
+    children: [/*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: 2,
+      children: [enableBackward && /*#__PURE__*/_jsx(IconButton, {
+        onClick: onBackwardClick,
+        children: /*#__PURE__*/_jsx(ArrowBackIosNewIcon, {
+          sx: backwardStyles
+        })
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "headline1",
+        children: title
+      })]
     }), rightSlot && /*#__PURE__*/_jsx(_Fragment, {
       children: rightSlot
     }), !rightSlot && editable && /*#__PURE__*/_jsxs(Stack, {
@@ -53,4 +67,10 @@ const MainHeader = /*#__PURE__*/forwardRef(({
     })]
   });
 });
-export default MainHeader;
+export default MainHeader;
+const backwardStyles = {
+  fontSize: 22,
+  path: {
+    fill: grey[900]
+  }
+};

package/base/index.js

@@ -17,10 +17,11 @@ export { default as ConfirmDialog } from "./dialog/ConfirmDialog";
 export { default as DataGrid } from "./datagrid/DataGrid";
 export { default as Dialog } from "./dialog/Dialog";
 export { default as DropdownButton } from "./DropdownButton";
-export { default as FormContent } from "./FormContent";
-export { default as HelpTooltipIcon } from "./HelpTooltipIcon";
 export { default as Editor } from "./editor/Editor";
+export { default as FormContent } from "./FormContent";
 export { default as Frame } from "./frame/Frame";
+export { default as HelpTooltipIcon } from "./HelpTooltipIcon";
+export { default as LabelContentFormList } from "./LabelContentFormList";
 export { default as MainHeader } from "./MainHeader";
 export { default as MenuItem } from "./MenuItem";
 export { default as PropertyTable } from "./PropertyTable";

package/base/styles/mui/formLabel.js

@@ -3,9 +3,9 @@ export const styles = {
   styleOverrides: {
     root: {
       fontFamily: typography.fontFamily,
-      ...typography.bodyMdMedium,
+      ...typography.bodyMdSemibold,
       '&.MuiFormLabel-colorPrimary': {
-        ...typography.bodyMdMedium
+        ...typography.bodyMdSemibold
       }
     }
   }

package/package.json

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