@mui/x-data-grid-generator 8.0.0-beta.3 → 8.1.0

package/modern/hooks/useQuery.js

@@ -1,84 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
-import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
-import { useDemoData, getColumnsFromOptions, getInitialState } from "./useDemoData.js";
-import { DEFAULT_SERVER_OPTIONS, loadServerRows } from "./serverUtils.js";
-const DEFAULT_DATASET_OPTIONS = {
-  dataSet: 'Commodity',
-  rowLength: 100,
-  maxColumns: 6
-};
-export const createFakeServer = (dataSetOptions, serverOptions) => {
-  const dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
-  const serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);
-  const columns = getColumnsFromOptions(dataSetOptionsWithDefault);
-  const initialState = getInitialState(dataSetOptionsWithDefault, columns);
-  const defaultColDef = getGridDefaultColumnTypes();
-  const columnsWithDefaultColDef = columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column));
-  const useQuery = queryOptions => {
-    const {
-      data: {
-        rows
-      },
-      loading: dataGenerationIsLoading
-    } = useDemoData(dataSetOptionsWithDefault);
-    const queryOptionsRef = React.useRef(queryOptions);
-    const [response, setResponse] = React.useState({
-      pageInfo: {},
-      rows: []
-    });
-    const [isLoading, setIsLoading] = React.useState(dataGenerationIsLoading);
-    React.useEffect(() => {
-      if (dataGenerationIsLoading) {
-        // dataset is not ready
-        return () => {};
-      }
-      queryOptionsRef.current = queryOptions;
-      let active = true;
-      setIsLoading(true);
-      setResponse(prev => Object.keys(prev.pageInfo).length === 0 ? prev : _extends({}, prev, {
-        pageInfo: {}
-      }));
-      (async function fetchData() {
-        const {
-          returnedRows,
-          nextCursor,
-          totalRowCount,
-          hasNextPage
-        } = await loadServerRows(rows, queryOptions, serverOptionsWithDefault, columnsWithDefaultColDef);
-        if (!active) {
-          return;
-        }
-        const newRep = {
-          rows: returnedRows,
-          pageInfo: {
-            totalRowCount,
-            nextCursor,
-            hasNextPage,
-            pageSize: returnedRows.length
-          }
-        };
-        setResponse(prev => isDeepEqual(prev, newRep) ? prev : newRep);
-        setIsLoading(false);
-      })();
-      return () => {
-        active = false;
-      };
-    }, [dataGenerationIsLoading, queryOptions, rows]);
-
-    // We use queryOptions pointer to be sure that isLoading===true as soon as the options change
-    const effectShouldStart = queryOptionsRef.current !== queryOptions;
-    return _extends({
-      isLoading: isLoading || effectShouldStart
-    }, response);
-  };
-  return {
-    columns,
-    columnsWithDefaultColDef,
-    initialState,
-    useQuery
-  };
-};

package/modern/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./renderer/index.js";
-export * from "./services/index.js";
-export * from "./columns/index.js";
-export * from "./hooks/index.js";

package/modern/index.js

