@xqmsg/ui-core 0.15.3 → 0.16.0

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

@@ -5,6 +5,7 @@ export interface BannerProps {
     message: ReactNode;
     buttonText?: string;
     onClick?: () => void;
+    type?: 'condensed' | 'expanded';
 }
 /**
  * A functional React component utilized to render the `Banner` component

package/dist/components/table/empty/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * A React component utilized to render the `EmptyTable` component
+ */
+export declare const EmptyTable: React.FC;

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

@@ -11,4 +11,4 @@ export interface TableProps<T extends ReadonlyTableColumns> {
 /**
  * A React component utilized to render the `Table` component
  */
-export declare function Table<T extends ReadonlyTableColumns>({ columns, headers, body, placeholder, loading, loadMore, }: TableProps<T>): JSX.Element;
+export declare function Table<T extends ReadonlyTableColumns>({ columns, headers, body, loading, loadMore, }: TableProps<T>): JSX.Element;

package/dist/theme/components/button.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
         fontSize: string;
         bg: string;
         color: string;
+        h: string;
         border: string;
         px: string;
         py: string;
@@ -34,6 +35,7 @@ declare const _default: {
             fontSize: string;
             bg: string;
             color: string;
+            h: string;
             border: string;
             px: string;
             py: string;
@@ -74,6 +76,7 @@ declare const _default: {
             };
             borderRadius: string;
             fontSize: string;
+            h: string;
             border: string;
             px: string;
             py: string;

package/dist/theme/components/table.d.ts

@@ -11,8 +11,12 @@ declare const _default: {
         };
         tr: {
             fontSize: string;
+            h: string;
+            lineHeight: string;
             _odd: {
                 td: {
+                    h: string;
+                    lineHeight: string;
                     bg: string;
                     _first: {
                         borderTopLeftRadius: string;
@@ -27,6 +31,8 @@ declare const _default: {
         };
         td: {
             padding: string;
+            lineHeight: string;
+            h: string;
         };
     };
 };

package/dist/theme/styles.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
                 base: string;
                 lg: string;
             };
+            lineHeight: string;
         };
         '*, *::before, *::after': {
             borderColor: string;

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

@@ -57,7 +57,9 @@ var Banner = function Banner(_ref) {
   var variant = _ref.variant,
       message = _ref.message,
       buttonText = _ref.buttonText,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'expanded' : _ref$type;
   var Icon = React.useMemo(function () {
     switch (variant) {
       case 'error':
@@ -94,18 +96,24 @@ var Banner = function Banner(_ref) {
   }, [variant]);
   return /*#__PURE__*/React__default.createElement(react.Alert, {
     variant: variant
-  }, /*#__PURE__*/React__default.createElement(react.AlertDescription, null, /*#__PURE__*/React__default.createElement(react.Box, {
-    pb: "8px"
-  }, Icon), message, onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
-    pt: "8px",
-    justifyContent: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(react.AlertDescription, null, /*#__PURE__*/React__default.createElement(react.Flex, {
+    flexDirection: type === 'condensed' ? 'row' : 'column',
+    alignItems: type === 'condensed' ? 'center' : ''
+  }, /*#__PURE__*/React__default.createElement(react.Box, {
+    pr: "8px"
+  }, Icon), /*#__PURE__*/React__default.createElement(react.Box, {
+    pt: type === 'condensed' ? 0 : '8px'
+  }, " ", message), onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
+    ml: type === 'condensed' ? 'auto' : '',
+    pt: type === 'condensed' ? 0 : '8px',
+    justifyContent: type === 'condensed' ? 'flex-end' : 'flex-end'
   }, /*#__PURE__*/React__default.createElement(Button, {
     variant: "secondary",
     onClick: onClick,
     text: buttonText,
     width: "variable",
     ariaLabel: "banner button"
-  }))));
+  })))));
 };
 
 var blue = {
@@ -373,12 +381,12 @@ var SpinnerButton = function SpinnerButton(_ref) {
       type = _ref.type,
       ariaLabel = _ref.ariaLabel,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
       disabled = _ref.disabled,
       className = _ref.className;
   return /*#__PURE__*/React__default.createElement(react.Button, {
     spinner: /*#__PURE__*/React__default.createElement(react.Spinner, {
-      size: 'md'
+      size: 'sm'
     }),
     isLoading: isLoading,
     onClick: onClick,
@@ -602,7 +610,7 @@ function useOnClickOutside(ref, handler) {
   [ref, handler]);
 }
 
-var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "value"];
+var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "disabled", "value"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
@@ -615,6 +623,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       name = _ref2.name,
       setValue = _ref2.setValue,
       handleOnChange = _ref2.handleOnChange,
+      disabled = _ref2.disabled,
       value = _ref2.value,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
 
@@ -683,6 +692,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     fontSize: "13px",
     textShadow: "0 0 0 " + colors.label.primary.light,
     value: selectedOption,
+    disabled: disabled,
     autoComplete: "off",
     onKeyDown: function onKeyDown(e) {
       if (isFocussed) {
@@ -703,9 +713,9 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       }
     }
   })), /*#__PURE__*/React__default.createElement(react.InputRightElement, {
-    cursor: "pointer",
+    cursor: disabled ? 'not-allowed' : 'pointer',
     onClick: function onClick() {
-      return setIsFocussed(!isFocussed);
+      return !disabled && setIsFocussed(!isFocussed);
     }
   }, /*#__PURE__*/React__default.createElement(react.Image, {
     src: SubtractIcon,
@@ -1766,6 +1776,58 @@ var TableLoadingRows = function TableLoadingRows(_ref) {
   }));
 };
 
