@mw-kit/mw-ui 1.7.79 → 1.7.81

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

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

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

@@ -1,4 +1,3 @@
-import React from 'react';
-import { TabsProps } from './interfaces';
-declare const Tabs: (props: React.PropsWithChildren<TabsProps>) => JSX.Element;
+import { TabsComponent } from './interfaces';
+declare const Tabs: TabsComponent;
 export default Tabs;

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

@@ -1,29 +1,36 @@
 /// <reference types="react" />
 import { SpacingOrZero, Spacings } from '../../interfaces';
-export declare type TabComponent = React.FunctionComponent;
-export declare type TabProvider = React.FunctionComponent<React.PropsWithChildren<{
+export declare type TabComponent<T = {}> = React.FunctionComponent<{
+    data: T;
+}>;
+export declare type TabProvider<T = {}> = React.FunctionComponent<React.PropsWithChildren<{
     active: boolean;
+    data: T;
 }>>;
-export declare type TabProps = {
+export declare type TabProps<T = {}> = {
     /**
      * Define the tab label.
      */
     label: string;
+    /**
+     * Define the tab data.
+     */
+    data: T;
 } & ({
     /**
      * Specifies which component, will mount/unmount everytime the tab is ACTIVATED/INACTIVATED
      */
-    component: TabComponent;
+    component: TabComponent<T>;
     /**
      * Specifies the component provider, will mount/unmount when the tab is CREATED/REMOVED
      */
-    provider?: TabProvider;
+    provider?: TabProvider<T>;
 } | {});
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabsProps<T = {}> extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Array with available tabs.
      */
-    options: TabProps[] | [TabProps[], React.Dispatch<React.SetStateAction<TabProps[]>>];
+    options: TabProps<T>[] | [TabProps<T>[], React.Dispatch<React.SetStateAction<TabProps<T>[]>>];
     /**
      * React state to control which tab is active.
      */
@@ -55,7 +62,7 @@ export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * callback when closing a tab
      */
-    onClose?: (index: number, tab: TabProps, event: React.MouseEvent) => void | Promise<void>;
+    onClose?: (index: number, tab: TabProps<T>, event: React.MouseEvent) => void | Promise<void>;
 }
 export interface StyledTabsProps {
     /**
@@ -67,3 +74,4 @@ export interface StyledTabsProps {
      */
     $active?: boolean;
 }
+export declare type TabsComponent = <T = {}>(props: React.PropsWithChildren<TabsProps<T>>) => JSX.Element;

package/dist/index.js

@@ -19098,7 +19098,7 @@ var ProgressBar = function ProgressBar(props) {
   return React__default.createElement(Container$m, null, React__default.createElement(Progress, Object.assign({}, props), React__default.createElement("div", null)), React__default.createElement("span", null, " ", props.value || '0', "%"));
 };
 
-var _templateObject$17, _templateObject2$Q, _templateObject3$J, _templateObject4$w, _templateObject5$t, _templateObject6$q, _templateObject7$q, _templateObject8$n;
+var _templateObject$17, _templateObject2$Q, _templateObject3$J, _templateObject4$w, _templateObject5$t, _templateObject6$q, _templateObject7$q, _templateObject8$n, _templateObject9$k;
 var Container$n = styled__default.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
 var delimiters = {
   blue: ['blue'],
@@ -19138,15 +19138,18 @@ var Tabs = styled__default.ul(_templateObject2$Q || (_templateObject2$Q = _tagge
       internal = _ref3.$internal;
   return internal ? theme.spacings.s6 : 0;
 });
-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    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          ", "\n          line-height: 19px;\n        "])), theme.getColor('black', 15), function (_ref6) {
+var Tab = styled__default.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  ", "\n\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 onClick = _ref4.onClick;
+  return onClick && styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      active = _ref5.$active,
+      internal = _ref5.$internal;
+  return styled.css(_templateObject7$q || (_templateObject7$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(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n          border-radius: 4px 4px 0 0;\n\n          ", "\n          line-height: 17px;\n        "])), function (_ref6) {
     var theme = _ref6.theme;
+    return theme.useTypography('h4');
+  }) : styled.css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n          box-shadow: 0px 3px 6px ", ";\n\n          ", "\n          line-height: 19px;\n        "])), theme.getColor('black', 15), function (_ref7) {
+    var theme = _ref7.theme;
     return theme.useTypography('h2');
   }), theme.colors[active ? 'white' : 'darkBlue']);
 });
@@ -19229,14 +19232,16 @@ var Tabs$1 = function Tabs$1(props) {
       index: index,
       active: [active, setActive],
       options: [options, setOptions]
-    }), React__default.createElement(Tab, {
-      "$active": index === active,
-      "$internal": props.internal,
+    }), React__default.createElement(Tab, Object.assign({}, index === active ? {
+      $active: true
+    } : {
       onClick: function onClick() {
         return setActive(index);
-      },
+      }
+    }, {
+      "$internal": props.internal,
       children: tab.label
-    }));
+    })));
   })), options.map(function (tab, index) {
     if (!('component' in tab)) return React__default.createElement(React__default.Fragment, {
       key: index
@@ -19245,10 +19250,13 @@ var Tabs$1 = function Tabs$1(props) {
         Provider = _tab$provider === void 0 ? VoidProvider : _tab$provider,
         Component = tab.component;
     return React__default.createElement(Provider, Object.assign({
-      key: index
+      key: index,
+      data: tab.data
     }, index === active ? {
       active: true,
-      children: React__default.createElement("div", null, React__default.createElement(Component, null))
+      children: React__default.createElement("div", null, React__default.createElement(Component, {
+        data: tab.data
+      }))
     } : {
       active: false
     }));