@doist/reactist 27.5.0 → 28.0.0

package/dist/reactist.cjs.development.js

@@ -2776,9 +2776,9 @@ function ModalActions(_ref5) {
   }, children));
 }
 
-var modules_40c67f5b = {"tab":"faa5b46e","track":"_93de0ded","tab-neutral":"_82a91995","tab-themed":"f150e9da","track-neutral":"_10f229b4","track-themed":"_54f03992"};
+var modules_40c67f5b = {"tab":"_9f64e89a","fullTabList":"_49fe8e5a","track":"_1f449e3a","selected":"a8ac92b1","tab-neutral":"_6c6b8a2b","tab-themed":"_0eddd76d","track-neutral":"be66f12e","track-themed":"d21ccd50","selected-neutral":"_33211e81","selected-themed":"_4d1cbd10"};
 
-const _excluded$5 = ["children", "space"],
+const _excluded$5 = ["children", "space", "width", "align", "exceptionallySetClassName"],
       _excluded2$1 = ["children", "id", "renderMode"];
 const TabsContext = /*#__PURE__*/React__namespace.createContext(null);
 /**
@@ -2819,6 +2819,7 @@ function Tabs({
 const Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab({
   children,
   id,
+  disabled,
   exceptionallySetClassName,
   render,
   onClick
@@ -2833,6 +2834,7 @@ const Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab({
   return /*#__PURE__*/React__namespace.createElement(react.Tab, {
     id: id,
     ref: ref,
+    disabled: disabled,
     store: tabStore,
     render: render,
     className: className,
@@ -2846,11 +2848,42 @@ const Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab({
 function TabList(_ref2) {
   let {
     children,
-    space
+    space,
+    width = 'maxContent',
+    align = 'start',
+    exceptionallySetClassName
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded$5);
 
   const tabContextValue = React__namespace.useContext(TabsContext);
+  const [selectedTabElement, setSelectedTabElement] = React__namespace.useState(null);
+  const [selectedTabStyle, setSelectedTabStyle] = React__namespace.useState({});
+  const tabListRef = React__namespace.useRef(null);
+  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
+  React__namespace.useLayoutEffect(() => {
+    function updateSelectedTabStyle() {
+      if (!selectedId || !tabListRef.current) {
+        return;
+      }
+
+      const tabs = tabListRef.current.querySelectorAll('[role="tab"]');
+      const selectedTab = Array.from(tabs).find(tab => tab.getAttribute('id') === selectedId);
+
+      if (selectedTab) {
+        setSelectedTabElement(selectedTab);
+        setSelectedTabStyle({
+          left: selectedTab.offsetLeft + "px",
+          width: selectedTab.offsetWidth + "px"
+        });
+      }
+    }
+
+    updateSelectedTabStyle();
+    window.addEventListener('resize', updateSelectedTabStyle);
+    return function cleanupEventListener() {
+      window.removeEventListener('resize', updateSelectedTabStyle);
+    };
+  }, [selectedId]);
 
   if (!tabContextValue) {
     return null;
@@ -2860,20 +2893,35 @@ function TabList(_ref2) {
     tabStore,
     variant
   } = tabContextValue;
+  const justifyContentAlignMap = {
+    start: 'flexStart',
+    end: 'flexEnd',
+    center: 'center'
+  };
   return (
     /*#__PURE__*/
-    // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container
-    // which will render the track with the wrong height
-    React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(react.TabList, _objectSpread2({
+    // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s
+    // negative margins from collapsing when used in a flex container which will render the
+    // track with the wrong height
+    React__namespace.createElement(Box$1, {
+      display: "flex",
+      justifyContent: width === 'full' ? 'center' : justifyContentAlignMap[align]
+    }, /*#__PURE__*/React__namespace.createElement(react.TabList, _objectSpread2({
       store: tabStore,
       render: /*#__PURE__*/React__namespace.createElement(Box$1, {
         position: "relative",
-        width: "maxContent"
-      })
+        width: width,
+        className: exceptionallySetClassName
+      }),
+      ref: tabListRef
     }, props), /*#__PURE__*/React__namespace.createElement(Box$1, {
       className: [modules_40c67f5b.track, modules_40c67f5b["track-" + variant]]
-    }), /*#__PURE__*/React__namespace.createElement(Inline, {
-      space: space
+    }), selectedTabElement ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+      className: [modules_40c67f5b.selected, modules_40c67f5b["selected-" + variant]],
+      style: selectedTabStyle
+    }) : null, /*#__PURE__*/React__namespace.createElement(Inline, {
+      space: space,
+      exceptionallySetClassName: classNames__default["default"](width === 'full' ? modules_40c67f5b.fullTabList : null)
     }, children)))
   );
 }