@xqmsg/ui-core 0.18.8 → 0.19.1

package/dist/ui-core.esm.js

@@ -1,11 +1,10 @@
 import React__default, { memo, forwardRef, createElement, useMemo, useCallback, useRef, useEffect, useState } from 'react';
-import { Button as Button$2, Alert as Alert$1, AlertDescription, Flex, Box, Text as Text$2, Spinner, Checkbox, InputGroup, Input as Input$2, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, Tooltip, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, Link as Link$2, Table as Table$2, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, extendTheme } from '@chakra-ui/react';
+import { Button as Button$2, Alert as Alert$1, AlertDescription, Flex, Box, Text as Text$2, Spinner, Checkbox, InputGroup, Input as Input$2, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, Tooltip, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, Link as Link$2, Table as Table$2, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, extendTheme, ChakraProvider, useToast as useToast$1 } from '@chakra-ui/react';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import { debounce, truncate } from 'lodash-es';
 import { QuestionOutlineIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
 import { Link as Link$3 } from 'react-router-dom';
 import { HiOutlineRefresh } from 'react-icons/hi';
-import { ChakraProvider } from '@chakra-ui/provider';
 import { createBreakpoints, transparentize, mode, getColor } from '@chakra-ui/theme-tools';
 import { defineStyle } from '@chakra-ui/system';
 
@@ -84,7 +83,7 @@ var SvgNeutral = function SvgNeutral(props, ref) {
     ref: ref
   }, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
     d: "M7 4.5V4a.5.5 0 0 0-.5.5H7Zm.005 0h.5a.5.5 0 0 0-.5-.5v.5Zm0 .005v.5a.5.5 0 0 0 .5-.5h-.5Zm-.005 0h-.5a.5.5 0 0 0 .5.5v-.5Zm-.724 1.548a.5.5 0 1 0 .448.894l-.448-.894Zm.252.433-.224-.447.224.447Zm.708.569.485.12-.485-.12Zm-.472 1.89-.485-.12.485.12Zm.708.569.224.447-.224-.447Zm.252.433a.5.5 0 1 0-.448-.894l.448.894ZM12.5 7A5.5 5.5 0 0 1 7 12.5v1A6.5 6.5 0 0 0 13.5 7h-1ZM7 12.5A5.5 5.5 0 0 1 1.5 7h-1A6.5 6.5 0 0 0 7 13.5v-1ZM1.5 7A5.5 5.5 0 0 1 7 1.5v-1A6.5 6.5 0 0 0 .5 7h1ZM7 1.5A5.5 5.5 0 0 1 12.5 7h1A6.5 6.5 0 0 0 7 .5v1ZM7 5h.005V4H7v1Zm-.495-.5v.005h1V4.5h-1Zm.5-.495H7v1h.005v-1Zm.495.5V4.5h-1v.005h1Zm-.776 2.442.027-.014-.447-.894-.028.014.448.894Zm.027-.014L6.28 8.824l.97.243.472-1.891-.97-.243Zm.945 3.028.028-.014-.448-.894-.027.014.447.894ZM6.279 8.824a1 1 0 0 0 1.417 1.137l-.447-.894-.97-.243Zm.472-1.89.97.242a1 1 0 0 0-1.417-1.137l.447.894Z",
-    fill: "#3C3C43",
+    fill: "current",
     fillOpacity: 0.6
   })));
 };
@@ -96,9 +95,11 @@ var Memo$1 = /*#__PURE__*/memo(ForwardRef$1);
  */
 
 var Neutral = function Neutral(_ref) {
-  var boxSize = _ref.boxSize;
+  var color = _ref.color,
+      boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$1, {
-    boxSize: boxSize
+    boxSize: boxSize,
+    fill: color || '#3C3C43'
   });
 };
 
