@pega/cosmos-react-core 2.0.0-dev.19.0 → 2.0.0-dev.21.0

package/lib/components/Menu/MenuListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuListHeader.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuListHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoC,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElF,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,cAAc,GAA0D,CAAC,EAC7E,IAAI,EACJ,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,0BAA0B,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/D,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAoC,EAAE,EAAE;QACvC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE;YACzD,OAAO,EAAE,CAAC;SACX;IACH,CAAC,EACD,CAAC,OAAO,EAAE,KAAK,CAAC,CACjB,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,gBACjE,KAAC,UAAU,kBACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,mBACN,MAAM,mBACN,MAAM,gBACR,GAAG,CAAC,CAAC,eAAe,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAC7C,0BAA0B;gBACxB,CAAC,CAAC,CAAC,CAAC,gCAAgC,CAAC;gBACrC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAClC,EAAE,gBAEF,KAAC,WAAW,IAAC,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,WAAI,EAAE,OAAO,EAAE,IAAI,WAAI,YAC7D,YACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, KeyboardEvent, useCallback, useContext } from 'react';\n\nimport Icon from '../Icon';\nimport { ForwardProps } from '../../types';\nimport { useI18n, useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport BareButton from '../Button/BareButton';\nimport SummaryItem from '../SummaryItem';\nimport { cap } from '../../utils';\n\nimport { MenuListHeaderProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledMenuListHeader } from './Menu.styles';\n\nconst MenuListHeader: FunctionComponent<MenuListHeaderProps & ForwardProps> = ({\n  text,\n  onClick\n}) => {\n  const t = useI18n();\n  const { arrowNavigationUnsupported } = useContext(MenuContext);\n  const { start } = useDirection();\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLLegendElement>) => {\n      if (ev.key === 'Enter' || ev.key === `Arrow${cap(start)}`) {\n        onClick();\n      }\n    },\n    [onClick, start]\n  );\n\n  return (\n    <Flex container={{ alignItems: 'center' }} as={StyledMenuListHeader}>\n      <BareButton\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        data-collapse='true'\n        aria-expanded='true'\n        aria-label={`${t('collapse_noun', [text || ''])} ${\n          arrowNavigationUnsupported\n            ? t('menu_item_collapse_shift_space')\n            : t('menu_item_collapse_arrow')\n        }`}\n      >\n        <SummaryItem visual={<Icon name={`caret-${start}`} />} primary={text} />\n      </BareButton>\n    </Flex>\n  );\n};\n\nexport default MenuListHeader;\n"]}
+{"version":3,"file":"MenuListHeader.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuListHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoC,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElF,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,cAAc,GAA0D,CAAC,EAC7E,IAAI,EACJ,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,0BAA0B,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/D,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAoC,EAAE,EAAE;QACvC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE;YACzD,OAAO,EAAE,CAAC;SACX;IACH,CAAC,EACD,CAAC,OAAO,EAAE,KAAK,CAAC,CACjB,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,YACjE,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,mBACN,MAAM,mBACN,MAAM,gBACR,GAAG,CAAC,CAAC,eAAe,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAC7C,0BAA0B;gBACxB,CAAC,CAAC,CAAC,CAAC,gCAAgC,CAAC;gBACrC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAClC,EAAE,YAEF,KAAC,WAAW,IAAC,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,WAAI,EAAE,OAAO,EAAE,IAAI,WAAI,WAC7D,WACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, KeyboardEvent, useCallback, useContext } from 'react';\n\nimport Icon from '../Icon';\nimport { ForwardProps } from '../../types';\nimport { useI18n, useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport BareButton from '../Button/BareButton';\nimport SummaryItem from '../SummaryItem';\nimport { cap } from '../../utils';\n\nimport { MenuListHeaderProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledMenuListHeader } from './Menu.styles';\n\nconst MenuListHeader: FunctionComponent<MenuListHeaderProps & ForwardProps> = ({\n  text,\n  onClick\n}) => {\n  const t = useI18n();\n  const { arrowNavigationUnsupported } = useContext(MenuContext);\n  const { start } = useDirection();\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLLegendElement>) => {\n      if (ev.key === 'Enter' || ev.key === `Arrow${cap(start)}`) {\n        onClick();\n      }\n    },\n    [onClick, start]\n  );\n\n  return (\n    <Flex container={{ alignItems: 'center' }} as={StyledMenuListHeader}>\n      <BareButton\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        data-collapse='true'\n        aria-expanded='true'\n        aria-label={`${t('collapse_noun', [text || ''])} ${\n          arrowNavigationUnsupported\n            ? t('menu_item_collapse_shift_space')\n            : t('menu_item_collapse_arrow')\n        }`}\n      >\n        <SummaryItem visual={<Icon name={`caret-${start}`} />} primary={text} />\n      </BareButton>\n    </Flex>\n  );\n};\n\nexport default MenuListHeader;\n"]}

package/lib/components/MenuButton/MenuButton.js

@@ -36,7 +36,7 @@ const MenuButton = forwardRef((props, ref) => {
             setIsOpen(false);
     }, []));
     const { rtl } = useDirection();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ as: StyledMenuButton }, restProps, { id: id, ref: buttonRef, "aria-expanded": isOpen, "aria-haspopup": 'menu', "aria-controls": `${id}-popover`, "aria-label": text, label: iconOnly && !isOpen ? text : undefined, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { as: StyledMenuButton, ...restProps, id: id, ref: buttonRef, "aria-expanded": isOpen, "aria-haspopup": 'menu', "aria-controls": `${id}-popover`, "aria-label": text, label: iconOnly && !isOpen ? text : undefined, onClick: (e) => {
                     // clickCount is 0 when triggered by keyboard.
                     const clickCount = e.detail;
                     // Close the menu if it is open and either:
@@ -53,14 +53,14 @@ const MenuButton = forwardRef((props, ref) => {
                     if (e.key === 'Escape')
                         setIsOpen(false);
                     onKeyDown?.(e);
-                }, icon: iconOnly }, { children: _jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 } }, { children: [icon && _jsx(Icon, { name: icon }, void 0), !iconOnly && (_jsxs(Text, { children: [text, " ", count !== undefined && _jsx(Count, { children: count }, void 0), text && _jsx(Icon, { name: 'arrow-micro-down' }, void 0)] }, void 0))] }), void 0) }), void 0), _jsx(StyledMenuButtonPopover, Object.assign({ placement: rtl ? 'bottom-end' : 'bottom-start', id: `${id}-popover` }, popover, { show: !!menu && isOpen, target: buttonRef.current, ref: popoverRef }, { children: menu && (_jsx(Menu, Object.assign({}, menu, { ref: menuRef, items: menu.items, onItemClick: (itemId, e) => {
+                }, icon: iconOnly, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [icon && _jsx(Icon, { name: icon }, void 0), !iconOnly && (_jsxs(Text, { children: [text, " ", count !== undefined && _jsx(Count, { children: count }, void 0), text && _jsx(Icon, { name: 'arrow-micro-down' }, void 0)] }, void 0))] }, void 0) }, void 0), _jsx(StyledMenuButtonPopover, { placement: rtl ? 'bottom-end' : 'bottom-start', id: `${id}-popover`, ...popover, show: !!menu && isOpen, target: buttonRef.current, ref: popoverRef, children: menu && (_jsx(Menu, { ...menu, ref: menuRef, items: menu.items, onItemClick: (itemId, e) => {
                         if (menu.mode !== 'multi-select' &&
                             e
                                 .detail > 0) {
                             setIsOpen(false);
                         }
                         menu.onItemClick?.(itemId, e);
-                    }, focusControlEl: buttonRef.current || undefined }), void 0)) }), void 0)] }, void 0));
+                    }, focusControlEl: buttonRef.current || undefined }, void 0)) }, void 0)] }, void 0));
 });
 export default MenuButton;
 //# sourceMappingURL=MenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useState,\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEventHandler,\n  MouseEvent,\n  UIEvent,\n  PropsWithoutRef,\n  useCallback,\n  KeyboardEventHandler\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef, useUID, useFocusWithin, useDirection } from '../../hooks';\nimport Button, { ButtonProps, StyledButton } from '../Button';\nimport Popover, { PopoverProps, StyledPopover } from '../Popover';\nimport Menu from '../Menu';\nimport { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport type { CountProps } from '../Badges/Count';\n\nregisterIcon(arrowMicroDownIcon);\n\nexport interface MenuButtonProps extends BaseProps, NoChildrenProp {\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}\n\nconst StyledMenuButton = styled.button`\n  flex-shrink: 0;\n\n  & + ${StyledPopover} + ${StyledButton} {\n    margin-inline-start: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonPopover = styled(Popover)`\n  min-width: 20ch;\n`;\n\nconst MenuButton: FunctionComponent<ForwardProps & MenuButtonProps> = forwardRef(\n  (props: PropsWithoutRef<MenuButtonProps>, ref: MenuButtonProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      text,\n      menu,\n      popover,\n      onClick,\n      onKeyDown,\n      icon,\n      count,\n      iconOnly = false,\n      ...restProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const buttonRef = useConsolidatedRef(ref);\n    const popoverRef = useConsolidatedRef<HTMLDivElement>(popover?.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 => {\n        if (!isFocused) setIsOpen(false);\n      }, [])\n    );\n\n    const { rtl } = useDirection();\n\n    return (\n      <>\n        <Button\n          as={StyledMenuButton}\n          {...restProps}\n          id={id}\n          ref={buttonRef}\n          aria-expanded={isOpen}\n          aria-haspopup='menu'\n          aria-controls={`${id}-popover`}\n          aria-label={text}\n          label={iconOnly && !isOpen ? text : undefined}\n          onClick={(e: MouseEvent<HTMLButtonElement> & UIEvent<HTMLButtonElement>) => {\n            // clickCount is 0 when triggered by keyboard.\n            const clickCount = e.detail;\n\n            // Close the menu if it is open and either:\n            //   It is a *mouse* click on the button.\n            //   Or, the menu mode is not multiselect.\n            if (isOpen && (clickCount > 0 || menu?.mode !== 'multi-select')) {\n              setIsOpen(false);\n            } else {\n              setIsOpen(true);\n            }\n\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent) => {\n            if (e.key === 'Escape') setIsOpen(false);\n            onKeyDown?.(e);\n          }}\n          icon={iconOnly}\n        >\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            {icon && <Icon name={icon} />}\n            {!iconOnly && (\n              <Text>\n                {text} {count !== undefined && <Count>{count}</Count>}\n                {text && <Icon name='arrow-micro-down' />}\n              </Text>\n            )}\n          </Flex>\n        </Button>\n        <StyledMenuButtonPopover\n          placement={rtl ? 'bottom-end' : 'bottom-start'}\n          id={`${id}-popover`}\n          {...popover}\n          show={!!menu && isOpen}\n          target={buttonRef.current}\n          ref={popoverRef}\n        >\n          {menu && (\n            <Menu\n              {...menu}\n              ref={menuRef}\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                  setIsOpen(false);\n                }\n                menu.onItemClick?.(itemId, e);\n              }}\n              focusControlEl={buttonRef.current || undefined}\n            />\n          )}\n        </StyledMenuButtonPopover>\n      </>\n    );\n  }\n);\n\nexport default MenuButton;\n"]}