+/**
+ * A React component utilized to render the `EmptyTable` component
+ */
+
+var EmptyTable = function EmptyTable() {
+  var getOpacity = function getOpacity(index) {
+    switch (index) {
+      case 1:
+        return 0.7;
+
+      case 3:
+        return 0.6;
+
+      case 5:
+        return 0.5;
+
+      case 7:
+        return 0.4;
+
+      case 9:
+        return 0.3;
+
+      case 11:
+        return 0.2;
+
+      case 13:
+        return 0.1;
+
+      default:
+        return 1;
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement(react.Table, {
+    variant: "unstyled",
+    width: "100%",
+    style: {
+      borderCollapse: 'separate',
+      borderSpacing: '0px'
+    }
+  }, /*#__PURE__*/React__default.createElement(react.Tbody, null, Array.from({
+    length: 14
+  }, function (_, i) {
+    return i + 1;
+  }).map(function (i) {
+    return /*#__PURE__*/React__default.createElement(react.Tr, null, /*#__PURE__*/React__default.createElement(react.Td, {
+      height: "26px",
+      opacity: getOpacity(i)
+    }));
+  })));
+};
+
 /**
  * A React component utilized to render the `Table` component
  */
@@ -1774,8 +1836,6 @@ function Table(_ref) {
   var columns = _ref.columns,
       headers = _ref.headers,
       body = _ref.body,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'There is currently no available data' : _ref$placeholder,
       loading = _ref.loading,
       loadMore = _ref.loadMore;
   var columnsAsConst = generateTableColumnsAsConst(columns);
@@ -1784,7 +1844,7 @@ function Table(_ref) {
     overflowX: "auto",
     bg: "white",
     width: "100%"
-  }, /*#__PURE__*/React__default.createElement(react.Table, {
+  }, body.length ? /*#__PURE__*/React__default.createElement(react.Table, {
     variant: "unstyled",
     width: "100%",
     style: {
@@ -1809,12 +1869,10 @@ function Table(_ref) {
         React__default.createElement(react.Td, null, row[column])
       );
     }));
-  })), !body.length && /*#__PURE__*/React__default.createElement(react.TableCaption, {
-    py: 10
-  }, placeholder), ' '), loadMore && loading !== undefined && /*#__PURE__*/React__default.createElement(TableLoadingRows, {
+  }))) : /*#__PURE__*/React__default.createElement(EmptyTable, null), loadMore && loading !== undefined && body.length ? /*#__PURE__*/React__default.createElement(TableLoadingRows, {
     isLoading: loading,
     onLoadMore: loadMore
-  }));
+  }) : null);
 }
 
 /**
@@ -2026,6 +2084,7 @@ var baseStyle$2 = /*#__PURE__*/system.defineStyle({
   fontSize: '13px',
   bg: colors.fill.action,
   color: colors.label.primary.dark,
+  h: '26px',
   border: 'none',
   px: '8px',
   py: '4px',
@@ -2669,8 +2728,12 @@ var baseStyle$c = {
   },
   tr: {
     fontSize: '13px',
+    h: '26px',
+    lineHeight: 'normal',
     _odd: {
       td: {
+        h: '26px ',
+        lineHeight: 'normal',
         bg: colors.fill.light.tertiary,
         _first: {
           borderTopLeftRadius: 'md',
@@ -2684,7 +2747,9 @@ var baseStyle$c = {
     }
   },
   td: {
-    padding: '5px 8px !important'
+    padding: '5px 8px !important',
+    lineHeight: 'normal',
+    h: '26px'
   }
 };
 var Table$1 = {
@@ -2955,7 +3020,7 @@ var baseStyle$f = {
   fontWeight: typography.fontWeights.normal,
   fontFamily: typography.fonts.base,
   fontSize: typography.fontSizes.sm,
-  lineHeight: typography.lineHeights.base,
+  lineHeight: typography.lineHeights.normal,
   letterSpacing: typography.letterSpacings.wide
 };
 
@@ -3003,7 +3068,8 @@ var styles = {
       overflow: {
         base: 'visible',
         lg: 'hidden'
-      }
+      },
+      lineHeight: 'normal'
     },
     '*, *::before, *::after': {
       borderColor: 'gray.200'