@xqmsg/ui-core 0.15.2 → 0.15.4

package/dist/ui-core.esm.js

@@ -1,5 +1,5 @@
 import React__default, { useMemo, useCallback, useRef, useEffect, useState, memo, forwardRef, createElement } from 'react';
-import { Button as Button$2, Image, Alert as Alert$1, AlertDescription, Box, Flex, Text as Text$2, Icon as Icon$1, Spinner, Checkbox, Input as Input$2, InputGroup, RadioGroup, Radio, useOutsideClick, InputRightElement, Textarea as Textarea$1, Switch as Switch$1, FormLabel as FormLabel$1, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, TableContainer, Table as Table$2, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, extendTheme } from '@chakra-ui/react';
+import { Button as Button$2, Image, Alert as Alert$1, AlertDescription, Box, Flex, Text as Text$2, Icon as Icon$1, Spinner, Checkbox, Input as Input$2, InputGroup, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, Table as Table$2, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, extendTheme } from '@chakra-ui/react';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import { truncate } from 'lodash-es';
 import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
@@ -524,7 +524,7 @@ var Dropdown = function Dropdown(_ref) {
         fontSize: "13px",
         px: "8px",
         py: "4px",
-        width: "fit-content",
+        width: "100%",
         color: colors.label.primary.light,
         _hover: {
           color: colors.label.primary.dark,
@@ -569,6 +569,32 @@ var useDidMountEffect = function useDidMountEffect(func, deps) {
   }, deps);
 };
 
+function useOnClickOutside(ref, handler) {
+  useEffect(function () {
+    var listener = function listener(event) {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler();
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return function () {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, // Add ref and handler to effect dependencies
+  // It's worth noting that because passed in handler is a new ...
+  // ... function on every render that will cause this effect ...
+  // ... callback/cleanup to run every render. It's not a big deal ...
+  // ... but to optimize you can wrap handler in useCallback before ...
+  // ... passing it into this hook.
+  [ref, handler]);
+}
+
 var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "value"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
@@ -621,11 +647,8 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       return option.value === value;
     })) == null ? void 0 : _options$find2.label) != null ? _options$find$label2 : '');
   }, [value]);
-  useOutsideClick({
-    ref: dropdownRef,
-    handler: function handler() {
-      return setIsFocussed(false);
-    }
+  useOnClickOutside(dropdownRef, function () {
+    return setIsFocussed(false);
   });
 
   var handleOnSelectItem = function handleOnSelectItem(option) {
@@ -805,11 +828,8 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       setPosition('bottom');
     }
   }, [boundingClientRect]);
-  useOutsideClick({
-    ref: dropdownRef,
-    handler: function handler() {
-      return setIsFocussed(false);
-    }
+  useOnClickOutside(dropdownRef, function () {
+    return setIsFocussed(false);
   }); // gets latest watched form value (common delimited) from RHF state and creates a list
 
   useEffect(function () {
@@ -1739,6 +1759,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(Table$2, {
+    variant: "unstyled",
+    width: "100%",
+    style: {
+      borderCollapse: 'separate',
+      borderSpacing: '0px'
+    }
+  }, /*#__PURE__*/React__default.createElement(Tbody, null, Array.from({
+    length: 14
+  }, function (_, i) {
+    return i + 1;
+  }).map(function (i) {
+    return /*#__PURE__*/React__default.createElement(Tr, null, /*#__PURE__*/React__default.createElement(Td, {
+      height: "23px",
+      opacity: getOpacity(i)
+    }));
+  })));
+};
+
 /**
  * A React component utilized to render the `Table` component
  */
@@ -1747,8 +1819,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);
@@ -1757,7 +1827,7 @@ function Table(_ref) {
     overflowX: "auto",
     bg: "white",
     width: "100%"
-  }, /*#__PURE__*/React__default.createElement(Table$2, {
+  }, body.length ? /*#__PURE__*/React__default.createElement(Table$2, {
     variant: "unstyled",
     width: "100%",
     style: {
@@ -1782,12 +1852,10 @@ function Table(_ref) {
         React__default.createElement(Td, null, row[column])
       );
     }));
-  })), !body.length && /*#__PURE__*/React__default.createElement(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);
 }
 
 /**