+{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useState,\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEventHandler,\n  MouseEvent,\n  UIEvent,\n  PropsWithoutRef,\n  useCallback,\n  KeyboardEventHandler\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef, useUID, useFocusWithin, useDirection } from '../../hooks';\nimport Button, { ButtonProps, StyledButton } from '../Button';\nimport Popover, { PopoverProps, StyledPopover } from '../Popover';\nimport Menu from '../Menu';\nimport { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport type { CountProps } from '../Badges/Count';\n\nregisterIcon(arrowMicroDownIcon);\n\nexport interface MenuButtonProps extends BaseProps, NoChildrenProp {\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}\n\nconst StyledMenuButton = styled.button`\n  flex-shrink: 0;\n\n  & + ${StyledPopover} + ${StyledButton} {\n    margin-inline-start: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonPopover = styled(Popover)`\n  min-width: 20ch;\n`;\n\nconst MenuButton: FunctionComponent<ForwardProps & MenuButtonProps> = forwardRef(\n  (props: PropsWithoutRef<MenuButtonProps>, ref: MenuButtonProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      text,\n      menu,\n      popover,\n      onClick,\n      onKeyDown,\n      icon,\n      count,\n      iconOnly = false,\n      ...restProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const buttonRef = useConsolidatedRef(ref);\n    const popoverRef = useConsolidatedRef<HTMLDivElement>(popover?.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 => {\n        if (!isFocused) setIsOpen(false);\n      }, [])\n    );\n\n    const { rtl } = useDirection();\n\n    return (\n      <>\n        <Button\n          as={StyledMenuButton}\n          {...restProps}\n          id={id}\n          ref={buttonRef}\n          aria-expanded={isOpen}\n          aria-haspopup='menu'\n          aria-controls={`${id}-popover`}\n          aria-label={text}\n          label={iconOnly && !isOpen ? text : undefined}\n          onClick={(e: MouseEvent<HTMLButtonElement> & UIEvent<HTMLButtonElement>) => {\n            // clickCount is 0 when triggered by keyboard.\n            const clickCount = e.detail;\n\n            // Close the menu if it is open and either:\n            //   It is a *mouse* click on the button.\n            //   Or, the menu mode is not multiselect.\n            if (isOpen && (clickCount > 0 || menu?.mode !== 'multi-select')) {\n              setIsOpen(false);\n            } else {\n              setIsOpen(true);\n            }\n\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent) => {\n            if (e.key === 'Escape') setIsOpen(false);\n            onKeyDown?.(e);\n          }}\n          icon={iconOnly}\n        >\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            {icon && <Icon name={icon} />}\n            {!iconOnly && (\n              <Text>\n                {text} {count !== undefined && <Count>{count}</Count>}\n                {text && <Icon name='arrow-micro-down' />}\n              </Text>\n            )}\n          </Flex>\n        </Button>\n        <StyledMenuButtonPopover\n          placement={rtl ? 'bottom-end' : 'bottom-start'}\n          id={`${id}-popover`}\n          {...popover}\n          show={!!menu && isOpen}\n          target={buttonRef.current}\n          ref={popoverRef}\n        >\n          {menu && (\n            <Menu\n              {...menu}\n              ref={menuRef}\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                  setIsOpen(false);\n                }\n                menu.onItemClick?.(itemId, e);\n              }}\n              focusControlEl={buttonRef.current || undefined}\n            />\n          )}\n        </StyledMenuButtonPopover>\n      </>\n    );\n  }\n);\n\nexport default MenuButton;\n"]}

package/lib/components/MetaList/MetaList.js

@@ -34,15 +34,15 @@ export const StyledMetaListItem = styled.li(({ wrapItems }) => {
 });
 const MetaList = forwardRef((props, ref) => {
     const { items, wrapItems = true, ...restProps } = props;
-    return (_jsx(Flex, Object.assign({ as: StyledMetaList, container: { gap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }, wrapItems: wrapItems, ref: ref }, restProps, { children: items.flatMap((item, i, arr) => item
+    return (_jsx(Flex, { as: StyledMetaList, container: { gap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }, wrapItems: wrapItems, ref: ref, ...restProps, children: items.flatMap((item, i, arr) => item
             ? [
-                _jsx(Text, Object.assign({ as: StyledMetaListItem, variant: 'secondary', wrapItems: wrapItems }, { children: item }), `${i + 0}`)
+                _jsx(Text, { as: StyledMetaListItem, variant: 'secondary', wrapItems: wrapItems, children: item }, `${i + 0}`)
             ].concat(i !== arr.length - 1
                 ? [
-                    _jsx(Text, Object.assign({ as: StyledMetaListItem, role: 'separator', variant: 'secondary' }, { children: "\u2022" }), `${i + 0}-sep`)
+                    _jsx(Text, { as: StyledMetaListItem, role: 'separator', variant: 'secondary', children: "\u2022" }, `${i + 0}-sep`)
                 ]
                 : [])
-            : []) }), void 0));
+            : []) }, void 0));
 });
 export default MetaList;
 //# sourceMappingURL=MetaList.js.map

package/lib/components/MetaList/MetaList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetaList.js","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsD,UAAU,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAe3B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;;;;MAIN,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;;;;MAIN,SAAS;QACX,GAAG,CAAA;;KAEF;;MAEC,CAAC,SAAS;QACZ,GAAG,CAAA;;;;KAIF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxD,OAAO,CACL,KAAC,IAAI,kBACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,EAClF,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,IACJ,SAAS,cAEZ,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAC9B,IAAI;YACF,CAAC,CAAC;gBACE,KAAC,IAAI,kBACH,EAAE,EAAE,kBAAkB,EAEtB,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,SAAS,gBAEnB,IAAI,KAJA,GAAG,CAAC,GAAG,CAAC,EAAE,CAKV;aACR,CAAC,MAAM,CACN,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;gBAClB,CAAC,CAAC;oBACE,KAAC,IAAI,kBACH,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAC,WAAW,EAEhB,OAAO,EAAC,WAAW,6BADd,GAAG,CAAC,GAAG,CAAC,MAAM,CAId;iBACR;gBACH,CAAC,CAAC,EAAE,CACP;YACH,CAAC,CAAC,EAAE,CACP,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, Ref, PropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface MetaListProps extends BaseProps {\n  /** Array of nodes or text to be rendered in the list. */\n  items: ReactNode[];\n  /**\n   * If true, MetaList items that extend past the MetaList's container will wrap to a new line.\n   * @default true\n   */\n  wrapItems?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledMetaList = styled.ul<{ wrapItems: boolean }>(({ wrapItems }) => {\n  return css`\n    list-style: none;\n    overflow: hidden;\n\n    ${!wrapItems &&\n    css`\n      white-space: nowrap;\n    `}\n  `;\n});\n\nexport const StyledMetaListItem = styled.li<{ wrapItems: boolean }>(({ wrapItems }) => {\n  return css`\n    min-width: 0;\n    display: inline-block;\n\n    ${wrapItems &&\n    css`\n      overflow-wrap: break-word;\n    `}\n\n    ${!wrapItems &&\n    css`\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    `}\n  `;\n});\n\nconst MetaList: FunctionComponent<MetaListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MetaListProps>, ref: MetaListProps['ref']) => {\n    const { items, wrapItems = true, ...restProps } = props;\n    return (\n      <Flex\n        as={StyledMetaList}\n        container={{ gap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }}\n        wrapItems={wrapItems}\n        ref={ref}\n        {...restProps}\n      >\n        {items.flatMap((item, i, arr) =>\n          item\n            ? [\n                <Text\n                  as={StyledMetaListItem}\n                  key={`${i + 0}`}\n                  variant='secondary'\n                  wrapItems={wrapItems}\n                >\n                  {item}\n                </Text>\n              ].concat(\n                i !== arr.length - 1\n                  ? [\n                      <Text\n                        as={StyledMetaListItem}\n                        role='separator'\n                        key={`${i + 0}-sep`}\n                        variant='secondary'\n                      >\n                        •\n                      </Text>\n                    ]\n                  : []\n              )\n            : []\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default MetaList;\n"]}
+{"version":3,"file":"MetaList.js","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsD,UAAU,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAe3B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;;;;MAIN,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;;;;MAIN,SAAS;QACX,GAAG,CAAA;;KAEF;;MAEC,CAAC,SAAS;QACZ,GAAG,CAAA;;;;KAIF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxD,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,EAClF,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,KACJ,SAAS,YAEZ,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAC9B,IAAI;YACF,CAAC,CAAC;gBACE,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EAEtB,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,SAAS,YAEnB,IAAI,IAJA,GAAG,CAAC,GAAG,CAAC,EAAE,CAKV;aACR,CAAC,MAAM,CACN,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;gBAClB,CAAC,CAAC;oBACE,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAC,WAAW,EAEhB,OAAO,EAAC,WAAW,wBADd,GAAG,CAAC,GAAG,CAAC,MAAM,CAId;iBACR;gBACH,CAAC,CAAC,EAAE,CACP;YACH,CAAC,CAAC,EAAE,CACP,WACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, Ref, PropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface MetaListProps extends BaseProps {\n  /** Array of nodes or text to be rendered in the list. */\n  items: ReactNode[];\n  /**\n   * If true, MetaList items that extend past the MetaList's container will wrap to a new line.\n   * @default true\n   */\n  wrapItems?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledMetaList = styled.ul<{ wrapItems: boolean }>(({ wrapItems }) => {\n  return css`\n    list-style: none;\n    overflow: hidden;\n\n    ${!wrapItems &&\n    css`\n      white-space: nowrap;\n    `}\n  `;\n});\n\nexport const StyledMetaListItem = styled.li<{ wrapItems: boolean }>(({ wrapItems }) => {\n  return css`\n    min-width: 0;\n    display: inline-block;\n\n    ${wrapItems &&\n    css`\n      overflow-wrap: break-word;\n    `}\n\n    ${!wrapItems &&\n    css`\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    `}\n  `;\n});\n\nconst MetaList: FunctionComponent<MetaListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MetaListProps>, ref: MetaListProps['ref']) => {\n    const { items, wrapItems = true, ...restProps } = props;\n    return (\n      <Flex\n        as={StyledMetaList}\n        container={{ gap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }}\n        wrapItems={wrapItems}\n        ref={ref}\n        {...restProps}\n      >\n        {items.flatMap((item, i, arr) =>\n          item\n            ? [\n                <Text\n                  as={StyledMetaListItem}\n                  key={`${i + 0}`}\n                  variant='secondary'\n                  wrapItems={wrapItems}\n                >\n                  {item}\n                </Text>\n              ].concat(\n                i !== arr.length - 1\n                  ? [\n                      <Text\n                        as={StyledMetaListItem}\n                        role='separator'\n                        key={`${i + 0}-sep`}\n                        variant='secondary'\n                      >\n                        •\n                      </Text>\n                    ]\n                  : []\n              )\n            : []\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default MetaList;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"DockedModals.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAoB3C,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,GAAG,GAAG,YAAY,CAMvD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DockedModals.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAkB3C,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,GAAG,GAAG,YAAY,CAWvD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Modal/DockedModals.js

@@ -9,16 +9,14 @@ const StyledDockedModals = styled.div(({ theme }) => {
     z-index: ${theme.base['z-index'].modal};
     bottom: 0;
     right: 0;
-    max-width: 100vw;
-    padding: 0 calc(2 * ${theme.base.spacing});
-    display: flex;
-    align-items: flex-end;
-    min-width: 100ch;
+
+    /* Allows docked modals to have consistent width, but they should probably be refactored. */
+    width: 100%;
   `;
 });
 StyledDockedModals.defaultProps = defaultThemeProp;
 const DockedModals = forwardRef((props, ref) => {
-    return (_jsx(Flex, Object.assign({ container: { justify: 'end', gap: 2 }, as: StyledDockedModals }, props, { ref: ref }), void 0));
+    return (_jsx(Flex, { container: { justify: 'end', alignItems: 'end', gap: 2, pad: [0, 2] }, as: StyledDockedModals, ...props, ref: ref }, void 0));
 });
 export default DockedModals;
 //# sourceMappingURL=DockedModals.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DockedModals.js","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;;;0BAIhB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;GAIzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAA0C,UAAU,CACpE,CAAC,KAAK,EAAE,GAAwB,EAAE,EAAE;IAClC,OAAO,CACL,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,kBAAkB,IAAM,KAAK,IAAE,GAAG,EAAE,GAAG,YAAI,CAC7F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nconst StyledDockedModals = styled.div(({ theme }) => {\n  return css`\n    position: fixed;\n    z-index: ${theme.base['z-index'].modal};\n    bottom: 0;\n    right: 0;\n    max-width: 100vw;\n    padding: 0 calc(2 * ${theme.base.spacing});\n    display: flex;\n    align-items: flex-end;\n    min-width: 100ch;\n  `;\n});\n\nStyledDockedModals.defaultProps = defaultThemeProp;\n\nconst DockedModals: FunctionComponent<any & ForwardProps> = forwardRef(\n  (props, ref: Ref<HTMLDivElement>) => {\n    return (\n      <Flex container={{ justify: 'end', gap: 2 }} as={StyledDockedModals} {...props} ref={ref} />\n    );\n  }\n);\n\nexport default DockedModals;\n"]}
