@etsoo/react 1.4.42 → 1.4.43

package/lib/mu/TabBox.d.ts

@@ -12,6 +12,10 @@ export interface TabBoxPanel extends Omit<TabProps, 'value' | 'children'> {
      * Panel box props
      */
     panel?: Omit<BoxProps, 'hidden'>;
+    /**
+     * To URL
+     */
+    to?: string;
 }
 /**
  * Tabs with box props

package/lib/mu/TabBox.js

@@ -1,5 +1,6 @@
 import { Utils } from '@etsoo/shared';
 import { Box, Tab, Tabs } from '@mui/material';
+import { Link } from '@reach/router';
 import React from 'react';
 /**
  * Tabs with box
@@ -25,6 +26,6 @@ export function TabBox(props) {
                     setValue(newValue);
                     if (onChange)
                         onChange(event, newValue);
-                }, ...rest }, tabs.map(({ children, panel, ...tabRest }, index) => (React.createElement(Tab, { key: index, value: index, ...tabRest }))))),
+                }, ...rest }, tabs.map(({ children, panel, ...tabRest }, index) => (React.createElement(Tab, { key: index, value: index, LinkComponent: tabRest.to ? Link : undefined, ...tabRest }))))),
         tabs.map(({ children, panel }, index) => (React.createElement(Box, { key: index, hidden: value !== index, ...panel }, Utils.getResult(children, value === index))))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.42",
+    "version": "1.4.43",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/mu/TabBox.tsx

@@ -1,5 +1,6 @@
 import { Utils } from '@etsoo/shared';
 import { Box, BoxProps, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
+import { Link } from '@reach/router';
 import React from 'react';
 
 /**
@@ -15,6 +16,11 @@ export interface TabBoxPanel extends Omit<TabProps, 'value' | 'children'> {
      * Panel box props
      */
     panel?: Omit<BoxProps, 'hidden'>;
+
+    /**
+     * To URL
+     */
+    to?: string;
 }
 
 /**
@@ -93,7 +99,12 @@ export function TabBox(props: TabBoxPros) {
                     {...rest}
                 >
                     {tabs.map(({ children, panel, ...tabRest }, index) => (
-                        <Tab key={index} value={index} {...tabRest} />
+                        <Tab
+                            key={index}
+                            value={index}
+                            LinkComponent={tabRest.to ? Link : undefined}
+                            {...tabRest}
+                        />
                     ))}
                 </Tabs>
             </Box>