@pega/cosmos-react-core 10.0.0-build.9.1 → 10.0.0-build.9.2

package/lib/components/AppShell/TouchAppShell.styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import { rem, transparentize } from 'polished';
 import { useContext } from 'react';
 import { StyledAlert } from '../Badges/Alert';
@@ -6,6 +6,8 @@ import { StyledLink } from '../Link/Link';
 import { StyledBareButton } from '../Button/BareButton';
 import Button from '../Button';
 import { StyledDrawer } from '../Drawer';
+import { TouchDialog } from '../Dialog';
+import Flex from '../Flex';
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
 import { ellipsisOverflow } from '../../styles/mixins';
@@ -13,6 +15,44 @@ import { useDirection } from '../../hooks';
 import AppShellContext from './AppShellContext';
 import { menuButtonWidth, mobileHeaderHeight, StyledCountIcon, StyledNavItemIconBox, StyledNavList, StyledNavListItem, StyledNavListItemVisualContainer, StyledAppNav } from './AppShell.styles';
 import { navContrastColors } from './style-utils';
+export const TouchAppShellGlobalStyle = createGlobalStyle `
+  :root,
+  :host {
+    --appshell-bottom-panel-offset: ${({ hasBottomTouchPanel }) => hasBottomTouchPanel ? '4rem' : '0rem'};
+    --appshell-bottom-panel-gap: ${({ hasBottomTouchPanel, theme }) => hasBottomTouchPanel ? `calc(2 * ${theme?.base.spacing})` : '0rem'};
+    --appshell-bottom-offset: ${({ hasBottomTouchPanel, isMobileNav }) => `calc(var(--appshell-hard-bottom-offset) + ${isMobileNav ? mobileHeaderHeight : '0rem'}${hasBottomTouchPanel ? ' + var(--appshell-bottom-panel-offset)' : ''})`};
+  }
+`;
+export const StyledMainTouchAppShell = styled.div(({ active, theme }) => css `
+    ${active &&
+    css `
+      background: ${theme.base.colors.black};
+    `}
+  `);
+StyledMainTouchAppShell.defaultProps = defaultThemeProp;
+export const StyledSplitViewPanel = styled.div(({ active, theme }) => {
+    const splitViewHeight = active
+        ? 'calc(var(--appshell-bottom-panel-offset, 0rem) + var(--appshell-bottom-panel-gap, 0rem))'
+        : '0rem';
+    return css `
+    position: fixed;
+    inset-block-end: var(--appshell-hard-bottom-offset, 0);
+    inset-inline: 0;
+    height: ${splitViewHeight};
+    background: ${theme.base.colors.black};
+  `;
+});
+StyledSplitViewPanel.defaultProps = defaultThemeProp;
+export const StyledPortalTouchDialog = styled(TouchDialog)(() => css `
+    && {
+      pointer-events: auto;
+      inset-inline: 0;
+      inset-block-end: var(--appshell-hard-bottom-offset, 0);
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+  `);
+StyledPortalTouchDialog.defaultProps = defaultThemeProp;
 export const StyledMobileMoreMenu = styled(StyledAppNav) `
   width: 100%;
   height: 100%;
@@ -24,7 +64,7 @@ export const StyledMobileMoreMenu = styled(StyledAppNav) `
   padding-block-end: var(--appshell-bottom-offset, ${mobileHeaderHeight});
 `;
 StyledMobileMoreMenu.defaultProps = defaultThemeProp;
-export const StyledMobileNav = styled.header(({ theme }) => {
+export const StyledMobileNav = styled(Flex)(({ theme, hasBottomTouchPanel }) => {
     const { rtl } = useDirection();
     const { base: { 'hit-area': { 'finger-min': hitAreaFinger }, 'border-radius': borderRadius, 'font-size': fontSize, 'font-scale': fontScale }, components: { button: { 'focus-shadow': focusShadow, 'border-width': borderWidth }, text } } = theme;
     const mobileNavColor = theme.components['app-shell'].nav.background;
@@ -37,8 +77,9 @@ export const StyledMobileNav = styled.header(({ theme }) => {
     color: ${foreground};
     padding: 0.5rem;
     position: fixed;
+    --mobile-nav-offset: ${hasBottomTouchPanel ? '0rem' : '0.75rem'};
     inset-block-start: calc(
-      100dvh - var(--appshell-bottom-offset, ${mobileHeaderHeight}) + 0.75rem
+      100dvh - var(--appshell-bottom-offset, ${mobileHeaderHeight}) + var(--mobile-nav-offset)
     );
     inset-inline-start: 50%;
     transform: translateX(${rtl ? '50%' : '-50%'});

package/lib/components/AppShell/TouchAppShell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TouchAppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/TouchAppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rem, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport { StyledAlert } from '../Badges/Alert';\nimport { StyledLink } from '../Link/Link';\nimport { StyledBareButton } from '../Button/BareButton';\nimport Button from '../Button';\nimport { StyledDrawer } from '../Drawer';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { useDirection } from '../../hooks';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  menuButtonWidth,\n  mobileHeaderHeight,\n  StyledCountIcon,\n  StyledNavItemIconBox,\n  StyledNavList,\n  StyledNavListItem,\n  StyledNavListItemVisualContainer,\n  StyledAppNav\n} from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledMobileMoreMenu = styled(StyledAppNav)`\n  width: 100%;\n  height: 100%;\n\n  /* Reserve top space for the app header + top nav, but NOT the document\n     tabs strip - the mobile menu drawer covers content above the tab strip\n     too. */\n  padding-block-start: calc(var(--appshell-top-offset, 0rem) - var(--document-tabs-height, 0rem));\n  padding-block-end: var(--appshell-bottom-offset, ${mobileHeaderHeight});\n`;\n\nStyledMobileMoreMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.header(({ theme }) => {\n  const { rtl } = useDirection();\n  const {\n    base: {\n      'hit-area': { 'finger-min': hitAreaFinger },\n      'border-radius': borderRadius,\n      'font-size': fontSize,\n      'font-scale': fontScale\n    },\n    components: {\n      button: { 'focus-shadow': focusShadow, 'border-width': borderWidth },\n      text\n    }\n  } = theme;\n  const mobileNavColor = theme.components['app-shell'].nav.background;\n  const { foreground } = navContrastColors(theme);\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    z-index: calc(${theme.base['z-index'].drawer} + 1);\n    background: ${mobileNavColor};\n    border-radius: calc(2 * ${borderRadius});\n    color: ${foreground};\n    padding: 0.5rem;\n    position: fixed;\n    inset-block-start: calc(\n      100dvh - var(--appshell-bottom-offset, ${mobileHeaderHeight}) + 0.75rem\n    );\n    inset-inline-start: 50%;\n    transform: translateX(${rtl ? '50%' : '-50%'});\n    box-shadow: ${theme.base.shadow.low};\n\n    & + ${StyledDrawer} ${StyledDrawer} {\n      width: 100%;\n    }\n\n    > div:has(> ${StyledNavList}),\n    > div:has(> ${StyledNavList}) > ${StyledNavList}, > ${StyledNavList} {\n      display: contents;\n\n      ${StyledNavListItem} {\n        padding: 0;\n        margin: 0;\n        font-size: ${fontSizes[text.secondary['font-size'] as FontSize]};\n\n        ${StyledBareButton}, ${StyledLink} {\n          flex-direction: column;\n          justify-content: center;\n          width: ${rem(menuButtonWidth(theme))};\n          height: calc(0.25rem + ${hitAreaFinger});\n          border-radius: calc(2 * ${borderRadius});\n          border: ${borderWidth} solid transparent;\n          padding-block: calc(0.5 * ${theme.base.spacing});\n\n          &::before {\n            width: 0;\n          }\n\n          span:not(${StyledCountIcon}) {\n            width: inherit;\n            text-align: center;\n            padding-inline: calc(0.5 * ${theme.base.spacing});\n          }\n\n          &:enabled:focus-visible,\n          &:not([disabled]):focus-visible {\n            box-shadow: ${focusShadow};\n          }\n\n          ${StyledNavListItemVisualContainer} {\n            padding: 0;\n            margin: 0;\n\n            ${StyledNavItemIconBox} {\n              display: flex;\n            }\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileMoreMenuButton = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      'hit-area': { 'finger-min': hitAreaFinger },\n      'border-radius': borderRadius,\n      'font-size': fontSize,\n      'font-scale': fontScale\n    },\n    components: {\n      button: { 'border-width': borderWidth },\n      text\n    }\n  } = theme;\n  const { navOpen } = useContext(AppShellContext);\n  const { foreground } = navContrastColors(theme);\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    flex-direction: column;\n    width: ${rem(menuButtonWidth(theme))};\n    height: calc(0.25rem + ${hitAreaFinger});\n    border-radius: calc(2 * ${borderRadius});\n    font-size: ${fontSizes[text.secondary['font-size'] as FontSize]};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n\n    span {\n      width: inherit;\n      padding-inline: calc(0.5 * ${theme.base.spacing});\n      ${ellipsisOverflow}\n    }\n\n    ${navOpen &&\n    css`\n      &::before {\n        content: '';\n        position: absolute;\n        inset: calc(${borderWidth} * -1);\n        border-radius: inherit;\n        background: ${transparentize(0.85, foreground)};\n      }\n    `}\n\n    ${StyledAlert} {\n      position: absolute;\n      inset-block-start: calc(0.625rem / 2);\n      inset-inline-start: calc(50% + (0.625rem / 2));\n    }\n  `;\n});\n\nStyledMobileMoreMenuButton.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"TouchAppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/TouchAppShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,iBAAiB,EAAE,GAAG,EAAqB,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,iBAAiB,EACjB,gCAAgC,EAChC,YAAY,EACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,CAAC,MAAM,wBAAwB,GAAG,iBAAiB,CAIvD;;;sCAGoC,CAAC,EAAE,mBAAmB,EAAE,EAAE,EAAE,CAC5D,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;mCACR,CAAC,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAE,EAAE,CAChE,mBAAmB,CAAC,CAAC,CAAC,YAAY,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM;gCACvC,CAAC,EAAE,mBAAmB,EAAE,WAAW,EAAE,EAAE,EAAE,CACnE,6CAA6C,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,GACpF,mBAAmB,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,EACnE,GAAG;;CAER,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MACtB,MAAM;IACR,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;KACtC;GACF,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IACzF,MAAM,eAAe,GAAG,MAAM;QAC5B,CAAC,CAAC,0FAA0F;QAC5F,CAAC,CAAC,MAAM,CAAC;IAEX,OAAO,GAAG,CAAA;;;;cAIE,eAAe;kBACX,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;GACtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC,CACxD,GAAG,EAAE,CAAC,GAAG,CAAA;;;;;;;;GAQR,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;;;;;;;;qDAQH,kBAAkB;CACtE,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAoC,CAAC,EAC9E,KAAK,EACL,mBAAmB,EACpB,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,EACJ,IAAI,EAAE,EACJ,UAAU,EAAE,EAAE,YAAY,EAAE,aAAa,EAAE,EAC3C,eAAe,EAAE,YAAY,EAC7B,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACxB,EACD,UAAU,EAAE,EACV,MAAM,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,EACpE,IAAI,EACL,EACF,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IACpE,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;oBACQ,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;kBAC9B,cAAc;8BACF,YAAY;aAC7B,UAAU;;;2BAGI,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;;+CAEpB,kBAAkB;;;4BAGrC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;;UAE7B,YAAY,IAAI,YAAY;;;;kBAIpB,aAAa;kBACb,aAAa,OAAO,aAAa,OAAO,aAAa;;;QAG/D,iBAAiB;;;qBAGJ,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAa,CAAC;;UAE7D,gBAAgB,KAAK,UAAU;;;mBAGtB,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;mCACX,aAAa;oCACZ,YAAY;oBAC5B,WAAW;sCACO,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;qBAMnC,eAAe;;;yCAGK,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;0BAKjC,WAAW;;;YAGzB,gCAAgC;;;;cAI9B,oBAAoB;;;;;;;GAO/B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,MAAM,EACJ,IAAI,EAAE,EACJ,UAAU,EAAE,EAAE,YAAY,EAAE,aAAa,EAAE,EAC3C,eAAe,EAAE,YAAY,EAC7B,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACxB,EACD,UAAU,EAAE,EACV,MAAM,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EACvC,IAAI,EACL,EACF,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;;aAEC,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;6BACX,aAAa;8BACZ,YAAY;iBACzB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAa,CAAC;gCACnC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;mCAIf,KAAK,CAAC,IAAI,CAAC,OAAO;QAC7C,gBAAgB;;;MAGlB,OAAO;QACT,GAAG,CAAA;;;;sBAIe,WAAW;;sBAEX,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC;;KAEjD;;MAEC,WAAW;;;;;GAKd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { createGlobalStyle, css, type DefaultTheme } from 'styled-components';\nimport { rem, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport { StyledAlert } from '../Badges/Alert';\nimport { StyledLink } from '../Link/Link';\nimport { StyledBareButton } from '../Button/BareButton';\nimport Button from '../Button';\nimport { StyledDrawer } from '../Drawer';\nimport { TouchDialog } from '../Dialog';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { useDirection } from '../../hooks';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  menuButtonWidth,\n  mobileHeaderHeight,\n  StyledCountIcon,\n  StyledNavItemIconBox,\n  StyledNavList,\n  StyledNavListItem,\n  StyledNavListItemVisualContainer,\n  StyledAppNav\n} from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const TouchAppShellGlobalStyle = createGlobalStyle<{\n  hasBottomTouchPanel?: boolean;\n  isMobileNav?: boolean;\n  theme?: DefaultTheme;\n}>`\n  :root,\n  :host {\n    --appshell-bottom-panel-offset: ${({ hasBottomTouchPanel }) =>\n      hasBottomTouchPanel ? '4rem' : '0rem'};\n    --appshell-bottom-panel-gap: ${({ hasBottomTouchPanel, theme }) =>\n      hasBottomTouchPanel ? `calc(2 * ${theme?.base.spacing})` : '0rem'};\n    --appshell-bottom-offset: ${({ hasBottomTouchPanel, isMobileNav }) =>\n      `calc(var(--appshell-hard-bottom-offset) + ${isMobileNav ? mobileHeaderHeight : '0rem'}${\n        hasBottomTouchPanel ? ' + var(--appshell-bottom-panel-offset)' : ''\n      })`};\n  }\n`;\n\nexport const StyledMainTouchAppShell = styled.div<{ active?: boolean }>(\n  ({ active, theme }) => css`\n    ${active &&\n    css`\n      background: ${theme.base.colors.black};\n    `}\n  `\n);\n\nStyledMainTouchAppShell.defaultProps = defaultThemeProp;\n\nexport const StyledSplitViewPanel = styled.div<{ active?: boolean }>(({ active, theme }) => {\n  const splitViewHeight = active\n    ? 'calc(var(--appshell-bottom-panel-offset, 0rem) + var(--appshell-bottom-panel-gap, 0rem))'\n    : '0rem';\n\n  return css`\n    position: fixed;\n    inset-block-end: var(--appshell-hard-bottom-offset, 0);\n    inset-inline: 0;\n    height: ${splitViewHeight};\n    background: ${theme.base.colors.black};\n  `;\n});\n\nStyledSplitViewPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPortalTouchDialog = styled(TouchDialog)(\n  () => css`\n    && {\n      pointer-events: auto;\n      inset-inline: 0;\n      inset-block-end: var(--appshell-hard-bottom-offset, 0);\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  `\n);\n\nStyledPortalTouchDialog.defaultProps = defaultThemeProp;\n\nexport const StyledMobileMoreMenu = styled(StyledAppNav)`\n  width: 100%;\n  height: 100%;\n\n  /* Reserve top space for the app header + top nav, but NOT the document\n     tabs strip - the mobile menu drawer covers content above the tab strip\n     too. */\n  padding-block-start: calc(var(--appshell-top-offset, 0rem) - var(--document-tabs-height, 0rem));\n  padding-block-end: var(--appshell-bottom-offset, ${mobileHeaderHeight});\n`;\n\nStyledMobileMoreMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled(Flex)<{ hasBottomTouchPanel?: boolean }>(({\n  theme,\n  hasBottomTouchPanel\n}) => {\n  const { rtl } = useDirection();\n  const {\n    base: {\n      'hit-area': { 'finger-min': hitAreaFinger },\n      'border-radius': borderRadius,\n      'font-size': fontSize,\n      'font-scale': fontScale\n    },\n    components: {\n      button: { 'focus-shadow': focusShadow, 'border-width': borderWidth },\n      text\n    }\n  } = theme;\n  const mobileNavColor = theme.components['app-shell'].nav.background;\n  const { foreground } = navContrastColors(theme);\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    z-index: calc(${theme.base['z-index'].drawer} + 1);\n    background: ${mobileNavColor};\n    border-radius: calc(2 * ${borderRadius});\n    color: ${foreground};\n    padding: 0.5rem;\n    position: fixed;\n    --mobile-nav-offset: ${hasBottomTouchPanel ? '0rem' : '0.75rem'};\n    inset-block-start: calc(\n      100dvh - var(--appshell-bottom-offset, ${mobileHeaderHeight}) + var(--mobile-nav-offset)\n    );\n    inset-inline-start: 50%;\n    transform: translateX(${rtl ? '50%' : '-50%'});\n    box-shadow: ${theme.base.shadow.low};\n\n    & + ${StyledDrawer} ${StyledDrawer} {\n      width: 100%;\n    }\n\n    > div:has(> ${StyledNavList}),\n    > div:has(> ${StyledNavList}) > ${StyledNavList}, > ${StyledNavList} {\n      display: contents;\n\n      ${StyledNavListItem} {\n        padding: 0;\n        margin: 0;\n        font-size: ${fontSizes[text.secondary['font-size'] as FontSize]};\n\n        ${StyledBareButton}, ${StyledLink} {\n          flex-direction: column;\n          justify-content: center;\n          width: ${rem(menuButtonWidth(theme))};\n          height: calc(0.25rem + ${hitAreaFinger});\n          border-radius: calc(2 * ${borderRadius});\n          border: ${borderWidth} solid transparent;\n          padding-block: calc(0.5 * ${theme.base.spacing});\n\n          &::before {\n            width: 0;\n          }\n\n          span:not(${StyledCountIcon}) {\n            width: inherit;\n            text-align: center;\n            padding-inline: calc(0.5 * ${theme.base.spacing});\n          }\n\n          &:enabled:focus-visible,\n          &:not([disabled]):focus-visible {\n            box-shadow: ${focusShadow};\n          }\n\n          ${StyledNavListItemVisualContainer} {\n            padding: 0;\n            margin: 0;\n\n            ${StyledNavItemIconBox} {\n              display: flex;\n            }\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileMoreMenuButton = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      'hit-area': { 'finger-min': hitAreaFinger },\n      'border-radius': borderRadius,\n      'font-size': fontSize,\n      'font-scale': fontScale\n    },\n    components: {\n      button: { 'border-width': borderWidth },\n      text\n    }\n  } = theme;\n  const { navOpen } = useContext(AppShellContext);\n  const { foreground } = navContrastColors(theme);\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    flex-direction: column;\n    width: ${rem(menuButtonWidth(theme))};\n    height: calc(0.25rem + ${hitAreaFinger});\n    border-radius: calc(2 * ${borderRadius});\n    font-size: ${fontSizes[text.secondary['font-size'] as FontSize]};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n\n    span {\n      width: inherit;\n      padding-inline: calc(0.5 * ${theme.base.spacing});\n      ${ellipsisOverflow}\n    }\n\n    ${navOpen &&\n    css`\n      &::before {\n        content: '';\n        position: absolute;\n        inset: calc(${borderWidth} * -1);\n        border-radius: inherit;\n        background: ${transparentize(0.85, foreground)};\n      }\n    `}\n\n    ${StyledAlert} {\n      position: absolute;\n      inset-block-start: calc(0.625rem / 2);\n      inset-inline-start: calc(50% + (0.625rem / 2));\n    }\n  `;\n});\n\nStyledMobileMoreMenuButton.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Dialog/TouchDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAkBnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAW5D,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CA6LlE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TouchDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAkBnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAY5D,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAkOlE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Dialog/TouchDialog.js

