@redsift/table 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/BaseComponents.js

@@ -1,3 +1,3 @@
-export { B as BaseButton, a as BaseCheckbox, b as BaseIcon, c as BasePopper, d as BaseTextField, m as muiIconToDSIcon } from './BaseTextField.js';
-import 'react';
-import '@mui/x-data-grid-pro';
+export { B as BaseButton, a as BaseCheckbox, b as BaseIcon, c as BasePopper, m as muiIconToDSIcon } from './BasePopper.js';
+export { B as BaseTextField } from './BaseTextField.js';
+//# sourceMappingURL=BaseComponents.js.map

package/_internal/BaseTextField.js

@@ -1,15 +1,26 @@
-import React from 'react';
-import { GridSlotsComponent } from '@mui/x-data-grid-pro';
+import React__default, { forwardRef } from 'react';
+import { TextField } from '@redsift/design-system';
 
-declare const BaseButton: React.JSXElementConstructor<any>;
+const BaseTextField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    label,
+    id,
+    value,
+    onChange,
+    placeholder
+  } = props;
+  return /*#__PURE__*/React__default.createElement(TextField, {
+    marginTop: "6px",
+    inputRef: ref,
+    label: label,
+    id: id,
+    value: value,
+    variant: "underline",
+    onChange: (value, name, event) => onChange(event),
+    autoFocus: true,
+    placeholder: placeholder
+  });
+});
 
-declare const BaseCheckbox: React.JSXElementConstructor<any>;
-
-declare const muiIconToDSIcon: Partial<Record<keyof GridSlotsComponent, string>>;
-declare const BaseIcon: React.JSXElementConstructor<any>;
-
-declare const BasePopper: React.JSXElementConstructor<any>;
-
-declare const BaseTextField: React.JSXElementConstructor<any>;
-
-export { BaseButton as B, BaseCheckbox as a, BaseIcon as b, BasePopper as c, BaseTextField as d, muiIconToDSIcon as m };
+export { BaseTextField as B };
+//# sourceMappingURL=BaseTextField.js.map

package/_internal/DataGrid.js

@@ -1,6 +1,2 @@
 export { D as DataGrid } from './DataGrid2.js';
-export { D as DataGridProps, S as SelectionStatus, a as StyledDataGridProps } from './types.js';
-export { GridAlignment, GridColDef, GridColumns, GridFilterItem, GridFilterModel, GridSelectionModel } from '@mui/x-data-grid-pro';
-import '@redsift/design-system';
-import 'react';
-import '@mui/material';
+//# sourceMappingURL=DataGrid.js.map

package/_internal/DataGrid2.js