+{"version":3,"file":"DockedModals.js","sourceRoot":"","sources":["../../../src/components/Modal/DockedModals.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;;;;;GAMvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAA0C,UAAU,CACpE,CAAC,KAAK,EAAE,GAAwB,EAAE,EAAE;IAClC,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EACrE,EAAE,EAAE,kBAAkB,KAClB,KAAK,EACT,GAAG,EAAE,GAAG,WACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nconst StyledDockedModals = styled.div(({ theme }) => {\n  return css`\n    position: fixed;\n    z-index: ${theme.base['z-index'].modal};\n    bottom: 0;\n    right: 0;\n\n    /* Allows docked modals to have consistent width, but they should probably be refactored. */\n    width: 100%;\n  `;\n});\n\nStyledDockedModals.defaultProps = defaultThemeProp;\n\nconst DockedModals: FunctionComponent<any & ForwardProps> = forwardRef(\n  (props, ref: Ref<HTMLDivElement>) => {\n    return (\n      <Flex\n        container={{ justify: 'end', alignItems: 'end', gap: 2, pad: [0, 2] }}\n        as={StyledDockedModals}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport default DockedModals;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MinimizedModal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAStD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqC3C,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CA+EhE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"MinimizedModal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAUrE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqC3C,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAwFhE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Modal/MinimizedModal.js

@@ -1,43 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import styled, { css } from 'styled-components';
-import Button, { StyledButton } from '../Button';
+import Button from '../Button';
+import BareRoleButton from '../Button/BareRoleButton';
 import Icon, { registerIcon } from '../Icon';
 import * as timesIcon from '../Icon/icons/times.icon';
 import * as scaleUpIcon from '../Icon/icons/scale-up.icon';
 import * as scaleDownIcon from '../Icon/icons/scale-down.icon';
 import { defaultThemeProp } from '../../theme';
-import BareButton, { StyledBareButton } from '../Button/BareButton';
 import Flex from '../Flex';
 import { useI18n } from '../../hooks';
 import { ModalManagerContext } from './Contexts';
 registerIcon(timesIcon, scaleUpIcon, scaleDownIcon);
-const StyledMinimizedModal = styled.div(({ theme: { base } }) => {
+const StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {
     return css `
     height: 3rem;
+    width: 30ch;
+    border-radius: calc(0.5 * ${base['border-radius']}) calc(0.5 * ${base['border-radius']}) 0 0;
+    color: ${base.palette['foreground-color']};
     background-color: ${base.palette['primary-background']};
+    box-shadow: ${base.shadow.low};
+    cursor: pointer;
+    user-select: none;
+    transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};
 
     &:hover {
       box-shadow: ${base.shadow.high};
     }
 
     &:focus {
+      outline: none;
       box-shadow: ${base.shadow.focus};
     }
 
-    > ${StyledBareButton}:first-child {
-      padding: ${base.spacing} calc(6 * ${base.spacing}) ${base.spacing} ${base.spacing};
-      max-width: 20ch;
+    > div:first-child {
+      margin-inline-end: auto;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      color: ${base.palette['foreground-color']};
-      background-color: ${base.palette['primary-background']};
-      border-radius: calc(0.25 * ${base['border-radius']}) calc(0.25 * ${base['border-radius']}) 0;
-      transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};
-    }
-    > ${StyledButton}:last-child {
-      margin-inline-end: ${base.spacing};
     }
   `;
 });
@@ -46,27 +46,30 @@ const MinimizedModal = ({ heading, onBeforeClose, onAfterClose, onRequestDismiss
     const { ModalContext } = useContext(ModalManagerContext);
     const { dismissible, dockable, maximizable, dock, maximize, activate, unmount } = useContext(ModalContext);
     const t = useI18n();
-    return (_jsxs(Flex, Object.assign({}, restProps, { container: { alignItems: 'center' }, as: StyledMinimizedModal }, { children: [_jsx(BareButton, Object.assign({ "aria-label": `${t('activate')} ${heading}`, onClick: () => {
-                    if (onRequestActivate?.() !== false && !dockable)
-                        activate();
-                    if (onRequestDock?.() !== false && dockable) {
-                        dock();
-                    }
-                } }, { children: heading }), void 0), maximizable && (_jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t('modal_maximize'), onClick: () => {
-                    if (onRequestMaximize?.() !== false) {
-                        maximize();
-                    }
-                } }, { children: _jsx(Icon, { name: 'scale-up' }, void 0) }), void 0)), dockable && (_jsx(Button, Object.assign({ "aria-label": t('modal_dock'), variant: 'simple', onClick: () => {
-                    if (onRequestDock?.() !== false) {
-                        dock();
-                    }
-                }, icon: true }, { children: _jsx(Icon, { name: 'scale-down' }, void 0) }), void 0)), dismissible && (_jsx(Button, Object.assign({ "aria-label": `${t('close')} ${heading}`, variant: 'simple', onClick: () => {
-                    if (onRequestDismiss?.() !== false) {
-                        onBeforeClose?.();
-                        unmount();
-                        onAfterClose?.();
-                    }
-                }, icon: true }, { children: _jsx(Icon, { name: 'times' }, void 0) }), void 0))] }), void 0));
+    return (_jsxs(Flex, { ...restProps, container: { alignItems: 'center', justify: 'between', pad: [0, 2], gap: 2 }, item: { shrink: 0 }, as: StyledMinimizedModal, "aria-label": `${t('activate')} ${heading}`, onKeyDown: (e) => {
+            // Prevent issues when auto focusing on close button.
+            if ((e.key === 'Space' || e.key === 'Enter') && e.target === e.currentTarget)
+                e.preventDefault();
+        }, onClick: () => {
+            if (onRequestActivate?.() !== false && !dockable)
+                activate();
+            if (onRequestDock?.() !== false && dockable)
+                dock();
+        }, children: [_jsx("div", { children: heading }, void 0), (maximizable || dockable || dismissible) && (_jsxs(Flex, { container: true, children: [maximizable && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_maximize'), onClick: () => {
+                            if (onRequestMaximize?.() !== false) {
+                                maximize();
+                            }
+                        }, children: _jsx(Icon, { name: 'scale-up' }, void 0) }, void 0)), dockable && (_jsx(Button, { "aria-label": t('modal_dock'), variant: 'simple', onClick: () => {
+                            if (onRequestDock?.() !== false) {
+                                dock();
+                            }
+                        }, icon: true, children: _jsx(Icon, { name: 'scale-down' }, void 0) }, void 0)), dismissible && (_jsx(Button, { "aria-label": `${t('close')} ${heading}`, variant: 'simple', onClick: () => {
+                            if (onRequestDismiss?.() !== false) {
+                                onBeforeClose?.();
+                                unmount();
+                                onAfterClose?.();
+                            }
+                        }, icon: true, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0))] }, void 0))] }, void 0));
 };
 export default MinimizedModal;
 //# sourceMappingURL=MinimizedModal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MinimizedModal.js","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as scaleUpIcon from '../Icon/icons/scale-up.icon';\nimport * as scaleDownIcon from '../Icon/icons/scale-down.icon';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Flex from '../Flex';\nimport { useI18n } from '../../hooks';\n\nimport { ModalProps } from './Modal.types';\nimport { ModalManagerContext } from './Contexts';\n\nregisterIcon(timesIcon, scaleUpIcon, scaleDownIcon);\n\nconst StyledMinimizedModal = styled.div(({ theme: { base } }) => {\n  return css`\n    height: 3rem;\n    background-color: ${base.palette['primary-background']};\n\n    &:hover {\n      box-shadow: ${base.shadow.high};\n    }\n\n    &:focus {\n      box-shadow: ${base.shadow.focus};\n    }\n\n    > ${StyledBareButton}:first-child {\n      padding: ${base.spacing} calc(6 * ${base.spacing}) ${base.spacing} ${base.spacing};\n      max-width: 20ch;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      color: ${base.palette['foreground-color']};\n      background-color: ${base.palette['primary-background']};\n      border-radius: calc(0.25 * ${base['border-radius']}) calc(0.25 * ${base['border-radius']}) 0;\n      transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};\n    }\n    > ${StyledButton}:last-child {\n      margin-inline-end: ${base.spacing};\n    }\n  `;\n});\n\nStyledMinimizedModal.defaultProps = defaultThemeProp;\n\nconst MinimizedModal: FunctionComponent<ModalProps & ForwardProps> = ({\n  heading,\n  onBeforeClose,\n  onAfterClose,\n  onRequestDismiss,\n  onRequestActivate,\n  onRequestMinimize,\n  onRequestMaximize,\n  onRequestDock,\n  ...restProps\n}) => {\n  const { ModalContext } = useContext(ModalManagerContext);\n  const { dismissible, dockable, maximizable, dock, maximize, activate, unmount } =\n    useContext(ModalContext);\n\n  const t = useI18n();\n\n  return (\n    <Flex {...restProps} container={{ alignItems: 'center' }} as={StyledMinimizedModal}>\n      <BareButton\n        aria-label={`${t('activate')} ${heading}`}\n        onClick={() => {\n          if (onRequestActivate?.() !== false && !dockable) activate();\n          if (onRequestDock?.() !== false && dockable) {\n            dock();\n          }\n        }}\n      >\n        {heading}\n      </BareButton>\n\n      {maximizable && (\n        <Button\n          icon\n          variant='simple'\n          aria-label={t('modal_maximize')}\n          onClick={() => {\n            if (onRequestMaximize?.() !== false) {\n              maximize();\n            }\n          }}\n        >\n          <Icon name='scale-up' />\n        </Button>\n      )}\n\n      {dockable && (\n        <Button\n          aria-label={t('modal_dock')}\n          variant='simple'\n          onClick={() => {\n            if (onRequestDock?.() !== false) {\n              dock();\n            }\n          }}\n          icon\n        >\n          <Icon name='scale-down' />\n        </Button>\n      )}\n\n      {dismissible && (\n        <Button\n          aria-label={`${t('close')} ${heading}`}\n          variant='simple'\n          onClick={() => {\n            if (onRequestDismiss?.() !== false) {\n              onBeforeClose?.();\n              unmount();\n              onAfterClose?.();\n            }\n          }}\n          icon\n        >\n          <Icon name='times' />\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\nexport default MinimizedModal;\n"]}
