@xqmsg/ui-core 0.11.0 → 0.12.0

package/dist/ui-core.esm.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react';
-import { Image, Alert as Alert$1, AlertDescription, Box, Flex, Button as Button$2, Text as Text$2, Icon as Icon$1, Spinner, InputGroup, Checkbox, Input as Input$2, 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$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, extendTheme, ChakraProvider } from '@chakra-ui/react';
+import { Image, Alert as Alert$1, AlertDescription, Box, Flex, Button as Button$2, Text as Text$2, Icon as Icon$1, Spinner, InputGroup, Checkbox, Input as Input$2, 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, ChakraProvider } from '@chakra-ui/react';
 import colors$1 from 'src/theme/foundations/colors';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import { CloseIcon as CloseIcon$1, HamburgerIcon } from '@chakra-ui/icons';
@@ -1466,8 +1466,11 @@ var TableLoadingRows = function TableLoadingRows(_ref) {
     "aria-label": "Fetch more rows",
     icon: /*#__PURE__*/React.createElement(HiOutlineRefresh, null),
     fontSize: typography.fontSizes['3xl'],
+    bg: "transparent",
+    shadow: "none",
+    color: colors.fill.action,
     type: "button",
-    variant: "link",
+    variant: "outline",
     onClick: onLoadMore
   }));
 };
@@ -1483,24 +1486,19 @@ function Table(_ref) {
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? 'There is currently no available data' : _ref$placeholder,
       loading = _ref.loading,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'simple' : _ref$variant,
-      colorScheme = _ref.colorScheme,
       _ref$borderTopRadius = _ref.borderTopRadius,
       borderTopRadius = _ref$borderTopRadius === void 0 ? true : _ref$borderTopRadius,
       loadMore = _ref.loadMore;
   var columnsAsConst = generateTableColumnsAsConst(columns);
   return /*#__PURE__*/React.createElement(TableContainer, {
-    border: "1px",
-    borderColor: colors.fill.light.quaternary,
+    border: "none",
     overflowX: "auto",
     bg: "white",
     borderRadius: "md",
     borderTopLeftRadius: borderTopRadius ? 'md' : 0,
     borderTopRightRadius: borderTopRadius ? 'md' : 0
-  }, /*#__PURE__*/React.createElement(Table$1, {
-    variant: variant,
-    colorScheme: colorScheme
+  }, /*#__PURE__*/React.createElement(Table$2, {
+    variant: "unstyled"
   }, /*#__PURE__*/React.createElement(Thead, null, /*#__PURE__*/React.createElement(Tr, null, columnsAsConst.map(function (column) {
     return (
       /*#__PURE__*/
@@ -2358,7 +2356,37 @@ var Switch = {
   defaultProps: defaultProps$7
 };
 
-var parts$7 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
+var parts$7 = ['th', 'td', 'tr', 'body'];
+var baseStyle$c = {
+  th: {
+    height: 'fit-content',
+    width: '100%',
+    bg: colors.label.primary.dark,
+    padding: '5px 8px !important'
+  },
+  tr: {
+    fontSize: '13px',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: 'fit-content',
+    borderRadius: 'md',
+    _odd: {
+      background: colors.fill.light.tertiary
+    }
+  },
+  td: {
+    padding: '5px 8px !important',
+    borderRadius: 'md',
+    width: '100%'
+  }
+};
+var Table$1 = {
+  parts: parts$7,
+  baseStyle: baseStyle$c
+};
+
+var parts$8 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
 
 function baseStyleRoot(props) {
   var orientation = props.orientation;
@@ -2398,7 +2426,7 @@ var baseStyleTabpanel = {
   p: 4
 };
 
-var baseStyle$c = function baseStyle(props) {
+var baseStyle$d = function baseStyle(props) {
   return {
     root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -2592,14 +2620,14 @@ var defaultProps$8 = {
   colorScheme: 'blue'
 };
 var Tabs = {
-  parts: parts$7,
-  baseStyle: baseStyle$c,
+  parts: parts$8,
+  baseStyle: baseStyle$d,
   sizes: sizes$2,
   variants: variants$8,
   defaultProps: defaultProps$8
 };
 
-var baseStyle$d = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
+var baseStyle$e = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
   display: 'block',
   paddingY: '8px',
   height: '80px',
@@ -2610,12 +2638,12 @@ var defaultProps$9 = {
   variant: 'default'
 };
 var Textarea = {
-  baseStyle: baseStyle$d,
+  baseStyle: baseStyle$e,
   defaultProps: defaultProps$9
 };
 
 var defaultProps$a = Text$2.defaultProps;
-var baseStyle$e = {
+var baseStyle$f = {
   fontWeight: typography.fontWeights.normal,
   fontFamily: typography.fonts.base,
   fontSize: typography.fontSizes.sm,
@@ -2624,7 +2652,7 @@ var baseStyle$e = {
 };
 
 function variantHeader() {
-  return _extends({}, baseStyle$e, {
+  return _extends({}, baseStyle$f, {
     fontWeight: typography.fontWeights.bold,
     fontSize: typography.fontSizes['3xl'],
     lineHeight: typography.lineHeights[8],
@@ -2633,7 +2661,7 @@ function variantHeader() {
 }
 
 function variantSubheader() {
-  return _extends({}, baseStyle$e, {
+  return _extends({}, baseStyle$f, {
     fontWeight: typography.fontWeights.semibold,
     fontSize: typography.fontSizes['lg'],
     lineHeight: typography.lineHeights[5],
@@ -2642,7 +2670,7 @@ function variantSubheader() {
 }
 
 function variantParagraph() {
-  return baseStyle$e;
+  return baseStyle$f;
 }
 
 var variants$9 = {
@@ -2651,7 +2679,7 @@ var variants$9 = {
   paragraph: variantParagraph
 };
 var Text$1 = {
-  baseStyle: baseStyle$e,
+  baseStyle: baseStyle$f,
   variants: variants$9,
   defaultProps: /*#__PURE__*/_extends({}, defaultProps$a, {
     variant: variants$9.paragraph
@@ -2696,6 +2724,7 @@ var customXQChakraTheme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
     Modal: Modal,
     Select: Select,
     Switch: Switch,
+    Table: Table$1,
     Tabs: Tabs,
     Textarea: Textarea,
     Text: Text$1