Merge branch 'next' into add-useslot-poppver

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@b7cec7526559c32f1616476ff32d17ba4c59b2d6 # v3.25.5
+        uses: github/codeql-action/init@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@b7cec7526559c32f1616476ff32d17ba4c59b2d6 # v3.25.5
+        uses: github/codeql-action/analyze@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6

.github/workflows/scorecards.yml

@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@b7cec7526559c32f1616476ff32d17ba4c59b2d6 # v3.25.5
+        uses: github/codeql-action/upload-sarif@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
         with:
           sarif_file: results.sarif

apps/local-ui-lib/index.d.ts

@@ -1,6 +1,8 @@
+import * as React from 'react';
+
 export const bounceAnim: string;
 export const Button: React.ComponentType<
-  JSX.IntrinsicElements['button'] & {
+  React.JSX.IntrinsicElements['button'] & {
     isRed?: boolean;
     sx?: unknown;
   }

apps/pigment-css-next-app/next.config.js

@@ -1,7 +1,7 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
 const { withPigment } = require('@pigment-css/nextjs-plugin');
-const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
+const { extendTheme } = require('@mui/material/styles');
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions

apps/pigment-css-vite-app/package.json

@@ -25,8 +25,8 @@
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
     "@pigment-css/vite-plugin": "^0.0.9",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",

apps/pigment-css-vite-app/src/augment.ts

@@ -1,9 +1,9 @@
-import type { experimental_extendTheme } from '@mui/material/styles';
+import type { extendTheme } from '@mui/material/styles';
 import '@pigment-css/react/theme';
 
 declare module '@pigment-css/react/theme' {
   export interface ThemeArgs {
-    theme: ReturnType<typeof experimental_extendTheme> & {
+    theme: ReturnType<typeof extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;
     };
   }

apps/pigment-css-vite-app/src/extend-zero.ts

@@ -1,8 +1,8 @@
-import type { experimental_extendTheme } from '@mui/material/styles';
+import type { extendTheme } from '@mui/material/styles';
 
 declare module '@pigment-css/react/theme' {
   interface ThemeArgs {
-    theme: ReturnType<typeof experimental_extendTheme> & {
+    theme: ReturnType<typeof extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;
     };
   }

apps/pigment-css-vite-app/vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
 import { pigment } from '@pigment-css/vite-plugin';
-import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { extendTheme } from '@mui/material/styles';
 
 const theme = extendTheme({
   getSelector: function getSelector(colorScheme, css) {

docs/data/about/teamMembers.json

@@ -315,5 +315,13 @@
     "about": "Amateur cook, DIYer, and film photographer",
     "github": "KenanYusuf",
     "twitter": "KebabYusuf"
+  },
+  {
+    "name": "Nikita Ossei",
+    "title": "Customer Support",
+    "location": "London, United Kingdom",
+    "locationCountry": "uk",
+    "about": "Astrology ♊️, learning 📚 and designing stuff 🎨",
+    "github": "nikitaa24"
   }
 ]

docs/data/base/components/modal/SpringModal.tsx

@@ -37,7 +37,7 @@ export default function SpringModal() {
 
 const Backdrop = React.forwardRef<
   HTMLDivElement,
-  { children: React.ReactElement; open: boolean }
+  { children: React.ReactElement<any>; open: boolean }
 >((props, ref) => {
   const { open, ...other } = props;
   return <Fade ref={ref} in={open} {...other} />;
@@ -61,7 +61,7 @@ const StyledBackdrop = styled(Backdrop)`
 `;
 
 interface FadeProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   in?: boolean;
   onClick?: any;
   onEnter?: (node: HTMLElement, isAppearing: boolean) => void;

docs/data/base/components/modal/UseModal.tsx

@@ -39,7 +39,7 @@ export default function UseModal() {
 }
 
 interface ModalProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   closeAfterTransition?: boolean;
   container?: Element | (() => Element | null) | null;
   disableAutoFocus?: boolean;

docs/data/base/components/popper/PlacementPopper.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Popper, PopperPlacementType } from '@mui/base/Popper';
 
-function Radio({ value, ...props }: JSX.IntrinsicElements['input']) {
+function Radio({ value, ...props }: React.JSX.IntrinsicElements['input']) {
   return (
     <span>
       <input

docs/data/base/components/popup/Placement.tsx

@@ -5,7 +5,7 @@ import {
 } from '@mui/base/Unstable_Popup';
 import { styled, css, Theme } from '@mui/system';
 
-function Radio({ value, ...props }: JSX.IntrinsicElements['input']) {
+function Radio({ value, ...props }: React.JSX.IntrinsicElements['input']) {
   return (
     <span>
       <input

docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx

@@ -23,7 +23,7 @@ const Select = React.forwardRef(function Select<
   return <BaseSelect {...props} ref={ref} slots={slots} />;
 }) as <TValue extends {}, Multiple extends boolean>(
   props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
+) => React.JSX.Element;
 
 export default function UnstyledSelectBasic() {
   return (

docs/data/base/components/select/UnstyledSelectForm.tsx

@@ -47,7 +47,7 @@ const Select = React.forwardRef(function CustomSelect<
   return <BaseSelect {...props} ref={ref} slots={slots} />;
 }) as <TValue extends {}, Multiple extends boolean>(
   props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
+) => React.JSX.Element;
 
 const blue = {
   100: '#DAECFF',

docs/data/base/components/slider/DiscreteSlider.tsx

@@ -21,7 +21,7 @@ export default function DiscreteSlider() {
 }
 
 interface SliderValueLabelProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
 }
 
 function SliderValueLabel({ children }: SliderValueLabelProps) {

docs/data/base/components/slider/LabeledValuesSlider.tsx

@@ -11,7 +11,7 @@ export default function LabeledValuesSlider() {
 }
 
 interface SliderValueLabelProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
 }
 
 function SliderValueLabel({ children }: SliderValueLabelProps) {

docs/data/base/components/transitions/ReactTransitionGroup.tsx

@@ -115,7 +115,7 @@ function PopupWithTrigger(props: PopupProps) {
   );
 }
 
-function MaterialUITransitionAdapter(props: { children: React.ReactElement }) {
+function MaterialUITransitionAdapter(props: { children: React.ReactElement<any> }) {
   const { requestedEnter, onExited } = useTransitionStateManager();
   const { children } = props;
 

docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx

@@ -54,7 +54,7 @@ const Select = React.forwardRef(function Select<
   return <BaseSelect {...props} ref={ref} slots={slots} />;
 }) as <TValue extends {}, Multiple extends boolean>(
   props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
+) => React.JSX.Element;
 
 const SelectButton = React.forwardRef(function SelectButton<
   TValue extends {},

docs/data/joy/components/alert/AlertVariousStates.tsx

@@ -14,7 +14,7 @@ export default function AlertVariousStates() {
   const items: {
     title: string;
     color: ColorPaletteProp;
-    icon: React.ReactElement;
+    icon: React.ReactElement<any>;
   }[] = [
     { title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
     { title: 'Warning', color: 'warning', icon: <WarningIcon /> },

docs/data/joy/components/autocomplete/AutocompleteHint.tsx

@@ -12,7 +12,7 @@ const StyledDiv = styled('div')({
 });
 
 type WrapperProps = {
-  children: JSX.Element;
+  children: React.JSX.Element;
   hint: string;
 };
 

docs/data/joy/components/autocomplete/Virtualize.tsx

@@ -66,7 +66,7 @@ const ListboxComponent = React.forwardRef<
   const { children, anchorEl, open, modifiers, ...other } = props;
   const itemData: Array<any> = [];
   (
-    children as [Array<{ children: Array<React.ReactElement> | undefined }>]
+    children as [Array<{ children: Array<React.ReactElement<any>> | undefined }>]
   )[0].forEach((item) => {
     if (item) {
       itemData.push(item);

docs/data/joy/components/input/FloatingLabelInput.tsx

@@ -56,7 +56,7 @@ const StyledLabel = styled('label')(({ theme }) => ({
 
 const InnerInput = React.forwardRef<
   HTMLInputElement,
-  JSX.IntrinsicElements['input']
+  React.JSX.IntrinsicElements['input']
 >(function InnerInput(props, ref) {
   const id = React.useId();
   return (

docs/data/joy/components/menu/MenuIconSideNavExample.tsx

@@ -15,7 +15,7 @@ import MenuButton from '@mui/joy/MenuButton';
 // https://popper.js.org/docs/v2/modifiers/offset/
 interface MenuButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  menu: React.ReactElement;
+  menu: React.ReactElement<any>;
   open: boolean;
   onOpen: (
     event?:

docs/data/joy/components/menu/MenuToolbarExample.tsx

@@ -13,7 +13,7 @@ import { Theme } from '@mui/joy';
 type MenuBarButtonProps = Pick<DropdownProps, 'children' | 'open'> & {
   onOpen: DropdownProps['onOpenChange'];
   onKeyDown: React.KeyboardEventHandler;
-  menu: JSX.Element;
+  menu: React.JSX.Element;
   onMouseEnter: React.MouseEventHandler;
 };
 

docs/data/joy/components/textarea/FloatingLabelTextarea.tsx

@@ -48,7 +48,7 @@ const StyledLabel = styled('label')(({ theme }) => ({
 
 const InnerTextarea = React.forwardRef<
   HTMLTextAreaElement,
-  JSX.IntrinsicElements['textarea']
+  React.JSX.IntrinsicElements['textarea']
 >(function InnerTextarea(props, ref) {
   const id = React.useId();
   return (

docs/data/joy/getting-started/templates/files/components/Menu.tsx

@@ -4,7 +4,7 @@ import MenuItem from '@mui/joy/MenuItem';
 import { ListActionTypes } from '@mui/base/useList';
 
 export default function Menu(props: {
-  control: React.ReactElement;
+  control: React.ReactElement<any>;
   id: string;
   menus: Array<{ label: string } & { [k: string]: any }>;
 }) {

docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx

@@ -24,7 +24,7 @@ export default function ChatsPane(props: ChatsPaneProps) {
       sx={{
         borderRight: '1px solid',
         borderColor: 'divider',
-        height: 'calc(100dvh - var(--Header-height))',
+        height: { sm: 'calc(100dvh - var(--Header-height))', md: '100dvh' },
         overflowY: 'auto',
       }}
     >

docs/data/joy/getting-started/templates/messages/components/Header.tsx

@@ -9,7 +9,7 @@ export default function Header() {
   return (
     <Sheet
       sx={{
-        display: { xs: 'flex', sm: 'none' },
+        display: { sm: 'flex', md: 'none' },
         alignItems: 'center',
         justifyContent: 'space-between',
         position: 'fixed',

docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx

@@ -24,7 +24,7 @@ export default function MessagesPane(props: MessagesPaneProps) {
   return (
     <Sheet
       sx={{
-        height: { xs: 'calc(100dvh - var(--Header-height))', lg: '100dvh' },
+        height: { xs: 'calc(100dvh - var(--Header-height))', md: '100dvh' },
         display: 'flex',
         flexDirection: 'column',
         backgroundColor: 'background.level1',

docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx

@@ -14,7 +14,7 @@ export default function MyProfile() {
         flex: 1,
         width: '100%',
         mx: 'auto',
-        pt: { xs: 'var(--Header-height)', sm: 0 },
+        pt: { xs: 'var(--Header-height)', md: 0 },
         display: 'grid',
         gridTemplateColumns: {
           xs: '1fr',

docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx

@@ -7,7 +7,9 @@ import AspectRatio from '@mui/joy/AspectRatio';
 
 import FileUploadRoundedIcon from '@mui/icons-material/FileUploadRounded';
 
-export default function DropZone(props: CardProps & { icon?: React.ReactElement }) {
+export default function DropZone(
+  props: CardProps & { icon?: React.ReactElement<any> },
+) {
   const { icon, sx, ...other } = props;
   return (
     <Card

docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx

@@ -13,7 +13,7 @@ import RemoveCircleOutlineRoundedIcon from '@mui/icons-material/RemoveCircleOutl
 
 export default function FileUpload(
   props: CardProps & {
-    icon?: React.ReactElement;
+    icon?: React.ReactElement<any>;
     fileName: string;
     fileSize: string;
     progress: number;

docs/data/joy/integrations/material-ui/material-ui.md

@@ -29,8 +29,8 @@ Render Joy UI's `CssVarsProvider` inside Material UI's provider and use `THEME
 
 ```js
 import {
-  experimental_extendTheme as materialExtendTheme,
-  Experimental_CssVarsProvider as MaterialCssVarsProvider,
+  extendTheme as materialExtendTheme,
+  CssVarsProvider as MaterialCssVarsProvider,
   THEME_ID as MATERIAL_THEME_ID,
 } from '@mui/material/styles';
 import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';

docs/data/material/components/app-bar/BackToTop.tsx

@@ -16,7 +16,7 @@ interface Props {
    * You won't need it on your project.
    */
   window?: () => Window;
-  children?: React.ReactElement;
+  children?: React.ReactElement<any>;
 }
 
 function ScrollTop(props: Props) {

docs/data/material/components/app-bar/ElevateAppBar.tsx

@@ -13,7 +13,7 @@ interface Props {
    * You won't need it on your project.
    */
   window?: () => Window;
-  children?: React.ReactElement;
+  children?: React.ReactElement<any>;
 }
 
 function ElevationScroll(props: Props) {

docs/data/material/components/app-bar/HideAppBar.tsx

@@ -14,7 +14,7 @@ interface Props {
    * You won't need it on your project.
    */
   window?: () => Window;
-  children?: React.ReactElement;
+  children?: React.ReactElement<any>;
 }
 
 function HideOnScroll(props: Props) {