+{"version":3,"file":"MinimizedModal.js","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useContext, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport BareRoleButton from '../Button/BareRoleButton';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as scaleUpIcon from '../Icon/icons/scale-up.icon';\nimport * as scaleDownIcon from '../Icon/icons/scale-down.icon';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport { useI18n } from '../../hooks';\n\nimport { ModalProps } from './Modal.types';\nimport { ModalManagerContext } from './Contexts';\n\nregisterIcon(timesIcon, scaleUpIcon, scaleDownIcon);\n\nconst StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {\n  return css`\n    height: 3rem;\n    width: 30ch;\n    border-radius: calc(0.5 * ${base['border-radius']}) calc(0.5 * ${base['border-radius']}) 0 0;\n    color: ${base.palette['foreground-color']};\n    background-color: ${base.palette['primary-background']};\n    box-shadow: ${base.shadow.low};\n    cursor: pointer;\n    user-select: none;\n    transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};\n\n    &:hover {\n      box-shadow: ${base.shadow.high};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${base.shadow.focus};\n    }\n\n    > div:first-child {\n      margin-inline-end: auto;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  `;\n});\n\nStyledMinimizedModal.defaultProps = defaultThemeProp;\n\nconst MinimizedModal: FunctionComponent<ModalProps & ForwardProps> = ({\n  heading,\n  onBeforeClose,\n  onAfterClose,\n  onRequestDismiss,\n  onRequestActivate,\n  onRequestMinimize,\n  onRequestMaximize,\n  onRequestDock,\n  ...restProps\n}) => {\n  const { ModalContext } = useContext(ModalManagerContext);\n  const { dismissible, dockable, maximizable, dock, maximize, activate, unmount } =\n    useContext(ModalContext);\n\n  const t = useI18n();\n\n  return (\n    <Flex\n      {...restProps}\n      container={{ alignItems: 'center', justify: 'between', pad: [0, 2], gap: 2 }}\n      item={{ shrink: 0 }}\n      as={StyledMinimizedModal}\n      aria-label={`${t('activate')} ${heading}`}\n      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n        // Prevent issues when auto focusing on close button.\n        if ((e.key === 'Space' || e.key === 'Enter') && e.target === e.currentTarget)\n          e.preventDefault();\n      }}\n      onClick={() => {\n        if (onRequestActivate?.() !== false && !dockable) activate();\n        if (onRequestDock?.() !== false && dockable) dock();\n      }}\n    >\n      <div>{heading}</div>\n\n      {(maximizable || dockable || dismissible) && (\n        <Flex container>\n          {maximizable && (\n            <Button\n              icon\n              variant='simple'\n              aria-label={t('modal_maximize')}\n              onClick={() => {\n                if (onRequestMaximize?.() !== false) {\n                  maximize();\n                }\n              }}\n            >\n              <Icon name='scale-up' />\n            </Button>\n          )}\n\n          {dockable && (\n            <Button\n              aria-label={t('modal_dock')}\n              variant='simple'\n              onClick={() => {\n                if (onRequestDock?.() !== false) {\n                  dock();\n                }\n              }}\n              icon\n            >\n              <Icon name='scale-down' />\n            </Button>\n          )}\n\n          {dismissible && (\n            <Button\n              aria-label={`${t('close')} ${heading}`}\n              variant='simple'\n              onClick={() => {\n                if (onRequestDismiss?.() !== false) {\n                  onBeforeClose?.();\n                  unmount();\n                  onAfterClose?.();\n                }\n              }}\n              icon\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default MinimizedModal;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAkB3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAWhD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAiRvD,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAkB3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAWhD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CA4RvD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/Modal/Modal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useEffect, useRef } from 'react';
+import { forwardRef, useContext, useEffect, useRef, useCallback } from 'react';
 import Progress from '../Progress';
 import { getFocusables } from '../../utils';
 import Backdrop from '../Backdrop';
@@ -46,11 +46,7 @@ const Modal = forwardRef((props, refArg) => {
             focusable?.focus();
         }
     };
-    const onKeyDown = (e) => {
-        if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {
-            tryDismiss();
-            return;
-        }
+    const onKeyDown = useCallback((e) => {
         if (e.key === 'Tab') {
             const focusables = getFocusables(modalRef);
             if (!focusables || focusables.length < 2)
@@ -67,7 +63,13 @@ const Modal = forwardRef((props, refArg) => {
                 e.preventDefault();
             }
         }
-    };
+    }, []);
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [onKeyDown]);
     useOuterEvent('mousedown', [modalRef], e => {
         if (['minimized', 'docked', 'closed'].includes(state))
             return;
@@ -80,18 +82,21 @@ const Modal = forwardRef((props, refArg) => {
             modalRef.current?.focus();
         }
     });
-    useEffect(() => {
-        document.addEventListener('keydown', onKeyDown);
-        return () => {
-            document.removeEventListener('keydown', onKeyDown);
-        };
-    }, [onKeyDown]);
     useEffect(() => {
         if (state === 'minimized')
             return;
         if (state === 'open' || state === 'maximized' || state === 'docked')
             setFocus();
     }, [state]);
+    // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.
+    const onModalKeyDown = useCallback((e) => {
+        if (dismissible &&
+            (state === 'open' || state === 'maximized') &&
+            e.key === 'Escape' &&
+            top) {
+            tryDismiss();
+        }
+    }, [dismissible, state, top, tryDismiss]);
     // Set a ref based on the initial progress state to be used later to check for setting focus.
     const focusOnProgressChange = useRef(!!progress);
     useAfterInitialEffect(() => {
@@ -102,33 +107,33 @@ const Modal = forwardRef((props, refArg) => {
         }
     }, [progress]);
     const maximized = stretch || state === 'maximized';
-    const modal = (_jsxs(Flex, Object.assign({}, restProps, { container: { direction: 'column' }, ref: modalRef, as: StyledModal, forwardedAs: as, onClick: (e) => e.stopPropagation(), alert: alert, role: alert ? 'alertdialog' : 'dialog', stretch: maximized, center: center, "aria-labelledby": `${id}-heading`, "aria-modal": state === 'docked' ? 'false' : 'true', state: state, "aria-live": 'polite', "aria-busy": progress ? 'true' : 'false' }, { children: [_jsxs(Flex, Object.assign({ container: { justify: 'between', alignItems: 'center', gap: 1 }, item: { shrink: 0 }, as: StyledModalHeader, hasAction: minimizable || dismissible }, { children: [_jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 }, as: Text, variant: 'h2', id: `${id}-heading` }, { children: [_jsx("span", { children: heading }, void 0), typeof count === 'number' && _jsx(Count, { children: count }, void 0)] }), void 0), _jsxs(Flex, Object.assign({ container: true }, { children: [maximizable && !alert && state !== 'maximized' && (_jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t('modal_maximize'), onClick: () => {
+    const modal = (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, ref: modalRef, as: StyledModal, forwardedAs: as, onClick: (e) => e.stopPropagation(), onKeyDown: onModalKeyDown, alert: alert, role: alert ? 'alertdialog' : 'dialog', stretch: maximized, center: center, "aria-labelledby": `${id}-heading`, "aria-modal": state === 'docked' ? 'false' : 'true', state: state, "aria-live": 'polite', "aria-busy": progress ? 'true' : 'false', children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 1 }, item: { shrink: 0 }, as: StyledModalHeader, hasAction: minimizable || dismissible, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: Text, variant: 'h2', id: `${id}-heading`, children: [_jsx("span", { children: heading }, void 0), typeof count === 'number' && _jsx(Count, { children: count }, void 0)] }, void 0), _jsxs(Flex, { container: true, children: [maximizable && !alert && state !== 'maximized' && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_maximize'), onClick: () => {
                                     if (onRequestMaximize?.() !== false) {
                                         maximize();
                                     }
-                                } }, { children: _jsx(Icon, { name: 'scale-up' }, void 0) }), void 0)), dockable && !alert && state !== 'docked' && (_jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t('modal_dock'), onClick: () => {
+                                }, children: _jsx(Icon, { name: 'scale-up' }, void 0) }, void 0)), dockable && !alert && state !== 'docked' && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_dock'), onClick: () => {
                                     if (onRequestDock?.() !== false) {
                                         dock();
                                     }
-                                } }, { children: _jsx(Icon, { name: 'scale-down' }, void 0) }), void 0)), minimizable && !alert && (_jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t('modal_minimize'), onClick: () => {
+                                }, children: _jsx(Icon, { name: 'scale-down' }, void 0) }, void 0)), minimizable && !alert && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_minimize'), onClick: () => {
                                     if (onRequestMinimize?.() !== false) {
                                         minimize();
                                     }
-                                } }, { children: _jsx(Icon, { name: 'minus' }, void 0) }), void 0)), dismissible && !alert && (_jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t('modal_close'), onClick: () => {
+                                }, children: _jsx(Icon, { name: 'minus' }, void 0) }, void 0)), dismissible && !alert && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_close'), onClick: () => {
                                     tryDismiss();
                                     if (dockable) {
                                         onBeforeClose?.();
                                         unmount();
                                         onAfterClose?.();
                                     }
