@redsift/design-system 10.5.0 → 10.6.0

package/index.d.ts

@@ -2109,6 +2109,7 @@ type StyledAppBarProps = AppBarProps & {
     $hasBorder: boolean;
     $isLoaded: boolean;
     $isSidePanelCollapsed: boolean;
+    $isAppFullScreen: boolean;
     $theme: AppBarProps['theme'];
 };
 
@@ -2123,6 +2124,7 @@ declare const AppBar: Comp<AppBarProps, HTMLHeadingElement>;
 declare const AppSidePanelVariant: {
     readonly shrinked: "shrinked";
     readonly standard: "standard";
+    readonly hidden: "hidden";
 };
 type AppSidePanelVariant = ValueOf<typeof AppSidePanelVariant>;
 /**
@@ -2392,11 +2394,15 @@ type AppContainerState = {
     setSidePanelVariant: Dispatch<SetStateAction<AppSidePanelVariant>>;
     /** AppContainer ref. */
     appContainerRef: RefObject<HTMLDivElement>;
+    /** Whether the App takes the entire screen or not. */
+    isFullScreen?: boolean;
 };
 /**
  * Component props.
  */
 interface AppContainerProps extends ComponentProps<'div'> {
+    /** Whether the App takes the entire screen or not. */
+    isFullScreen?: boolean;
     /** The locale to apply to the children. */
     locale?: string;
     /** Product theme to apply to everything within. This overrides the CSS variables automatically. */
@@ -2430,6 +2436,7 @@ interface AppContentProps extends ComponentProps<'main'>, StylingProps, Containe
 type StyledAppContentProps = Omit<AppContentProps, 'product'> & {
     $isLoaded: boolean;
     $isSidePanelCollapsed: boolean;
+    $isAppFullScreen: boolean;
     $theme: AppContentProps['theme'];
 };
 

package/index.js

@@ -5896,22 +5896,34 @@ const StyledAppBar = styled.header`
   display: flex;
   flex-direction: row;
 
-  height: 92px;
-  @media (max-width: 1080px) {
-    height: 72px;
-  }
+  ${_ref2 => {
+  let {
+    $isAppFullScreen
+  } = _ref2;
+  return !$isAppFullScreen ? css`
+          height: 92px;
+          @media (max-width: 1080px) {
+            height: 72px;
+          }
+        ` : css`
+          height: 0;
+          visibility: hidden;
+          @media (max-width: 1080px) {
+            height: 0;
+          }
+        `;
+}}
 
   justify-content: space-between;
   left: 0;
   position: sticky;
   top: 0;
-  z-index: var(--redsift-layout-z-index-header);
 
-  ${_ref2 => {
+  ${_ref3 => {
   let {
     $hasBorder,
     $theme
-  } = _ref2;
+  } = _ref3;
   return $hasBorder ? css`
           border-bottom: 2px solid var(--redsift-color-${$theme}-components-app-bar-border);
         ` : css`
@@ -5919,11 +5931,14 @@ const StyledAppBar = styled.header`
         `;
 }}
 
