@redsift/table 10.3.0-alpha.1 → 10.3.0-alpha.3

package/CONTRIBUTING.md

@@ -58,6 +58,10 @@ The Design System is following a monorepo architecture, providing multiple packa
 
   This package provides dashboard-related components and decorators to make charts and datagrid filterable using [crossfilter](https://crossfilter.github.io/crossfilter/).
 
+- `@redsift/products`
+
+  This package provides ready-to-use implementation of components with a customize style to fit Red Sift's use cases. It is based on all other packages.
+
 - _Deprecated_ `@redsift/design-system-legacy`
 
   This package contains all components prior to the 6.0.0 version. These components are deprecated and contributing to this package is discouraged since it will be removed in the future.

package/index.d.ts

@@ -80,6 +80,7 @@ interface DataGridProps extends Partial<Pick<DataGridProProps, 'rows'>>, Omit<Da
     /** Theme. */
     theme?: Theme;
     onSelectionStatusChange?: (newSelectionStatus: SelectionStatusType) => void;
+    isPreviousData?: boolean;
 }
 type SelectionStatusType = 'page' | 'table' | 'other' | 'none';
 type SelectionStatus = {

package/index.js

@@ -21647,14 +21647,14 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
   }, isOpen && /*#__PURE__*/React__default.createElement(StyledTooltipContent, _extends$2({
     className: classNames(TooltipContent.className, className),
     ref: popoverRef,
-    $theme: theme,
+    $theme: theme
+  }, getFloatingProps(props), {
     style: _objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,
       left: x !== null && x !== void 0 ? x : 0,
       visibility: x == null ? 'hidden' : 'visible'
-    }, style)
-  }, getFloatingProps(props), {
+    }, style),
     $placement: placement
   }), /*#__PURE__*/React__default.createElement("div", {
     ref: arrowRef,
@@ -21687,20 +21687,23 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     getReferenceProps,
     refs,
     tooltipId,
-    triggerClassName
+    triggerClassName,
+    color
   } = useTooltipContext();
   const childrenRef = children.ref;
   const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
   if ( /*#__PURE__*/React__default.isValidElement(children)) {
     var _children$props$child;
-    return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
+    return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
       ref: triggerRef
     }, props), {}, {
       'aria-describedby': tooltipId
     }, children.props), {}, {
-      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : '',
-      className: classNames(children.props.className, triggerClassName)
-    }))));
+      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : ''
+    }))), {}, {
+      className: classNames(children.props.className, triggerClassName),
+      color: color !== null && color !== void 0 ? color : children.props.color
+    }));
   }
   return /*#__PURE__*/React__default.createElement("span", _extends$2({
     ref: triggerRef
@@ -21712,6 +21715,7 @@ TooltipTrigger.displayName = COMPONENT_NAME$4;
 
 function useTooltip(_ref) {
   let {
+    color,
     defaultOpen,
     delay,
     placement,
@@ -21764,13 +21768,14 @@ function useTooltip(_ref) {
   });
   const interactions = useInteractions([hover, focus, dismiss, role]);
   return React__default.useMemo(() => _objectSpread2(_objectSpread2(_objectSpread2({
+    color,
     isOpen,
     handleOpen
   }, interactions), data), {}, {
     arrowRef,
     tooltipId,
     triggerClassName
-  }), [isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
+  }), [color, isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
 }
 
 const ThemeContext = /*#__PURE__*/React__default.createContext(null);
@@ -21788,6 +21793,7 @@ const DEFAULT_PROPS$2 = {
  */
 const BaseTooltip = props => {
   const {
+    color,
     children,
     defaultOpen,
     delay,
@@ -21800,6 +21806,7 @@ const BaseTooltip = props => {
   } = props;
   const theme = useTheme$4 ? useTheme$4(propsTheme) : undefined;
   const tooltip = useTooltip({
+    color,
     defaultOpen,
     delay,
     placement,
@@ -24720,9 +24727,18 @@ const onServerSideSelectionStatusChange = _ref => {
     return;
   }
   if (selectionStatusType === 'page' && isSamePage && isSamePageSize && numberOfSelectedRowsInPage === numberOfSelectableRowsInPage) {
+    setSelectionStatusType('none');
+    selectionStatus.current = {
+      type: 'none',
+      numberOfSelectedRows,
+      numberOfSelectedRowsInPage,
+      page,
+      pageSize
+    };
     setTimeout(() => {
       apiRef.current.selectRows(selectedRowsInPage, false, false);
     }, 0);
+    return;
   }
   if (numberOfSelectedRowsInPage === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage != 0) {
     setSelectionStatusType('page');
@@ -24733,7 +24749,9 @@ const onServerSideSelectionStatusChange = _ref => {
       page,
       pageSize
     };
-  } else if (numberOfSelectedRows > 0) {
+    return;
+  }
+  if (numberOfSelectedRows > 0) {
     setSelectionStatusType('other');
     selectionStatus.current = {
       type: 'other',
@@ -24742,16 +24760,17 @@ const onServerSideSelectionStatusChange = _ref => {
       page,
       pageSize
     };
-  } else {
-    setSelectionStatusType('none');
-    selectionStatus.current = {
-      type: 'none',
-      numberOfSelectedRows,
-      numberOfSelectedRowsInPage,
-      page,
-      pageSize
-    };
+    return;
   }
+  setSelectionStatusType('none');
+  selectionStatus.current = {
+    type: 'none',
+    numberOfSelectedRows,
+    numberOfSelectedRowsInPage,
+    page,
+    pageSize
+  };
+  return;
 };
 
 const getSelectableRowsInTable = (apiRef, isRowSelectable) => {
@@ -24824,7 +24843,7 @@ const ControlledPagination = _ref => {
 };
 
 const _excluded$1 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "selectionStatusType", "setSelectionStatusType", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"],
-  _excluded2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "rowSelectionModel", "onRowSelectionModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "sx", "theme", "paginationMode", "rowCount", "onSelectionStatusChange"];
+  _excluded2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "rowSelectionModel", "onRowSelectionModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "sx", "theme", "paginationMode", "rowCount", "onSelectionStatusChange", "isPreviousData"];
 const COMPONENT_NAME$1 = 'DataGrid';
 const CLASSNAME$1 = 'redsift-datagrid';
 const DEFAULT_PROPS = {
@@ -24910,7 +24929,8 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       paginationMode = 'client',
       rowCount,
-      onSelectionStatusChange: propsOnSelectionStatusChange
+      onSelectionStatusChange: propsOnSelectionStatusChange,
+      isPreviousData
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2);
   const theme = useTheme$4(propsTheme);
@@ -24958,13 +24978,10 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     page: paginationModel.page,
     pageSize: paginationModel.pageSize
   });
-  const onSelectionStatusChange = selectionStatusType => {
+  useEffect(() => {
     if (propsOnSelectionStatusChange) {
       propsOnSelectionStatusChange(selectionStatusType);
     }
-  };
-  useEffect(() => {
-    onSelectionStatusChange(selectionStatusType);
   }, [selectionStatusType]);
 
   // in server-side pagination we want to update the selection status
@@ -24983,6 +25000,14 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       });
     }
   }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
+  useEffect(() => {
+    if (paginationMode === 'server' && selectionStatusType === 'table' && !isPreviousData) {
+      const selectableRowsInPage = getSelectableRowsInTable(apiRef, isRowSelectable);
+      setTimeout(() => {
+        apiRef.current.selectRows(selectableRowsInPage, false, true);
+      }, 0);
+    }
+  }, [isPreviousData]);
   if (!Array.isArray(rows)) {
     return null;
   }