@mw-kit/mw-ui 1.3.1 → 1.4.0

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import 'semantic-ui-css/semantic.min.css';
-import React__default, { createElement, useState, useEffect, useCallback } from 'react';
+import React__default, { createElement, useState, useImperativeHandle, useEffect, useCallback } from 'react';
 import styled, { keyframes, css, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { Icon as Icon$1 } from 'semantic-ui-react';
 export * from 'semantic-ui-react';
@@ -11839,7 +11839,7 @@ var EllipsisContainer$1 = function EllipsisContainer$1(props) {
 };
 
 var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$3;
-var Container$1 = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  padding-right: calc(", " / 2);\n  display: flex;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"])), function (_ref) {
+var Container$1 = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  padding-right: calc(", " / 2);\n  display: flex;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -11904,7 +11904,9 @@ var ScrollContainer = function ScrollContainer(props) {
       _onScroll2(event);
     }
   })), loading && React__default.createElement(Loader, {
-    filled: true
+    filled: true,
+    size: '43px',
+    borderSize: '2px'
   })), after);
 };
 
@@ -11985,7 +11987,7 @@ var Container$2 = styled.div(_templateObject9$1 || (_templateObject9$1 = _tagged
   return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      visibility: hidden;\n    "])));
 });
 
-var AbsoluteContainer = function AbsoluteContainer(props) {
+var AbsoluteContainer = React__default.forwardRef(function (props, fowardedRef) {
   var center = props.center || {
     x: 50,
     y: 75
@@ -12005,6 +12007,9 @@ var AbsoluteContainer = function AbsoluteContainer(props) {
       firstRender = _useState3[0],
       setFirstRender = _useState3[1];
 
+  useImperativeHandle(fowardedRef, function () {
+    return ref;
+  });
   useEffect(function () {
     setFirstRender(false);
     if (props.position || !ref) return;
@@ -12039,7 +12044,8 @@ var AbsoluteContainer = function AbsoluteContainer(props) {
     ref: setRef,
     firstRender: firstRender
   }), React__default.createElement("div", null, props.children));
-};
+});
+AbsoluteContainer.displayName = 'AbsoluteContainer';
 
 var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$5, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2;
 var Option = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  display: flex;\n\n  > :nth-child(1) {\n    flex: 1;\n  }\n\n  ", ";\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
@@ -12097,7 +12103,7 @@ var Delimiter = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTe
   return theme.colors.greyishBlue;
 });
 
-var Menu = function Menu(props) {
+var MenuComponent = function MenuComponent(props, ref) {
   var _props = _extends({}, props),
       open = _props.open,
       close = _props.close,
@@ -12144,7 +12150,9 @@ var Menu = function Menu(props) {
     itemSpacing: 's1'
   });
   if (!open) return React__default.createElement(React__default.Fragment, null);
-  return React__default.createElement(Container$3, Object.assign({}, absoluteContainerProps), React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollContainer, {
+  return React__default.createElement(Container$3, Object.assign({}, absoluteContainerProps, {
+    ref: ref
+  }), React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollContainer, {
     onScrollEnd: onScrollEnd,
     before: before,
     after: after,
@@ -12225,6 +12233,8 @@ var Menu = function Menu(props) {
   })), children, getSubmenu(activeOption)));
 };
 
+var Menu = React__default.forwardRef(MenuComponent);
+
 var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$6, _templateObject5$5, _templateObject6$3;
 var Container$4 = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  div {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n\n    ", "\n\n    ", "\n    ", "\n      ", "\n      ", "\n  }\n\n  span {\n    display: inline-block;\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (_ref) {
   var props = _ref.props;
@@ -16031,7 +16041,10 @@ var Submenu = function Submenu(props) {
   });
 };
 
