@xqmsg/ui-core 0.18.8 → 0.19.1

package/dist/components/icons/neutral/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface NeutralProps {
     boxSize: number | string;
+    color?: string;
 }
 /**
  * A functional React component utilized to render the `Neutral` icon component

package/dist/components/toast/Toast.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ToastProps } from '.';
+declare const meta: Meta<ToastProps>;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ToastProps>;

package/dist/components/toast/index.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+export declare type ToastVariant = 'positive' | 'warning' | 'error' | 'neutral';
+export interface ToastProps {
+    variant: ToastVariant;
+    message: ReactNode;
+    buttonText?: string;
+    onClick?: () => void;
+}
+/**
+ * A functional React component utilized to render the `Toast` component
+ */
+export declare const Toast: React.FC<ToastProps>;

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,6 @@
+import { ToastPosition } from '@chakra-ui/react';
+import React from 'react';
+import { ToastProps } from '../components/toast';
+export declare const useToast: (props: ToastProps & {
+    position: ToastPosition;
+}) => () => React.Key;

package/dist/index.d.ts

@@ -16,5 +16,6 @@ export * from './components/tabs';
 export * from './components/text';
 export * from './theme/provider';
 export * from './components/toolbar';
+export * from './hooks/useToast';
 export * from './components/form/utils/formErrors';
 export * from './theme/foundations/colors';

package/dist/theme/provider/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChakraProviderProps } from '@chakra-ui/provider';
+import { ChakraProviderProps } from '@chakra-ui/react';
 /**
  * A functional React wrapper component utilized to consume the custom XQ theme via `ChakraProvider`
  */

package/dist/ui-core.cjs.development.js

@@ -12,7 +12,6 @@ var lodash = require('lodash');
 var icons = require('@chakra-ui/icons');
 var reactRouterDom = require('react-router-dom');
 var hi = require('react-icons/hi');
-var provider = require('@chakra-ui/provider');
 var themeTools = require('@chakra-ui/theme-tools');
 var system = require('@chakra-ui/system');
 
@@ -91,7 +90,7 @@ var SvgNeutral = function SvgNeutral(props, ref) {
     ref: ref
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.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
   })));
 };
@@ -103,9 +102,11 @@ var Memo$1 = /*#__PURE__*/React.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'
   });
 };
 
