@app-studio/web 0.8.63 → 0.8.65

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

@@ -1,12 +1,44 @@
 import React from 'react';
 import { TabsStyles, Tab } from './Tabs.type';
+/**
+ * Props for the main Tabs component (External API).
+ */
 export interface TabsProps {
+    /** Array of tab objects to be displayed. Each tab needs a unique `value`. */
     tabs: Tab[];
+    /** Optional value of the tab to be active initially. Defaults to the first tab if not provided or not found. */
+    initialTabValue?: string | number;
+    /** Optional callback function triggered when the active tab changes. Receives the newly active tab object. */
+    onTabChange?: (activeTab: Tab) => void;
+    /** Optional styles object to customize the appearance of the tabs container, headers, buttons, text, and content area. */
     styles?: TabsStyles;
+    /**
+     * Optional custom renderer for a single tab button/header.
+     * Receives the tab data, whether it's currently active, and an onClick handler to activate the tab.
+     */
+    renderTab?: (tab: Tab, isActive: boolean, onClick: () => void) => React.ReactNode;
+    /**
+     * Optional custom renderer for the content area.
+     * Receives the currently active tab object.
+     * If not provided, the `content` property from the active tab object will be rendered.
+     */
+    renderContent?: (activeTab: Tab) => React.ReactNode;
 }
-export interface TabsViewProps extends TabsProps {
-    isActive: Tab;
-    setIsActive: React.Dispatch<React.SetStateAction<Tab>>;
-    tabsState: Tab[];
-    setTabsState: React.Dispatch<React.SetStateAction<Tab[]>>;
+/**
+ * Props specifically for the TabsView component (Internal).
+ * These props are derived or passed down from the main Tabs component.
+ */
+export interface TabsViewProps {
+    /** The original array of tab objects. */
+    tabs: Tab[];
+    /** The currently active tab object, or undefined if none is active. */
+    activeTab: Tab | undefined;
+    /** Callback function to handle clicking on a tab header/button. */
+    handleTabClick: (tab: Tab) => void;
+    /** Optional styles object. */
+    styles?: TabsStyles;
+    /** Optional custom renderer for a tab button/header. */
+    renderTab?: (tab: Tab, isActive: boolean, onClick: () => void) => React.ReactNode;
+    /** Optional custom renderer for the content area. */
+    renderContent?: (activeTab: Tab) => React.ReactNode;
 }

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

@@ -1,8 +1,12 @@
 /// <reference types="react" />
 import { Tab } from './Tabs.type';
-export declare const useTabsState: (propTabs: Tab[]) => {
-    isActive: Tab;
-    setIsActive: import("react").Dispatch<import("react").SetStateAction<Tab>>;
-    tabsState: Tab[];
-    setTabsState: import("react").Dispatch<import("react").SetStateAction<Tab[]>>;
+/**
+ * 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.
+ */
+export declare const useTabsState: (propTabs: Tab[], initialTabValue?: string | number | undefined) => {
+    activeTab: Tab | undefined;
+    setActiveTab: import("react").Dispatch<import("react").SetStateAction<Tab | undefined>>;
 };

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

@@ -1,3 +1,6 @@
-import { TabsViewProps } from './Tabs.props';
 import React from 'react';
-export declare const TabsView: (props: TabsViewProps) => React.JSX.Element;
+import { TabsViewProps } from './Tabs.props';
+/**
+ * The presentation component for Tabs. Renders the UI based on props.
+ */
+export declare const TabsView: React.FC<TabsViewProps>;

package/dist/components/Text/Text/Text.props.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import type { TextProps as TextAppProps } from 'app-studio';
 import { Headings, Size, TextWeights } from './Text.type';
 export interface TextProps extends Omit<TextAppProps, 'children' | 'style' | 'pointerEvents'>, CSSProperties {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     heading?: Headings;
     isItalic?: boolean;
     isStriked?: boolean;

package/dist/web.cjs.development.js

@@ -7657,89 +7657,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] = React.useState(propTabs[0]);
-  var [tabsState, setTabsState] = React.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] = React.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.
+  React.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
-  } = 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__default.createElement(Vertical, Object.assign({
-    width: "100w",
-    height: '100%'
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
-    marginBottom: 20
-  }, styles == null ? void 0 : styles.headerTabs), tabs.map((tab, idx) => (/*#__PURE__*/React__default.createElement(Button, Object.assign({
-    key: tab.title,
-    onClick: () => {
-      moveSelectedTabToTop(idx);
-    },
-    variant: isActive.value === tab.value ? 'filled' : 'ghost',
-    shape: "pillShaped",
-    cursor: "pointer",
-    isAuto: true
-  }, styles == null ? void 0 : styles.tab, isActive.value === tab.value ? styles == null ? void 0 : styles.activeTab : {}), /*#__PURE__*/React__default.createElement(Text, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title))))), /*#__PURE__*/React__default.createElement(View, Object.assign({
-    width: '100%',
-    height: "100%"
-  }, styles == null ? void 0 : styles.content), tabsState.map((tab, idx) => isContentActive(tab) && /*#__PURE__*/React__default.createElement(View, {
-    key: idx
-  }, tab.content))));
+/**
+ * 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
+  } = _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__default.createElement(Vertical, Object.assign({
+      width: "100%",
+      height: '100%'
+    }, styles.container), /*#__PURE__*/React__default.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__default.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__default.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__default.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__default.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__default.memo(TabsComponent);
 
 // Declares the useToggleState function which takes defaultToggled parameter to initialize the toggle state.