@redsift/design-system 12.5.9-muiv7 → 12.5.9

package/_internal/AppBar.js

@@ -1,5 +1,5 @@
 import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useState, useEffect, useContext } from 'react';
+import React__default, { forwardRef, useContext, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { mdiMenuOpen } from '@redsift/icons';
 import { A as AppContainerContext } from './context2.js';
@@ -72,9 +72,6 @@ const StyledAppBar = styled.header`
 }}
 
   justify-content: space-between;
-  left: 0;
-  position: sticky;
-  top: 0;
 
   ${_ref3 => {
   let {
@@ -195,7 +192,7 @@ const CLASSNAME = 'redsift-app-bar';
  * ]} />
  */
 const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
-  var _breadcrumbs$, _appContainerState$pr;
+  var _appContainerState$sc, _breadcrumbs$, _appContainerState$pr;
   const {
       breadcrumbs,
       children,
@@ -207,17 +204,26 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       title: propsTitle
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
-  const [scroll, setScroll] = useState(false);
-  useEffect(() => {
-    window.addEventListener('scroll', () => {
-      setScroll(window.scrollY > 8);
-    });
-  }, []);
   const {
     isLoaded
   } = useIsLoaded();
   const appContainerState = useContext(AppContainerContext);
   const theme = useTheme(propsTheme);
+  const scrollNode = (_appContainerState$sc = appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.scrollContainer) !== null && _appContainerState$sc !== void 0 ? _appContainerState$sc : null;
+  const [scroll, setScroll] = useState(false);
+  useEffect(() => {
+    if (!scrollNode) {
+      // No scroll container (e.g. AppContent unmounted) — clear any stale border state.
+      setScroll(false);
+      return;
+    }
+    const onScroll = () => setScroll(scrollNode.scrollTop > 8);
+    onScroll(); // sync initial state (e.g. remount at a scrolled position)
+    scrollNode.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+    return () => scrollNode.removeEventListener('scroll', onScroll);
+  }, [scrollNode]);
   const format = useMessageFormatter(intlMessages);
   return /*#__PURE__*/React__default.createElement(StyledAppBar, _extends({}, forwardedProps, {
     $hasBorder: scroll,

package/_internal/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppBar.js","sources":["../../src/components/app-bar/intl/index.ts","../../src/components/app-bar/styles.ts","../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n  align-content: center;\n  align-items: center;\n\n  ${({ $theme }) => css`\n    background-color: var(--redsift-color-${$theme}-components-app-bar-background);\n    color: var(--redsift-color-${$theme}-components-text);\n  `};\n\n  display: flex;\n  flex-direction: row;\n  z-index: var(--redsift-layout-z-index-header);\n\n  ${({ $isAppFullScreen }) =>\n    !$isAppFullScreen\n      ? css`\n          height: 92px;\n          @media (max-width: 1080px) {\n            height: 72px;\n          }\n        `\n      : css`\n          height: 0;\n          visibility: hidden;\n          @media (max-width: 1080px) {\n            height: 0;\n          }\n        `}\n\n  justify-content: space-between;\n  left: 0;\n  position: sticky;\n  top: 0;\n\n  ${({ $hasBorder, $theme }) =>\n    $hasBorder\n      ? css`\n          border-bottom: 2px solid var(--redsift-color-${$theme}-components-app-bar-border);\n        `\n      : css`\n          border-bottom: none;\n        `}\n\n  ${({ $isSidePanelCollapsed, $isAppFullScreen }) =>\n    $isAppFullScreen\n      ? css`\n          width: calc(100%);\n        `\n      : !$isSidePanelCollapsed\n      ? css`\n          transform: translate(254px);\n          width: calc(100% - 254px);\n        `\n      : css`\n          transform: translate(64px);\n          width: calc(100% - 64px);\n        `}\n\n  ${({ $isLoaded }) =>\n    $isLoaded\n      ? css`\n          transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out, visibility 0.25s ease-out;\n        `\n      : ''}\n\n  h1 {\n    margin: unset;\n    padding: unset;\n  }\n\n  .redsift-icon-button {\n    > span,\n    > span > svg {\n      width: 30px;\n      height: 30px;\n    }\n  }\n\n  .redsift-app-bar__left {\n    align-content: center;\n    align-items: center;\n    display: inline-flex;\n    flex-direction: row;\n    gap: 8px;\n    justify-content: center;\n    margin-left: 19px;\n  }\n\n  .redsift-app-bar-left__expand-button,\n  .redsift-app-bar-left__collapse-button {\n    margin-right: 3px;\n    padding: 2px;\n    margin-left: -2px;\n  }\n\n  .redsift-app-bar__right {\n    display: inline-flex;\n    margin: 16px;\n  }\n\n  .redsift-breadcrumb-item,\n  .redsift-breadcrumbs__separator {\n    font-family: var(--redsift-typography-h1-font-family) !important;\n    font-size: var(--redsift-typography-h1-font-size) !important;\n    font-weight: var(--redsift-typography-body-font-weight) !important;\n    line-height: var(--redsift-typography-h1-line-height) !important;\n    color: ${({ $theme }) => css`var(--redsift-color-${$theme}-components-app-bar-breadcrumb-default) !important`};\n  }\n\n  h1.redsift-breadcrumb-item {\n    font-weight: var(--redsift-typography-h1-font-weight) !important;\n  }\n`;\n","import React, { forwardRef, RefObject, useContext, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport { mdiMenuOpen } from '@redsift/icons';\nimport { Comp, ProductName } from '../../types';\nimport { IconButton } from '../icon-button';\nimport { AppContainerContext } from '../app-container/context';\nimport { useIsLoaded } from '../../hooks/useIsLoaded';\nimport { StyledAppBar } from './styles';\nimport { AppBarProps } from './types';\nimport { Heading } from '../heading';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { Breadcrumbs } from '../breadcrumbs';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppBar';\nconst CLASSNAME = 'redsift-app-bar';\n\n/**\n * AppBar is the top navigation bar of the application. It displays the page title\n * or breadcrumbs and provides a button to collapse/expand the side panel.\n *\n * Must be used within an `AppContainer` to work properly with the side panel state.\n * Automatically adjusts its position based on the side panel's collapsed state.\n *\n * @example\n * // Basic usage with title\n * <AppContainer>\n *   <AppSidePanel />\n *   <AppBar title=\"Dashboard\" />\n *   <AppContent>{children}</AppContent>\n * </AppContainer>\n *\n * @example\n * // With breadcrumbs instead of title\n * <AppBar breadcrumbs={[\n *   { href: '/home', children: 'Home' },\n *   { href: '/settings', children: 'Settings' },\n *   { children: 'Profile' }\n * ]} />\n */\nexport const AppBar: Comp<AppBarProps, HTMLHeadingElement> = forwardRef((props, ref) => {\n  const {\n    breadcrumbs,\n    children,\n    className,\n    iconButtonProps,\n    iconButtonRef,\n    fallbackTitle,\n    theme: propsTheme,\n    title: propsTitle,\n    ...forwardedProps\n  } = props;\n\n  const [scroll, setScroll] = useState(false);\n  useEffect(() => {\n    window.addEventListener('scroll', () => {\n      setScroll(window.scrollY > 8);\n    });\n  }, []);\n\n  const { isLoaded } = useIsLoaded();\n  const appContainerState = useContext(AppContainerContext);\n  const theme = useTheme(propsTheme);\n\n  const format = useMessageFormatter(intlMessages);\n\n  return (\n    <StyledAppBar\n      {...forwardedProps}\n      $hasBorder={scroll}\n      $isLoaded={isLoaded}\n      $isSidePanelCollapsed={\n        appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true\n      }\n      $isAppFullScreen={appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false}\n      $theme={theme}\n      className={classNames(AppBar.className, className)}\n      ref={ref as RefObject<HTMLHeadingElement>}\n    >\n      <div className={`${AppBar.className}__left`}>\n        {appContainerState ? (\n          <>\n            {appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? (\n              <div style={{ width: '30px', height: '30px', marginRight: '3px' }} />\n            ) : (\n              <IconButton\n                className={`${AppBar.className}-left__collapse-button`}\n                {...iconButtonProps}\n                aria-label={format('collapse')}\n                icon={mdiMenuOpen}\n                onClick={appContainerState.collapseSidePanel}\n                ref={iconButtonRef as RefObject<HTMLButtonElement>}\n                color=\"grey\"\n              />\n            )}\n          </>\n        ) : null}\n        {propsTitle && typeof propsTitle !== 'string' ? (\n          <>{propsTitle}</>\n        ) : typeof propsTitle === 'string' ? (\n          <Heading as=\"h1\">{propsTitle}</Heading>\n        ) : breadcrumbs ? (\n          <Breadcrumbs aria-label=\"Breadcrumb\">\n            {appContainerState && appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? (\n              <Breadcrumbs.Item href=\"/\" as={breadcrumbs[0]?.as || 'a'}>\n                {typeof appContainerState.product === 'string'\n                  ? ProductName[appContainerState.product]\n                  : appContainerState.product?.name}\n              </Breadcrumbs.Item>\n            ) : null}\n            {breadcrumbs.map((breadcrumbItem, index) => (\n              <Breadcrumbs.Item\n                key={index}\n                {...breadcrumbItem}\n                isDisabled={breadcrumbItem.isDisabled || breadcrumbItem.href === undefined}\n                as={\n                  index === breadcrumbs.length - 1\n                    ? 'h1'\n                    : breadcrumbItem.href === undefined\n                    ? 'span'\n                    : breadcrumbItem.as || 'a'\n                }\n              />\n            ))}\n          </Breadcrumbs>\n        ) : fallbackTitle ? (\n          <Heading as=\"h1\">{fallbackTitle}</Heading>\n        ) : null}\n      </div>\n      {children ? <div className={`${AppBar.className}__right`}>{children}</div> : null}\n    </StyledAppBar>\n  );\n});\nAppBar.className = CLASSNAME;\nAppBar.displayName = COMPONENT_NAME;\n"],"names":["enUS","frFR","StyledAppBar","styled","header","_ref","$theme","css","_ref2","$isAppFullScreen","_ref3","$hasBorder","_ref4","$isSidePanelCollapsed","_ref5","$isLoaded","_ref6","COMPONENT_NAME","CLASSNAME","AppBar","forwardRef","props","ref","_breadcrumbs$","_appContainerState$pr","breadcrumbs","children","className","iconButtonProps","iconButtonRef","fallbackTitle","theme","propsTheme","title","propsTitle","forwardedProps","_objectWithoutProperties","_excluded","scroll","setScroll","useState","useEffect","window","addEventListener","scrollY","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","useTheme","format","useMessageFormatter","intlMessages","React","createElement","_extends","sidePanelVariant","AppSidePanelVariant","shrinked","hidden","classNames","Fragment","style","width","height","marginRight","IconButton","icon","mdiMenuOpen","onClick","collapseSidePanel","color","Heading","as","Breadcrumbs","Item","href","product","ProductName","name","map","breadcrumbItem","index","key","isDisabled","undefined","length","displayName"],"mappings":"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"}
+{"version":3,"file":"AppBar.js","sources":["../../src/components/app-bar/intl/index.ts","../../src/components/app-bar/styles.ts","../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n  align-content: center;\n  align-items: center;\n\n  ${({ $theme }) => css`\n    background-color: var(--redsift-color-${$theme}-components-app-bar-background);\n    color: var(--redsift-color-${$theme}-components-text);\n  `};\n\n  display: flex;\n  flex-direction: row;\n  z-index: var(--redsift-layout-z-index-header);\n\n  ${({ $isAppFullScreen }) =>\n    !$isAppFullScreen\n      ? css`\n          height: 92px;\n          @media (max-width: 1080px) {\n            height: 72px;\n          }\n        `\n      : css`\n          height: 0;\n          visibility: hidden;\n          @media (max-width: 1080px) {\n            height: 0;\n          }\n        `}\n\n  justify-content: space-between;\n\n  ${({ $hasBorder, $theme }) =>\n    $hasBorder\n      ? css`\n          border-bottom: 2px solid var(--redsift-color-${$theme}-components-app-bar-border);\n        `\n      : css`\n          border-bottom: none;\n        `}\n\n  ${({ $isSidePanelCollapsed, $isAppFullScreen }) =>\n    $isAppFullScreen\n      ? css`\n          width: calc(100%);\n        `\n      : !$isSidePanelCollapsed\n      ? css`\n          transform: translate(254px);\n          width: calc(100% - 254px);\n        `\n      : css`\n          transform: translate(64px);\n          width: calc(100% - 64px);\n        `}\n\n  ${({ $isLoaded }) =>\n    $isLoaded\n      ? css`\n          transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out, visibility 0.25s ease-out;\n        `\n      : ''}\n\n  h1 {\n    margin: unset;\n    padding: unset;\n  }\n\n  .redsift-icon-button {\n    > span,\n    > span > svg {\n      width: 30px;\n      height: 30px;\n    }\n  }\n\n  .redsift-app-bar__left {\n    align-content: center;\n    align-items: center;\n    display: inline-flex;\n    flex-direction: row;\n    gap: 8px;\n    justify-content: center;\n    margin-left: 19px;\n  }\n\n  .redsift-app-bar-left__expand-button,\n  .redsift-app-bar-left__collapse-button {\n    margin-right: 3px;\n    padding: 2px;\n    margin-left: -2px;\n  }\n\n  .redsift-app-bar__right {\n    display: inline-flex;\n    margin: 16px;\n  }\n\n  .redsift-breadcrumb-item,\n  .redsift-breadcrumbs__separator {\n    font-family: var(--redsift-typography-h1-font-family) !important;\n    font-size: var(--redsift-typography-h1-font-size) !important;\n    font-weight: var(--redsift-typography-body-font-weight) !important;\n    line-height: var(--redsift-typography-h1-line-height) !important;\n    color: ${({ $theme }) => css`var(--redsift-color-${$theme}-components-app-bar-breadcrumb-default) !important`};\n  }\n\n  h1.redsift-breadcrumb-item {\n    font-weight: var(--redsift-typography-h1-font-weight) !important;\n  }\n`;\n","import React, { forwardRef, RefObject, useContext, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport { mdiMenuOpen } from '@redsift/icons';\nimport { Comp, ProductName } from '../../types';\nimport { IconButton } from '../icon-button';\nimport { AppContainerContext } from '../app-container/context';\nimport { useIsLoaded } from '../../hooks/useIsLoaded';\nimport { StyledAppBar } from './styles';\nimport { AppBarProps } from './types';\nimport { Heading } from '../heading';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { Breadcrumbs } from '../breadcrumbs';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppBar';\nconst CLASSNAME = 'redsift-app-bar';\n\n/**\n * AppBar is the top navigation bar of the application. It displays the page title\n * or breadcrumbs and provides a button to collapse/expand the side panel.\n *\n * Must be used within an `AppContainer` to work properly with the side panel state.\n * Automatically adjusts its position based on the side panel's collapsed state.\n *\n * @example\n * // Basic usage with title\n * <AppContainer>\n *   <AppSidePanel />\n *   <AppBar title=\"Dashboard\" />\n *   <AppContent>{children}</AppContent>\n * </AppContainer>\n *\n * @example\n * // With breadcrumbs instead of title\n * <AppBar breadcrumbs={[\n *   { href: '/home', children: 'Home' },\n *   { href: '/settings', children: 'Settings' },\n *   { children: 'Profile' }\n * ]} />\n */\nexport const AppBar: Comp<AppBarProps, HTMLHeadingElement> = forwardRef((props, ref) => {\n  const {\n    breadcrumbs,\n    children,\n    className,\n    iconButtonProps,\n    iconButtonRef,\n    fallbackTitle,\n    theme: propsTheme,\n    title: propsTitle,\n    ...forwardedProps\n  } = props;\n\n  const { isLoaded } = useIsLoaded();\n  const appContainerState = useContext(AppContainerContext);\n  const theme = useTheme(propsTheme);\n\n  const scrollNode = appContainerState?.scrollContainer ?? null;\n\n  const [scroll, setScroll] = useState(false);\n  useEffect(() => {\n    if (!scrollNode) {\n      // No scroll container (e.g. AppContent unmounted) — clear any stale border state.\n      setScroll(false);\n      return;\n    }\n    const onScroll = () => setScroll(scrollNode.scrollTop > 8);\n    onScroll(); // sync initial state (e.g. remount at a scrolled position)\n    scrollNode.addEventListener('scroll', onScroll, { passive: true });\n    return () => scrollNode.removeEventListener('scroll', onScroll);\n  }, [scrollNode]);\n\n  const format = useMessageFormatter(intlMessages);\n\n  return (\n    <StyledAppBar\n      {...forwardedProps}\n      $hasBorder={scroll}\n      $isLoaded={isLoaded}\n      $isSidePanelCollapsed={\n        appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true\n      }\n      $isAppFullScreen={appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false}\n      $theme={theme}\n      className={classNames(AppBar.className, className)}\n      ref={ref as RefObject<HTMLHeadingElement>}\n    >\n      <div className={`${AppBar.className}__left`}>\n        {appContainerState ? (\n          <>\n            {appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? (\n              <div style={{ width: '30px', height: '30px', marginRight: '3px' }} />\n            ) : (\n              <IconButton\n                className={`${AppBar.className}-left__collapse-button`}\n                {...iconButtonProps}\n                aria-label={format('collapse')}\n                icon={mdiMenuOpen}\n                onClick={appContainerState.collapseSidePanel}\n                ref={iconButtonRef as RefObject<HTMLButtonElement>}\n                color=\"grey\"\n              />\n            )}\n          </>\n        ) : null}\n        {propsTitle && typeof propsTitle !== 'string' ? (\n          <>{propsTitle}</>\n        ) : typeof propsTitle === 'string' ? (\n          <Heading as=\"h1\">{propsTitle}</Heading>\n        ) : breadcrumbs ? (\n          <Breadcrumbs aria-label=\"Breadcrumb\">\n            {appContainerState && appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? (\n              <Breadcrumbs.Item href=\"/\" as={breadcrumbs[0]?.as || 'a'}>\n                {typeof appContainerState.product === 'string'\n                  ? ProductName[appContainerState.product]\n                  : appContainerState.product?.name}\n              </Breadcrumbs.Item>\n            ) : null}\n            {breadcrumbs.map((breadcrumbItem, index) => (\n              <Breadcrumbs.Item\n                key={index}\n                {...breadcrumbItem}\n                isDisabled={breadcrumbItem.isDisabled || breadcrumbItem.href === undefined}\n                as={\n                  index === breadcrumbs.length - 1\n                    ? 'h1'\n                    : breadcrumbItem.href === undefined\n                    ? 'span'\n                    : breadcrumbItem.as || 'a'\n                }\n              />\n            ))}\n          </Breadcrumbs>\n        ) : fallbackTitle ? (\n          <Heading as=\"h1\">{fallbackTitle}</Heading>\n        ) : null}\n      </div>\n      {children ? <div className={`${AppBar.className}__right`}>{children}</div> : null}\n    </StyledAppBar>\n  );\n});\nAppBar.className = CLASSNAME;\nAppBar.displayName = COMPONENT_NAME;\n"],"names":["enUS","frFR","StyledAppBar","styled","header","_ref","$theme","css","_ref2","$isAppFullScreen","_ref3","$hasBorder","_ref4","$isSidePanelCollapsed","_ref5","$isLoaded","_ref6","COMPONENT_NAME","CLASSNAME","AppBar","forwardRef","props","ref","_appContainerState$sc","_breadcrumbs$","_appContainerState$pr","breadcrumbs","children","className","iconButtonProps","iconButtonRef","fallbackTitle","theme","propsTheme","title","propsTitle","forwardedProps","_objectWithoutProperties","_excluded","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","useTheme","scrollNode","scrollContainer","scroll","setScroll","useState","useEffect","onScroll","scrollTop","addEventListener","passive","removeEventListener","format","useMessageFormatter","intlMessages","React","createElement","_extends","sidePanelVariant","AppSidePanelVariant","shrinked","hidden","classNames","Fragment","style","width","height","marginRight","IconButton","icon","mdiMenuOpen","onClick","collapseSidePanel","color","Heading","as","Breadcrumbs","Item","href","product","ProductName","name","map","breadcrumbItem","index","key","isDisabled","undefined","length","displayName"],"mappings":"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"}

package/_internal/AppContainer.js

@@ -11,7 +11,11 @@ import { u as useTheme, a as ThemeProvider } from './useTheme.js';
  * Component style.
  */
 const StyledAppContainer = styled.div`
-  box-sizing: content-box;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  overflow: hidden;
 
   --redsift-color-text-primary: ${_ref => {
   let {
@@ -128,6 +132,7 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, []);
   const [breadcrumbs, setBreadcrumbs] = useState();
+  const [scrollContainer, setScrollContainer] = useState(null);
   useEffect(() => {
     if (isFullScreen && sidePanelVariant !== AppSidePanelVariant.hidden) {
       _setSidePanelVariant(AppSidePanelVariant.hidden);
@@ -152,7 +157,9 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     sidePanelVariant,
     setSidePanelVariant: _setSidePanelVariant,
     appContainerRef: divRef,
-    isFullScreen
+    isFullScreen,
+    scrollContainer,
+    setScrollContainer
   };
   return /*#__PURE__*/React__default.createElement(StyledAppContainer, _extends({}, forwardedProps, {
     id: "redsift-app-container",

package/_internal/AppContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppContainer.js","sources":["../../src/components/app-container/styles.ts","../../src/components/app-container/AppContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledAppContainerProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContainer = styled.div<StyledAppContainerProps>`\n  box-sizing: content-box;\n\n  --redsift-color-text-primary: ${({ $theme }) => `var(--redsift-color-${$theme}-components-text-primary);`};\n  --redsift-color-text-secondary: ${({ $theme }) => `var(--redsift-color-${$theme}-components-text-secondary);`};\n  color: ${({ $theme }) => `var(--redsift-color-${$theme}-components-text-primary)`};\n`;\n","import React, { forwardRef, RefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { I18nProvider } from '../../react-aria/react-aria/i18n';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { AppContainerProps } from './types';\nimport { AppContainerContext } from './context';\nimport { StyledAppContainer } from './styles';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { BreadcrumbItemProps } from '../breadcrumb-item';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppContainer';\nconst CLASSNAME = 'redsift-app-container';\n\n/** @internal SVG gradient definitions for Radar product styling */\nexport const RadarSvgLinearGradient: React.FC = () => (\n  <svg width=\"0\" height=\"0\">\n    <linearGradient id=\"radar-gradient-default\" x1=\"100%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n      <stop stopColor=\"rgba(81, 183, 164, 1)\" offset=\"0%\" />\n      <stop stopColor=\"rgba(0, 129, 195, 1)\" offset=\"100%\" />\n    </linearGradient>\n    <linearGradient id=\"radar-gradient-hover\" x1=\"100%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n      <stop stopColor=\"rgba(65, 146, 131, 1)\" offset=\"0%\" />\n      <stop stopColor=\"rgba(3, 114, 171, 1)\" offset=\"100%\" />\n    </linearGradient>\n    <linearGradient id=\"radar-gradient-active\" x1=\"100%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n      <stop stopColor=\"rgba(58, 122, 110, 1)\" offset=\"0%\" />\n      <stop stopColor=\"rgba(0, 96, 145, 1)\" offset=\"100%\" />\n    </linearGradient>\n  </svg>\n);\n\n/**\n * The AppContainer component.\n */\nexport const AppContainer: Comp<AppContainerProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const _ref = useRef<HTMLDivElement>();\n  const divRef = ref || _ref;\n\n  const {\n    children,\n    className,\n    locale,\n    product,\n    storageKey,\n    theme: propsTheme,\n    isFullScreen = false,\n    ...forwardedProps\n  } = props;\n  const theme = useTheme(propsTheme);\n\n  // Always initialize with server-safe defaults (no localStorage read during render)\n  const [sidePanelVariant, _setSidePanelVariant] = useState<AppSidePanelVariant>(\n    isFullScreen ? AppSidePanelVariant.hidden : AppSidePanelVariant.standard\n  );\n\n  // Write to localStorage, filtering out 'hidden'\n  const persistVariant = useCallback(\n    (variant: AppSidePanelVariant) => {\n      if (storageKey && variant !== AppSidePanelVariant.hidden && typeof window !== 'undefined') {\n        try {\n          window.localStorage.setItem(storageKey, JSON.stringify(variant));\n        } catch {\n          // Silently fail\n        }\n      }\n    },\n    [storageKey]\n  );\n\n  // Restore from localStorage after hydration\n  useEffect(() => {\n    if (storageKey && !isFullScreen && typeof window !== 'undefined') {\n      try {\n        const stored = window.localStorage.getItem(storageKey);\n        if (stored) {\n          const parsed = JSON.parse(stored) as AppSidePanelVariant;\n          if (parsed !== AppSidePanelVariant.hidden) {\n            _setSidePanelVariant(parsed);\n          }\n        }\n      } catch {\n        // Silently fail\n      }\n    }\n  }, []);\n\n  const [breadcrumbs, setBreadcrumbs] = useState<Omit<BreadcrumbItemProps, 'ref'>[] | undefined>();\n\n  useEffect(() => {\n    if (isFullScreen && sidePanelVariant !== AppSidePanelVariant.hidden) {\n      _setSidePanelVariant(AppSidePanelVariant.hidden);\n    } else if (!isFullScreen && sidePanelVariant === AppSidePanelVariant.hidden) {\n      _setSidePanelVariant(AppSidePanelVariant.standard);\n    }\n  }, [isFullScreen]);\n\n  const state = {\n    collapseSidePanel() {\n      _setSidePanelVariant(AppSidePanelVariant.shrinked);\n      persistVariant(AppSidePanelVariant.shrinked);\n    },\n    expandSidePanel() {\n      _setSidePanelVariant(AppSidePanelVariant.standard);\n      persistVariant(AppSidePanelVariant.standard);\n    },\n    setBreadcrumbs(breadcrumbs: Omit<BreadcrumbItemProps, 'ref'>[]) {\n      setBreadcrumbs(breadcrumbs);\n    },\n    product,\n    breadcrumbs,\n    sidePanelVariant,\n    setSidePanelVariant: _setSidePanelVariant,\n    appContainerRef: divRef as RefObject<HTMLDivElement>,\n    isFullScreen,\n  };\n\n  return (\n    <StyledAppContainer\n      {...forwardedProps}\n      id=\"redsift-app-container\"\n      $theme={theme}\n      $product={product}\n      className={classNames(AppContainer.className, className)}\n      ref={divRef as RefObject<HTMLDivElement>}\n    >\n      <AppContainerContext.Provider value={state}>\n        <ThemeProvider value={{ theme }}>\n          <I18nProvider locale={locale}>{children}</I18nProvider>\n        </ThemeProvider>\n      </AppContainerContext.Provider>\n      <RadarSvgLinearGradient />\n    </StyledAppContainer>\n  );\n});\nAppContainer.className = CLASSNAME;\nAppContainer.displayName = COMPONENT_NAME;\n"],"names":["StyledAppContainer","styled","div","_ref","$theme","_ref2","_ref3","COMPONENT_NAME","CLASSNAME","RadarSvgLinearGradient","React","createElement","width","height","id","x1","y1","x2","y2","stopColor","offset","AppContainer","forwardRef","props","ref","useRef","divRef","children","className","locale","product","storageKey","theme","propsTheme","isFullScreen","forwardedProps","_objectWithoutProperties","_excluded","useTheme","sidePanelVariant","_setSidePanelVariant","useState","AppSidePanelVariant","hidden","standard","persistVariant","useCallback","variant","window","localStorage","setItem","JSON","stringify","useEffect","stored","getItem","parsed","parse","breadcrumbs","setBreadcrumbs","state","collapseSidePanel","shrinked","expandSidePanel","setSidePanelVariant","appContainerRef","_extends","$product","classNames","AppContainerContext","Provider","value","ThemeProvider","I18nProvider","displayName"],"mappings":"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"}
+{"version":3,"file":"AppContainer.js","sources":["../../src/components/app-container/styles.ts","../../src/components/app-container/AppContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledAppContainerProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContainer = styled.div<StyledAppContainerProps>`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100dvh;\n  overflow: hidden;\n\n  --redsift-color-text-primary: ${({ $theme }) => `var(--redsift-color-${$theme}-components-text-primary);`};\n  --redsift-color-text-secondary: ${({ $theme }) => `var(--redsift-color-${$theme}-components-text-secondary);`};\n  color: ${({ $theme }) => `var(--redsift-color-${$theme}-components-text-primary)`};\n`;\n","import React, { forwardRef, RefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { I18nProvider } from '../../react-aria/react-aria/i18n';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { AppContainerProps } from './types';\nimport { AppContainerContext } from './context';\nimport { StyledAppContainer } from './styles';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { BreadcrumbItemProps } from '../breadcrumb-item';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppContainer';\nconst CLASSNAME = 'redsift-app-container';\n\n/** @internal SVG gradient definitions for Radar product styling */\nexport const RadarSvgLinearGradient: React.FC = () => (\n  <svg width=\"0\" height=\"0\">\n    <linearGradient id=\"radar-gradient-default\" x1=\"100%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n      <stop stopColor=\"rgba(81, 183, 164, 1)\" offset=\"0%\" />\n      <stop stopColor=\"rgba(0, 129, 195, 1)\" offset=\"100%\" />\n    </linearGradient>\n    <linearGradient id=\"radar-gradient-hover\" x1=\"100%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n      <stop stopColor=\"rgba(65, 146, 131, 1)\" offset=\"0%\" />\n      <stop stopColor=\"rgba(3, 114, 171, 1)\" offset=\"100%\" />\n    </linearGradient>\n    <linearGradient id=\"radar-gradient-active\" x1=\"100%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n      <stop stopColor=\"rgba(58, 122, 110, 1)\" offset=\"0%\" />\n      <stop stopColor=\"rgba(0, 96, 145, 1)\" offset=\"100%\" />\n    </linearGradient>\n  </svg>\n);\n\n/**\n * The AppContainer component.\n */\nexport const AppContainer: Comp<AppContainerProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const _ref = useRef<HTMLDivElement>();\n  const divRef = ref || _ref;\n\n  const {\n    children,\n    className,\n    locale,\n    product,\n    storageKey,\n    theme: propsTheme,\n    isFullScreen = false,\n    ...forwardedProps\n  } = props;\n  const theme = useTheme(propsTheme);\n\n  // Always initialize with server-safe defaults (no localStorage read during render)\n  const [sidePanelVariant, _setSidePanelVariant] = useState<AppSidePanelVariant>(\n    isFullScreen ? AppSidePanelVariant.hidden : AppSidePanelVariant.standard\n  );\n\n  // Write to localStorage, filtering out 'hidden'\n  const persistVariant = useCallback(\n    (variant: AppSidePanelVariant) => {\n      if (storageKey && variant !== AppSidePanelVariant.hidden && typeof window !== 'undefined') {\n        try {\n          window.localStorage.setItem(storageKey, JSON.stringify(variant));\n        } catch {\n          // Silently fail\n        }\n      }\n    },\n    [storageKey]\n  );\n\n  // Restore from localStorage after hydration\n  useEffect(() => {\n    if (storageKey && !isFullScreen && typeof window !== 'undefined') {\n      try {\n        const stored = window.localStorage.getItem(storageKey);\n        if (stored) {\n          const parsed = JSON.parse(stored) as AppSidePanelVariant;\n          if (parsed !== AppSidePanelVariant.hidden) {\n            _setSidePanelVariant(parsed);\n          }\n        }\n      } catch {\n        // Silently fail\n      }\n    }\n  }, []);\n\n  const [breadcrumbs, setBreadcrumbs] = useState<Omit<BreadcrumbItemProps, 'ref'>[] | undefined>();\n\n  const [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (isFullScreen && sidePanelVariant !== AppSidePanelVariant.hidden) {\n      _setSidePanelVariant(AppSidePanelVariant.hidden);\n    } else if (!isFullScreen && sidePanelVariant === AppSidePanelVariant.hidden) {\n      _setSidePanelVariant(AppSidePanelVariant.standard);\n    }\n  }, [isFullScreen]);\n\n  const state = {\n    collapseSidePanel() {\n      _setSidePanelVariant(AppSidePanelVariant.shrinked);\n      persistVariant(AppSidePanelVariant.shrinked);\n    },\n    expandSidePanel() {\n      _setSidePanelVariant(AppSidePanelVariant.standard);\n      persistVariant(AppSidePanelVariant.standard);\n    },\n    setBreadcrumbs(breadcrumbs: Omit<BreadcrumbItemProps, 'ref'>[]) {\n      setBreadcrumbs(breadcrumbs);\n    },\n    product,\n    breadcrumbs,\n    sidePanelVariant,\n    setSidePanelVariant: _setSidePanelVariant,\n    appContainerRef: divRef as RefObject<HTMLDivElement>,\n    isFullScreen,\n    scrollContainer,\n    setScrollContainer,\n  };\n\n  return (\n    <StyledAppContainer\n      {...forwardedProps}\n      id=\"redsift-app-container\"\n      $theme={theme}\n      $product={product}\n      className={classNames(AppContainer.className, className)}\n      ref={divRef as RefObject<HTMLDivElement>}\n    >\n      <AppContainerContext.Provider value={state}>\n        <ThemeProvider value={{ theme }}>\n          <I18nProvider locale={locale}>{children}</I18nProvider>\n        </ThemeProvider>\n      </AppContainerContext.Provider>\n      <RadarSvgLinearGradient />\n    </StyledAppContainer>\n  );\n});\nAppContainer.className = CLASSNAME;\nAppContainer.displayName = COMPONENT_NAME;\n"],"names":["StyledAppContainer","styled","div","_ref","$theme","_ref2","_ref3","COMPONENT_NAME","CLASSNAME","RadarSvgLinearGradient","React","createElement","width","height","id","x1","y1","x2","y2","stopColor","offset","AppContainer","forwardRef","props","ref","useRef","divRef","children","className","locale","product","storageKey","theme","propsTheme","isFullScreen","forwardedProps","_objectWithoutProperties","_excluded","useTheme","sidePanelVariant","_setSidePanelVariant","useState","AppSidePanelVariant","hidden","standard","persistVariant","useCallback","variant","window","localStorage","setItem","JSON","stringify","useEffect","stored","getItem","parsed","parse","breadcrumbs","setBreadcrumbs","scrollContainer","setScrollContainer","state","collapseSidePanel","shrinked","expandSidePanel","setSidePanelVariant","appContainerRef","_extends","$product","classNames","AppContainerContext","Provider","value","ThemeProvider","I18nProvider","displayName"],"mappings":"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"}

package/_internal/AppContent.js

@@ -1,5 +1,5 @@
 import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useContext } from 'react';
+import React__default, { forwardRef, useContext, useCallback } from 'react';
 import classNames from 'classnames';
 import { A as AppContainerContext } from './context2.js';
 import { u as useIsLoaded } from './useIsLoaded.js';
@@ -25,7 +25,9 @@ const StyledAppContent = styled.main`
         ` : '';
 }}
   box-sizing: border-box;
-  min-height: calc(100vh - 92px);
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
 
   @media screen and (max-width: 768px) {
     padding: 0px;
@@ -97,13 +99,18 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
   } = useIsLoaded();
   const appContainerState = useContext(AppContainerContext);
   const theme = useTheme(propsTheme);
+  const setScrollContainer = appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.setScrollContainer;
+  const registerRef = useCallback(node => {
+    if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+    setScrollContainer === null || setScrollContainer === void 0 ? void 0 : setScrollContainer(node);
+  }, [ref, setScrollContainer]);
   return /*#__PURE__*/React__default.createElement(StyledAppContent, _extends({}, forwardedProps, transientProps, {
     $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
+    ref: registerRef
   }), children);
 });
 AppContent.className = CLASSNAME;

package/_internal/AppContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppContent.js","sources":["../../src/components/app-content/styles.ts","../../src/components/app-content/AppContent.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledAppContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContent = styled.main<StyledAppContentProps>`\n  padding: 16px 64px;\n  ${baseContainer}\n\n  ${({ $theme }) =>\n    $theme\n      ? css`\n          background-color: var(--redsift-color-${$theme}-components-page-background);\n        `\n      : ''}\n  box-sizing: border-box;\n  min-height: calc(100vh - 92px);\n\n  @media screen and (max-width: 768px) {\n    padding: 0px;\n  }\n\n  ${({ $isSidePanelCollapsed, $isAppFullScreen }) =>\n    $isAppFullScreen\n      ? css`\n          transform: translate(0px);\n          width: calc(100%);\n        `\n      : !$isSidePanelCollapsed\n      ? css`\n          transform: translate(254px);\n          width: calc(100% - 254px);\n        `\n      : css`\n          transform: translate(68px);\n          width: calc(100% - 68px);\n        `}\n\n  ${({ $isLoaded }) =>\n    $isLoaded\n      ? css`\n          transition: transform 0.25s ease-out, width 0.25s ease-out;\n        `\n      : ''}\n`;\n","import React, { forwardRef, RefObject, useContext } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getContainerStylingTransientProps } from '../../types';\nimport { AppContainerContext } from '../app-container/context';\nimport { useIsLoaded } from '../../hooks/useIsLoaded';\nimport { StyledAppContent } from './styles';\nimport { AppContentProps } from './types';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppContent';\nconst CLASSNAME = 'redsift-app-content';\n\n/**\n * AppContent is the main content area of a Red Sift application. It automatically\n * adjusts its position and width based on the side panel's collapsed state.\n *\n * Must be used within an `AppContainer` to work properly.\n *\n * @example\n * // Basic usage within AppContainer\n * <AppContainer>\n *   <AppSidePanel />\n *   <AppBar title=\"Page Title\" />\n *   <AppContent>\n *     <Card>\n *       <Card.Header header=\"Welcome\" />\n *       <Card.Body>Your content here</Card.Body>\n *     </Card>\n *   </AppContent>\n * </AppContainer>\n */\nexport const AppContent: Comp<AppContentProps, HTMLElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n  const { children, className, theme: propsTheme, ...forwardedProps } = otherProps;\n\n  const { isLoaded } = useIsLoaded();\n  const appContainerState = useContext(AppContainerContext);\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledAppContent\n      {...forwardedProps}\n      {...transientProps}\n      $isLoaded={isLoaded}\n      $isSidePanelCollapsed={\n        appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true\n      }\n      $isAppFullScreen={appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false}\n      $theme={theme}\n      className={classNames(AppContent.className, className)}\n      ref={ref as RefObject<HTMLElement>}\n    >\n      {children}\n    </StyledAppContent>\n  );\n});\nAppContent.className = CLASSNAME;\nAppContent.displayName = COMPONENT_NAME;\n"],"names":["StyledAppContent","styled","main","baseContainer","_ref","$theme","css","_ref2","$isSidePanelCollapsed","$isAppFullScreen","_ref3","$isLoaded","COMPONENT_NAME","CLASSNAME","AppContent","forwardRef","props","ref","transientProps","otherProps","getContainerStylingTransientProps","children","className","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","useTheme","React","createElement","_extends","sidePanelVariant","AppSidePanelVariant","shrinked","hidden","classNames","displayName"],"mappings":";;;;;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAGC,MAAM,CAACC,IAA4B,CAAA;AACnE;AACA,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OACXC,MAAM,GACFC,GAAI,CAAA;AACZ,gDAAA,EAAkDD,MAAO,CAAA;AACzD,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIE,KAAA,IAAA;EAAA,IAAC;IAAEC,qBAAqB;AAAEC,IAAAA,gBAAAA;AAAiB,GAAC,GAAAF,KAAA,CAAA;EAAA,OAC5CE,gBAAgB,GACZH,GAAI,CAAA;AACZ;AACA;AACA,QAAA,CAAS,GACD,CAACE,qBAAqB,GACtBF,GAAI,CAAA;AACZ;AACA;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA,EAAA,EAAII,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAD,KAAA,CAAA;EAAA,OACdC,SAAS,GACLL,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX,CAAC;;;ACpCD,MAAMM,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAA8C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACvF,MAAM;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAACJ,KAAK,CAAC,CAAA;EAE/E,MAAM;MAAEK,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGL,UAAU;AAA7BM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,UAAU,EAAAQ,SAAA,CAAA,CAAA;EAEhF,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,WAAW,EAAE,CAAA;AAClC,EAAA,MAAMC,iBAAiB,GAAGC,UAAU,CAACC,mBAAmB,CAAC,CAAA;AACzD,EAAA,MAAMT,KAAK,GAAGU,QAAQ,CAACT,UAAU,CAAC,CAAA;EAElC,oBACEU,cAAA,CAAAC,aAAA,CAACnC,gBAAgB,EAAAoC,QAAA,CAAA,EAAA,EACXX,cAAc,EACdP,cAAc,EAAA;AAClBP,IAAAA,SAAS,EAAEiB,QAAS;IACpBpB,qBAAqB,EACnBsB,iBAAiB,GAAGA,iBAAiB,CAACO,gBAAgB,KAAKC,mBAAmB,CAACC,QAAQ,GAAG,IAC3F;IACD9B,gBAAgB,EAAEqB,iBAAiB,GAAGA,iBAAiB,CAACO,gBAAgB,KAAKC,mBAAmB,CAACE,MAAM,GAAG,KAAM;AAChHnC,IAAAA,MAAM,EAAEkB,KAAM;IACdD,SAAS,EAAEmB,UAAU,CAAC3B,UAAU,CAACQ,SAAS,EAAEA,SAAS,CAAE;AACvDL,IAAAA,GAAG,EAAEA,GAAAA;AAA8B,GAAA,CAAA,EAElCI,QACe,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFP,UAAU,CAACQ,SAAS,GAAGT,SAAS,CAAA;AAChCC,UAAU,CAAC4B,WAAW,GAAG9B,cAAc;;;;"}
+{"version":3,"file":"AppContent.js","sources":["../../src/components/app-content/styles.ts","../../src/components/app-content/AppContent.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledAppContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppContent = styled.main<StyledAppContentProps>`\n  padding: 16px 64px;\n  ${baseContainer}\n\n  ${({ $theme }) =>\n    $theme\n      ? css`\n          background-color: var(--redsift-color-${$theme}-components-page-background);\n        `\n      : ''}\n  box-sizing: border-box;\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n\n  @media screen and (max-width: 768px) {\n    padding: 0px;\n  }\n\n  ${({ $isSidePanelCollapsed, $isAppFullScreen }) =>\n    $isAppFullScreen\n      ? css`\n          transform: translate(0px);\n          width: calc(100%);\n        `\n      : !$isSidePanelCollapsed\n      ? css`\n          transform: translate(254px);\n          width: calc(100% - 254px);\n        `\n      : css`\n          transform: translate(68px);\n          width: calc(100% - 68px);\n        `}\n\n  ${({ $isLoaded }) =>\n    $isLoaded\n      ? css`\n          transition: transform 0.25s ease-out, width 0.25s ease-out;\n        `\n      : ''}\n`;\n","import React, { forwardRef, MutableRefObject, useCallback, useContext } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getContainerStylingTransientProps } from '../../types';\nimport { AppContainerContext } from '../app-container/context';\nimport { useIsLoaded } from '../../hooks/useIsLoaded';\nimport { StyledAppContent } from './styles';\nimport { AppContentProps } from './types';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppContent';\nconst CLASSNAME = 'redsift-app-content';\n\n/**\n * AppContent is the main content area of a Red Sift application. It automatically\n * adjusts its position and width based on the side panel's collapsed state.\n *\n * Must be used within an `AppContainer` to work properly.\n *\n * @example\n * // Basic usage within AppContainer\n * <AppContainer>\n *   <AppSidePanel />\n *   <AppBar title=\"Page Title\" />\n *   <AppContent>\n *     <Card>\n *       <Card.Header header=\"Welcome\" />\n *       <Card.Body>Your content here</Card.Body>\n *     </Card>\n *   </AppContent>\n * </AppContainer>\n */\nexport const AppContent: Comp<AppContentProps, HTMLElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n  const { children, className, theme: propsTheme, ...forwardedProps } = otherProps;\n\n  const { isLoaded } = useIsLoaded();\n  const appContainerState = useContext(AppContainerContext);\n  const theme = useTheme(propsTheme);\n\n  const setScrollContainer = appContainerState?.setScrollContainer;\n\n  const registerRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as MutableRefObject<HTMLElement | null>).current = node;\n      setScrollContainer?.(node);\n    },\n    [ref, setScrollContainer]\n  );\n\n  return (\n    <StyledAppContent\n      {...forwardedProps}\n      {...transientProps}\n      $isLoaded={isLoaded}\n      $isSidePanelCollapsed={\n        appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true\n      }\n      $isAppFullScreen={appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false}\n      $theme={theme}\n      className={classNames(AppContent.className, className)}\n      ref={registerRef}\n    >\n      {children}\n    </StyledAppContent>\n  );\n});\nAppContent.className = CLASSNAME;\nAppContent.displayName = COMPONENT_NAME;\n"],"names":["StyledAppContent","styled","main","baseContainer","_ref","$theme","css","_ref2","$isSidePanelCollapsed","$isAppFullScreen","_ref3","$isLoaded","COMPONENT_NAME","CLASSNAME","AppContent","forwardRef","props","ref","transientProps","otherProps","getContainerStylingTransientProps","children","className","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","useTheme","setScrollContainer","registerRef","useCallback","node","current","React","createElement","_extends","sidePanelVariant","AppSidePanelVariant","shrinked","hidden","classNames","displayName"],"mappings":"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"}

package/index.d.ts

@@ -3104,6 +3104,11 @@ type AppContainerState = {
     appContainerRef: RefObject<HTMLDivElement>;
     /** Whether the App takes the entire screen or not. */
     isFullScreen?: boolean;
+    /** The scroll container node (AppContent's element), for scroll-driven
+     *  effects such as the AppBar bottom border. Null until AppContent mounts. */
+    scrollContainer: HTMLElement | null;
+    /** Registers/clears the scroll container node. Called by AppContent. */
+    setScrollContainer: (node: HTMLElement | null) => void;
 };
 /**
  * Component props.

package/package.json

@@ -33,7 +33,7 @@
     "version": "version-changelog ../../CHANGELOG.md && changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
   },
   "types": "index.d.ts",
-  "version": "12.5.9-muiv7",
+  "version": "12.5.9",
   "dependencies": {
     "@react-spring/web": "^9.7.1",
     "classnames": "^2.3.1",
@@ -99,5 +99,5 @@
     "react-dom": ">=17",
     "styled-components": "6.1.19"
   },
-  "gitHead": "d17c5cf138daf1dd7dca6cc95239a36e8edafc82"
+  "gitHead": "f9b8e6322a57b2130ebe624205b452515e98f148"
 }