@@ -440,6 +441,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     flexDir: orientation === 'horizontal' ? 'row' : 'column'
   }, steps.map(function (step, idx) {
     return /*#__PURE__*/React__default.createElement(react.Flex, {
+      key: idx,
       alignItems: "center",
       pr: orientation === 'horizontal' ? '16px' : 0,
       py: "4px"
@@ -741,10 +743,13 @@ var Dropdown = function Dropdown(_ref) {
       optionIndex = _ref.optionIndex;
   var DropdownContent = React.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(react.Box, {
+      return /*#__PURE__*/React__default.createElement(react.Box, {
+        key: idx,
+        width: "100%"
+      }, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React__default.createElement(react.Box, {
         color: colors.label.secondary.light,
         fontSize: "13px",
-        width: "fit-content",
+        width: "100%",
         fontWeight: "bold",
         px: "8px",
         bg: "inherit",
@@ -1428,8 +1433,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(react.Box, {
+      key: idx,
       mr: "4px",
       width: "fit-content",
       h: "16px",
@@ -1687,6 +1693,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     ref: scrollRef
   }, lastestFormValueToArray.length ? lastestFormValueToArray.map(function (label, index) {
     return /*#__PURE__*/React__default.createElement(react.Box, {
+      key: index,
       mr: "4px",
       border: tokenIndex === index ? "1px solid " + colors.border.focus : 'none',
       borderRadius: "full",
@@ -2017,6 +2024,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,
@@ -2937,15 +2945,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(react.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);
@@ -3093,7 +3103,9 @@ var EmptyTable = function EmptyTable() {
   }, function (_, i) {
     return i + 1;
   }).map(function (i) {
-    return /*#__PURE__*/React__default.createElement(react.Tr, null, /*#__PURE__*/React__default.createElement(react.Td, {
+    return /*#__PURE__*/React__default.createElement(react.Tr, {
+      key: i
+    }, /*#__PURE__*/React__default.createElement(react.Td, {
       height: "26px",
       opacity: getOpacity(i)
     }));
@@ -3127,18 +3139,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(react.Th, null, headers[column])
+      React__default.createElement(react.Th, {
+        key: idx
+      }, headers[column])
     );
-  }))), /*#__PURE__*/React__default.createElement(react.Tbody, null, body.map(function (row) {
-    return /*#__PURE__*/React__default.createElement(react.Tr, null, columnsAsConst.map(function (column) {
+  }))), /*#__PURE__*/React__default.createElement(react.Tbody, null, body.map(function (row, idx) {
+    return /*#__PURE__*/React__default.createElement(react.Tr, {
+      key: idx
+    }, columnsAsConst.map(function (column, idx) {
       return (
         /*#__PURE__*/
         // @ts-ignore
-        React__default.createElement(react.Td, null, row[column])
+        React__default.createElement(react.Td, {
+          key: idx
+        }, row[column])
       );
     }));
   }))) : /*#__PURE__*/React__default.createElement(EmptyTable, null), loadMore && loading !== undefined && body.length ? /*#__PURE__*/React__default.createElement(TableLoadingRows, {
@@ -3173,8 +3191,10 @@ var TabsWrapper = function TabsWrapper(_ref) {
     borderBottom: 0,
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0
-  }, navItems.map(function (navItem) {
-    return /*#__PURE__*/React__default.createElement(react.Tab, null, navItem);
+  }, navItems.map(function (navItem, idx) {
+    return /*#__PURE__*/React__default.createElement(react.Tab, {
+      key: idx
+    }, navItem);
   })), children);
 };
 
@@ -4177,7 +4197,7 @@ var customXQChakraTheme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends$
 var XQThemeProvider = function XQThemeProvider(_ref) {
   var children = _ref.children,
       cssVarsRoot = _ref.cssVarsRoot;
-  return /*#__PURE__*/React__default.createElement(provider.ChakraProvider, {
+  return /*#__PURE__*/React__default.createElement(react.ChakraProvider, {
     theme: customXQChakraTheme,
     resetCSS: true,
     cssVarsRoot: cssVarsRoot
@@ -4279,7 +4299,8 @@ var ToolbarBreadcrumbs = function ToolbarBreadcrumbs(_ref) {
     height: "26px"
   }, filteredPageList.map(function (page, i) {
     return /*#__PURE__*/React__default.createElement(react.Flex, {
-      alignItems: "center"
+      alignItems: "center",
+      key: i
     }, /*#__PURE__*/React__default.createElement(ToolbarBreadcrumbItem, {
       page: getPageType(i),
       pageLabel: page.label,
@@ -4317,6 +4338,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 = React.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(react.Flex, {
+    alignItems: "center",
+    width: "fit-content",
+    height: "32px",
+    p: "8px",
+    bg: "#151515D9",
+    borderColor: "#9999991A",
+    borderRadius: "8px"
+  }, /*#__PURE__*/React__default.createElement(react.Box, {
+    pr: "8px"
+  }, Icon), /*#__PURE__*/React__default.createElement(react.Text, {
+    pr: "16px",
+    fontSize: "13px",
+    color: colors.label.primary.dark
+  }, message), onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
+    ml: "auto",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(react.Button, {
+    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 = react.useToast();
+  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;
 
@@ -4392,4 +4494,5 @@ exports.Warning = Warning;
 exports.XQThemeProvider = XQThemeProvider;
 exports.colors = colors;
 exports.formatErrorResponse = formatErrorResponse;
+exports.useToast = useToast;
 //# sourceMappingURL=ui-core.cjs.development.js.map