@nethru/ui 2.0.10 → 2.0.12

package/base/{deprecated/ReferenceChipList.js → ReferenceChipList.js}

@@ -1,17 +1,19 @@
 import { Chip, Stack, Link } from "@mui/material";
+import { forwardRef, useCallback } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function ReferenceChipList({
+const ReferenceChipList = /*#__PURE__*/forwardRef(({
   references,
   onClick,
   chipStyles,
   chipProps,
   sx,
   ...props
-}) {
-  const handleClick = (id, event) => {
+}, ref) => {
+  const handleClick = useCallback((id, event) => {
     if (onClick) onClick(id, event);
-  };
+  }, [onClick]);
   return /*#__PURE__*/_jsx(Stack, {
+    ref: ref,
     direction: "row",
     gap: 0.5,
     sx: {
@@ -40,7 +42,7 @@ export default function ReferenceChipList({
       }, index);
     })
   });
-}
+});
 function ReferenceChip({
   name,
   sx,
@@ -56,4 +58,5 @@ function ReferenceChip({
     },
     ...props
   });
-}
+}
+export default ReferenceChipList;

package/base/assets/icons.js

@@ -398,4 +398,90 @@ export const SettingsOutlinedIcon = createSvgIcon( /*#__PURE__*/_jsx("svg", {
     d: "M11.2885 16.6152H12.7115L12.9538 15.25C13.2436 15.1667 13.4936 15.0679 13.7038 14.9537C13.9141 14.8398 14.1205 14.6872 14.323 14.496L15.6385 14.946L16.3595 13.727L15.3152 12.8422C15.3871 12.5449 15.423 12.2642 15.423 12C15.423 11.7358 15.3871 11.4551 15.3152 11.1578L16.3595 10.273L15.6385 9.054L14.323 9.504C14.1205 9.31283 13.9141 9.16025 13.7038 9.04625C13.4936 8.93208 13.2436 8.83333 12.9538 8.75L12.7115 7.38475H11.2885L11.0463 8.75C10.7564 8.83333 10.5064 8.93208 10.2963 9.04625C10.0859 9.16025 9.8795 9.31283 9.677 9.504L8.3615 9.054L7.6405 10.273L8.68475 11.1578C8.61292 11.4551 8.577 11.7358 8.577 12C8.577 12.2642 8.61292 12.5449 8.68475 12.8422L7.6405 13.727L8.3615 14.946L9.677 14.496C9.8795 14.6872 10.0859 14.8398 10.2963 14.9537C10.5064 15.0679 10.7564 15.1667 11.0463 15.25L11.2885 16.6152ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM5.30775 20.5C4.80258 20.5 4.375 20.325 4.025 19.975C3.675 19.625 3.5 19.1974 3.5 18.6923V5.30775C3.5 4.80258 3.675 4.375 4.025 4.025C4.375 3.675 4.80258 3.5 5.30775 3.5H18.6923C19.1974 3.5 19.625 3.675 19.975 4.025C20.325 4.375 20.5 4.80258 20.5 5.30775V18.6923C20.5 19.1974 20.325 19.625 19.975 19.975C19.625 20.325 19.1974 20.5 18.6923 20.5H5.30775ZM5.30775 19H18.6923C18.7692 19 18.8398 18.9679 18.9038 18.9038C18.9679 18.8398 19 18.7692 19 18.6923V5.30775C19 5.23075 18.9679 5.16025 18.9038 5.09625C18.8398 5.03208 18.7692 5 18.6923 5H5.30775C5.23075 5 5.16025 5.03208 5.09625 5.09625C5.03208 5.16025 5 5.23075 5 5.30775V18.6923C5 18.7692 5.03208 18.8398 5.09625 18.9038C5.16025 18.9679 5.23075 19 5.30775 19Z",
     fill: "#656565"
   })
-}), 'SettingsOutlined');
+}), 'SettingsOutlined');
+export const CopyIcon = 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: "M9.05775 17.5C8.55258 17.5 8.125 17.325 7.775 16.975C7.425 16.625 7.25 16.1974 7.25 15.6923V4.30775C7.25 3.80258 7.425 3.375 7.775 3.025C8.125 2.675 8.55258 2.5 9.05775 2.5H17.4423C17.9474 2.5 18.375 2.675 18.725 3.025C19.075 3.375 19.25 3.80258 19.25 4.30775V15.6923C19.25 16.1974 19.075 16.625 18.725 16.975C18.375 17.325 17.9474 17.5 17.4423 17.5H9.05775ZM5.55775 21C5.05258 21 4.625 20.825 4.275 20.475C3.925 20.125 3.75 19.6974 3.75 19.1923V6.30775H5.25V19.1923C5.25 19.2693 5.28208 19.3398 5.34625 19.4038C5.41025 19.4679 5.48075 19.5 5.55775 19.5H15.4423V21H5.55775Z",
+    fill: "#7B7B7B"
+  })
+}), 'Copy');
+export const DeleteIcon = 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.30775 20.5017C6.80258 20.5017 6.375 20.3267 6.025 19.9767C5.675 19.6267 5.5 19.1991 5.5 18.6939V6.00169H4.5V4.50169H9V3.61719H15V4.50169H19.5V6.00169H18.5V18.6939C18.5 19.1991 18.325 19.6267 17.975 19.9767C17.625 20.3267 17.1974 20.5017 16.6923 20.5017H7.30775ZM9.404 17.0017H10.9037V8.00169H9.404V17.0017ZM13.0962 17.0017H14.596V8.00169H13.0962V17.0017Z",
+    fill: "#7B7B7B"
+  })
+}), 'Delete');
+export const EditIcon = 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: "M6.55556 17.4444H7.66389L15.2667 9.84167L14.1583 8.73333L6.55556 16.3361V17.4444ZM5 19V15.6944L15.2667 5.44722C15.4222 5.30463 15.594 5.19444 15.7819 5.11667C15.9699 5.03889 16.1676 5 16.375 5C16.5824 5 16.7833 5.03889 16.9778 5.11667C17.1722 5.19444 17.3407 5.31111 17.4833 5.46667L18.5528 6.55556C18.7083 6.69815 18.8218 6.86667 18.8931 7.06111C18.9644 7.25556 19 7.45 19 7.64444C19 7.85185 18.9644 8.04954 18.8931 8.2375C18.8218 8.42546 18.7083 8.59722 18.5528 8.75278L8.30556 19H5ZM14.7028 9.29722L14.1583 8.73333L15.2667 9.84167L14.7028 9.29722Z",
+    fill: "#7B7B7B"
+  })
+}), 'Edit');
+export const EditCircledIcon = createSvgIcon( /*#__PURE__*/_jsxs("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("rect", {
+    width: "24",
+    height: "24",
+    rx: "12",
+    fill: "#20B476",
+    fillOpacity: "0.1"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M5.39844 18.5984H8.14806L16.2576 10.4889L13.508 7.73928L5.39844 15.8488V18.5984ZM6.8649 16.4574L13.508 9.81432L14.1826 10.4889L7.53947 17.132H6.8649V16.4574Z",
+    fill: "#20B476"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M16.6682 5.61291C16.3822 5.32695 15.9203 5.32695 15.6343 5.61291L14.2925 6.95472L17.0422 9.70434L18.384 8.36253C18.6699 8.07657 18.6699 7.61463 18.384 7.32867L16.6682 5.61291Z",
+    fill: "#20B476"
+  })]
+}), 'EditCircled');
+export const BroadcastIcon = 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: "M13.5631 12.0031C13.5631 12.5803 13.2511 13.0795 12.7831 13.3447V19.8031H11.2231V13.3447C10.7551 13.0717 10.4431 12.5803 10.4431 12.0031C10.4431 11.1451 11.1451 10.4431 12.0031 10.4431C12.8611 10.4431 13.5631 11.1451 13.5631 12.0031ZM12.0031 7.32313C9.42133 7.32313 7.32313 9.42133 7.32313 12.0031C7.32313 13.3603 7.90813 14.5849 8.83633 15.4351L9.94392 14.3275C9.29653 13.7581 8.88313 12.9313 8.88313 12.0031C8.88313 10.2793 10.2793 8.88313 12.0031 8.88313C13.7269 8.88313 15.1231 10.2793 15.1231 12.0031C15.1231 12.9313 14.7097 13.7581 14.0623 14.3275L15.1699 15.4351C16.0981 14.5849 16.6831 13.3603 16.6831 12.0031C16.6831 9.42133 14.5849 7.32313 12.0031 7.32313ZM12.0031 4.20312C7.69753 4.20312 4.20312 7.69753 4.20312 12.0031C4.20312 14.2261 5.13913 16.2229 6.62893 17.6503L7.73653 16.5427C6.52753 15.4039 5.76313 13.7893 5.76313 12.0031C5.76313 8.56333 8.56333 5.76313 12.0031 5.76313C15.4429 5.76313 18.2431 8.56333 18.2431 12.0031C18.2431 13.7893 17.4787 15.4039 16.2697 16.5427L17.3773 17.6503C18.8671 16.2229 19.8031 14.2261 19.8031 12.0031C19.8031 7.69753 16.3087 4.20312 12.0031 4.20312Z",
+    fill: "#7B7B7B"
+  })
+}), 'Broadcast');
+export const ApprovalIcon = 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: "M10.95 15.55L16.6 9.9L15.175 8.475L10.95 12.7L8.85 10.6L7.425 12.025L10.95 15.55ZM12 22C9.68333 21.4167 7.77083 20.0875 6.2625 18.0125C4.75417 15.9375 4 13.6333 4 11.1V5L12 2L20 5V11.1C20 13.6333 19.2458 15.9375 17.7375 18.0125C16.2292 20.0875 14.3167 21.4167 12 22ZM12 19.9C13.7333 19.35 15.1667 18.25 16.3 16.6C17.4333 14.95 18 13.1167 18 11.1V6.375L12 4.125L6 6.375V11.1C6 13.1167 6.56667 14.95 7.7 16.6C8.83333 18.25 10.2667 19.35 12 19.9Z",
+    fill: "#7B7B7B"
+  })
+}), 'Approval');
+export const DisapprovalIcon = 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: "M12 16C12.2833 16 12.5208 15.9042 12.7125 15.7125C12.9042 15.5208 13 15.2833 13 15C13 14.7167 12.9042 14.4792 12.7125 14.2875C12.5208 14.0958 12.2833 14 12 14C11.7167 14 11.4792 14.0958 11.2875 14.2875C11.0958 14.4792 11 14.7167 11 15C11 15.2833 11.0958 15.5208 11.2875 15.7125C11.4792 15.9042 11.7167 16 12 16ZM11 12H13V7H11V12ZM12 22C9.68333 21.4167 7.77083 20.0875 6.2625 18.0125C4.75417 15.9375 4 13.6333 4 11.1V5L12 2L20 5V11.1C20 13.6333 19.2458 15.9375 17.7375 18.0125C16.2292 20.0875 14.3167 21.4167 12 22ZM12 19.9C13.7333 19.35 15.1667 18.25 16.3 16.6C17.4333 14.95 18 13.1167 18 11.1V6.375L12 4.125L6 6.375V11.1C6 13.1167 6.56667 14.95 7.7 16.6C8.83333 18.25 10.2667 19.35 12 19.9Z",
+    fill: "#7B7B7B"
+  })
+}), 'Disapproval');

