npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.4.5 → 10.0.0-build.4.7 - Mend

@pega/cosmos-react-core 10.0.0-build.4.5 → 10.0.0-build.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/lib/components/Dialog/TouchInfoDialog.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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/File/mimeTypes.json CHANGED Viewed

@@ -101,6 +101,7 @@
     "vcs": "text/x-vcalendar",
     "wav": "audio/x-wav",
     "webm": "video/webm",
+    "webp": "image/webp",
     "wm": "video/x-ms-wm",
     "wma": "audio/x-ms-wma",
     "wmv": "video/x-ms-wmv",

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

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PresetMenuPopover.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/PresetMenuPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAElC~~,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,~~kBAAkB~~,EAAE,YAAY,~~EAAE~~,aAAa,~~EAAE~~,SAAS,~~EAAE~~,MAAM,~~EAAE~~,MAAM,aAAa,CAAC;~~AAEjG~~,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;~~AAC5C~~,OAAO,IAAI,MAAM,SAAS,CAAC;AAU3B,MAAM,uBAAuB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAC/C,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;iBACK,YAAY,CAAC,EAAE;GAC7B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA8C,CAAC,EACpE,OAAO,EACP,SAAS,EACT,IAAI,EACJ,MAAM,EACN,OAAO,EACgB,EAAE,EAAE;IAC3B,MAAM,UAAU,GAAG,kBAAkB,EAAkB,CAAC;IACxD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAE3B,SAAS,CAAC,CAAC,CAAC,EAAE;QACZ,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,EAAE,CAAC;YACV,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,SAAS,CAAC,CAAC;~~IACd~~,aAAa,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE;QACzD,IAAI,MAAM,EAAE,CAAC;~~YACX~~,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM;YAAE,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACpD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,~~CACL~~,KAAC,uBAAuB,IACtB,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAC9C,kBAAkB,QAClB,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,MAAM,EACtB,MAAM,EAAE,SAAS,EAAE,OAAO,EAC1B,GAAG,EAAE,UAAU,qBACE,SAAS,YAEzB,IAAI,IAAI,CACP,8BACE,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YAC9B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,SAAS,YAC7B,OAAO,GACH,GACF,EACP,KAAC,IAAI,OACC,IAAI,EACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;wBACzB,IACE,IAAI,EAAE,IAAI,KAAK,cAAc;4BAC5B,CAAgF;iCAC9E,MAAM,GAAG,CAAC,EACb,CAAC;4BACD,OAAO,EAAE,CAAC;wBACZ,CAAC;wBACD,IAAI,EAAE,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;oBACjC,CAAC,EACD,cAAc,EAAE,SAAS,EAAE,OAAO,IAAI,SAAS,GAC/C,IACD,CACJ,GACuB,CAC3B,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,iBAAiB,CAAC","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"]}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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

