@etsoo/materialui 1.1.15 → 1.1.16

package/lib/pages/LeftDrawer.d.ts

@@ -1,10 +1,4 @@
 import React from "react";
-/**
- * Left drawer methods
- */
-export interface LeftDrawerMethods {
-    open(): void;
-}
 /**
  * Left drawer props
  */
@@ -26,31 +20,12 @@ export type LeftDrawerProps = React.PropsWithRef<{
      */
     appName?: string;
     /**
-     * Minimize hanlder
+     * Is open or not
      */
-    onMinimize?: () => void;
-}>;
-export declare const LeftDrawer: React.ForwardRefExoticComponent<{
-    /**
-     * Show when md up
-     */
-    mdUp: boolean;
-    /**
-     * Organization
-     */
-    organization?: number | undefined;
-    /**
-     * Width
-     */
-    width: number;
-    /**
-     * Application name
-     */
-    appName?: string | undefined;
+    open?: boolean;
     /**
      * Minimize hanlder
      */
-    onMinimize?: (() => void) | undefined;
-} & {
-    children?: React.ReactNode;
-} & React.RefAttributes<LeftDrawerMethods>>;
+    onMinimize?: () => void;
+}>;
+export declare function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>): JSX.Element;

package/lib/pages/LeftDrawer.js

@@ -3,31 +3,26 @@ import React from "react";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import { DrawerHeader } from "./DrawerHeader";
 import { globalApp } from "../app/ReactApp";
-export const LeftDrawer = React.forwardRef((props, ref) => {
+export function LeftDrawer(props) {
     var _a;
     // Destruct
-    const { mdUp, width, appName = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("appName"), onMinimize, children } = props;
+    const { mdUp, width, appName = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("appName"), onMinimize, open = mdUp, children } = props;
     // Menu open/close state
-    const [open, setOpen] = React.useState();
+    const [openLocal, setOpen] = React.useState();
     const handleDrawerClose = () => {
         if (onMinimize)
             onMinimize();
         setOpen(false);
     };
-    React.useImperativeHandle(ref, () => ({
-        open() {
-            setOpen(true);
-        }
-    }));
     // Ready
     React.useEffect(() => {
-        setOpen(mdUp);
-    }, [mdUp]);
-    return (React.createElement(Drawer, { sx: {
-            width: open ? width : 0,
+        setOpen(open);
+    }, [open]);
+    return (React.createElement(Drawer, { hidden: !openLocal, sx: {
+            width,
             flexShrink: 0,
             "& .MuiDrawer-paper": {
-                width: open ? width : 0,
+                width,
                 boxSizing: "border-box"
             }
         }, anchor: "left", variant: mdUp ? "persistent" : "temporary", open: open, onClose: mdUp ? undefined : handleDrawerClose, ModalProps: {
@@ -41,4 +36,4 @@ export const LeftDrawer = React.forwardRef((props, ref) => {
                 React.createElement(ChevronLeftIcon, null))),
         React.createElement(Divider, null),
         React.createElement(List, { onClick: mdUp ? undefined : handleDrawerClose }, children)));
-});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/pages/LeftDrawer.tsx

@@ -11,13 +11,6 @@ import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import { DrawerHeader } from "./DrawerHeader";
 import { globalApp } from "../app/ReactApp";
 
-/**
- * Left drawer methods
- */
-export interface LeftDrawerMethods {
-  open(): void;
-}
-
 /**
  * Left drawer props
  */
@@ -42,51 +35,49 @@ export type LeftDrawerProps = React.PropsWithRef<{
    */
   appName?: string;
 
+  /**
+   * Is open or not
+   */
+  open?: boolean;
+
   /**
    * Minimize hanlder
    */
   onMinimize?: () => void;
 }>;
 
-export const LeftDrawer = React.forwardRef<
-  LeftDrawerMethods,
-  React.PropsWithChildren<LeftDrawerProps>
->((props, ref) => {
+export function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>) {
   // Destruct
   const {
     mdUp,
     width,
     appName = globalApp?.get("appName"),
     onMinimize,
+    open = mdUp,
     children
   } = props;
 
   // Menu open/close state
-  const [open, setOpen] = React.useState<boolean>();
+  const [openLocal, setOpen] = React.useState<boolean>();
 
   const handleDrawerClose = () => {
     if (onMinimize) onMinimize();
     setOpen(false);
   };
 
-  React.useImperativeHandle(ref, () => ({
-    open() {
-      setOpen(true);
-    }
-  }));
-
   // Ready
   React.useEffect(() => {
-    setOpen(mdUp);
-  }, [mdUp]);
+    setOpen(open);
+  }, [open]);
 
   return (
     <Drawer
+      hidden={!openLocal}
       sx={{
-        width: open ? width : 0,
+        width,
         flexShrink: 0,
         "& .MuiDrawer-paper": {
-          width: open ? width : 0,
+          width,
           boxSizing: "border-box"
         }
       }}
@@ -122,4 +113,4 @@ export const LeftDrawer = React.forwardRef<
       <List onClick={mdUp ? undefined : handleDrawerClose}>{children}</List>
     </Drawer>
   );
-});
+}