@redsift/products 11.11.0-muiv5 → 12.0.0-muiv6

package/CONTRIBUTING.md

@@ -62,10 +62,6 @@ The Design System is following a monorepo architecture, providing multiple packa
 
   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.
-
 Please make sure to work inside the correct package when making contribution.
 
 If you need something inside more than one package, do not duplicate the code. Place it inside one package, export it from this package and import it inside the others.
@@ -410,8 +406,8 @@ yarn build:charts
 yarn build:dashboard
 yarn build:design-system
 yarn build:icons
-yarn build:legacy
 yarn build:table
+yarn build:products
 ```
 
 ## Publishing a release

package/_internal/RadarSimpleDialog.js

@@ -1,7 +1,7 @@
-import { a as _objectWithoutProperties, _ as _extends, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import { b as _objectSpread2, a as _objectWithoutProperties, _ as _extends } from './_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import React__default, { useLayoutEffect, useEffect, useRef, forwardRef, useContext, useState, useCallback } from 'react';
-import { baseContainer, Theme, useBoundingClientRect, baseStyling, baseFlexbox, useId as useId$1, Skeleton, Heading, Icon, AppContainerContext, useTheme, useMessageFormatter, partitionComponents, isComponent, IconButton, ThemeProvider, Flexbox } from '@redsift/design-system';
+import { baseContainer, Theme, getContainerStylingTransientProps, useBoundingClientRect, baseStyling, baseFlexbox, getStylingTransientProps, getFlexLayoutTransientProps, useId as useId$1, Skeleton, Heading, Icon, AppContainerContext, useTheme, useMessageFormatter, partitionComponents, isComponent, IconButton, ThemeProvider, Flexbox } from '@redsift/design-system';
 import styled, { css } from 'styled-components';
 import { mdiClose, rsiRedSiftHorizontal } from '@redsift/icons';
 import * as ReactDOM from 'react-dom';
@@ -6189,7 +6189,7 @@ const StyledDialogContentActions = styled.div`
   }
 `;
 
-const _excluded$5 = ["children", "className", "flexDirection"];
+const _excluded$5 = ["children", "className"];
 const COMPONENT_NAME$5 = 'DialogContentActions';
 const CLASSNAME$5 = 'redsift-dialog-content-actions';
 
@@ -6197,19 +6197,23 @@ const CLASSNAME$5 = 'redsift-dialog-content-actions';
  * The DialogContentActions component.
  */
 const DialogContentActions = /*#__PURE__*/forwardRef((props, ref) => {
+  const propsWithDefaults = _objectSpread2({
+    flexDirection: 'row'
+  }, props);
+  const {
+    transientProps,
+    otherProps
+  } = getContainerStylingTransientProps(propsWithDefaults);
   const {
       children,
-      className,
-      flexDirection = 'row'
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+      className
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$5);
   const {
     actionsRef,
     initialFocus
   } = useDialogContext();
-  return /*#__PURE__*/React__default.createElement(StyledDialogContentActions, _extends({
-    flexDirection: flexDirection
-  }, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledDialogContentActions, _extends({}, forwardedProps, transientProps, {
     className: classNames(DialogContentActions.className, className),
     ref: useMergeRefs([ref, actionsRef]),
     tabIndex: initialFocus === 'actions' ? -1 : undefined
@@ -6225,15 +6229,12 @@ const StyledDialogContentBody = styled.div`
   ${baseContainer}
 
   overflow-y: auto;
-  ${_ref => {
+  max-height: ${_ref => {
   let {
-    $marginTop,
-    $marginBottom
+    $maxHeight
   } = _ref;
-  return css`
-    max-height: calc(100vh - ${$marginTop + $marginBottom}px);
-  `;
-}}
+  return $maxHeight;
+}};
 
   font-family: var(--redsift-typography-body-font-family);
   font-size: var(--redsift-typography-body-font-size);
@@ -6286,11 +6287,15 @@ const CLASSNAME$4 = 'redsift-dialog-content-body';
  * The DialogContentBody component.
  */
 const DialogContentBody = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getContainerStylingTransientProps(props);
   const {
       children,
       className
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$4);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$4);
   const {
     actionsRef,
     bodyRef,
@@ -6306,12 +6311,16 @@ const DialogContentBody = /*#__PURE__*/forwardRef((props, ref) => {
   } = useBoundingClientRect(actionsRef, [children, actionsRef]);
 
   /* istanbul ignore next */
-  return /*#__PURE__*/React__default.createElement(StyledDialogContentBody, _extends({}, forwardedProps, {
+  const marginTop = Math.max(headerHeight, hasCloseButton ? 40 : 0) + 32;
+  const marginBottom = (actionsHeight === 0 ? 0 : actionsHeight + 16) + 32;
+  const maxHeight = `calc(100vh - ${marginTop + marginBottom}px)`;
+  return /*#__PURE__*/React__default.createElement(StyledDialogContentBody, _extends({}, forwardedProps, transientProps, {
     className: classNames(DialogContentBody.className, className),
     ref: useMergeRefs([ref, bodyRef]),
     tabIndex: initialFocus === 'body' ? -1 : undefined,
-    $marginTop: Math.max(headerHeight, hasCloseButton ? 40 : 0) + 32,
-    $marginBottom: (actionsHeight === 0 ? 0 : actionsHeight + 16) + 32
+    $marginTop: `${marginTop}px`,
+    $marginBottom: `${marginBottom}px`,
+    $maxHeight: maxHeight
   }), children);
 });
 DialogContentBody.className = CLASSNAME$4;
@@ -6351,6 +6360,18 @@ const CLASSNAME$3 = 'redsift-dialog-content-header';
  * The DialogContentHeader component.
  */
 const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const propsWithDefaults = _objectSpread2({
+    flexDirection: 'column'
+  }, props);
+  const {
+    transientProps: stylingTransientProps,
+    otherProps: propsWithoutStyling
+  } = getStylingTransientProps(propsWithDefaults);
+  const {
+    transientProps: flexTransientProps,
+    otherProps
+  } = getFlexLayoutTransientProps(propsWithoutStyling);
+  const transientProps = _objectSpread2(_objectSpread2({}, stylingTransientProps), flexTransientProps);
   const {
       children,
       className,
@@ -6361,8 +6382,8 @@ const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       subheader,
       theme
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$3);
   const {
     setLabelId,
     setDescriptionId,
@@ -6385,7 +6406,7 @@ const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
     setDescriptionId(descriptionId);
     return () => setDescriptionId(undefined);
   }, [descriptionId, setDescriptionId]);
-  return /*#__PURE__*/React__default.createElement(StyledDialogContentHeader, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledDialogContentHeader, _extends({}, forwardedProps, transientProps, {
     className: classNames(DialogContentHeader.className, className),
     ref: useMergeRefs([ref, headerRef]),
     tabIndex: initialFocus === 'header' ? -1 : undefined