@bento-core/tab 1.0.0-c3dc.2 → 1.0.0-c3dc.4

package/dist/Tabs.js

@@ -44,16 +44,25 @@ const TabItems = _ref => {
   const [currentGroup, setCurrentGroup] = (0, _react.useState)(0);
   const [showMorePopup, setShowMorePopup] = (0, _react.useState)(false);
   const [moreButtonAnchor, setMoreButtonAnchor] = (0, _react.useState)(null);
-  const [windowWidth, setWindowWidth] = (0, _react.useState)(typeof window !== 'undefined' ? window.innerWidth : getDefaultWindowWidth(responsiveBreakpoints));
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(getDefaultWindowWidth(responsiveBreakpoints));
+  const containerRef = (0, _react.useRef)(null);
 
   // Calculate tab limit based on screen width breakpoints
+  // We are now using the div container width instead of window width
+  // This is to support the facet kickout feature so that the tabs respond
+  // to the available space in the container div
+  // These breakpoints are calculated by multiplying the width of each tab
+  // including the padding/margin (203px)
+  // and counting the more button as a tab (203px)
+  // We will have enough space for tabs + more button + empty tab space
+  // e.g. 2 tabs: (203 * 2) + 203 + 203 = 812px
   const getTabLimitByWidth = width => {
     if (!responsiveBreakpoints) {
       // Fallback to original hardcoded values if no config provided
-      if (width < 1250) return 2;
-      if (width < 1400) return 3;
-      if (width < 1550) return 4;
-      if (width < 1700) return 5;
+      if (width < 812) return 2;
+      if (width < 1015) return 3;
+      if (width < 1281) return 4;
+      if (width < 1421) return 5;
       return 6; // >= 1700px
     }
 
@@ -71,21 +80,26 @@ const TabItems = _ref => {
   };
 
   // Grouping logic with responsive breakpoints
-  const tabLimit = enableGrouping ? getTabLimitByWidth(windowWidth) : maxVisibleTabs;
+  const tabLimit = enableGrouping ? getTabLimitByWidth(containerWidth) : maxVisibleTabs;
   const shouldShowMoreButton = enableGrouping && tabItems.length > tabLimit;
 
-  // Window resize listener for responsive breakpoints
+  // ResizeObserver to monitor container div width for responsive breakpoints
   (0, _react.useEffect)(() => {
-    if (!enableGrouping || typeof window === 'undefined') {
+    if (!enableGrouping || !containerRef.current) {
       return undefined;
     }
-    const handleResize = () => {
-      const newWidth = window.innerWidth;
-      setWindowWidth(newWidth);
-    };
-    window.addEventListener('resize', handleResize);
+    const resizeObserver = new ResizeObserver(entries => {
+      if (entries.length > 0) {
+        const newWidth = entries[0].contentRect.width;
+        setContainerWidth(newWidth);
+      }
+    });
+    resizeObserver.observe(containerRef.current);
+
+    // Set initial width
+    setContainerWidth(containerRef.current.offsetWidth);
     return () => {
-      window.removeEventListener('resize', handleResize);
+      resizeObserver.disconnect();
     };
   }, [enableGrouping]);
 
@@ -123,18 +137,24 @@ const TabItems = _ref => {
 
     // Add tabs after visible range
     for (let i = visibleEnd; i < tabItems.length; i += 1) {
-      hiddenTabsWithIndex.push({
-        tab: tabItems[i],
-        originalIndex: i
-      });
+      const tab = tabItems[i];
+      if (tab) {
+        hiddenTabsWithIndex.push({
+          tab,
+          originalIndex: i
+        });
+      }
     }
 
     // Add tabs before visible range (wrap-around)
     for (let i = 0; i < visibleStart; i += 1) {
-      hiddenTabsWithIndex.push({
-        tab: tabItems[i],
-        originalIndex: i
-      });
+      const tab = tabItems[i];
+      if (tab) {
+        hiddenTabsWithIndex.push({
+          tab,
+          originalIndex: i
+        });
+      }
     }
     return hiddenTabsWithIndex;
   }, [enableGrouping, shouldShowMoreButton, currentGroup, tabLimit, tabItems]);
@@ -227,6 +247,7 @@ const TabItems = _ref => {
   return /*#__PURE__*/_react.default.createElement(_core.ThemeProvider, {
     theme: themeConfig
   }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
     style: {
       position: 'relative'
     }
@@ -265,6 +286,9 @@ const TabItems = _ref => {
       tab,
       originalIndex
     } = _ref3;
+    if (!tab || !tab.name) {
+      return null;
+    }
     return /*#__PURE__*/_react.default.createElement(_core.ListItem, {
       key: originalIndex,
       button: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/tab",
-  "version": "1.0.0-c3dc.2",
+  "version": "1.0.0-c3dc.4",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/Tabs.js

@@ -1,4 +1,9 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import {
   Tab,
   Tabs,
@@ -41,16 +46,27 @@ const TabItems = ({
   const [currentGroup, setCurrentGroup] = useState(0);
   const [showMorePopup, setShowMorePopup] = useState(false);
   const [moreButtonAnchor, setMoreButtonAnchor] = useState(null);
-  const [windowWidth, setWindowWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : getDefaultWindowWidth(responsiveBreakpoints));
+  const [containerWidth, setContainerWidth] = useState(
+    getDefaultWindowWidth(responsiveBreakpoints),
+  );
+  const containerRef = useRef(null);
 
   // Calculate tab limit based on screen width breakpoints
+  // We are now using the div container width instead of window width
+  // This is to support the facet kickout feature so that the tabs respond
+  // to the available space in the container div
+  // These breakpoints are calculated by multiplying the width of each tab
+  // including the padding/margin (203px)
+  // and counting the more button as a tab (203px)
+  // We will have enough space for tabs + more button + empty tab space
+  // e.g. 2 tabs: (203 * 2) + 203 + 203 = 812px
   const getTabLimitByWidth = (width) => {
     if (!responsiveBreakpoints) {
       // Fallback to original hardcoded values if no config provided
-      if (width < 1250) return 2;
-      if (width < 1400) return 3;
-      if (width < 1550) return 4;
-      if (width < 1700) return 5;
+      if (width < 812) return 2;
+      if (width < 1015) return 3;
+      if (width < 1281) return 4;
+      if (width < 1421) return 5;
       return 6; // >= 1700px
     }
 
@@ -65,23 +81,29 @@ const TabItems = ({
   };
 
   // Grouping logic with responsive breakpoints
-  const tabLimit = enableGrouping ? getTabLimitByWidth(windowWidth) : maxVisibleTabs;
+  const tabLimit = enableGrouping ? getTabLimitByWidth(containerWidth) : maxVisibleTabs;
   const shouldShowMoreButton = enableGrouping && tabItems.length > tabLimit;
 
-  // Window resize listener for responsive breakpoints
+  // ResizeObserver to monitor container div width for responsive breakpoints
   useEffect(() => {
-    if (!enableGrouping || typeof window === 'undefined') {
+    if (!enableGrouping || !containerRef.current) {
       return undefined;
     }
 
-    const handleResize = () => {
-      const newWidth = window.innerWidth;
-      setWindowWidth(newWidth);
-    };
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (entries.length > 0) {
+        const newWidth = entries[0].contentRect.width;
+        setContainerWidth(newWidth);
+      }
+    });
+
+    resizeObserver.observe(containerRef.current);
+
+    // Set initial width
+    setContainerWidth(containerRef.current.offsetWidth);
 
-    window.addEventListener('resize', handleResize);
     return () => {
-      window.removeEventListener('resize', handleResize);
+      resizeObserver.disconnect();
     };
   }, [enableGrouping]);
 
@@ -121,12 +143,18 @@ const TabItems = ({
 
     // Add tabs after visible range
     for (let i = visibleEnd; i < tabItems.length; i += 1) {
-      hiddenTabsWithIndex.push({ tab: tabItems[i], originalIndex: i });
+      const tab = tabItems[i];
+      if (tab) {
+        hiddenTabsWithIndex.push({ tab, originalIndex: i });
+      }
     }
 
     // Add tabs before visible range (wrap-around)
     for (let i = 0; i < visibleStart; i += 1) {
-      hiddenTabsWithIndex.push({ tab: tabItems[i], originalIndex: i });
+      const tab = tabItems[i];
+      if (tab) {
+        hiddenTabsWithIndex.push({ tab, originalIndex: i });
+      }
     }
 
     return hiddenTabsWithIndex;
@@ -224,7 +252,7 @@ const TabItems = ({
   const themeConfig = createTheme({ overrides: { ...defaultTheme(), ...customTheme } });
   return (
     <ThemeProvider theme={themeConfig}>
-      <div style={{ position: 'relative' }}>
+      <div ref={containerRef} style={{ position: 'relative' }}>
         <Tabs
           onChange={(event, value) => {
             // Convert relative position to actual tab index when grouping is enabled
@@ -257,21 +285,26 @@ const TabItems = ({
             style={{ marginTop: '10px' }}
           >
             <List className="popover-list">
-              {popupTabs.map(({ tab, originalIndex }) => (
-                <ListItem
-                  key={originalIndex}
-                  button
-                  onClick={() => handlePopupTabClick(originalIndex)}
-                  className="popover-list-item"
-                >
-                  <span className="popover-tab-name">
-                    {tab.name}
-                  </span>
-                  <span className="popover-tab-count">
-                    {tab.count || ''}
-                  </span>
-                </ListItem>
-              ))}
+              {popupTabs.map(({ tab, originalIndex }) => {
+                if (!tab || !tab.name) {
+                  return null;
+                }
+                return (
+                  <ListItem
+                    key={originalIndex}
+                    button
+                    onClick={() => handlePopupTabClick(originalIndex)}
+                    className="popover-list-item"
+                  >
+                    <span className="popover-tab-name">
+                      {tab.name}
+                    </span>
+                    <span className="popover-tab-count">
+                      {tab.count || ''}
+                    </span>
+                  </ListItem>
+                );
+              })}
             </List>
           </Popover>
         )}