-var FilterMenu = function FilterMenu(props) {
+var Filters = function Filters(props) {
+  var open = props.open,
+      close = props.close;
+
   var _useState = useState(-1),
       active = _useState[0],
       setActive = _useState[1];
@@ -16050,10 +16063,14 @@ var FilterMenu = function FilterMenu(props) {
     };
   });
   var selected = active >= 0 && active < props.items.length ? props.items[active] : null;
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Menu, {
-    open: props.open,
+  useEffect(function () {
+    if (open) return;
+    setActive(-1);
+  }, [open]);
+  return React__default.createElement(Menu, {
+    open: open,
     options: items,
-    close: props.close,
+    close: close,
     width: '160px',
     height: '261px',
     containerSpacing: {
@@ -16072,6 +16089,137 @@ var FilterMenu = function FilterMenu(props) {
       return setActive(-1);
     },
     setAppliedFilters: props.setAppliedFilters
+  }));
+};
+
+var _templateObject$H, _templateObject2$y, _templateObject3$x, _templateObject4$v;
+var Container$p = styled(AbsoluteContainer)(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  > div {\n    padding: ", ";\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n"])), function (_ref) {
+  var s3 = _ref.theme.spacings.s3;
+  return s3 + " 0 " + s3 + " " + s3;
+});
+var Header$b = styled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  padding: ", ";\n  > div {\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (_ref2) {
+  var s3 = _ref2.theme.spacings.s3;
+  return s3;
+}, function (_ref3) {
+  var s3 = _ref3.theme.spacings.s3;
+  return "0 " + s3 + " " + s3 + " 0";
+});
+var Title = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  ", "\n  color: ", ";\n"])), function (_ref4) {
+  var useTypography = _ref4.theme.useTypography;
+  return useTypography('p', {
+    fontWeight: 'bold'
+  });
+}, function (_ref5) {
+  var getColor = _ref5.theme.getColor;
+  return getColor('greyishBlue', 50);
+});
+var Item = styled.div(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  align-items: center;\n\n  :not(:last-child) {\n    border-bottom: 1px solid\n      ", ";\n  }\n\n  > div:nth-child(1) {\n    flex: 1;\n\n    > div:nth-child(1) {\n      ", "\n      color: ", ";\n    }\n    > div:nth-child(2) {\n      ", "\n    }\n  }\n  > div:nth-child(2) {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n"])), function (_ref6) {
+  var s1 = _ref6.theme.spacings.s1;
+  return s1 + " " + s1 + " " + s1 + " 0";
+}, function (_ref7) {
+  var getColor = _ref7.theme.getColor;
+  return getColor('greyishBlue', 25);
+}, function (_ref8) {
+  var useTypography = _ref8.theme.useTypography;
+  return useTypography('p');
+}, function (_ref9) {
+  var getColor = _ref9.theme.getColor;
+  return getColor('greyishBlue', 50);
+}, function (_ref10) {
+  var useTypography = _ref10.theme.useTypography;
+  return useTypography('p');
+});
+
+var AppliedFilters = function AppliedFilters(props) {
+  var open = props.open,
+      close = props.close,
+      _props$appliedFilters = props.appliedFilters,
+      appliedFilters = _props$appliedFilters[0],
+      setAppliedFilters = _props$appliedFilters[1];
+
+  var _useState = useState(''),
+      search = _useState[0],
+      setSearch = _useState[1];
+
+  var _useState2 = useState(''),
+      searched = _useState2[0],
+      setSearched = _useState2[1];
+
+  useEffect(function () {
+    setSearch('');
+    setSearched('');
+  }, [open]);
+  if (!open) return React__default.createElement(React__default.Fragment, null);
+
+  var onClear = function onClear() {
+    setAppliedFilters([]);
+    close();
+  };
+
+  var onSubmitSearch = function onSubmitSearch() {
+    setSearched(search);
+  };
+
+  var onClearSearch = function onClearSearch() {
+    setSearch('');
+    setSearched('');
+  };
+
+  var onRemove = function onRemove(name) {
+    setAppliedFilters(function (prev) {
+      return prev.filter(function (e) {
+        return e.name !== name;
+      });
+    });
+  };
+
+  return React__default.createElement(Container$p, {
+    width: '275px',
+    height: '261px'
+  }, React__default.createElement(Header$b, null, React__default.createElement("div", null, React__default.createElement(Title, null, "Filtros Aplicados"), React__default.createElement(Button$1, {
+    type: 'button',
+    onClick: onClear,
+    appearance: 'link'
+  }, "Limpar Todos")), React__default.createElement(Input$3, {
+    type: 'search',
+    placeholder: 'Pesquisar',
+    setValue: setSearch,
+    value: search,
+    onPressEnter: onSubmitSearch,
+    icon: {
+      icon: {
+        type: 'feather',
+        icon: 'search'
+      },
+      onClick: onSubmitSearch
+    },
+    clearable: search !== '' && search === searched ? onClearSearch : undefined
+  })), React__default.createElement(ScrollContainer, null, appliedFilters.filter(function (_ref) {
+    var _ref$labels = _ref.labels,
+        filter = _ref$labels.filter.text,
+        option = _ref$labels.option.text;
+    return strCmp(filter, searched, {
+      contain: true
+    }) || strCmp(option, searched, {
+      contain: true
+    });
+  }).map(function (_ref2, index) {
+    var _ref2$labels = _ref2.labels,
+        filter = _ref2$labels.filter.element,
+        option = _ref2$labels.option.element,
+        name = _ref2.name;
+    return React__default.createElement(Item, {
+      key: index
+    }, React__default.createElement("div", null, React__default.createElement("div", null, filter), React__default.createElement("div", null, option)), React__default.createElement("div", null, React__default.createElement(Icon, {
+      type: 'feather',
+      icon: 'minus_circle',
+      width: '12px',
+      height: '12px',
+      color: 'darkSilver',
+      onClick: function onClick() {
+        return onRemove(name);
+      }
+    })));
   })));
 };
 