package/base/error/Error.js

@@ -1,4 +1,4 @@
-import { Box, Button, Paper, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import CampaignIcon from '@mui/icons-material/Campaign';
 import { useNavigate } from "react-router-dom";
 import { useCallback } from "react";
@@ -20,48 +20,36 @@ export default function Error({
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    sx: {
-      backgroundColor: 'red'
-    },
-    children: [/*#__PURE__*/_jsxs(Paper, {
-      variant: "outlined",
-      square: false,
-      sx: {
-        padding: 3,
-        width: 568,
-        height: 280
-      },
-      children: [/*#__PURE__*/_jsx(Box, {
-        align: "center",
-        children: /*#__PURE__*/_jsx(CampaignIcon, {
-          sx: {
-            color: '#777',
-            '&': {
-              fontSize: 50
-            }
+    children: [/*#__PURE__*/_jsx(Box, {
+      align: "center",
+      children: /*#__PURE__*/_jsx(CampaignIcon, {
+        sx: {
+          color: '#777',
+          '&': {
+            fontSize: 50
           }
-        })
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "h1",
-        fontSize: 30,
+        }
+      })
+    }), /*#__PURE__*/_jsxs(Stack, {
+      width: 300,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "headline1",
         sx: {
           mt: 3,
           mb: 3
         },
         children: title
       }), /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
-        fontSize: 15,
+        variant: "bodyXlMedium",
         children: body
-      }), /*#__PURE__*/_jsx(Box, {
-        align: "center",
-        mt: 6,
-        children: /*#__PURE__*/_jsx(Button, {
-          size: "large",
-          onClick: handleClick,
-          children: buttonText
-        })
       })]
+    }), /*#__PURE__*/_jsx(Box, {
+      align: "center",
+      mt: 10,
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: handleClick,
+        children: buttonText
+      })
     }), footer]
   });
 }

