@redsift/table 8.0.7 → 9.0.0-alpha.0

package/CONTRIBUTING.md

@@ -42,6 +42,10 @@ The Design System is following a monorepo architecture, providing multiple packa
 
   This package provides popover components. Popover components are based on [floating-ui](https://floating-ui.com/) and [@floating-ui/react](https://floating-ui.com/docs/react). Toasts are based on [react-toastify](https://fkhadra.github.io/react-toastify).
 
+- `@redsift/pickers`
+
+  This package provides selection components. The Popover part of the Pickers comes from `@redsift/popovers`.
+
 - `@redsift/table`
 
   This package provides datagrid components and features based on [MUI DataGrid](https://mui.com/x/react-data-grid/). Due to the use of advanced features, a [premium license](https://mui.com/x/introduction/licensing/#premium-plan) from MUI is required.
@@ -136,29 +140,23 @@ const DEFAULT_PROPS: Partial<BadgeProps> = {
 /**
  * The Badge component.
  */
-export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef(
-  (props, ref) => {
-    const {
-      // props
-      ...forwardedProps
-    } = props;
-
-    return (
-      <StyledBadge
-        {...forwardedProps}
-        // transient props
-        className={classNames(
-          Badge.className,
-          `${Badge.className}-${variant}`,
-          className
-        )}
-        ref={ref as RefObject<HTMLDivElement>}
-      >
-        // content of the component if needed
-      </StyledBadge>
-    );
-  }
-);
+export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) => {
+  const {
+    // props
+    ...forwardedProps
+  } = props;
+
+  return (
+    <StyledBadge
+      {...forwardedProps}
+      // transient props
+      className={classNames(Badge.className, `${Badge.className}-${variant}`, className)}
+      ref={ref as RefObject<HTMLDivElement>}
+    >
+      // content of the component if needed
+    </StyledBadge>
+  );
+});
 Badge.className = CLASSNAME;
 Badge.defaultProps = DEFAULT_PROPS;
 Badge.displayName = COMPONENT_NAME;

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as _mui_x_data_grid_pro 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 { Comp, IconProps, NotificationsColorPalette, ProductColorPalette, ShieldVariant } from '@redsift/design-system';
 import React, { ReactNode, RefObject, ComponentProps } from 'react';
 
 declare const DETAIL_PANEL_TOGGLE_COL_DEF: _mui_x_data_grid_pro.GridColDef<any, any, any>;
@@ -120,23 +120,19 @@ interface TextCellProps extends ComponentProps<'div'> {
     /** Including Badge Component. */
     badge?: ReactNode;
     /**
-     * Icon path data (`d` property of the `path` SVG element).<br />
-     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
-     * Recommended path data come from mdi/js.<br />
-     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
      */
-    leftIcon?: string;
+    leftIcon?: IconProps['icon'];
     /** Left Icon Color variant. */
-    leftIconColor?: ColorPalette | ProductColorPalette | (string & {});
+    leftIconColor?: NotificationsColorPalette | ProductColorPalette | (string & {});
     /**
-     * Icon path data (`d` property of the `path` SVG element).<br />
-     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
-     * Recommended path data come from mdi/js.<br />
-     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
      */
-    rightIcon?: string;
+    rightIcon?: IconProps['icon'];
     /** Right Icon Color variant. */
-    rightIconColor?: ColorPalette | ProductColorPalette | (string & {});
+    rightIconColor?: NotificationsColorPalette | ProductColorPalette | (string & {});
     /** Shield variant. */
     shieldVariant?: ShieldVariant;
 }

package/index.js

@@ -2,7 +2,7 @@ import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNum
 export { getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
-import { Icon, Flexbox, ColorPalette, ProductColorPalette, Button, Checkbox, Shield } from '@redsift/design-system';
+import { Icon, Flexbox, CtasColorPalette, NotificationsColorPalette, Button, Checkbox, TextField as TextField$2, Shield } from '@redsift/design-system';
 import { mdiSync, mdiFilterVariant, mdiViewColumn, mdiChevronUp, mdiChevronDown, mdiViewHeadline, mdiViewSequential, mdiViewStream, mdiChevronRight, mdiTrayArrowDown } from '@redsift/icons';
 import emStyled from '@emotion/styled';
 import { Global, ThemeContext } from '@emotion/react';
@@ -10,6 +10,7 @@ import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import classNames from 'classnames';
 import styled$3, { css } from 'styled-components';
+import { Popper } from '@mui/material';
 
 // Don't use a spread operator there or it will break the build due to MUI internal components
 const DETAIL_PANEL_TOGGLE_COL_DEF = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
@@ -15167,7 +15168,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
       startIcon
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$3);
-  const color = [...Object.values(ColorPalette), ...Object.values(ProductColorPalette)].includes(propsColor) ? propsColor : 'default';
+  const color = [...Object.values(CtasColorPalette), ...Object.values(NotificationsColorPalette)].includes(propsColor) ? propsColor : 'primary';
   return /*#__PURE__*/React__default.createElement(Button, _extends$1({}, forwardedProps, {
     color: color,
     onClick: onClick,
@@ -15197,6 +15198,34 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 
+const BaseTextField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    label,
+    id,
+    value,
+    onChange,
+    placeholder
+  } = props;
+  return /*#__PURE__*/React__default.createElement(TextField$2, {
+    marginTop: "6px",
+    inputRef: ref,
+    label: label,
+    id: id,
+    value: value,
+    variant: "underline",
+    onChange: (value, name, event) => onChange(event),
+    autoFocus: true,
+    placeholder: placeholder
+  });
+});
+
+const BasePopper = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/React__default.createElement(Popper, _extends$1({}, props, {
+    ref: ref,
+    container: () => document.getElementById('redsift-app-container')
+  }));
+});
+
 const _excluded$1 = ["autoHeight", "className", "filterModel", "hideToolbar", "height", "license", "onFilterModelChange", "rows"];
 const COMPONENT_NAME$1 = 'DataGrid';
 const CLASSNAME$1 = 'redsift-datagrid';
@@ -15246,6 +15275,8 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     components: _objectSpread2(_objectSpread2({
       BaseButton,
       BaseCheckbox,
+      BaseTextField,
+      BasePopper,
       ColumnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnFilteredIcon"
       })),