@jobber/components 6.5.4 → 6.6.0

package/dist/Tabs/Tabs.d.ts

@@ -7,13 +7,19 @@ interface TabsProps {
      * @default 0
      */
     readonly defaultTab?: number;
+    /**
+     * Specifies the index of the active tab.
+     * If provided, the component will be controlled and the active tab will be determined by this prop.
+     * If not provided, the component will manage its own state internally.
+     */
+    readonly activeTab?: number;
     /**
      * Callback that fires when the active tab changes
      * @param newTabIndex
      */
     onTabChange?(newTabIndex: number): void;
 }
-export declare function Tabs({ children, defaultTab, onTabChange }: TabsProps): JSX.Element;
+export declare function Tabs({ children, defaultTab, activeTab: controlledActiveTab, onTabChange, }: TabsProps): JSX.Element;
 interface TabProps {
     readonly label: string | ReactNode;
     readonly children: ReactNode | ReactNode[];

package/dist/Tabs-cjs.js

@@ -38,10 +38,11 @@ function useTabsOverflow() {
     };
 }
 
-function Tabs({ children, defaultTab = 0, onTabChange }) {
+function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabChange, }) {
     var _a;
     const activeTabInitialValue = defaultTab < React.Children.count(children) ? defaultTab : 0;
-    const [activeTab, setActiveTab] = React.useState(activeTabInitialValue);
+    const [internalActiveTab, setInternalActiveTab] = React.useState(activeTabInitialValue);
+    const activeTab = controlledActiveTab !== undefined ? controlledActiveTab : internalActiveTab;
     const { overflowRight, overflowLeft, tabRow } = useTabsOverflow();
     const overflowClassNames = classnames(styles.overflow, {
         [styles.overflowRight]: overflowRight,
@@ -49,7 +50,9 @@ function Tabs({ children, defaultTab = 0, onTabChange }) {
     });
     const activateTab = (index) => {
         return () => {
-            setActiveTab(index);
+            if (controlledActiveTab === undefined) {
+                setInternalActiveTab(index);
+            }
             if (onTabChange) {
                 onTabChange(index);
             }
@@ -58,7 +61,7 @@ function Tabs({ children, defaultTab = 0, onTabChange }) {
     const activeTabProps = (_a = React.Children.toArray(children)[activeTab]) === null || _a === void 0 ? void 0 : _a.props;
     React.useEffect(() => {
         if (activeTab > React.Children.count(children) - 1) {
-            setActiveTab(activeTabInitialValue);
+            setInternalActiveTab(activeTabInitialValue);
         }
     }, [React.Children.count(children)]);
     return (React.createElement("div", { className: styles.tabs },

package/dist/Tabs-es.js

@@ -36,10 +36,11 @@ function useTabsOverflow() {
     };
 }
 
-function Tabs({ children, defaultTab = 0, onTabChange }) {
+function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabChange, }) {
     var _a;
     const activeTabInitialValue = defaultTab < React.Children.count(children) ? defaultTab : 0;
-    const [activeTab, setActiveTab] = useState(activeTabInitialValue);
+    const [internalActiveTab, setInternalActiveTab] = useState(activeTabInitialValue);
+    const activeTab = controlledActiveTab !== undefined ? controlledActiveTab : internalActiveTab;
     const { overflowRight, overflowLeft, tabRow } = useTabsOverflow();
     const overflowClassNames = classnames(styles.overflow, {
         [styles.overflowRight]: overflowRight,
@@ -47,7 +48,9 @@ function Tabs({ children, defaultTab = 0, onTabChange }) {
     });
     const activateTab = (index) => {
         return () => {
-            setActiveTab(index);
+            if (controlledActiveTab === undefined) {
+                setInternalActiveTab(index);
+            }
             if (onTabChange) {
                 onTabChange(index);
             }
@@ -56,7 +59,7 @@ function Tabs({ children, defaultTab = 0, onTabChange }) {
     const activeTabProps = (_a = React.Children.toArray(children)[activeTab]) === null || _a === void 0 ? void 0 : _a.props;
     useEffect(() => {
         if (activeTab > React.Children.count(children) - 1) {
-            setActiveTab(activeTabInitialValue);
+            setInternalActiveTab(activeTabInitialValue);
         }
     }, [React.Children.count(children)]);
     return (React.createElement("div", { className: styles.tabs },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.5.4",
+  "version": "6.6.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -487,5 +487,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "d54ef0a961372b9bd79eb11feaae6850ccf1b3a0"
+  "gitHead": "8cb3c997c952f9319a5881b5cf0cb0a7aecb4d49"
 }