@@ -1,11 +0,0 @@
-/**
- * @mui/x-data-grid-generator v8.0.0-beta.3
- *
- * @license MUI X Commercial
- * This source code is licensed under the commercial license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export * from "./renderer/index.js";
-export * from "./services/index.js";
-export * from "./columns/index.js";
-export * from "./hooks/index.js";

package/modern/package.json

@@ -1 +0,0 @@
-{"type":"module","sideEffects":false}

package/modern/renderer/index.d.ts

@@ -1,16 +0,0 @@
-export * from "./renderAvatar.js";
-export * from "./renderCountry.js";
-export * from "./renderEmail.js";
-export * from "./renderIncoterm.js";
-export * from "./renderLink.js";
-export * from "./renderPnl.js";
-export * from "./renderProgress.js";
-export * from "./renderRating.js";
-export * from "./renderStatus.js";
-export * from "./renderTotalPrice.js";
-export * from "./renderEditCurrency.js";
-export * from "./renderEditProgress.js";
-export * from "./renderEditStatus.js";
-export * from "./renderEditIncoterm.js";
-export * from "./renderEditRating.js";
-export * from "./renderEditCountry.js";

package/modern/renderer/index.js

@@ -1,16 +0,0 @@
-export * from "./renderAvatar.js";
-export * from "./renderCountry.js";
-export * from "./renderEmail.js";
-export * from "./renderIncoterm.js";
-export * from "./renderLink.js";
-export * from "./renderPnl.js";
-export * from "./renderProgress.js";
-export * from "./renderRating.js";
-export * from "./renderStatus.js";
-export * from "./renderTotalPrice.js";
-export * from "./renderEditCurrency.js";
-export * from "./renderEditProgress.js";
-export * from "./renderEditStatus.js";
-export * from "./renderEditIncoterm.js";
-export * from "./renderEditRating.js";
-export * from "./renderEditCountry.js";

package/modern/renderer/renderAvatar.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { GridRenderCellParams } from '@mui/x-data-grid-premium';
-export declare function renderAvatar(params: GridRenderCellParams<{
-  name: string;
-  color: string;
-}, any, any>): "" | React.JSX.Element;

package/modern/renderer/renderAvatar.js

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function renderAvatar(params) {
-  if (params.value == null) {
-    return '';
-  }
-  return /*#__PURE__*/_jsx(Avatar, {
-    style: {
-      backgroundColor: params.value.color
-    },
-    children: params.value.name.toUpperCase().substring(0, 1)
-  });
-}

package/modern/renderer/renderCountry.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { GridRenderCellParams } from '@mui/x-data-grid-premium';
-import { CountryIsoOption } from "../services/static-data.js";
-export declare function renderCountry(params: GridRenderCellParams<CountryIsoOption, any, any>): "" | React.JSX.Element | null;

package/modern/renderer/renderCountry.js

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStaticFlag = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
-const laosFlag = `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
-  <path fill="#ce1126" d="M0 0h900v600H0z" />
-  <path fill="#002868" d="M0 150h900v300H0z" />
-  <circle r="120" cy="300" cx="450" fill="#fff" />
-</svg>
-`;
-const staticFlagURI = `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(laosFlag)}`;
-const Country = /*#__PURE__*/React.memo(function Country(props) {
-  const {
-    value
-  } = props;
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      '&  > img': {
-        mr: 0.5,
-        flexShrink: 0,
-        width: '20px'
-      }
-    },
-    children: [/*#__PURE__*/_jsx("img", {
-      loading: "lazy",
-      width: "20",
-      src: useStaticFlag ? staticFlagURI : `https://flagcdn.com/w20/${value.code.toLowerCase()}.png`,
-      srcSet: useStaticFlag ? undefined : `https://flagcdn.com/w40/${value.code.toLowerCase()}.png 2x`,
-      alt: ""
-    }), /*#__PURE__*/_jsx(Box, {
-      component: "span",
-      sx: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-      },
-      children: value.label
-    })]
-  });
-});
-export function renderCountry(params) {
-  if (params.value == null) {
-    return '';
-  }
-
-  // If the aggregated value does not have the same unit as the other cell
-  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
-  if (params.aggregation && !params.aggregation.hasCellUnit) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(Country, {
-    value: params.value
-  });
-}

package/modern/renderer/renderEditCountry.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { GridRenderEditCellParams } from '@mui/x-data-grid-premium';
-import { CountryIsoOption } from "../services/static-data.js";
-export declare function renderEditCountry(params: GridRenderEditCellParams<CountryIsoOption>): React.JSX.Element;

package/modern/renderer/renderEditCountry.js

