@app-studio/web 0.8.64 → 0.8.65

package/dist/web.esm.js

@@ -7650,90 +7650,147 @@ Table.Caption = TableCaption;
 Table.Container = TableContainer;
 Table.Template = TableView;
 
-// Initializes a custom hook for managing tab states with an array of 'Tab' objects passed as properties.
-var useTabsState = propTabs => {
-  var [isActive, setIsActive] = useState(propTabs[0]);
-  var [tabsState, setTabsState] = useState(propTabs);
+/**
+ * Custom hook to manage the state of the active tab.
+ * @param propTabs - The array of tab objects provided as props.
+ * @param initialTabValue - The optional title of the tab to be initially active.
+ * @returns An object containing the current activeTab and a function to update it.
+ */
+var useTabsState = (propTabs, initialTabValue) => {
+  // Find the initial tab based on initialTabValue, or default to the first tab.
+  // Ensure propTabs is not empty before accessing index 0.
+  var findInitialTab = () => {
+    if (!propTabs || propTabs.length === 0) {
+      return undefined; // No tabs, no initial active tab
+    }
+    if (initialTabValue !== undefined) {
+      var foundTab = propTabs.find(tab => tab.title === initialTabValue);
+      if (foundTab) {
+        return foundTab;
+      }
+      // Warn if initialTabValue is provided but not found
+      console.warn("Tabs: initialTabValue \"" + initialTabValue + "\" not found in tabs. Defaulting to the first tab.");
+    }
+    return propTabs[0]; // Default to the first tab
+  };
+  var [activeTab, setActiveTab] = useState(findInitialTab);
+  // Effect to update the active tab if the initialTabValue prop changes
+  // or if the tabs array changes and the current active tab is no longer valid.
+  useEffect(() => {
+    var newInitialTab = findInitialTab();
+    // Update only if the calculated initial tab is different from the current active tab
+    // or if the current active tab is no longer in the list (and there are tabs)
+    var currentActiveTabStillValid = activeTab && propTabs.some(t => t.title === activeTab.title);
+    if (newInitialTab && (!currentActiveTabStillValid || initialTabValue !== undefined && (activeTab == null ? void 0 : activeTab.title) !== initialTabValue)) {
+      setActiveTab(newInitialTab);
+    } else if (!newInitialTab && activeTab) {
+      // Handle case where all tabs are removed
+      setActiveTab(undefined);
+    }
+  }, [propTabs, initialTabValue]); // Rerun when tabs or initial title changes
   return {
-    isActive,
-    setIsActive,
-    tabsState,
-    setTabsState
+    activeTab,
+    setActiveTab
   };
 };
 
-// Defines a functional component 'TabsView' with props of type 'TabsViewProps'.
-var TabsView = props => {
-  // Destructures 'tabs', 'styles', 'isActive', 'setIsActive', 'tabsState', and 'setTabsState' from the component props.
-  var {
-    tabs,
-    styles,
-    isActive,
-    setIsActive,
-    tabsState,
-    setTabsState,
+/**
+ * The presentation component for Tabs. Renders the UI based on props.
+ */
+var TabsView = _ref => {
+  var {
+    tabs = [],
+    // Default to empty array
+    activeTab,
+    handleTabClick,
+    styles = {},
+    // Default to empty object
     renderTab,
     renderContent
-  } = props;
-  // Declares a function 'moveSelectedTabToTop' that takes an index and modifies the tabs order.
-  var moveSelectedTabToTop = idx => {
-    // Creates a copy of the 'tabs' array from props to be altered.
-    var newTabs = [...tabs];
-    // Removes the tab at the provided index, effectively selecting this tab.
-    var selectedTab = newTabs.splice(idx, 1);
-    // Places the selected tab at the start of the 'newTabs' array.
-    newTabs.unshift(selectedTab[0]);
-    // Updates the state with the reordered tabs.
-    setTabsState(newTabs);
-    // Sets the active tab to the first tab in the 'newTabs' array.
-    setIsActive(newTabs[0]);
-  };
-  // Defines a function 'isContentActive' that checks if the given tab's content is to be displayed.
-  var isContentActive = tab => {
-    // Returns a boolean indicating if the given tab is identical to the first tab in 'tabsState'.
-    return tab.value === tabsState[0].value;
-  };
-  return /*#__PURE__*/React.createElement(Vertical, Object.assign({
-    width: "100%",
-    height: '100%'
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({}, styles == null ? void 0 : styles.headerTabs), tabs.map((tab, idx) => renderTab ? renderTab(tab, isContentActive(tab), idx) : (/*#__PURE__*/React.createElement(Button, Object.assign({
-    key: tab.title,
-    onClick: () => {
-      moveSelectedTabToTop(idx);
-    },
-    variant: isActive.value === tab.value ? 'filled' : 'ghost',
-    shape: "pillShaped",
-    cursor: "pointer",
-    isAuto: true,
-    margin: 10
-  }, styles == null ? void 0 : styles.tab, isActive.value === tab.value ? styles == null ? void 0 : styles.activeTab : {}), /*#__PURE__*/React.createElement(Text, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title))))), /*#__PURE__*/React.createElement(View, Object.assign({
-    width: '100%',
-    height: "100%"
-  }, styles == null ? void 0 : styles.content), tabsState.map(renderContent ? renderContent : (tab, idx) => isContentActive(tab) && /*#__PURE__*/React.createElement(View, {
-    key: idx
-  }, tab.content))));
+  } = _ref;
+  // If there's no active tab (e.g., tabs array is empty), render nothing or a placeholder
+  if (!activeTab) {
+    // Optionally render a placeholder when no tabs are active/available
+    // return <View {...styles.container}><Text>No tabs available.</Text></View>;
+    return null; // Or simply render nothing
+  }
+  return (
+    /*#__PURE__*/
+    // Use Vertical layout for overall structure (tabs header above content)
+    React.createElement(Vertical, Object.assign({
+      width: "100%",
+      height: '100%'
+    }, styles.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({}, styles.headerTabs), tabs.map(tab => {
+      // Determine if the current tab in the loop is the active one
+      var isActive = tab.title === activeTab.title;
+      // Prepare the onClick handler for this specific tab
+      var onClick = () => handleTabClick(tab);
+      // Use the custom renderTab function if provided
+      if (renderTab) {
+        return renderTab(tab, isActive, onClick);
+      }
+      // Default rendering for a tab button
+      return /*#__PURE__*/React.createElement(Button, Object.assign({
+        key: tab.title,
+        onClick: onClick,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      }, styles.tab, isActive ? styles.activeTab : {}, {
+        // Example: Set variant based on active state (can be overridden by styles)
+        variant: isActive ? 'filled' : 'ghost',
+        cursor: "pointer" // Ensure pointer cursor
+      }), tab.icon, /*#__PURE__*/React.createElement(Text
+      // Apply base title styles and merge activeText styles if this tab is active
+      , Object.assign({}, styles.title, isActive ? styles.activeText : {}), tab.title));
+    })), /*#__PURE__*/React.createElement(View, Object.assign({
+      width: '100%',
+      height: "100%"
+    }, styles.content), renderContent ? renderContent(activeTab) :
+    // Otherwise, render the content property from the active tab object
+    activeTab.content))
+  );
 };
 
+/**
+ * Tabs component allows users to navigate between different sections of content.
+ * It manages the active tab state and renders the corresponding content.
+ */
 var TabsComponent = _ref => {
   var {
     tabs,
-    styles
+    styles,
+    initialTabValue,
+    onTabChange,
+    renderTab,
+    renderContent
   } = _ref;
-  var {
-    isActive,
-    setIsActive,
-    tabsState,
-    setTabsState
-  } = useTabsState(tabs);
+  // Use the custom hook to manage the active tab state
+  var {
+    activeTab,
+    setActiveTab
+  } = useTabsState(tabs, initialTabValue);
+  // Handler function to change the active tab and trigger the callback
+  var handleTabClick = tab => {
+    // Only update state and call callback if the clicked tab is different from the current one
+    if ((activeTab == null ? void 0 : activeTab.title) !== tab.title) {
+      setActiveTab(tab);
+      // Call the onTabChange callback if provided
+      if (onTabChange) {
+        onTabChange(tab);
+      }
+    }
+  };
+  // Render the presentation component with the necessary props
   return /*#__PURE__*/React.createElement(TabsView, {
     tabs: tabs,
     styles: styles,
-    isActive: isActive,
-    tabsState: tabsState,
-    setTabsState: setTabsState,
-    setIsActive: setIsActive
+    activeTab: activeTab,
+    handleTabClick: handleTabClick,
+    renderTab: renderTab,
+    renderContent: renderContent
   });
 };
+// Export the component wrapped in React.memo for performance optimization
 var Tabs = /*#__PURE__*/React.memo(TabsComponent);
 
 // Declares the useToggleState function which takes defaultToggled parameter to initialize the toggle state.