package/base/index.js

@@ -7,6 +7,7 @@ export { colors };
 export { borderRadius, shadow, globalStyles, createTheme };
 export { default as AccordionSummary } from "./AccordionSummary";
 export { default as AddableFormList } from "./AddableFormList";
+export { default as Alert } from "./Alert";
 export { default as AlertDialog } from "./dialog/AlertDialog";
 export { default as AppBar } from "./frame/AppBar";
 export { default as Brand } from "./frame/Brand";
@@ -26,6 +27,7 @@ export { default as MainHeader } from "./MainHeader";
 export { default as MenuItem } from "./MenuItem";
 export { default as PropertyTable } from "./PropertyTable";
 export { default as Radio } from "./Radio";
+export { default as ReferenceChipList } from "./ReferenceChipList";
 export { default as SearchableSelect } from "./SearchableSelect";
 export { default as SearchTextField } from "./SearchTextField";
 export { default as SectionLabel } from "./SectionLabel";
@@ -46,7 +48,6 @@ 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 ReferenceChipList } from "./deprecated/ReferenceChipList";
 export { default as ShadowedSection } from "./deprecated/ShadowedSection";
 export { default as StatusChip } from "./deprecated/StatusChip";
 export { default as TabbedSection } from "./deprecated/TabbedSection";