@@ -1,80 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useGridApiContext } from '@mui/x-data-grid-premium';
-import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import InputBase from '@mui/material/InputBase';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import { COUNTRY_ISO_OPTIONS } from "../services/static-data.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-const StyledAutocomplete = styled(Autocomplete)(({
-  theme
-}) => ({
-  height: '100%',
-  [`& .${autocompleteClasses.inputRoot}`]: _extends({}, theme.typography.body2, {
-    padding: '1px 0',
-    height: '100%',
-    '& input': {
-      padding: '0 16px',
-      height: '100%'
-    }
-  })
-}));
-function EditCountry(props) {
-  const {
-    id,
-    value,
-    field
-  } = props;
-  const apiRef = useGridApiContext();
-  const handleChange = React.useCallback(async (event, newValue) => {
-    await apiRef.current.setEditCellValue({
-      id,
-      field,
-      value: newValue
-    }, event);
-    apiRef.current.stopCellEditMode({
-      id,
-      field
-    });
-  }, [apiRef, field, id]);
-  return /*#__PURE__*/_jsx(StyledAutocomplete, {
-    value: value,
-    onChange: handleChange,
-    options: COUNTRY_ISO_OPTIONS,
-    getOptionLabel: option => option.label,
-    autoHighlight: true,
-    fullWidth: true,
-    open: true,
-    disableClearable: true,
-    renderOption: (optionProps, option) => /*#__PURE__*/_createElement(Box, _extends({
-      component: "li",
-      sx: {
-        '& > img': {
-          mr: 1.5,
-          flexShrink: 0
-        }
-      }
-    }, optionProps, {
-      key: option.code
-    }), /*#__PURE__*/_jsx("img", {
-      loading: "lazy",
-      width: "20",
-      src: `https://flagcdn.com/w20/${option.code.toLowerCase()}.png`,
-      srcSet: `https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`,
-      alt: ""
-    }), option.label),
-    renderInput: params => /*#__PURE__*/_jsx(InputBase, _extends({
-      autoFocus: true,
-      fullWidth: true,
-      id: params.id,
-      inputProps: _extends({}, params.inputProps, {
-        autoComplete: 'new-password' // disable autocomplete and autofill
-      })
-    }, params.InputProps))
-  });
-}
-export function renderEditCountry(params) {
-  return /*#__PURE__*/_jsx(EditCountry, _extends({}, params));
-}

package/modern/renderer/renderEditCurrency.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { GridRenderEditCellParams } from '@mui/x-data-grid-premium';
-export declare function renderEditCurrency(params: GridRenderEditCellParams<any, string>): React.JSX.Element;

package/modern/renderer/renderEditCurrency.js

@@ -1,78 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useGridApiContext } from '@mui/x-data-grid-premium';
-import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import InputBase from '@mui/material/InputBase';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import { CURRENCY_OPTIONS } from "../services/static-data.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledAutocomplete = styled(Autocomplete)(({
-  theme
-}) => ({
-  height: '100%',
-  [`& .${autocompleteClasses.inputRoot}`]: _extends({}, theme.typography.body2, {
-    padding: '1px 0',
-    height: '100%',
-    '& input': {
-      padding: '0 16px',
-      height: '100%'
-    }
-  })
-}));
-function EditCurrency(props) {
-  const {
-    id,
-    value,
-    field
-  } = props;
-  const apiRef = useGridApiContext();
-  const handleChange = React.useCallback(async (event, newValue) => {
-    await apiRef.current.setEditCellValue({
-      id,
-      field,
-      value: newValue.toUpperCase()
-    }, event);
-    apiRef.current.stopCellEditMode({
-      id,
-      field
-    });
-  }, [apiRef, field, id]);
-  return /*#__PURE__*/_jsx(StyledAutocomplete, {
-    value: value,
-    onChange: handleChange,
-    options: CURRENCY_OPTIONS,
-    autoHighlight: true,
-    fullWidth: true,
-    open: true,
-    disableClearable: true,
-    renderOption: (optionProps, option) => /*#__PURE__*/_jsxs(Box, _extends({
-      component: "li",
-      sx: {
-        '& > img': {
-          mr: 1.5,
-          flexShrink: 0
-        }
-      }
-    }, optionProps, {
-      children: [/*#__PURE__*/_jsx("img", {
-        loading: "lazy",
-        width: "20",
-        src: `https://flagcdn.com/w20/${option.slice(0, -1).toLowerCase()}.png`,
-        srcSet: `https://flagcdn.com/w40/${option.slice(0, -1).toLowerCase()}.png 2x`,
-        alt: ""
-      }), option]
-    })),
-    renderInput: params => /*#__PURE__*/_jsx(InputBase, _extends({
-      autoFocus: true,
-      fullWidth: true,
-      id: params.id,
-      inputProps: _extends({}, params.inputProps, {
-        autoComplete: 'new-password' // disable autocomplete and autofill
-      })
-    }, params.InputProps))
-  });
-}
-export function renderEditCurrency(params) {
-  return /*#__PURE__*/_jsx(EditCurrency, _extends({}, params));
-}

