@pega/cosmos-react-core 9.17.1 → 9.18.0

package/lib/components/Dialog/TouchDialog.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useConsolidatedRef, useConfiguration, useFocusTrap, useI18n, useTestIds, useEscape, useUID } from '../../hooks';
+import Button from '../Button';
+import Icon, { registerIcon } from '../Icon';
+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 { getTouchDialogTestIds } from './TouchDialog.test-ids';
+import { StyledChildrenWrap } from './Dialog.styles';
+registerIcon(caretUp, timesIcon);
+const drawerSizeMapping = {
+    auto: 'auto',
+    half: '50dvh',
+    full: '90dvh'
+};
+export const TouchDialog = forwardRef(function TouchDialog({ open, onDismiss: onDismissProp, children, size = 'half', onBeforeOpen, onAfterOpen: onAfterOpenProp, onBeforeClose, onAfterClose, heading, progress: progressProp, testId, ...restProps }, ref) {
+    const dialogRef = useConsolidatedRef(ref);
+    const t = useI18n();
+    const { portalTarget } = useConfiguration();
+    const headingRef = useRef(null);
+    const [drawerSize, setDrawerSize] = useState(size);
+    const headingId = useUID();
+    const testIds = useTestIds(testId, getTouchDialogTestIds);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const returnRef = useRef(null);
+    useEffect(() => {
+        setDrawerSize(size);
+    }, [size]);
+    const isAutoSize = size === 'auto';
+    useFocusTrap(open && drawerOpen ? dialogRef : null, true, [open, drawerOpen]);
+    const setFocus = useCallback(() => {
+        if (progressProp || !drawerOpen || dialogRef.current?.contains(getActiveElement()))
+            return;
+        if (headingRef.current) {
+            focusNonInteractiveElement(headingRef.current, heading);
+        }
+        else if (dialogRef.current) {
+            focusNonInteractiveElement(dialogRef.current, heading);
+        }
+    }, [progressProp, drawerOpen, heading]);
+    const onDismiss = useCallback(() => {
+        setDrawerOpen(false);
+        onDismissProp?.();
+    }, [onDismissProp]);
+    const onAfterOpen = useCallback(() => {
+        onAfterOpenProp?.();
+        setFocus();
+    }, [onAfterOpenProp, setFocus]);
+    useEffect(() => {
+        if (!progressProp) {
+            // Delay focus to the next tick to allow progress to unmount so setFocus do not bail out
+            setTimeout(setFocus, 0);
+        }
+    }, [progressProp, setFocus]);
+    useEscape(e => {
+        onDismiss?.();
+        e.stopPropagation();
+    }, dialogRef, [onDismiss]);
+    const progress = (_jsx(Progress, { visible: !!progressProp, focusOnVisible: true, placement: 'local', message: typeof progressProp === 'string' ? progressProp : undefined }));
+    const dismissButton = (_jsx(Button, { "data-testid": testIds.dismiss, variant: 'simple', icon: true, label: t('dismiss'), onClick: onDismiss, children: _jsx(Icon, { name: 'times' }) }));
+    const content = (_jsx(Backdrop, { open: open, onBeforeTransitionIn: () => {
+            setDrawerOpen(true);
+            returnRef.current = getActiveElement();
+            onBeforeOpen?.();
+        }, onBeforeTransitionOut: () => {
+            setDrawerOpen(false);
+            setDrawerSize(size);
+        }, onAfterTransitionOut: () => {
+            if (isInstance(returnRef.current, HTMLElement) &&
+                dialogRef.current?.contains(getActiveElement())) {
+                returnRef.current.focus();
+            }
+            onAfterClose?.();
+        }, children: _jsxs(StyledTouchDialog, { "data-testid": testIds.root, ...restProps, ref: dialogRef, open: drawerOpen, placement: 'bottom', position: 'fixed', size: drawerSizeMapping[drawerSize], shadow: true, onAfterOpen: onAfterOpen, onBeforeClose: onBeforeClose, onOuterClick: onDismiss, role: 'dialog', "aria-modal": 'true', "aria-labelledby": heading ? headingId : undefined, "aria-busy": !!progressProp, children: [_jsxs(Flex, { container: { direction: 'row', justify: 'between', alignItems: 'center' }, as: StyledTouchDialogHeader, children: [heading && (_jsx(Text, { variant: 'h2', ref: headingRef, 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 }))] }) }));
+    return portalTarget ? createPortal(content, portalTarget) : content;
+});
+export default TouchDialog;
+//# sourceMappingURL=TouchDialog.js.map

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

@@ -0,0 +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} 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\nexport const 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      progress: progressProp,\n      testId,\n      ...restProps\n    }: PropsWithoutRef<TouchDialogProps>,\n    ref: TouchDialogProps['ref']\n  ) {\n    const dialogRef = useConsolidatedRef(ref);\n    const t = useI18n();\n    const { portalTarget } = useConfiguration();\n    const headingRef = useRef<HTMLHeadingElement>(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, true, [open, drawerOpen]);\n\n    const setFocus = useCallback(() => {\n      if (progressProp || !drawerOpen || dialogRef.current?.contains(getActiveElement())) return;\n      if (headingRef.current) {\n        focusNonInteractiveElement(headingRef.current, heading);\n      } else if (dialogRef.current) {\n        focusNonInteractiveElement(dialogRef.current, heading);\n      }\n    }, [progressProp, drawerOpen, heading]);\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    const content = (\n      <Backdrop\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          {...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          onOuterClick={onDismiss}\n          role='dialog'\n          aria-modal='true'\n          aria-labelledby={heading ? headingId : undefined}\n          aria-busy={!!progressProp}\n        >\n          <Flex\n            container={{ direction: 'row', justify: 'between', alignItems: 'center' }}\n            as={StyledTouchDialogHeader}\n          >\n            {heading && (\n              <Text variant='h2' ref={headingRef} id={headingId}>\n                {heading}\n              </Text>\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"]}

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

@@ -0,0 +1,7 @@
+export declare const StyledExpandCollapse: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../ExpandCollapse").ExpandCollapseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    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 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

@@ -0,0 +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,6NAQnC,CAAC;AAIF,eAAO,MAAM,wBAAwB,6NAepC,CAAC"}

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

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import { StyledButton } from '../Button';
+import Drawer from '../Drawer';
+import { ExpandCollapseButton } from '../ExpandCollapse';
+import { StyledIcon } from '../Icon';
+import { StyledChildrenWrap } from './Dialog.styles';
+export const StyledExpandCollapse = styled(ExpandCollapseButton) `
+  position: absolute;
+  inset-block-start: 0;
+  width: 100%;
+
+  &[aria-expanded='false'] ${StyledIcon} {
+    transform: rotate(-90deg);
+  }
+`;
+StyledExpandCollapse.defaultProps = defaultThemeProp;
+export const StyledTouchDialog = styled(Drawer)(({ theme: { base, components } }) => css `
+    display: flex;
+    flex-direction: column;
+    background: ${components.popover.background};
+    inset-block-end: calc(${base.spacing} * 0.5);
+    inset-inline: calc(${base.spacing} * 0.5);
+    max-height: 90dvh;
+    border-radius: ${components.card['border-radius']};
+    width: auto;
+    transition-property: transform, box-shadow, opacity, height;
+
+    @media (height < 31.25rem) {
+      overflow-y: auto;
+      display: block;
+    }
+
+    &:has(${StyledExpandCollapse}) {
+      padding-block-start: ${base['hit-area'].compact};
+    }
+  `);
+StyledTouchDialog.defaultProps = defaultThemeProp;
+export const StyledTouchDialogHeader = styled.div(({ theme: { base } }) => css `
+    padding-inline: ${base.spacing};
+
+    ${StyledButton} {
+      margin-inline-start: auto;
+    }
+  `);
+StyledTouchDialogHeader.defaultProps = defaultThemeProp;
+export const StyledTouchDialogContent = styled.div(({ theme: { base } }) => css `
+    min-height: 0;
+    overflow: auto;
+    height: 100%;
+    position: relative;
+    padding-block-start: calc(${base.spacing} * 0.5);
+
+    ${StyledChildrenWrap} {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding-inline: ${base.spacing};
+    }
+  `);
+StyledTouchDialogContent.defaultProps = defaultThemeProp;
+//# sourceMappingURL=TouchDialog.styles.js.map

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

@@ -0,0 +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;;MAE5B,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\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"]}

package/lib/components/Dialog/TouchDialog.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getTouchDialogTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["dismiss"]>;
+//# sourceMappingURL=TouchDialog.test-ids.d.ts.map

package/lib/components/Dialog/TouchDialog.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchDialog.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,4GAAsD,CAAC"}

package/lib/components/Dialog/TouchDialog.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '../../utils';
+export const getTouchDialogTestIds = createTestIds('touch-dialog', ['dismiss']);
+//# sourceMappingURL=TouchDialog.test-ids.js.map

package/lib/components/Dialog/TouchDialog.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchDialog.test-ids.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,cAAc,EAAE,CAAC,SAAS,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getTouchDialogTestIds = createTestIds('touch-dialog', ['dismiss'] as const);\n"]}

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

@@ -0,0 +1,42 @@
+import type { Ref } from 'react';
+import type { BaseProps, TestIdProp } from '../../types';
+import type { DrawerProps } from '../Drawer';
+import type { ProgressProps } from '../Progress';
+export interface TouchDialogProps extends BaseProps, TestIdProp {
+    /**
+     * Whether the TouchDialog should be open or closed.
+     * The component should not be unmounted before onAfterClose is called,
+     * otherwise the closing animation will be interrupted.
+     */
+    open: DrawerProps['open'];
+    /**
+     * Callback fired when the TouchDialog is dismissed with user intent.
+     * The parent component should toggle the `open` prop.
+     */
+    onDismiss: () => void;
+    /** Heading text displayed at the top of the drawer. */
+    heading?: string;
+    /** Content of the TouchDialog. */
+    children?: DrawerProps['children'];
+    /** If there is a progress state either on opening, or after submit, you must indicate as such. A custom message is supported as well. */
+    progress?: boolean | ProgressProps['message'];
+    /**
+     * The initial height of the TouchDialog panel.
+     * - `'auto'` — height is driven by content (capped at 90% of the viewport).
+     * - `'half'` — half the viewport height.
+     * - `'full'` — opens to the maximum height (90% of the viewport).
+     * @default 'half'
+     */
+    size?: 'auto' | 'half' | 'full';
+    /** Callback fired before the TouchDialog starts opening. */
+    onBeforeOpen?: DrawerProps['onBeforeOpen'];
+    /** Callback fired after the TouchDialog finishes opening. */
+    onAfterOpen?: DrawerProps['onAfterOpen'];
+    /** Callback fired before the TouchDialog starts closing. */
+    onBeforeClose?: DrawerProps['onBeforeClose'];
+    /** Callback fired after the TouchDialog finishes closing. */
+    onAfterClose?: DrawerProps['onAfterClose'];
+    /** Ref for the dialog panel element. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=TouchDialog.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TouchDialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,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,MAAM,CAAC;IACjB,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"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TouchDialog.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TouchDialog.types.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } 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?: 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"]}

package/lib/components/Dialog/TouchInfoDialog.d.ts

@@ -0,0 +1,4 @@
+import type { InfoDialogProps } from './Dialog.types';
+declare const TouchInfoDialog: import("react").ForwardRefExoticComponent<Omit<Pick<InfoDialogProps, "hidden" | "color" | "content" | "style" | "progress" | "translate" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "heading" | "placement" | "strategy" | "portal" | "onDismiss" | "focusTrap">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default TouchInfoDialog;
+//# sourceMappingURL=TouchInfoDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TouchInfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/TouchInfoDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,QAAA,MAAM,eAAe,80JAuBnB,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/lib/components/Dialog/TouchInfoDialog.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { TouchDialog } from './TouchDialog';
+const TouchInfoDialog = forwardRef(function TouchInfoDialog({ heading: headingProp, children, onDismiss, ...restProps }, ref) {
+    const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;
+    const [open, setOpen] = useState(true);
+    return (_jsx(TouchDialog, { ...restProps, open: open, onDismiss: () => {
+            setOpen(false);
+        }, ref: ref, heading: headingText, onAfterClose: () => {
+            onDismiss();
+        }, children: children }));
+});
+export default TouchInfoDialog;
+//# sourceMappingURL=TouchInfoDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TouchInfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/TouchInfoDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAwB,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,MAAM,eAAe,GAAG,UAAU,CAGhC,SAAS,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IACzF,MAAM,WAAW,GAAG,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,OAAO,CAAC;IACzF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,WAAW,OACN,SAAS,EACb,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,GAAG,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,EACD,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,GAAG,EAAE;YACjB,SAAS,EAAE,CAAC;QACd,CAAC,YAEA,QAAQ,GACG,CACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, useState, type PropsWithoutRef } from 'react';\n\nimport type { RefElement, OmitStrict } from '../../types';\n\nimport { TouchDialog } from './TouchDialog';\nimport type { InfoDialogProps } from './Dialog.types';\n\nconst TouchInfoDialog = forwardRef<\n  RefElement<InfoDialogProps>,\n  PropsWithoutRef<OmitStrict<InfoDialogProps, 'target'>>\n>(function TouchInfoDialog({ heading: headingProp, children, onDismiss, ...restProps }, ref) {\n  const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;\n  const [open, setOpen] = useState(true);\n\n  return (\n    <TouchDialog\n      {...restProps}\n      open={open}\n      onDismiss={() => {\n        setOpen(false);\n      }}\n      ref={ref}\n      heading={headingText}\n      onAfterClose={() => {\n        onDismiss();\n      }}\n    >\n      {children}\n    </TouchDialog>\n  );\n});\n\nexport default TouchInfoDialog;\n"]}

package/lib/components/Dialog/index.d.ts

@@ -1,4 +1,7 @@
 export { default as FormDialog } from './FormDialog';
-export { default as InfoDialog } from './InfoDialog';
+export { default as InfoDialog } from './InfoDialogWrapper';
+export { default as TouchDialog } from './TouchDialog';
+export type { TouchDialogProps } from './TouchDialog.types';
+export { getTouchDialogTestIds } from './TouchDialog.test-ids';
 export type { FormDialogProps, InfoDialogProps, DialogHandleValue } from './Dialog.types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/Dialog/index.js

@@ -1,3 +1,5 @@
 export { default as FormDialog } from './FormDialog';
-export { default as InfoDialog } from './InfoDialog';
+export { default as InfoDialog } from './InfoDialogWrapper';
+export { default as TouchDialog } from './TouchDialog';
+export { getTouchDialogTestIds } from './TouchDialog.test-ids';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default as FormDialog } from './FormDialog';\nexport { default as InfoDialog } from './InfoDialog';\nexport type { FormDialogProps, InfoDialogProps, DialogHandleValue } from './Dialog.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { default as FormDialog } from './FormDialog';\nexport { default as InfoDialog } from './InfoDialogWrapper';\nexport { default as TouchDialog } from './TouchDialog';\nexport type { TouchDialogProps } from './TouchDialog.types';\nexport { getTouchDialogTestIds } from './TouchDialog.test-ids';\nexport type { FormDialogProps, InfoDialogProps, DialogHandleValue } from './Dialog.types';\n"]}

package/lib/components/File/CompactList.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from 'react';
 import Button from '../Button';
 import { useElement, useI18n } from '../../hooks';
-import InfoDialog from '../Dialog/InfoDialog';
+import { InfoDialog } from '../Dialog';
 import NoValue from '../NoValue';
 const CompactList = forwardRef(function CompactList({ count, onDialogOpen, onDialogClose, progress, heading, content, ...restProps }, ref) {
     const t = useI18n();

package/lib/components/File/CompactList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompactList.js","sourceRoot":"","sources":["../../../src/components/File/CompactList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAE9C,OAAO,OAAO,MAAM,YAAY,CAAC;AAiBjC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAChF,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,CAAoB,IAAI,CAAC,CAAC;IAEhE,OAAO,CACL,iBAAS,SAAS,EAAE,GAAG,EAAE,GAAG,YACzB,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACb,KAAC,OAAO,KAAG,CACZ,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,IAAI,YAAY,IAAI,CAAC,MAAM;4BAAE,YAAY,EAAE,CAAC;wBAC5C,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;oBAC7B,CAAC,YAEA,CAAC,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,GAClC,EAER,MAAM,IAAI,CACT,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,GAAG,EAAE;wBACd,IAAI,aAAa;4BAAE,aAAa,EAAE,CAAC;wBACnC,SAAS,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC,YAEA,OAAO,GACG,CACd,IACA,CACJ,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\n\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport Button from '../Button';\nimport { useElement, useI18n } from '../../hooks';\nimport InfoDialog from '../Dialog/InfoDialog';\nimport type { InfoDialogProps } from '../Dialog';\nimport NoValue from '../NoValue';\n\nexport type CompactListProps = WithAttributes<\n  'div',\n  NoChildrenProp &\n    Pick<InfoDialogProps, 'progress'> & {\n      /** number representing the total count of items */\n      count: number;\n      heading: InfoDialogProps['heading'];\n      /** Callback that triggers when the dialog is open */\n      onDialogOpen?: () => void;\n      /** Callback that triggers when the dialog is closed */\n      onDialogClose?: () => void;\n      content?: InfoDialogProps['children'];\n    }\n>;\n\nconst CompactList = forwardRef<RefElement<CompactListProps>, PropsWithoutRef<CompactListProps>>(\n  function CompactList(\n    { count, onDialogOpen, onDialogClose, progress, heading, content, ...restProps },\n    ref\n  ) {\n    const t = useI18n();\n    const [target, setTarget] = useElement<HTMLButtonElement>(null);\n\n    return (\n      <div {...restProps} ref={ref}>\n        {count === 0 ? (\n          <NoValue />\n        ) : (\n          <>\n            <Button\n              variant='link'\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                if (onDialogOpen && !target) onDialogOpen();\n                setTarget(e.currentTarget);\n              }}\n            >\n              {t('number_of_items', [count], { count })}\n            </Button>\n\n            {target && (\n              <InfoDialog\n                heading={heading}\n                progress={progress}\n                target={target}\n                onDismiss={() => {\n                  if (onDialogClose) onDialogClose();\n                  setTarget(null);\n                }}\n              >\n                {content}\n              </InfoDialog>\n            )}\n          </>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default CompactList;\n"]}
+{"version":3,"file":"CompactList.js","sourceRoot":"","sources":["../../../src/components/File/CompactList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,OAAO,OAAO,MAAM,YAAY,CAAC;AAiBjC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAChF,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,CAAoB,IAAI,CAAC,CAAC;IAEhE,OAAO,CACL,iBAAS,SAAS,EAAE,GAAG,EAAE,GAAG,YACzB,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACb,KAAC,OAAO,KAAG,CACZ,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,IAAI,YAAY,IAAI,CAAC,MAAM;4BAAE,YAAY,EAAE,CAAC;wBAC5C,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;oBAC7B,CAAC,YAEA,CAAC,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,GAClC,EAER,MAAM,IAAI,CACT,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,GAAG,EAAE;wBACd,IAAI,aAAa;4BAAE,aAAa,EAAE,CAAC;wBACnC,SAAS,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC,YAEA,OAAO,GACG,CACd,IACA,CACJ,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\n\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport Button from '../Button';\nimport { useElement, useI18n } from '../../hooks';\nimport { InfoDialog } from '../Dialog';\nimport type { InfoDialogProps } from '../Dialog';\nimport NoValue from '../NoValue';\n\nexport type CompactListProps = WithAttributes<\n  'div',\n  NoChildrenProp &\n    Pick<InfoDialogProps, 'progress'> & {\n      /** number representing the total count of items */\n      count: number;\n      heading: InfoDialogProps['heading'];\n      /** Callback that triggers when the dialog is open */\n      onDialogOpen?: () => void;\n      /** Callback that triggers when the dialog is closed */\n      onDialogClose?: () => void;\n      content?: InfoDialogProps['children'];\n    }\n>;\n\nconst CompactList = forwardRef<RefElement<CompactListProps>, PropsWithoutRef<CompactListProps>>(\n  function CompactList(\n    { count, onDialogOpen, onDialogClose, progress, heading, content, ...restProps },\n    ref\n  ) {\n    const t = useI18n();\n    const [target, setTarget] = useElement<HTMLButtonElement>(null);\n\n    return (\n      <div {...restProps} ref={ref}>\n        {count === 0 ? (\n          <NoValue />\n        ) : (\n          <>\n            <Button\n              variant='link'\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                if (onDialogOpen && !target) onDialogOpen();\n                setTarget(e.currentTarget);\n              }}\n            >\n              {t('number_of_items', [count], { count })}\n            </Button>\n\n            {target && (\n              <InfoDialog\n                heading={heading}\n                progress={progress}\n                target={target}\n                onDismiss={() => {\n                  if (onDialogClose) onDialogClose();\n                  setTarget(null);\n                }}\n              >\n                {content}\n              </InfoDialog>\n            )}\n          </>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default CompactList;\n"]}

package/lib/components/ListToolbar/PresetMenuPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PresetMenuPopover.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/PresetMenuPopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,SAAS,EAAW,MAAM,OAAO,CAAC;AAK/E,OAAO,KAAK,EAAE,SAAS,EAA6B,MAAM,oBAAoB,CAAC;AAO/E,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACxC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAcD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CA8DhE,CAAC;AACF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PresetMenuPopover.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/PresetMenuPopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,SAAS,EAAW,MAAM,OAAO,CAAC;AAa/E,OAAO,KAAK,EAAE,SAAS,EAA6B,MAAM,oBAAoB,CAAC;AAO/E,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACxC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAcD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CA2FhE,CAAC;AACF,eAAe,iBAAiB,CAAC"}

package/lib/components/ListToolbar/PresetMenuPopover.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import Popover from '../Popover';
-import { useConsolidatedRef, useDirection, useOuterEvent, useEscape, useUID } from '../../hooks';
+import { TouchDialog } from '../Dialog/TouchDialog';
+import { useConsolidatedRef, useDirection, useOuterEvent, useEscape, useI18n, useUID } from '../../hooks';
 import Menu from '../Menu';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
-import { getFocusables } from '../../utils';
+import { getFocusables, isTouchDevice } from '../../utils';
 import Text from '../Text';
 const StyledPresetMenuPopover = styled(Popover)(({ theme: { base: { 'content-width': contentWidth } } }) => {
     return css `
@@ -15,7 +16,10 @@ const StyledPresetMenuPopover = styled(Popover)(({ theme: { base: { 'content-wid
 });
 StyledPresetMenuPopover.defaultProps = defaultThemeProp;
 const PresetMenuPopover = ({ heading, buttonRef, menu, isOpen, onClose }) => {
+    const t = useI18n();
     const popoverRef = useConsolidatedRef();
+    const dialogRef = useRef(null);
+    const menuRef = useConsolidatedRef();
     const { rtl } = useDirection();
     const headingId = useUID();
     useEscape(e => {
@@ -25,7 +29,7 @@ const PresetMenuPopover = ({ heading, buttonRef, menu, isOpen, onClose }) => {
         }
     }, buttonRef);
     useOuterEvent(['mousedown', 'focusin'], [popoverRef], () => {
-        if (isOpen) {
+        if (isOpen && !isTouchDevice) {
             onClose();
         }
     });
@@ -33,7 +37,14 @@ const PresetMenuPopover = ({ heading, buttonRef, menu, isOpen, onClose }) => {
         if (isOpen)
             getFocusables(popoverRef)[0]?.focus();
     }, [isOpen]);
-    return (_jsx(StyledPresetMenuPopover, { placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, show: !!menu && isOpen, target: buttonRef?.current, ref: popoverRef, "aria-labelledby": headingId, children: menu && (_jsxs(_Fragment, { children: [_jsx(Flex, { container: { pad: [1, 2] }, children: _jsx(Text, { variant: 'h3', id: headingId, children: heading }) }), _jsx(Menu, { ...menu, items: menu.items, onItemClick: (itemId, e) => {
+    return isTouchDevice ? (_jsx(TouchDialog, { open: isOpen, onDismiss: onClose, ref: dialogRef, heading: heading, "aria-label": heading ? undefined : t('menu_option_list'), onAfterOpen: () => menuRef.current?.focus(), 
+        // Focus back to the button explicitly as touch dialog could have been opened from another touch dialog.
+        onAfterClose: () => buttonRef.current?.focus(), children: menu && (_jsx(Menu, { ...menu, ref: menuRef, items: menu.items, onItemClick: (itemId, e) => {
+                if (menu?.mode !== 'multi-select') {
+                    onClose();
+                }
+                menu?.onItemClick?.(itemId, e);
+            } })) })) : (_jsx(StyledPresetMenuPopover, { placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, show: !!menu && isOpen, target: buttonRef?.current, ref: popoverRef, "aria-labelledby": headingId, children: menu && (_jsxs(_Fragment, { children: [_jsx(Flex, { container: { pad: [1, 2] }, children: _jsx(Text, { variant: 'h3', id: headingId, children: heading }) }), _jsx(Menu, { ...menu, items: menu.items, onItemClick: (itemId, e) => {
                         if (menu?.mode !== 'multi-select' &&
                             e
                                 .detail > 0) {

package/lib/components/ListToolbar/PresetMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresetMenuPopover.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/PresetMenuPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from 'react';\nimport type { FunctionComponent, MouseEvent, RefObject, UIEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Popover from '../Popover';\nimport { useConsolidatedRef, useDirection, useOuterEvent, useEscape, useUID } from '../../hooks';\nimport type { MenuProps, AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport Menu from '../Menu';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport { getFocusables } from '../../utils';\nimport Text from '../Text';\n\nexport interface PresetMenuPopoverProps {\n  heading?: string;\n  buttonRef: RefObject<HTMLButtonElement>;\n  menu?: MenuProps;\n  isOpen: boolean;\n  onClose: () => void;\n}\n\nconst StyledPresetMenuPopover = styled(Popover)(({\n  theme: {\n    base: { 'content-width': contentWidth }\n  }\n}) => {\n  return css`\n    min-width: ${contentWidth.xs};\n  `;\n});\n\nStyledPresetMenuPopover.defaultProps = defaultThemeProp;\n\nconst PresetMenuPopover: FunctionComponent<PresetMenuPopoverProps> = ({\n  heading,\n  buttonRef,\n  menu,\n  isOpen,\n  onClose\n}: PresetMenuPopoverProps) => {\n  const popoverRef = useConsolidatedRef<HTMLDivElement>();\n  const { rtl } = useDirection();\n  const headingId = useUID();\n\n  useEscape(e => {\n    if (isOpen) {\n      onClose();\n      e.stopPropagation();\n    }\n  }, buttonRef);\n  useOuterEvent(['mousedown', 'focusin'], [popoverRef], () => {\n    if (isOpen) {\n      onClose();\n    }\n  });\n\n  useEffect(() => {\n    if (isOpen) getFocusables(popoverRef)[0]?.focus();\n  }, [isOpen]);\n\n  return (\n    <StyledPresetMenuPopover\n      placement={rtl ? 'bottom-end' : 'bottom-start'}\n      hideOnTargetHidden\n      show={!!menu && isOpen}\n      target={buttonRef?.current}\n      ref={popoverRef}\n      aria-labelledby={headingId}\n    >\n      {menu && (\n        <>\n          <Flex container={{ pad: [1, 2] }}>\n            <Text variant='h3' id={headingId}>\n              {heading}\n            </Text>\n          </Flex>\n          <Menu\n            {...menu}\n            items={menu.items}\n            onItemClick={(itemId, e) => {\n              if (\n                menu?.mode !== 'multi-select' &&\n                (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n                  .detail > 0\n              ) {\n                onClose();\n              }\n              menu?.onItemClick?.(itemId, e);\n            }}\n            focusControlEl={buttonRef?.current ?? undefined}\n          />\n        </>\n      )}\n    </StyledPresetMenuPopover>\n  );\n};\nexport default PresetMenuPopover;\n"]}
+{"version":3,"file":"PresetMenuPopover.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/PresetMenuPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { FunctionComponent, MouseEvent, RefObject, UIEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Popover from '../Popover';\nimport { TouchDialog } from '../Dialog/TouchDialog';\nimport {\n  useConsolidatedRef,\n  useDirection,\n  useOuterEvent,\n  useEscape,\n  useI18n,\n  useUID\n} from '../../hooks';\nimport type { MenuProps, AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport Menu from '../Menu';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport { getFocusables, isTouchDevice } from '../../utils';\nimport Text from '../Text';\n\nexport interface PresetMenuPopoverProps {\n  heading?: string;\n  buttonRef: RefObject<HTMLButtonElement>;\n  menu?: MenuProps;\n  isOpen: boolean;\n  onClose: () => void;\n}\n\nconst StyledPresetMenuPopover = styled(Popover)(({\n  theme: {\n    base: { 'content-width': contentWidth }\n  }\n}) => {\n  return css`\n    min-width: ${contentWidth.xs};\n  `;\n});\n\nStyledPresetMenuPopover.defaultProps = defaultThemeProp;\n\nconst PresetMenuPopover: FunctionComponent<PresetMenuPopoverProps> = ({\n  heading,\n  buttonRef,\n  menu,\n  isOpen,\n  onClose\n}: PresetMenuPopoverProps) => {\n  const t = useI18n();\n  const popoverRef = useConsolidatedRef<HTMLDivElement>();\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const menuRef = useConsolidatedRef<HTMLDivElement>();\n  const { rtl } = useDirection();\n  const headingId = useUID();\n\n  useEscape(e => {\n    if (isOpen) {\n      onClose();\n      e.stopPropagation();\n    }\n  }, buttonRef);\n\n  useOuterEvent(['mousedown', 'focusin'], [popoverRef], () => {\n    if (isOpen && !isTouchDevice) {\n      onClose();\n    }\n  });\n\n  useEffect(() => {\n    if (isOpen) getFocusables(popoverRef)[0]?.focus();\n  }, [isOpen]);\n\n  return isTouchDevice ? (\n    <TouchDialog\n      open={isOpen}\n      onDismiss={onClose}\n      ref={dialogRef}\n      heading={heading}\n      aria-label={heading ? undefined : t('menu_option_list')}\n      onAfterOpen={() => menuRef.current?.focus()}\n      // Focus back to the button explicitly as touch dialog could have been opened from another touch dialog.\n      onAfterClose={() => buttonRef.current?.focus()}\n    >\n      {menu && (\n        <Menu\n          {...menu}\n          ref={menuRef}\n          items={menu.items}\n          onItemClick={(itemId, e) => {\n            if (menu?.mode !== 'multi-select') {\n              onClose();\n            }\n            menu?.onItemClick?.(itemId, e);\n          }}\n        />\n      )}\n    </TouchDialog>\n  ) : (\n    <StyledPresetMenuPopover\n      placement={rtl ? 'bottom-end' : 'bottom-start'}\n      hideOnTargetHidden\n      show={!!menu && isOpen}\n      target={buttonRef?.current}\n      ref={popoverRef}\n      aria-labelledby={headingId}\n    >\n      {menu && (\n        <>\n          <Flex container={{ pad: [1, 2] }}>\n            <Text variant='h3' id={headingId}>\n              {heading}\n            </Text>\n          </Flex>\n          <Menu\n            {...menu}\n            items={menu.items}\n            onItemClick={(itemId, e) => {\n              if (\n                menu?.mode !== 'multi-select' &&\n                (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n                  .detail > 0\n              ) {\n                onClose();\n              }\n              menu?.onItemClick?.(itemId, e);\n            }}\n            focusControlEl={buttonRef?.current ?? undefined}\n          />\n        </>\n      )}\n    </StyledPresetMenuPopover>\n  );\n};\nexport default PresetMenuPopover;\n"]}

package/lib/components/MenuButton/MenuButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAIjB,oBAAoB,EAErB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACV,UAAU,EACX,MAAM,aAAa,CAAC;AAYrB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAKpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAOlD,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5E,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,qEAAqE;IACrE,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC/B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,0BAA0B;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;IACnE,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,yOAiB5B,CAAC;;;;AAwPF,wBAA6D"}
+{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAIjB,oBAAoB,EAErB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACV,UAAU,EACX,MAAM,aAAa,CAAC;AAarB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAKpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAclD,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5E,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,qEAAqE;IACrE,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC/B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,0BAA0B;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;IACnE,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,yOAiB5B,CAAC;;;;AAwSF,wBAA6D"}

package/lib/components/MenuButton/MenuButton.js

@@ -3,6 +3,7 @@ import { forwardRef, useState, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import { useConsolidatedRef, useUID, useFocusWithin, useDirection, useTestIds, useEscape, useElement } from '../../hooks';
+import { TouchDialog } from '../Dialog/TouchDialog';
 import Button, { StyledButton } from '../Button';
 import Popover, { StyledPopover } from '../Popover';
 import Menu from '../Menu';
@@ -10,7 +11,8 @@ import Icon, { registerIcon, StyledIcon } from '../Icon';
 import * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';
 import Flex from '../Flex';
 import { Count } from '../Badges';
-import { getActiveElement, getFocusables, isInstance, withTestIds } from '../../utils';
+import { getActiveElement, getFocusables, isInstance, isTouchDevice, withTestIds } from '../../utils';
+import { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';
 import { getMenuButtonTestIds } from './MenuButton.test-ids';
 registerIcon(arrowMicroDownIcon);
 export const StyledMenuButton = styled.button(({ theme: { base: { spacing } } }) => {
@@ -54,6 +56,16 @@ StyledMenuButtonChildren.defaultProps = defaultThemeProp;
 const StyledMenuButtonPopover = styled(Popover) `
   min-width: 20ch;
 `;
+const StyledMenuTouchDialog = styled(TouchDialog) `
+  ${StyledMenu} {
+    height: 100%;
+
+    ${StyledMenuListWrapper} {
+      flex-grow: 1;
+      overflow: auto;
+    }
+  }
+`;
 const MenuButton = forwardRef(function MenuButton(props, ref) {
     const uid = useUID();
     const { testId, id = uid, text, menu, popover, onClick, icon, count, iconOnly = false, showArrow, onKeyDown: onKeyDownProp, ...restProps } = props;
@@ -63,10 +75,11 @@ const MenuButton = forwardRef(function MenuButton(props, ref) {
     // Force re-render when popoverRef is set, so useFocusWithin has a non-null ref to read
     const [, forceRerender] = useElement(null);
     const popoverRef = useConsolidatedRef(popover?.ref, forceRerender);
+    const dialogRef = useConsolidatedRef(popover?.ref);
     const filterInputRef = useConsolidatedRef(menu?.filterInputProps?.ref);
     const menuRef = useConsolidatedRef(menu?.ref);
     // FIXME: Type assertion required for issue in useFocusWithin generic
-    useFocusWithin([popoverRef, buttonRef], useCallback((isFocused) => {
+    useFocusWithin([popoverRef, dialogRef, buttonRef], useCallback((isFocused) => {
         if (!isFocused)
             setIsOpen(false);
     }, []));
@@ -107,9 +120,11 @@ const MenuButton = forwardRef(function MenuButton(props, ref) {
                 return;
             }
         }
-        setIsOpen(false);
-    }, [menu]);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { "data-testid": testIds.root, as: StyledMenuButton, "aria-label": text, ...restProps, id: id, ref: buttonRef, "aria-expanded": isOpen, "aria-haspopup": 'menu', "aria-controls": isOpen ? `${id}-popover` : undefined, label: iconOnly && !isOpen ? text : undefined, onClick: (e) => {
+        // Do not close the drawer when the user is tabbing backwards.
+        if (!isTouchDevice)
+            setIsOpen(false);
+    }, [menu, isTouchDevice, onKeyDownProp]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { "data-testid": testIds.root, as: StyledMenuButton, "aria-label": text, ...restProps, id: id, ref: buttonRef, "aria-expanded": isOpen, "aria-haspopup": isTouchDevice ? 'dialog' : 'menu', "aria-controls": isOpen ? `${id}-${isTouchDevice ? 'dialog' : 'popover'}` : undefined, label: iconOnly && !isOpen ? text : undefined, onClick: (e) => {
                     // e.detail is 0 when triggered by keyboard.
                     const mouseClick = e.detail > 0;
                     if (isOpen) {
@@ -127,7 +142,18 @@ const MenuButton = forwardRef(function MenuButton(props, ref) {
                     if (!isOpen || mouseClick) {
                         onClick?.(e);
                     }
-                }, onKeyDown: onKeyDown, icon: iconOnly, children: _jsxs(Flex, { as: StyledMenuButtonChildren, container: { alignItems: 'center', gap: 1 }, padIcon: iconOnly && showArrow, children: [icon && _jsx(Icon, { name: icon }), !iconOnly && (_jsxs(_Fragment, { children: [_jsx(StyledMenuButtonText, { children: text }), typeof count === 'number' && _jsx(Count, { children: count })] })), ((!iconOnly && showArrow === undefined) || showArrow) && (_jsx(Icon, { name: 'arrow-micro-down' }))] }) }), _jsx(StyledMenuButtonPopover, { placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, ...popover, id: `${id}-popover`, show: !!menu && isOpen, target: buttonRef.current, ref: popoverRef, onKeyDown: (e) => {
+                }, onKeyDown: onKeyDown, icon: iconOnly, children: _jsxs(Flex, { as: StyledMenuButtonChildren, container: { alignItems: 'center', gap: 1 }, padIcon: iconOnly && showArrow, children: [icon && _jsx(Icon, { name: icon }), !iconOnly && (_jsxs(_Fragment, { children: [_jsx(StyledMenuButtonText, { children: text }), typeof count === 'number' && _jsx(Count, { children: count })] })), ((!iconOnly && showArrow === undefined) || showArrow) && (_jsx(Icon, { name: 'arrow-micro-down' }))] }) }), isTouchDevice ? (_jsx(StyledMenuTouchDialog, { ref: dialogRef, open: !!menu && isOpen, onDismiss: () => {
+                    setIsOpen(false);
+                }, id: `${id}-dialog`, heading: text, onAfterClose: () => {
+                    if (dialogRef.current?.contains(getActiveElement())) {
+                        buttonRef.current?.focus();
+                    }
+                }, children: menu && (_jsx(Menu, { testId: testIds.root, ...menu, ref: menuRef, loading: menu.loading, scrollAt: Infinity, items: menu.items, onItemClick: (itemId, e) => {
+                        if (menu.mode !== 'multi-select') {
+                            setIsOpen(false);
+                        }
+                        menu.onItemClick?.(itemId, e);
+                    }, focusControlEl: undefined })) })) : (_jsx(StyledMenuButtonPopover, { placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, ...popover, id: `${id}-popover`, show: !!menu && isOpen, target: buttonRef.current, ref: popoverRef, onKeyDown: (e) => {
                     if (e.key !== 'Tab' || !buttonRef.current)
                         return;
                     const footerEl = menuRef.current?.querySelector('footer');
@@ -160,7 +186,7 @@ const MenuButton = forwardRef(function MenuButton(props, ref) {
                             buttonRef.current?.focus();
                         }
                         menu.onItemClick?.(itemId, e);
-                    }, focusControlEl: menu.focusControlEl || buttonRef.current || undefined })) })] }));
+                    }, focusControlEl: menu.focusControlEl || buttonRef.current || undefined })) }))] }));
 });
 export default withTestIds(MenuButton, getMenuButtonTestIds);
 //# sourceMappingURL=MenuButton.js.map