npm - @pega/cosmos-react-core - Versions diffs - 9.17.2 → 9.19.0 - Mend

@pega/cosmos-react-core 9.17.2 → 9.19.0

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 (82) 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/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":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EACL,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACP,MAAM,aAAa,CAAC;AAErB,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,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,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,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,kBAAkB,EAAkB,CAAC;IACxD,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,kBAAkB,EAAkB,CAAC;IACrD,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;IAEd,aAAa,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE;QACzD,IAAI,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;YAC7B,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,aAAa,CAAC,CAAC,CAAC,CACrB,KAAC,WAAW,IACV,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,OAAO,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO,gBACJ,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,EACvD,WAAW,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE;QAC3C,wGAAwG;QACxG,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,YAE7C,IAAI,IAAI,CACP,KAAC,IAAI,OACC,IAAI,EACR,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACzB,IAAI,IAAI,EAAE,IAAI,KAAK,cAAc,EAAE,CAAC;oBAClC,OAAO,EAAE,CAAC;gBACZ,CAAC;gBACD,IAAI,EAAE,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;YACjC,CAAC,GACD,CACH,GACW,CACf,CAAC,CAAC,CAAC,CACF,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, 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":"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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 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/HorizontalFormProgress.js CHANGED Viewed

@@ -7,7 +7,7 @@ import Flex from '../Flex';
 import Text from '../Text';
 import Tooltip from '../Tooltip';
 import Button from '../Button';
-import InfoDialog from '../Dialog/InfoDialog';
+import { InfoDialog } from '../Dialog';
 import { CurrentStepPopover, StepMarker, StyledBar, StyledFill, StyledFormProgress, StyledHorizontalBarSegment, StyledHorizontalStepText, StyleHorizontalBarList, StyleHorizontalStepMarkers } from './FormProgress.styles';
 import VerticalFormProgress from './VerticalFormProgress';
 import { useFormProgressOverflow } from './useFormProgressOverflow';