package/modern/renderer/renderEditIncoterm.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { GridRenderEditCellParams } from '@mui/x-data-grid-premium';
-export declare function renderEditIncoterm(params: GridRenderEditCellParams<any, string | null>): React.JSX.Element;

package/modern/renderer/renderEditIncoterm.js

@@ -1,75 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useGridApiContext } from '@mui/x-data-grid-premium';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import { INCOTERM_OPTIONS } from "../services/static-data.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function EditIncoterm(props) {
-  const {
-    id,
-    value,
-    field
-  } = props;
-  const apiRef = useGridApiContext();
-  const handleChange = async event => {
-    await apiRef.current.setEditCellValue({
-      id,
-      field,
-      value: event.target.value
-    }, event);
-    apiRef.current.stopCellEditMode({
-      id,
-      field
-    });
-  };
-  const handleClose = (event, reason) => {
-    if (reason === 'backdropClick') {
-      apiRef.current.stopCellEditMode({
-        id,
-        field
-      });
-    }
-  };
-  return /*#__PURE__*/_jsx(Select, {
-    value: value,
-    onChange: handleChange,
-    MenuProps: {
-      onClose: handleClose
-    },
-    sx: {
-      height: '100%',
-      '& .MuiSelect-select': {
-        display: 'flex',
-        alignItems: 'center',
-        pl: 1
-      }
-    },
-    autoFocus: true,
-    fullWidth: true,
-    open: true,
-    children: INCOTERM_OPTIONS.map(option => {
-      const tooltip = option.slice(option.indexOf('(') + 1, option.indexOf(')'));
-      const code = option.slice(0, option.indexOf('(')).trim();
-      return /*#__PURE__*/_jsxs(MenuItem, {
-        value: option,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          sx: {
-            minWidth: 36
-          },
-          children: code
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: tooltip,
-          sx: {
-            overflow: 'hidden'
-          }
-        })]
-      }, option);
-    })
-  });
-}
-export function renderEditIncoterm(params) {
-  return /*#__PURE__*/_jsx(EditIncoterm, _extends({}, params));
-}

package/modern/renderer/renderEditProgress.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { GridRenderEditCellParams } from '@mui/x-data-grid-premium';
-export declare function renderEditProgress(params: GridRenderEditCellParams<any, number>): React.JSX.Element;

package/modern/renderer/renderEditProgress.js

