@mw-kit/mw-ui 1.7.77 → 1.7.78

package/dist/components/Tabs/components/Close/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TabProps, TabsProps } from '../../interfaces';
+declare const Close: (props: Pick<TabsProps, 'onClose'> & {
+    index: number;
+    active: [number, React.Dispatch<React.SetStateAction<number>>];
+    options: [TabProps[], React.Dispatch<React.SetStateAction<TabProps[]>>];
+}) => JSX.Element;
+export default Close;

package/dist/components/Tabs/components/Close/styles.d.ts

@@ -0,0 +1 @@
+export declare const Close: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1 @@
+export { default as Close } from './Close';

package/dist/components/Tabs/interfaces.d.ts

@@ -1,24 +1,33 @@
 /// <reference types="react" />
 import { SpacingOrZero, Spacings } from '../../interfaces';
+export declare type TabComponent = React.FunctionComponent;
+export declare type TabProvider = React.FunctionComponent<React.PropsWithChildren<{
+    active: boolean;
+}>>;
 export declare type TabProps = {
     /**
      * Define the tab label.
      */
     label: string;
+} & ({
     /**
-     * Specifies which component will render when the tab is active.
+     * Specifies which component, will mount/unmount everytime the tab is ACTIVATED/INACTIVATED
      */
-    component?: JSX.Element;
-};
+    component: TabComponent;
+    /**
+     * Specifies the component provider, will mount/unmount when the tab is CREATED/REMOVED
+     */
+    provider?: TabProvider;
+} | {});
 export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Array with available tabs.
      */
-    options: TabProps[];
+    options: TabProps[] | [TabProps[], React.Dispatch<React.SetStateAction<TabProps[]>>];
     /**
      * React state to control which tab is active.
      */
-    activeState: [number, React.Dispatch<React.SetStateAction<number>>];
+    active: number | [number, React.Dispatch<React.SetStateAction<number>>];
     /**
      * Sets the style of the tabs to internal.
      */

package/dist/components/Tabs/styles.d.ts

@@ -6,5 +6,5 @@ declare type TabsContainerProps = {
     $spacing?: TabsProps['spacing'];
 };
 export declare const Tabs: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, TabsContainerProps, never>;
-export declare const Tab: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, StyledTabsProps, never>;
+export declare const Tab: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTabsProps, never>;
 export {};

package/dist/index.js

@@ -19104,7 +19104,7 @@ var delimiters = {
   blue: ['blue'],
   grey: ['warningGray']
 };
-var Tabs = styled__default.ul(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  width: 100%;\n\n  ", "\n\n  ", ";\n\n  gap: ", ";\n"])), function (_ref) {
+var Tabs = styled__default.ul(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  width: 100%;\n\n  ", "\n\n  ", ";\n\n  gap: ", ";\n\n  > li {\n    position: relative;\n  }\n"])), function (_ref) {
   var spacing = _ref.$spacing;
 
   var _getSpacings$split = getSpacings(spacing || {}, {
@@ -19138,148 +19138,127 @@ var Tabs = styled__default.ul(_templateObject2$Q || (_templateObject2$Q = _tagge
       internal = _ref3.$internal;
   return internal ? theme.spacings.s6 : 0;
 });
-var Tab = styled__default.li(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref4) {
+var Tab = styled__default.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  ", "\n\n  transition-property: padding-right, background-color, color;\n  transition-duration: 0.25s;\n  transition-timing-function: ease-in-out;\n"])), function (_ref4) {
   var theme = _ref4.theme,
       active = _ref4.$active,
       internal = _ref4.$internal;
-  return styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: ", ";\n    gap: ", ";\n\n    ", "\n\n    span {\n      color: ", ";\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s3, theme.spacings.s3, internal ? styled.css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n          border-radius: 4px 4px 0 0;\n\n          > span {\n            ", "\n            line-height: 17px;\n          }\n        "])), function (_ref5) {
+  return styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: ", ";\n    gap: ", ";\n\n    ", "\n\n    color: ", ";\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s3, theme.spacings.s3, internal ? styled.css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n          border-radius: 4px 4px 0 0;\n\n          ", "\n          line-height: 17px;\n        "])), function (_ref5) {
     var theme = _ref5.theme;
     return theme.useTypography('h4');
-  }) : styled.css(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n          box-shadow: 0px 3px 6px ", ";\n\n          > span {\n            ", "\n            line-height: 19px;\n          }\n        "])), theme.getColor('black', 15), function (_ref6) {
+  }) : styled.css(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n          box-shadow: 0px 3px 6px ", ";\n\n          ", "\n          line-height: 19px;\n        "])), theme.getColor('black', 15), function (_ref6) {
     var theme = _ref6.theme;
     return theme.useTypography('h2');
   }), theme.colors[active ? 'white' : 'darkBlue']);
 });
 
