feat(react-ui/page-drawer): Added bgColor and slots optional props

apps/docs/.eslintrc.js → apps/docs/.eslintrc.cjs

@@ -1,3 +1,3 @@
-export default {
+module.exports = {
   extends: ["custom/next"],
 };

apps/docs/package.json

@@ -49,6 +49,7 @@
     "@types/node": "22.13.10",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
+    "@next/eslint-plugin-next": "15.2.4",
     "pagefind": "1.3.0",
     "postcss": "8.5.3",
     "tailwindcss": "4.0.17",

packages/eslint-config-custom/next.js

@@ -8,7 +8,6 @@ const project = resolve(process.cwd(), "tsconfig.json");
  *
  * This config extends the Vercel Engineering Style Guide.
  * For more information, see https://github.com/vercel/style-guide
- *
  */
 
 module.exports = {
@@ -18,7 +17,6 @@ module.exports = {
     "@vercel/style-guide/eslint/browser",
     "@vercel/style-guide/eslint/react",
     "@vercel/style-guide/eslint/next",
-    "eslint-config-turbo",
   ].map(require.resolve),
   parserOptions: {
     project,

packages/react-hooks/hooks/useResizeObserver.ts

@@ -7,8 +7,8 @@ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
  * @returns The ref.
  * @public
  */
-export function useResizeObserver(callback: (element: any, entry: ResizeObserverEntry) => void) {
-    const ref = useRef(null);
+export function useResizeObserver<T extends Element>(callback: (element: any, entry: ResizeObserverEntry) => void) {
+    const ref = useRef<T>(null);
 
     useIsomorphicLayoutEffect(() => {
         const element = ref?.current;

packages/react-hooks/temp/react-hooks.api.md

@@ -42,7 +42,7 @@ export type UsePromiseResult<T> = {
 };
 
 // @public
-export function useResizeObserver(callback: (element: any, entry: ResizeObserverEntry) => void): react.MutableRefObject<null>;
+export function useResizeObserver<T extends Element>(callback: (element: any, entry: ResizeObserverEntry) => void): react.RefObject<T | null>;
 
 // (No @packageDocumentation comment for this package)
 

packages/react-mui-hooks/package.json

@@ -42,7 +42,7 @@
   "peerDependencies": {
     "@enterwell/react-ui": "^0",
     "@mui/material": "^6",
-    "@mui/x-data-grid-pro": "^6",
+    "@mui/x-data-grid-pro": "^7",
     "react": "^18",
     "react-dom": "^18"
   }

packages/react-ui/PageDrawer/PageDrawer.tsx

@@ -6,8 +6,14 @@ import {
   type TouchEvent as ReactTouchEvent,
   type MouseEvent as ReactMouseEvent
 } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
-import { Box } from '@mui/system';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  type SxProps,
+  type Theme
+} from '@mui/material';
 import { ExpandMore } from '@mui/icons-material';
 
 const isScrollable = (node: Element) => {
@@ -37,12 +43,33 @@ const getScrollParent = (node: Element): Element => {
  * @public
  */
 export type PageDrawerProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * @defaultValue `primary.dark`
+   */
   color?: string;
+  /**
+   * @defaultValue `background.default`
+   */
+  bgColor?: string;
   expanded?: boolean;
   height?: number;
+  /**
+   * @defaultValue `50`
+   */
   minHeight?: number;
   onChange?: () => void;
   onResize?: (height: number | undefined) => void;
+  slots?: {
+    root?: {
+      sx?: SxProps<Theme>;
+    },
+    summary?: {
+      sx?: SxProps<Theme>;
+    },
+    details?: {
+      sx?: SxProps<Theme>;
+    }
+  }
 };
 
 /**
@@ -59,7 +86,9 @@ export function PageDrawer({
   height, 
   minHeight = 50, 
   onResize,
-  color, 
+  color = 'primary.dark', 
+  bgColor = 'background.default',
+  slots = {},
   ...rest 
 }: PageDrawerProps) {
   const isResizingRef = useRef(false);
@@ -167,7 +196,8 @@ export function PageDrawer({
         border: 'none',
         '&::before': {
           display: 'none'
-        }
+        },
+        ...(slots.root?.sx ?? {})
       }}
       expanded={realExpanded}
       onChange={handleOnChange}
@@ -183,7 +213,7 @@ export function PageDrawer({
           minHeight: 32,
           height: 32,
           '.MuiAccordionSummary-expandIconWrapper': {
-            bgcolor: color ?? 'primary.dark',
+            bgcolor: color,
             color: 'primary.main',
             borderRadius: 1
           },
@@ -199,15 +229,16 @@ export function PageDrawer({
             left: 0,
             right: 0,
             bottom: 0,
-            bgcolor: 'background.default'
-          }
+            bgcolor: bgColor
+          },
+          ...(slots.summary?.sx ?? {})
         }}
       >
         <Box
           sx={{
             borderTop: '1px solid',
             borderBottom: '1px solid',
-            borderColor: color ?? 'primary.dark',
+            borderColor: color,
             height: 3,
             width: '100%',
             position: 'absolute',
@@ -219,10 +250,11 @@ export function PageDrawer({
       <AccordionDetails
         ref={contentRef}
         sx={{
-          bgcolor: 'background.default',
+          bgcolor: bgColor,
           overflowX: 'hidden',
           overflowY: 'auto',
           height: height ? `${height}px` : undefined,
+          ...(slots.details?.sx ?? {})
         }}
       >
         {children}

packages/react-ui/temp/react-ui.api.md

@@ -17,13 +17,16 @@ import { DatePickerProps as DatePickerProps_2 } from '@mui/x-date-pickers/DatePi
 import { DialogProps } from '@mui/material';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { HTMLAttributes } from 'react';
+import { JSX } from 'react';
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import { SxProps } from '@mui/material';
 import { SyntheticEvent } from 'react';
 import { TextField } from '@mui/material';
 import { TextFieldProps } from '@mui/material';
+import { Theme } from '@mui/material';
 import { Variant } from '@mui/material/styles/createTypography';
 
 // @public
@@ -120,16 +123,28 @@ export function ItemAccordionDetails(props: AccordionDetailsProps): react_jsx_ru
 export function ItemAccordionSummary(props: AccordionSummaryProps): react_jsx_runtime.JSX.Element;
 
 // @public
-export function PageDrawer({ expanded, onChange, children, height, minHeight, onResize, color, ...rest }: PageDrawerProps): react_jsx_runtime.JSX.Element;
+export function PageDrawer({ expanded, onChange, children, height, minHeight, onResize, color, bgColor, slots, ...rest }: PageDrawerProps): react_jsx_runtime.JSX.Element;
 
 // @public
 export type PageDrawerProps = HTMLAttributes<HTMLDivElement> & {
     color?: string;
+    bgColor?: string;
     expanded?: boolean;
     height?: number;
     minHeight?: number;
     onChange?: () => void;
     onResize?: (height: number | undefined) => void;
+    slots?: {
+        root?: {
+            sx?: SxProps<Theme>;
+        };
+        summary?: {
+            sx?: SxProps<Theme>;
+        };
+        details?: {
+            sx?: SxProps<Theme>;
+        };
+    };
 };
 
 // @public