([]);
- const [loading, setLoading] = React.useState(true);
-
- React.useEffect(() => {
- setLoading(true);
- const timeoutId = setTimeout(() => {
- setRows(initialRows);
- setLoading(false);
- }, 800);
- return () => clearTimeout(timeoutId);
- }, []);
-
- return (
-
-
-
-
-
-
-
- );
-}
diff --git a/docs/data/data-grid/joy-ui/joy-ui.md b/docs/data/data-grid/joy-ui/joy-ui.md
deleted file mode 100644
index bd43afc26176..000000000000
--- a/docs/data/data-grid/joy-ui/joy-ui.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Data Grid - Joy UI
-
-Using the Data Grid with Joy UI components.
-
-{{"demo": "GridJoyUISlots.js", "bg": "inline"}}
diff --git a/docs/pages/x/react-data-grid/experiments/joy-ui.js b/docs/pages/x/react-data-grid/experiments/joy-ui.js
deleted file mode 100644
index 49f733491cb3..000000000000
--- a/docs/pages/x/react-data-grid/experiments/joy-ui.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docsx/data/data-grid/joy-ui/joy-ui.md?muiMarkdown';
-
-export default function Page() {
- return ;
-}
diff --git a/packages/x-data-grid/package.json b/packages/x-data-grid/package.json
index 721874cd76a4..add19cd5b2ac 100644
--- a/packages/x-data-grid/package.json
+++ b/packages/x-data-grid/package.json
@@ -72,7 +72,6 @@
},
"devDependencies": {
"@mui/internal-test-utils": "^1.0.22",
- "@mui/joy": "^5.0.0-beta.48",
"@mui/material": "^5.16.11",
"@mui/system": "^5.16.8",
"@mui/types": "^7.2.15",
diff --git a/packages/x-data-grid/src/joy/icons.tsx b/packages/x-data-grid/src/joy/icons.tsx
deleted file mode 100644
index c69419a05775..000000000000
--- a/packages/x-data-grid/src/joy/icons.tsx
+++ /dev/null
@@ -1,345 +0,0 @@
-/**
- * Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT).
- * All other copyright (c) for Lucide are held by Lucide Contributors 2022.
- *
- * Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted,
- * provided that the above copyright notice and this permission notice appear in all copies.
- *
- * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE
- * INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE
- * FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
- * OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION,
- * ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
- */
-import * as React from 'react';
-import SvgIcon, { SvgIconProps } from '@mui/joy/SvgIcon';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { GridSortDirection } from '../models/gridSortModel';
-import { GridIconSlotsComponent } from '../models/gridIconSlotsComponent';
-
-function createSvgIcon(path: React.ReactNode, displayName: string): typeof SvgIcon {
- const fontSizeMap = { small: 'lg', medium: 'xl', large: 'xl2', inherit: undefined } as const;
- // @ts-ignore internal component
- function Component({ sx, fontSize, ...props }, ref) {
- return (
-
- {path}
-
- );
- }
-
- if (process.env.NODE_ENV !== 'production') {
- // Need to set `displayName` on the inner component for React.memo.
- // React prior to 16.14 ignores `displayName` on the wrapper.
- Component.displayName = `${displayName}Icon`;
- }
-
- // @ts-ignore internal component
- Component.muiName = SvgIcon.muiName;
-
- // @ts-ignore internal component
- return React.memo(React.forwardRef(Component));
-}
-
-export const GridArrowUpwardIcon = createSvgIcon(
-
-
-
- ,
- 'ArrowUpward',
-);
-
-export const GridArrowDownwardIcon = createSvgIcon(
-
-
-
- ,
- 'ArrowDownward',
-);
-
-export const GridKeyboardArrowLeft = createSvgIcon(
- ,
- 'KeyboardArrowLeft',
-);
-
-export const GridKeyboardArrowRight = createSvgIcon(
- ,
- 'KeyboardArrowRight',
-);
-
-export const GridExpandMoreIcon = createSvgIcon(
-
-
-
- ,
- 'ExpandMore',
-);
-
-export const GridFilterListIcon = createSvgIcon(
- ,
- 'FilterList',
-);
-export const GridFilterAltIcon = createSvgIcon(
-
-
-
-
- ,
- 'FilterAlt',
-);
-
-export const GridSearchIcon = createSvgIcon(
-
-
-
- ,
- 'Search',
-);
-
-export const GridMenuIcon = createSvgIcon(
-
-
-
-
-
- ,
- 'Menu',
-);
-
-export const GridCheckCircleIcon = createSvgIcon(
-
-
-
- ,
- 'CheckCircle',
-);
-
-export const GridColumnIcon = createSvgIcon(
-
-
-
- ,
- 'ColumnIcon',
-);
-
-export const GridSeparatorIcon = createSvgIcon(, 'Separator');
-
-export const GridViewHeadlineIcon = createSvgIcon(
- ,
- 'ViewHeadline',
-);
-
-export const GridTableRowsIcon = createSvgIcon(
- ,
- 'TableRows',
-);
-
-export const GridViewStreamIcon = createSvgIcon(
- ,
- 'ViewStream',
-);
-
-export const GridTripleDotsVerticalIcon = createSvgIcon(
-
-
-
-
- ,
- 'TripleDotsVertical',
-);
-
-export const GridCloseIcon = createSvgIcon(
-
-
-
-
- ,
- 'Close',
-);
-
-export const GridAddIcon = createSvgIcon(
-
-
-
-
- ,
- 'Add',
-);
-
-export const GridRemoveIcon = createSvgIcon(
-
-
-
-
- ,
- 'Remove',
-);
-
-export const GridLoadIcon = createSvgIcon(
-
-
-
-
- ,
- 'Load',
-);
-
-export const GridDragIcon = createSvgIcon(
-
-
-
-
-
-
-
- ,
- 'Drag',
-);
-
-export const GridSaveAltIcon = createSvgIcon(
-
-
-
-
-
- ,
- 'SaveAlt',
-);
-
-export const GridCheckIcon = createSvgIcon(, 'Check');
-
-export const GridMoreVertIcon = createSvgIcon(
-
-
-
-
- ,
- 'MoreVert',
-);
-
-export const GridVisibilityOffIcon = createSvgIcon(
-
-
-
-
-
- ,
- 'VisibilityOff',
-);
-
-export const GridViewColumnIcon = createSvgIcon(
-
-
-
- ,
- 'ViewColumn',
-);
-
-export const GridClearIcon = createSvgIcon(
-
-
-
-
- ,
- 'Clear',
-);
-
-export const GridDeleteIcon = createSvgIcon(
-
-
-
-
-
-
- ,
- 'Delete',
-);
-
-export const GridDeleteForeverIcon = createSvgIcon(
-
-
-
-
-
-
- ,
- 'Delete',
-);
-
-interface GridColumnUnsortedIconProps extends SvgIconProps {
- sortingOrder: GridSortDirection[];
-}
-const GridColumnUnsortedIcon = React.memo(function GridColumnHeaderSortIcon(
- props: GridColumnUnsortedIconProps,
-) {
- const { sortingOrder, ...other } = props;
- const rootProps = useGridRootProps();
- const [nextSortDirection] = sortingOrder;
-
- const Icon =
- nextSortDirection === 'asc'
- ? rootProps.slots.columnSortedAscendingIcon
- : rootProps.slots.columnSortedDescendingIcon;
-
- return Icon ? : null;
-});
-
-const joyIconSlots: GridIconSlotsComponent = {
- booleanCellTrueIcon: GridCheckIcon,
- booleanCellFalseIcon: GridCloseIcon,
- columnMenuIcon: GridTripleDotsVerticalIcon,
- openFilterButtonIcon: GridFilterListIcon,
- filterPanelDeleteIcon: GridCloseIcon,
- columnFilteredIcon: GridFilterAltIcon,
- columnSelectorIcon: GridColumnIcon,
- columnUnsortedIcon: GridColumnUnsortedIcon,
- columnSortedAscendingIcon: GridArrowUpwardIcon,
- columnSortedDescendingIcon: GridArrowDownwardIcon,
- columnResizeIcon: GridSeparatorIcon,
- densityCompactIcon: GridViewHeadlineIcon,
- densityStandardIcon: GridTableRowsIcon,
- densityComfortableIcon: GridViewStreamIcon,
- exportIcon: GridSaveAltIcon,
- moreActionsIcon: GridMoreVertIcon,
- treeDataCollapseIcon: GridExpandMoreIcon,
- treeDataExpandIcon: GridKeyboardArrowRight,
- groupingCriteriaCollapseIcon: GridExpandMoreIcon,
- groupingCriteriaExpandIcon: GridKeyboardArrowRight,
- detailPanelExpandIcon: GridAddIcon,
- detailPanelCollapseIcon: GridRemoveIcon,
- rowReorderIcon: GridDragIcon,
- quickFilterIcon: GridSearchIcon,
- quickFilterClearIcon: GridCloseIcon,
- columnMenuHideIcon: GridVisibilityOffIcon,
- columnMenuSortAscendingIcon: GridArrowUpwardIcon,
- columnMenuSortDescendingIcon: GridArrowDownwardIcon,
- columnMenuFilterIcon: GridFilterAltIcon,
- columnMenuManageColumnsIcon: GridViewColumnIcon,
- columnMenuClearIcon: GridClearIcon,
- loadIcon: GridLoadIcon,
- filterPanelAddIcon: GridAddIcon,
- filterPanelRemoveAllIcon: GridDeleteForeverIcon,
- columnReorderIcon: GridDragIcon,
-};
-
-export default joyIconSlots;
diff --git a/packages/x-data-grid/src/joy/index.ts b/packages/x-data-grid/src/joy/index.ts
deleted file mode 100644
index 6a559055860c..000000000000
--- a/packages/x-data-grid/src/joy/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import joySlots from './joySlots';
-
-export { joySlots as unstable_joySlots };
diff --git a/packages/x-data-grid/src/joy/joySlots.tsx b/packages/x-data-grid/src/joy/joySlots.tsx
deleted file mode 100644
index a4baffb0dabf..000000000000
--- a/packages/x-data-grid/src/joy/joySlots.tsx
+++ /dev/null
@@ -1,413 +0,0 @@
-import * as React from 'react';
-import { SxProps } from '@mui/system';
-import { ColorPaletteProp, Theme, VariantProp } from '@mui/joy/styles';
-import JoyBadge, { BadgeOrigin } from '@mui/joy/Badge';
-import JoyCheckbox from '@mui/joy/Checkbox';
-import JoyDivider from '@mui/joy/Divider';
-import JoyInput from '@mui/joy/Input';
-import JoyFormControl from '@mui/joy/FormControl';
-import JoyFormLabel from '@mui/joy/FormLabel';
-import JoyButton from '@mui/joy/Button';
-import JoyIconButton from '@mui/joy/IconButton';
-import JoySelect, { SelectProps as JoySelectProps } from '@mui/joy/Select';
-import JoyOption, { OptionProps as JoyOptionProps } from '@mui/joy/Option';
-import JoyBox from '@mui/joy/Box';
-import JoyTypography from '@mui/joy/Typography';
-import JoyCircularProgress from '@mui/joy/CircularProgress';
-import JoyTooltip from '@mui/joy/Tooltip';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import joyIconSlots, { GridKeyboardArrowRight, GridKeyboardArrowLeft } from './icons';
-import type { GridSlotProps, GridSlotsComponent, GridSlotsComponentsProps } from '../models';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridFilteredTopLevelRowCountSelector, gridPaginationModelSelector } from '../hooks';
-import { GridOverlay } from '../components/containers/GridOverlay';
-
-function convertColor<
- T extends
- | 'primary'
- | 'secondary'
- | 'error'
- | 'info'
- | 'success'
- | 'warning'
- | 'inherit'
- | 'default',
->(color: T | undefined) {
- if (color === 'secondary') {
- return 'primary';
- }
- if (color === 'error') {
- return 'danger';
- }
- if (color === 'default' || color === 'inherit') {
- return 'neutral';
- }
- return color as ColorPaletteProp;
-}
-
-function convertSize(size: T | undefined) {
- return (size ? { small: 'sm', medium: 'md', large: 'lg' }[size] : size) as
- | 'sm'
- | 'md'
- | 'lg'
- | undefined;
-}
-
-function convertVariant(
- variant: T | undefined,
- defaultVariant: VariantProp = 'plain',
-) {
- if (!variant) {
- return defaultVariant;
- }
-
- return ({
- standard: 'outlined',
- outlined: 'outlined',
- contained: 'solid',
- text: 'plain',
- filled: 'soft',
- }[variant] || defaultVariant) as VariantProp;
-}
-
-const Badge = React.forwardRef>(
- ({ slotProps, variant, color, sx, anchorOrigin, ...props }, ref) => {
- return (
- }
- ref={ref as any}
- />
- );
- },
-);
-
-const Checkbox = React.forwardRef<
- HTMLElement,
- NonNullable
->(
- (
- { touchRippleRef, inputProps, onChange, color, size, checked, sx, value, inputRef, ...props },
- ref,
- ) => {
- return (
- }
- />
- );
- },
-);
-
-const TextField = React.forwardRef<
- HTMLDivElement,
- NonNullable
->(({ onChange, label, placeholder, value, inputRef, type, size, variant, ...props }, ref) => {
- const rootRef = useForkRef(ref, props.InputProps?.ref);
- const inputForkRef = useForkRef(inputRef, props?.inputProps?.ref);
- const { startAdornment, endAdornment } = props.InputProps || {};
-
- return (
-
- {label}
-
-
- );
-});
-
-const Button = React.forwardRef(function Button(
- { startIcon, color, endIcon, size, sx, variant, ...props },
- ref,
-) {
- return (
- }
- />
- );
-});
-
-const IconButton = React.forwardRef<
- HTMLButtonElement,
- NonNullable
->(function IconButton({ color, size, sx, touchRippleRef, ...props }, ref) {
- return (
- }
- />
- );
-});
-
-const Select = React.forwardRef(
- (
- {
- open,
- onOpen,
- value,
- onChange,
- size,
- color,
- variant,
- inputProps,
- MenuProps,
- inputRef,
- error,
- native,
- fullWidth,
- labelId,
- ...props
- },
- ref,
- ) => {
- const handleChange: JoySelectProps['onChange'] = (event, newValue) => {
- if (event && onChange) {
- // Same as in https://github.com/mui/material-ui/blob/e5558282a8f36856aef1299f3a36f3235e92e770/packages/mui-material/src/Select/SelectInput.js#L288-L300
-
- // Redefine target to allow name and value to be read.
- // This allows seamless integration with the most popular form libraries.
- // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
- // Clone the event to not override `target` of the original event.
- const nativeEvent = (event as React.SyntheticEvent).nativeEvent || event;
- // @ts-ignore The nativeEvent is function, not object
- const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
-
- Object.defineProperty(clonedEvent, 'target', {
- writable: true,
- value: { value: newValue, name: props.name },
- });
- onChange(clonedEvent, null);
- }
- };
-
- return (
- )}
- listboxOpen={open}
- onListboxOpenChange={(isOpen) => {
- if (isOpen) {
- onOpen?.({} as React.SyntheticEvent);
- } else {
- MenuProps?.onClose?.({} as React.KeyboardEvent, undefined as any);
- }
- }}
- size={convertSize(size)}
- color={convertColor(color)}
- variant={convertVariant(variant, 'outlined')}
- ref={ref}
- value={value}
- onChange={handleChange}
- slotProps={{
- button: {
- 'aria-labelledby': labelId,
- ref: inputRef,
- },
- listbox: {
- disablePortal: false,
- sx: {
- zIndex: 1350,
- },
- },
- }}
- />
- );
- },
-);
-
-const Option = React.forwardRef<
- HTMLLIElement,
- NonNullable
->(({ native, ...props }, ref) => {
- return ;
-});
-
-const InputLabel = React.forwardRef<
- HTMLLabelElement,
- NonNullable
->(({ shrink, variant, sx, ...props }, ref) => {
- return } />;
-});
-
-function labelDisplayedRows({ from, to, count }: { from: number; to: number; count: number }) {
- return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-}
-const getLabelDisplayedRowsTo = ({
- page,
- pageSize,
- rowCount,
-}: {
- page: number;
- pageSize: number;
- rowCount: number;
-}) => {
- if (rowCount === -1) {
- return (page + 1) * pageSize;
- }
- return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize);
-};
-
-const Pagination = React.forwardRef((props, ref) => {
- const apiRef = useGridApiContext();
- const rootProps = useGridRootProps();
- const paginationModel = gridPaginationModelSelector(apiRef);
- const visibleTopLevelRowCount = gridFilteredTopLevelRowCountSelector(apiRef);
-
- const rowCount = React.useMemo(
- () => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0,
- [rootProps.rowCount, visibleTopLevelRowCount],
- );
-
- const lastPage = React.useMemo(
- () => Math.floor(rowCount / (paginationModel.pageSize || 1)),
- [rowCount, paginationModel.pageSize],
- );
-
- const handlePageChange = React.useCallback(
- (page: number) => {
- apiRef.current.setPage(page);
- },
- [apiRef],
- );
-
- const page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
- const pageSize = paginationModel.pageSize;
-
- const isPageSizeIncludedInPageSizeOptions = () => {
- for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
- const option = rootProps.pageSizeOptions[i];
- if (typeof option === 'number') {
- if (option === pageSize) {
- return true;
- }
- } else if (option.value === pageSize) {
- return true;
- }
- }
- return false;
- };
-
- const pageSizeOptions = isPageSizeIncludedInPageSizeOptions() ? rootProps.pageSizeOptions : [];
-
- const handleChangeRowsPerPage: JoySelectProps['onChange'] = (event, newValue) => {
- const newPageSize = Number(newValue);
- apiRef.current.setPageSize(newPageSize);
- };
- return (
-
-
- Rows per page:
- onChange={handleChangeRowsPerPage} value={pageSize}>
- {pageSizeOptions.map((option: number | { label: string; value: number }) => {
- return (
-
- );
- })}
-
-
-
- {labelDisplayedRows({
- from: rowCount === 0 ? 0 : page * pageSize + 1,
- to: getLabelDisplayedRowsTo({ page, pageSize, rowCount }),
- count: rowCount === -1 ? -1 : rowCount,
- })}
-
-
- handlePageChange(page - 1)}
- sx={{ bgcolor: 'background.surface' }}
- >
-
-
- = Math.ceil(rowCount / pageSize) - 1 : false}
- onClick={() => handlePageChange(page + 1)}
- sx={{ bgcolor: 'background.surface' }}
- >
-
-
-
-
- );
-});
-
-const LoadingOverlay = React.forwardRef<
- HTMLDivElement,
- NonNullable
->((props, ref) => {
- return (
-
-
-
- );
-});
-
-const joySlots: Partial = {
- ...joyIconSlots,
- baseBadge: Badge,
- baseCheckbox: Checkbox,
- baseDivider: JoyDivider,
- baseTextField: TextField,
- baseButton: Button,
- baseIconButton: IconButton,
- baseSelect: Select,
- baseSelectOption: Option,
- baseInputLabel: InputLabel,
- baseFormControl: JoyFormControl as any /* FIXME: typing error */,
- baseTooltip: JoyTooltip as any /* FIXME: typing error */,
- pagination: Pagination,
- loadingOverlay: LoadingOverlay,
-};
-
-export default joySlots;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 168ea50d0c1a..f7e6a5cc84d8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1032,9 +1032,6 @@ importers:
'@mui/internal-test-utils':
specifier: ^1.0.22
version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@mui/joy':
- specifier: ^5.0.0-beta.48
- version: 5.0.0-beta.48(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/material':
specifier: ^5.16.11
version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)