@etsoo/react 1.4.41 → 1.4.45

package/lib/mu/ResponsibleContainer.js

@@ -147,7 +147,7 @@ export function ResponsibleContainer(props) {
             ? undefined
             : containerBoxSx(paddings, showDataGrid) },
         React.createElement(Stack, null,
-            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox" }, searchBar),
+            React.createElement(Box, { ref: dimensions[0][0], className: "SearchBox", sx: { height: searchBar == null ? 0 : 40 } }, searchBar),
             list),
         pullToRefresh && pullContainer && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => { var _a; return (_a = state.ref) === null || _a === void 0 ? void 0 : _a.reset(); }, shouldPullToRefresh: () => {
                 const container = document.querySelector(pullContainer);

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/lib/mu/pages/EditPage.js

@@ -23,5 +23,5 @@ export function EditPage(props) {
                     paddingTop: paddings
                 } },
                 isEditing && onDelete && (React.createElement(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: React.createElement(DeleteIcon, { color: "warning" }) }, labels.delete)),
-                React.createElement(Button, { variant: "contained", type: "submit", fullWidth: true, startIcon: React.createElement(SaveIcon, null), sx: { flexGrow: 1 } }, labels.save)))));
+                React.createElement(Button, { variant: "contained", type: "submit", startIcon: React.createElement(SaveIcon, null), sx: { flexGrow: 1 } }, labels.save)))));
 }

package/lib/mu/pages/ResponsivePage.js

@@ -23,9 +23,9 @@ export function ResponsivePage(props) {
                 const half = MUGlobal.half(paddings);
                 // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                 return {
+                    paddingTop: paddings,
                     '& .SearchBox': {
                         marginLeft: paddings,
-                        marginTop: paddings,
                         marginRight: paddings,
                         marginBottom: half
                     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.41",
+    "version": "1.4.45",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.22",
+        "@etsoo/appscript": "^1.2.24",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.3",
         "@mui/icons-material": "^5.2.5",
@@ -91,7 +91,7 @@
         "eslint-plugin-react": "^7.28.0",
         "jest": "^27.4.7",
         "react-test-renderer": "^17.0.2",
-        "ts-jest": "^27.1.2",
+        "ts-jest": "^27.1.3",
         "typescript": "^4.5.4"
     }
 }

package/src/mu/ResponsibleContainer.tsx

@@ -349,7 +349,11 @@ export function ResponsibleContainer<
             }
         >
             <Stack>
-                <Box ref={dimensions[0][0]} className="SearchBox">
+                <Box
+                    ref={dimensions[0][0]}
+                    className="SearchBox"
+                    sx={{ height: searchBar == null ? 0 : 40 }}
+                >
                     {searchBar}
                 </Box>
                 {list}

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>

package/src/mu/pages/EditPage.tsx

@@ -86,7 +86,6 @@ export function EditPage(props: EditPageProps) {
                     <Button
                         variant="contained"
                         type="submit"
-                        fullWidth
                         startIcon={<SaveIcon />}
                         sx={{ flexGrow: 1 }}
                     >

package/src/mu/pages/ResponsivePage.tsx

@@ -40,9 +40,9 @@ export function ResponsivePage<
 
                     // .SearchBox keep the same to avoid flick when switching between DataGrid and List
                     return {
+                        paddingTop: paddings,
                         '& .SearchBox': {
                             marginLeft: paddings,
-                            marginTop: paddings,
                             marginRight: paddings,
                             marginBottom: half
                         },