-var initialStatus = function initialStatus(active, length) {
-  var status = Array(length).fill('open');
-  status[active] = 'active';
-  return status;
-};
-
-var Tabs$1 = function Tabs$1(props) {
-  var options = props.options,
-      activeState = props.activeState;
-  var active = activeState[0],
-      setActive = activeState[1];
+var _templateObject$18;
+var Close = styled__default.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - ", " / 2);\n  right: ", ";\n\n  + ", " {\n    /** icon width + tab gap + tab right padding */\n    padding-right: ", ";\n  }\n\n  svg > * {\n    transition-property: stroke;\n    transition-duration: 0.25s;\n    transition-timing-function: ease-in-out;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.spacings.s3;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.spacings.s3;
+}, Tab, function (_ref3) {
+  var theme = _ref3.theme;
+  return "calc(" + theme.spacings.s3 + " + " + theme.spacings.s3 + " + " + theme.spacings.s3 + ")";
+});
 
-  var _useState = React.useState(initialStatus(active, options.length)),
-      status = _useState[0],
-      setStatus = _useState[1];
+var Close$1 = function Close$1(props) {
+  var index = props.index,
+      _props$active = props.active,
+      active = _props$active[0],
+      setActive = _props$active[1],
+      _props$options = props.options,
+      options = _props$options[0],
+      setOptions = _props$options[1];
 
   var onClose = props.onClose || function () {};
 
-  var activate = function activate(active, length) {
-    setStatus(function (prev) {
-      if (length !== undefined && length !== prev.length) {
-        return initialStatus(active, length);
-      }
-
-      var current = prev.findIndex(function (e) {
-        return e === 'active';
-      });
-
-      if (current !== active && current > -1 && active > -1 && active < prev.length) {
-        var _status = [].concat(prev);
+  var onClickClose = React.useCallback(function (event) {
+    if (options.length === 1) return;
+    var newOptions = [].concat(options);
+    newOptions.splice(index, 1);
+    onClose(index, options[index], event);
 
-        _status[current] = 'open';
-        _status[active] = 'active';
-        return [].concat(_status);
-      }
-
-      return prev;
-    });
-  };
-
-  React.useEffect(function () {
-    activate(active, options.length);
-  }, [active, options.length]);
-  React.useEffect(function () {
-    var current = status.findIndex(function (e) {
-      return e === 'active';
-    });
-    setActive(current);
-  }, [status]);
-
-  var onClickActivate = function onClickActivate(index, event) {
-    var element = event.target;
-
-    while (element) {
-      if (element.tagName === 'svg') return;
-      element = element.parentElement;
+    if (index < active || active === index && active > 0) {
+      setActive(active - 1);
     }
 
-    activate(index);
-  };
-
-  var onClickClose = function onClickClose(index, tab, event) {
-    var getActive = function getActive(removed, prev) {
-      for (var i = index - 1; i > -1; i--) {
-        if (removed[i] !== 'closed') {
-          return i;
-        }
-      }
-
-      for (var _i = index + 1; _i < removed.length; _i++) {
-        if (removed[_i] !== 'closed') {
-          return _i;
-        }
-      }
+    setOptions(newOptions);
+  }, [options, active, index]);
+  return React__default.createElement(Close, null, React__default.createElement(Icon, {
+    type: 'feather',
+    icon: 'x',
+    onClick: onClickClose,
+    width: '14px',
+    height: '14px',
+    strokeWidth: '3px',
+    color: active === index ? 'white' : 'darkBlue'
+  }));
+};
 
-      return prev;
-    };
+var VoidClose = function VoidClose() {
+  return React__default.createElement(React__default.Fragment, null);
+};
 
-    setStatus(function (prev) {
-      if (prev[index] === 'closed') return prev;
-      var active = prev.findIndex(function (e) {
-        return e === 'active';
-      });
-      var status = [].concat(prev);
-      status[index] = 'closed';
+var VoidComponent = function VoidComponent() {
+  return React__default.createElement(React__default.Fragment, null);
+};
 
-      if (active === index) {
-        var _active = getActive(status, index);
+var VoidProvider = function VoidProvider(props) {
+  return React__default.createElement(React__default.Fragment, {
+    children: props.children
+  });
+};
 
-        status[_active] = 'active';
-      }
+var Tabs$1 = function Tabs$1(props) {
+  var _ref = Array.isArray(props.active) ? props.active : React.useState(props.active),
+      active = _ref[0],
+      setActive = _ref[1];
 
-      return status;
-    });
-    onClose(index, tab, event);
-  };
+  var _ref2 = typeof props.options[1] === 'function' ? props.options : React.useState(props.options),
+      options = _ref2[0],
+      setOptions = _ref2[1];
 
-  var divProps = filterObject(props, ['options', 'activeState', 'internal', 'maxTabs', 'onMaxTabsExceeded', 'onClose', 'alwaysOpen', 'delimiter', 'spacing']);
+  var divProps = filterObject(props, ['options', 'active', 'internal', 'maxTabs', 'onMaxTabsExceeded', 'onClose', 'alwaysOpen', 'delimiter', 'spacing']);
+  var CloseComponent = props.alwaysOpen || options.length < 2 ? VoidClose : Close$1;
   return React__default.createElement(Container$n, Object.assign({}, divProps), React__default.createElement(Tabs, {
     "$internal": props.internal,
     "$delimiter": props.delimiter,
     "$spacing": props.spacing
-  }, options.reduce(function (elements, tab, index) {
-    if (status[index] === 'closed') return elements;
-    return [].concat(elements, [React__default.createElement(Tab, {
-      key: index,
-      "$active": status[index] === 'active',
+  }, options.map(function (tab, index) {
+    return React__default.createElement("li", {
+      key: index
+    }, React__default.createElement(CloseComponent, {
+      index: index,
+      active: [active, setActive],
+      options: [options, setOptions]
+    }), React__default.createElement(Tab, {
+      "$active": index === active,
       "$internal": props.internal,
-      onClick: function onClick(event) {
-        return onClickActivate(index, event);
-      }
-    }, React__default.createElement("span", null, tab.label), !props.alwaysOpen && React__default.createElement(Icon, {
-      type: 'feather',
-      icon: 'x',
-      onClick: function onClick(e) {
-        return onClickClose(index, tab, e);
+      onClick: function onClick() {
+        return setActive(index);
       },
-      width: '14px',
-      height: '14px',
-      strokeWidth: '3px',
-      color: status[index] === 'active' ? 'white' : 'darkBlue'
-    }))]);
-  }, [])), props.children && React__default.createElement("div", {
-    children: props.children
+      children: tab.label
+    }));
+  })), options.map(function (tab, index) {
+    var _ref3 = 'component' in tab ? tab : {},
+        _ref3$component = _ref3.component,
+        Component = _ref3$component === void 0 ? VoidComponent : _ref3$component,
+        _ref3$provider = _ref3.provider,
+        Provider = _ref3$provider === void 0 ? VoidProvider : _ref3$provider;
+
+    var isActive = index === active;
+    return React__default.createElement(Provider, {
+      key: index,
+      active: isActive,
+      children: isActive ? React__default.createElement("div", null, React__default.createElement(Component, null)) : undefined
+    });
   }));
 };
 
-var _templateObject$18;
-var Container$o = styled__default.textarea(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  resize: none;\n  outline: 0;\n  border: 1px solid #c8c8c8;\n  padding: 14px;\n  border-radius: 4px;\n  color: #192338;\n"])), function (props) {
+var _templateObject$19;
+var Container$o = styled__default.textarea(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  resize: none;\n  outline: 0;\n  border: 1px solid #c8c8c8;\n  padding: 14px;\n  border-radius: 4px;\n  color: #192338;\n"])), function (props) {
   return "" + props.width;
 }, function (props) {
   return "" + props.height;
@@ -19289,8 +19268,8 @@ var TextArea = function TextArea(props) {
   return React__default.createElement(Container$o, Object.assign({}, props));
 };
 
-var _templateObject$19, _templateObject2$R, _templateObject3$K, _templateObject4$x, _templateObject5$u, _templateObject6$r;
-var Container$p = styled__default.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
+var _templateObject$1a, _templateObject2$R, _templateObject3$K, _templateObject4$x, _templateObject5$u, _templateObject6$r;
+var Container$p = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
   return props.size === 'large' ? '837px' : '460px';
 }, function (props) {
   return props.color === 'success' && styled.css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n      background-color: #fcfff5;\n      opacity: 1;\n      border-color: #a8c599;\n      h4 {\n        color: #1e561f;\n      }\n      p {\n        color: #1e561fcc;\n      }\n    "])));
@@ -19312,8 +19291,8 @@ var Toast = function Toast(props) {
   })), React__default.createElement(IconContent, null, React__default.createElement("h4", null, props.title), React__default.createElement("p", null, " ", props.description)));
 };
 
-var _templateObject$1a, _templateObject2$S, _templateObject3$L, _templateObject4$y, _templateObject5$v;
-var Image = styled__default.img(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var _templateObject$1b, _templateObject2$S, _templateObject3$L, _templateObject4$y, _templateObject5$v;
+var Image = styled__default.img(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
 var Container$q = styled__default.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n\n  &,\n  ", " {\n    width: ", ";\n\n    height: ", ";\n  }\n"])), Image, function (_ref) {
   var width = _ref.width;