@mw-kit/mw-ui 1.7.107 → 1.7.109

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

@@ -2,9 +2,10 @@ import React from 'react';
 import { Tab, TabProps, TabsProps } from '../../interfaces';
 declare type TabItemProps = {
     active: Exclude<TabsProps['active'], number>;
-    tabs: [(Tab & {
+    tabs: [Tab[], React.Dispatch<React.SetStateAction<TabProps[]>>];
+    sortedTabs: (Tab & {
         index: number;
-    })[], React.Dispatch<React.SetStateAction<TabProps[]>>];
+    })[];
 } & Pick<TabsProps, 'onClose' | 'alwaysOpen' | 'internal'>;
 declare const TabItem: (props: TabItemProps) => JSX.Element;
 export default TabItem;

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

@@ -1,4 +1,4 @@
-import { Tab } from './interfaces';
+import { Tab, TabComponent, TabComponents, TabProvider } from './interfaces';
 export declare const sortTabs: (tabs: (Tab & {
     index: number;
 })[], sorted?: (Tab & {
@@ -7,3 +7,5 @@ export declare const sortTabs: (tabs: (Tab & {
     index: number;
 })[];
 export declare const hasChildren: (tabs: Tab[], group: string | undefined) => boolean;
+export declare const mapComponents: <C extends string, T = {}>(obj: { [K in C]: TabComponent<T>; }) => TabComponents<T, C>;
+export declare const buildComponent: <T = {}>(component: TabComponent<T>, provider?: TabProvider<T> | undefined) => TabComponent<T>;

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

@@ -1,3 +1,6 @@
-import { TabsComponent } from './interfaces';
-declare const Tabs: TabsComponent;
+import { TabComponent, TabComponents, TabProvider, TabsComponent } from './interfaces';
+declare const Tabs: TabsComponent & {
+    mapComponents: <C extends string, T = {}>(obj: { [K in C]: TabComponent<T>; }) => TabComponents<T, C>;
+    buildComponent: <T_1 = {}>(component: TabComponent<T_1>, provider?: TabProvider<T_1> | undefined) => TabComponent<T_1>;
+};
 export default Tabs;

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

@@ -16,30 +16,36 @@ export declare type Tab<T = {}> = {
     group?: string;
     primary?: boolean;
 };
-export declare type TabComponent<T = {}> = React.FunctionComponent<{
-    data: T;
-    setLabel: React.Dispatch<React.SetStateAction<string>>;
-}>;
 export declare type TabProvider<T = {}> = React.FunctionComponent<React.PropsWithChildren<{
     active: boolean;
     setTab: React.Dispatch<React.SetStateAction<Tab<T>>>;
     setLabel: React.Dispatch<React.SetStateAction<string>>;
 } & Tab<T>>>;
-export declare type TabProps<T = {}> = Tab<T> & ({
+export declare type TabComponent<T = {}> = React.FunctionComponent<{
+    data: T;
+    label: string;
+    setLabel: React.Dispatch<React.SetStateAction<string>>;
+}> & {
+    provider?: TabProvider<T>;
+};
+export declare type TabProps<T = {}, C extends string = string> = Tab<T> & {
     /**
      * Specifies which component, will mount/unmount everytime the tab is ACTIVATED/INACTIVATED
      */
-    component: TabComponent<T>;
+    component?: C;
+};
+export declare type TabComponents<T = {}, C extends string = string> = {
+    [K in C]: TabComponent<T>;
+};
+export interface TabsProps<T = {}, C extends string = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /**
-     * Specifies the component provider, will mount/unmount when the tab is CREATED/REMOVED
+     * list of components
      */
-    provider?: TabProvider<T>;
-} | {});
-export interface TabsProps<T = {}> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    components?: TabComponents<T, C>;
     /**
      * Array with available tabs.
      */
-    options: TabProps<T>[] | [TabProps<T>[], React.Dispatch<React.SetStateAction<TabProps<T>[]>>];
+    options: TabProps<T, C>[] | [TabProps<T, C>[], React.Dispatch<React.SetStateAction<TabProps<T, C>[]>>];
     /**
      * React state to control which tab is active.
      */
@@ -73,4 +79,4 @@ export interface TabsProps<T = {}> extends Omit<React.HTMLAttributes<HTMLDivElem
      */
     onClose?: (index: number, tab: TabProps<T>, event: React.MouseEvent) => boolean | Promise<boolean>;
 }
-export declare type TabsComponent = <T = {}>(props: TabsProps<T>) => JSX.Element;
+export declare type TabsComponent = <T = {}, C extends string = string>(props: TabsProps<T, C>) => JSX.Element;

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

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

package/dist/index.js

@@ -19506,6 +19506,14 @@ var hasChildren = function hasChildren(tabs, group) {
     return tab.group === group && !tab.primary;
   }) : false;
 };
+var mapComponents = function mapComponents(obj) {
+  return obj;
+};
+var buildComponent = function buildComponent(component, provider) {
+  return provider ? Object.assign(component, {
+    provider: provider
+  }) : component;
+};
 
 var _templateObject$19;
 var Close = styled__default.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  background-color: var(--bgColor);\n  color: var(--color);\n  padding: 4px 8px;\n\n  transition: --color 0.5s, --bgColor 0.5s;\n\n  svg {\n    width: 14px;\n    height: 14px;\n\n    * {\n      transition: --color 0.5s;\n      stroke: var(--color);\n    }\n  }\n"])));
@@ -19535,13 +19543,12 @@ var Close$1 = function Close$1(props) {
           return;
         }
 
-        if (index < active) {
-          setActive(active - 1, newOptions[active - 1].data);
-        } else if (active === index) {
-          var newactive = active > 0 ? active - 1 : active;
-          setActive(newactive, newOptions[newactive].data);
-        }
+        var newactive = function () {
+          if (index < active) return active - 1;
+          return active > 0 ? active - 1 : active;
+        }();
 
+        setActive(newactive, newOptions[newactive].data);
         setOptions(newOptions);
       });
     } catch (e) {
@@ -19619,10 +19626,11 @@ var TabItem = function TabItem(props) {
       _props$tabs = props.tabs,
       tabs = _props$tabs[0],
       setTabs = _props$tabs[1],
+      sortedTabs = props.sortedTabs,
       onClose = props.onClose,
       alwaysOpen = props.alwaysOpen;
   var CloseComponent = alwaysOpen || tabs.length < 2 ? VoidClose : Close$1;
-  return React__default.createElement(React__default.Fragment, null, tabs.map(function (_ref) {
+  return React__default.createElement(React__default.Fragment, null, sortedTabs.map(function (_ref) {
     var index = _ref.index,
         tab = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
@@ -19650,12 +19658,13 @@ var TabItem = function TabItem(props) {
   }));
 };
 
-var _templateObject$1c, _templateObject2$S, _templateObject3$J;
+var _templateObject$1c, _templateObject2$S, _templateObject3$J, _templateObject4$x;
 var delimiters = {
   blue: ['blue'],
   grey: ['warningGray']
 };
-var Tabs = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  display: flex;\n  width: 100%;\n  white-space: nowrap;\n\n  ", "\n\n  ", "\n\n\n  /* exibe as setas de navega\xE7\xE3o vis\xEDveis ao passar o mouse sobre o container */\n  &:hover .scroll-arrow.visible:nth-child(1) {\n    left: 0;\n  }\n  & .scroll-arrow:nth-child(1) {\n    left: -16px;\n  }\n\n  &:hover .scroll-arrow.visible:nth-last-child(1) {\n    right: 0;\n  }\n  & .scroll-arrow:nth-last-child(1) {\n    right: -16px;\n  }\n"])), function (_ref) {
+var ComponentContainer = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose([""])));
+var Tabs = styled__default.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  display: flex;\n  width: 100%;\n  white-space: nowrap;\n\n  ", "\n\n  ", "\n\n\n  /* exibe as setas de navega\xE7\xE3o vis\xEDveis ao passar o mouse sobre o container */\n  &:hover .scroll-arrow.visible:nth-child(1) {\n    left: 0;\n  }\n  & .scroll-arrow:nth-child(1) {\n    left: -16px;\n  }\n\n  &:hover .scroll-arrow.visible:nth-last-child(1) {\n    right: 0;\n  }\n  & .scroll-arrow:nth-last-child(1) {\n    right: -16px;\n  }\n"])), function (_ref) {
   var spacing = _ref.$spacing;
 
   var _getSpacings$split = getSpacings(spacing || {}, {
@@ -19669,13 +19678,13 @@ var Tabs = styled__default.div(_templateObject$1c || (_templateObject$1c = _tagg
       bottom = _getSpacings$split[2],
       left = _getSpacings$split[3];
 
-  return styled.css(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n      margin: ", " 0 ", " 0;\n      padding: 0 ", " 0 ", ";\n    "])), top, bottom, right, left);
+  return styled.css(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n      margin: ", " 0 ", " 0;\n      padding: 0 ", " 0 ", ";\n    "])), top, bottom, right, left);
 }, function (_ref2) {
   var theme = _ref2.theme,
       internal = _ref2.$internal,
       delimiter = _ref2.$delimiter;
   var border = delimiter === 'none' ? 'none' : internal ? "1px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'grey']) : "2px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'blue']);
-  return styled.css(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
+  return styled.css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n      + ", " {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, ComponentContainer, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
 });
 
 var VoidProvider = function VoidProvider(props) {
@@ -19684,7 +19693,9 @@ var VoidProvider = function VoidProvider(props) {
   });
 };
 
-var Tabs$1 = function Tabs$1(props) {
+var Component$3 = function Component(props) {
+  var components = props.components || {};
+
   var _ref = typeof props.options[1] === 'function' ? props.options : React.useState(props.options),
       options = _ref[0],
       setOptions = _ref[1];
@@ -19712,17 +19723,20 @@ var Tabs$1 = function Tabs$1(props) {
     internal: props.internal
   }), React__default.createElement(TabItem, {
     active: [active, setActive],
-    tabs: [sortedTabs, setOptions],
+    tabs: [options, setOptions],
+    sortedTabs: sortedTabs,
     onClose: props.onClose,
     alwaysOpen: props.alwaysOpen,
     internal: props.internal
   }))), options.map(function (tab, index) {
-    if (!('component' in tab)) return React__default.createElement(React__default.Fragment, {
-      key: index
-    });
-    var _tab$provider = tab.provider,
-        Provider = _tab$provider === void 0 ? VoidProvider : _tab$provider,
-        Component = tab.component;
+    if (tab.component === undefined) {
+      return React__default.createElement(React__default.Fragment, {
+        key: index
+      });
+    }
+
+    var Component = components[tab.component];
+    var Provider = Component.provider || VoidProvider;
 
     var setTab = function setTab(s) {
       setOptions(function (prev) {
@@ -19752,8 +19766,9 @@ var Tabs$1 = function Tabs$1(props) {
       setLabel: setLabel
     }, index === active ? {
       active: true,
-      children: React__default.createElement("div", null, React__default.createElement(Component, {
+      children: React__default.createElement(ComponentContainer, null, React__default.createElement(Component, {
         data: tab.data,
+        label: tab.label,
         setLabel: setLabel
       }))
     } : {
@@ -19762,6 +19777,11 @@ var Tabs$1 = function Tabs$1(props) {
   }));
 };
 
+var Tabs$1 = Object.assign(Component$3, {
+  mapComponents: mapComponents,
+  buildComponent: buildComponent
+});
+
 var _templateObject$1d;
 var Container$q = styled__default.textarea(_templateObject$1d || (_templateObject$1d = _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;
@@ -19773,7 +19793,7 @@ var TextArea = function TextArea(props) {
   return React__default.createElement(Container$q, Object.assign({}, props));
 };
 
-var _templateObject$1e, _templateObject2$T, _templateObject3$K, _templateObject4$x, _templateObject5$t, _templateObject6$q;
+var _templateObject$1e, _templateObject2$T, _templateObject3$K, _templateObject4$y, _templateObject5$t, _templateObject6$q;
 var Container$r = styled__default.div(_templateObject$1e || (_templateObject$1e = _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) {
@@ -19781,7 +19801,7 @@ var Container$r = styled__default.div(_templateObject$1e || (_templateObject$1e
 }, function (props) {
   return props.color === 'error' && styled.css(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n      background-color: #fff6f6;\n      opacity: 1;\n      border-color: #973937;\n      h4 {\n        color: #973937;\n      }\n      p {\n        color: #973937;\n      }\n    "])));
 }, function (props) {
-  return props.color === 'warning' && styled.css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
+  return props.color === 'warning' && styled.css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
 });
 var IconContainer$2 = styled__default.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
 var IconContent = styled__default.div(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 13px 0 21px 28px;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  h4 {\n    margin-bottom: 7px;\n    font-size: 18p;\n  }\n  p {\n    margin: 0;\n    font-size: 14px;\n    max-width: 380px;\n  }\n"])));
@@ -19796,7 +19816,7 @@ 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$1f, _templateObject2$U, _templateObject3$L, _templateObject4$y, _templateObject5$u;
+var _templateObject$1f, _templateObject2$U, _templateObject3$L, _templateObject4$z, _templateObject5$u;
 var Image = styled__default.img(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
 var Container$s = styled__default.div(_templateObject2$U || (_templateObject2$U = _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;
@@ -19829,7 +19849,7 @@ var Dimmer = styled__default.div(_templateObject3$L || (_templateObject3$L = _ta
   var theme = _ref3.theme;
   return theme.getColor('greyishBlue', 50);
 });
-var Button$6 = styled__default(Button$1)(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
+var Button$6 = styled__default(Button$1)(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.getColor('white', 50);
 });