@@ -433,6 +434,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     flexDir: orientation === 'horizontal' ? 'row' : 'column'
   }, steps.map(function (step, idx) {
     return /*#__PURE__*/React__default.createElement(Flex, {
+      key: idx,
       alignItems: "center",
       pr: orientation === 'horizontal' ? '16px' : 0,
       py: "4px"
@@ -734,10 +736,13 @@ var Dropdown = function Dropdown(_ref) {
       optionIndex = _ref.optionIndex;
   var DropdownContent = useMemo(function () {
     return options.map(function (option, idx) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React__default.createElement(Box, {
+      return /*#__PURE__*/React__default.createElement(Box, {
+        key: idx,
+        width: "100%"
+      }, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React__default.createElement(Box, {
         color: colors.label.secondary.light,
         fontSize: "13px",
-        width: "fit-content",
+        width: "100%",
         fontWeight: "bold",
         px: "8px",
         bg: "inherit",
@@ -1421,8 +1426,9 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       }
     },
     ref: scrollRef
-  }, localValues.length ? localValues.map(function (option) {
+  }, localValues.length ? localValues.map(function (option, idx) {
     return /*#__PURE__*/React__default.createElement(Box, {
+      key: idx,
       mr: "4px",
       width: "fit-content",
       h: "16px",
@@ -1680,6 +1686,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     ref: scrollRef
   }, lastestFormValueToArray.length ? lastestFormValueToArray.map(function (label, index) {
     return /*#__PURE__*/React__default.createElement(Box, {
+      key: index,
       mr: "4px",
       border: tokenIndex === index ? "1px solid " + colors.border.focus : 'none',
       borderRadius: "full",
@@ -2010,6 +2017,7 @@ function FormSection(_ref) {
         disabled = _ref2.disabled,
         defaultValue = _ref2.defaultValue;
     return /*#__PURE__*/React__default.createElement(Input, {
+      key: name,
       control: form.control,
       label: label,
       inputType: inputType,
@@ -2930,15 +2938,17 @@ var NavigationMenu = function NavigationMenu(_ref) {
     height: "100%",
     overflowY: "auto",
     width: "220px"
-  }, sortedGroupedMenuItems == null ? void 0 : sortedGroupedMenuItems.map(function (menuItemGroup) {
+  }, sortedGroupedMenuItems == null ? void 0 : sortedGroupedMenuItems.map(function (menuItemGroup, idx) {
     return /*#__PURE__*/React__default.createElement(Box, {
+      key: idx,
       _notLast: {
         paddingBottom: '8px'
       }
     }, menuItemGroup.groupHeader && /*#__PURE__*/React__default.createElement(NavigationMenuHeader, {
       label: menuItemGroup.groupHeader
-    }), menuItemGroup.groupMenuItems.map(function (item) {
+    }), menuItemGroup.groupMenuItems.map(function (item, idx) {
       return /*#__PURE__*/React__default.createElement(NavigationMenuItem, Object.assign({}, item, {
+        key: idx,
         isSelected: selectedMenuItem === item.label,
         onClick: function onClick() {
           return setSelectedMenuItem(item.label);
@@ -3086,7 +3096,9 @@ var EmptyTable = function EmptyTable() {
   }, function (_, i) {
     return i + 1;
   }).map(function (i) {
-    return /*#__PURE__*/React__default.createElement(Tr, null, /*#__PURE__*/React__default.createElement(Td, {
+    return /*#__PURE__*/React__default.createElement(Tr, {
+      key: i
+    }, /*#__PURE__*/React__default.createElement(Td, {
       height: "26px",
       opacity: getOpacity(i)
     }));
@@ -3120,18 +3132,24 @@ function Table(_ref) {
     _odd: {
       bg: colors.label.primary.dark
     }
-  }, columnsAsConst.map(function (column) {
+  }, columnsAsConst.map(function (column, idx) {
     return (
       /*#__PURE__*/
       // @ts-ignore
-      React__default.createElement(Th, null, headers[column])
+      React__default.createElement(Th, {
+        key: idx
+      }, headers[column])
     );
-  }))), /*#__PURE__*/React__default.createElement(Tbody, null, body.map(function (row) {
-    return /*#__PURE__*/React__default.createElement(Tr, null, columnsAsConst.map(function (column) {
+  }))), /*#__PURE__*/React__default.createElement(Tbody, null, body.map(function (row, idx) {
+    return /*#__PURE__*/React__default.createElement(Tr, {
+      key: idx
+    }, columnsAsConst.map(function (column, idx) {
       return (
         /*#__PURE__*/
         // @ts-ignore
-        React__default.createElement(Td, null, row[column])
+        React__default.createElement(Td, {
+          key: idx
+        }, row[column])
       );
     }));
   }))) : /*#__PURE__*/React__default.createElement(EmptyTable, null), loadMore && loading !== undefined && body.length ? /*#__PURE__*/React__default.createElement(TableLoadingRows, {
@@ -3166,8 +3184,10 @@ var TabsWrapper = function TabsWrapper(_ref) {
     borderBottom: 0,
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0
-  }, navItems.map(function (navItem) {
-    return /*#__PURE__*/React__default.createElement(Tab, null, navItem);
+  }, navItems.map(function (navItem, idx) {
+    return /*#__PURE__*/React__default.createElement(Tab, {
+      key: idx
+    }, navItem);
   })), children);
 };
 
@@ -4272,7 +4292,8 @@ var ToolbarBreadcrumbs = function ToolbarBreadcrumbs(_ref) {
     height: "26px"
   }, filteredPageList.map(function (page, i) {
     return /*#__PURE__*/React__default.createElement(Flex, {
-      alignItems: "center"
+      alignItems: "center",
+      key: i
     }, /*#__PURE__*/React__default.createElement(ToolbarBreadcrumbItem, {
       page: getPageType(i),
       pageLabel: page.label,
@@ -4310,6 +4331,87 @@ var Toolbar = function Toolbar(_ref) {
   }, children, " ")));
 };
 
+/**
+ * A functional React component utilized to render the `Toast` component
+ */
+
+var Toast = function Toast(_ref) {
+  var variant = _ref.variant,
+      message = _ref.message,
+      buttonText = _ref.buttonText,
+      onClick = _ref.onClick;
+  var Icon = useMemo(function () {
+    switch (variant) {
+      case 'error':
+        return /*#__PURE__*/React__default.createElement(Error$1, {
+          boxSize: "16px"
+        });
+
+      case 'neutral':
+        return /*#__PURE__*/React__default.createElement(Neutral, {
+          boxSize: "16px",
+          color: "white"
+        });
+
+      case 'positive':
+        return /*#__PURE__*/React__default.createElement(Positive, {
+          boxSize: "16px"
+        });
+
+      case 'warning':
+        return /*#__PURE__*/React__default.createElement(Warning, {
+          boxSize: "16px"
+        });
+
+      default:
+        return null;
+    }
+  }, [variant]);
+  return /*#__PURE__*/React__default.createElement(Flex, {
+    alignItems: "center",
+    width: "fit-content",
+    height: "32px",
+    p: "8px",
+    bg: "#151515D9",
+    borderColor: "#9999991A",
+    borderRadius: "8px"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    pr: "8px"
+  }, Icon), /*#__PURE__*/React__default.createElement(Text$2, {
+    pr: "16px",
+    fontSize: "13px",
+    color: colors.label.primary.dark
+  }, message), onClick && buttonText && /*#__PURE__*/React__default.createElement(Flex, {
+    ml: "auto",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(Button$2, {
+    color: colors.fill.action,
+    style: {
+      background: 'transparent',
+      border: 'transparent',
+      boxShadow: 'none'
+    },
+    _hover: {
+      bg: 'transparent',
+      border: 'transparent',
+      boxShadow: 'none'
+    },
+    onClick: onClick
+  }, buttonText)));
+};
+
+var useToast = function useToast(props) {
+  var toast = useToast$1();
+  return function () {
+    return toast({
+      position: props.position,
+      render: function render() {
+        return /*#__PURE__*/React__default.createElement(Toast, Object.assign({}, props));
+      }
+    });
+  };
+};
+
 function formatErrorResponse(error) {
   var _error$response, _error$response$data;
 
@@ -4336,5 +4438,5 @@ function formatErrorResponse(error) {
   };
 }
 
-export { Banner, Breadcrumbs, Button, Checkmark, ChevronDown, ChevronRight, Clock, Close, Dropdown$1 as Dropdown, Error$1 as Error, FileFill, FileOutline, FolderAddFill, FolderAddOutline, FolderFill, FolderOutline, Form, FormSection, Google, GoogleButton, GoogleDrive, Group, Home, Image, Input, Layout, Link, LoadingIndicator, Menu, Microsoft, MicrosoftButton, MicrosoftOneDrive, NavigationMenu, Neutral, Positive, Search, Settings, SpinnerButton, Table, TableFill, TableOutline, TabsWrapper, Text, Toolbar, Trash, Warning, XQThemeProvider, colors, formatErrorResponse };
+export { Banner, Breadcrumbs, Button, Checkmark, ChevronDown, ChevronRight, Clock, Close, Dropdown$1 as Dropdown, Error$1 as Error, FileFill, FileOutline, FolderAddFill, FolderAddOutline, FolderFill, FolderOutline, Form, FormSection, Google, GoogleButton, GoogleDrive, Group, Home, Image, Input, Layout, Link, LoadingIndicator, Menu, Microsoft, MicrosoftButton, MicrosoftOneDrive, NavigationMenu, Neutral, Positive, Search, Settings, SpinnerButton, Table, TableFill, TableOutline, TabsWrapper, Text, Toolbar, Trash, Warning, XQThemeProvider, colors, formatErrorResponse, useToast };
 //# sourceMappingURL=ui-core.esm.js.map