package/lib/components/MultiStepForm/HorizontalFormProgress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport InfoDialog from '../Dialog/InfoDialog';\n\nimport {\n CurrentStepPopover,\n StepMarker,\n StyledBar,\n StyledFill,\n StyledFormProgress,\n StyledHorizontalBarSegment,\n StyledHorizontalStepText,\n StyleHorizontalBarList,\n StyleHorizontalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport { useFormProgressOverflow } from './useFormProgressOverflow';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n variant?: MultiStepFormProps['variant'];\n showStepNames?: boolean;\n}\n\nconst HorizontalFormProgress = ({\n steps,\n currentStepId,\n showStepNames = false,\n variant = 'dot',\n ...restProps\n}: FormProgressProps & ForwardProps) => {\n const t = useI18n();\n const theme = useTheme();\n const isBarsMode = variant === 'bar';\n\n const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement<HTMLButtonElement>();\n const [showStepsDialog, setShowStepsDialog] = useState(false);\n\n const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(\n steps.length,\n showStepNames,\n isBarsMode\n );\n\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n const fillScale = curIdx / (steps.length - 1);\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const stepsRef = useRef(null);\n const { rtl } = useDirection();\n\n let popoverPlacement: 'bottom' \| 'bottom-start' \| 'bottom-end' = 'bottom';\n if (curIdx === 0) popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';\n else if (curIdx === steps.length - 1) popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';\n\n const numberOfSteps = steps.length;\n\n const setStepElement = (stepId: string) => (el: HTMLElement \| null) => {\n setStepEls(curr => {\n const newEls = { ...curr };\n\n if (!el && newEls[stepId]) {\n delete newEls[stepId];\n return newEls;\n }\n\n if (el) return { ...newEls, [stepId]: el };\n\n return newEls;\n });\n };\n\n const renderStepName = ({\n isCurrent,\n stepName,\n onMarkerClick\n }: {\n isCurrent: boolean;\n stepName: string;\n onMarkerClick?: MultiStepFormProps['steps'][number]['onMarkerClick'];\n }) => {\n if (!showStepNames) return null;\n\n if (!!onMarkerClick && !isCurrent) {\n return (\n <Button variant='link' onClick={onMarkerClick} as={StyledHorizontalStepText} tabIndex={-1}>\n {stepName}\n </Button>\n );\n }\n\n return (\n <Text variant={isCurrent ? 'h3' : undefined} as={StyledHorizontalStepText}>\n {stepName}\n </Text>\n );\n };\n\n const renderStepItem = (step: MultiStepFormProps['steps'][number], index: number) => {\n const isCurrent = index === curIdx;\n const markerContent =\n !showStepNames && !isCurrent ? (\n <Tooltip\n target={stepEls[step.id]}\n showDelay='none'\n hideDelay='short'\n describeTarget={false}\n >\n {step.name}\n </Tooltip>\n ) : null;\n\n const commonMarkerProps = {\n id: step.id,\n 'data-step-marker': '',\n 'aria-label': `${step.name} - ${t('step_num', [index + 1, steps.length])}`,\n 'aria-current': isCurrent ? ('step' as const) : undefined,\n tabIndex: isCurrent ? 0 : -1,\n current: isCurrent,\n completed: step.completed,\n onClick: step.onMarkerClick,\n clickable: !!step.onMarkerClick && !isCurrent\n };\n\n return (\n <li key={step.id}>\n {isBarsMode ? (\n <StyledHorizontalBarSegment ref={setStepElement(step.id)} {...commonMarkerProps}>\n {markerContent}\n </StyledHorizontalBarSegment>\n ) : (\n <StepMarker ref={setStepElement(step.id)} depth={step.depth} {...commonMarkerProps}>\n {markerContent}\n </StepMarker>\n )}\n\n {renderStepName({\n isCurrent,\n stepName: step.name,\n onMarkerClick: step.onMarkerClick\n })}\n </li>\n );\n };\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n dir: 'left-right',\n initialFocusElement: currentStepEl\n });\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n cycle: false,\n dir: 'up-down',\n initialFocusElement: currentStepEl\n });\n\n useEffect(() => {\n if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n setCurrentStepEl(stepEls[curStep.id]);\n }\n }, [Object.keys(stepEls), curStep]);\n\n useEffect(() => {\n if (!stepsAreOverflowing) {\n setShowStepsDialog(false);\n }\n }, [stepsAreOverflowing]);\n\n return (\n <StyledFormProgress\n ref={formProgressRef}\n {...restProps}\n container={{ alignItems: 'center' }}\n showStepNames={showStepNames}\n >\n <CurrentStepPopover\n show={!showStepNames}\n target={currentStepEl}\n placement={popoverPlacement}\n strategy='absolute'\n portal={false}\n hideOnTargetHidden\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n 0,\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n },\n {\n name: 'placeAndContain',\n enabled: false\n },\n {\n name: 'flip',\n enabled: false\n },\n {\n name: 'preventOverflow',\n options: {\n padding: 0\n }\n }\n ]}\n >\n <Text variant='h4'>{curStep.name}</Text>\n </CurrentStepPopover>\n\n {stepsAreOverflowing ? (\n <div>\n <Button\n ref={setStepsDialogButtonEl}\n variant='link'\n onClick={() => {\n setShowStepsDialog(true);\n }}\n >\n {t('step_num', [curIdx + 1, numberOfSteps])}\n </Button>\n <Text variant='h4'>{curStep.name}</Text>\n\n {stepsDialogButtonEl && showStepsDialog && (\n <InfoDialog\n heading={t('steps')}\n target={stepsDialogButtonEl}\n onDismiss={() => {\n setShowStepsDialog(false);\n }}\n placement='bottom-start'\n >\n <VerticalFormProgress steps={steps} currentStepId={currentStepId} variant={variant} />\n </InfoDialog>\n )}\n </div>\n ) : (\n <>\n <Flex\n ref={stepsRef}\n as={isBarsMode ? StyleHorizontalBarList : StyleHorizontalStepMarkers}\n container={{ justify: 'between', alignItems: 'start', gap: 1 }}\n item={{ grow: 1 }}\n showStepNames={showStepNames}\n >\n {steps.map(renderStepItem)}\n </Flex>\n\n {!isBarsMode && (\n <StyledBar shifted={showStepNames}>\n <StyledFill fillScale={fillScale} />\n </StyledBar>\n )}\n </>\n )}\n </StyledFormProgress>\n );\n};\n\nexport default HorizontalFormProgress;\n"]}
1	+ {"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport { InfoDialog } from '../Dialog';\n\nimport {\n CurrentStepPopover,\n StepMarker,\n StyledBar,\n StyledFill,\n StyledFormProgress,\n StyledHorizontalBarSegment,\n StyledHorizontalStepText,\n StyleHorizontalBarList,\n StyleHorizontalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport { useFormProgressOverflow } from './useFormProgressOverflow';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n variant?: MultiStepFormProps['variant'];\n showStepNames?: boolean;\n}\n\nconst HorizontalFormProgress = ({\n steps,\n currentStepId,\n showStepNames = false,\n variant = 'dot',\n ...restProps\n}: FormProgressProps & ForwardProps) => {\n const t = useI18n();\n const theme = useTheme();\n const isBarsMode = variant === 'bar';\n\n const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement<HTMLButtonElement>();\n const [showStepsDialog, setShowStepsDialog] = useState(false);\n\n const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(\n steps.length,\n showStepNames,\n isBarsMode\n );\n\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n const fillScale = curIdx / (steps.length - 1);\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const stepsRef = useRef(null);\n const { rtl } = useDirection();\n\n let popoverPlacement: 'bottom' \| 'bottom-start' \| 'bottom-end' = 'bottom';\n if (curIdx === 0) popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';\n else if (curIdx === steps.length - 1) popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';\n\n const numberOfSteps = steps.length;\n\n const setStepElement = (stepId: string) => (el: HTMLElement \| null) => {\n setStepEls(curr => {\n const newEls = { ...curr };\n\n if (!el && newEls[stepId]) {\n delete newEls[stepId];\n return newEls;\n }\n\n if (el) return { ...newEls, [stepId]: el };\n\n return newEls;\n });\n };\n\n const renderStepName = ({\n isCurrent,\n stepName,\n onMarkerClick\n }: {\n isCurrent: boolean;\n stepName: string;\n onMarkerClick?: MultiStepFormProps['steps'][number]['onMarkerClick'];\n }) => {\n if (!showStepNames) return null;\n\n if (!!onMarkerClick && !isCurrent) {\n return (\n <Button variant='link' onClick={onMarkerClick} as={StyledHorizontalStepText} tabIndex={-1}>\n {stepName}\n </Button>\n );\n }\n\n return (\n <Text variant={isCurrent ? 'h3' : undefined} as={StyledHorizontalStepText}>\n {stepName}\n </Text>\n );\n };\n\n const renderStepItem = (step: MultiStepFormProps['steps'][number], index: number) => {\n const isCurrent = index === curIdx;\n const markerContent =\n !showStepNames && !isCurrent ? (\n <Tooltip\n target={stepEls[step.id]}\n showDelay='none'\n hideDelay='short'\n describeTarget={false}\n >\n {step.name}\n </Tooltip>\n ) : null;\n\n const commonMarkerProps = {\n id: step.id,\n 'data-step-marker': '',\n 'aria-label': `${step.name} - ${t('step_num', [index + 1, steps.length])}`,\n 'aria-current': isCurrent ? ('step' as const) : undefined,\n tabIndex: isCurrent ? 0 : -1,\n current: isCurrent,\n completed: step.completed,\n onClick: step.onMarkerClick,\n clickable: !!step.onMarkerClick && !isCurrent\n };\n\n return (\n <li key={step.id}>\n {isBarsMode ? (\n <StyledHorizontalBarSegment ref={setStepElement(step.id)} {...commonMarkerProps}>\n {markerContent}\n </StyledHorizontalBarSegment>\n ) : (\n <StepMarker ref={setStepElement(step.id)} depth={step.depth} {...commonMarkerProps}>\n {markerContent}\n </StepMarker>\n )}\n\n {renderStepName({\n isCurrent,\n stepName: step.name,\n onMarkerClick: step.onMarkerClick\n })}\n </li>\n );\n };\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n dir: 'left-right',\n initialFocusElement: currentStepEl\n });\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n cycle: false,\n dir: 'up-down',\n initialFocusElement: currentStepEl\n });\n\n useEffect(() => {\n if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n setCurrentStepEl(stepEls[curStep.id]);\n }\n }, [Object.keys(stepEls), curStep]);\n\n useEffect(() => {\n if (!stepsAreOverflowing) {\n setShowStepsDialog(false);\n }\n }, [stepsAreOverflowing]);\n\n return (\n <StyledFormProgress\n ref={formProgressRef}\n {...restProps}\n container={{ alignItems: 'center' }}\n showStepNames={showStepNames}\n >\n <CurrentStepPopover\n show={!showStepNames}\n target={currentStepEl}\n placement={popoverPlacement}\n strategy='absolute'\n portal={false}\n hideOnTargetHidden\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n 0,\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n },\n {\n name: 'placeAndContain',\n enabled: false\n },\n {\n name: 'flip',\n enabled: false\n },\n {\n name: 'preventOverflow',\n options: {\n padding: 0\n }\n }\n ]}\n >\n <Text variant='h4'>{curStep.name}</Text>\n </CurrentStepPopover>\n\n {stepsAreOverflowing ? (\n <div>\n <Button\n ref={setStepsDialogButtonEl}\n variant='link'\n onClick={() => {\n setShowStepsDialog(true);\n }}\n >\n {t('step_num', [curIdx + 1, numberOfSteps])}\n </Button>\n <Text variant='h4'>{curStep.name}</Text>\n\n {stepsDialogButtonEl && showStepsDialog && (\n <InfoDialog\n heading={t('steps')}\n target={stepsDialogButtonEl}\n onDismiss={() => {\n setShowStepsDialog(false);\n }}\n placement='bottom-start'\n >\n <VerticalFormProgress steps={steps} currentStepId={currentStepId} variant={variant} />\n </InfoDialog>\n )}\n </div>\n ) : (\n <>\n <Flex\n ref={stepsRef}\n as={isBarsMode ? StyleHorizontalBarList : StyleHorizontalStepMarkers}\n container={{ justify: 'between', alignItems: 'start', gap: 1 }}\n item={{ grow: 1 }}\n showStepNames={showStepNames}\n >\n {steps.map(renderStepItem)}\n </Flex>\n\n {!isBarsMode && (\n <StyledBar shifted={showStepNames}>\n <StyledFill fillScale={fillScale} />\n </StyledBar>\n )}\n </>\n )}\n </StyledFormProgress>\n );\n};\n\nexport default HorizontalFormProgress;\n"]}