@@ -16084,14 +16232,14 @@ var theme$1 = {
   button: theme
 };
 
-var _templateObject$H;
-var FontStyles = createGlobalStyle(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n"])));
+var _templateObject$I;
+var FontStyles = createGlobalStyle(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n"])));
 
 var Globals = function Globals() {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(FontStyles, null));
 };
 
-var _templateObject$I;
+var _templateObject$J;
 
 var getColor$1 = function getColor(color, opacity) {
   if (opacity === void 0) {
@@ -16101,12 +16249,16 @@ var getColor$1 = function getColor(color, opacity) {
   return "" + colors[color] + opacities[opacity];
 };
 
-var useTypography = function useTypography(typography) {
+var useTypography = function useTypography(typography, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
   var _typographies$typogra = typographies[typography],
       fontFamily = _typographies$typogra.fontFamily,
       fontWeight = _typographies$typogra.fontWeight,
       fontSize = _typographies$typogra.fontSize;
-  return css(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, fontWeight, fontSize);
+  return css(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n  "])), fontFamily, options.fontWeight || fontWeight, fontSize);
 };
 
 var isDarkColor = function isDarkColor(color, ifDark, ifLight) {
@@ -16143,5 +16295,5 @@ var ThemeProvider = function ThemeProvider(props) {
   }, React__default.createElement(Globals, null), props.children);
 };
 
-export { AbsoluteContainer as MwAbsoluteContainer, Button$1 as MwButton, CalendarInterval as MwCalendarInterval, Card as MwCard, Calendar as MwDatePicker, EllipsisContainer$1 as MwEllipsisContainer, FilterMenu as MwFilterMenu, Icon as MwIcon, Indicator as MwIndicator, Input$3 as MwInput, Loader as MwLoader, Menu as MwMenu, Modal$1 as MwModal, Placeholder as MwPlaceholder, ProgressBar as MwProgressBar, ScrollContainer as MwScrollContainer, Tabs$1 as MwTabs, TextArea as MwTextArea, Toast as MwToast, Zoom as MwZoom, ThemeProvider };
+export { AbsoluteContainer as MwAbsoluteContainer, AppliedFilters as MwAppliedFilters, Button$1 as MwButton, CalendarInterval as MwCalendarInterval, Card as MwCard, Calendar as MwDatePicker, EllipsisContainer$1 as MwEllipsisContainer, Filters as MwFilters, Icon as MwIcon, Indicator as MwIndicator, Input$3 as MwInput, Loader as MwLoader, Menu as MwMenu, Modal$1 as MwModal, Placeholder as MwPlaceholder, ProgressBar as MwProgressBar, ScrollContainer as MwScrollContainer, Tabs$1 as MwTabs, TextArea as MwTextArea, Toast as MwToast, Zoom as MwZoom, ThemeProvider };
 //# sourceMappingURL=index.modern.js.map