@mw-kit/mw-ui 1.7.100 → 1.7.102

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

@@ -16,10 +16,12 @@ declare type Tab<T = {}> = {
 };
 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> & ({
     /**
@@ -67,7 +69,7 @@ export interface TabsProps<T = {}> extends React.HTMLAttributes<HTMLDivElement>
     /**
      * callback when closing a tab
      */
-    onClose?: (index: number, tab: TabProps<T>, event: React.MouseEvent) => void | Promise<void>;
+    onClose?: (index: number, tab: TabProps<T>, event: React.MouseEvent) => boolean | Promise<boolean>;
 }
 export interface StyledTabsProps {
     /**

package/dist/index.js

@@ -19350,13 +19350,74 @@ 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$x, _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 _templateObject$17;
+var Close = styled__default.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - ", " / 2);\n  right: ", ";\n\n  + div {\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;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return "calc(" + theme.spacings.s3 + " + " + theme.spacings.s3 + " + " + theme.spacings.s3 + ")";
+});
+
+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 () {
+    return true;
+  };
+
+  var onClickClose = React.useCallback(function (event) {
+    try {
+      var _exit2 = false;
+      if (options.length === 1) return Promise.resolve();
+      var newOptions = [].concat(options);
+      newOptions.splice(index, 1);
+      return Promise.resolve(onClose(index, options[index], event)).then(function (_onClose) {
+        if (!_onClose) {
+          _exit2 = true;
+          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);
+        }
+
+        setOptions(newOptions);
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [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'
+  }));
+};
+
+var _templateObject$18, _templateObject2$Q, _templateObject3$J, _templateObject4$x, _templateObject5$t, _templateObject6$q, _templateObject7$q, _templateObject8$n, _templateObject9$k;
+var Container$n = styled__default.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
 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\n  > li {\n    position: relative;\n  }\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  overflow-x: auto;\n  scrollbar-width: none;\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 || {}, {
@@ -19390,14 +19451,14 @@ 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  ", "\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 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  white-space: nowrap;\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) {
+  return styled.css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: calc(", " * 1.5) ", ";\n    gap: ", ";\n\n    ", "\n\n    color: ", ";\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s1, 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) {
@@ -19406,55 +19467,6 @@ var Tab = styled__default.div(_templateObject5$t || (_templateObject5$t = _tagge
   }), theme.colors[active ? 'white' : 'darkBlue']);
 });
 
-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 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 onClickClose = React.useCallback(function (event) {
-    if (options.length === 1) return;
-    var newOptions = [].concat(options);
-    newOptions.splice(index, 1);
-    onClose(index, options[index], event);
-
-    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);
-    }
-
-    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'
-  }));
-};
-
 var VoidClose = function VoidClose() {
   return React__default.createElement(React__default.Fragment, null);
 };
@@ -19479,14 +19491,31 @@ var Tabs$1 = function Tabs$1(props) {
   return React__default.createElement(Container$n, Object.assign({}, divProps), React__default.createElement(Tabs, {
     "$internal": props.internal,
     "$delimiter": props.delimiter,
-    "$spacing": props.spacing
+    "$spacing": props.spacing,
+    onWheel: function onWheel(e) {
+      var target = function () {
+        var target = e.target;
+
+        while (target && target.tagName !== 'UL') {
+          target = target.parentElement;
+        }
+
+        return target;
+      }();
+
+      if (!target) return;
+      var x = target.offsetWidth * 100 / target.scrollWidth;
+      target.scrollLeft += x * (e.deltaY > 0 ? 1 : -1) * 2;
+      e.preventDefault();
+    }
   }, options.map(function (tab, index) {
     return React__default.createElement("li", {
       key: index
     }, React__default.createElement(CloseComponent, {
       index: index,
       active: [active, setActive],
-      options: [options, setOptions]
+      options: [options, setOptions],
+      onClose: props.onClose
     }), React__default.createElement(Tab, Object.assign({}, index === active ? {
       $active: true
     } : {
@@ -19516,15 +19545,26 @@ var Tabs$1 = function Tabs$1(props) {
       });
     };
 
+    var setLabel = function setLabel(s) {
+      setTab(function (prev) {
+        var label = typeof s === 'function' ? s(prev.label) : s;
+        return s === label ? prev : _extends({}, prev, {
+          label: label
+        });
+      });
+    };
+
     return React__default.createElement(Provider, Object.assign({
       key: tab.key !== undefined ? tab.key : index,
       label: tab.label,
       data: tab.data,
-      setTab: setTab
+      setTab: setTab,
+      setLabel: setLabel
     }, index === active ? {
       active: true,
       children: React__default.createElement("div", null, React__default.createElement(Component, {
-        data: tab.data
+        data: tab.data,
+        setLabel: setLabel
       }))
     } : {
       active: false