@@ -1,6 +1,332 @@
-import { Comp } from '@redsift/design-system';
-import { D as DataGridProps } from './types.js';
+import { b as _objectWithoutProperties, a as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { useTheme, ThemeProvider, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite } from '@redsift/design-system';
+import { useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
+import { L as LicenseInfo, G as useControlledDatagridState, T as ThemeProvider$1, J as StyledDataGrid, f as customColumnTypes } from './useControlledDatagridState.js';
+import { T as Toolbar } from './Toolbar2.js';
+import { o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.js';
+import { g as createTheme } from './Portal.js';
+import { B as BaseButton, a as BaseCheckbox, c as BasePopper, b as BaseIcon } from './BasePopper.js';
+import { T as ToolbarWrapper } from './ToolbarWrapper2.js';
 
-declare const DataGrid: Comp<DataGridProps, HTMLDivElement>;
+const _excluded = ["apiRef", "autoHeight", "className", "columnTypes", "components", "componentsProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "onPageChange", "onPageSizeChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "selectionModel", "onSelectionModelChange", "page", "pageSize", "pagination", "paginationPlacement", "paginationProps", "rows", "rowsPerPageOptions", "sx", "theme", "paginationMode", "rowCount"];
+const COMPONENT_NAME = 'DataGrid';
+const CLASSNAME = 'redsift-datagrid';
+const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const datagridRef = ref || useRef();
+  const {
+      apiRef: propsApiRef,
+      autoHeight,
+      className,
+      columnTypes: propsColumnTypes,
+      components,
+      componentsProps,
+      filterModel: propsFilterModel,
+      columnVisibilityModel: propsColumnVisibilityModel,
+      pinnedColumns: propsPinnedColumns,
+      sortModel: propsSortModel,
+      height: propsHeight,
+      hideToolbar,
+      initialState,
+      isRowSelectable,
+      license = process.env.MUI_LICENSE_KEY,
+      onFilterModelChange: propsOnFilterModelChange,
+      onPageChange: propsOnPageChange,
+      onPageSizeChange: propsOnPageSizeChange,
+      onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+      onPinnedColumnsChange: propsOnPinnedColumnsChange,
+      onSortModelChange: propsOnSortModelChange,
+      selectionModel: propsSelectionModel,
+      onSelectionModelChange: propsOnSelectionModelChange,
+      page: propsPage,
+      pageSize: propsPageSize,
+      pagination,
+      paginationPlacement = 'both',
+      paginationProps,
+      rows,
+      rowsPerPageOptions,
+      sx,
+      theme: propsTheme,
+      paginationMode = 'client',
+      rowCount
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const _apiRef = useGridApiRef();
+  const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
+  const RenderedToolbar = components !== null && components !== void 0 && components.Toolbar ? components.Toolbar : Toolbar;
+  LicenseInfo.setLicenseKey(license);
+  const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
+  const {
+    columnVisibilityModel,
+    filterModel,
+    onColumnVisibilityModelChange,
+    onFilterModelChange,
+    onPageChange,
+    onPageSizeChange,
+    onPinnedColumnsChange,
+    onSortModelChange,
+    page,
+    pageSize,
+    pinnedColumns,
+    sortModel
+  } = useControlledDatagridState({
+    initialState,
+    rowsPerPageOptions,
+    propsColumnVisibilityModel,
+    propsFilterModel,
+    propsOnColumnVisibilityModelChange,
+    propsOnFilterModelChange,
+    propsOnPinnedColumnsChange,
+    propsOnSortModelChange,
+    propsPage,
+    propsPageSize,
+    propsPinnedColumns,
+    propsSortModel,
+    propsOnPageChange,
+    propsOnPageSizeChange
+  });
+  const [selectionModel, setSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  useEffect(() => {
+    setSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  }, [propsSelectionModel]);
+  const onSelectionModelChange = (selectionModel, details) => {
+    if (propsOnSelectionModelChange) {
+      propsOnSelectionModelChange(selectionModel, details);
+    } else {
+      setSelectionModel(selectionModel);
+    }
+  };
+  const selectionStatus = useRef({
+    type: 'none',
+    numberOfSelectedRows: 0,
+    numberOfSelectedRowsInPage: 0,
+    page,
+    pageSize
+  });
+
+  // in server-side pagination we want to update the selection status
+  // every time we navigate between pages, resize our page or select something
+  useEffect(() => {
+    if (paginationMode == 'server') {
+      onServerSideSelectionStatusChange(Array.isArray(selectionModel) ? selectionModel : [selectionModel], apiRef, selectionStatus, isRowSelectable, page, pageSize);
+    }
+  }, [selectionModel, page, pageSize]);
+  if (!Array.isArray(rows)) {
+    return null;
+  }
+  const muiTheme = useMemo(() => createTheme({
+    palette: {
+      mode: theme,
+      primary: {
+        main: RedsiftColorBlueN
+      },
+      background: {
+        default: theme === 'dark' ? RedsiftColorNeutralXDarkGrey : RedsiftColorNeutralWhite,
+        paper: theme === 'dark' ? RedsiftColorNeutralXDarkGrey : RedsiftColorNeutralWhite
+      }
+    }
+  }), [theme]);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider$1, {
+    theme: muiTheme
+  }, /*#__PURE__*/React__default.createElement(StyledDataGrid, {
+    ref: datagridRef,
+    className: classNames(DataGrid.className, className),
+    $height: height
+  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends({}, forwardedProps, {
+    rowCount: rowCount,
+    apiRef: apiRef,
+    autoHeight: autoHeight,
+    checkboxSelectionVisibleOnly: Boolean(pagination),
+    columnTypes: _objectSpread2(_objectSpread2({}, customColumnTypes), propsColumnTypes),
+    components: _objectSpread2(_objectSpread2({
+      BaseButton,
+      BaseCheckbox,
+      // BaseTextField,
+      BasePopper,
+      ColumnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "ColumnFilteredIcon"
+      })),
+      ColumnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "ColumnSelectorIcon"
+      })),
+      ColumnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "ColumnSortedAscendingIcon"
+      })),
+      ColumnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "ColumnSortedDescendingIcon"
+      })),
+      DensityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "DensityCompactIcon"
+      })),
+      DensityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "DensityStandardIcon"
+      })),
+      DensityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "DensityComfortableIcon"
+      })),
+      DetailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "DetailPanelCollapseIcon"
+      })),
+      DetailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "DetailPanelExpandIcon"
+      })),
+      ExportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "ExportIcon"
+      })),
+      OpenFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({
+        displayName: "OpenFilterButtonIcon"
+      }, props))
+    }, components), {}, {
+      Toolbar: ToolbarWrapper,
+      Pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
+        displaySelection: false,
+        displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+        displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+        selectionStatus: selectionStatus.current,
+        page: page,
+        onPageChange: onPageChange,
+        pageSize: pageSize,
+        onPageSizeChange: onPageSizeChange,
+        rowsPerPageOptions: rowsPerPageOptions,
+        paginationProps: paginationProps,
+        paginationMode: paginationMode,
+        rowCount: rowCount
+      })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends({}, props, {
+        displaySelection: false,
+        displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+        displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+        selectionStatus: selectionStatus.current,
+        apiRef: apiRef,
+        isRowSelectable: isRowSelectable,
+        page: page,
+        onPageChange: onPageChange,
+        pageSize: pageSize,
+        onPageSizeChange: onPageSizeChange,
+        rowsPerPageOptions: rowsPerPageOptions,
+        paginationProps: paginationProps,
+        paginationMode: paginationMode
+      })) : null
+    }),
+    componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
+      toolbar: _objectSpread2({
+        hideToolbar,
+        RenderedToolbar,
+        filterModel,
+        onFilterModelChange,
+        pagination,
+        paginationPlacement,
+        selectionStatus,
+        apiRef,
+        isRowSelectable,
+        page,
+        onPageChange,
+        pageSize,
+        onPageSizeChange,
+        rowsPerPageOptions,
+        paginationProps,
+        paginationMode,
+        rowCount
+      }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
+    }),
+    filterModel: filterModel,
+    columnVisibilityModel: columnVisibilityModel,
+    pinnedColumns: pinnedColumns,
+    sortModel: sortModel,
+    initialState: initialState,
+    isRowSelectable: isRowSelectable,
+    onFilterModelChange: onFilterModelChange,
+    onColumnVisibilityModelChange: onColumnVisibilityModelChange,
+    onPinnedColumnsChange: onPinnedColumnsChange,
+    onSortModelChange: onSortModelChange,
+    pagination: pagination,
+    paginationMode: paginationMode,
+    keepNonExistentRowsSelected: paginationMode == 'server',
+    rows: rows,
+    rowsPerPageOptions: rowsPerPageOptions,
+    page: page,
+    onPageChange: onPageChange,
+    pageSize: pageSize,
+    onPageSizeChange: onPageSizeChange,
+    selectionModel: selectionModel,
+    onSelectionModelChange: (newSelectionModel, details) => {
+      if (pagination && paginationMode != 'server') {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
+          let {
+            model
+          } = _ref;
+          return isRowSelectable({
+            row: model
+          });
+        }).map(_ref2 => {
+          let {
+            id
+          } = _ref2;
+          return id;
+        }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInPage = selectableRowsInPage.length;
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
+          let {
+            model
+          } = _ref3;
+          return isRowSelectable({
+            row: model
+          });
+        }).map(_ref4 => {
+          let {
+            id
+          } = _ref4;
+          return id;
+        }) : gridFilteredSortedRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInTable = selectableRowsInTable.length;
+        const numberOfSelectedRows = newSelectionModel.length;
+        if (selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatus.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
+          setTimeout(() => {
+            apiRef.current.selectRows([], true, true);
+          }, 0);
+        }
+        if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+          selectionStatus.current = {
+            type: 'page',
+            numberOfSelectedRows
+          };
+        } else if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+          selectionStatus.current = {
+            type: 'table',
+            numberOfSelectedRows
+          };
+        } else if (numberOfSelectedRows > 0) {
+          selectionStatus.current = {
+            type: 'other',
+            numberOfSelectedRows
+          };
+        } else {
+          selectionStatus.current = {
+            type: 'none',
+            numberOfSelectedRows
+          };
+        }
+      }
+      onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel, details);
+    },
+    sx: _objectSpread2(_objectSpread2({}, sx), {}, {
+      '.MuiDataGrid-columnHeaders': {
+        flexDirection: 'column',
+        alignItems: 'normal'
+      },
+      '.MuiDataGrid-selectedRowCount': {
+        margin: 'none'
+      }
+    })
+  })))));
+});
+DataGrid.className = CLASSNAME;
+DataGrid.displayName = COMPONENT_NAME;
 
 export { DataGrid as D };
+//# sourceMappingURL=DataGrid2.js.map

package/_internal/GridToolbarFilterSemanticField.js

@@ -1,5 +1,2 @@
 export { D as DEFAULT_OPERATORS, G as GridToolbarFilterSemanticField } from './GridToolbarFilterSemanticField2.js';
-export { C as CompletionResponse, F as FilterConfig, G as GridToolbarFilterSemanticFieldProps } from './types2.js';
-import '@redsift/design-system';
-import '@mui/x-data-grid-pro';
-import 'react';
+//# sourceMappingURL=GridToolbarFilterSemanticField.js.map