npm - @pega/cosmos-react-core - Versions diffs - 2.0.0-dev.18.0 → 2.0.0-dev.20.0 - Mend

@pega/cosmos-react-core 2.0.0-dev.18.0 → 2.0.0-dev.20.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 (331) hide show

package/lib/components/Menu/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Fragment,\n FunctionComponent,\n KeyboardEvent,\n MouseEvent,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useMemo\n} from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { StyledPrimary } from '../SummaryItem/SummaryItem';\nimport { replaceMatchWithElement } from '../../utils';\nimport Button from '../Button';\nimport { useElement, useI18n, usePrevious, useDirection } from '../../hooks';\nimport Tooltip from '../Tooltip';\n\nimport menuHelpers from './helpers';\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport {\n StyledAncestors,\n StyledItemLabel,\n StyledMenuItem,\n StyledVisibilityHidden\n} from './Menu.styles';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={label}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>…</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n id,\n primary,\n secondary,\n ancestors,\n visual,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n accent,\n radioName,\n variant: menuVariant,\n setFocusDescendant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n const previouslySelected = usePrevious(selected);\n const selectionMode = mode === 'single-select' \|\| mode === 'multi-select';\n const isParentItem = useMemo(() => selectionMode && items, [selectionMode, items]);\n const selectableParent = isParentItem && typeof selected === 'boolean';\n const inputRef = useRef<HTMLInputElement>(null);\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n const { end } = useDirection();\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n const mouseClick = e.detail !== 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === 'menuitem'\n ? target\n : target.closest('li[role=\"menuitem\"]');\n\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n }\n\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n },\n [onExpand, id]\n );\n\n const navigationInteractionId = `${id}-description`;\n const secondaryId = `${id}-secondary`;\n\n let accentedPrimary;\n if (accent && !items) {\n const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n const accentedArr = replaceMatchWithElement(primary, accentRegex, str => (\n <StyledPrimary as='span' isString>\n {str}\n </StyledPrimary>\n ));\n\n if (accentedArr.length > 1) accentedPrimary = accentedArr;\n }\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} wrapItems={false} />\n );\n\n const [summaryItemRef, setSummaryItemRef] = useElement();\n\n const summaryItem = (\n <>\n <SummaryItem\n ref={setSummaryItemRef}\n primary={accentedPrimary \|\| (!items ? <Text>{primary}</Text> : primary)}\n secondary={secondaryContent}\n visual={visual}\n actions={\n (items && !selectableParent) \|\| count ? (\n <Flex container={{ gap: 1 }}>\n <Count>{count ?? null}</Count>\n {items && !selectableParent && <Icon name={`caret-${end}`} />}\n </Flex>\n ) : undefined\n }\n container={{\n colGap: 1\n }}\n />\n {tooltip && (\n <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n let InteractiveWrap;\n if (href) {\n InteractiveWrap = href ? 'a' : BareButton;\n } else if (mode === 'action' \|\| items) {\n InteractiveWrap = BareButton;\n }\n\n const itemChild = InteractiveWrap ? (\n <InteractiveWrap\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={items ? expandHandler : clickHandler}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n tabIndex='-1'\n disabled={disabled}\n >\n {summaryItem}\n </InteractiveWrap>\n ) : (\n summaryItem\n );\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = !!partial;\n }\n }, [partial]);\n\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const itemLabel = useMemo(() => {\n const label = selected ? t('noun_checked', [primary]) : primary;\n\n return isParentItem ? t('expand_noun', [label]) : label;\n }, [selected, primary, isParentItem]);\n\n const describedBy = useMemo(() => {\n const hasItems = !!items;\n const hasSecondary = !!secondary;\n let idString = hasSecondary ? secondaryId : undefined;\n\n if (hasItems) {\n if (hasSecondary) idString = idString!.concat(`, ${navigationInteractionId}`);\n else idString = navigationInteractionId;\n }\n\n return idString;\n }, [items, secondary, navigationInteractionId, secondaryId]);\n\n const navigationInstructions = useMemo(() => {\n if (arrowNavigationUnsupported) {\n return t('menu_item_shift_space_expand_collapse');\n }\n\n return t('menu_item_expand_arrow');\n }, []);\n\n const interactionNotification = useMemo(() => {\n if (previouslySelected === undefined) return '';\n\n return `${selected ? t('noun_selected', [primary]) : t('noun_deselected', [primary])}`;\n }, [selected]);\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'stretch', justify: 'between' }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={describedBy}\n isParentItem={isParentItem}\n role='menuitem'\n aria-disabled={disabled}\n data-expand={!!items}\n tabIndex='-1'\n >\n {selectionMode && typeof selected === 'boolean' ? (\n <>\n <Flex\n ref={labelRef}\n as={StyledItemLabel}\n container={{ alignItems: 'center', gap: 1 }}\n item={{ grow: 1 }}\n onMouseDown={(e: MouseEvent<HTMLLabelElement>) => {\n e.preventDefault();\n }}\n // https://stackoverflow.com/questions/32958091/how-to-prevent-clicking-on-a-checkboxs-label-from-stealing-focus\n onClick={(e: MouseEvent<HTMLLabelElement>) => {\n if (labelRef.current?.control !== e.target) {\n e.preventDefault();\n\n // Preserve detail property (lost with .click()).\n const event = new window.MouseEvent(e.nativeEvent.type, e.nativeEvent);\n labelRef.current?.control?.dispatchEvent(event);\n }\n }}\n >\n <input\n ref={inputRef}\n type={mode === 'single-select' ? 'radio' : 'checkbox'}\n name={mode === 'single-select' ? radioName : undefined}\n aria-label={primary}\n checked={!!selected}\n disabled={disabled}\n onClick={clickHandler as (e: MouseEvent<HTMLInputElement>) => void}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (mode === 'single-select' && e.key === 'Enter') {\n e.currentTarget.click();\n }\n }}\n // no-op since React will complain about a controlled input without an onChange\n onChange={() => {}}\n onMouseDown={e => {\n e.preventDefault();\n }}\n tabIndex={-1}\n />\n {(mode === 'single-select' \|\| mode === 'multi-select') && <Icon name='check' />}\n {summaryItem}\n </Flex>\n\n {isParentItem && (\n <Button icon variant='simple' onClick={expandHandler} tabIndex='-1'>\n <Icon name={`caret-${end}`} />\n </Button>\n )}\n </>\n ) : (\n itemChild\n )}\n\n {!!items && (\n <StyledVisibilityHidden id={navigationInteractionId}>\n {navigationInstructions}\n </StyledVisibilityHidden>\n )}\n\n <StyledVisibilityHidden role='alert'>{interactionNotification}</StyledVisibilityHidden>\n </Flex>\n );\n};\n\nexport default MenuItem;\n"]}
1	+ {"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Fragment,\n FunctionComponent,\n KeyboardEvent,\n MouseEvent,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useMemo\n} from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { StyledPrimary } from '../SummaryItem/SummaryItem';\nimport { replaceMatchWithElement } from '../../utils';\nimport Button from '../Button';\nimport { useElement, useI18n, usePrevious, useDirection } from '../../hooks';\nimport Tooltip from '../Tooltip';\n\nimport menuHelpers from './helpers';\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport {\n StyledAncestors,\n StyledItemLabel,\n StyledMenuItem,\n StyledVisibilityHidden\n} from './Menu.styles';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={label}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>…</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n id,\n primary,\n secondary,\n ancestors,\n visual,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n accent,\n radioName,\n variant: menuVariant,\n setFocusDescendant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n const previouslySelected = usePrevious(selected);\n const selectionMode = mode === 'single-select' \|\| mode === 'multi-select';\n const isParentItem = useMemo(() => selectionMode && items, [selectionMode, items]);\n const selectableParent = isParentItem && typeof selected === 'boolean';\n const inputRef = useRef<HTMLInputElement>(null);\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n const { end } = useDirection();\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n const mouseClick = e.detail !== 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === 'menuitem'\n ? target\n : target.closest('li[role=\"menuitem\"]');\n\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n }\n\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n },\n [onExpand, id]\n );\n\n const navigationInteractionId = `${id}-description`;\n const secondaryId = `${id}-secondary`;\n\n let accentedPrimary;\n if (accent && !items) {\n const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n const accentedArr = replaceMatchWithElement(primary, accentRegex, str => (\n <StyledPrimary as='span' isString>\n {str}\n </StyledPrimary>\n ));\n\n if (accentedArr.length > 1) accentedPrimary = accentedArr;\n }\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} wrapItems={false} />\n );\n\n const [summaryItemRef, setSummaryItemRef] = useElement();\n\n const summaryItem = (\n <>\n <SummaryItem\n ref={setSummaryItemRef}\n primary={accentedPrimary \|\| (!items ? <Text>{primary}</Text> : primary)}\n secondary={secondaryContent}\n visual={visual}\n actions={\n (items && !selectableParent) \|\| count ? (\n <Flex container={{ gap: 1 }}>\n <Count>{count ?? null}</Count>\n {items && !selectableParent && <Icon name={`caret-${end}`} />}\n </Flex>\n ) : undefined\n }\n container={{\n colGap: 1\n }}\n />\n {tooltip && (\n <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n let InteractiveWrap;\n if (href) {\n InteractiveWrap = href ? 'a' : BareButton;\n } else if (mode === 'action' \|\| items) {\n InteractiveWrap = BareButton;\n }\n\n const itemChild = InteractiveWrap ? (\n <InteractiveWrap\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={items ? expandHandler : clickHandler}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n tabIndex='-1'\n disabled={disabled}\n >\n {summaryItem}\n </InteractiveWrap>\n ) : (\n summaryItem\n );\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = !!partial;\n }\n }, [partial]);\n\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const itemLabel = useMemo(() => {\n const label = selected ? t('noun_checked', [primary]) : primary;\n\n return isParentItem ? t('expand_noun', [label]) : label;\n }, [selected, primary, isParentItem]);\n\n const describedBy = useMemo(() => {\n const hasItems = !!items;\n const hasSecondary = !!secondary;\n let idString = hasSecondary ? secondaryId : undefined;\n\n if (hasItems) {\n if (hasSecondary) idString = idString!.concat(`, ${navigationInteractionId}`);\n else idString = navigationInteractionId;\n }\n\n return idString;\n }, [items, secondary, navigationInteractionId, secondaryId]);\n\n const navigationInstructions = useMemo(() => {\n if (arrowNavigationUnsupported) {\n return t('menu_item_shift_space_expand_collapse');\n }\n\n return t('menu_item_expand_arrow');\n }, []);\n\n const interactionNotification = useMemo(() => {\n if (previouslySelected === undefined) return '';\n\n return `${selected ? t('noun_selected', [primary]) : t('noun_deselected', [primary])}`;\n }, [selected]);\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'stretch', justify: 'between' }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={describedBy}\n isParentItem={isParentItem}\n role='menuitem'\n aria-disabled={disabled}\n data-expand={!!items}\n tabIndex='-1'\n >\n {selectionMode && typeof selected === 'boolean' ? (\n <>\n <Flex\n ref={labelRef}\n as={StyledItemLabel}\n container={{ alignItems: 'center', gap: 1 }}\n item={{ grow: 1 }}\n onMouseDown={(e: MouseEvent<HTMLLabelElement>) => {\n e.preventDefault();\n }}\n // https://stackoverflow.com/questions/32958091/how-to-prevent-clicking-on-a-checkboxs-label-from-stealing-focus\n onClick={(e: MouseEvent<HTMLLabelElement>) => {\n if (labelRef.current?.control !== e.target) {\n e.preventDefault();\n\n // Preserve detail property (lost with .click()).\n const event = new window.MouseEvent(e.nativeEvent.type, e.nativeEvent);\n labelRef.current?.control?.dispatchEvent(event);\n }\n }}\n >\n <input\n ref={inputRef}\n type={mode === 'single-select' ? 'radio' : 'checkbox'}\n name={mode === 'single-select' ? radioName : undefined}\n aria-label={primary}\n checked={!!selected}\n disabled={disabled}\n onClick={clickHandler as (e: MouseEvent<HTMLInputElement>) => void}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (mode === 'single-select' && e.key === 'Enter') {\n e.currentTarget.click();\n }\n }}\n // no-op since React will complain about a controlled input without an onChange\n onChange={() => {}}\n onMouseDown={e => {\n e.preventDefault();\n }}\n tabIndex={-1}\n />\n {(mode === 'single-select' \|\| mode === 'multi-select') && <Icon name='check' />}\n {summaryItem}\n </Flex>\n\n {isParentItem && (\n <Button icon variant='simple' onClick={expandHandler} tabIndex='-1'>\n <Icon name={`caret-${end}`} />\n </Button>\n )}\n </>\n ) : (\n itemChild\n )}\n\n {!!items && (\n <StyledVisibilityHidden id={navigationInteractionId}>\n {navigationInstructions}\n </StyledVisibilityHidden>\n )}\n\n <StyledVisibilityHidden role='alert'>{interactionNotification}</StyledVisibilityHidden>\n </Flex>\n );\n};\n\nexport default MenuItem;\n"]}

package/lib/components/Menu/MenuList.js CHANGED Viewed

@@ -68,7 +68,7 @@ const MenuList = forwardRef(({ items, parent }, ref) => {
     const listContent = useMemo(() => {
         if (items.length) {
             return items.map((item, index) => {
-                return helpers.isItem(item) ? (_createElement(MenuItem, { ...item, key: item.id, onExpand: item.items ? onExpandCallback : undefined })) : (_jsxs(Fragment, { children: [_jsx(MenuGroup, Object.assign({}, item), void 0), items[index + 1] && helpers.isItem(items[index + 1]) && (_jsx(StyledSeparator, { role: 'separator' }, void 0))] }, item.id));
+                return helpers.isItem(item) ? (_createElement(MenuItem, { ...item, key: item.id, onExpand: item.items ? onExpandCallback : undefined })) : (_jsxs(Fragment, { children: [_jsx(MenuGroup, { ...item }, void 0), items[index + 1] && helpers.isItem(items[index + 1]) && (_jsx(StyledSeparator, { role: 'separator' }, void 0))] }, item.id));
             });
         }
         if (!loading) {
@@ -76,8 +76,8 @@ const MenuList = forwardRef(({ items, parent }, ref) => {
         }
         return null;
     }, [items, loading, emptyText]);
-    const list = (_jsxs(StyledMenuList, Object.assign({ ref: ulRef, role: 'menu' }, { children: [listContent, loading && !expandedItem && (_jsx(StyledLoadingItem, { children: _jsx(Progress, { placement: 'local' }, void 0) }, void 0))] }), void 0));
-    return (_jsxs(_Fragment, { children: [_jsxs(Drawer, Object.assign({ "aria-hidden": !!expandedItem, as: StyledMenuListContainer, ref: selfRef, open: open, style: { opacity: expandedItem ? 0 : 1 }, disabled: !!expandedItem, placement: end, onBeforeOpen: () => {
+    const list = (_jsxs(StyledMenuList, { ref: ulRef, role: 'menu', children: [listContent, loading && !expandedItem && (_jsx(StyledLoadingItem, { children: _jsx(Progress, { placement: 'local' }, void 0) }, void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsxs(Drawer, { "aria-hidden": !!expandedItem, as: StyledMenuListContainer, ref: selfRef, open: open, style: { opacity: expandedItem ? 0 : 1 }, disabled: !!expandedItem, placement: end, onBeforeOpen: () => {
                     if (parent) {
                         parent.el.style.opacity = '0';
                     }
@@ -108,9 +108,9 @@ const MenuList = forwardRef(({ items, parent }, ref) => {
                         onItemCollapse?.(parent.item.id);
                         updateActiveDescendants();
                     }
-                } }, { children: [parent && (_jsx(MenuListHeader, { text: parent.item.primary, onClick: () => {
+                }, children: [parent && (_jsx(MenuListHeader, { text: parent.item.primary, onClick: () => {
                             setOpen(false);
-                        } }, void 0)), list] }), void 0), expandedItem && selfRef.current && (_jsx(MenuList, { items: expandedItem.items, parent: {
+                        } }, void 0)), list] }, void 0), expandedItem && selfRef.current && (_jsx(MenuList, { items: expandedItem.items, parent: {
                     el: selfRef.current,
                     item: expandedItem,
                     siblingItems: items,

package/lib/components/Menu/MenuList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n useMemo,\n Fragment,\n useCallback,\n MouseEvent\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport Drawer from '../Drawer';\nimport {\n useAfterInitialEffect,\n useConsolidatedRef,\n useItemIntersection,\n useDirection\n} from '../../hooks';\nimport Progress from '../Progress';\nimport EmptyState from '../EmptyState';\n\nimport type {\n AcceptedMouseEventElement,\n MenuListProps,\n ParentMenuItemProps,\n MenuItemProps\n} from './Menu.types';\nimport MenuContext from './Menu.context';\nimport MenuListHeader from './MenuListHeader';\nimport MenuItem from './MenuItem';\nimport helpers from './helpers';\nimport {\n StyledLoadingItem,\n StyledMenuList,\n StyledMenuListContainer,\n StyledSeparator\n} from './Menu.styles';\nimport { resizeRootEl } from './NavItemsList';\nimport MenuGroup from './MenuGroup';\n\nconst setParentDisabled = (fieldset: HTMLFieldSetElement, bool: boolean) => {\n fieldset.disabled = bool;\n const legendButton = fieldset.querySelector<HTMLButtonElement>('legend button');\n if (legendButton) {\n legendButton.disabled = bool;\n }\n};\n\nconst MenuList: FunctionComponent<MenuListProps & ForwardProps> = forwardRef(\n ({ items, parent }: PropsWithoutRef<MenuListProps>, ref: MenuListProps['ref']) => {\n const menuListWrapperRef: MutableRefObject<HTMLElement \| null> = useRef(null);\n const selfRef = useConsolidatedRef(ref);\n const ulRef = useRef<HTMLUListElement>(null);\n const returnFocusRef: MutableRefObject<HTMLButtonElement \| null> = useRef(null);\n const [open, setOpen] = useState(!parent);\n const [expandedItem, setExpandedItem] = useState<ParentMenuItemProps>();\n const {\n scrollAt,\n loadMore,\n loading,\n emptyText,\n currentItemId,\n onItemExpand,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n onItemCollapse\n } = useContext(MenuContext);\n const { end } = useDirection();\n\n useItemIntersection(ulRef, items.length - 1, () => {\n if (!loading) loadMore?.(parent?.item?.id);\n });\n\n useLayoutEffect(() => {\n if (!selfRef.current \|\| expandedItem) return;\n menuListWrapperRef.current = selfRef.current.parentElement;\n resizeRootEl(\n selfRef.current,\n menuListWrapperRef.current as HTMLElement,\n items.length,\n scrollAt\n );\n });\n\n useEffect(() => {\n if (parent) setOpen(true);\n }, []);\n\n useAfterInitialEffect(() => {\n if (expandedItem) {\n setExpandedItem(items.find(item => item.id === expandedItem.id) as ParentMenuItemProps); // FIXME\n }\n }, [expandedItem, items]);\n\n useAfterInitialEffect(() => {\n if (currentItemId) {\n // if there is ancestor item of the controlled item, set it to expanded.\n const ancestor = items.find(\n item => item.items?.length && helpers.getItem(item.items, currentItemId) !== undefined\n );\n\n if (ancestor) {\n setExpandedItem(ancestor as ParentMenuItemProps);\n updateActiveDescendants({ preventScroll: true });\n }\n }\n }, [currentItemId, items, parent]);\n\n const onExpandCallback = useCallback(\n (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => {\n const item = helpers.getItem(items, id);\n returnFocusRef.current = e.currentTarget as HTMLButtonElement;\n setExpandedItem(item as ParentMenuItemProps); // FIXME\n item?.onExpand?.(id, e);\n onItemExpand?.(id, e);\n updateActiveDescendants({ preventScroll: true });\n },\n [items]\n );\n\n const listContent = useMemo(() => {\n if (items.length) {\n return items.map((item, index) => {\n return helpers.isItem(item) ? (\n <MenuItem\n {...item}\n key={item.id}\n onExpand={item.items ? onExpandCallback : undefined}\n />\n ) : (\n <Fragment key={item.id}>\n <MenuGroup {...item} />\n {items[index + 1] && helpers.isItem(items[index + 1]) && (\n <StyledSeparator role='separator' />\n )}\n </Fragment>\n );\n });\n }\n\n if (!loading) {\n return <EmptyState message={emptyText} forwardedAs='li' />;\n }\n\n return null;\n }, [items, loading, emptyText]);\n\n const list = (\n <StyledMenuList ref={ulRef} role='menu'>\n {listContent}\n {loading && !expandedItem && (\n <StyledLoadingItem>\n <Progress placement='local' />\n </StyledLoadingItem>\n )}\n </StyledMenuList>\n );\n\n return (\n <>\n <Drawer\n aria-hidden={!!expandedItem}\n as={StyledMenuListContainer}\n ref={selfRef}\n open={open}\n style={{ opacity: expandedItem ? 0 : 1 }}\n disabled={!!expandedItem}\n placement={end}\n onBeforeOpen={() => {\n if (parent) {\n parent.el.style.opacity = '0';\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '1';\n }\n }}\n onAfterOpen={() => {\n if (parent) {\n setParentDisabled(parent.el, true);\n }\n }}\n onBeforeClose={() => {\n if (parent && menuListWrapperRef.current) {\n setParentDisabled(parent.el, false);\n parent.el.style.opacity = '1';\n resizeRootEl(\n parent.el,\n menuListWrapperRef.current,\n parent.siblingItems.length,\n scrollAt\n );\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '0';\n }\n }}\n onAfterClose={() => {\n if (parent) {\n focusControl?.focus();\n\n const expandBtn = parent.returnFocusRef.current;\n parent.setExpandedItem(undefined);\n\n if (expandBtn) {\n setFocusReturnEl(expandBtn?.closest('li'));\n }\n\n onItemCollapse?.(parent.item.id);\n updateActiveDescendants();\n }\n }}\n >\n {parent && (\n <MenuListHeader\n text={parent.item.primary}\n onClick={() => {\n setOpen(false);\n }}\n />\n )}\n\n {list}\n </Drawer>\n\n {expandedItem && selfRef.current && (\n <MenuList\n items={expandedItem.items}\n parent={{\n el: selfRef.current,\n item: expandedItem,\n siblingItems: items,\n setExpandedItem,\n returnFocusRef\n }}\n />\n )}\n </>\n );\n }\n);\n\nexport default MenuList;\n"]}
1	+ {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n useMemo,\n Fragment,\n useCallback,\n MouseEvent\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport Drawer from '../Drawer';\nimport {\n useAfterInitialEffect,\n useConsolidatedRef,\n useItemIntersection,\n useDirection\n} from '../../hooks';\nimport Progress from '../Progress';\nimport EmptyState from '../EmptyState';\n\nimport type {\n AcceptedMouseEventElement,\n MenuListProps,\n ParentMenuItemProps,\n MenuItemProps\n} from './Menu.types';\nimport MenuContext from './Menu.context';\nimport MenuListHeader from './MenuListHeader';\nimport MenuItem from './MenuItem';\nimport helpers from './helpers';\nimport {\n StyledLoadingItem,\n StyledMenuList,\n StyledMenuListContainer,\n StyledSeparator\n} from './Menu.styles';\nimport { resizeRootEl } from './NavItemsList';\nimport MenuGroup from './MenuGroup';\n\nconst setParentDisabled = (fieldset: HTMLFieldSetElement, bool: boolean) => {\n fieldset.disabled = bool;\n const legendButton = fieldset.querySelector<HTMLButtonElement>('legend button');\n if (legendButton) {\n legendButton.disabled = bool;\n }\n};\n\nconst MenuList: FunctionComponent<MenuListProps & ForwardProps> = forwardRef(\n ({ items, parent }: PropsWithoutRef<MenuListProps>, ref: MenuListProps['ref']) => {\n const menuListWrapperRef: MutableRefObject<HTMLElement \| null> = useRef(null);\n const selfRef = useConsolidatedRef(ref);\n const ulRef = useRef<HTMLUListElement>(null);\n const returnFocusRef: MutableRefObject<HTMLButtonElement \| null> = useRef(null);\n const [open, setOpen] = useState(!parent);\n const [expandedItem, setExpandedItem] = useState<ParentMenuItemProps>();\n const {\n scrollAt,\n loadMore,\n loading,\n emptyText,\n currentItemId,\n onItemExpand,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n onItemCollapse\n } = useContext(MenuContext);\n const { end } = useDirection();\n\n useItemIntersection(ulRef, items.length - 1, () => {\n if (!loading) loadMore?.(parent?.item?.id);\n });\n\n useLayoutEffect(() => {\n if (!selfRef.current \|\| expandedItem) return;\n menuListWrapperRef.current = selfRef.current.parentElement;\n resizeRootEl(\n selfRef.current,\n menuListWrapperRef.current as HTMLElement,\n items.length,\n scrollAt\n );\n });\n\n useEffect(() => {\n if (parent) setOpen(true);\n }, []);\n\n useAfterInitialEffect(() => {\n if (expandedItem) {\n setExpandedItem(items.find(item => item.id === expandedItem.id) as ParentMenuItemProps); // FIXME\n }\n }, [expandedItem, items]);\n\n useAfterInitialEffect(() => {\n if (currentItemId) {\n // if there is ancestor item of the controlled item, set it to expanded.\n const ancestor = items.find(\n item => item.items?.length && helpers.getItem(item.items, currentItemId) !== undefined\n );\n\n if (ancestor) {\n setExpandedItem(ancestor as ParentMenuItemProps);\n updateActiveDescendants({ preventScroll: true });\n }\n }\n }, [currentItemId, items, parent]);\n\n const onExpandCallback = useCallback(\n (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => {\n const item = helpers.getItem(items, id);\n returnFocusRef.current = e.currentTarget as HTMLButtonElement;\n setExpandedItem(item as ParentMenuItemProps); // FIXME\n item?.onExpand?.(id, e);\n onItemExpand?.(id, e);\n updateActiveDescendants({ preventScroll: true });\n },\n [items]\n );\n\n const listContent = useMemo(() => {\n if (items.length) {\n return items.map((item, index) => {\n return helpers.isItem(item) ? (\n <MenuItem\n {...item}\n key={item.id}\n onExpand={item.items ? onExpandCallback : undefined}\n />\n ) : (\n <Fragment key={item.id}>\n <MenuGroup {...item} />\n {items[index + 1] && helpers.isItem(items[index + 1]) && (\n <StyledSeparator role='separator' />\n )}\n </Fragment>\n );\n });\n }\n\n if (!loading) {\n return <EmptyState message={emptyText} forwardedAs='li' />;\n }\n\n return null;\n }, [items, loading, emptyText]);\n\n const list = (\n <StyledMenuList ref={ulRef} role='menu'>\n {listContent}\n {loading && !expandedItem && (\n <StyledLoadingItem>\n <Progress placement='local' />\n </StyledLoadingItem>\n )}\n </StyledMenuList>\n );\n\n return (\n <>\n <Drawer\n aria-hidden={!!expandedItem}\n as={StyledMenuListContainer}\n ref={selfRef}\n open={open}\n style={{ opacity: expandedItem ? 0 : 1 }}\n disabled={!!expandedItem}\n placement={end}\n onBeforeOpen={() => {\n if (parent) {\n parent.el.style.opacity = '0';\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '1';\n }\n }}\n onAfterOpen={() => {\n if (parent) {\n setParentDisabled(parent.el, true);\n }\n }}\n onBeforeClose={() => {\n if (parent && menuListWrapperRef.current) {\n setParentDisabled(parent.el, false);\n parent.el.style.opacity = '1';\n resizeRootEl(\n parent.el,\n menuListWrapperRef.current,\n parent.siblingItems.length,\n scrollAt\n );\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '0';\n }\n }}\n onAfterClose={() => {\n if (parent) {\n focusControl?.focus();\n\n const expandBtn = parent.returnFocusRef.current;\n parent.setExpandedItem(undefined);\n\n if (expandBtn) {\n setFocusReturnEl(expandBtn?.closest('li'));\n }\n\n onItemCollapse?.(parent.item.id);\n updateActiveDescendants();\n }\n }}\n >\n {parent && (\n <MenuListHeader\n text={parent.item.primary}\n onClick={() => {\n setOpen(false);\n }}\n />\n )}\n\n {list}\n </Drawer>\n\n {expandedItem && selfRef.current && (\n <MenuList\n items={expandedItem.items}\n parent={{\n el: selfRef.current,\n item: expandedItem,\n siblingItems: items,\n setExpandedItem,\n returnFocusRef\n }}\n />\n )}\n </>\n );\n }\n);\n\nexport default MenuList;\n"]}

package/lib/components/Menu/MenuListHeader.js CHANGED Viewed

@@ -17,9 +17,9 @@ const MenuListHeader = ({ text, onClick }) => {
             onClick();
         }
     }, [onClick, start]);
-    return (_jsx(Flex, Object.assign({ container: { alignItems: 'center' }, as: StyledMenuListHeader }, { children: _jsx(BareButton, Object.assign({ onClick: onClick, onKeyDown: onKeyDown, "data-collapse": 'true', "aria-expanded": 'true', "aria-label": `${t('collapse_noun', [text || ''])} ${arrowNavigationUnsupported
+    return (_jsx(Flex, { container: { alignItems: 'center' }, as: StyledMenuListHeader, children: _jsx(BareButton, { onClick: onClick, onKeyDown: onKeyDown, "data-collapse": 'true', "aria-expanded": 'true', "aria-label": `${t('collapse_noun', [text || ''])} ${arrowNavigationUnsupported
                 ? t('menu_item_collapse_shift_space')
-                : t('menu_item_collapse_arrow')}` }, { children: _jsx(SummaryItem, { visual: _jsx(Icon, { name: `caret-${start}` }, void 0), primary: text }, void 0) }), void 0) }), void 0));
+                : t('menu_item_collapse_arrow')}`, children: _jsx(SummaryItem, { visual: _jsx(Icon, { name: `caret-${start}` }, void 0), primary: text }, void 0) }, void 0) }, void 0));
 };
 export default MenuListHeader;
 //# sourceMappingURL=MenuListHeader.js.map

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EAOR,WAAW,EAEZ,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACvF,OAAO,MAAM,EAAE,EAAe,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,OAAO,EAAE,EAAgB,aAAa,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,kBAAkB,MAAM,qCAAqC,CAAC;AAC1E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAIlC,YAAY,CAAC,kBAAkB,CAAC,CAAC;AA8BjC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;QAG9B,aAAa,MAAM,YAAY;2BACZ,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,uBAAuB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;CAE9C,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,kBAAkB,CAAiB,OAAO,EAAE,GAAG,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,kBAAkB,CAAiB,IAAI,EAAE,GAAG,CAAC,CAAC;IAE9D,qEAAqE;IACrE,cAAc,CACZ,CAAC,UAAU,EAAE,SAAS,CAAC,EACvB,WAAW,CAAC,SAAS,CAAC,EAAE;QACtB,IAAI,CAAC,SAAS;YAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,8BACE,KAAC,MAAM,~~kBACL~~,EAAE,EAAE,gBAAgB,~~IAChB~~,SAAS,~~IACb~~,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,mBACC,MAAM,mBACP,MAAM,mBACL,GAAG,EAAE,UAAU,gBAClB,IAAI,EAChB,KAAK,EAAE,QAAQ,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC7C,OAAO,EAAE,CAAC,CAA6D,EAAE,EAAE;oBACzE,8CAA8C;oBAC9C,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC;oBAE5B,2CAA2C;oBAC3C,yCAAyC;oBACzC,0CAA0C;oBAC1C,IAAI,MAAM,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,IAAI,EAAE,IAAI,KAAK,cAAc,CAAC,EAAE;wBAC/D,SAAS,CAAC,KAAK,CAAC,CAAC;qBAClB;yBAAM;wBACL,SAAS,CAAC,IAAI,CAAC,CAAC;qBACjB;oBAED,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;gBACf,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;wBAAE,SAAS,CAAC,KAAK,CAAC,CAAC;oBACzC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;gBACjB,CAAC,EACD,IAAI,EAAE,QAAQ,~~gBAEd~~,MAAC,IAAI,~~kBAAC~~,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,~~iBAC9C~~,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,EAC5B,CAAC,QAAQ,IAAI,CACZ,MAAC,IAAI,eACF,IAAI,OAAG,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,cAAE,KAAK,WAAS,EACpD,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,WAAG,YACpC,CACR,~~aACI~~,~~YACA~~,EACT,KAAC,uBAAuB,~~kBACtB~~,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAC9C,EAAE,EAAE,GAAG,EAAE,UAAU,~~IACf~~,OAAO,~~IACX~~,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,MAAM,EACtB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,GAAG,EAAE,UAAU,~~gBAEd~~,IAAI,IAAI,CACP,KAAC,IAAI,~~oBACC~~,IAAI,~~IACR~~,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;wBACzB,IACE,IAAI,CAAC,IAAI,KAAK,cAAc;4BAC3B,CAAgF;iCAC9E,MAAM,GAAG,CAAC,EACb;4BACA,SAAS,CAAC,KAAK,CAAC,CAAC;yBAClB;wBACD,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;oBAChC,CAAC,EACD,cAAc,EAAE,SAAS,CAAC,OAAO,IAAI,SAAS,~~YAC9C~~,CACH,~~YACuB~~,YACzB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","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"]}
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"]}

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

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

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

	@@ -1 +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"}
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;AAkB3C,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,GAAG,GAAG,YAAY,CAWvD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Modal/DockedModals.js CHANGED Viewed

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MinimizedModal.js","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,~~EAAE~~,MAAM,OAAO,CAAC;~~AACtD~~,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,~~EAAE~~,~~EAAE~~,~~YAAY~~,~~EAAE~~,MAAM,~~WAAW~~,CAAC;~~AACjD~~,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,~~UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,~~IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAGtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,YAAY,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;AAEpD,MAAM,oBAAoB,GAAG,MAAM,CAAC,~~GAAG~~,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;~~IAC9D~~,OAAO,GAAG,CAAA~~;;wBAEY,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC~~;;;~~oBAGtC~~,IAAI,CAAC,~~MAAM~~,CAAC,~~IAAI;;;;oBAIhB~~,IAAI,CAAC,~~MAAM~~,CAAC~~,KAAK;;;QAG7B,gBAAgB~~;~~iBACP~~,IAAI,CAAC,OAAO,~~aAAa,IAAI,~~CAAC,~~OAAO~~,~~KAAK,IAAI,~~CAAC,~~OAAO,~~IAAI,~~IAAI,~~CAAC,OAAO~~;;;;;eAKxE~~,~~IAAI,~~CAAC,~~OAAO~~,CAAC~~,kBAAkB,CAAC~~;~~0BACrB~~,IAAI,CAAC,~~OAAO~~,CAAC,~~oBAAoB~~,~~CAAC;mCACzB,~~IAAI,CAAC,~~eAAe~~,CAAC,~~iBAAiB~~,IAAI,~~CAAC~~,~~eAAe,~~CAAC~~;+BAC/D~~,~~IAAI~~,CAAC,~~SAAS~~,CAAC,~~KAAK,~~IAAI,IAAI,CAAC,~~SAAS,CAAC,~~MAAM,CAAC,IAAI~~;;QAEzE~~,~~YAAY;2BACO,~~IAAI,CAAC,~~OAAO;;GAEpC~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAAiD,CAAC,EACpE,OAAO,EACP,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACzD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,GAC7E,UAAU,CAAC,YAAY,CAAC,CAAC;IAE3B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,~~oBAAK~~,SAAS,~~IAAE~~,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,~~oBAAoB~~,~~iBAChF~~,~~KAAC~~,~~UAAU~~,~~gCACG~~,GAAG,CAAC,CAAC,UAAU,CAAC,IAAI,OAAO,EAAE,EACzC,OAAO,EAAE,GAAG,EAAE;~~oBACZ~~,IAAI,iBAAiB,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC,QAAQ;~~wBAAE~~,QAAQ,EAAE,CAAC;~~oBAC7D~~,IAAI,aAAa,EAAE,EAAE,KAAK,KAAK,IAAI,QAAQ~~,EAAE~~;~~wBAC3C~~,IAAI,EAAE,CAAC;~~qBACR;gBACH~~,CAAC,~~gBAEA~~,OAAO,~~YACG~~,~~EAEZ~~,WAAW,IAAI,CACd,KAAC,MAAM,~~kBACL~~,IAAI,QACJ,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,gBAAgB,CAAC,EAC/B,OAAO,EAAE,GAAG,EAAE;~~oBACZ~~,IAAI,iBAAiB,EAAE,EAAE,KAAK,KAAK,EAAE;~~wBACnC~~,QAAQ,EAAE,CAAC;~~qBACZ~~;~~gBACH~~,CAAC,~~gBAED~~,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,WAAG,~~YACjB~~,CACV,EAEA,QAAQ,IAAI,CACX,KAAC,MAAM,~~gCACO~~,CAAC,CAAC,YAAY,CAAC,EAC3B,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;~~oBACZ~~,IAAI,aAAa,EAAE,EAAE,KAAK,KAAK,EAAE;~~wBAC~~/B,IAAI,EAAE,CAAC;~~qBACR~~;~~gBACH~~,CAAC,EACD,IAAI,~~sBAEJ~~,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,~~YACnB~~,CACV,EAEA,WAAW,IAAI,CACd,KAAC,MAAM,~~gCACO~~,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,OAAO,EAAE,EACtC,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;~~oBACZ~~,IAAI,gBAAgB,EAAE,EAAE,KAAK,KAAK,EAAE;~~wBAClC~~,aAAa,EAAE,EAAE,CAAC;~~wBAClB~~,OAAO,EAAE,CAAC;~~wBACV~~,YAAY,EAAE,EAAE,CAAC;~~qBAClB~~;~~gBACH~~,CAAC,EACD,IAAI,~~sBAEJ~~,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,~~YACd~~,CACV,~~aACI~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","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"]}
1	+ {"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"]}