@redsift/design-system 12.5.12 → 12.5.13-muiv6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/_internal/AppBar.js +11 -17
  2. package/_internal/AppBar.js.map +1 -1
  3. package/_internal/AppContainer.js +2 -9
  4. package/_internal/AppContainer.js.map +1 -1
  5. package/_internal/AppContent.js +3 -10
  6. package/_internal/AppContent.js.map +1 -1
  7. package/_internal/TextField.js +60 -3
  8. package/_internal/TextField.js.map +1 -1
  9. package/_internal/text-field.js +1 -1
  10. package/_internal/useFocusOnList.js +9 -6
  11. package/_internal/useFocusOnList.js.map +1 -1
  12. package/index.d.ts +21 -6
  13. package/index.js +1 -1
  14. package/package.json +3 -3
package/_internal/AppBar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
2
- import React__default, { forwardRef, useContext, useState, useEffect } from 'react';
2
+ import React__default, { forwardRef, useState, useEffect, useContext } from 'react';
3
3
  import classNames from 'classnames';
4
4
  import { mdiMenuOpen } from '@redsift/icons';
5
5
  import { A as AppContainerContext } from './context2.js';
@@ -72,6 +72,9 @@ const StyledAppBar = styled.header`
72
72
  }}
73
73
 
74
74
  justify-content: space-between;
75
+ left: 0;
76
+ position: sticky;
77
+ top: 0;
75
78
 
76
79
  ${_ref3 => {
77
80
  let {
@@ -192,7 +195,7 @@ const CLASSNAME = 'redsift-app-bar';
192
195
  * ]} />
193
196
  */
194
197
  const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
195
- var _appContainerState$sc, _breadcrumbs$, _appContainerState$pr;
198
+ var _breadcrumbs$, _appContainerState$pr;
196
199
  const {
197
200
  breadcrumbs,
198
201
  children,
@@ -204,26 +207,17 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
204
207
  title: propsTitle
205
208
  } = props,
206
209
  forwardedProps = _objectWithoutProperties(props, _excluded);
210
+ const [scroll, setScroll] = useState(false);
211
+ useEffect(() => {
212
+ window.addEventListener('scroll', () => {
213
+ setScroll(window.scrollY > 8);
214
+ });
215
+ }, []);
207
216
  const {
208
217
  isLoaded
209
218
  } = useIsLoaded();
210
219
  const appContainerState = useContext(AppContainerContext);
211
220
  const theme = useTheme(propsTheme);
212
- const scrollNode = (_appContainerState$sc = appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.scrollContainer) !== null && _appContainerState$sc !== void 0 ? _appContainerState$sc : null;
213
- const [scroll, setScroll] = useState(false);
214
- useEffect(() => {
215
- if (!scrollNode) {
216
- // No scroll container (e.g. AppContent unmounted) — clear any stale border state.
217
- setScroll(false);
218
- return;
219
- }
220
- const onScroll = () => setScroll(scrollNode.scrollTop > 8);
221
- onScroll(); // sync initial state (e.g. remount at a scrolled position)
222
- scrollNode.addEventListener('scroll', onScroll, {
223
- passive: true
224
- });
225
- return () => scrollNode.removeEventListener('scroll', onScroll);
226
- }, [scrollNode]);
227
221
  const format = useMessageFormatter(intlMessages);
228
222
  return /*#__PURE__*/React__default.createElement(StyledAppBar, _extends({}, forwardedProps, {
229
223
  $hasBorder: scroll,
package/_internal/AppBar.js.map CHANGED
@@ -1 +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\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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"}
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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"}
package/_internal/AppContainer.js CHANGED
@@ -11,11 +11,7 @@ import { u as useTheme, a as ThemeProvider } from './useTheme.js';
11
11
  * Component style.
12
12
  */
13
13
  const StyledAppContainer = styled.div`
14
- box-sizing: border-box;
15
- display: flex;
16
- flex-direction: column;
17
- height: 100dvh;
18
- overflow: hidden;
14
+ box-sizing: content-box;
19
15
 
20
16
  --redsift-color-text-primary: ${_ref => {
21
17
  let {
@@ -132,7 +128,6 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
132
128
  }
133
129
  }, []);
