@redsift/table 8.0.0-alpha.0 → 8.0.0-alpha.1

package/index.d.ts

@@ -1,11 +1,22 @@
 import * as _mui_x_data_grid_pro from '@mui/x-data-grid-pro';
-import { GridFilterItem, GridCellParams, GridFilterInputMultipleValue, GridFilterOperator, DataGridProProps, GridToolbarExportProps, GridToolbarFilterButtonProps, GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid-pro';
-export { GridAlignment, GridColDef, GridColumns, GridFilterItem, GridFilterModel, GridSelectionModel, getGridBooleanOperators, getGridDateOperators, getGridNumericOperators, getGridSingleSelectOperators, getGridStringOperators } from '@mui/x-data-grid-pro';
+import { GridFilterItem, GridCellParams, GridFilterOperator, GridFilterInputMultipleValue, DataGridProProps, GridToolbarExportProps, GridToolbarFilterButtonProps, GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid-pro';
+export { GridAlignment, GridColDef, GridColumns, GridFilterItem, GridFilterModel, GridSelectionModel, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import { Comp, ColorPalette, ProductColorPalette, ShieldVariant } from '@redsift/design-system';
-import { JSXElementConstructor, RefObject, ComponentProps, ReactNode } from 'react';
+import React, { ReactNode, RefObject, ComponentProps } from 'react';
 
 declare const DETAIL_PANEL_TOGGLE_COL_DEF: _mui_x_data_grid_pro.GridColDef<any, any, any>;
 
+declare const IS_BETWEEN: {
+    label: string;
+    value: string;
+    getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams) => boolean) | null;
+    InputComponent: (props: any) => JSX.Element;
+};
+
+declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any>[];
+
+declare const getGridStringOperators: () => GridFilterOperator<any, number | string | null, any>[];
+
 declare const CONTAINS_ANY_OF: {
     label: string;
     value: string;
@@ -20,13 +31,18 @@ declare const ENDS_WITH_ANY_OF: {
     InputComponent: typeof GridFilterInputMultipleValue;
 };
 
-declare const IS_ANY_OF: _mui_x_data_grid_pro.GridFilterOperator<any, string | number | null, any>;
+declare const IS_ANY_OF: {
+    label: string;
+    value: string;
+    getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams) => boolean) | null;
+    InputComponent: typeof GridFilterInputMultipleValue;
+};
 
-declare const IS_BETWEEN: {
+declare const IS_NOT_ANY_OF: {
     label: string;
     value: string;
     getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams) => boolean) | null;