@@ -1,109 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import clsx from 'clsx';
-import { useGridApiContext } from '@mui/x-data-grid-premium';
-import Slider, { sliderClasses } from '@mui/material/Slider';
-import Tooltip from '@mui/material/Tooltip';
-import { unstable_debounce as debounce } from '@mui/utils';
-import { alpha, styled } from '@mui/material/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledSlider = styled(Slider)(({
-  theme
-}) => ({
-  display: 'flex',
-  height: '100%',
-  width: '100%',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: 0,
-  borderRadius: 0,
-  [`& .${sliderClasses.rail}`]: {
-    height: '100%',
-    backgroundColor: 'transparent'
-  },
-  [`& .${sliderClasses.track}`]: {
-    height: '100%',
-    transition: theme.transitions.create('background-color', {
-      duration: theme.transitions.duration.shorter
-    }),
-    '&.low': {
-      backgroundColor: '#f44336'
-    },
-    '&.medium': {
-      backgroundColor: '#efbb5aa3'
-    },
-    '&.high': {
-      backgroundColor: '#088208a3'
-    }
-  },
-  [`& .${sliderClasses.thumb}`]: {
-    height: '100%',
-    width: 5,
-    borderRadius: 0,
-    marginTop: 0,
-    backgroundColor: alpha('#000000', 0.2)
-  }
-}));
-function ValueLabelComponent(props) {
-  const {
-    children,
-    open,
-    value
-  } = props;
-  return /*#__PURE__*/_jsx(Tooltip, {
-    open: open,
-    enterTouchDelay: 0,
-    placement: "top",
-    title: value,
-    children: children
-  });
-}
-function EditProgress(props) {
-  const {
-    id,
-    value,
-    field
-  } = props;
-  const [valueState, setValueState] = React.useState(Number(value));
-  const apiRef = useGridApiContext();
-  const updateCellEditProps = React.useCallback(newValue => {
-    apiRef.current.setEditCellValue({
-      id,
-      field,
-      value: newValue
-    });
-  }, [apiRef, field, id]);
-  const debouncedUpdateCellEditProps = React.useMemo(() => debounce(updateCellEditProps, 60), [updateCellEditProps]);
-  const handleChange = (event, newValue) => {
-    setValueState(newValue);
-    debouncedUpdateCellEditProps(newValue);
-  };
-  React.useEffect(() => {
-    setValueState(Number(value));
-  }, [value]);
-  const handleRef = element => {
-    if (element) {
-      element.querySelector('[type="range"]').focus();
-    }
-  };
-  return /*#__PURE__*/_jsx(StyledSlider, {
-    ref: handleRef,
-    classes: {
-      track: clsx(valueState < 0.3 && "low", valueState >= 0.3 && valueState <= 0.7 && "medium", valueState > 0.7 && "high")
-    },
-    value: valueState,
-    max: 1,
-    step: 0.00001,
-    onChange: handleChange,
-    components: {
-      ValueLabel: ValueLabelComponent
-    },
-    valueLabelDisplay: "auto",
-    valueLabelFormat: newValue => `${(newValue * 100).toLocaleString()} %`
-  });
-}
-export function renderEditProgress(params) {
-  return /*#__PURE__*/_jsx(EditProgress, _extends({}, params));
-}

package/modern/renderer/renderEditRating.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { GridRenderEditCellParams } from '@mui/x-data-grid-premium';
-export declare function renderEditRating(params: GridRenderEditCellParams<any, number>): React.JSX.Element;

package/modern/renderer/renderEditRating.js

@@ -1,68 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Rating from '@mui/material/Rating';
-import { useGridApiContext } from '@mui/x-data-grid-premium';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function EditRating(props) {
-  const {
-    id,
-    value,
-    field
-  } = props;
-  const apiRef = useGridApiContext();
-  const changedThroughKeyboard = React.useRef(false);
-  const handleChange = async event => {
-    await apiRef.current.setEditCellValue({
-      id,
-      field,
-      value: Number(event.target.value)
-    }, event);
-    if (!changedThroughKeyboard.current) {
-      apiRef.current.stopCellEditMode({
-        id,
-        field
-      });
-    }
-    changedThroughKeyboard.current = false;
-  };
-  const handleRef = element => {
-    if (element) {
-      if (value !== 0) {
-        element.querySelector(`input[value="${value}"]`).focus();
-      } else {
-        element.querySelector('input[value=""]').focus();
-      }
-    }
-  };
-  const handleKeyDown = event => {
-    if (event.key.startsWith('Arrow')) {
-      changedThroughKeyboard.current = true;
-    } else {
-      changedThroughKeyboard.current = false;
-    }
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      lineHeight: '24px',
-      color: 'text.secondary',
-      mr: 1
-    },
-    children: [/*#__PURE__*/_jsx(Rating, {
-      ref: handleRef,
-      name: "rating",
-      value: Number(value),
-      precision: 1,
-      onChange: handleChange,
-      sx: {
-        mr: 1
-      },
-      onKeyDown: handleKeyDown
-    }), Number(value)]
-  });
-}
-export function renderEditRating(params) {
-  return /*#__PURE__*/_jsx(EditRating, _extends({}, params));
-}

package/modern/renderer/renderEditStatus.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { GridRenderEditCellParams } from '@mui/x-data-grid-premium';
-export declare function renderEditStatus(params: GridRenderEditCellParams<any, string>): React.JSX.Element;