-                                }, ref: closeButtonRef }, { children: _jsx(Icon, { name: 'times' }, void 0) }), void 0))] }), void 0)] }), void 0), _jsxs(Flex, Object.assign({ item: { grow: 1 }, as: StyledModalContent, ref: modalContentRef }, { children: [children && _jsx(StyledModalChildrenWrap, { children: children }, void 0), _jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'object' ? progress.message : t('loading') }, void 0)] }), void 0), actions && (_jsx(Flex, Object.assign({ container: { justify: 'between' }, item: { shrink: 0 }, as: StyledModalActions }, { children: actions }), void 0))] }), void 0));
-    const renderModal = state === 'docked' ? (modal) : (_jsx(Backdrop, Object.assign({ ref: backdropRef, container: {
+                                }, ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0))] }, void 0)] }, void 0), _jsxs(Flex, { item: { grow: 1 }, as: StyledModalContent, ref: modalContentRef, children: [children && _jsx(StyledModalChildrenWrap, { children: children }, void 0), _jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'object' ? progress.message : t('loading') }, void 0)] }, void 0), actions && (_jsx(Flex, { container: { justify: 'between' }, item: { shrink: 0 }, as: StyledModalActions, children: actions }, void 0))] }, void 0));
+    const renderModal = state === 'docked' ? (modal) : (_jsx(Backdrop, { ref: backdropRef, container: {
             alignItems: center || maximized ? 'center' : 'start'
         }, transitionSpeed: 'slow', open: state === 'open' || state === 'maximized', onBeforeTransitionIn: onBeforeOpen, onAfterTransitionIn: onAfterOpen, onBeforeTransitionOut: onBeforeClose, onAfterTransitionOut: () => {
             unmount();
             onAfterClose?.();
-        } }, { children: modal }), void 0));
-    return state === 'minimized' ? _jsx(MinimizedModal, Object.assign({}, props, restProps), void 0) : renderModal;
+        }, children: modal }, void 0));
+    return state === 'minimized' ? _jsx(MinimizedModal, { ...props, ...restProps }, void 0) : renderModal;
 });
 export default Modal;
 //# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useContext,\n  useEffect,\n  MouseEvent,\n  useRef\n} from 'react';\n\nimport Progress from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as scaleUpIcon from '../Icon/icons/scale-up.icon';\nimport * as scaleDownIcon from '../Icon/icons/scale-down.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\n\nimport { ModalManagerContext } from './Contexts';\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n  StyledModal,\n  StyledModalHeader,\n  StyledModalContent,\n  StyledModalActions,\n  StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, scaleUpIcon, scaleDownIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ModalProps>, refArg: Ref<HTMLElement>) => {\n    const {\n      as,\n      progress = false,\n      heading,\n      count,\n      children,\n      actions,\n      stretch = false,\n      center = false,\n      defaultFocus,\n      onBeforeOpen,\n      onAfterOpen,\n      onBeforeClose,\n      onAfterClose,\n      onRequestDismiss,\n      onRequestMinimize,\n      onRequestMaximize,\n      onRequestDock,\n      onRequestActivate,\n      ...restProps\n    } = props;\n\n    const { ModalContext } = useContext(ModalManagerContext);\n    const {\n      alert,\n      dismissible,\n      minimizable,\n      maximizable,\n      dockable,\n      state,\n      dismiss,\n      minimize,\n      maximize,\n      dock,\n      unmount,\n      top\n    } = useContext(ModalContext);\n\n    const modalRef = useConsolidatedRef(refArg);\n    const modalContentRef = useRef<HTMLDivElement>(null);\n    const backdropRef = useRef<HTMLDivElement>(null);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const id = useUID();\n    const t = useI18n();\n\n    const tryDismiss = () => {\n      if (onRequestDismiss?.() !== false) {\n        dismiss();\n      }\n    };\n\n    const setFocus = () => {\n      const focusables = getFocusables(modalRef);\n\n      if (defaultFocus?.current) {\n        defaultFocus.current.focus();\n      } else {\n        const focusable =\n          focusables.find(el => {\n            return modalContentRef.current?.contains(el);\n          }) ??\n          closeButtonRef.current ??\n          focusables[0];\n\n        focusable?.focus();\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {\n        tryDismiss();\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        const focusables = getFocusables(modalRef);\n        if (!focusables || focusables.length < 2) return;\n        const firstFocusable = focusables[0];\n        const lastFocusable = focusables[focusables.length - 1];\n\n        if (\n          document.activeElement === modalRef.current ||\n          (document.activeElement === firstFocusable && e.shiftKey)\n        ) {\n          lastFocusable?.focus();\n          e.preventDefault();\n        } else if (document.activeElement === lastFocusable && !e.shiftKey) {\n          firstFocusable?.focus();\n          e.preventDefault();\n        }\n      }\n    };\n\n    useOuterEvent('mousedown', [modalRef], e => {\n      if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n      if (dismissible) {\n        if (e.target === backdropRef.current) {\n          tryDismiss();\n        }\n      } else {\n        modalRef.current?.focus();\n      }\n    });\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeyDown);\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n      };\n    }, [onKeyDown]);\n\n    useEffect(() => {\n      if (state === 'minimized') return;\n      if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n    }, [state]);\n\n    // Set a ref based on the initial progress state to be used later to check for setting focus.\n    const focusOnProgressChange = useRef(!!progress);\n    useAfterInitialEffect(() => {\n      // If the progress prop changed and we have already set focus we are done.\n      if (!progress && focusOnProgressChange.current) {\n        setFocus();\n        focusOnProgressChange.current = false;\n      }\n    }, [progress]);\n\n    const maximized = stretch || state === 'maximized';\n\n    const modal = (\n      <Flex\n        {...restProps}\n        container={{ direction: 'column' }}\n        ref={modalRef}\n        as={StyledModal}\n        forwardedAs={as}\n        onClick={(e: MouseEvent) => e.stopPropagation()}\n        alert={alert}\n        role={alert ? 'alertdialog' : 'dialog'}\n        stretch={maximized}\n        center={center}\n        aria-labelledby={`${id}-heading`}\n        aria-modal={state === 'docked' ? 'false' : 'true'}\n        state={state}\n        // FOR PR REVIEW: This may be too much, this may be fine...\n        aria-live='polite'\n        aria-busy={progress ? 'true' : 'false'}\n      >\n        <Flex\n          container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n          item={{ shrink: 0 }}\n          as={StyledModalHeader}\n          hasAction={minimizable || dismissible}\n        >\n          <Flex\n            container={{ alignItems: 'center', gap: 1 }}\n            as={Text}\n            variant='h2'\n            id={`${id}-heading`}\n          >\n            <span>{heading}</span>\n            {typeof count === 'number' && <Count>{count}</Count>}\n          </Flex>\n\n          <Flex container>\n            {maximizable && !alert && state !== 'maximized' && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_maximize')}\n                onClick={() => {\n                  if (onRequestMaximize?.() !== false) {\n                    maximize();\n                  }\n                }}\n              >\n                <Icon name='scale-up' />\n              </Button>\n            )}\n            {dockable && !alert && state !== 'docked' && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_dock')}\n                onClick={() => {\n                  if (onRequestDock?.() !== false) {\n                    dock();\n                  }\n                }}\n              >\n                <Icon name='scale-down' />\n              </Button>\n            )}\n            {minimizable && !alert && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_minimize')}\n                onClick={() => {\n                  if (onRequestMinimize?.() !== false) {\n                    minimize();\n                  }\n                }}\n              >\n                <Icon name='minus' />\n              </Button>\n            )}\n            {dismissible && !alert && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_close')}\n                onClick={() => {\n                  tryDismiss();\n                  if (dockable) {\n                    onBeforeClose?.();\n                    unmount();\n                    onAfterClose?.();\n                  }\n                }}\n                ref={closeButtonRef}\n              >\n                <Icon name='times' />\n              </Button>\n            )}\n          </Flex>\n        </Flex>\n\n        <Flex item={{ grow: 1 }} as={StyledModalContent} ref={modalContentRef}>\n          {children && <StyledModalChildrenWrap>{children}</StyledModalChildrenWrap>}\n\n          <Progress\n            visible={!!progress}\n            placement='local'\n            message={typeof progress === 'object' ? progress.message : t('loading')}\n          />\n        </Flex>\n\n        {actions && (\n          <Flex container={{ justify: 'between' }} item={{ shrink: 0 }} as={StyledModalActions}>\n            {actions}\n          </Flex>\n        )}\n      </Flex>\n    );\n\n    const renderModal =\n      state === 'docked' ? (\n        modal\n      ) : (\n        <Backdrop\n          ref={backdropRef}\n          container={{\n            alignItems: center || maximized ? 'center' : 'start'\n          }}\n          transitionSpeed='slow'\n          open={state === 'open' || state === 'maximized'}\n          onBeforeTransitionIn={onBeforeOpen}\n          onAfterTransitionIn={onAfterOpen}\n          onBeforeTransitionOut={onBeforeClose}\n          onAfterTransitionOut={() => {\n            unmount();\n            onAfterClose?.();\n          }}\n        >\n          {modal}\n        </Backdrop>\n      );\n\n    return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n  }\n);\n\nexport default Modal;\n"]}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,UAAU,EACV,SAAS,EAET,MAAM,EACN,WAAW,EAEZ,MAAM,OAAO,CAAC;AAEf,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACxB,MAAM,gBAAgB,CAAC;AAExB,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;AAE/D,MAAM,KAAK,GAAiD,UAAU,CACpE,CAAC,KAAkC,EAAE,MAAwB,EAAE,EAAE;IAC/D,MAAM,EACJ,EAAE,EACF,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,KAAK,EACd,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACzD,MAAM,EACJ,KAAK,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,GAAG,EACJ,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAE7B,MAAM,QAAQ,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC5C,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,cAAc,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACvD,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACpB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,gBAAgB,EAAE,EAAE,KAAK,KAAK,EAAE;YAClC,OAAO,EAAE,CAAC;SACX;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,MAAM,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QAE3C,IAAI,YAAY,EAAE,OAAO,EAAE;YACzB,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC9B;aAAM;YACL,MAAM,SAAS,GACb,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;gBACnB,OAAO,eAAe,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;YAC/C,CAAC,CAAC;gBACF,cAAc,CAAC,OAAO;gBACtB,UAAU,CAAC,CAAC,CAAC,CAAC;YAEhB,SAAS,EAAE,KAAK,EAAE,CAAC;SACpB;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE;QACjD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACnB,MAAM,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC3C,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO;YACjD,MAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;YACrC,MAAM,aAAa,GAAG,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAExD,IACE,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,OAAO;gBAC3C,CAAC,QAAQ,CAAC,aAAa,KAAK,cAAc,IAAI,CAAC,CAAC,QAAQ,CAAC,EACzD;gBACA,aAAa,EAAE,KAAK,EAAE,CAAC;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE;gBAClE,cAAc,EAAE,KAAK,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,aAAa,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE;QACzC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;YAAE,OAAO;QAE9D,IAAI,WAAW,EAAE;YACf,IAAI,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,OAAO,EAAE;gBACpC,UAAU,EAAE,CAAC;aACd;SACF;aAAM;YACL,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,WAAW;YAAE,OAAO;QAClC,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,QAAQ;YAAE,QAAQ,EAAE,CAAC;IAClF,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,0HAA0H;IAC1H,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,CAAqB,EAAE,EAAE;QACxB,IACE,WAAW;YACX,CAAC,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,WAAW,CAAC;YAC3C,CAAC,CAAC,GAAG,KAAK,QAAQ;YAClB,GAAG,EACH;YACA,UAAU,EAAE,CAAC;SACd;IACH,CAAC,EACD,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,CAAC,CACtC,CAAC;IAEF,6FAA6F;IAC7F,MAAM,qBAAqB,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjD,qBAAqB,CAAC,GAAG,EAAE;QACzB,0EAA0E;QAC1E,IAAI,CAAC,QAAQ,IAAI,qBAAqB,CAAC,OAAO,EAAE;YAC9C,QAAQ,EAAE,CAAC;YACX,qBAAqB,CAAC,OAAO,GAAG,KAAK,CAAC;SACvC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,KAAK,WAAW,CAAC;IAEnD,MAAM,KAAK,GAAG,CACZ,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,WAAW,EACf,WAAW,EAAE,EAAE,EACf,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAC/C,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,EACtC,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,MAAM,qBACG,GAAG,EAAE,UAAU,gBACpB,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACjD,KAAK,EAAE,KAAK,eAEF,QAAQ,eACP,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,aAEtC,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC/D,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,iBAAiB,EACrB,SAAS,EAAE,WAAW,IAAI,WAAW,aAErC,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,EAAE,EAAE,IAAI,EACR,OAAO,EAAC,IAAI,EACZ,EAAE,EAAE,GAAG,EAAE,UAAU,aAEnB,yBAAO,OAAO,WAAQ,EACrB,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAC,KAAK,cAAE,KAAK,WAAS,YAC/C,EAEP,MAAC,IAAI,IAAC,SAAS,mBACZ,WAAW,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,WAAW,IAAI,CACjD,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,gBAAgB,CAAC,EAC/B,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,iBAAiB,EAAE,EAAE,KAAK,KAAK,EAAE;wCACnC,QAAQ,EAAE,CAAC;qCACZ;gCACH,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,WAAG,WACjB,CACV,EACA,QAAQ,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,QAAQ,IAAI,CAC3C,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,YAAY,CAAC,EAC3B,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,aAAa,EAAE,EAAE,KAAK,KAAK,EAAE;wCAC/B,IAAI,EAAE,CAAC;qCACR;gCACH,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,WACnB,CACV,EACA,WAAW,IAAI,CAAC,KAAK,IAAI,CACxB,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,gBAAgB,CAAC,EAC/B,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,iBAAiB,EAAE,EAAE,KAAK,KAAK,EAAE;wCACnC,QAAQ,EAAE,CAAC;qCACZ;gCACH,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,CACV,EACA,WAAW,IAAI,CAAC,KAAK,IAAI,CACxB,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,aAAa,CAAC,EAC5B,OAAO,EAAE,GAAG,EAAE;oCACZ,UAAU,EAAE,CAAC;oCACb,IAAI,QAAQ,EAAE;wCACZ,aAAa,EAAE,EAAE,CAAC;wCAClB,OAAO,EAAE,CAAC;wCACV,YAAY,EAAE,EAAE,CAAC;qCAClB;gCACH,CAAC,EACD,GAAG,EAAE,cAAc,YAEnB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,CACV,YACI,YACF,EAEP,MAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,GAAG,EAAE,eAAe,aAClE,QAAQ,IAAI,KAAC,uBAAuB,cAAE,QAAQ,WAA2B,EAE1E,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,WACvE,YACG,EAEN,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,kBAAkB,YACjF,OAAO,WACH,CACR,YACI,CACR,CAAC;IAEF,MAAM,WAAW,GACf,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACnB,KAAK,CACN,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IACP,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE;YACT,UAAU,EAAE,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;SACrD,EACD,eAAe,EAAC,MAAM,EACtB,IAAI,EAAE,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,WAAW,EAC/C,oBAAoB,EAAE,YAAY,EAClC,mBAAmB,EAAE,WAAW,EAChC,qBAAqB,EAAE,aAAa,EACpC,oBAAoB,EAAE,GAAG,EAAE;YACzB,OAAO,EAAE,CAAC;YACV,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC,YAEA,KAAK,WACG,CACZ,CAAC;IAEJ,OAAO,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,KAAC,cAAc,OAAK,KAAK,KAAM,SAAS,WAAI,CAAC,CAAC,CAAC,WAAW,CAAC;AAC5F,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useContext,\n  useEffect,\n  MouseEvent,\n  useRef,\n  useCallback,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\n\nimport Progress from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as scaleUpIcon from '../Icon/icons/scale-up.icon';\nimport * as scaleDownIcon from '../Icon/icons/scale-down.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\n\nimport { ModalManagerContext } from './Contexts';\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n  StyledModal,\n  StyledModalHeader,\n  StyledModalContent,\n  StyledModalActions,\n  StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, scaleUpIcon, scaleDownIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ModalProps>, refArg: Ref<HTMLElement>) => {\n    const {\n      as,\n      progress = false,\n      heading,\n      count,\n      children,\n      actions,\n      stretch = false,\n      center = false,\n      defaultFocus,\n      onBeforeOpen,\n      onAfterOpen,\n      onBeforeClose,\n      onAfterClose,\n      onRequestDismiss,\n      onRequestMinimize,\n      onRequestMaximize,\n      onRequestDock,\n      onRequestActivate,\n      ...restProps\n    } = props;\n\n    const { ModalContext } = useContext(ModalManagerContext);\n    const {\n      alert,\n      dismissible,\n      minimizable,\n      maximizable,\n      dockable,\n      state,\n      dismiss,\n      minimize,\n      maximize,\n      dock,\n      unmount,\n      top\n    } = useContext(ModalContext);\n\n    const modalRef = useConsolidatedRef(refArg);\n    const modalContentRef = useRef<HTMLDivElement>(null);\n    const backdropRef = useRef<HTMLDivElement>(null);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const id = useUID();\n    const t = useI18n();\n\n    const tryDismiss = () => {\n      if (onRequestDismiss?.() !== false) {\n        dismiss();\n      }\n    };\n\n    const setFocus = () => {\n      const focusables = getFocusables(modalRef);\n\n      if (defaultFocus?.current) {\n        defaultFocus.current.focus();\n      } else {\n        const focusable =\n          focusables.find(el => {\n            return modalContentRef.current?.contains(el);\n          }) ??\n          closeButtonRef.current ??\n          focusables[0];\n\n        focusable?.focus();\n      }\n    };\n\n    const onKeyDown = useCallback((e: KeyboardEvent) => {\n      if (e.key === 'Tab') {\n        const focusables = getFocusables(modalRef);\n        if (!focusables || focusables.length < 2) return;\n        const firstFocusable = focusables[0];\n        const lastFocusable = focusables[focusables.length - 1];\n\n        if (\n          document.activeElement === modalRef.current ||\n          (document.activeElement === firstFocusable && e.shiftKey)\n        ) {\n          lastFocusable?.focus();\n          e.preventDefault();\n        } else if (document.activeElement === lastFocusable && !e.shiftKey) {\n          firstFocusable?.focus();\n          e.preventDefault();\n        }\n      }\n    }, []);\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeyDown);\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n      };\n    }, [onKeyDown]);\n\n    useOuterEvent('mousedown', [modalRef], e => {\n      if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n      if (dismissible) {\n        if (e.target === backdropRef.current) {\n          tryDismiss();\n        }\n      } else {\n        modalRef.current?.focus();\n      }\n    });\n\n    useEffect(() => {\n      if (state === 'minimized') return;\n      if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n    }, [state]);\n\n    // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.\n    const onModalKeyDown = useCallback(\n      (e: ReactKeyboardEvent) => {\n        if (\n          dismissible &&\n          (state === 'open' || state === 'maximized') &&\n          e.key === 'Escape' &&\n          top\n        ) {\n          tryDismiss();\n        }\n      },\n      [dismissible, state, top, tryDismiss]\n    );\n\n    // Set a ref based on the initial progress state to be used later to check for setting focus.\n    const focusOnProgressChange = useRef(!!progress);\n    useAfterInitialEffect(() => {\n      // If the progress prop changed and we have already set focus we are done.\n      if (!progress && focusOnProgressChange.current) {\n        setFocus();\n        focusOnProgressChange.current = false;\n      }\n    }, [progress]);\n\n    const maximized = stretch || state === 'maximized';\n\n    const modal = (\n      <Flex\n        {...restProps}\n        container={{ direction: 'column' }}\n        ref={modalRef}\n        as={StyledModal}\n        forwardedAs={as}\n        onClick={(e: MouseEvent) => e.stopPropagation()}\n        onKeyDown={onModalKeyDown}\n        alert={alert}\n        role={alert ? 'alertdialog' : 'dialog'}\n        stretch={maximized}\n        center={center}\n        aria-labelledby={`${id}-heading`}\n        aria-modal={state === 'docked' ? 'false' : 'true'}\n        state={state}\n        // FOR PR REVIEW: This may be too much, this may be fine...\n        aria-live='polite'\n        aria-busy={progress ? 'true' : 'false'}\n      >\n        <Flex\n          container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n          item={{ shrink: 0 }}\n          as={StyledModalHeader}\n          hasAction={minimizable || dismissible}\n        >\n          <Flex\n            container={{ alignItems: 'center', gap: 1 }}\n            as={Text}\n            variant='h2'\n            id={`${id}-heading`}\n          >\n            <span>{heading}</span>\n            {typeof count === 'number' && <Count>{count}</Count>}\n          </Flex>\n\n          <Flex container>\n            {maximizable && !alert && state !== 'maximized' && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_maximize')}\n                onClick={() => {\n                  if (onRequestMaximize?.() !== false) {\n                    maximize();\n                  }\n                }}\n              >\n                <Icon name='scale-up' />\n              </Button>\n            )}\n            {dockable && !alert && state !== 'docked' && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_dock')}\n                onClick={() => {\n                  if (onRequestDock?.() !== false) {\n                    dock();\n                  }\n                }}\n              >\n                <Icon name='scale-down' />\n              </Button>\n            )}\n            {minimizable && !alert && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_minimize')}\n                onClick={() => {\n                  if (onRequestMinimize?.() !== false) {\n                    minimize();\n                  }\n                }}\n              >\n                <Icon name='minus' />\n              </Button>\n            )}\n            {dismissible && !alert && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_close')}\n                onClick={() => {\n                  tryDismiss();\n                  if (dockable) {\n                    onBeforeClose?.();\n                    unmount();\n                    onAfterClose?.();\n                  }\n                }}\n                ref={closeButtonRef}\n              >\n                <Icon name='times' />\n              </Button>\n            )}\n          </Flex>\n        </Flex>\n\n        <Flex item={{ grow: 1 }} as={StyledModalContent} ref={modalContentRef}>\n          {children && <StyledModalChildrenWrap>{children}</StyledModalChildrenWrap>}\n\n          <Progress\n            visible={!!progress}\n            placement='local'\n            message={typeof progress === 'object' ? progress.message : t('loading')}\n          />\n        </Flex>\n\n        {actions && (\n          <Flex container={{ justify: 'between' }} item={{ shrink: 0 }} as={StyledModalActions}>\n            {actions}\n          </Flex>\n        )}\n      </Flex>\n    );\n\n    const renderModal =\n      state === 'docked' ? (\n        modal\n      ) : (\n        <Backdrop\n          ref={backdropRef}\n          container={{\n            alignItems: center || maximized ? 'center' : 'start'\n          }}\n          transitionSpeed='slow'\n          open={state === 'open' || state === 'maximized'}\n          onBeforeTransitionIn={onBeforeOpen}\n          onAfterTransitionIn={onAfterOpen}\n          onBeforeTransitionOut={onBeforeClose}\n          onAfterTransitionOut={() => {\n            unmount();\n            onAfterClose?.();\n          }}\n        >\n          {modal}\n        </Backdrop>\n      );\n\n    return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n  }\n);\n\nexport default Modal;\n"]}