package/base/styles/globalStyles.js

@@ -13,7 +13,7 @@ const globalStyles = {
     '--secondary-menu-zindex': 1101,
     '--secondary-menu-toggler-zindex': 1102
   },
-  'html, body': {
+  'html, body, #root': {
     margin: 0,
     height: '100%'
   },

package/base/styles/mui/button.js

@@ -199,6 +199,29 @@ export const error = {
     };
   }
 };
+export const preview = {
+  outlined: (ownerState, theme) => {
+    return ownerState.color === 'preview' && ownerState.variant === 'outlined' && {
+      color: theme.palette.preview.contrastText,
+      backgroundColor: theme.palette.preview.main,
+      borderColor: grey[700],
+      ':hover, &.Mui-focusVisible': {
+        color: theme.palette.preview.contrastText,
+        backgroundColor: '#d8fcfc',
+        borderColor: grey[700]
+      },
+      ':active': {
+        color: theme.palette.preview.contrastText,
+        backgroundColor: '#abffff',
+        borderColor: grey[700]
+      },
+      ':disabled': {
+        color: grey[400],
+        backgroundColor: grey[150]
+      }
+    };
+  }
+};
 export const crud = {
   contained: (ownerState, theme) => {
     return ownerState.color === 'crud' && ownerState.variant === 'contained' && {
@@ -238,6 +261,7 @@ export const styles = {
       ...error.contained(ownerState, theme),
       ...error.outlined(ownerState, theme),
       ...error.text(ownerState, theme),
+      ...preview.outlined(ownerState, theme),
       ...crud.contained(ownerState, theme),
       fontFamily: typography.fontFamily,
       borderRadius: borderRadius[2],

package/base/styles/mui/outlinedInput.js

@@ -6,7 +6,7 @@ export const styles = {
     root: ({
       ownerState
     }) => ({
-      height: 36,
+      height: !ownerState.multiline ? 36 : undefined,
       backgroundColor: '#fff',
       borderRadius: borderRadius[2],
       '& .MuiInputBase-input::placeholder': {
@@ -48,6 +48,9 @@ export const styles = {
         '-webkit-text-fill-color': grey[500]
       }
     },
+    multiline: {
+      padding: '10px 10px'
+    },
     sizeSmall: undefined
   }
 };

package/base/styles/palette.js

@@ -20,6 +20,10 @@ const palette = {
     main: blue[50],
     contrastText: blue[500]
   },
+  preview: {
+    main: '#eafbfb',
+    contrastText: grey[900]
+  },
   blue: {
     main: blue[500],
     contrastText: blue[700]

package/package.json

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