package/lib/components/MenuButton/MenuButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAS1D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAShD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,cAAc,EACd,YAAY,EACZ,UAAU,EACV,SAAS,EACT,UAAU,EACX,MAAM,aAAa,CAAC;AACrB,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEjD,OAAO,OAAO,EAAE,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,kBAAkB,MAAM,qCAAqC,CAAC;AAC1E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,YAAY,CAAC,kBAAkB,CAAC,CAAC;AAgCjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;aACD,OAAO;;;;;YAKR,aAAa,MAAM,YAAY;+BACZ,OAAO;;KAEjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAGvC,CAAC;AAEF,MAAM,wBAAwB,GAAG,MAAM,CAAC,IAAI,CAAwB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACzF,MAAM,EACJ,IAAI,EAAE,EACJ,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EACvE,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,IAAI,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EACtB,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;;MAGN,OAAO;QACT,GAAG,CAAA;oCAC6B,YAAY,MAAM,QAAQ;;;qCAGzB,aAAa,MAAM,QAAQ;;KAE3D;;MAEC,UAAU;;8BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,uBAAuB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;CAE9C,CAAC;AAEF,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,KAAuC,EACvC,GAA2B;IAE3B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,SAAS,EAAE,aAAa,EACxB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IACzD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,uFAAuF;IACvF,MAAM,CAAC,EAAE,aAAa,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,kBAAkB,CAAiB,OAAO,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC;IACnF,MAAM,cAAc,GAAG,kBAAkB,CAAmB,IAAI,EAAE,gBAAgB,EAAE,GAAG,CAAC,CAAC;IACzF,MAAM,OAAO,GAAG,kBAAkB,CAAiB,IAAI,EAAE,GAAG,CAAC,CAAC;IAE9D,qEAAqE;IACrE,cAAc,CACZ,CAAC,UAAU,EAAE,SAAS,CAAC,EACvB,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACjC,IAAI,CAAC,SAAS;YAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,SAAS,CAAC,CAAC,CAAC,EAAE;QACZ,IAAI,MAAM,EAAE,CAAC;YACX,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,SAAS,CAAC,CAAC,CAAC,EAAE;QACZ,IAAI,MAAM,EAAE,CAAC;YACX,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC;IAEzB,SAAS,CAAC,CAAC,CAAC,EAAE;QACZ,IAAI,MAAM,EAAE,CAAC;YACX,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,cAAc,CAAC,CAAC;IAEnB,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,IAAI;YAAE,OAAO;QAErC,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,cAAc,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEnC,IAAI,cAAc,EAAE,CAAC;YACnB,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;YAEjD,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAChC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;gBAC5B,OAAO;YACT,CAAC;QACH,CAAC;QAED,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,MAAM,mBACQ,OAAO,CAAC,IAAI,EACzB,EAAE,EAAE,gBAAgB,gBACR,IAAI,KACZ,SAAS,EACb,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,mBACC,MAAM,mBACP,MAAM,mBACL,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,EACnD,KAAK,EAAE,QAAQ,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC7C,OAAO,EAAE,CAAC,CAA6D,EAAE,EAAE;oBACzE,4CAA4C;oBAC5C,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;oBAEhC,IAAI,MAAM,EAAE,CAAC;wBACX,IAAI,UAAU,EAAE,CAAC;4BACf,wEAAwE;4BACxE,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,6DAA6D;wBAC7D,SAAS,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC;oBAED,kDAAkD;oBAClD,mEAAmE;oBACnE,IAAI,CAAC,MAAM,IAAI,UAAU,EAAE,CAAC;wBAC1B,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;oBACf,CAAC;gBACH,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,QAAQ,YAEd,MAAC,IAAI,IACH,EAAE,EAAE,wBAAwB,EAC5B,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,OAAO,EAAE,QAAQ,IAAI,SAAS,aAE7B,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC5B,CAAC,QAAQ,IAAI,CACZ,8BACE,KAAC,oBAAoB,cAAE,IAAI,GAAwB,EAClD,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAC,KAAK,cAAE,KAAK,GAAS,IACnD,CACJ,EACA,CAAC,CAAC,CAAC,QAAQ,IAAI,SAAS,KAAK,SAAS,CAAC,IAAI,SAAS,CAAC,IAAI,CACxD,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,GAAG,CACjC,IACI,GACA,EAET,KAAC,uBAAuB,IACtB,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAC9C,kBAAkB,WACd,OAAO,EACX,EAAE,EAAE,GAAG,EAAE,UAAU,EACnB,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,MAAM,EACtB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,OAAO;wBAAE,OAAO;oBAElD,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;oBAC1D,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC;wBAAE,OAAO;oBAEjE,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;oBAEjD,IAAI,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,CAAC;wBACtC,MAAM,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;wBACxD,MAAM,cAAc,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;wBACnC,MAAM,eAAe,GAAG,YAAY,KAAK,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC;wBAErE,IAAI,cAAc,IAAI,eAAe,EAAE,CAAC;4BACtC,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;4BACjD,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC;gCAAE,OAAO;4BAExD,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;4BAC9C,MAAM,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;4BAE/D,aAAa,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC;4BAClC,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC;6BAAM,IAAI,CAAC,cAAc,IAAI,YAAY,KAAK,CAAC,EAAE,CAAC;4BACjD,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC7B,CAAC;oBACH,CAAC;gBACH,CAAC,YAEA,IAAI,IAAI,CACP,KAAC,IAAI,IACH,MAAM,EAAE,OAAO,CAAC,IAAI,KAChB,IAAI,EACR,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;wBACzB,iGAAiG;wBACjG,IAAI,IAAI,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;4BACjC,SAAS,CAAC,KAAK,CAAC,CAAC;4BACjB,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC7B,CAAC;wBACD,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;oBAChC,CAAC,EACD,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,GACrE,CACH,GACuB,IACzB,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport type {\n MouseEventHandler,\n MouseEvent,\n UIEvent,\n PropsWithoutRef,\n KeyboardEventHandler,\n KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n OmitStrict,\n TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n useConsolidatedRef,\n useUID,\n useFocusWithin,\n useDirection,\n useTestIds,\n useEscape,\n useElement\n} from '../../hooks';\nimport Button, { StyledButton } from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Popover, { StyledPopover } from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport Flex from '../Flex';\nimport { Count } from '../Badges';\nimport type { CountProps } from '../Badges/Count';\nimport { getActiveElement, getFocusables, isInstance, withTestIds } from '../../utils';\n\nimport { getMenuButtonTestIds } from './MenuButton.test-ids';\n\nregisterIcon(arrowMicroDownIcon);\n\nexport interface MenuButtonProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The text for the MenuButton also used to set the aria-label. /\n text: string;\n /\n Determines the Button variant for the MenuButton.\n * @default 'secondary'\n /\n variant?: ButtonProps['variant'];\n /* The name of the icon for the MenuButton. /\n icon?: string;\n /* Only display the icon. The text prop will be forwarded to a tooltip. /\n iconOnly?: ButtonProps['icon'];\n /* The total count representing the list data which was selected. /\n count?: CountProps['children'];\n /* The click handler for the MenuButton. /\n onClick?: MouseEventHandler;\n /* Menu related props. /\n menu?: MenuProps;\n /* Popover related props. /\n popover?: OmitStrict<PopoverProps, 'show' \| 'target' \| 'children'>;\n /* DOM id for the button element. /\n id?: string;\n /* Ref for the button element. /\n ref?: ButtonProps['ref'];\n /* The keydown handler for the MenuButton. /\n onKeyDown?: KeyboardEventHandler;\n /* Whether to display an arrow when only the icon is displayed. /\n showArrow?: boolean;\n}\n\nexport const StyledMenuButton = styled.button(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n gap: ${spacing};\n flex-shrink: 0;\n white-space: nowrap;\n max-width: 100%;\n\n & + ${StyledPopover} + ${StyledButton} {\n margin-inline-start: ${spacing};\n }\n `;\n }\n);\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonText = styled.span`\n text-overflow: ellipsis;\n overflow: hidden;\n`;\n\nconst StyledMenuButtonChildren = styled.span<{ padIcon?: boolean }>(({ theme, padIcon }) => {\n const {\n base: {\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n },\n components: {\n icon: {\n size: { s: iconSize }\n }\n }\n } = theme;\n\n return css`\n max-width: 100%;\n\n ${padIcon &&\n css`\n padding-inline-start: calc((${hitAreaMouse} - ${iconSize}) / 2);\n\n @media (pointer: coarse) {\n padding-inline-start: calc(${hitAreaFinger} - ${iconSize} 2);\n }\n `}\n\n ${StyledIcon}:last-child:not(:first-child) {\n /* Offsets the flex gap to make the down arrow appear to trail the text. /\n margin-inline-start: -${theme.base.spacing};\n }\n `;\n});\n\nStyledMenuButtonChildren.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonPopover = styled(Popover)`\n min-width: 20ch;\n`;\n\nconst MenuButton: ForwardRefForwardPropsComponent<MenuButtonProps> = forwardRef(function MenuButton(\n props: PropsWithoutRef<MenuButtonProps>,\n ref: MenuButtonProps['ref']\n) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n text,\n menu,\n popover,\n onClick,\n icon,\n count,\n iconOnly = false,\n showArrow,\n onKeyDown: onKeyDownProp,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getMenuButtonTestIds);\n const [isOpen, setIsOpen] = useState(false);\n\n const buttonRef = useConsolidatedRef(ref);\n // Force re-render when popoverRef is set, so useFocusWithin has a non-null ref to read\n const [, forceRerender] = useElement(null);\n const popoverRef = useConsolidatedRef<HTMLDivElement>(popover?.ref, forceRerender);\n const filterInputRef = useConsolidatedRef<HTMLInputElement>(menu?.filterInputProps?.ref);\n const menuRef = useConsolidatedRef<HTMLDivElement>(menu?.ref);\n\n // FIXME: Type assertion required for issue in useFocusWithin generic\n useFocusWithin<HTMLElement>(\n [popoverRef, buttonRef],\n useCallback((isFocused: boolean) => {\n if (!isFocused) setIsOpen(false);\n }, [])\n );\n\n useEscape(e => {\n if (isOpen) {\n setIsOpen(false);\n e.stopPropagation();\n }\n }, buttonRef);\n\n useEscape(e => {\n if (isOpen) {\n setIsOpen(false);\n e.stopPropagation();\n buttonRef.current?.focus();\n }\n }, menu?.focusControlEl);\n\n useEscape(e => {\n if (isOpen) {\n setIsOpen(false);\n e.stopPropagation();\n buttonRef.current?.focus();\n }\n }, filterInputRef);\n\n const { rtl } = useDirection();\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n onKeyDownProp?.(e);\n if (e.key !== 'Tab' \|\| !menu) return;\n\n const footerEl = menuRef.current?.querySelector('footer');\n if (!footerEl) return;\n\n const tabbingForward = !e.shiftKey;\n\n if (tabbingForward) {\n const footerFocusables = getFocusables(footerEl);\n\n if (footerFocusables.length > 0) {\n e.preventDefault();\n footerFocusables[0].focus();\n return;\n }\n }\n\n setIsOpen(false);\n },\n [menu]\n );\n\n return (\n <>\n <Button\n data-testid={testIds.root}\n as={StyledMenuButton}\n aria-label={text}\n {...restProps}\n id={id}\n ref={buttonRef}\n aria-expanded={isOpen}\n aria-haspopup='menu'\n aria-controls={isOpen ? `${id}-popover` : undefined}\n label={iconOnly && !isOpen ? text : undefined}\n onClick={(e: MouseEvent<HTMLButtonElement> & UIEvent<HTMLButtonElement>) => {\n // e.detail is 0 when triggered by keyboard.\n const mouseClick = e.detail > 0;\n\n if (isOpen) {\n if (mouseClick) {\n // Close the menu if it is open and it is a mouse* click on the button.\n setIsOpen(false);\n }\n } else {\n // Open the menu if it's closed, for mouse or keyboard click.\n setIsOpen(true);\n }\n\n // If the menu is closed or the user mouse clicks.\n // This avoids Enter key firing onClick when selecting a menu item.\n if (!isOpen \|\| mouseClick) {\n onClick?.(e);\n }\n }}\n onKeyDown={onKeyDown}\n icon={iconOnly}\n >\n <Flex\n as={StyledMenuButtonChildren}\n container={{ alignItems: 'center', gap: 1 }}\n padIcon={iconOnly && showArrow}\n >\n {icon && <Icon name={icon} />}\n {!iconOnly && (\n <>\n <StyledMenuButtonText>{text}</StyledMenuButtonText>\n {typeof count === 'number' && <Count>{count}</Count>}\n </>\n )}\n {((!iconOnly && showArrow === undefined) \|\| showArrow) && (\n <Icon name='arrow-micro-down' />\n )}\n </Flex>\n </Button>\n\n <StyledMenuButtonPopover\n placement={rtl ? 'bottom-end' : 'bottom-start'}\n hideOnTargetHidden\n {...popover}\n id={`${id}-popover`}\n show={!!menu && isOpen}\n target={buttonRef.current}\n ref={popoverRef}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key !== 'Tab' \|\| !buttonRef.current) return;\n\n const footerEl = menuRef.current?.querySelector('footer');\n if (!footerEl \|\| !footerEl?.contains(getActiveElement())) return;\n\n const footerFocusables = getFocusables(footerEl);\n\n if (isInstance(e.target, HTMLElement)) {\n const currentIndex = footerFocusables.indexOf(e.target);\n const tabbingForward = !e.shiftKey;\n const isLastFocusable = currentIndex === footerFocusables.length - 1;\n\n if (tabbingForward && isLastFocusable) {\n e.preventDefault();\n const rootNode = buttonRef.current.getRootNode();\n if (!isInstance(rootNode, Document, ShadowRoot)) return;\n\n const allFocusables = getFocusables(rootNode);\n const nextIndex = allFocusables.indexOf(buttonRef.current) + 1;\n\n allFocusables[nextIndex]?.focus();\n setIsOpen(false);\n } else if (!tabbingForward && currentIndex === 0) {\n e.preventDefault();\n buttonRef.current?.focus();\n }\n }\n }}\n >\n {menu && (\n <Menu\n testId={testIds.root}\n {...menu}\n ref={menuRef}\n loading={menu.loading}\n items={menu.items}\n onItemClick={(itemId, e) => {\n // When clicking an item (by mouse or keyboard) and the menu is not multi-select, close the menu.\n if (menu.mode !== 'multi-select') {\n setIsOpen(false);\n buttonRef.current?.focus();\n }\n menu.onItemClick?.(itemId, e);\n }}\n focusControlEl={menu.focusControlEl \|\| buttonRef.current \|\| undefined}\n />\n )}\n </StyledMenuButtonPopover>\n </>\n );\n});\n\nexport default withTestIds(MenuButton, getMenuButtonTestIds);\n"]}
1	+ {"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport type {\n MouseEventHandler,\n MouseEvent,\n UIEvent,\n PropsWithoutRef,\n KeyboardEventHandler,\n KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n OmitStrict,\n TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n useConsolidatedRef,\n useUID,\n useFocusWithin,\n useDirection,\n useTestIds,\n useEscape,\n useElement\n} from '../../hooks';\nimport { TouchDialog } from '../Dialog/TouchDialog';\nimport Button, { StyledButton } from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Popover, { StyledPopover } from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport Flex from '../Flex';\nimport { Count } from '../Badges';\nimport type { CountProps } from '../Badges/Count';\nimport {\n getActiveElement,\n getFocusables,\n isInstance,\n isTouchDevice,\n withTestIds\n} from '../../utils';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\n\nimport { getMenuButtonTestIds } from './MenuButton.test-ids';\n\nregisterIcon(arrowMicroDownIcon);\n\nexport interface MenuButtonProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The text for the MenuButton also used to set the aria-label. /\n text: string;\n /\n Determines the Button variant for the MenuButton.\n * @default 'secondary'\n /\n variant?: ButtonProps['variant'];\n /* The name of the icon for the MenuButton. /\n icon?: string;\n /* Only display the icon. The text prop will be forwarded to a tooltip. /\n iconOnly?: ButtonProps['icon'];\n /* The total count representing the list data which was selected. /\n count?: CountProps['children'];\n /* The click handler for the MenuButton. /\n onClick?: MouseEventHandler;\n /* Menu related props. /\n menu?: MenuProps;\n /* Popover related props. /\n popover?: OmitStrict<PopoverProps, 'show' \| 'target' \| 'children'>;\n /* DOM id for the button element. /\n id?: string;\n /* Ref for the button element. /\n ref?: ButtonProps['ref'];\n /* The keydown handler for the MenuButton. /\n onKeyDown?: KeyboardEventHandler;\n /* Whether to display an arrow when only the icon is displayed. /\n showArrow?: boolean;\n}\n\nexport const StyledMenuButton = styled.button(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n gap: ${spacing};\n flex-shrink: 0;\n white-space: nowrap;\n max-width: 100%;\n\n & + ${StyledPopover} + ${StyledButton} {\n margin-inline-start: ${spacing};\n }\n `;\n }\n);\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonText = styled.span`\n text-overflow: ellipsis;\n overflow: hidden;\n`;\n\nconst StyledMenuButtonChildren = styled.span<{ padIcon?: boolean }>(({ theme, padIcon }) => {\n const {\n base: {\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n },\n components: {\n icon: {\n size: { s: iconSize }\n }\n }\n } = theme;\n\n return css`\n max-width: 100%;\n\n ${padIcon &&\n css`\n padding-inline-start: calc((${hitAreaMouse} - ${iconSize}) / 2);\n\n @media (pointer: coarse) {\n padding-inline-start: calc(${hitAreaFinger} - ${iconSize} 2);\n }\n `}\n\n ${StyledIcon}:last-child:not(:first-child) {\n /* Offsets the flex gap to make the down arrow appear to trail the text. /\n margin-inline-start: -${theme.base.spacing};\n }\n `;\n});\n\nStyledMenuButtonChildren.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonPopover = styled(Popover)`\n min-width: 20ch;\n`;\n\nconst StyledMenuTouchDialog = styled(TouchDialog)`\n ${StyledMenu} {\n height: 100%;\n\n ${StyledMenuListWrapper} {\n flex-grow: 1;\n overflow: auto;\n }\n }\n`;\n\nconst MenuButton: ForwardRefForwardPropsComponent<MenuButtonProps> = forwardRef(function MenuButton(\n props: PropsWithoutRef<MenuButtonProps>,\n ref: MenuButtonProps['ref']\n) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n text,\n menu,\n popover,\n onClick,\n icon,\n count,\n iconOnly = false,\n showArrow,\n onKeyDown: onKeyDownProp,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getMenuButtonTestIds);\n const [isOpen, setIsOpen] = useState(false);\n\n const buttonRef = useConsolidatedRef(ref);\n // Force re-render when popoverRef is set, so useFocusWithin has a non-null ref to read\n const [, forceRerender] = useElement(null);\n const popoverRef = useConsolidatedRef<HTMLDivElement>(popover?.ref, forceRerender);\n const dialogRef = useConsolidatedRef<HTMLDivElement>(popover?.ref);\n const filterInputRef = useConsolidatedRef<HTMLInputElement>(menu?.filterInputProps?.ref);\n const menuRef = useConsolidatedRef<HTMLDivElement>(menu?.ref);\n\n // FIXME: Type assertion required for issue in useFocusWithin generic\n useFocusWithin<HTMLElement>(\n [popoverRef, dialogRef, buttonRef],\n useCallback((isFocused: boolean) => {\n if (!isFocused) setIsOpen(false);\n }, [])\n );\n\n useEscape(e => {\n if (isOpen) {\n setIsOpen(false);\n e.stopPropagation();\n }\n }, buttonRef);\n\n useEscape(e => {\n if (isOpen) {\n setIsOpen(false);\n e.stopPropagation();\n buttonRef.current?.focus();\n }\n }, menu?.focusControlEl);\n\n useEscape(e => {\n if (isOpen) {\n setIsOpen(false);\n e.stopPropagation();\n buttonRef.current?.focus();\n }\n }, filterInputRef);\n\n const { rtl } = useDirection();\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n onKeyDownProp?.(e);\n if (e.key !== 'Tab' \|\| !menu) return;\n\n const footerEl = menuRef.current?.querySelector('footer');\n if (!footerEl) return;\n\n const tabbingForward = !e.shiftKey;\n\n if (tabbingForward) {\n const footerFocusables = getFocusables(footerEl);\n\n if (footerFocusables.length > 0) {\n e.preventDefault();\n footerFocusables[0].focus();\n return;\n }\n }\n\n // Do not close the drawer when the user is tabbing backwards.\n if (!isTouchDevice) setIsOpen(false);\n },\n [menu, isTouchDevice, onKeyDownProp]\n );\n\n return (\n <>\n <Button\n data-testid={testIds.root}\n as={StyledMenuButton}\n aria-label={text}\n {...restProps}\n id={id}\n ref={buttonRef}\n aria-expanded={isOpen}\n aria-haspopup={isTouchDevice ? 'dialog' : 'menu'}\n aria-controls={isOpen ? `${id}-${isTouchDevice ? 'dialog' : 'popover'}` : undefined}\n label={iconOnly && !isOpen ? text : undefined}\n onClick={(e: MouseEvent<HTMLButtonElement> & UIEvent<HTMLButtonElement>) => {\n // e.detail is 0 when triggered by keyboard.\n const mouseClick = e.detail > 0;\n\n if (isOpen) {\n if (mouseClick) {\n // Close the menu if it is open and it is a mouse* click on the button.\n setIsOpen(false);\n }\n } else {\n // Open the menu if it's closed, for mouse or keyboard click.\n setIsOpen(true);\n }\n\n // If the menu is closed or the user mouse clicks.\n // This avoids Enter key firing onClick when selecting a menu item.\n if (!isOpen \|\| mouseClick) {\n onClick?.(e);\n }\n }}\n onKeyDown={onKeyDown}\n icon={iconOnly}\n >\n <Flex\n as={StyledMenuButtonChildren}\n container={{ alignItems: 'center', gap: 1 }}\n padIcon={iconOnly && showArrow}\n >\n {icon && <Icon name={icon} />}\n {!iconOnly && (\n <>\n <StyledMenuButtonText>{text}</StyledMenuButtonText>\n {typeof count === 'number' && <Count>{count}</Count>}\n </>\n )}\n {((!iconOnly && showArrow === undefined) \|\| showArrow) && (\n <Icon name='arrow-micro-down' />\n )}\n </Flex>\n </Button>\n\n {isTouchDevice ? (\n <StyledMenuTouchDialog\n ref={dialogRef}\n open={!!menu && isOpen}\n onDismiss={() => {\n setIsOpen(false);\n }}\n id={`${id}-dialog`}\n heading={text}\n onAfterClose={() => {\n if (dialogRef.current?.contains(getActiveElement())) {\n buttonRef.current?.focus();\n }\n }}\n >\n {menu && (\n <Menu\n testId={testIds.root}\n {...menu}\n ref={menuRef}\n loading={menu.loading}\n scrollAt={Infinity}\n items={menu.items}\n onItemClick={(itemId, e) => {\n if (menu.mode !== 'multi-select') {\n setIsOpen(false);\n }\n menu.onItemClick?.(itemId, e);\n }}\n focusControlEl={undefined}\n />\n )}\n </StyledMenuTouchDialog>\n ) : (\n <StyledMenuButtonPopover\n placement={rtl ? 'bottom-end' : 'bottom-start'}\n hideOnTargetHidden\n {...popover}\n id={`${id}-popover`}\n show={!!menu && isOpen}\n target={buttonRef.current}\n ref={popoverRef}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key !== 'Tab' \|\| !buttonRef.current) return;\n\n const footerEl = menuRef.current?.querySelector('footer');\n if (!footerEl \|\| !footerEl?.contains(getActiveElement())) return;\n\n const footerFocusables = getFocusables(footerEl);\n\n if (isInstance(e.target, HTMLElement)) {\n const currentIndex = footerFocusables.indexOf(e.target);\n const tabbingForward = !e.shiftKey;\n const isLastFocusable = currentIndex === footerFocusables.length - 1;\n\n if (tabbingForward && isLastFocusable) {\n e.preventDefault();\n const rootNode = buttonRef.current.getRootNode();\n if (!isInstance(rootNode, Document, ShadowRoot)) return;\n\n const allFocusables = getFocusables(rootNode);\n const nextIndex = allFocusables.indexOf(buttonRef.current) + 1;\n\n allFocusables[nextIndex]?.focus();\n setIsOpen(false);\n } else if (!tabbingForward && currentIndex === 0) {\n e.preventDefault();\n buttonRef.current?.focus();\n }\n }\n }}\n >\n {menu && (\n <Menu\n testId={testIds.root}\n {...menu}\n ref={menuRef}\n loading={menu.loading}\n items={menu.items}\n onItemClick={(itemId, e) => {\n // When clicking an item (by mouse or keyboard) and the menu is not multi-select, close the menu.\n if (menu.mode !== 'multi-select') {\n setIsOpen(false);\n buttonRef.current?.focus();\n }\n menu.onItemClick?.(itemId, e);\n }}\n focusControlEl={menu.focusControlEl \|\| buttonRef.current \|\| undefined}\n />\n )}\n </StyledMenuButtonPopover>\n )}\n </>\n );\n});\n\nexport default withTestIds(MenuButton, getMenuButtonTestIds);\n"]}

package/lib/components/MultiStepForm/FormProgress.styles.d.ts CHANGED Viewed

@@ -3,11 +3,17 @@ import type { Step } from './MultiStepForm.types';
 export declare const stepItemMinWidth = 15;
 /** Min width of step marker without labels in ch units */
 export declare const stepMarkerMinWidth = 3;