package/lib/components/ResponsiveActions/ResponsiveActions.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResponsiveActions.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1D,KAAK,sBAAsB,GAAG,cAAc,CAC1C,KAAK,EACL,MAAM,GAAG;IAEP,UAAU,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAEnC,SAAS,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,gCAAgC;cAA0B,OAAO;~~YAuB7E~~,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,6CAA6C,sBAAsB,4CAoE7F,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"ResponsiveActions.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1D,KAAK,sBAAsB,GAAG,cAAc,CAC1C,KAAK,EACL,MAAM,GAAG;IAEP,UAAU,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAEnC,SAAS,EAAE,SAAS,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,gCAAgC;cAA0B,OAAO;YAwB7E,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,6CAA6C,sBAAsB,4CAoE7F,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ResponsiveActions/ResponsiveActions.js CHANGED Viewed

@@ -23,6 +23,7 @@ export const StyledResponsiveActionsContainer = styled.div(({ stacked }) => css
     &[aria-hidden='true'] {
       position: fixed;
       visibility: hidden;
+      inset-inline-end: 100lvi;
     }
   `);
 const ResponsiveActions = ({ actionsRef, actionsEl, as, ...restProps }) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ResponsiveActions.js","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAazC,MAAM,CAAC,MAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CACxD,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAChB,YAAY,MAAM,YAAY;;;;;;;;MAQ9B,CAAC,OAAO;IACV,GAAG,CAAA;;;;;KAKF~~;;;;;;GAMF~~,CACF,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,SAAS,EAA0B,EAAE,EAAE;IAChG,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,gBAAgB,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACnD,MAAM,cAAc,GAAG,gBAAgB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAE9E,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;gBAClD,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,cAAc,EAAE,CAAC;wBACvE,UAAU,CAAC,KAAK,CAAC,CAAC;oBACpB,CAAC;yBAAM,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,cAAc,EAAE,CAAC;wBAChF,UAAU,CAAC,IAAI,CAAC,CAAC;oBACnB,CAAC;gBACH,CAAC,EAAE,CAAC,CAAC,CAAC;YACR,CAAC,CAAC,CAAC;YAEH,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAE3C,OAAO,GAAG,EAAE;gBACV,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9B,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,eAAe,CAAC,GAAG,EAAE;QACnB,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACvE,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;YACD,IAAI,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;gBACvC,MAAM,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACxC,CAAC;YACD,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,8BACE,KAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gCAAgC,EACpC,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;iBAC5D,YAEA,SAAS,GACL,EACP,KAAC,IAAI,IACH,EAAE,EAAE,gCAAgC,EACpC,GAAG,EAAE,gBAAgB,uBAErB,KAAK,EAAC,EAAE,EACR,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,SAAS,EAAE,KAAK;oBAChB,OAAO,EAAE,KAAK;iBACf,YAEA,SAAS,GACL,IACN,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport type { ReactNode, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../Flex';\nimport { StyledButton } from '../Button';\nimport type { AsProp, WithAttributes } from '../../types';\n\ntype ResponsiveActionsProps = WithAttributes<\n 'div',\n AsProp & {\n /* Ref assigned to the actions region. /\n actionsRef: RefObject<HTMLElement>;\n / Actions region content. */\n actionsEl: ReactNode;\n }\n>;\n\nexport const StyledResponsiveActionsContainer = styled.div<{ stacked?: boolean }>(\n ({ stacked }) => css`\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: unset;\n }\n\n & > :not(a, button) {\n display: contents;\n }\n\n ${!stacked &&\n css`\n & > :is(a, button):first-child:not(:last-child),\n & > :first-child:not(:last-child) :is(a, button):first-child {\n margin-inline-end: auto;\n }\n `}\n\n &[aria-hidden='true'] {\n position: fixed;\n visibility: hidden;\n }\n `\n);\n\nconst ResponsiveActions = ({ actionsRef, actionsEl, as, ...restProps }: ResponsiveActionsProps) => {\n const hiddenActionsRef = useRef<HTMLDivElement>(null);\n const [stacked, setStacked] = useState(false);\n\n useLayoutEffect(() => {\n if (hiddenActionsRef.current && actionsRef.current) {\n const minInlineWidth = hiddenActionsRef.current.getBoundingClientRect().width;\n\n const resizeObserver = new ResizeObserver(entries => {\n setTimeout(() => {\n if (stacked && entries[0].borderBoxSize[0].inlineSize > minInlineWidth) {\n setStacked(false);\n } else if (!stacked && entries[0].borderBoxSize[0].inlineSize <= minInlineWidth) {\n setStacked(true);\n }\n }, 0);\n });\n\n resizeObserver.observe(actionsRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n });\n\n useLayoutEffect(() => {\n hiddenActionsRef.current?.querySelectorAll('a, button').forEach(action => {\n if (action.hasAttribute('id')) {\n action.removeAttribute('id');\n }\n if (action.hasAttribute('data-testid')) {\n action.removeAttribute('data-testid');\n }\n action.setAttribute('role', 'none');\n });\n });\n\n return (\n <>\n <Flex\n {...restProps}\n as={StyledResponsiveActionsContainer}\n forwardedAs={as}\n ref={actionsRef}\n stacked={stacked}\n container={{\n gap: 1,\n ...(stacked ? { direction: 'column' } : { justify: 'end' })\n }}\n >\n {actionsEl}\n </Flex>\n <Flex\n as={StyledResponsiveActionsContainer}\n ref={hiddenActionsRef}\n aria-hidden\n inert=''\n container={{\n gap: 1,\n direction: 'row',\n justify: 'end'\n }}\n >\n {actionsEl}\n </Flex>\n </>\n );\n};\n\nexport default ResponsiveActions;\n"]}
1	+ {"version":3,"file":"ResponsiveActions.js","sourceRoot":"","sources":["../../../src/components/ResponsiveActions/ResponsiveActions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport type { ReactNode, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../Flex';\nimport { StyledButton } from '../Button';\nimport type { AsProp, WithAttributes } from '../../types';\n\ntype ResponsiveActionsProps = WithAttributes<\n 'div',\n AsProp & {\n /* Ref assigned to the actions region. /\n actionsRef: RefObject<HTMLElement>;\n / Actions region content. */\n actionsEl: ReactNode;\n }\n>;\n\nexport const StyledResponsiveActionsContainer = styled.div<{ stacked?: boolean }>(\n ({ stacked }) => css`\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: unset;\n }\n\n & > :not(a, button) {\n display: contents;\n }\n\n ${!stacked &&\n css`\n & > :is(a, button):first-child:not(:last-child),\n & > :first-child:not(:last-child) :is(a, button):first-child {\n margin-inline-end: auto;\n }\n `}\n\n &[aria-hidden='true'] {\n position: fixed;\n visibility: hidden;\n inset-inline-end: 100lvi;\n }\n `\n);\n\nconst ResponsiveActions = ({ actionsRef, actionsEl, as, ...restProps }: ResponsiveActionsProps) => {\n const hiddenActionsRef = useRef<HTMLDivElement>(null);\n const [stacked, setStacked] = useState(false);\n\n useLayoutEffect(() => {\n if (hiddenActionsRef.current && actionsRef.current) {\n const minInlineWidth = hiddenActionsRef.current.getBoundingClientRect().width;\n\n const resizeObserver = new ResizeObserver(entries => {\n setTimeout(() => {\n if (stacked && entries[0].borderBoxSize[0].inlineSize > minInlineWidth) {\n setStacked(false);\n } else if (!stacked && entries[0].borderBoxSize[0].inlineSize <= minInlineWidth) {\n setStacked(true);\n }\n }, 0);\n });\n\n resizeObserver.observe(actionsRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n });\n\n useLayoutEffect(() => {\n hiddenActionsRef.current?.querySelectorAll('a, button').forEach(action => {\n if (action.hasAttribute('id')) {\n action.removeAttribute('id');\n }\n if (action.hasAttribute('data-testid')) {\n action.removeAttribute('data-testid');\n }\n action.setAttribute('role', 'none');\n });\n });\n\n return (\n <>\n <Flex\n {...restProps}\n as={StyledResponsiveActionsContainer}\n forwardedAs={as}\n ref={actionsRef}\n stacked={stacked}\n container={{\n gap: 1,\n ...(stacked ? { direction: 'column' } : { justify: 'end' })\n }}\n >\n {actionsEl}\n </Flex>\n <Flex\n as={StyledResponsiveActionsContainer}\n ref={hiddenActionsRef}\n aria-hidden\n inert=''\n container={{\n gap: 1,\n direction: 'row',\n justify: 'end'\n }}\n >\n {actionsEl}\n </Flex>\n </>\n );\n};\n\nexport default ResponsiveActions;\n"]}

package/lib/components/TextArea/TextArea.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EAIF,kBAAkB,EAElB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAgBvD,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CACjD;;;;AA+ND,wBAAyD"}
1	+ {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EAIF,kBAAkB,EAElB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAgBvD,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CACjD;;;;AA+MD,wBAAyD"}

package/lib/components/TextArea/TextArea.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState, useEffect, useRef, useLayoutEffect } from 'react';
+import { forwardRef, useCallback, useState, useEffect, useRef } from 'react';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import { hasProp, withTestIds } from '../../utils';
 import { useConsolidatedRef, useElement, useI18n, useLiveLog, useTestIds, useUID } from '../../hooks';
 import Text from '../Text';
 import VisuallyHiddenText from '../VisuallyHiddenText';
-import StyledTextArea, { textAreaMaxHeight } from './TextArea.styles';
+import StyledTextArea from './TextArea.styles';
 import { getTextAreaTestIds } from './TextArea.test-ids';
 const warnCharCount = 30;
 const TextArea = forwardRef(function TextArea(props, ref) {
@@ -19,7 +19,6 @@ const TextArea = forwardRef(function TextArea(props, ref) {
     const [textAreaEl, setTextAreaEl] = useElement();
     const textAreaRef = useConsolidatedRef(ref, setTextAreaEl);
     const prevHeightRef = useRef(0);
-    const heightPxRef = useRef(0);
     const focusTimeoutRef = useRef(NaN);
     const { announceAssertive } = useLiveLog();
     const controlProp = {};
@@ -54,12 +53,7 @@ const TextArea = forwardRef(function TextArea(props, ref) {
     const recalculateHeight = useCallback(() => {
         if (!textAreaRef.current)
             return;
-        const baseHeightPx = heightPxRef.current;
-        const currentHeight = parseFloat(getComputedStyle(textAreaRef.current).getPropertyValue('--textarea-height'));
-        textAreaRef.current.style.marginBlockEnd =
-            currentHeight > baseHeightPx
-                ? `calc(min(${textAreaMaxHeight}, ${currentHeight}px) - ${baseHeightPx}px)`
-                : '0';
+        const scrollY = window.scrollY;
         textAreaRef.current.style.setProperty('--textarea-height', 'auto');
         // Remove scrollbar width to avoid interference with calculation.
         textAreaRef.current.style.setProperty('scrollbar-width', 'none');
@@ -67,14 +61,12 @@ const TextArea = forwardRef(function TextArea(props, ref) {
         const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;
         // Set height to auto then scrollHeight + borderWidth to resize TextArea to content
         textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);
-        textAreaRef.current.style.removeProperty('margin-block-end');
         textAreaRef.current.style.removeProperty('scrollbar-width');
+        // height:auto can trigger browser caret scroll-into-view; undo if it moved.
+        if (window.scrollY !== scrollY) {
+            window.scrollTo(window.scrollX, scrollY);
+        }
     }, []);
-    useLayoutEffect(() => {
-        if (!textAreaRef.current)
-            return;
-        heightPxRef.current = textAreaRef.current.offsetHeight;
-    }, [textAreaEl]);
     useEffect(() => {
         if (!textAreaRef.current)
             return;
@@ -93,12 +85,6 @@ const TextArea = forwardRef(function TextArea(props, ref) {
         const observer = new ResizeObserver(entries => {
             const currentHeight = entries[0].contentRect.height;
             if (prevHeightRef.current === 0 && currentHeight > 0) {
-                const textareaHeight = getComputedStyle(textAreaEl)
-                    .getPropertyValue('--textarea-height')
-                    .trim();
-                if (!textareaHeight || textareaHeight === 'auto' || textareaHeight === 'unset') {
-                    heightPxRef.current = textAreaEl.offsetHeight;
-                }
                 recalculateHeight();
             }
             prevHeightRef.current = currentHeight;