134
130
  const [breadcrumbs, setBreadcrumbs] = useState();
135
- const [scrollContainer, setScrollContainer] = useState(null);
136
131
  useEffect(() => {
137
132
  if (isFullScreen && sidePanelVariant !== AppSidePanelVariant.hidden) {
138
133
  _setSidePanelVariant(AppSidePanelVariant.hidden);
@@ -157,9 +152,7 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
157
152
  sidePanelVariant,
158
153
  setSidePanelVariant: _setSidePanelVariant,
159
154
  appContainerRef: divRef,
160
- isFullScreen,
161
- scrollContainer,
162
- setScrollContainer
155
+ isFullScreen
163
156
  };
164
157
  return /*#__PURE__*/React__default.createElement(StyledAppContainer, _extends({}, forwardedProps, {
165
158
  id: "redsift-app-container",
package/_internal/AppContainer.js.map CHANGED
@@ -1 +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: 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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"}
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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"}
package/_internal/AppContent.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
2
- import React__default, { forwardRef, useContext, useCallback } from 'react';
2
+ import React__default, { forwardRef, useContext } from 'react';
3
3
  import classNames from 'classnames';
4
4
  import { A as AppContainerContext } from './context2.js';
5
5
  import { u as useIsLoaded } from './useIsLoaded.js';
@@ -25,9 +25,7 @@ const StyledAppContent = styled.main`
25
25
  ` : '';
26
26
  }}
27
27
  box-sizing: border-box;
28
- flex: 1;
29
- overflow-y: auto;
30
- min-height: 0;
28
+ min-height: calc(100vh - 92px);
31
29
 
32
30
  @media screen and (max-width: 768px) {
33
31
  padding: 0px;
@@ -99,18 +97,13 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
99
97
  } = useIsLoaded();
100
98
  const appContainerState = useContext(AppContainerContext);
101
99
  const theme = useTheme(propsTheme);
102
- const setScrollContainer = appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.setScrollContainer;
103
- const registerRef = useCallback(node => {
104
- if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
105
- setScrollContainer === null || setScrollContainer === void 0 ? void 0 : setScrollContainer(node);
106
- }, [ref, setScrollContainer]);
107
100
  return /*#__PURE__*/React__default.createElement(StyledAppContent, _extends({}, forwardedProps, transientProps, {
108
101
  $isLoaded: isLoaded,
109
102
  $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
110
103
  $isAppFullScreen: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false,
111
104
  $theme: theme,
112
105
  className: classNames(AppContent.className, className),
113
- ref: registerRef
106
+ ref: ref
114
107
  }), children);
115
108
  });
116
109
  AppContent.className = CLASSNAME;
package/_internal/AppContent.js.map CHANGED
@@ -1 +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 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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"}
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;;;;"}
package/_internal/TextField.js CHANGED
@@ -24,6 +24,13 @@ const TextFieldVariant = {
24
24
  default: 'default',
25
25
  underline: 'underline'
26
26
  };
27
+ /**
28
+ * Layout of the Pills relative to the input.
29
+ */
30
+ const TextFieldPillsLayout = {
31
+ wrap: 'wrap',
32
+ inline: 'inline'
33
+ };
27
34
 
28
35
  /**
29
36
  * Component color.
@@ -61,6 +68,7 @@ const StyledTextField = styled.div`
61
68
  $isInvalid,
62
69
  $color,
63
70
  $isGradient,
71
+ $pillsLayout,
64
72
  $theme,
65
73
  $variant
66
74
  } = _ref;
@@ -153,6 +161,51 @@ const StyledTextField = styled.div`
153
161
  .redsift-pill {
154
162
  margin: 3px 6px 3px 0;
155
163
  }
164
+
165
+ ${$pillsLayout === TextFieldPillsLayout.inline ? css`
166
+ /* Single-line layout: pills first, input takes the remaining space, nothing wraps.
167
+ flex-basis 0 + overflow hidden: the row only ever takes the space the toolbar leaves,
168
+ so pills/input can never sit on top of the clear/expand buttons. */
169
+ align-items: center;
170
+ flex: 1 1 0%;
171
+ flex-direction: row;
172
+ flex-wrap: nowrap;
173
+ min-width: 0;
174
+ overflow: hidden;
175
+
176
+ .redsift-text-field-input-wrapper-pills-and-input__pills {
177
+ display: flex;
178
+ flex: 0 1 auto;
179
+ flex-wrap: nowrap;
180
+ min-width: 0;
181
+ order: -1;
182
+ overflow: hidden;
183
+
184
+ .redsift-pill {
185
+ /* No \`flex\` shorthand here: a Pill may opt out of shrinking via its own \`flexShrink\` prop. */
186
+ flex-basis: auto;
187
+ flex-grow: 0;
188
+ max-width: 100%;
189
+ min-width: 0;
190
+ overflow: hidden;
191
+
192
+ .redsift-text {
193
+ display: block;
194
+ min-width: 0;
195
+ overflow: hidden;
196
+ text-overflow: ellipsis;
197
+ white-space: nowrap;
198
+ }
199
+ }
200
+ }
201
+
202
+ .redsift-text-field-input-wrapper-pills-and-input__input-container,
203
+ .redsift-text-field-input-wrapper-pills-and-input__input {
204
+ flex: 1 1 40px;
205
+ min-width: 40px;
206
+ width: auto;
207
+ }
208
+ ` : ''}
156
209
  }
157
210
 
158
211
  .redsift-text-field-input-wrapper-pills-and-input__input {
@@ -405,7 +458,7 @@ var intlMessages = {
405
458
  'fr-FR': frFR
406
459
  };
407
460
 
408
- const _excluded = ["aria-label", "aria-labelledby", "after", "autoFocus", "className", "color", "defaultValue", "forceColor", "hasClearButton", "highlightNonAscii", "inputProps", "inputRef", "internal", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "pills", "placeholder", "theme", "type", "value", "variant"];
461
+ const _excluded = ["aria-label", "aria-labelledby", "after", "autoFocus", "className", "color", "defaultValue", "forceColor", "hasClearButton", "highlightNonAscii", "inputProps", "inputRef", "internal", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "pills", "pillsLayout", "placeholder", "theme", "type", "value", "variant"];
409
462
  const COMPONENT_NAME = 'TextField';
410
463
  const CLASSNAME = 'redsift-text-field';
411
464
 
@@ -558,6 +611,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
558
611
  onClear,
559
612
  onFocus: onFocusProps,
560
613
  pills,
614
+ pillsLayout = TextFieldPillsLayout.wrap,
561
615
  placeholder,
562
616
  theme: propsTheme,
563
617
  type,
@@ -639,6 +693,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
639
693
  $isInvalid: isInvalid,
640
694
  $isRequired: isRequired,
641
695
  $isFocused: Boolean(isFocused || forceColor),
696
+ $pillsLayout: pillsLayout,
642
697
  $theme: theme,
643
698
  $variant: variant,
644
699
  className: classNames(TextField.className, className),
@@ -689,7 +744,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
689
744
  ref: inputRef,
690
745
  type: type,
691
746
  value: isControlled ? propsValue : value
692
- }))), /*#__PURE__*/React__default.createElement("div", null, pills === null || pills === void 0 ? void 0 : pills.map((pill, index) => /*#__PURE__*/React__default.createElement(Pill, _extends({
747
+ }))), /*#__PURE__*/React__default.createElement("div", {
748
+ className: `${TextField.className}-input-wrapper-pills-and-input__pills`
749
+ }, pills === null || pills === void 0 ? void 0 : pills.map((pill, index) => /*#__PURE__*/React__default.createElement(Pill, _extends({
693
750
  theme: theme,
694
751
  key: `${labelId}-pill-${index}`,
695
752
  color: "blue",
@@ -719,5 +776,5 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
719
776
  TextField.className = CLASSNAME;
720
777
  TextField.displayName = COMPONENT_NAME;
721
778
 
722
- export { StyledTextField as S, TextFieldVariant as T, StyledHighlightMarker as a, TextField as b };
779
+ export { StyledTextField as S, TextFieldVariant as T, TextFieldPillsLayout as a, StyledHighlightMarker as b, TextField as c };
723
780
  //# sourceMappingURL=TextField.js.map