Merge pull request #168 from Enterwell/stage

Stage

apps/docs/package.json

@@ -27,9 +27,9 @@
     "@mdx-js/mdx": "3.0.0",
     "@mdx-js/react": "3.0.0",
     "@mui/icons-material": "5.14.16",
-    "@mui/lab": "5.0.0-alpha.151",
-    "@mui/material": "5.14.16",
-    "@mui/system": "5.14.16",
+    "@mui/lab": "5.0.0-alpha.152",
+    "@mui/material": "5.14.17",
+    "@mui/system": "5.14.17",
     "@mui/x-data-grid": "6.17.0",
     "@mui/x-data-grid-pro": "6.17.0",
     "@mui/x-date-pickers": "5.0.20",
@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "@types/node": "18.18.8",
-    "@types/react": "18.2.33",
+    "@types/react": "18.2.36",
     "@types/react-dom": "18.2.14",
     "autoprefixer": "10.4.16",
     "postcss": "8.4.31",

package.json

@@ -6,11 +6,11 @@
     "lint": "turbo run lint"
   },
   "devDependencies": {
-    "eslint": "8.52.0",
+    "eslint": "8.53.0",
     "tsconfig": "workspace:*",
     "turbo": "1.10.16",
     "@turbo/gen": "1.10.16"
   },
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].2",
   "name": "ui"
 }

packages/react-hooks/package.json

@@ -23,9 +23,9 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.38.1",
+    "@microsoft/api-extractor": "7.38.2",
     "@types/node": "18.18.8",
-    "@types/react": "18.2.33",
+    "@types/react": "18.2.36",
     "@types/react-dom": "18.2.14",
     "eslint-config-custom": "workspace:*",
     "react": "18.2.0",

packages/react-mui-hooks/package.json

@@ -25,12 +25,12 @@
   "devDependencies": {
     "@enterwell/react-hooks": "workspace:*",
     "@enterwell/react-ui": "workspace:*",
-    "@microsoft/api-extractor": "7.38.1",
-    "@mui/material": "5.14.16",
+    "@microsoft/api-extractor": "7.38.2",
+    "@mui/material": "5.14.17",
     "@mui/x-data-grid": "6.17.0",
     "@mui/x-data-grid-pro": "6.17.0",
     "@types/node": "18.18.8",
-    "@types/react": "18.2.33",
+    "@types/react": "18.2.36",
     "@types/react-dom": "18.2.14",
     "date-fns": "2.30.0",
     "eslint-config-custom": "workspace:*",
@@ -42,7 +42,7 @@
   },
   "peerDependencies": {
     "@enterwell/react-ui": "workspace:*",
-    "@mui/material": "5.14.16",
+    "@mui/material": "5.14.17",
     "@mui/x-data-grid": "6.17.0",
     "@mui/x-data-grid-pro": "6.17.0",
     "react": "^18.2.0",

packages/react-ui/PageDrawer/PageDrawer.tsx

@@ -1,16 +1,48 @@
-import { type HTMLAttributes, useState } from 'react';
+import {
+  useState,
+  useRef,
+  type HTMLAttributes,
+  type ElementRef,
+  type TouchEvent as ReactTouchEvent,
+  type MouseEvent as ReactMouseEvent
+} from 'react';
 import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
 import { Box } from '@mui/system';
 import { ExpandMore } from '@mui/icons-material';
 
+const isScrollable = (node: Element) => {
+  if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+    return false
+  }
+  const style = getComputedStyle(node)
+  return ['overflow', 'overflow-x', 'overflow-y'].some((propertyName) => {
+    const value = style.getPropertyValue(propertyName)
+    return value === 'auto' || value === 'scroll'
+  })
+}
+
+const getScrollParent = (node: Element): Element => {
+  let currentParent = node.parentElement
+  while (currentParent) {
+    if (isScrollable(currentParent)) {
+      return currentParent
+    }
+    currentParent = currentParent.parentElement
+  }
+  return document.scrollingElement || document.documentElement
+}
+
 /**
  * The PageDrawer component props.
  * @public
  */
 export type PageDrawerProps = HTMLAttributes<HTMLDivElement> & {
   color?: string;
   expanded?: boolean;
+  height?: number;
+  minHeight?: number;
   onChange?: () => void;
+  onResize?: (height: number | undefined) => void;
 };
 
 /**
@@ -20,9 +52,113 @@ export type PageDrawerProps = HTMLAttributes<HTMLDivElement> & {
  * @returns The PageDrawer component.
  * @public
  */