+/** Min width of each bar segment in bars mode in ch units */
+export declare const stepBarMinWidth = 3;
+/** Min height of each vertical bar segment in bars mode */
+export declare const stepVerticalBarMinHeight = "2.5rem";
 export declare const CurrentStepPopover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Popover").PopoverProps<string> & import("../..").ForwardProps, never>> & string & Omit<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement | null), keyof import("react").Component<any, {}, any>>;
 export declare const StyledBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     shifted?: boolean;
 }>> & string;
-export declare const StyledFill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    fillScale: number;
+}>> & string;
 export declare const StyledFormProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../..").BaseProps & import("../..").AsProp & {
     children?: import("react").ReactNode;
     ref?: import("react").Ref<Element>;
@@ -211,4 +217,22 @@ export declare const StyledBulletWrapper: import("styled-components/dist/types")
 }>> & string;
 export declare const StyledStepText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledHorizontalStepText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyleHorizontalBarList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {
+    showStepNames?: boolean;
+}>> & string;
+export declare const StyledHorizontalBarSegment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button/BareButton").BareButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | 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<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, {
+    current: boolean;
+    completed?: boolean;
+    clickable?: boolean;
+}>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledVerticalBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledVerticalBarSegment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button/BareButton").BareButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | 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<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, {
+    current: boolean;
+    completed?: boolean;
+    clickable?: boolean;
+}>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=FormProgress.styles.d.ts.map