-    InputComponent: (props: any) => JSX.Element;
+    InputComponent: typeof GridFilterInputMultipleValue;
 };
 
 declare const STARTS_WITH_ANY_OF: {
@@ -38,13 +54,13 @@ declare const STARTS_WITH_ANY_OF: {
 
 declare const getGridStringArrayOperators: () => GridFilterOperator<any, number | string | null, any>[];
 
-interface DataGridProps extends DataGridProProps {
+interface DataGridProps extends Partial<Pick<DataGridProProps, 'rows'>>, Omit<DataGridProProps, 'rows'> {
     /** License key for MUI Datagrid Pro. */
     license?: string;
     /** Height. A default one is set to prevent rendering all rows. */
     height?: string;
     /** Toolbar. A default one is provided but every button from this default Toolbar can be customized and the entire Toolbar can be replaced. */
-    toolbar?: JSXElementConstructor<any>;
+    toolbar?: ReactNode;
     /** Whether the Toolbar is displayed or not. */
     hideToolbar?: boolean;
 }
@@ -97,7 +113,8 @@ declare global {
         }
     }
 }
-declare const Toolbar: Comp<ToolbarProps, HTMLDivElement>;
+/** ------ */
+declare const Toolbar: React.FC<ToolbarProps>;
 
 interface TextCellProps extends ComponentProps<'div'> {
     /** Including Badge Component. */
@@ -129,4 +146,4 @@ interface TextCellProps extends ComponentProps<'div'> {
  */
 declare const TextCell: Comp<TextCellProps, HTMLDivElement>;
 
-export { CONTAINS_ANY_OF, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, DataGridProps, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_BETWEEN, STARTS_WITH_ANY_OF, StyledDataGridProps, TextCell, Toolbar, getGridStringArrayOperators };
+export { CONTAINS_ANY_OF, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, DataGridProps, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF, StyledDataGridProps, TextCell, Toolbar, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators };

package/index.js

@@ -1,8 +1,8 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, GridFilterInputMultipleValue, getGridStringOperators, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
-export { getGridBooleanOperators, getGridDateOperators, getGridNumericOperators, getGridSingleSelectOperators, getGridStringOperators } from '@mui/x-data-grid-pro';
+import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
+export { getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import * as React from 'react';
-import React__default, { forwardRef, useRef } from 'react';
-import { Icon, Shield } from '@redsift/design-system';
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
+import { Icon, Flexbox, Button, Checkbox, Shield } from '@redsift/design-system';
 import { mdiSync, mdiChevronUp, mdiChevronDown, mdiChevronRight, mdiFilterVariant } from '@redsift/icons';
 import emStyled from '@emotion/styled';
 import { Global, ThemeContext } from '@emotion/react';
@@ -15,60 +15,6 @@ import styled$3, { css } from 'styled-components';
 const DETAIL_PANEL_TOGGLE_COL_DEF = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
 DETAIL_PANEL_TOGGLE_COL_DEF.type = 'actions';
 
-const containsAnyOfOperator = {
-  label: 'contains any of',
-  value: 'containsAnyOf',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
-      }
-      let match = false;
-      filterItem.value.forEach(filteredValue => {
-        if (params.value.indexOf(filteredValue) !== -1) {
-          match = true;
-        }
-      });
-      return match;
-    };
-  },
-  InputComponent: GridFilterInputMultipleValue
-};
-const CONTAINS_ANY_OF = containsAnyOfOperator;
-
-const endsWithAnyOfOperator = {
-  label: 'ends with any of',
-  value: 'endsWithAnyOf',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
-      }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
-      let match = false;
-      filterItem.value.forEach(filteredValue => {
-        paramValues.forEach(paramValue => {
-          if (paramValue.endsWith(filteredValue)) {
-            match = true;
-          }
-        });
-      });
-      return match;
-    };
-  },
-  InputComponent: GridFilterInputMultipleValue
-};
-const ENDS_WITH_ANY_OF = endsWithAnyOfOperator;
-
-const isAnyOfOperator = getGridStringOperators().filter(operator => operator.value === 'isAnyOf')[0];
-const IS_ANY_OF = isAnyOfOperator;
-
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -12442,7 +12388,7 @@ function getPopoverUtilityClass(slot) {
 generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
 const _excluded$8 = ["onEntering"],
-  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
+  _excluded2$2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
 function getOffsetTop(rect, vertical) {
   let offset = 0;
   if (typeof vertical === 'number') {
@@ -12535,7 +12481,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       } = {}
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose$2(props.TransitionProps, _excluded$8),
-    other = _objectWithoutPropertiesLoose$2(props, _excluded2$1);
+    other = _objectWithoutPropertiesLoose$2(props, _excluded2$2);
   const paperRef = React.useRef();
   const handlePaperRef = useForkRef(paperRef, PaperProps.ref);
   const ownerState = _extends$1({}, props, {
@@ -12896,7 +12842,7 @@ function getMenuUtilityClass(slot) {
 generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
 
 const _excluded$7 = ["onEntering"],
-  _excluded2 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
+  _excluded2$1 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
 const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'
@@ -12963,7 +12909,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       variant = 'selectedMenu'
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose$2(props.TransitionProps, _excluded$7),
-    other = _objectWithoutPropertiesLoose$2(props, _excluded2);
+    other = _objectWithoutPropertiesLoose$2(props, _excluded2$1);
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
   const ownerState = _extends$1({}, props, {
@@ -14896,13 +14842,16 @@ const isBetweenOperator = {
   label: 'is between',
   value: 'isBetween',
   getApplyFilterFn: filterItem => {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+      return null;
+    }
     if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
       return null;
     }
     if (filterItem.value[0] == null || filterItem.value[1] == null) {
       return null;
     }
-    if (Number.isNaN(filterItem.value[0]) || Number.isNaN(filterItem.value[1])) {
+    if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
       return null;
     }
     return params => {
@@ -14913,6 +14862,108 @@ const isBetweenOperator = {
 };
 const IS_BETWEEN = isBetweenOperator;
 
+const getGridNumericOperators = () => [...getGridNumericOperators$1(), IS_BETWEEN];
+
+const containsAnyOfOperator = {
+  label: 'contains any of',
+  value: 'containsAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        if (paramValues.indexOf(filteredValue) !== -1) {
+          match = true;
+        }
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const CONTAINS_ANY_OF = containsAnyOfOperator;
+
+const endsWithAnyOfOperator = {
+  label: 'ends with any of',
+  value: 'endsWithAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        paramValues.forEach(paramValue => {
+          if (paramValue.endsWith(filteredValue)) {
+            match = true;
+          }
+        });
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const ENDS_WITH_ANY_OF = endsWithAnyOfOperator;
+
+const isAnyOfOperator = {
+  label: 'is any of',
+  value: 'isAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      for (const paramValue of paramValues) {
+        if (filterItem.value.includes(paramValue)) {
+          return true;
+        }
+      }
+      return false;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const IS_ANY_OF = isAnyOfOperator;
+
+const isNotAnyOfOperator = {
+  label: 'is not any of',
+  value: 'isNotAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      for (const paramValue of paramValues) {
+        if (filterItem.value.includes(paramValue)) {
+          return false;
+        }
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const IS_NOT_ANY_OF = isNotAnyOfOperator;
+
 const startsWithAnyOfOperator = {
   label: 'starts with any of',
   value: 'startsWithAnyOf',
@@ -14940,7 +14991,9 @@ const startsWithAnyOfOperator = {
 };
 const STARTS_WITH_ANY_OF = startsWithAnyOfOperator;
 
-const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, STARTS_WITH_ANY_OF];
+const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF];
+
+const getGridStringOperators = () => [...getGridStringOperators$1(), ...getGridStringArrayOperators()];
 
 /* eslint-disable */
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
@@ -15048,61 +15101,31 @@ const GridToolbarWrapper = styled$3.div`
       }
     }
   }
-
-  .MuiDataGrid-toolbarContainer {
-    font-family: var(--redsift-typography-datagrid-font-family);
-
-    button {
-      font-family: var(--redsift-typography-datagrid-font-family);
-      font-size: var(--redsift-typography-button-large-font-size);
-      line-height: var(--redsift-typography-button-large-line-height);
-      color: var(--redsift-color-default-primary);
-      border-radius: 0px;
-      padding: 6px 8px;
-
-      .MuiButton-startIcon {
-        margin-left: 0px;
-
-        svg {
-          color: var(--redsift-color-default-primary);
-        }
-      }
-    }
-
-    button:hover {
-      background: var(--redsift-color-primary-outlined-hover);
-    }
-  }
 `;
 
+/**
+ * Temporary workaround for a type mismatch between react 17 and 18
+ * https://github.com/mui/material-ui/issues/35287#issuecomment-1337250566
+ */
+
 /** ------ */
 
-const COMPONENT_NAME$2 = 'Toolbar';
-const CLASSNAME$2 = 'redsift-data-grid';
-const DEFAULT_PROPS$1 = {
-  hasExportButton: true,
-  hasFilterButton: true,
-  hasColumnsButton: true,
-  hasDensityButton: true
-};
-const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
+const Toolbar = props => {
   const {
-    hasExportButton,
+    hasExportButton = true,
     exportButtonProps,
     exportButtonRef,
-    hasFilterButton,
+    hasFilterButton = true,
     filterButtonProps,
     filterButtonRef,
-    hasColumnsButton,
+    hasColumnsButton = true,
     columnsButtonProps,
     columnsButtonRef,
-    hasDensityButton,
+    hasDensityButton = true,
     densityButtonProps,
     densityButtonRef
   } = props;
-  return /*#__PURE__*/React__default.createElement(GridToolbarWrapper, {
-    ref: ref
-  }, /*#__PURE__*/React__default.createElement(GridToolbarContainer, null, hasFilterButton ? /*#__PURE__*/React__default.createElement(GridToolbarFilterButton, _extends$3({}, filterButtonProps, {
+  return /*#__PURE__*/React__default.createElement(GridToolbarWrapper, null, /*#__PURE__*/React__default.createElement(GridToolbarContainer, null, /*#__PURE__*/React__default.createElement(Flexbox, null, hasFilterButton ? /*#__PURE__*/React__default.createElement(GridToolbarFilterButton, _extends$3({}, filterButtonProps, {
     ref: filterButtonRef
   })) : null, hasColumnsButton ? /*#__PURE__*/React__default.createElement(GridToolbarColumnsButton, _extends$3({}, columnsButtonProps, {
     ref: columnsButtonRef
@@ -15124,15 +15147,14 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, exportButtonProps, {
     ref: exportButtonRef
-  })) : null));
-});
-Toolbar.className = CLASSNAME$2;
-Toolbar.defaultProps = DEFAULT_PROPS$1;
-Toolbar.displayName = COMPONENT_NAME$2;
+  })) : null)));
+};
 
-const _excluded$1 = ["className", "height", "hideToolbar", "license", "toolbar"];
+const _excluded$1 = ["className", "filterModel", "hideToolbar", "height", "license", "onFilterModelChange", "rows"],
+  _excluded2 = ["onClick"],
+  _excluded3 = ["checked", "indeterminate", "disabled", "onChange"];
 const COMPONENT_NAME$1 = 'DataGrid';
-const CLASSNAME$1 = 'redsift-data-grid';
+const CLASSNAME$1 = 'redsift-datagrid';
 const DEFAULT_PROPS = {
   license: process.env.MUI_LICENSE_KEY,
   height: '500px'
@@ -15158,30 +15180,84 @@ const ColumnFilteredIcon = () => /*#__PURE__*/React__default.createElement(Icon,
   size: "small"
 });
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  var _props$componentsProp;
   const datagridRef = ref || useRef();
   const {
       className,
-      height,
+      filterModel: propsFilterModel,
       hideToolbar,
+      height,
       license,
-      toolbar = Toolbar
+      onFilterModelChange: propsOnFilterModelChange,
+      rows
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1);
   LicenseInfo.setLicenseKey(license);
+  const [filterModel, setFilterModel] = useState(propsFilterModel);
+  useEffect(() => {
+    setFilterModel(propsFilterModel);
+  }, [propsFilterModel]);
+  const onFilterModelChange = (model, details) => {
+    if (propsOnFilterModelChange) {
+      propsOnFilterModelChange(model, details);
+    } else {
+      setFilterModel(model);
+    }
+  };
+  if (!Array.isArray(rows)) {
+    return null;
+  }
   return /*#__PURE__*/React__default.createElement(StyledDataGrid, {
     ref: datagridRef,
     className: classNames(DataGrid.className, className),
     $height: height
   }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$3({}, forwardedProps, {
+    rows: rows,
+    filterModel: filterModel,
+    onFilterModelChange: onFilterModelChange,
     components: _objectSpread2(_objectSpread2({
+      BaseButton: /*#__PURE__*/forwardRef((props, ref) => {
+        const {
+            onClick
+          } = props,
+          forwardedProps = _objectWithoutProperties(props, _excluded2);
+        return /*#__PURE__*/React__default.createElement(Button, _extends$3({}, forwardedProps, {
+          onPress: onClick,
+          ref: ref,
+          variant: "unstyled"
+        }));
+      }),
+      BaseCheckbox: /*#__PURE__*/forwardRef((props, ref) => {
+        const {
+            checked,
+            indeterminate,
+            disabled,
+            onChange
+          } = props,
+          forwardedProps = _objectWithoutProperties(props, _excluded3);
+        return /*#__PURE__*/React__default.createElement(Checkbox, _extends$3({}, forwardedProps, forwardedProps.inputProps, {
+          isSelected: checked && !indeterminate,
+          isColored: false,
+          isDisabled: disabled,
+          isIndeterminate: indeterminate,
+          ref: ref,
+          onChange: (isChecked, value, name, event) => onChange(event)
+        }));
+      }),
       ColumnFilteredIcon,
       ColumnSortedAscendingIcon,
       ColumnSortedDescendingIcon,
       DetailPanelExpandIcon,
       DetailPanelCollapseIcon,
       OpenFilterButtonIcon: ColumnFilteredIcon
-    }, props.components), !hideToolbar && {
-      Toolbar: toolbar
+    }, !hideToolbar && {
+      Toolbar
+    }), props.components),
+    componentsProps: _objectSpread2(_objectSpread2({}, props.componentsProps), {}, {
+      toolbar: _objectSpread2(_objectSpread2({}, (_props$componentsProp = props.componentsProps) === null || _props$componentsProp === void 0 ? void 0 : _props$componentsProp.toolbar), {}, {
+        filterModel,
+        onFilterModelChange
+      })
     })
   })));
 });
@@ -15247,5 +15323,5 @@ const TextCell = /*#__PURE__*/forwardRef((props, ref) => {
 TextCell.className = CLASSNAME;
 TextCell.displayName = COMPONENT_NAME;
 
-export { CONTAINS_ANY_OF, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_BETWEEN, STARTS_WITH_ANY_OF, TextCell, Toolbar, getGridStringArrayOperators };
+export { CONTAINS_ANY_OF, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF, TextCell, Toolbar, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators };
 //# sourceMappingURL=index.js.map