@xqmsg/ui-core 0.18.7 → 0.19.0

package/dist/ui-core.esm.js

@@ -1,10 +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';
 
@@ -83,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
   })));
 };
@@ -95,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'
   });
 };
 
@@ -2856,22 +2858,31 @@ var NavigationMenuItem = function NavigationMenuItem(_ref) {
   var label = _ref.label,
       leftIcon = _ref.leftIcon,
       href = _ref.href,
+      to = _ref.to,
       rightIcon = _ref.rightIcon,
       isExternal = _ref.isExternal,
       isSelected = _ref.isSelected,
       onClick = _ref.onClick;
   var additionalProps = {};
+  var reactRouterLinkProps = {};
+
+  if (to) {
+    reactRouterLinkProps = {
+      to: to,
+      as: Link$3
+    };
+  }
 
   if (isExternal) {
     additionalProps = _extends$6({}, additionalProps, {
       referrerPolicy: 'no-referrer',
-      target: '_blank'
+      target: '_blank',
+      href: href,
+      isExternal: true
     });
   }
 
-  return /*#__PURE__*/React__default.createElement(Link$2, Object.assign({
-    href: href
-  }, additionalProps, {
+  return /*#__PURE__*/React__default.createElement(Link$2, Object.assign({}, reactRouterLinkProps, additionalProps, {
     onClick: onClick,
     display: "flex",
     alignItems: "center",
@@ -4300,6 +4311,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;
 
@@ -4326,5 +4418,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