@@ -8,35 +8,40 @@ import Text from '../Text';
 import * as caretUp from '../Icon/icons/caret-up.icon';
 import * as timesIcon from '../Icon/icons/times.icon';
 import Flex from '../Flex';
-import Backdrop from '../Backdrop';
 import { focusNonInteractiveElement, getActiveElement, isInstance } from '../../utils';
 import Progress from '../Progress';
-import { StyledTouchDialogContent, StyledTouchDialogHeader, StyledTouchDialog, StyledExpandCollapse } from './TouchDialog.styles';
+import { StyledTouchDialogContent, StyledTouchDialogHeader, StyledTouchDialog, StyledTouchDialogBackdrop, StyledExpandCollapse } from './TouchDialog.styles';
 import { getTouchDialogTestIds } from './TouchDialog.test-ids';
 import { StyledChildrenWrap } from './Dialog.styles';
 registerIcon(caretUp, timesIcon);
 const drawerSizeMapping = {
     auto: 'auto',
+    compact: 'var(--touch-dialog-compact-height)',
     half: '50dvh',
     full: '90dvh'
 };
-const TouchDialog = forwardRef(function TouchDialog({ open, onDismiss: onDismissProp, children, size = 'half', onBeforeOpen, onAfterOpen: onAfterOpenProp, onBeforeClose, onAfterClose, heading, 'aria-label': ariaLabel, progress: progressProp, testId, ...restProps }, ref) {
+const TouchDialog = forwardRef(function TouchDialog({ open, onDismiss: onDismissProp, children, size = 'half', onBeforeOpen, onAfterOpen: onAfterOpenProp, onBeforeClose, onAfterClose, heading, 'aria-label': ariaLabel, progress: progressProp, outerClickAction = 'close', testId, ...restProps }, ref) {
     const dialogRef = useConsolidatedRef(ref);
     const backdropRef = useRef(null);
     const t = useI18n();
     const { portalTarget } = useConfiguration();
     const headingRef = useRef(null);
     const headingWrapperRef = useRef(null);
-    const [drawerSize, setDrawerSize] = useState(size);
+    const isFullCompact = size === 'full-compact';
+    const [drawerSize, setDrawerSize] = useState(isFullCompact ? 'full' : size);
     const headingId = useUID();
     const testIds = useTestIds(testId, getTouchDialogTestIds);
     const [drawerOpen, setDrawerOpen] = useState(false);
     const returnRef = useRef(null);
     useEffect(() => {
-        setDrawerSize(size);
+        setDrawerSize(isFullCompact ? 'full' : size);
     }, [size]);
-    const isAutoSize = size === 'auto';
-    useFocusTrap(open && drawerOpen ? dialogRef : null, false, [open, drawerOpen]);
+    const isAutoSize = size === 'auto' || isFullCompact;
+    const resetSize = useCallback(() => {
+        setDrawerSize(isFullCompact ? 'compact' : size);
+    }, [size]);
+    const shouldTrapFocus = open && drawerOpen && !(isFullCompact && drawerSize === 'compact');
+    useFocusTrap(shouldTrapFocus ? dialogRef : null, false, [shouldTrapFocus]);
     const setFocus = useCallback(() => {
         if (progressProp || !drawerOpen || dialogRef.current?.contains(getActiveElement()))
             return;
@@ -54,6 +59,14 @@ const TouchDialog = forwardRef(function TouchDialog({ open, onDismiss: onDismiss
         setDrawerOpen(false);
         onDismissProp?.();
     }, [onDismissProp]);
+    const onOuterClick = useCallback(() => {
+        if (outerClickAction === 'reset-size') {
+            resetSize();
+        }
+        else {
+            onDismiss();
+        }
+    }, [onDismiss, outerClickAction, resetSize]);
     const onAfterOpen = useCallback(() => {
         onAfterOpenProp?.();
         setFocus();
@@ -69,26 +82,38 @@ const TouchDialog = forwardRef(function TouchDialog({ open, onDismiss: onDismiss
         e.stopPropagation();
     }, dialogRef, [onDismiss]);
     const progress = (_jsx(Progress, { visible: !!progressProp, focusOnVisible: true, placement: 'local', message: typeof progressProp === 'string' ? progressProp : undefined }));
+    const isCompact = isFullCompact && drawerSize === 'compact';
+    const hasContent = children !== undefined || progressProp !== undefined;
     const dismissButton = (_jsx(Button, { "data-testid": testIds.dismiss, variant: 'simple', icon: true, label: t('dismiss'), onClick: onDismiss, children: _jsx(Icon, { name: 'times' }) }));
     useEvent('click', e => {
         if (open && e.target === backdropRef.current) {
-            onDismiss();
+            onOuterClick();
         }
-    }, { target: backdropRef.current, dependencies: [onDismiss, open] });
-    const content = (_jsx(Backdrop, { ref: backdropRef, open: open, onBeforeTransitionIn: () => {
+    }, { target: backdropRef, dependencies: [onOuterClick, open] });
+    const content = (_jsx(StyledTouchDialogBackdrop, { ref: backdropRef, open: open, "$compact": isCompact, onBeforeTransitionIn: () => {
             setDrawerOpen(true);
+            if (isFullCompact)
+                setDrawerSize('full');
             returnRef.current = getActiveElement();
             onBeforeOpen?.();
         }, onBeforeTransitionOut: () => {
             setDrawerOpen(false);
-            setDrawerSize(size);
         }, onAfterTransitionOut: () => {
+            resetSize();
             if (isInstance(returnRef.current, HTMLElement) &&
                 dialogRef.current?.contains(getActiveElement())) {
                 returnRef.current.focus();
             }
             onAfterClose?.();
-        }, children: _jsxs(StyledTouchDialog, { "data-testid": testIds.root, "aria-labelledby": heading ? headingId : undefined, "aria-label": ariaLabel, ...restProps, ref: dialogRef, open: drawerOpen, placement: 'bottom', position: 'fixed', size: drawerSizeMapping[drawerSize], shadow: true, onAfterOpen: onAfterOpen, onBeforeClose: onBeforeClose, role: 'dialog', "aria-modal": 'true', "aria-busy": !!progressProp, children: [_jsxs(Flex, { container: { direction: 'row', justify: 'between', alignItems: 'center' }, as: StyledTouchDialogHeader, children: [typeof heading === 'string' ? (_jsx(Text, { variant: 'h2', ref: headingRef, id: headingId, children: heading })) : (heading && (_jsx(Flex, { item: { grow: 1 }, ref: headingWrapperRef, id: headingId, children: heading }))), dismissButton] }), _jsxs(Flex, { as: StyledTouchDialogContent, container: { gap: 1, direction: 'column' }, children: [children && (_jsx(StyledChildrenWrap, { inert: progressProp ? '' : undefined, children: children })), progress] }), !isAutoSize && (_jsx(StyledExpandCollapse, { onToggle: () => setDrawerSize(prev => (prev === 'half' ? 'full' : 'half')), expanded: drawerSize === 'full', compact: true, iconOnly: true }))] }) }));
+        }, children: _jsxs(StyledTouchDialog, { "data-testid": testIds.root, "aria-labelledby": heading ? headingId : undefined, "aria-label": ariaLabel, ...restProps, ref: dialogRef, open: drawerOpen, placement: 'bottom', position: 'fixed', size: drawerSizeMapping[drawerSize], shadow: true, onAfterOpen: onAfterOpen, onBeforeClose: onBeforeClose, role: 'dialog', "aria-modal": shouldTrapFocus ? 'true' : undefined, "aria-busy": !!progressProp, children: [_jsxs(Flex, { container: { direction: 'row', justify: 'between', alignItems: 'center' }, as: StyledTouchDialogHeader, children: [typeof heading === 'string' ? (_jsx(Text, { variant: 'h2', ref: headingRef, id: headingId, children: heading })) : (heading && (_jsx(Flex, { item: { grow: 1 }, ref: headingWrapperRef, id: headingId, children: heading }))), dismissButton] }), hasContent && (_jsxs(Flex, { as: StyledTouchDialogContent, container: { gap: 1, direction: 'column' }, hidden: isCompact && !progressProp, children: [children && (_jsx(StyledChildrenWrap, { inert: progressProp || isCompact ? '' : undefined, hidden: isCompact, children: children })), progress] })), (!isAutoSize || isFullCompact) && (_jsx(StyledExpandCollapse, { onToggle: () => {
+                        setDrawerSize(prev => {
+                            if (isFullCompact)
+                                return prev === 'compact' ? 'full' : 'compact';
+                            if (prev === 'full')
+                                return 'half';
+                            return 'full';
+                        });
+                    }, expanded: drawerSize === 'full', compact: true, iconOnly: true }))] }) }));
     return portalTarget ? createPortal(content, portalTarget) : content;
 });
 export default TouchDialog;

package/lib/components/Dialog/TouchDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n  useConsolidatedRef,\n  useConfiguration,\n  useFocusTrap,\n  useI18n,\n  useTestIds,\n  useEscape,\n  useUID,\n  useEvent\n} from '../../hooks';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport Text from '../Text';\nimport * as caretUp from '../Icon/icons/caret-up.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport Flex from '../Flex';\nimport Backdrop from '../Backdrop';\nimport { focusNonInteractiveElement, getActiveElement, isInstance } from '../../utils';\nimport Progress from '../Progress';\n\nimport {\n  StyledTouchDialogContent,\n  StyledTouchDialogHeader,\n  StyledTouchDialog,\n  StyledExpandCollapse\n} from './TouchDialog.styles';\nimport { getTouchDialogTestIds } from './TouchDialog.test-ids';\nimport type { TouchDialogProps } from './TouchDialog.types';\nimport { StyledChildrenWrap } from './Dialog.styles';\n\nregisterIcon(caretUp, timesIcon);\n\nconst drawerSizeMapping = {\n  auto: 'auto',\n  half: '50dvh',\n  full: '90dvh'\n} as const;\n\nconst TouchDialog: ForwardRefForwardPropsComponent<TouchDialogProps> = forwardRef(\n  function TouchDialog(\n    {\n      open,\n      onDismiss: onDismissProp,\n      children,\n      size = 'half',\n      onBeforeOpen,\n      onAfterOpen: onAfterOpenProp,\n      onBeforeClose,\n      onAfterClose,\n      heading,\n      'aria-label': ariaLabel,\n      progress: progressProp,\n      testId,\n      ...restProps\n    }: PropsWithoutRef<TouchDialogProps>,\n    ref: TouchDialogProps['ref']\n  ) {\n    const dialogRef = useConsolidatedRef(ref);\n    const backdropRef = useRef<HTMLDivElement>(null);\n    const t = useI18n();\n    const { portalTarget } = useConfiguration();\n    const headingRef = useRef<HTMLHeadingElement>(null);\n    const headingWrapperRef = useRef<HTMLDivElement>(null);\n    const [drawerSize, setDrawerSize] = useState(size);\n    const headingId = useUID();\n    const testIds = useTestIds(testId, getTouchDialogTestIds);\n    const [drawerOpen, setDrawerOpen] = useState(false);\n    const returnRef = useRef<Element | null>(null);\n\n    useEffect(() => {\n      setDrawerSize(size);\n    }, [size]);\n\n    const isAutoSize = size === 'auto';\n\n    useFocusTrap(open && drawerOpen ? dialogRef : null, false, [open, drawerOpen]);\n\n    const setFocus = useCallback(() => {\n      if (progressProp || !drawerOpen || dialogRef.current?.contains(getActiveElement())) return;\n      if (headingWrapperRef.current) {\n        focusNonInteractiveElement(\n          headingWrapperRef.current.querySelector('h2') ?? headingWrapperRef.current,\n          ariaLabel\n        );\n      } else if (headingRef.current) {\n        focusNonInteractiveElement(headingRef.current, ariaLabel);\n      } else if (dialogRef.current) {\n        focusNonInteractiveElement(dialogRef.current, ariaLabel);\n      }\n    }, [progressProp, drawerOpen, heading, ariaLabel]);\n\n    const onDismiss = useCallback(() => {\n      setDrawerOpen(false);\n      onDismissProp?.();\n    }, [onDismissProp]);\n\n    const onAfterOpen = useCallback(() => {\n      onAfterOpenProp?.();\n      setFocus();\n    }, [onAfterOpenProp, setFocus]);\n\n    useEffect(() => {\n      if (!progressProp) {\n        // Delay focus to the next tick to allow progress to unmount so setFocus do not bail out\n        setTimeout(setFocus, 0);\n      }\n    }, [progressProp, setFocus]);\n\n    useEscape(\n      e => {\n        onDismiss?.();\n        e.stopPropagation();\n      },\n      dialogRef,\n      [onDismiss]\n    );\n\n    const progress = (\n      <Progress\n        visible={!!progressProp}\n        focusOnVisible\n        placement='local'\n        message={typeof progressProp === 'string' ? progressProp : undefined}\n      />\n    );\n\n    const dismissButton = (\n      <Button\n        data-testid={testIds.dismiss}\n        variant='simple'\n        icon\n        label={t('dismiss')}\n        onClick={onDismiss}\n      >\n        <Icon name='times' />\n      </Button>\n    );\n\n    useEvent(\n      'click',\n      e => {\n        if (open && e.target === backdropRef.current) {\n          onDismiss();\n        }\n      },\n      { target: backdropRef.current, dependencies: [onDismiss, open] }\n    );\n\n    const content = (\n      <Backdrop\n        ref={backdropRef}\n        open={open}\n        onBeforeTransitionIn={() => {\n          setDrawerOpen(true);\n          returnRef.current = getActiveElement();\n          onBeforeOpen?.();\n        }}\n        onBeforeTransitionOut={() => {\n          setDrawerOpen(false);\n          setDrawerSize(size);\n        }}\n        onAfterTransitionOut={() => {\n          if (\n            isInstance(returnRef.current, HTMLElement) &&\n            dialogRef.current?.contains(getActiveElement())\n          ) {\n            returnRef.current.focus();\n          }\n          onAfterClose?.();\n        }}\n      >\n        <StyledTouchDialog\n          data-testid={testIds.root}\n          aria-labelledby={heading ? headingId : undefined}\n          aria-label={ariaLabel}\n          {...restProps}\n          ref={dialogRef}\n          open={drawerOpen}\n          placement='bottom'\n          position='fixed'\n          size={drawerSizeMapping[drawerSize]}\n          shadow\n          onAfterOpen={onAfterOpen}\n          onBeforeClose={onBeforeClose}\n          role='dialog'\n          aria-modal='true'\n          aria-busy={!!progressProp}\n        >\n          <Flex\n            container={{ direction: 'row', justify: 'between', alignItems: 'center' }}\n            as={StyledTouchDialogHeader}\n          >\n            {typeof heading === 'string' ? (\n              <Text variant='h2' ref={headingRef} id={headingId}>\n                {heading}\n              </Text>\n            ) : (\n              heading && (\n                <Flex item={{ grow: 1 }} ref={headingWrapperRef} id={headingId}>\n                  {heading}\n                </Flex>\n              )\n            )}\n            {dismissButton}\n          </Flex>\n          <Flex as={StyledTouchDialogContent} container={{ gap: 1, direction: 'column' }}>\n            {children && (\n              <StyledChildrenWrap inert={progressProp ? '' : undefined}>\n                {children}\n              </StyledChildrenWrap>\n            )}\n            {progress}\n          </Flex>\n          {!isAutoSize && (\n            <StyledExpandCollapse\n              onToggle={() => setDrawerSize(prev => (prev === 'half' ? 'full' : 'half'))}\n              expanded={drawerSize === 'full'}\n              compact\n              iconOnly\n            />\n          )}\n        </StyledTouchDialog>\n      </Backdrop>\n    );\n\n    return portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default TouchDialog;\n"]}
+{"version":3,"file":"TouchDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGzC,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,OAAO,EACP,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,aAAa,CAAC;AAErB,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC;AACvD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,0BAA0B,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACvF,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,EACL,wBAAwB,EACxB,uBAAuB,EACvB,iBAAiB,EACjB,yBAAyB,EACzB,oBAAoB,EACrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAEjC,MAAM,iBAAiB,GAAG;IACxB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,oCAAoC;IAC7C,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,OAAO;CACL,CAAC;AAEX,MAAM,WAAW,GAAsD,UAAU,CAC/E,SAAS,WAAW,CAClB,EACE,IAAI,EACJ,SAAS,EAAE,aAAa,EACxB,QAAQ,EACR,IAAI,GAAG,MAAM,EACb,YAAY,EACZ,WAAW,EAAE,eAAe,EAC5B,aAAa,EACb,YAAY,EACZ,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,QAAQ,EAAE,YAAY,EACtB,gBAAgB,GAAG,OAAO,EAC1B,MAAM,EACN,GAAG,SAAS,EACsB,EACpC,GAA4B;IAE5B,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC5C,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,IAAI,KAAK,cAAc,CAAC;IAC9C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAC9B,CAAC;IACF,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC1D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,UAAU,GAAG,IAAI,KAAK,MAAM,IAAI,aAAa,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,eAAe,GAAG,IAAI,IAAI,UAAU,IAAI,CAAC,CAAC,aAAa,IAAI,UAAU,KAAK,SAAS,CAAC,CAAC;IAE3F,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAE3E,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,YAAY,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC;YAAE,OAAO;QAC3F,IAAI,iBAAiB,CAAC,OAAO,EAAE,CAAC;YAC9B,0BAA0B,CACxB,iBAAiB,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,iBAAiB,CAAC,OAAO,EAC1E,SAAS,CACV,CAAC;QACJ,CAAC;aAAM,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAC9B,0BAA0B,CAAC,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAC5D,CAAC;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YAC7B,0BAA0B,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,aAAa,EAAE,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,gBAAgB,KAAK,YAAY,EAAE,CAAC;YACtC,SAAS,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,SAAS,EAAE,CAAC;QACd,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC;IAE7C,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,eAAe,EAAE,EAAE,CAAC;QACpB,QAAQ,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,wFAAwF;YACxF,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,SAAS,CACP,CAAC,CAAC,EAAE;QACF,SAAS,EAAE,EAAE,CAAC;QACd,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,EACD,SAAS,EACT,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,QAAQ,GAAG,CACf,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,YAAY,EACvB,cAAc,QACd,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,GACpE,CACH,CAAC;IACF,MAAM,SAAS,GAAG,aAAa,IAAI,UAAU,KAAK,SAAS,CAAC;IAC5D,MAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,CAAC;IAExE,MAAM,aAAa,GAAG,CACpB,KAAC,MAAM,mBACQ,OAAO,CAAC,OAAO,EAC5B,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,EACnB,OAAO,EAAE,SAAS,YAElB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,CAAC;IAEF,QAAQ,CACN,OAAO,EACP,CAAC,CAAC,EAAE;QACF,IAAI,IAAI,IAAI,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,OAAO,EAAE,CAAC;YAC7C,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,EACD,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,CAC5D,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,KAAC,yBAAyB,IACxB,GAAG,EAAE,WAAW,EAChB,IAAI,EAAE,IAAI,cACA,SAAS,EACnB,oBAAoB,EAAE,GAAG,EAAE;YACzB,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,IAAI,aAAa;gBAAE,aAAa,CAAC,MAAM,CAAC,CAAC;YACzC,SAAS,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACvC,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC,EACD,qBAAqB,EAAE,GAAG,EAAE;YAC1B,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,oBAAoB,EAAE,GAAG,EAAE;YACzB,SAAS,EAAE,CAAC;YACZ,IACE,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC;gBAC1C,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,EAC/C,CAAC;gBACD,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC5B,CAAC;YACD,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC,YAED,MAAC,iBAAiB,mBACH,OAAO,CAAC,IAAI,qBACR,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,gBACpC,SAAS,KACjB,SAAS,EACb,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,UAAU,EAChB,SAAS,EAAC,QAAQ,EAClB,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAE,iBAAiB,CAAC,UAAU,CAAC,EACnC,MAAM,QACN,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAC,QAAQ,gBACD,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,eACrC,CAAC,CAAC,YAAY,aAEzB,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EACzE,EAAE,EAAE,uBAAuB,aAE1B,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,YAC9C,OAAO,GACH,CACR,CAAC,CAAC,CAAC,CACF,OAAO,IAAI,CACT,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,EAAE,EAAE,SAAS,YAC3D,OAAO,GACH,CACR,CACF,EACA,aAAa,IACT,EACN,UAAU,IAAI,CACb,MAAC,IAAI,IACH,EAAE,EAAE,wBAAwB,EAC5B,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC1C,MAAM,EAAE,SAAS,IAAI,CAAC,YAAY,aAEjC,QAAQ,IAAI,CACX,KAAC,kBAAkB,IACjB,KAAK,EAAE,YAAY,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACjD,MAAM,EAAE,SAAS,YAEhB,QAAQ,GACU,CACtB,EACA,QAAQ,IACJ,CACR,EACA,CAAC,CAAC,UAAU,IAAI,aAAa,CAAC,IAAI,CACjC,KAAC,oBAAoB,IACnB,QAAQ,EAAE,GAAG,EAAE;wBACb,aAAa,CAAC,IAAI,CAAC,EAAE;4BACnB,IAAI,aAAa;gCAAE,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;4BAClE,IAAI,IAAI,KAAK,MAAM;gCAAE,OAAO,MAAM,CAAC;4BACnC,OAAO,MAAM,CAAC;wBAChB,CAAC,CAAC,CAAC;oBACL,CAAC,EACD,QAAQ,EAAE,UAAU,KAAK,MAAM,EAC/B,OAAO,QACP,QAAQ,SACR,CACH,IACiB,GACM,CAC7B,CAAC;IAEF,OAAO,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;AACtE,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n  useConsolidatedRef,\n  useConfiguration,\n  useFocusTrap,\n  useI18n,\n  useTestIds,\n  useEscape,\n  useUID,\n  useEvent\n} from '../../hooks';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport Text from '../Text';\nimport * as caretUp from '../Icon/icons/caret-up.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport Flex from '../Flex';\nimport { focusNonInteractiveElement, getActiveElement, isInstance } from '../../utils';\nimport Progress from '../Progress';\n\nimport {\n  StyledTouchDialogContent,\n  StyledTouchDialogHeader,\n  StyledTouchDialog,\n  StyledTouchDialogBackdrop,\n  StyledExpandCollapse\n} from './TouchDialog.styles';\nimport { getTouchDialogTestIds } from './TouchDialog.test-ids';\nimport type { TouchDialogProps } from './TouchDialog.types';\nimport { StyledChildrenWrap } from './Dialog.styles';\n\nregisterIcon(caretUp, timesIcon);\n\nconst drawerSizeMapping = {\n  auto: 'auto',\n  compact: 'var(--touch-dialog-compact-height)',\n  half: '50dvh',\n  full: '90dvh'\n} as const;\n\nconst TouchDialog: ForwardRefForwardPropsComponent<TouchDialogProps> = forwardRef(\n  function TouchDialog(\n    {\n      open,\n      onDismiss: onDismissProp,\n      children,\n      size = 'half',\n      onBeforeOpen,\n      onAfterOpen: onAfterOpenProp,\n      onBeforeClose,\n      onAfterClose,\n      heading,\n      'aria-label': ariaLabel,\n      progress: progressProp,\n      outerClickAction = 'close',\n      testId,\n      ...restProps\n    }: PropsWithoutRef<TouchDialogProps>,\n    ref: TouchDialogProps['ref']\n  ) {\n    const dialogRef = useConsolidatedRef(ref);\n    const backdropRef = useRef<HTMLDivElement>(null);\n    const t = useI18n();\n    const { portalTarget } = useConfiguration();\n    const headingRef = useRef<HTMLHeadingElement>(null);\n    const headingWrapperRef = useRef<HTMLDivElement>(null);\n    const isFullCompact = size === 'full-compact';\n    const [drawerSize, setDrawerSize] = useState<'auto' | 'compact' | 'half' | 'full'>(\n      isFullCompact ? 'full' : size\n    );\n    const headingId = useUID();\n    const testIds = useTestIds(testId, getTouchDialogTestIds);\n    const [drawerOpen, setDrawerOpen] = useState(false);\n    const returnRef = useRef<Element | null>(null);\n\n    useEffect(() => {\n      setDrawerSize(isFullCompact ? 'full' : size);\n    }, [size]);\n\n    const isAutoSize = size === 'auto' || isFullCompact;\n\n    const resetSize = useCallback(() => {\n      setDrawerSize(isFullCompact ? 'compact' : size);\n    }, [size]);\n\n    const shouldTrapFocus = open && drawerOpen && !(isFullCompact && drawerSize === 'compact');\n\n    useFocusTrap(shouldTrapFocus ? dialogRef : null, false, [shouldTrapFocus]);\n\n    const setFocus = useCallback(() => {\n      if (progressProp || !drawerOpen || dialogRef.current?.contains(getActiveElement())) return;\n      if (headingWrapperRef.current) {\n        focusNonInteractiveElement(\n          headingWrapperRef.current.querySelector('h2') ?? headingWrapperRef.current,\n          ariaLabel\n        );\n      } else if (headingRef.current) {\n        focusNonInteractiveElement(headingRef.current, ariaLabel);\n      } else if (dialogRef.current) {\n        focusNonInteractiveElement(dialogRef.current, ariaLabel);\n      }\n    }, [progressProp, drawerOpen, heading, ariaLabel]);\n\n    const onDismiss = useCallback(() => {\n      setDrawerOpen(false);\n      onDismissProp?.();\n    }, [onDismissProp]);\n\n    const onOuterClick = useCallback(() => {\n      if (outerClickAction === 'reset-size') {\n        resetSize();\n      } else {\n        onDismiss();\n      }\n    }, [onDismiss, outerClickAction, resetSize]);\n\n    const onAfterOpen = useCallback(() => {\n      onAfterOpenProp?.();\n      setFocus();\n    }, [onAfterOpenProp, setFocus]);\n\n    useEffect(() => {\n      if (!progressProp) {\n        // Delay focus to the next tick to allow progress to unmount so setFocus do not bail out\n        setTimeout(setFocus, 0);\n      }\n    }, [progressProp, setFocus]);\n\n    useEscape(\n      e => {\n        onDismiss?.();\n        e.stopPropagation();\n      },\n      dialogRef,\n      [onDismiss]\n    );\n\n    const progress = (\n      <Progress\n        visible={!!progressProp}\n        focusOnVisible\n        placement='local'\n        message={typeof progressProp === 'string' ? progressProp : undefined}\n      />\n    );\n    const isCompact = isFullCompact && drawerSize === 'compact';\n    const hasContent = children !== undefined || progressProp !== undefined;\n\n    const dismissButton = (\n      <Button\n        data-testid={testIds.dismiss}\n        variant='simple'\n        icon\n        label={t('dismiss')}\n        onClick={onDismiss}\n      >\n        <Icon name='times' />\n      </Button>\n    );\n\n    useEvent(\n      'click',\n      e => {\n        if (open && e.target === backdropRef.current) {\n          onOuterClick();\n        }\n      },\n      { target: backdropRef, dependencies: [onOuterClick, open] }\n    );\n\n    const content = (\n      <StyledTouchDialogBackdrop\n        ref={backdropRef}\n        open={open}\n        $compact={isCompact}\n        onBeforeTransitionIn={() => {\n          setDrawerOpen(true);\n          if (isFullCompact) setDrawerSize('full');\n          returnRef.current = getActiveElement();\n          onBeforeOpen?.();\n        }}\n        onBeforeTransitionOut={() => {\n          setDrawerOpen(false);\n        }}\n        onAfterTransitionOut={() => {\n          resetSize();\n          if (\n            isInstance(returnRef.current, HTMLElement) &&\n            dialogRef.current?.contains(getActiveElement())\n          ) {\n            returnRef.current.focus();\n          }\n          onAfterClose?.();\n        }}\n      >\n        <StyledTouchDialog\n          data-testid={testIds.root}\n          aria-labelledby={heading ? headingId : undefined}\n          aria-label={ariaLabel}\n          {...restProps}\n          ref={dialogRef}\n          open={drawerOpen}\n          placement='bottom'\n          position='fixed'\n          size={drawerSizeMapping[drawerSize]}\n          shadow\n          onAfterOpen={onAfterOpen}\n          onBeforeClose={onBeforeClose}\n          role='dialog'\n          aria-modal={shouldTrapFocus ? 'true' : undefined}\n          aria-busy={!!progressProp}\n        >\n          <Flex\n            container={{ direction: 'row', justify: 'between', alignItems: 'center' }}\n            as={StyledTouchDialogHeader}\n          >\n            {typeof heading === 'string' ? (\n              <Text variant='h2' ref={headingRef} id={headingId}>\n                {heading}\n              </Text>\n            ) : (\n              heading && (\n                <Flex item={{ grow: 1 }} ref={headingWrapperRef} id={headingId}>\n                  {heading}\n                </Flex>\n              )\n            )}\n            {dismissButton}\n          </Flex>\n          {hasContent && (\n            <Flex\n              as={StyledTouchDialogContent}\n              container={{ gap: 1, direction: 'column' }}\n              hidden={isCompact && !progressProp}\n            >\n              {children && (\n                <StyledChildrenWrap\n                  inert={progressProp || isCompact ? '' : undefined}\n                  hidden={isCompact}\n                >\n                  {children}\n                </StyledChildrenWrap>\n              )}\n              {progress}\n            </Flex>\n          )}\n          {(!isAutoSize || isFullCompact) && (\n            <StyledExpandCollapse\n              onToggle={() => {\n                setDrawerSize(prev => {\n                  if (isFullCompact) return prev === 'compact' ? 'full' : 'compact';\n                  if (prev === 'full') return 'half';\n                  return 'full';\n                });\n              }}\n              expanded={drawerSize === 'full'}\n              compact\n              iconOnly\n            />\n          )}\n        </StyledTouchDialog>\n      </StyledTouchDialogBackdrop>\n    );\n\n    return portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default TouchDialog;\n"]}

package/lib/components/Dialog/TouchDialog.styles.d.ts

@@ -2,6 +2,13 @@ export declare const StyledExpandCollapse: import("styled-components/dist/types"
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../ExpandCollapse").ExpandCollapseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledTouchDialog: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Drawer").DrawerProps & import("../..").ForwardProps, never>> & string & Omit<import("react").FunctionComponent<import("../Drawer").DrawerProps & import("../..").ForwardProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledTouchDialogBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Backdrop").BackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
+    $compact?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Backdrop").BackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    getTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
+}, keyof import("react").Component<any, {}, any>>;
 export declare const StyledTouchDialogHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledTouchDialogContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 //# sourceMappingURL=TouchDialog.styles.d.ts.map

package/lib/components/Dialog/TouchDialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2OAQhC,CAAC;AAIF,eAAO,MAAM,iBAAiB,mVAqB7B,CAAC;AAIF,eAAO,MAAM,uBAAuB,6NASnC,CAAC;AAIF,eAAO,MAAM,wBAAwB,6NAepC,CAAC"}
+{"version":3,"file":"TouchDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,oBAAoB;;2OAQhC,CAAC;AAIF,eAAO,MAAM,iBAAiB,mVAyB7B,CAAC;AAIF,eAAO,MAAM,yBAAyB;;;eAAiC,OAAO;;;iDAM7E,CAAC;AAIF,eAAO,MAAM,uBAAuB,6NASnC,CAAC;AAIF,eAAO,MAAM,wBAAwB,6NAoBpC,CAAC"}

package/lib/components/Dialog/TouchDialog.styles.js

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import { StyledButton } from '../Button';
+import Backdrop from '../Backdrop';
 import Drawer from '../Drawer';
 import { ExpandCollapseButton } from '../ExpandCollapse';
 import { StyledIcon } from '../Icon';
@@ -22,8 +23,12 @@ export const StyledTouchDialog = styled(Drawer)(({ theme: { base, components } }
     inset-block-end: calc(${base.spacing} * 0.5);
     inset-inline: calc(${base.spacing} * 0.5);
     max-height: 90dvh;
+    --touch-dialog-compact-height: calc(
+      ${base['hit-area'].compact} + ${base.spacing} + ${base['hit-area']['finger-min']}
+    );
     border-radius: ${components.card['border-radius']};
     width: auto;
+    overflow: hidden;
     transition-property: transform, box-shadow, opacity, height;
 
     @media (height < 31.25rem) {
@@ -36,6 +41,11 @@ export const StyledTouchDialog = styled(Drawer)(({ theme: { base, components } }
     }
   `);
 StyledTouchDialog.defaultProps = defaultThemeProp;
+export const StyledTouchDialogBackdrop = styled(Backdrop)(({ $compact }) => $compact &&
+    css `
+      inset-block-start: calc(100dvh - var(--appshell-bottom-panel-offset, 0));
+    `);
+StyledTouchDialogBackdrop.defaultProps = defaultThemeProp;
 export const StyledTouchDialogHeader = styled.div(({ theme: { base } }) => css `
     padding-inline: ${base.spacing};
     padding-block-start: ${base.spacing};
@@ -52,6 +62,11 @@ export const StyledTouchDialogContent = styled.div(({ theme: { base } }) => css
     position: relative;
     padding-block-start: calc(${base.spacing} * 0.5);
 
+    &[hidden],
+    ${StyledChildrenWrap}[hidden] {
+      display: none;
+    }
+
     ${StyledChildrenWrap} {
       height: 100%;
       display: flex;

package/lib/components/Dialog/TouchDialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDialog.styles.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAA;;;;;6BAKnC,UAAU;;;CAGtC,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAC7C,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;kBAGxB,UAAU,CAAC,OAAO,CAAC,UAAU;4BACnB,IAAI,CAAC,OAAO;yBACf,IAAI,CAAC,OAAO;;qBAEhB,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;YASzC,oBAAoB;6BACH,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;;GAElD,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;sBACR,IAAI,CAAC,OAAO;2BACP,IAAI,CAAC,OAAO;;MAEjC,YAAY;;;GAGf,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAChD,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;gCAKE,IAAI,CAAC,OAAO;;MAEtC,kBAAkB;;;;wBAIA,IAAI,CAAC,OAAO;;GAEjC,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport Drawer from '../Drawer';\nimport { ExpandCollapseButton } from '../ExpandCollapse';\nimport { StyledIcon } from '../Icon';\n\nimport { StyledChildrenWrap } from './Dialog.styles';\n\nexport const StyledExpandCollapse = styled(ExpandCollapseButton)`\n  position: absolute;\n  inset-block-start: 0;\n  width: 100%;\n\n  &[aria-expanded='false'] ${StyledIcon} {\n    transform: rotate(-90deg);\n  }\n`;\n\nStyledExpandCollapse.defaultProps = defaultThemeProp;\n\nexport const StyledTouchDialog = styled(Drawer)(\n  ({ theme: { base, components } }) => css`\n    display: flex;\n    flex-direction: column;\n    background: ${components.popover.background};\n    inset-block-end: calc(${base.spacing} * 0.5);\n    inset-inline: calc(${base.spacing} * 0.5);\n    max-height: 90dvh;\n    border-radius: ${components.card['border-radius']};\n    width: auto;\n    transition-property: transform, box-shadow, opacity, height;\n\n    @media (height < 31.25rem) {\n      overflow-y: auto;\n      display: block;\n    }\n\n    &:has(${StyledExpandCollapse}) {\n      padding-block-start: ${base['hit-area'].compact};\n    }\n  `\n);\n\nStyledTouchDialog.defaultProps = defaultThemeProp;\n\nexport const StyledTouchDialogHeader = styled.div(\n  ({ theme: { base } }) => css`\n    padding-inline: ${base.spacing};\n    padding-block-start: ${base.spacing};\n\n    ${StyledButton} {\n      margin-inline-start: auto;\n    }\n  `\n);\n\nStyledTouchDialogHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTouchDialogContent = styled.div(\n  ({ theme: { base } }) => css`\n    min-height: 0;\n    overflow: auto;\n    height: 100%;\n    position: relative;\n    padding-block-start: calc(${base.spacing} * 0.5);\n\n    ${StyledChildrenWrap} {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      padding-inline: ${base.spacing};\n    }\n  `\n);\n\nStyledTouchDialogContent.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"TouchDialog.styles.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAA;;;;;6BAKnC,UAAU;;;CAGtC,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAC7C,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;kBAGxB,UAAU,CAAC,OAAO,CAAC,UAAU;4BACnB,IAAI,CAAC,OAAO;yBACf,IAAI,CAAC,OAAO;;;QAG7B,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,MAAM,IAAI,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;qBAEjE,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;YAUzC,oBAAoB;6BACH,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;;GAElD,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,QAAQ,CAAC,CACvD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACf,QAAQ;IACR,GAAG,CAAA;;KAEF,CACJ,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;sBACR,IAAI,CAAC,OAAO;2BACP,IAAI,CAAC,OAAO;;MAEjC,YAAY;;;GAGf,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAChD,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;gCAKE,IAAI,CAAC,OAAO;;;MAGtC,kBAAkB;;;;MAIlB,kBAAkB;;;;wBAIA,IAAI,CAAC,OAAO;;GAEjC,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport Backdrop from '../Backdrop';\nimport Drawer from '../Drawer';\nimport { ExpandCollapseButton } from '../ExpandCollapse';\nimport { StyledIcon } from '../Icon';\n\nimport { StyledChildrenWrap } from './Dialog.styles';\n\nexport const StyledExpandCollapse = styled(ExpandCollapseButton)`\n  position: absolute;\n  inset-block-start: 0;\n  width: 100%;\n\n  &[aria-expanded='false'] ${StyledIcon} {\n    transform: rotate(-90deg);\n  }\n`;\n\nStyledExpandCollapse.defaultProps = defaultThemeProp;\n\nexport const StyledTouchDialog = styled(Drawer)(\n  ({ theme: { base, components } }) => css`\n    display: flex;\n    flex-direction: column;\n    background: ${components.popover.background};\n    inset-block-end: calc(${base.spacing} * 0.5);\n    inset-inline: calc(${base.spacing} * 0.5);\n    max-height: 90dvh;\n    --touch-dialog-compact-height: calc(\n      ${base['hit-area'].compact} + ${base.spacing} + ${base['hit-area']['finger-min']}\n    );\n    border-radius: ${components.card['border-radius']};\n    width: auto;\n    overflow: hidden;\n    transition-property: transform, box-shadow, opacity, height;\n\n    @media (height < 31.25rem) {\n      overflow-y: auto;\n      display: block;\n    }\n\n    &:has(${StyledExpandCollapse}) {\n      padding-block-start: ${base['hit-area'].compact};\n    }\n  `\n);\n\nStyledTouchDialog.defaultProps = defaultThemeProp;\n\nexport const StyledTouchDialogBackdrop = styled(Backdrop)<{ $compact?: boolean }>(\n  ({ $compact }) =>\n    $compact &&\n    css`\n      inset-block-start: calc(100dvh - var(--appshell-bottom-panel-offset, 0));\n    `\n);\n\nStyledTouchDialogBackdrop.defaultProps = defaultThemeProp;\n\nexport const StyledTouchDialogHeader = styled.div(\n  ({ theme: { base } }) => css`\n    padding-inline: ${base.spacing};\n    padding-block-start: ${base.spacing};\n\n    ${StyledButton} {\n      margin-inline-start: auto;\n    }\n  `\n);\n\nStyledTouchDialogHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTouchDialogContent = styled.div(\n  ({ theme: { base } }) => css`\n    min-height: 0;\n    overflow: auto;\n    height: 100%;\n    position: relative;\n    padding-block-start: calc(${base.spacing} * 0.5);\n\n    &[hidden],\n    ${StyledChildrenWrap}[hidden] {\n      display: none;\n    }\n\n    ${StyledChildrenWrap} {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      padding-inline: ${base.spacing};\n    }\n  `\n);\n\nStyledTouchDialogContent.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Dialog/TouchDialog.types.d.ts

@@ -24,12 +24,13 @@ export interface TouchDialogProps extends BaseProps, TestIdProp {
     progress?: boolean | ProgressProps['message'];
     /**
      * The initial height of the TouchDialog panel.
-     * - `'auto'` — height is driven by content (capped at 90% of the viewport).
+     * - `'auto'` — height is driven by content (capped at 90% of the viewport), without an expand control.
+     * - `'full-compact'` — initially opens to full height, with the option to collapse to a compact header.
      * - `'half'` — half the viewport height.
      * - `'full'` — opens to the maximum height (90% of the viewport).
      * @default 'half'
      */
-    size?: 'auto' | 'half' | 'full';
+    size?: 'auto' | 'full-compact' | 'half' | 'full';
     /** Callback fired before the TouchDialog starts opening. */
     onBeforeOpen?: DrawerProps['onBeforeOpen'];
     /** Callback fired after the TouchDialog finishes opening. */
@@ -38,6 +39,13 @@ export interface TouchDialogProps extends BaseProps, TestIdProp {
     onBeforeClose?: DrawerProps['onBeforeClose'];
     /** Callback fired after the TouchDialog finishes closing. */
     onAfterClose?: DrawerProps['onAfterClose'];
+    /**
+     * Action performed when a click occurs outside the dialog.
+     * - `'close'` — dismisses the dialog.
+     * - `'reset-size'` — resets to `compact` for `full-compact`, otherwise to the configured size.
+     * @default 'close'
+     */
+    outerClickAction?: 'close' | 'reset-size';
     /** Ref for the dialog panel element. */
     ref?: Ref<HTMLDivElement>;
 }

package/lib/components/Dialog/TouchDialog.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,UAAU;IAC7D;;;;OAIG;IACH,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,yIAAyI;IACzI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChC,4DAA4D;IAC5D,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,6DAA6D;IAC7D,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,6DAA6D;IAC7D,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,wCAAwC;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"TouchDialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,UAAU;IAC7D;;;;OAIG;IACH,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,yIAAyI;IACzI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;IACjD,4DAA4D;IAC5D,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,6DAA6D;IAC7D,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,6DAA6D;IAC7D,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAC1C,wCAAwC;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/Dialog/TouchDialog.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDialog.types.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref, ReactNode } from 'react';\n\nimport type { BaseProps, TestIdProp } from '../../types';\nimport type { DrawerProps } from '../Drawer';\nimport type { ProgressProps } from '../Progress';\n\nexport interface TouchDialogProps extends BaseProps, TestIdProp {\n  /**\n   * Whether the TouchDialog should be open or closed.\n   * The component should not be unmounted before onAfterClose is called,\n   * otherwise the closing animation will be interrupted.\n   */\n  open: DrawerProps['open'];\n  /**\n   * Callback fired when the TouchDialog is dismissed with user intent.\n   * The parent component should toggle the `open` prop.\n   */\n  onDismiss: () => void;\n  /** Heading text displayed at the top of the drawer. */\n  heading?: ReactNode;\n  /** Aria label for the dialog, used when there is no heading. */\n  'aria-label'?: string;\n  /** Content of the TouchDialog. */\n  children?: DrawerProps['children'];\n  /** If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well. */\n  progress?: boolean | ProgressProps['message'];\n  /**\n   * The initial height of the TouchDialog panel.\n   * - `'auto'` — height is driven by content (capped at 90% of the viewport).\n   * - `'half'` — half the viewport height.\n   * - `'full'` — opens to the maximum height (90% of the viewport).\n   * @default 'half'\n   */\n  size?: 'auto' | 'half' | 'full';\n  /** Callback fired before the TouchDialog starts opening. */\n  onBeforeOpen?: DrawerProps['onBeforeOpen'];\n  /** Callback fired after the TouchDialog finishes opening. */\n  onAfterOpen?: DrawerProps['onAfterOpen'];\n  /** Callback fired before the TouchDialog starts closing. */\n  onBeforeClose?: DrawerProps['onBeforeClose'];\n  /** Callback fired after the TouchDialog finishes closing. */\n  onAfterClose?: DrawerProps['onAfterClose'];\n  /** Ref for the dialog panel element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"TouchDialog.types.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref, ReactNode } from 'react';\n\nimport type { BaseProps, TestIdProp } from '../../types';\nimport type { DrawerProps } from '../Drawer';\nimport type { ProgressProps } from '../Progress';\n\nexport interface TouchDialogProps extends BaseProps, TestIdProp {\n  /**\n   * Whether the TouchDialog should be open or closed.\n   * The component should not be unmounted before onAfterClose is called,\n   * otherwise the closing animation will be interrupted.\n   */\n  open: DrawerProps['open'];\n  /**\n   * Callback fired when the TouchDialog is dismissed with user intent.\n   * The parent component should toggle the `open` prop.\n   */\n  onDismiss: () => void;\n  /** Heading text displayed at the top of the drawer. */\n  heading?: ReactNode;\n  /** Aria label for the dialog, used when there is no heading. */\n  'aria-label'?: string;\n  /** Content of the TouchDialog. */\n  children?: DrawerProps['children'];\n  /** If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well. */\n  progress?: boolean | ProgressProps['message'];\n  /**\n   * The initial height of the TouchDialog panel.\n   * - `'auto'` — height is driven by content (capped at 90% of the viewport), without an expand control.\n   * - `'full-compact'` — initially opens to full height, with the option to collapse to a compact header.\n   * - `'half'` — half the viewport height.\n   * - `'full'` — opens to the maximum height (90% of the viewport).\n   * @default 'half'\n   */\n  size?: 'auto' | 'full-compact' | 'half' | 'full';\n  /** Callback fired before the TouchDialog starts opening. */\n  onBeforeOpen?: DrawerProps['onBeforeOpen'];\n  /** Callback fired after the TouchDialog finishes opening. */\n  onAfterOpen?: DrawerProps['onAfterOpen'];\n  /** Callback fired before the TouchDialog starts closing. */\n  onBeforeClose?: DrawerProps['onBeforeClose'];\n  /** Callback fired after the TouchDialog finishes closing. */\n  onAfterClose?: DrawerProps['onAfterClose'];\n  /**\n   * Action performed when a click occurs outside the dialog.\n   * - `'close'` — dismisses the dialog.\n   * - `'reset-size'` — resets to `compact` for `full-compact`, otherwise to the configured size.\n   * @default 'close'\n   */\n  outerClickAction?: 'close' | 'reset-size';\n  /** Ref for the dialog panel element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/Modal/DockedModals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DockedModals.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAO,MAAM,OAAO,CAAC;AAoB5C,QAAA,MAAM,YAAY;eACI,SAAS;kDAW7B,CAAC;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DockedModals.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAO,MAAM,OAAO,CAAC;AAqB5C,QAAA,MAAM,YAAY;eACI,SAAS;kDAW7B,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/lib/components/Modal/DockedModals.js

@@ -7,8 +7,9 @@ const StyledDockedModals = styled.div(({ theme }) => {
     return css `
     position: fixed;
     z-index: ${theme.base['z-index'].modal};
-    /* stylelint-disable-next-line length-zero-no-unit */
-    inset-block-end: var(--appshell-bottom-offset, 0rem);
+    inset-block-end: calc(
+      var(--appshell-bottom-offset, 0rem) + var(--appshell-bottom-panel-gap, 0rem)
+    );
     right: 0;
     pointer-events: none;
     width: 100%;

package/lib/components/Modal/DockedModals.js.map

@@ -1 +1 @@
-{"version":3,"file":"DockedModals.js","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;;;;;GAMvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,YAAY,CACnD,KAA+B,EAC/B,GAAwB;IAExB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EACrE,EAAE,EAAE,kBAAkB,KAClB,KAAK,EACT,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nconst StyledDockedModals = styled.div(({ theme }) => {\n  return css`\n    position: fixed;\n    z-index: ${theme.base['z-index'].modal};\n    /* stylelint-disable-next-line length-zero-no-unit */\n    inset-block-end: var(--appshell-bottom-offset, 0rem);\n    right: 0;\n    pointer-events: none;\n    width: 100%;\n  `;\n});\n\nStyledDockedModals.defaultProps = defaultThemeProp;\n\nconst DockedModals = forwardRef(function DockedModals(\n  props: { children?: ReactNode },\n  ref: Ref<HTMLDivElement>\n) {\n  return (\n    <Flex\n      container={{ justify: 'end', alignItems: 'end', gap: 2, pad: [0, 2] }}\n      as={StyledDockedModals}\n      {...props}\n      ref={ref}\n    />\n  );\n});\n\nexport default DockedModals;\n"]}
+{"version":3,"file":"DockedModals.js","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;;;;;;GAOvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,YAAY,CACnD,KAA+B,EAC/B,GAAwB;IAExB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EACrE,EAAE,EAAE,kBAAkB,KAClB,KAAK,EACT,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nconst StyledDockedModals = styled.div(({ theme }) => {\n  return css`\n    position: fixed;\n    z-index: ${theme.base['z-index'].modal};\n    inset-block-end: calc(\n      var(--appshell-bottom-offset, 0rem) + var(--appshell-bottom-panel-gap, 0rem)\n    );\n    right: 0;\n    pointer-events: none;\n    width: 100%;\n  `;\n});\n\nStyledDockedModals.defaultProps = defaultThemeProp;\n\nconst DockedModals = forwardRef(function DockedModals(\n  props: { children?: ReactNode },\n  ref: Ref<HTMLDivElement>\n) {\n  return (\n    <Flex\n      container={{ justify: 'end', alignItems: 'end', gap: 2, pad: [0, 2] }}\n      as={StyledDockedModals}\n      {...props}\n      ref={ref}\n    />\n  );\n});\n\nexport default DockedModals;\n"]}

package/lib/theme/themes/orionDarkTheme.json

@@ -15,7 +15,8 @@
             "semi-bold": 400,
             "normal": 300
         },
-        "case-type-colors": "header-and-icon"
+        "case-type-colors": "header-and-icon",
+        "icon-set": "streamline"
     },
     "components": {
         "agent": {

package/lib/theme/themes/orionTheme.json

@@ -18,7 +18,7 @@
             "semi-bold": 400,
             "normal": 300
         },
-        "case-type-colors": "header-and-icon"
+        "icon-set": "streamline"
     },
     "components": {
         "agent": {
@@ -78,8 +78,8 @@
             "stages": {
                 "status": {
                     "completed": {
-                        "background": "#D0DDFF",
-                        "foreground-color": "#1F9139"
+                        "background": "#CEEEC4",
+                        "foreground-color": "#03681C"
                     },
                     "current": {
                         "background": "#CFE4FF"

package/lib/theme/themes/virgoDarkTheme.json

@@ -26,7 +26,8 @@
             "high": "0 0 0 1px #2f3546, 0 0.125rem 1.5rem rgba(0,0,0,.8)",
             "low": "0 0 0 1px #2f3546, 0 0.125rem 0.5rem rgba(0,0,0,.6)"
         },
-        "spacing": "0.65rem"
+        "spacing": "0.65rem",
+        "icon-set": "streamline"
     },
     "components": {
         "avatar": {

package/lib/theme/themes/virgoTheme.json

@@ -22,7 +22,8 @@
             "focus-solid": "0 0 0 0.0625rem rgb(63, 87, 228)",
             "focus-filter": "drop-shadow(0 0 0.125rem rgba(63, 87, 228, 0.30))"
         },
-        "spacing": "0.65rem"
+        "spacing": "0.65rem",
+        "icon-set": "streamline"
     },
     "components": {
         "avatar": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "10.0.0-build.9.1",
+  "version": "10.0.0-build.9.2",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",