@xqmsg/ui-core 0.18.0 → 0.18.2

package/dist/ui-core.esm.js

@@ -7,8 +7,6 @@ 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';
-import { FolderAddOutline as FolderAddOutline$1 } from 'src/components/icons';
-import { useMediaQuery as useMediaQuery$1 } from '@chakra-ui/media-query';
 
 /**
  * A functional React component utilized to render the `Button` component
@@ -4205,221 +4203,14 @@ var ToolbarBreadcrumbs = function ToolbarBreadcrumbs(_ref) {
   }));
 };
 
-/**
- * A functional React component utilized to render the `Add` component
- */
-
-var Add = function Add(_ref) {
-  var onClick = _ref.onClick;
-  return /*#__PURE__*/React__default.createElement(Box, {
-    mx: "8px",
-    cursor: "pointer",
-    onClick: onClick
-  }, /*#__PURE__*/React__default.createElement(FolderAddOutline$1, {
-    boxSize: "16px"
-  }));
-};
-
-/**
- * A functional React component utilized to render the `Dropdown` component
- */
-
-var Dropdown$2 = function Dropdown(_ref) {
-  var onSelectItem = _ref.onSelectItem,
-      options = _ref.options,
-      dropdownRef = _ref.dropdownRef,
-      position = _ref.position,
-      optionIndex = _ref.optionIndex,
-      setOptionIndex = _ref.setOptionIndex;
-  var DropdownContent = 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(Box, {
-        color: colors.label.secondary.light,
-        fontSize: "13px",
-        width: "fit-content",
-        fontWeight: "bold",
-        px: "8px",
-        pl: "26px",
-        whiteSpace: "nowrap"
-      }, idx > 0 && /*#__PURE__*/React__default.createElement(Box, {
-        width: "100%",
-        my: "3px",
-        borderTop: "2px solid",
-        borderColor: colors.border["default"]
-      }), option.label), option.value !== 'section_header' && /*#__PURE__*/React__default.createElement(Flex, {
-        alignItems: "center",
-        cursor: "pointer",
-        onClick: function onClick() {
-          setOptionIndex(idx);
-          onSelectItem(option);
-        },
-        key: option.value,
-        fontSize: "13px",
-        px: "8px",
-        py: "4px",
-        width: "100%",
-        color: colors.label.primary.light,
-        whiteSpace: "nowrap",
-        id: option.value
-      }, /*#__PURE__*/React__default.createElement(Box, {
-        mr: "8px",
-        width: "12px"
-      }, optionIndex === idx && /*#__PURE__*/React__default.createElement(Checkmark, {
-        boxSize: "12px"
-      })), option.label));
-    });
-  }, [onSelectItem, optionIndex, options, setOptionIndex]);
-  return /*#__PURE__*/React__default.createElement(Flex, {
-    flexDirection: "column",
-    ref: dropdownRef,
-    scrollMargin: "15px",
-    backdropFilter: "auto",
-    backdropBlur: "64px",
-    borderRadius: "4px",
-    bg: colors.fill.light.tertiary,
-    mt: "3px",
-    maxH: "240px",
-    overflowY: "auto",
-    px: "8px",
-    py: "4px",
-    position: "absolute",
-    top: position === 'top' ? 26 : undefined,
-    bottom: position === 'bottom' ? 30 : undefined,
-    right: 0,
-    width: "fit-content",
-    minWidth: "100%",
-    zIndex: 100,
-    tabIndex: -2000
-  }, DropdownContent);
-};
-
-/**
- * A functional React component utilized to render the `Sort` component
- */
-
-var Sort = function Sort(_ref) {
-  var onSelectItem = _ref.onSelectItem,
-      sortOptions = _ref.sortOptions;
-  var dropdownMenuRef = useRef(null);
-
-  var _useState = useState(false),
-      showDropdown = _useState[0],
-      setShowDropdown = _useState[1];
-
-  var _useState2 = useState(null),
-      optionIndex = _useState2[0],
-      setOptionIndex = _useState2[1];
-
-  useOutsideClick({
-    ref: dropdownMenuRef,
-    handler: function handler() {
-      return setShowDropdown(false);
-    }
-  });
-  return /*#__PURE__*/React__default.createElement(Box, {
-    onClick: function onClick() {
-      return setShowDropdown(!showDropdown);
-    },
-    position: "relative"
-  }, /*#__PURE__*/React__default.createElement(Flex, {
-    alignItems: "center",
-    cursor: "pointer",
-    onClick: function onClick() {
-      return setShowDropdown(!showDropdown);
-    }
-  }, /*#__PURE__*/React__default.createElement(TableOutline, {
-    boxSize: "16px"
-  }), /*#__PURE__*/React__default.createElement(Box, {
-    ml: "2px"
-  }, /*#__PURE__*/React__default.createElement(ChevronDown, {
-    boxSize: "12px"
-  })), showDropdown && /*#__PURE__*/React__default.createElement(Dropdown$2, {
-    onSelectItem: onSelectItem,
-    options: sortOptions,
-    position: "top",
-    dropdownRef: dropdownMenuRef,
-    optionIndex: optionIndex,
-    setOptionIndex: setOptionIndex
-  })));
-};
-
-/**
- * A functional React component utilized to render the `Search` component
- */
-
-var Search$1 = function Search$1(_ref) {
-  var searchValue = _ref.searchValue,
-      onClick = _ref.onClick,
-      _onChange = _ref.onChange;
-
-  var _useMediaQuery = useMediaQuery('(max-width: 600px)'),
-      breakpoint600 = _useMediaQuery[0];
-
-  return /*#__PURE__*/React__default.createElement(Box, null, breakpoint600 ? /*#__PURE__*/React__default.createElement(Box, {
-    cursor: "pointer",
-    onClick: onClick
-  }, /*#__PURE__*/React__default.createElement(Search, {
-    boxSize: "16px"
-  })) : /*#__PURE__*/React__default.createElement(StackedInput, {
-    placeholder: "Search...",
-    name: "search",
-    value: searchValue,
-    onChange: function onChange(e) {
-      return _onChange(e.target.value);
-    }
-  }));
-};
-
-/**
- * A functional React component utilized to render the `Actions` component
- */
-
-var Actions = function Actions(_ref) {
-  var onSelectSortItem = _ref.onSelectSortItem,
-      onClickAdd = _ref.onClickAdd,
-      onChangeSearch = _ref.onChangeSearch,
-      onClickSearch = _ref.onClickSearch,
-      searchValue = _ref.searchValue,
-      sortOptions = _ref.sortOptions;
-  return /*#__PURE__*/React__default.createElement(Flex, {
-    alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(Sort, {
-    onSelectItem: onSelectSortItem,
-    sortOptions: sortOptions
-  }), /*#__PURE__*/React__default.createElement(Add, {
-    onClick: onClickAdd
-  }), /*#__PURE__*/React__default.createElement(Search$1, {
-    onChange: onChangeSearch,
-    onClick: onClickSearch,
-    searchValue: searchValue
-  }));
-};
-
 /**
  * A functional React component utilized to render the `Toolbar` component
  */
 
 var Toolbar = function Toolbar(_ref) {
-  var pageList = _ref.pageList,
-      currentPage = _ref.currentPage,
-      searchValue = _ref.searchValue,
-      sortOptions = _ref.sortOptions,
-      onChangeSearch = _ref.onChangeSearch,
-      onClickAdd = _ref.onClickAdd,
-      onSelectSortItem = _ref.onSelectSortItem;
-
-  var _useMediaQuery = useMediaQuery$1('(min-width: 600px)'),
-      breakpoint800 = _useMediaQuery[0];
-
-  var _useState = useState(false),
-      showSearch = _useState[0],
-      setShowSearch = _useState[1];
-
-  useEffect(function () {
-    if (breakpoint800) {
-      setShowSearch(false);
-    }
-  }, [breakpoint800, showSearch]);
+  var children = _ref.children,
+      pageList = _ref.pageList,
+      currentPage = _ref.currentPage;
   return /*#__PURE__*/React__default.createElement(Flex, {
     flexDirection: "column"
   }, /*#__PURE__*/React__default.createElement(Flex, {
@@ -4431,30 +4222,9 @@ var Toolbar = function Toolbar(_ref) {
   }, /*#__PURE__*/React__default.createElement(ToolbarBreadcrumbs, {
     pageList: pageList,
     currentPage: currentPage
-  }), /*#__PURE__*/React__default.createElement(Actions, {
-    onChangeSearch: onChangeSearch,
-    onClickAdd: onClickAdd,
-    onClickSearch: function onClickSearch() {
-      return setShowSearch(!showSearch);
-    },
-    onSelectSortItem: onSelectSortItem,
-    searchValue: searchValue,
-    sortOptions: sortOptions
-  })), showSearch && /*#__PURE__*/React__default.createElement(Flex, {
-    px: "13px",
-    height: "52px",
-    alignItems: "center",
-    background: "white",
-    borderTop: "1px solid",
-    borderColor: colors.fill.light.tertiary
-  }, /*#__PURE__*/React__default.createElement(StackedInput, {
-    placeholder: "Search...",
-    name: "search",
-    value: searchValue,
-    onChange: function onChange(e) {
-      return onChangeSearch(e.target.value);
-    }
-  })));
+  }), /*#__PURE__*/React__default.createElement(Flex, {
+    alignItems: "center"
+  }, children, " ")));
 };
 
 function formatErrorResponse(error) {