-export function PageDrawer({ expanded, onChange, children, color, ...rest }: PageDrawerProps): JSX.Element {
+export function PageDrawer({
+  expanded, 
+  onChange,
+  children,
+  height, 
+  minHeight = 50, 
+  onResize,
+  color, 
+  ...rest 
+}: PageDrawerProps) {
+  const isResizingRef = useRef(false);
+  const didResize = useRef(false);
+  const ref = useRef<ElementRef<'div'>>(null);
+  const contentRef = useRef<ElementRef<'div'>>(null);
+  const handleRef = useRef<ElementRef<'div'>>(null);
+  const [isExpanded, setIsExpanded] = useState(expanded ?? false);
+  const realExpanded = expanded ?? isExpanded;
+
+  const handleOnChange = () => {
+    if (didResize.current)
+      return;
+
+    setIsExpanded(!realExpanded);
+    if (onChange) {
+      onChange();
+    }
+  };
+
+  const handleTouchStart = (event: ReactTouchEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+
+    isResizingRef.current = true;
+    didResize.current = false;
+    document.addEventListener('touchmove', handleTouchMove);
+    document.addEventListener('touchend', handleTouchEnd);
+  }
+
+  const handleMouseDown = (event: ReactMouseEvent<HTMLDivElement, MouseEvent>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    isResizingRef.current = true;
+    didResize.current = false;
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleTouchMove = (event: TouchEvent) => {
+    handleMove(event.touches[0].clientY);
+  };
+
+  const handleMouseMove = (event: MouseEvent) => {
+    handleMove(event.clientY);
+  };
+
+  const handleMove = (clientY: number) => {
+    if (!isResizingRef.current) return;
+
+    const containerRect = ref.current?.getBoundingClientRect();
+    const handleClientRect = handleRef.current?.getBoundingClientRect();
+    let newHeight: number | undefined = (containerRect?.y ?? 0) + (containerRect?.height ?? 0) - clientY - (handleClientRect?.height ?? 0) / 2;
+
+    // Correct for min height
+    if (newHeight < minHeight) return;
+
+    // Correct for max height
+    // We use scroll parent as container because the drawer is sticky
+    const containerClientRect = getScrollParent(ref.current ?? document.documentElement).getBoundingClientRect();
+    if (newHeight > containerClientRect.height) {
+      newHeight = containerClientRect?.height - (handleClientRect?.height ?? 0);
+    }
+
+    if (contentRef.current && newHeight != null) {
+      didResize.current = true;
+      contentRef.current.style.setProperty('height', `${newHeight}px`);
+      if (onResize) {
+        onResize(newHeight);
+      }
+    }
+  };
+
+  const handleTouchEnd = (event: TouchEvent) => {
+    if (didResize.current) {
+      event.stopPropagation();
+    }
+
+    isResizingRef.current = false;
+
+    document.removeEventListener('touchmove', handleTouchMove);
+    document.removeEventListener('touchend', handleTouchEnd);
+  };
+
+  const handleMouseUp = (event: MouseEvent) => {
+    if (didResize.current) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    isResizingRef.current = false;
+
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
+
   return (
     <Accordion
+      ref={ref}
       sx={{
         position: 'sticky',
         inset: 'auto 0 0 0',
@@ -33,11 +169,14 @@ export function PageDrawer({ expanded, onChange, children, color, ...rest }: Pag
           display: 'none'
         }
       }}
-      expanded={expanded}
-      onChange={onChange}
+      expanded={realExpanded}
+      onChange={handleOnChange}
       {...rest}
     >
       <AccordionSummary
+        ref={handleRef}
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
         expandIcon={<ExpandMore />}
         sx={{
           position: 'relative',
@@ -77,12 +216,14 @@ export function PageDrawer({ expanded, onChange, children, color, ...rest }: Pag
           }}
         />
       </AccordionSummary>
-      <AccordionDetails sx={{
-        bgcolor: 'background.default',
-        maxHeight: '40vh',
-        overflowX: 'hidden',
-        overflowY: 'auto'
-      }}
+      <AccordionDetails
+        ref={contentRef}
+        sx={{
+          bgcolor: 'background.default',
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          height: height ? `${height}px` : undefined,
+        }}
       >
         {children}
       </AccordionDetails>

packages/react-ui/package.json

@@ -27,15 +27,15 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@enterwell/react-hooks": "workspace:*",
-    "@microsoft/api-extractor": "7.38.1",
+    "@microsoft/api-extractor": "7.38.2",
     "@mui/icons-material": "5.14.16",
-    "@mui/material": "5.14.16",
-    "@mui/system": "5.14.16",
-    "@mui/lab": "5.0.0-alpha.151",
+    "@mui/material": "5.14.17",
+    "@mui/system": "5.14.17",
+    "@mui/lab": "5.0.0-alpha.152",
     "@mui/x-date-pickers-pro": "5.0.20",
     "@mui/x-date-pickers": "5.0.20",
     "@types/node": "18.18.8",
-    "@types/react": "18.2.33",
+    "@types/react": "18.2.36",
     "@types/react-dom": "18.2.14",
     "date-fns": "2.30.0",
     "eslint-config-custom": "workspace:*",
@@ -48,9 +48,9 @@
   "peerDependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@mui/material": "5.14.16",
-    "@mui/system": "5.14.16",
-    "@mui/lab": "5.0.0-alpha.151",
+    "@mui/material": "5.14.17",
+    "@mui/system": "5.14.17",
+    "@mui/lab": "5.0.0-alpha.152",
     "@mui/x-date-pickers-pro": "5.0.20",
     "@mui/x-date-pickers": "5.0.20",
     "react": "18.2.0",