@mui/x-data-grid-generator 8.0.0-alpha.9 → 8.0.0-beta.0

package/esm/hooks/useQuery.d.ts

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { GridRowModel } from '@mui/x-data-grid-pro';
+import { UseDemoDataOptions } from "./useDemoData.js";
+import type { ServerOptions, QueryOptions, PageInfo } from './serverUtils';
+export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOptions>, serverOptions?: ServerOptions) => {
+  columns: import("..").GridColDefGenerator[];
+  columnsWithDefaultColDef: ({
+    field: string;
+    headerName?: string;
+    description?: string;
+    width?: number;
+    flex?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    hideable?: boolean;
+    sortable?: boolean;
+    sortingOrder?: readonly import("@mui/x-data-grid").GridSortDirection[];
+    resizable?: boolean;
+    editable?: boolean;
+    groupable?: boolean;
+    pinnable?: boolean;
+    sortComparator?: import("@mui/x-data-grid").GridComparatorFn<any> | undefined;
+    getSortComparator?: ((sortDirection: import("@mui/x-data-grid").GridSortDirection) => import("@mui/x-data-grid").GridComparatorFn<any> | undefined) | undefined;
+    type?: import("@mui/x-data-grid").GridColType;
+    align?: import("@mui/x-data-grid").GridAlignment;
+    valueGetter?: import("@mui/x-data-grid").GridValueGetter<any, any, any, never> | undefined;
+    rowSpanValueGetter?: import("@mui/x-data-grid").GridValueGetter<any, any, any, never> | undefined;
+    valueSetter?: import("@mui/x-data-grid").GridValueSetter<any, any, any> | undefined;
+    valueFormatter?: import("@mui/x-data-grid").GridValueFormatter<any, any, any, never> | undefined;
+    valueParser?: import("@mui/x-data-grid").GridValueParser<any, any, any> | undefined;
+    cellClassName?: import("@mui/x-data-grid").GridCellClassNamePropType<any, any> | undefined;
+    display?: "text" | "flex";
+    renderCell?: ((params: import("@mui/x-data-grid").GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
+    renderEditCell?: ((params: import("@mui/x-data-grid").GridRenderEditCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
+    preProcessEditCellProps?: ((params: import("@mui/x-data-grid").GridPreProcessEditCellProps) => import("@mui/x-data-grid").GridEditCellProps | Promise<import("@mui/x-data-grid").GridEditCellProps>) | undefined;
+    headerClassName?: import("@mui/x-data-grid").GridColumnHeaderClassNamePropType;
+    renderHeader?: ((params: import("@mui/x-data-grid").GridColumnHeaderParams<any, any, any>) => React.ReactNode) | undefined;
+    headerAlign?: import("@mui/x-data-grid").GridAlignment;
+    hideSortIcons?: boolean;
+    disableColumnMenu?: boolean;
+    filterable?: boolean;
+    filterOperators?: readonly import("@mui/x-data-grid").GridFilterOperator<any, any, any, any>[] | undefined;
+    getApplyQuickFilterFn?: import("@mui/x-data-grid").GetApplyQuickFilterFn<any, any> | undefined;
+    disableReorder?: boolean;
+    disableExport?: boolean;
+    colSpan?: number | import("@mui/x-data-grid").GridColSpanFn<any, any, any> | undefined;
+    unstable_examples?: any[] | undefined;
+    renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
+    aggregable?: boolean;
+    availableAggregationFunctions?: string[];
+    groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
+    pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
+    generateData?: (row: any, context: import("..").GridDataGeneratorContext) => any;
+    dataGeneratorUniquenessEnabled?: boolean;
+    hide?: boolean;
+  } | {
+    type: "actions";
+    getActions: (params: import("@mui/x-data-grid").GridRowParams<any>) => readonly React.ReactElement<import("@mui/x-data-grid").GridActionsCellItemProps>[];
+    field: string;
+    headerName?: string;
+    description?: string;
+    width?: number;
+    flex?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    hideable?: boolean;
+    sortable?: boolean;
+    sortingOrder?: readonly import("@mui/x-data-grid").GridSortDirection[];
+    resizable?: boolean;
+    editable?: boolean;
+    groupable?: boolean;
+    pinnable?: boolean;
+    sortComparator?: import("@mui/x-data-grid").GridComparatorFn<any> | undefined;
+    getSortComparator?: ((sortDirection: import("@mui/x-data-grid").GridSortDirection) => import("@mui/x-data-grid").GridComparatorFn<any> | undefined) | undefined;
+    align?: import("@mui/x-data-grid").GridAlignment;
+    valueGetter?: import("@mui/x-data-grid").GridValueGetter<any, any, any, never> | undefined;
+    rowSpanValueGetter?: import("@mui/x-data-grid").GridValueGetter<any, any, any, never> | undefined;
+    valueSetter?: import("@mui/x-data-grid").GridValueSetter<any, any, any> | undefined;
+    valueFormatter?: import("@mui/x-data-grid").GridValueFormatter<any, any, any, never> | undefined;
+    valueParser?: import("@mui/x-data-grid").GridValueParser<any, any, any> | undefined;
+    cellClassName?: import("@mui/x-data-grid").GridCellClassNamePropType<any, any> | undefined;
+    display?: "text" | "flex";
+    renderCell?: ((params: import("@mui/x-data-grid").GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
+    renderEditCell?: ((params: import("@mui/x-data-grid").GridRenderEditCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
+    preProcessEditCellProps?: ((params: import("@mui/x-data-grid").GridPreProcessEditCellProps) => import("@mui/x-data-grid").GridEditCellProps | Promise<import("@mui/x-data-grid").GridEditCellProps>) | undefined;
+    headerClassName?: import("@mui/x-data-grid").GridColumnHeaderClassNamePropType;
+    renderHeader?: ((params: import("@mui/x-data-grid").GridColumnHeaderParams<any, any, any>) => React.ReactNode) | undefined;
+    headerAlign?: import("@mui/x-data-grid").GridAlignment;
+    hideSortIcons?: boolean;
+    disableColumnMenu?: boolean;
+    filterable?: boolean;
+    filterOperators?: readonly import("@mui/x-data-grid").GridFilterOperator<any, any, any, any>[] | undefined;
+    getApplyQuickFilterFn?: import("@mui/x-data-grid").GetApplyQuickFilterFn<any, any> | undefined;
+    disableReorder?: boolean;
+    disableExport?: boolean;
+    colSpan?: number | import("@mui/x-data-grid").GridColSpanFn<any, any, any> | undefined;
+    unstable_examples?: any[] | undefined;
+    renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
+    aggregable?: boolean;
+    availableAggregationFunctions?: string[];
+    groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
+    pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
+    generateData?: (row: any, context: import("..").GridDataGeneratorContext) => any;
+    dataGeneratorUniquenessEnabled?: boolean;
+    hide?: boolean;
+  } | {
+    type: "singleSelect";
+    valueOptions?: import("@mui/x-data-grid").ValueOptions[] | ((params: import("@mui/x-data-grid").GridValueOptionsParams<any>) => Array<import("@mui/x-data-grid").ValueOptions>) | undefined;
+    getOptionLabel?: (value: import("@mui/x-data-grid").ValueOptions) => string;
+    getOptionValue?: (value: import("@mui/x-data-grid").ValueOptions) => any;
+    field: string;
+    headerName?: string;
+    description?: string;
+    width?: number;
+    flex?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    hideable?: boolean;
+    sortable?: boolean;
+    sortingOrder?: readonly import("@mui/x-data-grid").GridSortDirection[];
+    resizable?: boolean;
+    editable?: boolean;
+    groupable?: boolean;
+    pinnable?: boolean;
+    sortComparator?: import("@mui/x-data-grid").GridComparatorFn<any> | undefined;
+    getSortComparator?: ((sortDirection: import("@mui/x-data-grid").GridSortDirection) => import("@mui/x-data-grid").GridComparatorFn<any> | undefined) | undefined;
+    align?: import("@mui/x-data-grid").GridAlignment;
+    valueGetter?: import("@mui/x-data-grid").GridValueGetter<any, any, any, never> | undefined;
+    rowSpanValueGetter?: import("@mui/x-data-grid").GridValueGetter<any, any, any, never> | undefined;
+    valueSetter?: import("@mui/x-data-grid").GridValueSetter<any, any, any> | undefined;
+    valueFormatter?: import("@mui/x-data-grid").GridValueFormatter<any, any, any, never> | undefined;
+    valueParser?: import("@mui/x-data-grid").GridValueParser<any, any, any> | undefined;
+    cellClassName?: import("@mui/x-data-grid").GridCellClassNamePropType<any, any> | undefined;
+    display?: "text" | "flex";
+    renderCell?: ((params: import("@mui/x-data-grid").GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
+    renderEditCell?: ((params: import("@mui/x-data-grid").GridRenderEditCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
+    preProcessEditCellProps?: ((params: import("@mui/x-data-grid").GridPreProcessEditCellProps) => import("@mui/x-data-grid").GridEditCellProps | Promise<import("@mui/x-data-grid").GridEditCellProps>) | undefined;
+    headerClassName?: import("@mui/x-data-grid").GridColumnHeaderClassNamePropType;
+    renderHeader?: ((params: import("@mui/x-data-grid").GridColumnHeaderParams<any, any, any>) => React.ReactNode) | undefined;
+    headerAlign?: import("@mui/x-data-grid").GridAlignment;
+    hideSortIcons?: boolean;
+    disableColumnMenu?: boolean;
+    filterable?: boolean;
+    filterOperators?: readonly import("@mui/x-data-grid").GridFilterOperator<any, any, any, any>[] | undefined;
+    getApplyQuickFilterFn?: import("@mui/x-data-grid").GetApplyQuickFilterFn<any, any> | undefined;
+    disableReorder?: boolean;
+    disableExport?: boolean;
+    colSpan?: number | import("@mui/x-data-grid").GridColSpanFn<any, any, any> | undefined;
+    unstable_examples?: any[] | undefined;
+    renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
+    aggregable?: boolean;
+    availableAggregationFunctions?: string[];
+    groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
+    pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
+    generateData?: (row: any, context: import("..").GridDataGeneratorContext) => any;
+    dataGeneratorUniquenessEnabled?: boolean;
+    hide?: boolean;
+  })[];
+  initialState: {
+    columns: {
+      columnVisibilityModel: import("@mui/x-data-grid").GridColumnVisibilityModel;
+    };
+  };
+  useQuery: (queryOptions: QueryOptions) => {
+    pageInfo: PageInfo;
+    rows: GridRowModel[];
+    isLoading: boolean;
+  };
+};

package/esm/hooks/useQuery.js

@@ -0,0 +1,84 @@
+'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-data-grid/internals';
+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/esm/index.d.ts

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

package/esm/index.js

@@ -0,0 +1,11 @@
+/**
+ * @mui/x-data-grid-generator v8.0.0-beta.0
+ *
+ * @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/esm/package.json

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

package/esm/renderer/index.d.ts

@@ -0,0 +1,16 @@
+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/esm/renderer/index.js

@@ -0,0 +1,16 @@
+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/esm/renderer/renderAvatar.d.ts

@@ -0,0 +1,6 @@
+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/esm/renderer/renderAvatar.js

@@ -0,0 +1,14 @@
+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/esm/renderer/renderCountry.d.ts

@@ -0,0 +1,4 @@
+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/esm/renderer/renderCountry.js

@@ -0,0 +1,57 @@
+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/esm/renderer/renderEditCountry.d.ts

@@ -0,0 +1,4 @@
+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/esm/renderer/renderEditCountry.js

@@ -0,0 +1,80 @@
+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/esm/renderer/renderEditCurrency.d.ts

@@ -0,0 +1,3 @@
+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/esm/renderer/renderEditCurrency.js

@@ -0,0 +1,78 @@
+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/esm/renderer/renderEditIncoterm.d.ts

@@ -0,0 +1,3 @@
+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/esm/renderer/renderEditIncoterm.js

@@ -0,0 +1,75 @@
+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/esm/renderer/renderEditProgress.d.ts

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