package/lib/components/Modal/ModalManager.js

@@ -72,7 +72,7 @@ const reducer = (modals, payload) => {
             return modals;
     }
 };
-const WrappedModal = ({ Component, id, options: { alert, dismissible, dockable, minimizable, maximizable }, state, methods, props, top }) => (_jsx(ModalContext.Provider, Object.assign({ value: {
+const WrappedModal = ({ Component, id, options: { alert, dismissible, dockable, minimizable, maximizable }, state, methods, props, top }) => (_jsx(ModalContext.Provider, { value: {
         id,
         alert,
         dismissible,
@@ -82,7 +82,7 @@ const WrappedModal = ({ Component, id, options: { alert, dismissible, dockable,
         state,
         top,
         ...methods
-    } }, { children: _jsx(Component, Object.assign({}, props), void 0) }), void 0));
+    }, children: _jsx(Component, { ...props }, void 0) }, void 0));
 const RenderModals = ({ modals }) => {
     const { open, minimized, alerts } = modals.reduce((obj, modal) => {
         if (modal.options.alert)
@@ -215,16 +215,16 @@ const ModalManager = ({ children, context = ModalManagerContext }) => {
         : {
             ...priorCtx,
             create: (Comp, props, opts) => {
-                const WrappedComp = compProps => (_jsx(ModalManager, Object.assign({ context: context }, { children: _jsx(Comp, Object.assign({}, compProps), void 0) }), void 0));
+                const WrappedComp = compProps => (_jsx(ModalManager, { context: context, children: _jsx(Comp, { ...compProps }, void 0) }, void 0));
                 return priorCtx.create(WrappedComp, props, opts);
             }
         }, [priorCtx, context]);
     // Don't create additional Modal portals.
     if (priorCtx[initializedKey])
-        return (_jsx(ModalManagerContext.Provider, Object.assign({ value: priorCtxValue }, { children: children }), void 0));
-    return (_jsxs(ModalManagerContext.Provider, Object.assign({ value: providerValue }, { children: [children, modals.length > 0 &&
+        return (_jsx(ModalManagerContext.Provider, { value: priorCtxValue, children: children }, void 0));
+    return (_jsxs(ModalManagerContext.Provider, { value: providerValue, children: [children, modals.length > 0 &&
                 portalTarget &&
-                createPortal(_jsx(RenderModals, { modals: modals }, void 0), portalTarget)] }), void 0));
+                createPortal(_jsx(RenderModals, { modals: modals }, void 0), portalTarget)] }, void 0));
 };
 export default ModalManager;
 //# sourceMappingURL=ModalManager.js.map