package/lib/components/MultiStepForm/FormProgress.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"~~AAYA~~,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,0DAA0D;AAC1D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,eAAO,MAAM,kBAAkB,4ZAU9B,CAAC;AAyBF,eAAO,MAAM,SAAS;cAA0B,OAAO;YAsBrD,CAAC;AAIH,eAAO,MAAM,UAAU,~~6NA~~+~~BrB~~,CAAC;AAIH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAAkC,OAAO;gJAmBtE,CAAC;AAIH,eAAO,MAAM,UAAU;;;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;gBACR,IAAI,CAAC,WAAW,CAAC;gBACjB,OAAO;mKAmHnB,CAAC;AAIH,eAAO,MAAM,0BAA0B;oBAA+B,OAAO;YAsD5E,CAAC;AAIF,eAAO,MAAM,yBAAyB,mOAErC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;YA2Cd,CAAC;AAIH,eAAO,MAAM,cAAc,6NAKzB,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAUnC,CAAC"}
1	+ {"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,0DAA0D;AAC1D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,6DAA6D;AAC7D,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,2DAA2D;AAC3D,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD,eAAO,MAAM,kBAAkB,4ZAU9B,CAAC;AAyBF,eAAO,MAAM,SAAS;cAA0B,OAAO;YAsBrD,CAAC;AAIH,eAAO,MAAM,UAAU;eAA2B,MAAM;YA+BtD,CAAC;AAIH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAAkC,OAAO;gJAmBtE,CAAC;AAIH,eAAO,MAAM,UAAU;;;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;gBACR,IAAI,CAAC,WAAW,CAAC;gBACjB,OAAO;mKAmHnB,CAAC;AAIH,eAAO,MAAM,0BAA0B;oBAA+B,OAAO;YAsD5E,CAAC;AAIF,eAAO,MAAM,yBAAyB,mOAErC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;YA2Cd,CAAC;AAIH,eAAO,MAAM,cAAc,6NAKzB,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAUnC,CAAC;AAIH,eAAO,MAAM,sBAAsB;oBAA+B,OAAO;YA4BxE,CAAC;AAIF,eAAO,MAAM,0BAA0B;;;aAC5B,OAAO;gBACJ,OAAO;gBACP,OAAO;mKAiFnB,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAKnC,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;aAC1B,OAAO;gBACJ,OAAO;gBACP,OAAO;mKA6EnB,CAAC"}