-  ${_ref3 => {
+  ${_ref4 => {
   let {
-    $isSidePanelCollapsed
-  } = _ref3;
-  return !$isSidePanelCollapsed ? css`
+    $isSidePanelCollapsed,
+    $isAppFullScreen
+  } = _ref4;
+  return $isAppFullScreen ? css`
+          width: calc(100%);
+        ` : !$isSidePanelCollapsed ? css`
           transform: translate(254px);
           width: calc(100% - 254px);
         ` : css`
@@ -5932,12 +5947,12 @@ const StyledAppBar = styled.header`
         `;
 }}
 
-  ${_ref4 => {
+  ${_ref5 => {
   let {
     $isLoaded
-  } = _ref4;
+  } = _ref5;
   return $isLoaded ? css`
-          transition: transform 0.25s ease-out, width 0.25s ease-out;
+          transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out, visibility 0.25s ease-out;
         ` : '';
 }}
 
@@ -5982,10 +5997,10 @@ const StyledAppBar = styled.header`
     font-size: var(--redsift-typography-h1-font-size) !important;
     font-weight: var(--redsift-typography-body-font-weight) !important;
     line-height: var(--redsift-typography-h1-line-height) !important;
-    color: ${_ref5 => {
+    color: ${_ref6 => {
   let {
     $theme
-  } = _ref5;
+  } = _ref6;
   return css`var(--redsift-color-${$theme}-components-app-bar-breadcrumb-default) !important`;
 }};
   }
@@ -6126,7 +6141,8 @@ Heading.displayName = COMPONENT_NAME$L;
  */
 const AppSidePanelVariant = {
   shrinked: 'shrinked',
-  standard: 'standard'
+  standard: 'standard',
+  hidden: 'hidden'
 };
 
 /**
@@ -6181,18 +6197,19 @@ const StyledAppSidePanel = styled.div`
   let {
     $variant
   } = _ref3;
-  return $variant === AppSidePanelVariant.shrinked ? '68px' : '254px';
+  return $variant === AppSidePanelVariant.hidden ? '0' : $variant === AppSidePanelVariant.shrinked ? '68px' : '254px';
 }};
   z-index: var(--redsift-layout-z-index-side-panel);
 
   .redsift-app-side-panel__header {
     box-sizing: border-box;
     transition: padding 300ms ease-out;
-    padding: 18px ${_ref4 => {
+    padding: 18px
+      ${_ref4 => {
   let {
     $variant
   } = _ref4;
-  return $variant === AppSidePanelVariant.shrinked ? '16px' : '24px';
+  return $variant === AppSidePanelVariant.hidden ? '0' : $variant === AppSidePanelVariant.shrinked ? '16px' : '24px';
 }};
     margin-bottom: 16px;
     width: 100%;
@@ -6346,7 +6363,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       logo,
       onOpen,
       theme: propsTheme,
-      variant = AppSidePanelVariant.standard
+      variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$O);
   const {
@@ -7071,7 +7088,7 @@ const StyledAppContainer = styled.div`
 }};
 `;
 
-const _excluded$L = ["children", "className", "locale", "product", "theme"];
+const _excluded$L = ["children", "className", "locale", "product", "theme", "isFullScreen"];
 const COMPONENT_NAME$H = 'AppContainer';
 const CLASSNAME$H = 'redsift-app-container';
 const RadarSvgLinearGradient = () => /*#__PURE__*/React__default.createElement("svg", {
@@ -7126,12 +7143,20 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       locale,
       product,
-      theme: propsTheme
+      theme: propsTheme,
+      isFullScreen = false
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$L);
   const theme = useTheme(propsTheme);
-  const [sidePanelVariant, setSidePanelVariant] = useState(AppSidePanelVariant.standard);
+  const [sidePanelVariant, setSidePanelVariant] = useState(isFullScreen ? AppSidePanelVariant.hidden : AppSidePanelVariant.standard);
   const [breadcrumbs, setBreadcrumbs] = useState();
+  useEffect(() => {
+    if (isFullScreen && sidePanelVariant !== AppSidePanelVariant.hidden) {
+      setSidePanelVariant(AppSidePanelVariant.hidden);
+    } else if (!isFullScreen && sidePanelVariant !== AppSidePanelVariant.standard) {
+      setSidePanelVariant(AppSidePanelVariant.standard);
+    }
+  }, [isFullScreen]);
   const state = {
     collapseSidePanel() {
       setSidePanelVariant(AppSidePanelVariant.shrinked);
@@ -7146,7 +7171,8 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     breadcrumbs,
     sidePanelVariant,
     setSidePanelVariant,
-    appContainerRef: divRef
+    appContainerRef: divRef,
+    isFullScreen
   };
   return /*#__PURE__*/React__default.createElement(StyledAppContainer, _extends$1({}, forwardedProps, {
     id: "redsift-app-container",
@@ -7630,14 +7656,14 @@ const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     top
   } = useBoundingClientRect(navRef, [children]);
-  const [variant, setVariant] = useState(appContainerState ? appContainerState.sidePanelVariant : propsVariant);
+  const [variant, setVariant] = useState(appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden ? SideNavigationMenuBarVariant.shrinked : appContainerState.sidePanelVariant : propsVariant);
   const [currentOpenMenuId, setCurrentOpenMenuId] = useState();
   useEffect(() => {
     setVariant(propsVariant);
   }, [propsVariant]);
   useEffect(() => {
     if (appContainerState && appContainerState.sidePanelVariant && appContainerState.sidePanelVariant !== variant) {
-      setVariant(appContainerState.sidePanelVariant);
+      setVariant(appContainerState.sidePanelVariant === AppSidePanelVariant.hidden ? SideNavigationMenuBarVariant.shrinked : appContainerState.sidePanelVariant);
     }
   }, [appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.sidePanelVariant]);
 
@@ -8069,6 +8095,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     $hasBorder: scroll,
     $isLoaded: isLoaded,
     $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
+    $isAppFullScreen: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false,
     $theme: theme,
     className: classNames(AppBar.className, className),
     ref: ref
@@ -8133,9 +8160,13 @@ const StyledAppContent = styled.main`
 
   ${_ref2 => {
   let {
-    $isSidePanelCollapsed
+    $isSidePanelCollapsed,
+    $isAppFullScreen
   } = _ref2;
-  return !$isSidePanelCollapsed ? css`
+  return $isAppFullScreen ? css`
+          transform: translate(0px);
+          width: calc(100%);
+        ` : !$isSidePanelCollapsed ? css`
           transform: translate(254px);
           width: calc(100% - 254px);
         ` : css`
@@ -8176,6 +8207,7 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(StyledAppContent, _extends$1({}, forwardedProps, {
     $isLoaded: isLoaded,
     $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
+    $isAppFullScreen: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false,
     $theme: theme,
     className: classNames(AppContent.className, className),
     ref: ref