@vibe/core 3.16.0-alpha-02eba.0 → 3.16.0-alpha-5e4f6.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.
- package/dist/components/Menu/MenuItem/MenuItem.d.ts +2 -4
- package/dist/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.d.ts +1 -1
- package/dist/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.types.d.ts +1 -1
- package/dist/mocked_classnames/components/Menu/MenuItem/MenuItem.d.ts +2 -4
- package/dist/mocked_classnames/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.d.ts +1 -1
- package/dist/mocked_classnames/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.types.d.ts +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/MenuItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.js.map +1 -1
- package/dist/src/components/Menu/MenuItem/MenuItem.js.map +1 -1
- package/dist/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.js +1 -1
- package/dist/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.js.map +1 -1
- package/dist/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.js +1 -1
- package/dist/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.js.map +1 -1
- package/package.json +3 -3
|
@@ -50,13 +50,11 @@ export interface MenuItemProps extends VibeComponentProps {
|
|
|
50
50
|
"aria-label"?: AriaAttributes["aria-label"];
|
|
51
51
|
submenuPosition?: SubmenuPosition;
|
|
52
52
|
/**
|
|
53
|
-
*
|
|
54
|
-
* When set to `true`, a ResizeObserver is attached to the popper content,
|
|
55
|
-
* automatically triggering repositioning when the size of the submenu's content changes.
|
|
53
|
+
* When set to `true`, submenu's content and size changes would automatically trigger repositioning.
|
|
56
54
|
*
|
|
57
55
|
* This is useful for when submenu's content may grow or shrink without a re-render being triggered.
|
|
58
56
|
*/
|
|
59
|
-
|
|
57
|
+
autoAdjustOnSubMenuContentResize?: boolean;
|
|
60
58
|
}
|
|
61
59
|
export interface MenuItemTitleComponentProps extends Omit<MenuItemProps, "title"> {
|
|
62
60
|
title: ReactElement;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MenuItemSubMenuProps } from "./MenuItemSubMenu.types";
|
|
3
|
-
declare const MenuItemSubMenu: ({ anchorRef, open, autoFocusOnMount, onClose, children, submenuPosition,
|
|
3
|
+
declare const MenuItemSubMenu: ({ anchorRef, open, autoFocusOnMount, onClose, children, submenuPosition, autoAdjustOnSubMenuContentResize }: MenuItemSubMenuProps) => React.JSX.Element;
|
|
4
4
|
export default MenuItemSubMenu;
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { CloseMenuOption, MenuChild } from "../../../Menu/MenuConstants";
|
|
3
3
|
import { SubmenuPosition } from "../../MenuItem.types";
|
|
4
4
|
import { MenuItemProps } from "../../MenuItem";
|
|
5
|
-
export interface MenuItemSubMenuProps extends Pick<MenuItemProps, "
|
|
5
|
+
export interface MenuItemSubMenuProps extends Pick<MenuItemProps, "autoAdjustOnSubMenuContentResize"> {
|
|
6
6
|
/**
|
|
7
7
|
* Reference to the anchor element that the submenu is related to. This is used to position the submenu correctly relative to the parent menu item.
|
|
8
8
|
*/
|
|
@@ -50,13 +50,11 @@ export interface MenuItemProps extends VibeComponentProps {
|
|
|
50
50
|
"aria-label"?: AriaAttributes["aria-label"];
|
|
51
51
|
submenuPosition?: SubmenuPosition;
|
|
52
52
|
/**
|
|
53
|
-
*
|
|
54
|
-
* When set to `true`, a ResizeObserver is attached to the popper content,
|
|
55
|
-
* automatically triggering repositioning when the size of the submenu's content changes.
|
|
53
|
+
* When set to `true`, submenu's content and size changes would automatically trigger repositioning.
|
|
56
54
|
*
|
|
57
55
|
* This is useful for when submenu's content may grow or shrink without a re-render being triggered.
|
|
58
56
|
*/
|
|
59
|
-
|
|
57
|
+
autoAdjustOnSubMenuContentResize?: boolean;
|
|
60
58
|
}
|
|
61
59
|
export interface MenuItemTitleComponentProps extends Omit<MenuItemProps, "title"> {
|
|
62
60
|
title: ReactElement;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MenuItemSubMenuProps } from "./MenuItemSubMenu.types";
|
|
3
|
-
declare const MenuItemSubMenu: ({ anchorRef, open, autoFocusOnMount, onClose, children, submenuPosition,
|
|
3
|
+
declare const MenuItemSubMenu: ({ anchorRef, open, autoFocusOnMount, onClose, children, submenuPosition, autoAdjustOnSubMenuContentResize }: MenuItemSubMenuProps) => React.JSX.Element;
|
|
4
4
|
export default MenuItemSubMenu;
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { CloseMenuOption, MenuChild } from "../../../Menu/MenuConstants";
|
|
3
3
|
import { SubmenuPosition } from "../../MenuItem.types";
|
|
4
4
|
import { MenuItemProps } from "../../MenuItem";
|
|
5
|
-
export interface MenuItemSubMenuProps extends Pick<MenuItemProps, "
|
|
5
|
+
export interface MenuItemSubMenuProps extends Pick<MenuItemProps, "autoAdjustOnSubMenuContentResize"> {
|
|
6
6
|
/**
|
|
7
7
|
* Reference to the anchor element that the submenu is related to. This is used to position the submenu correctly relative to the parent menu item.
|
|
8
8
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { AriaAttributes, ForwardedRef, ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport Tooltip, { TooltipProps } from \"../../../components/Tooltip/Tooltip\";\nimport Icon from \"../../../components/Icon/Icon\";\nimport useIsOverflowing from \"../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../../types\";\nimport { IconType } from \"../../Icon\";\nimport { CloseMenuOption, MenuChild } from \"../Menu/MenuConstants\";\nimport Label from \"../../Label/Label\";\nimport styles from \"./MenuItem.module.scss\";\nimport BaseMenuItem from \"./components/BaseMenuItem/BaseMenuItem\";\nimport MenuItemIcon from \"./components/MenuItemIcon/MenuItemIcon\";\nimport { TooltipPositions } from \"../../Tooltip/Tooltip.types\";\nimport { TooltipPositions as TooltipPositionsEnum } from \"../../Tooltip/TooltipConstants\";\nimport { SubmenuPosition } from \"./MenuItem.types\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n title?: string;\n label?: string | React.ReactElement<typeof Label>;\n icon?: SubIcon;\n iconType?: IconType;\n iconBackgroundColor?: string;\n disabled?: boolean;\n disableReason?: string;\n selected?: boolean;\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n activeItemIndex?: number;\n setActiveItemIndex?: (index: number) => void;\n index?: number;\n key?: string;\n isParentMenuVisible?: boolean;\n resetOpenSubMenuIndex?: () => void;\n hasOpenSubMenu?: boolean;\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n useDocumentEventListeners?: boolean;\n tooltipContent?: string;\n tooltipPosition?: TooltipPositions;\n tooltipShowDelay?: number;\n tooltipProps?: Partial<TooltipProps>;\n onMouseLeave?: (event: React.MouseEvent) => void;\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name which is added to div which wraps an Icon\n */\n iconWrapperClassName?: string;\n isInitialSelectedState?: boolean;\n shouldScrollMenu?: boolean;\n closeMenu?: (option: CloseMenuOption) => void;\n menuRef?: React.RefObject<HTMLElement>;\n //// TODO: [breaking] MenuItem can accept only Menu element as first level child, it accepts MenuChild[] as children even though it is not valid\n children?: MenuChild | MenuChild[];\n /**\n * Type of menu item with sub menu, which has two click/hover options-\n * 1. click on the main menu item will trigger onClick\n * 2. click/hover on icon button will open the sub menu\n */\n splitMenuItem?: boolean;\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n submenuPosition?: SubmenuPosition;\n /**\n *
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { AriaAttributes, ForwardedRef, ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport Tooltip, { TooltipProps } from \"../../../components/Tooltip/Tooltip\";\nimport Icon from \"../../../components/Icon/Icon\";\nimport useIsOverflowing from \"../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../../types\";\nimport { IconType } from \"../../Icon\";\nimport { CloseMenuOption, MenuChild } from \"../Menu/MenuConstants\";\nimport Label from \"../../Label/Label\";\nimport styles from \"./MenuItem.module.scss\";\nimport BaseMenuItem from \"./components/BaseMenuItem/BaseMenuItem\";\nimport MenuItemIcon from \"./components/MenuItemIcon/MenuItemIcon\";\nimport { TooltipPositions } from \"../../Tooltip/Tooltip.types\";\nimport { TooltipPositions as TooltipPositionsEnum } from \"../../Tooltip/TooltipConstants\";\nimport { SubmenuPosition } from \"./MenuItem.types\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n title?: string;\n label?: string | React.ReactElement<typeof Label>;\n icon?: SubIcon;\n iconType?: IconType;\n iconBackgroundColor?: string;\n disabled?: boolean;\n disableReason?: string;\n selected?: boolean;\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n activeItemIndex?: number;\n setActiveItemIndex?: (index: number) => void;\n index?: number;\n key?: string;\n isParentMenuVisible?: boolean;\n resetOpenSubMenuIndex?: () => void;\n hasOpenSubMenu?: boolean;\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n useDocumentEventListeners?: boolean;\n tooltipContent?: string;\n tooltipPosition?: TooltipPositions;\n tooltipShowDelay?: number;\n tooltipProps?: Partial<TooltipProps>;\n onMouseLeave?: (event: React.MouseEvent) => void;\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name which is added to div which wraps an Icon\n */\n iconWrapperClassName?: string;\n isInitialSelectedState?: boolean;\n shouldScrollMenu?: boolean;\n closeMenu?: (option: CloseMenuOption) => void;\n menuRef?: React.RefObject<HTMLElement>;\n //// TODO: [breaking] MenuItem can accept only Menu element as first level child, it accepts MenuChild[] as children even though it is not valid\n children?: MenuChild | MenuChild[];\n /**\n * Type of menu item with sub menu, which has two click/hover options-\n * 1. click on the main menu item will trigger onClick\n * 2. click/hover on icon button will open the sub menu\n */\n splitMenuItem?: boolean;\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n submenuPosition?: SubmenuPosition;\n /**\n * When set to `true`, submenu's content and size changes would automatically trigger repositioning.\n *\n * This is useful for when submenu's content may grow or shrink without a re-render being triggered.\n */\n autoAdjustOnSubMenuContentResize?: boolean;\n}\n\nexport interface MenuItemTitleComponentProps extends Omit<MenuItemProps, \"title\"> {\n title: ReactElement;\n \"aria-label\": NonNullable<AriaAttributes[\"aria-label\"]>;\n}\n\nconst MenuItem: VibeComponent<MenuItemProps | MenuItemTitleComponentProps> & {\n iconType?: typeof Icon.type;\n isSelectable?: boolean;\n isMenuChild?: boolean;\n tooltipPositions?: typeof TooltipPositionsEnum;\n} = forwardRef(\n (\n {\n className,\n iconWrapperClassName,\n title = \"\",\n label = \"\",\n icon = \"\",\n iconType,\n iconBackgroundColor,\n disabled = false,\n disableReason,\n selected = false,\n key,\n children,\n tooltipContent,\n tooltipPosition = \"right\",\n tooltipShowDelay = 300,\n tooltipProps,\n \"aria-label\": ariaLabel,\n ...baseMenuProps\n }: MenuItemProps | MenuItemTitleComponentProps,\n ref: ForwardedRef<HTMLElement>\n ) => {\n const titleRef = useRef();\n\n // if \"title\" is a component ariaLabel is mandatory\n const iconLabel = ariaLabel ?? (title as string);\n\n const isTitleHoveredAndOverflowing = useIsOverflowing({ ref: titleRef });\n const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled || tooltipContent;\n\n const finalTooltipContent = useMemo(() => {\n if (disabled) return disableReason;\n if (tooltipContent) return tooltipContent;\n return title;\n }, [disableReason, disabled, title, tooltipContent]);\n\n const renderLabel = useMemo(() => {\n if (!label) return;\n if (typeof label === \"string\") {\n return <Label kind=\"line\" text={label} />;\n }\n if (React.isValidElement(label) && label.type === Label) {\n return label;\n }\n }, [label]);\n\n return (\n <Tooltip\n content={shouldShowTooltip ? finalTooltipContent : null}\n position={tooltipPosition}\n showDelay={tooltipShowDelay}\n {...tooltipProps}\n >\n <BaseMenuItem\n key={key}\n ref={ref}\n subMenu={children}\n className={className}\n disabled={disabled}\n selected={selected}\n {...baseMenuProps}\n >\n {Boolean(icon) && (\n <MenuItemIcon\n icon={icon}\n type={iconType}\n label={iconLabel}\n disabled={disabled}\n selected={selected}\n backgroundColor={iconBackgroundColor}\n wrapperClassName={iconWrapperClassName}\n />\n )}\n <div ref={titleRef} className={styles.title}>\n {title}\n </div>\n {renderLabel}\n </BaseMenuItem>\n </Tooltip>\n );\n }\n);\n\nObject.assign(MenuItem, {\n isSelectable: true,\n isMenuChild: true\n});\n\nexport default withStaticProps(MenuItem, {\n iconType: Icon.type,\n tooltipPositions: TooltipPositionsEnum\n});\n"],"names":["MenuItem","forwardRef","_a","ref","className","iconWrapperClassName","_a$title","title","_a$label","label","_a$icon","icon","iconType","iconBackgroundColor","_a$disabled","disabled","disableReason","_a$selected","selected","key","children","tooltipContent","_a$tooltipPosition","tooltipPosition","_a$tooltipShowDelay","tooltipShowDelay","tooltipProps","ariaLabel","baseMenuProps","__rest","titleRef","useRef","iconLabel","shouldShowTooltip","useIsOverflowing","finalTooltipContent","useMemo","renderLabel","React","createElement","Label","kind","text","isValidElement","type","Tooltip","Object","assign","content","position","showDelay","BaseMenuItem","subMenu","MenuItemIcon","backgroundColor","wrapperClassName","styles","isSelectable","isMenuChild","withStaticProps","Icon","tooltipPositions","TooltipPositionsEnum"],"mappings":"snBAuEA,IAAMA,EAKFC,GACF,SACEC,EAoBAC,OAnBEC,EAgBuBF,EAhBvBE,UACAC,EAeuBH,EAfvBG,qBAAoBC,EAeGJ,EAdvBK,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAcaN,EAbvBO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAaaR,EAZvBS,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EACTE,EAWuBV,EAXvBU,SACAC,EAUuBX,EAVvBW,oBAAmBC,EAUIZ,EATvBa,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAQuBd,EARvBc,cAAaC,EAQUf,EAPvBgB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAMuBjB,EANvBiB,IACAC,EAKuBlB,EALvBkB,SACAC,EAIuBnB,EAJvBmB,eAAcC,EAISpB,EAHvBqB,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAGFtB,EAFvBuB,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EACuBxB,EADvBwB,aACcC,EAASzB,EAAvB,cACG0B,EAlBLC,EAAA3B,EAAA,CAAA,YAAA,uBAAA,QAAA,QAAA,OAAA,WAAA,sBAAA,WAAA,gBAAA,WAAA,MAAA,WAAA,iBAAA,kBAAA,mBAAA,eAAA,eAsBM4B,EAAWC,IAGXC,EAAYL,QAAAA,EAAcpB,EAG1B0B,EAD+BC,EAAiB,CAAE/B,IAAK2B,KACHf,GAAYM,EAEhEc,EAAsBC,GAAQ,WAClC,OAAIrB,EAAiBC,EACjBK,GACGd,CACR,GAAE,CAACS,EAAeD,EAAUR,EAAOc,IAE9BgB,EAAcD,GAAQ,WAC1B,GAAK3B,EACL,MAAqB,iBAAVA,EACF6B,EAAAC,cAACC,EAAK,CAACC,KAAK,OAAOC,KAAMjC,IAE9B6B,EAAMK,eAAelC,IAAUA,EAAMmC,OAASJ,EACzC/B,OADT,CAGF,GAAG,CAACA,IAEJ,OACE6B,EAACC,cAAAM,EACCC,OAAAC,OAAA,CAAAC,QAASf,EAAoBE,EAAsB,KACnDc,SAAU1B,EACV2B,UAAWzB,GACPC,GAEJY,EAACC,cAAAY,EACCL,OAAAC,OAAA,CAAA5B,IAAKA,EACLhB,IAAKA,EACLiD,QAAShC,EACThB,UAAWA,EACXW,SAAUA,EACVG,SAAUA,GACNU,KAEKjB,GACP2B,gBAACe,EAAY,CACX1C,KAAMA,EACNiC,KAAMhC,EACNH,MAAOuB,EACPjB,SAAUA,EACVG,SAAUA,EACVoC,gBAAiBzC,EACjB0C,iBAAkBlD,IAGtBiC,EAAKC,cAAA,MAAA,CAAApC,IAAK2B,EAAU1B,UAAWoD,EAAOjD,OACnCA,GAEF8B,GAIT,IAGFS,OAAOC,OAAO/C,EAAU,CACtByD,cAAc,EACdC,aAAa,IAGf,IAAeC,EAAAA,EAAgB3D,EAAU,CACvCY,SAAUgD,EAAKhB,KACfiB,iBAAkBC"}
|
package/dist/mocked_classnames/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as n,useRef as o,useEffect as s,useCallback as
|
|
1
|
+
import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as n,useRef as o,useEffect as s,useCallback as u}from"react";import i from"../../../../Text/Text.js";import{getTestId as r,ComponentDefaultTestId as l}from"../../../../../tests/testIds.js";import a from"classnames";import{TAB_INDEX_FOCUS_WITH_JS_ONLY as m}from"../../MenuItemConstants.js";import d from"../MenuItemSubMenuIcon/MenuItemSubMenuIcon.js";import c from"../MenuItemSubMenu/MenuItemSubMenu.js";import M from"../../hooks/useMenuItemMouseEvents.js";import I from"../../hooks/useMenuItemKeyboardEvents.js";import p from"../../../../../hooks/useMergeRef.js";import v from"../../../../../hooks/useIsMouseEnter.js";import f from"./BaseMenuItem.module.scss.js";var b=n((function(n,b){var h=n.subMenu,S=n.className,x=n.menuRef,E=n.disabled,j=void 0!==E&&E,C=n.selected,k=void 0!==C&&C,O=n.onClick,A=n.activeItemIndex,B=n.setActiveItemIndex,R=n.index,g=n.id,y=n.isParentMenuVisible,N=n.resetOpenSubMenuIndex,P=n.hasOpenSubMenu,w=n.setSubMenuIsOpenByIndex,L=n.closeMenu,V=n.useDocumentEventListeners,T=void 0!==V&&V,_=n.isInitialSelectedState,z=n.onMouseEnter,D=n.onMouseLeave,F=n.shouldScrollMenu,H=n["data-testid"],K=n.splitMenuItem,U=void 0!==K&&K,q=n.children,G=n.submenuPosition,J=void 0===G?"right":G,Q=n.autoAdjustOnSubMenuContentResize,W=(void 0===A?-1:A)===R,X=!j&&!!h&&(void 0!==y&&y)&&(W&&(void 0!==P&&P)),Y=o(null),Z=o(null),$=p(b,Y),ee=v({ref:Y}),te=v({ref:Z});s((function(){var e,t=Y.current;W&&F&&t&&(t.scrollIntoViewIfNeeded?t.scrollIntoViewIfNeeded({behaviour:"smooth"}):null===(e=t.scrollIntoView)||void 0===e||e.call(t,{behavior:"smooth",block:"center"}))}),[W,F]),s((function(){var e=Y.current;T||W&&(null==e||e.focus())}),[W,T]);var ne=M({ref:Y,splitMenuItemIconButtonRef:Z,resetOpenSubMenuIndex:N,setSubMenuIsOpenByIndex:w,isActive:W,setActiveItemIndex:B,index:R,hasChildren:!!h,splitMenuItem:U}),oe=I({onClick:O,disabled:j,isActive:W,index:R,setActiveItemIndex:B,hasChildren:!!h,shouldShowSubMenu:X,setSubMenuIsOpenByIndex:w,menuRef:x,isMouseEnter:ne,closeMenu:L,useDocumentEventListeners:T,splitMenuItem:U,isMouseEnterMenuItem:ee,isMouseEnterIconButton:te}).onClickCallback,se=u((function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};w(R,!1),e.propagate&&L(e)}),[w,R,L]);return t.createElement(i,{id:g,element:"li",type:"text2","aria-haspopup":!!h||void 0,"aria-expanded":h?X:void 0,"data-testid":H||r(l.MENU_ITEM,R),className:a(f.item,S,e(e(e(e(e({},f.disabled,j),f.focused,W),f.selected,k),f.initialSelected,_),f.splitMenuItem,U)),ref:$,onClick:oe,role:"menuitem","aria-current":W,onMouseLeave:D,onMouseEnter:z,tabIndex:m},q,!!h&&t.createElement(t.Fragment,null,t.createElement(d,{ref:Z,isSplit:U,active:X,disabled:j}),t.createElement(c,{anchorRef:Y,open:X,onClose:se,autoFocusOnMount:!T,submenuPosition:J,autoAdjustOnSubMenuContentResize:Q},h)))}));export{b as default};
|
|
2
2
|
//# sourceMappingURL=BaseMenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../../../src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useRef } from \"react\";\nimport Text from \"../../../../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { TAB_INDEX_FOCUS_WITH_JS_ONLY } from \"../../MenuItemConstants\";\nimport MenuItemSubMenuIcon from \"../MenuItemSubMenuIcon/MenuItemSubMenuIcon\";\nimport MenuItemSubMenu from \"../MenuItemSubMenu/MenuItemSubMenu\";\nimport { CloseMenuOption } from \"../../../Menu/MenuConstants\";\nimport useMenuItemMouseEvents from \"../../hooks/useMenuItemMouseEvents\";\nimport useMenuItemKeyboardEvents from \"../../hooks/useMenuItemKeyboardEvents\";\nimport useMergeRef from \"../../../../../hooks/useMergeRef\";\nimport useIsMouseEnter from \"../../../../../hooks/useIsMouseEnter\";\nimport styles from \"./BaseMenuItem.module.scss\";\nimport { BaseMenuItemProps } from \"./BaseMenuItem.types\";\n\nconst BaseMenuItem = forwardRef(\n (\n {\n subMenu,\n className,\n menuRef,\n disabled = false,\n selected = false,\n onClick,\n activeItemIndex = -1,\n setActiveItemIndex,\n index,\n id,\n isParentMenuVisible = false,\n resetOpenSubMenuIndex,\n hasOpenSubMenu = false,\n setSubMenuIsOpenByIndex,\n closeMenu,\n useDocumentEventListeners = false,\n isInitialSelectedState,\n onMouseEnter,\n onMouseLeave,\n shouldScrollMenu,\n \"data-testid\": dataTestId,\n splitMenuItem = false,\n children,\n submenuPosition = \"right\"\n }: BaseMenuItemProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const isActive = activeItemIndex === index;\n const isSubMenuOpen = isActive && hasOpenSubMenu;\n const shouldShowSubMenu = !disabled && Boolean(subMenu) && isParentMenuVisible && isSubMenuOpen;\n\n const anchorRef = useRef(null);\n const splitMenuItemIconButtonRef = useRef(null);\n\n const mergedRef = useMergeRef(ref, anchorRef);\n\n const isMouseEnterMenuItem = useIsMouseEnter({ ref: anchorRef });\n const isMouseEnterIconButton = useIsMouseEnter({ ref: splitMenuItemIconButtonRef });\n\n useEffect(() => {\n const anchorElement = anchorRef.current;\n if (!isActive || !shouldScrollMenu || !anchorElement) {\n return;\n }\n if (anchorElement.scrollIntoViewIfNeeded) {\n anchorElement.scrollIntoViewIfNeeded({ behaviour: \"smooth\" });\n return;\n }\n anchorElement.scrollIntoView?.({ behavior: \"smooth\", block: \"center\" });\n }, [isActive, shouldScrollMenu]);\n\n useEffect(() => {\n const anchorElement = anchorRef.current;\n if (useDocumentEventListeners) return;\n if (isActive) {\n anchorElement?.focus();\n }\n }, [isActive, useDocumentEventListeners]);\n\n const isMouseEnter = useMenuItemMouseEvents({\n ref: anchorRef,\n splitMenuItemIconButtonRef,\n resetOpenSubMenuIndex,\n setSubMenuIsOpenByIndex,\n isActive,\n setActiveItemIndex,\n index,\n hasChildren: Boolean(subMenu),\n splitMenuItem\n });\n\n const { onClickCallback } = useMenuItemKeyboardEvents({\n onClick,\n disabled,\n isActive,\n index,\n setActiveItemIndex,\n hasChildren: Boolean(subMenu),\n shouldShowSubMenu,\n setSubMenuIsOpenByIndex,\n menuRef,\n isMouseEnter,\n closeMenu,\n useDocumentEventListeners,\n splitMenuItem,\n isMouseEnterMenuItem,\n isMouseEnterIconButton\n });\n\n const closeSubMenu = useCallback(\n (option: CloseMenuOption = {}) => {\n setSubMenuIsOpenByIndex(index, false);\n if (option.propagate) {\n closeMenu(option);\n }\n },\n [setSubMenuIsOpenByIndex, index, closeMenu]\n );\n\n return (\n <Text\n id={id}\n element=\"li\"\n type=\"text2\"\n aria-haspopup={subMenu ? true : undefined}\n aria-expanded={subMenu ? shouldShowSubMenu : undefined}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_ITEM, index)}\n className={cx(styles.item, className, {\n [styles.disabled]: disabled,\n [styles.focused]: isActive,\n [styles.selected]: selected,\n [styles.initialSelected]: isInitialSelectedState,\n [styles.splitMenuItem]: splitMenuItem\n })}\n ref={mergedRef}\n onClick={onClickCallback}\n role=\"menuitem\"\n aria-current={isActive}\n onMouseLeave={onMouseLeave}\n onMouseEnter={onMouseEnter}\n tabIndex={TAB_INDEX_FOCUS_WITH_JS_ONLY}\n >\n {children}\n {Boolean(subMenu) && (\n <>\n <MenuItemSubMenuIcon\n ref={splitMenuItemIconButtonRef}\n isSplit={splitMenuItem}\n active={shouldShowSubMenu}\n disabled={disabled}\n />\n <MenuItemSubMenu\n anchorRef={anchorRef}\n open={shouldShowSubMenu}\n onClose={closeSubMenu}\n autoFocusOnMount={!useDocumentEventListeners}\n submenuPosition={submenuPosition}\n >\n {subMenu}\n </MenuItemSubMenu>\n </>\n )}\n </Text>\n );\n }\n);\n\nexport default BaseMenuItem;\n"],"names":["BaseMenuItem","forwardRef","_ref","ref","subMenu","className","menuRef","_ref$disabled","disabled","_ref$selected","selected","onClick","_ref$activeItemIndex","activeItemIndex","setActiveItemIndex","index","id","_ref$isParentMenuVisi","isParentMenuVisible","resetOpenSubMenuIndex","_ref$hasOpenSubMenu","hasOpenSubMenu","setSubMenuIsOpenByIndex","closeMenu","_ref$useDocumentEvent","useDocumentEventListeners","isInitialSelectedState","onMouseEnter","onMouseLeave","shouldScrollMenu","dataTestId","_ref$splitMenuItem","splitMenuItem","children","_ref$submenuPosition","submenuPosition","isActive","shouldShowSubMenu","anchorRef","useRef","splitMenuItemIconButtonRef","mergedRef","useMergeRef","isMouseEnterMenuItem","useIsMouseEnter","isMouseEnterIconButton","useEffect","anchorElement","current","scrollIntoViewIfNeeded","behaviour","_a","scrollIntoView","call","behavior","block","focus","isMouseEnter","useMenuItemMouseEvents","hasChildren","onClickCallback","useMenuItemKeyboardEvents","closeSubMenu","useCallback","option","arguments","length","undefined","propagate","React","createElement","Text","element","type","getTestId","ComponentDefaultTestId","MENU_ITEM","cx","styles","item","_defineProperty","focused","initialSelected","role","tabIndex","TAB_INDEX_FOCUS_WITH_JS_ONLY","Fragment","MenuItemSubMenuIcon","isSplit","active","MenuItemSubMenu","open","onClose","autoFocusOnMount"],"mappings":"qwBAeMA,IAAAA,EAAeC,GACnB,SAAAC,
|
|
1
|
+
{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../../../src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useRef } from \"react\";\nimport Text from \"../../../../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { TAB_INDEX_FOCUS_WITH_JS_ONLY } from \"../../MenuItemConstants\";\nimport MenuItemSubMenuIcon from \"../MenuItemSubMenuIcon/MenuItemSubMenuIcon\";\nimport MenuItemSubMenu from \"../MenuItemSubMenu/MenuItemSubMenu\";\nimport { CloseMenuOption } from \"../../../Menu/MenuConstants\";\nimport useMenuItemMouseEvents from \"../../hooks/useMenuItemMouseEvents\";\nimport useMenuItemKeyboardEvents from \"../../hooks/useMenuItemKeyboardEvents\";\nimport useMergeRef from \"../../../../../hooks/useMergeRef\";\nimport useIsMouseEnter from \"../../../../../hooks/useIsMouseEnter\";\nimport styles from \"./BaseMenuItem.module.scss\";\nimport { BaseMenuItemProps } from \"./BaseMenuItem.types\";\n\nconst BaseMenuItem = forwardRef(\n (\n {\n subMenu,\n className,\n menuRef,\n disabled = false,\n selected = false,\n onClick,\n activeItemIndex = -1,\n setActiveItemIndex,\n index,\n id,\n isParentMenuVisible = false,\n resetOpenSubMenuIndex,\n hasOpenSubMenu = false,\n setSubMenuIsOpenByIndex,\n closeMenu,\n useDocumentEventListeners = false,\n isInitialSelectedState,\n onMouseEnter,\n onMouseLeave,\n shouldScrollMenu,\n \"data-testid\": dataTestId,\n splitMenuItem = false,\n children,\n submenuPosition = \"right\",\n autoAdjustOnSubMenuContentResize\n }: BaseMenuItemProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const isActive = activeItemIndex === index;\n const isSubMenuOpen = isActive && hasOpenSubMenu;\n const shouldShowSubMenu = !disabled && Boolean(subMenu) && isParentMenuVisible && isSubMenuOpen;\n\n const anchorRef = useRef(null);\n const splitMenuItemIconButtonRef = useRef(null);\n\n const mergedRef = useMergeRef(ref, anchorRef);\n\n const isMouseEnterMenuItem = useIsMouseEnter({ ref: anchorRef });\n const isMouseEnterIconButton = useIsMouseEnter({ ref: splitMenuItemIconButtonRef });\n\n useEffect(() => {\n const anchorElement = anchorRef.current;\n if (!isActive || !shouldScrollMenu || !anchorElement) {\n return;\n }\n if (anchorElement.scrollIntoViewIfNeeded) {\n anchorElement.scrollIntoViewIfNeeded({ behaviour: \"smooth\" });\n return;\n }\n anchorElement.scrollIntoView?.({ behavior: \"smooth\", block: \"center\" });\n }, [isActive, shouldScrollMenu]);\n\n useEffect(() => {\n const anchorElement = anchorRef.current;\n if (useDocumentEventListeners) return;\n if (isActive) {\n anchorElement?.focus();\n }\n }, [isActive, useDocumentEventListeners]);\n\n const isMouseEnter = useMenuItemMouseEvents({\n ref: anchorRef,\n splitMenuItemIconButtonRef,\n resetOpenSubMenuIndex,\n setSubMenuIsOpenByIndex,\n isActive,\n setActiveItemIndex,\n index,\n hasChildren: Boolean(subMenu),\n splitMenuItem\n });\n\n const { onClickCallback } = useMenuItemKeyboardEvents({\n onClick,\n disabled,\n isActive,\n index,\n setActiveItemIndex,\n hasChildren: Boolean(subMenu),\n shouldShowSubMenu,\n setSubMenuIsOpenByIndex,\n menuRef,\n isMouseEnter,\n closeMenu,\n useDocumentEventListeners,\n splitMenuItem,\n isMouseEnterMenuItem,\n isMouseEnterIconButton\n });\n\n const closeSubMenu = useCallback(\n (option: CloseMenuOption = {}) => {\n setSubMenuIsOpenByIndex(index, false);\n if (option.propagate) {\n closeMenu(option);\n }\n },\n [setSubMenuIsOpenByIndex, index, closeMenu]\n );\n\n return (\n <Text\n id={id}\n element=\"li\"\n type=\"text2\"\n aria-haspopup={subMenu ? true : undefined}\n aria-expanded={subMenu ? shouldShowSubMenu : undefined}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_ITEM, index)}\n className={cx(styles.item, className, {\n [styles.disabled]: disabled,\n [styles.focused]: isActive,\n [styles.selected]: selected,\n [styles.initialSelected]: isInitialSelectedState,\n [styles.splitMenuItem]: splitMenuItem\n })}\n ref={mergedRef}\n onClick={onClickCallback}\n role=\"menuitem\"\n aria-current={isActive}\n onMouseLeave={onMouseLeave}\n onMouseEnter={onMouseEnter}\n tabIndex={TAB_INDEX_FOCUS_WITH_JS_ONLY}\n >\n {children}\n {Boolean(subMenu) && (\n <>\n <MenuItemSubMenuIcon\n ref={splitMenuItemIconButtonRef}\n isSplit={splitMenuItem}\n active={shouldShowSubMenu}\n disabled={disabled}\n />\n <MenuItemSubMenu\n anchorRef={anchorRef}\n open={shouldShowSubMenu}\n onClose={closeSubMenu}\n autoFocusOnMount={!useDocumentEventListeners}\n submenuPosition={submenuPosition}\n autoAdjustOnSubMenuContentResize={autoAdjustOnSubMenuContentResize}\n >\n {subMenu}\n </MenuItemSubMenu>\n </>\n )}\n </Text>\n );\n }\n);\n\nexport default BaseMenuItem;\n"],"names":["BaseMenuItem","forwardRef","_ref","ref","subMenu","className","menuRef","_ref$disabled","disabled","_ref$selected","selected","onClick","_ref$activeItemIndex","activeItemIndex","setActiveItemIndex","index","id","_ref$isParentMenuVisi","isParentMenuVisible","resetOpenSubMenuIndex","_ref$hasOpenSubMenu","hasOpenSubMenu","setSubMenuIsOpenByIndex","closeMenu","_ref$useDocumentEvent","useDocumentEventListeners","isInitialSelectedState","onMouseEnter","onMouseLeave","shouldScrollMenu","dataTestId","_ref$splitMenuItem","splitMenuItem","children","_ref$submenuPosition","submenuPosition","autoAdjustOnSubMenuContentResize","isActive","shouldShowSubMenu","anchorRef","useRef","splitMenuItemIconButtonRef","mergedRef","useMergeRef","isMouseEnterMenuItem","useIsMouseEnter","isMouseEnterIconButton","useEffect","anchorElement","current","scrollIntoViewIfNeeded","behaviour","_a","scrollIntoView","call","behavior","block","focus","isMouseEnter","useMenuItemMouseEvents","hasChildren","onClickCallback","useMenuItemKeyboardEvents","closeSubMenu","useCallback","option","arguments","length","undefined","propagate","React","createElement","Text","element","type","getTestId","ComponentDefaultTestId","MENU_ITEM","cx","styles","item","_defineProperty","focused","initialSelected","role","tabIndex","TAB_INDEX_FOCUS_WITH_JS_ONLY","Fragment","MenuItemSubMenuIcon","isSplit","active","MenuItemSubMenu","open","onClose","autoFocusOnMount"],"mappings":"qwBAeMA,IAAAA,EAAeC,GACnB,SAAAC,EA4BEC,GACE,IA3BAC,EAAOF,EAAPE,QACAC,EAASH,EAATG,UACAC,EAAOJ,EAAPI,QAAOC,EAAAL,EACPM,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAP,EAChBQ,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAOT,EAAPS,QAAOC,EAAAV,EACPW,gBACAC,EAAkBZ,EAAlBY,mBACAC,EAAKb,EAALa,MACAC,EAAEd,EAAFc,GAAEC,EAAAf,EACFgB,oBACAC,EAAqBjB,EAArBiB,sBAAqBC,EAAAlB,EACrBmB,eACAC,EAAuBpB,EAAvBoB,wBACAC,EAASrB,EAATqB,UAASC,EAAAtB,EACTuB,0BAAAA,OAA4B,IAAHD,GAAQA,EACjCE,EAAsBxB,EAAtBwB,uBACAC,EAAYzB,EAAZyB,aACAC,EAAY1B,EAAZ0B,aACAC,EAAgB3B,EAAhB2B,iBACeC,EAAU5B,EAAzB,eAAa6B,EAAA7B,EACb8B,cAAAA,OAAgB,IAAHD,GAAQA,EACrBE,EAAQ/B,EAAR+B,SAAQC,EAAAhC,EACRiC,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EACzBE,EAAgClC,EAAhCkC,iCAIIC,QAtBW,IAAAzB,GAAI,EAACA,KAsBeG,EAE/BuB,GAAqB9B,KAAoBJ,SApBvB,IAAHa,GAAQA,KAmBPoB,SAjBH,IAAHjB,GAAQA,IAoBlBmB,EAAYC,EAAO,MACnBC,EAA6BD,EAAO,MAEpCE,EAAYC,EAAYxC,EAAKoC,GAE7BK,GAAuBC,EAAgB,CAAE1C,IAAKoC,IAC9CO,GAAyBD,EAAgB,CAAE1C,IAAKsC,IAEtDM,GAAU,iBACFC,EAAgBT,EAAUU,QAC3BZ,GAAaR,GAAqBmB,IAGnCA,EAAcE,uBAChBF,EAAcE,uBAAuB,CAAEC,UAAW,WAGxB,QAA5BC,EAAAJ,EAAcK,sBAAc,IAAAD,GAAAA,EAAAE,KAAAN,EAAG,CAAEO,SAAU,SAAUC,MAAO,WAC9D,GAAG,CAACnB,EAAUR,IAEdkB,GAAU,WACR,IAAMC,EAAgBT,EAAUU,QAC5BxB,GACAY,IACFW,SAAAA,EAAeS,QAEnB,GAAG,CAACpB,EAAUZ,IAEd,IAAMiC,GAAeC,EAAuB,CAC1CxD,IAAKoC,EACLE,2BAAAA,EACAtB,sBAAAA,EACAG,wBAAAA,EACAe,SAAAA,EACAvB,mBAAAA,EACAC,MAAAA,EACA6C,cAAqBxD,EACrB4B,cAAAA,IAGM6B,GAAoBC,EAA0B,CACpDnD,QAAAA,EACAH,SAAAA,EACA6B,SAAAA,EACAtB,MAAAA,EACAD,mBAAAA,EACA8C,cAAqBxD,EACrBkC,kBAAAA,EACAhB,wBAAAA,EACAhB,QAAAA,EACAoD,aAAAA,GACAnC,UAAAA,EACAE,0BAAAA,EACAO,cAAAA,EACAY,qBAAAA,GACAE,uBAAAA,KAfMe,gBAkBFE,GAAeC,GACnB,WAAiC,IAAhCC,EAA0BC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAA,CAAA,EACzB5C,EAAwBP,GAAO,GAC3BkD,EAAOI,WACT9C,EAAU0C,EAEb,GACD,CAAC3C,EAAyBP,EAAOQ,IAGnC,OACE+C,EAACC,cAAAC,EACC,CAAAxD,GAAIA,EACJyD,QAAQ,KACRC,KAAK,QAAO,kBACGtE,QAAiBgE,EAAS,gBAC1BhE,EAAUkC,OAAoB8B,EAChC,cAAAtC,GAAc6C,EAAUC,EAAuBC,UAAW9D,GACvEV,UAAWyE,EAAGC,EAAOC,KAAM3E,EAAS4E,EAAAA,EAAAA,EAAAA,EAAAA,EACjCF,CAAAA,EAAAA,EAAOvE,SAAWA,GAClBuE,EAAOG,QAAU7C,GACjB0C,EAAOrE,SAAWA,GAClBqE,EAAOI,gBAAkBzD,GACzBqD,EAAO/C,cAAgBA,IAE1B7B,IAAKuC,EACL/B,QAASkD,GACTuB,KAAK,0BACS/C,EACdT,aAAcA,EACdD,aAAcA,EACd0D,SAAUC,GAETrD,IACQ7B,GACPkE,EAAAC,cAAAD,EAAAiB,SAAA,KACEjB,EAAAC,cAACiB,EACC,CAAArF,IAAKsC,EACLgD,QAASzD,EACT0D,OAAQpD,EACR9B,SAAUA,IAEZ8D,EAAAC,cAACoB,EAAe,CACdpD,UAAWA,EACXqD,KAAMtD,EACNuD,QAAS9B,GACT+B,kBAAmBrE,EACnBU,gBAAiBA,EACjBC,iCAAkCA,GAEjChC,IAMb"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{useRef as n,useMemo as o}from"react";import t from"../../../../DialogContentContainer/DialogContentContainer.js";import i from"../../../../../hooks/usePopover.js";import{Placement as s}from"../../../../../hooks/popoverConstants.js";import r from"../../../../../hooks/ssr/useIsomorphicLayoutEffect.js";var l=function(l){var u,
|
|
1
|
+
import e,{useRef as n,useMemo as o}from"react";import t from"../../../../DialogContentContainer/DialogContentContainer.js";import i from"../../../../../hooks/usePopover.js";import{Placement as s}from"../../../../../hooks/popoverConstants.js";import r from"../../../../../hooks/ssr/useIsomorphicLayoutEffect.js";var l=function(l){var u,a=l.anchorRef,c=l.open,p=l.autoFocusOnMount,m=l.onClose,v=l.children,f=l.submenuPosition,d=l.autoAdjustOnSubMenuContentResize,b=n(null),h=n(null);r((function(){p&&c&&(null==b?void 0:b.current)&&requestAnimationFrame((function(){b.current.focus()}))}),[p,c]);var j=o((function(){return"left"===f?s.LEFT_START:void 0}),[f]),C=i(null==a?void 0:a.current,null==h?void 0:h.current,{isOpen:c,placement:j,observeContentResize:d}),O=C.styles,g=C.attributes,y=v&&e.Children.only(v);return(null===(u=null==y?void 0:y.type)||void 0===u?void 0:u.isMenu)?e.createElement("div",Object.assign({style:Object.assign(Object.assign({},O.popper),{visibility:c?"visible":"hidden"})},g.popper,{ref:h}),y&&c&&e.createElement(t,null,e.cloneElement(y,Object.assign(Object.assign({},null==y?void 0:y.props),{isVisible:c,isSubMenu:!0,onClose:m,ref:b,useDocumentEventListeners:!p})))):(console.error("MenuItem can accept only Menu element as first level child, this element is not valid: ",y),null)};export{l as default};
|
|
2
2
|
//# sourceMappingURL=MenuItemSubMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItemSubMenu.js","sources":["../../../../../../../../src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\nimport DialogContentContainer from \"../../../../DialogContentContainer/DialogContentContainer\";\nimport usePopover from \"../../../../../hooks/usePopover\";\nimport { MenuChild } from \"../../../Menu/MenuConstants\";\nimport { MenuItemSubMenuProps } from \"./MenuItemSubMenu.types\";\nimport { Placement } from \"../../../../../hooks/popoverConstants\";\nimport useIsomorphicLayoutEffect from \"../../../../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nconst MenuItemSubMenu = ({\n anchorRef,\n open,\n autoFocusOnMount,\n onClose,\n children,\n submenuPosition,\n
|
|
1
|
+
{"version":3,"file":"MenuItemSubMenu.js","sources":["../../../../../../../../src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\nimport DialogContentContainer from \"../../../../DialogContentContainer/DialogContentContainer\";\nimport usePopover from \"../../../../../hooks/usePopover\";\nimport { MenuChild } from \"../../../Menu/MenuConstants\";\nimport { MenuItemSubMenuProps } from \"./MenuItemSubMenu.types\";\nimport { Placement } from \"../../../../../hooks/popoverConstants\";\nimport useIsomorphicLayoutEffect from \"../../../../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nconst MenuItemSubMenu = ({\n anchorRef,\n open,\n autoFocusOnMount,\n onClose,\n children,\n submenuPosition,\n autoAdjustOnSubMenuContentResize\n}: MenuItemSubMenuProps) => {\n const childRef = useRef<HTMLDivElement>(null);\n const popperElementRef = useRef<HTMLDivElement>(null);\n\n useIsomorphicLayoutEffect(() => {\n if (!autoFocusOnMount || !open || !childRef?.current) {\n return;\n }\n requestAnimationFrame(() => {\n childRef.current.focus();\n });\n }, [autoFocusOnMount, open]);\n\n const submenuPlacement = useMemo(\n () => (submenuPosition === \"left\" ? Placement.LEFT_START : undefined),\n [submenuPosition]\n );\n\n const { styles: popoverStyles, attributes: popoverAttributes } = usePopover(\n anchorRef?.current,\n popperElementRef?.current,\n {\n isOpen: open,\n placement: submenuPlacement,\n observeContentResize: autoAdjustOnSubMenuContentResize\n }\n );\n\n const subMenu: MenuChild = children && React.Children.only(children);\n if (!subMenu?.type?.isMenu) {\n console.error(\"MenuItem can accept only Menu element as first level child, this element is not valid: \", subMenu);\n return null;\n }\n\n return (\n <div\n style={{ ...popoverStyles.popper, visibility: open ? \"visible\" : \"hidden\" }}\n {...popoverAttributes.popper}\n ref={popperElementRef}\n >\n {subMenu && open && (\n <DialogContentContainer>\n {React.cloneElement(subMenu, {\n ...subMenu?.props,\n isVisible: open,\n isSubMenu: true,\n onClose,\n ref: childRef,\n useDocumentEventListeners: !autoFocusOnMount\n })}\n </DialogContentContainer>\n )}\n </div>\n );\n};\n\nexport default MenuItemSubMenu;\n"],"names":["MenuItemSubMenu","_ref","anchorRef","open","autoFocusOnMount","onClose","children","submenuPosition","autoAdjustOnSubMenuContentResize","childRef","useRef","popperElementRef","useIsomorphicLayoutEffect","current","requestAnimationFrame","focus","submenuPlacement","useMemo","Placement","LEFT_START","undefined","_usePopover","usePopover","isOpen","placement","observeContentResize","popoverStyles","styles","popoverAttributes","attributes","subMenu","React","Children","only","_a","type","isMenu","createElement","Object","assign","style","popper","visibility","ref","DialogContentContainer","cloneElement","props","isVisible","isSubMenu","useDocumentEventListeners","console","error"],"mappings":"uTAQA,IAAMA,EAAkB,SAAHC,GAQM,MAPzBC,EAASD,EAATC,UACAC,EAAIF,EAAJE,KACAC,EAAgBH,EAAhBG,iBACAC,EAAOJ,EAAPI,QACAC,EAAQL,EAARK,SACAC,EAAeN,EAAfM,gBACAC,EAAgCP,EAAhCO,iCAEMC,EAAWC,EAAuB,MAClCC,EAAmBD,EAAuB,MAEhDE,GAA0B,WACnBR,GAAqBD,IAASM,aAAA,EAAAA,EAAUI,UAG7CC,uBAAsB,WACpBL,EAASI,QAAQE,OACnB,GACF,GAAG,CAACX,EAAkBD,IAEtB,IAAMa,EAAmBC,GACvB,WAAA,MAA2B,SAApBV,EAA6BW,EAAUC,gBAAaC,CAAS,GACpE,CAACb,IAGHc,EAAiEC,EAC/DpB,aAAA,EAAAA,EAAWW,QACXF,aAAA,EAAAA,EAAkBE,QAClB,CACEU,OAAQpB,EACRqB,UAAWR,EACXS,qBAAsBjB,IANVkB,EAAaL,EAArBM,OAAmCC,EAAiBP,EAA7BQ,WAUzBC,EAAqBxB,GAAYyB,EAAMC,SAASC,KAAK3B,GAC3D,OAAoB,QAAf4B,EAAAJ,aAAA,EAAAA,EAASK,YAAM,IAAAD,OAAA,EAAAA,EAAAE,QAMlBL,EAAAM,cAAA,MAAAC,OAAAC,OAAA,CACEC,MAAKF,OAAAC,OAAAD,OAAAC,OAAA,GAAOb,EAAce,QAAQ,CAAAC,WAAYvC,EAAO,UAAY,YAC7DyB,EAAkBa,QACtBE,IAAKhC,IAEJmB,GAAW3B,GACV4B,gBAACa,EAAsB,KACpBb,EAAMc,aAAaf,EAAOQ,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACtBT,aAAA,EAAAA,EAASgB,OAAK,CACjBC,UAAW5C,EACX6C,WAAW,EACX3C,QAAAA,EACAsC,IAAKlC,EACLwC,2BAA4B7C,QAlBpC8C,QAAQC,MAAM,0FAA2FrB,GAClG,KAuBX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { AriaAttributes, ForwardedRef, ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport Tooltip, { TooltipProps } from \"../../../components/Tooltip/Tooltip\";\nimport Icon from \"../../../components/Icon/Icon\";\nimport useIsOverflowing from \"../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../../types\";\nimport { IconType } from \"../../Icon\";\nimport { CloseMenuOption, MenuChild } from \"../Menu/MenuConstants\";\nimport Label from \"../../Label/Label\";\nimport styles from \"./MenuItem.module.scss\";\nimport BaseMenuItem from \"./components/BaseMenuItem/BaseMenuItem\";\nimport MenuItemIcon from \"./components/MenuItemIcon/MenuItemIcon\";\nimport { TooltipPositions } from \"../../Tooltip/Tooltip.types\";\nimport { TooltipPositions as TooltipPositionsEnum } from \"../../Tooltip/TooltipConstants\";\nimport { SubmenuPosition } from \"./MenuItem.types\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n title?: string;\n label?: string | React.ReactElement<typeof Label>;\n icon?: SubIcon;\n iconType?: IconType;\n iconBackgroundColor?: string;\n disabled?: boolean;\n disableReason?: string;\n selected?: boolean;\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n activeItemIndex?: number;\n setActiveItemIndex?: (index: number) => void;\n index?: number;\n key?: string;\n isParentMenuVisible?: boolean;\n resetOpenSubMenuIndex?: () => void;\n hasOpenSubMenu?: boolean;\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n useDocumentEventListeners?: boolean;\n tooltipContent?: string;\n tooltipPosition?: TooltipPositions;\n tooltipShowDelay?: number;\n tooltipProps?: Partial<TooltipProps>;\n onMouseLeave?: (event: React.MouseEvent) => void;\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name which is added to div which wraps an Icon\n */\n iconWrapperClassName?: string;\n isInitialSelectedState?: boolean;\n shouldScrollMenu?: boolean;\n closeMenu?: (option: CloseMenuOption) => void;\n menuRef?: React.RefObject<HTMLElement>;\n //// TODO: [breaking] MenuItem can accept only Menu element as first level child, it accepts MenuChild[] as children even though it is not valid\n children?: MenuChild | MenuChild[];\n /**\n * Type of menu item with sub menu, which has two click/hover options-\n * 1. click on the main menu item will trigger onClick\n * 2. click/hover on icon button will open the sub menu\n */\n splitMenuItem?: boolean;\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n submenuPosition?: SubmenuPosition;\n /**\n *
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { AriaAttributes, ForwardedRef, ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport Tooltip, { TooltipProps } from \"../../../components/Tooltip/Tooltip\";\nimport Icon from \"../../../components/Icon/Icon\";\nimport useIsOverflowing from \"../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../../types\";\nimport { IconType } from \"../../Icon\";\nimport { CloseMenuOption, MenuChild } from \"../Menu/MenuConstants\";\nimport Label from \"../../Label/Label\";\nimport styles from \"./MenuItem.module.scss\";\nimport BaseMenuItem from \"./components/BaseMenuItem/BaseMenuItem\";\nimport MenuItemIcon from \"./components/MenuItemIcon/MenuItemIcon\";\nimport { TooltipPositions } from \"../../Tooltip/Tooltip.types\";\nimport { TooltipPositions as TooltipPositionsEnum } from \"../../Tooltip/TooltipConstants\";\nimport { SubmenuPosition } from \"./MenuItem.types\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n title?: string;\n label?: string | React.ReactElement<typeof Label>;\n icon?: SubIcon;\n iconType?: IconType;\n iconBackgroundColor?: string;\n disabled?: boolean;\n disableReason?: string;\n selected?: boolean;\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n activeItemIndex?: number;\n setActiveItemIndex?: (index: number) => void;\n index?: number;\n key?: string;\n isParentMenuVisible?: boolean;\n resetOpenSubMenuIndex?: () => void;\n hasOpenSubMenu?: boolean;\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n useDocumentEventListeners?: boolean;\n tooltipContent?: string;\n tooltipPosition?: TooltipPositions;\n tooltipShowDelay?: number;\n tooltipProps?: Partial<TooltipProps>;\n onMouseLeave?: (event: React.MouseEvent) => void;\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name which is added to div which wraps an Icon\n */\n iconWrapperClassName?: string;\n isInitialSelectedState?: boolean;\n shouldScrollMenu?: boolean;\n closeMenu?: (option: CloseMenuOption) => void;\n menuRef?: React.RefObject<HTMLElement>;\n //// TODO: [breaking] MenuItem can accept only Menu element as first level child, it accepts MenuChild[] as children even though it is not valid\n children?: MenuChild | MenuChild[];\n /**\n * Type of menu item with sub menu, which has two click/hover options-\n * 1. click on the main menu item will trigger onClick\n * 2. click/hover on icon button will open the sub menu\n */\n splitMenuItem?: boolean;\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n submenuPosition?: SubmenuPosition;\n /**\n * When set to `true`, submenu's content and size changes would automatically trigger repositioning.\n *\n * This is useful for when submenu's content may grow or shrink without a re-render being triggered.\n */\n autoAdjustOnSubMenuContentResize?: boolean;\n}\n\nexport interface MenuItemTitleComponentProps extends Omit<MenuItemProps, \"title\"> {\n title: ReactElement;\n \"aria-label\": NonNullable<AriaAttributes[\"aria-label\"]>;\n}\n\nconst MenuItem: VibeComponent<MenuItemProps | MenuItemTitleComponentProps> & {\n iconType?: typeof Icon.type;\n isSelectable?: boolean;\n isMenuChild?: boolean;\n tooltipPositions?: typeof TooltipPositionsEnum;\n} = forwardRef(\n (\n {\n className,\n iconWrapperClassName,\n title = \"\",\n label = \"\",\n icon = \"\",\n iconType,\n iconBackgroundColor,\n disabled = false,\n disableReason,\n selected = false,\n key,\n children,\n tooltipContent,\n tooltipPosition = \"right\",\n tooltipShowDelay = 300,\n tooltipProps,\n \"aria-label\": ariaLabel,\n ...baseMenuProps\n }: MenuItemProps | MenuItemTitleComponentProps,\n ref: ForwardedRef<HTMLElement>\n ) => {\n const titleRef = useRef();\n\n // if \"title\" is a component ariaLabel is mandatory\n const iconLabel = ariaLabel ?? (title as string);\n\n const isTitleHoveredAndOverflowing = useIsOverflowing({ ref: titleRef });\n const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled || tooltipContent;\n\n const finalTooltipContent = useMemo(() => {\n if (disabled) return disableReason;\n if (tooltipContent) return tooltipContent;\n return title;\n }, [disableReason, disabled, title, tooltipContent]);\n\n const renderLabel = useMemo(() => {\n if (!label) return;\n if (typeof label === \"string\") {\n return <Label kind=\"line\" text={label} />;\n }\n if (React.isValidElement(label) && label.type === Label) {\n return label;\n }\n }, [label]);\n\n return (\n <Tooltip\n content={shouldShowTooltip ? finalTooltipContent : null}\n position={tooltipPosition}\n showDelay={tooltipShowDelay}\n {...tooltipProps}\n >\n <BaseMenuItem\n key={key}\n ref={ref}\n subMenu={children}\n className={className}\n disabled={disabled}\n selected={selected}\n {...baseMenuProps}\n >\n {Boolean(icon) && (\n <MenuItemIcon\n icon={icon}\n type={iconType}\n label={iconLabel}\n disabled={disabled}\n selected={selected}\n backgroundColor={iconBackgroundColor}\n wrapperClassName={iconWrapperClassName}\n />\n )}\n <div ref={titleRef} className={styles.title}>\n {title}\n </div>\n {renderLabel}\n </BaseMenuItem>\n </Tooltip>\n );\n }\n);\n\nObject.assign(MenuItem, {\n isSelectable: true,\n isMenuChild: true\n});\n\nexport default withStaticProps(MenuItem, {\n iconType: Icon.type,\n tooltipPositions: TooltipPositionsEnum\n});\n"],"names":["MenuItem","forwardRef","_a","ref","className","iconWrapperClassName","_a$title","title","_a$label","label","_a$icon","icon","iconType","iconBackgroundColor","_a$disabled","disabled","disableReason","_a$selected","selected","key","children","tooltipContent","_a$tooltipPosition","tooltipPosition","_a$tooltipShowDelay","tooltipShowDelay","tooltipProps","ariaLabel","baseMenuProps","__rest","titleRef","useRef","iconLabel","shouldShowTooltip","useIsOverflowing","finalTooltipContent","useMemo","renderLabel","React","createElement","Label","kind","text","isValidElement","type","Tooltip","Object","assign","content","position","showDelay","BaseMenuItem","subMenu","MenuItemIcon","backgroundColor","wrapperClassName","styles","isSelectable","isMenuChild","withStaticProps","Icon","tooltipPositions","TooltipPositionsEnum"],"mappings":"snBAuEA,IAAMA,EAKFC,GACF,SACEC,EAoBAC,OAnBEC,EAgBuBF,EAhBvBE,UACAC,EAeuBH,EAfvBG,qBAAoBC,EAeGJ,EAdvBK,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAcaN,EAbvBO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAaaR,EAZvBS,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EACTE,EAWuBV,EAXvBU,SACAC,EAUuBX,EAVvBW,oBAAmBC,EAUIZ,EATvBa,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAQuBd,EARvBc,cAAaC,EAQUf,EAPvBgB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAMuBjB,EANvBiB,IACAC,EAKuBlB,EALvBkB,SACAC,EAIuBnB,EAJvBmB,eAAcC,EAISpB,EAHvBqB,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAGFtB,EAFvBuB,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EACuBxB,EADvBwB,aACcC,EAASzB,EAAvB,cACG0B,EAlBLC,EAAA3B,EAAA,CAAA,YAAA,uBAAA,QAAA,QAAA,OAAA,WAAA,sBAAA,WAAA,gBAAA,WAAA,MAAA,WAAA,iBAAA,kBAAA,mBAAA,eAAA,eAsBM4B,EAAWC,IAGXC,EAAYL,QAAAA,EAAcpB,EAG1B0B,EAD+BC,EAAiB,CAAE/B,IAAK2B,KACHf,GAAYM,EAEhEc,EAAsBC,GAAQ,WAClC,OAAIrB,EAAiBC,EACjBK,GACGd,CACR,GAAE,CAACS,EAAeD,EAAUR,EAAOc,IAE9BgB,EAAcD,GAAQ,WAC1B,GAAK3B,EACL,MAAqB,iBAAVA,EACF6B,EAAAC,cAACC,EAAK,CAACC,KAAK,OAAOC,KAAMjC,IAE9B6B,EAAMK,eAAelC,IAAUA,EAAMmC,OAASJ,EACzC/B,OADT,CAGF,GAAG,CAACA,IAEJ,OACE6B,EAACC,cAAAM,EACCC,OAAAC,OAAA,CAAAC,QAASf,EAAoBE,EAAsB,KACnDc,SAAU1B,EACV2B,UAAWzB,GACPC,GAEJY,EAACC,cAAAY,EACCL,OAAAC,OAAA,CAAA5B,IAAKA,EACLhB,IAAKA,EACLiD,QAAShC,EACThB,UAAWA,EACXW,SAAUA,EACVG,SAAUA,GACNU,KAEKjB,GACP2B,gBAACe,EAAY,CACX1C,KAAMA,EACNiC,KAAMhC,EACNH,MAAOuB,EACPjB,SAAUA,EACVG,SAAUA,EACVoC,gBAAiBzC,EACjB0C,iBAAkBlD,IAGtBiC,EAAKC,cAAA,MAAA,CAAApC,IAAK2B,EAAU1B,UAAWoD,EAAOjD,OACnCA,GAEF8B,GAIT,IAGFS,OAAOC,OAAO/C,EAAU,CACtByD,cAAc,EACdC,aAAa,IAGf,IAAeC,EAAAA,EAAgB3D,EAAU,CACvCY,SAAUgD,EAAKhB,KACfiB,iBAAkBC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as n,useRef as o,useEffect as s,useCallback as
|
|
1
|
+
import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as n,useRef as o,useEffect as s,useCallback as u}from"react";import i from"../../../../Text/Text.js";import{getTestId as r,ComponentDefaultTestId as l}from"../../../../../tests/testIds.js";import a from"classnames";import{TAB_INDEX_FOCUS_WITH_JS_ONLY as m}from"../../MenuItemConstants.js";import d from"../MenuItemSubMenuIcon/MenuItemSubMenuIcon.js";import c from"../MenuItemSubMenu/MenuItemSubMenu.js";import M from"../../hooks/useMenuItemMouseEvents.js";import I from"../../hooks/useMenuItemKeyboardEvents.js";import p from"../../../../../hooks/useMergeRef.js";import v from"../../../../../hooks/useIsMouseEnter.js";import f from"./BaseMenuItem.module.scss.js";var b=n((function(n,b){var h=n.subMenu,S=n.className,x=n.menuRef,E=n.disabled,j=void 0!==E&&E,C=n.selected,k=void 0!==C&&C,O=n.onClick,A=n.activeItemIndex,B=n.setActiveItemIndex,R=n.index,g=n.id,y=n.isParentMenuVisible,N=n.resetOpenSubMenuIndex,P=n.hasOpenSubMenu,w=n.setSubMenuIsOpenByIndex,L=n.closeMenu,V=n.useDocumentEventListeners,T=void 0!==V&&V,_=n.isInitialSelectedState,z=n.onMouseEnter,D=n.onMouseLeave,F=n.shouldScrollMenu,H=n["data-testid"],K=n.splitMenuItem,U=void 0!==K&&K,q=n.children,G=n.submenuPosition,J=void 0===G?"right":G,Q=n.autoAdjustOnSubMenuContentResize,W=(void 0===A?-1:A)===R,X=!j&&!!h&&(void 0!==y&&y)&&(W&&(void 0!==P&&P)),Y=o(null),Z=o(null),$=p(b,Y),ee=v({ref:Y}),te=v({ref:Z});s((function(){var e,t=Y.current;W&&F&&t&&(t.scrollIntoViewIfNeeded?t.scrollIntoViewIfNeeded({behaviour:"smooth"}):null===(e=t.scrollIntoView)||void 0===e||e.call(t,{behavior:"smooth",block:"center"}))}),[W,F]),s((function(){var e=Y.current;T||W&&(null==e||e.focus())}),[W,T]);var ne=M({ref:Y,splitMenuItemIconButtonRef:Z,resetOpenSubMenuIndex:N,setSubMenuIsOpenByIndex:w,isActive:W,setActiveItemIndex:B,index:R,hasChildren:!!h,splitMenuItem:U}),oe=I({onClick:O,disabled:j,isActive:W,index:R,setActiveItemIndex:B,hasChildren:!!h,shouldShowSubMenu:X,setSubMenuIsOpenByIndex:w,menuRef:x,isMouseEnter:ne,closeMenu:L,useDocumentEventListeners:T,splitMenuItem:U,isMouseEnterMenuItem:ee,isMouseEnterIconButton:te}).onClickCallback,se=u((function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};w(R,!1),e.propagate&&L(e)}),[w,R,L]);return t.createElement(i,{id:g,element:"li",type:"text2","aria-haspopup":!!h||void 0,"aria-expanded":h?X:void 0,"data-testid":H||r(l.MENU_ITEM,R),className:a(f.item,S,e(e(e(e(e({},f.disabled,j),f.focused,W),f.selected,k),f.initialSelected,_),f.splitMenuItem,U)),ref:$,onClick:oe,role:"menuitem","aria-current":W,onMouseLeave:D,onMouseEnter:z,tabIndex:m},q,!!h&&t.createElement(t.Fragment,null,t.createElement(d,{ref:Z,isSplit:U,active:X,disabled:j}),t.createElement(c,{anchorRef:Y,open:X,onClose:se,autoFocusOnMount:!T,submenuPosition:J,autoAdjustOnSubMenuContentResize:Q},h)))}));export{b as default};
|
|
2
2
|
//# sourceMappingURL=BaseMenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../../src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useRef } from \"react\";\nimport Text from \"../../../../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { TAB_INDEX_FOCUS_WITH_JS_ONLY } from \"../../MenuItemConstants\";\nimport MenuItemSubMenuIcon from \"../MenuItemSubMenuIcon/MenuItemSubMenuIcon\";\nimport MenuItemSubMenu from \"../MenuItemSubMenu/MenuItemSubMenu\";\nimport { CloseMenuOption } from \"../../../Menu/MenuConstants\";\nimport useMenuItemMouseEvents from \"../../hooks/useMenuItemMouseEvents\";\nimport useMenuItemKeyboardEvents from \"../../hooks/useMenuItemKeyboardEvents\";\nimport useMergeRef from \"../../../../../hooks/useMergeRef\";\nimport useIsMouseEnter from \"../../../../../hooks/useIsMouseEnter\";\nimport styles from \"./BaseMenuItem.module.scss\";\nimport { BaseMenuItemProps } from \"./BaseMenuItem.types\";\n\nconst BaseMenuItem = forwardRef(\n (\n {\n subMenu,\n className,\n menuRef,\n disabled = false,\n selected = false,\n onClick,\n activeItemIndex = -1,\n setActiveItemIndex,\n index,\n id,\n isParentMenuVisible = false,\n resetOpenSubMenuIndex,\n hasOpenSubMenu = false,\n setSubMenuIsOpenByIndex,\n closeMenu,\n useDocumentEventListeners = false,\n isInitialSelectedState,\n onMouseEnter,\n onMouseLeave,\n shouldScrollMenu,\n \"data-testid\": dataTestId,\n splitMenuItem = false,\n children,\n submenuPosition = \"right\"\n }: BaseMenuItemProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const isActive = activeItemIndex === index;\n const isSubMenuOpen = isActive && hasOpenSubMenu;\n const shouldShowSubMenu = !disabled && Boolean(subMenu) && isParentMenuVisible && isSubMenuOpen;\n\n const anchorRef = useRef(null);\n const splitMenuItemIconButtonRef = useRef(null);\n\n const mergedRef = useMergeRef(ref, anchorRef);\n\n const isMouseEnterMenuItem = useIsMouseEnter({ ref: anchorRef });\n const isMouseEnterIconButton = useIsMouseEnter({ ref: splitMenuItemIconButtonRef });\n\n useEffect(() => {\n const anchorElement = anchorRef.current;\n if (!isActive || !shouldScrollMenu || !anchorElement) {\n return;\n }\n if (anchorElement.scrollIntoViewIfNeeded) {\n anchorElement.scrollIntoViewIfNeeded({ behaviour: \"smooth\" });\n return;\n }\n anchorElement.scrollIntoView?.({ behavior: \"smooth\", block: \"center\" });\n }, [isActive, shouldScrollMenu]);\n\n useEffect(() => {\n const anchorElement = anchorRef.current;\n if (useDocumentEventListeners) return;\n if (isActive) {\n anchorElement?.focus();\n }\n }, [isActive, useDocumentEventListeners]);\n\n const isMouseEnter = useMenuItemMouseEvents({\n ref: anchorRef,\n splitMenuItemIconButtonRef,\n resetOpenSubMenuIndex,\n setSubMenuIsOpenByIndex,\n isActive,\n setActiveItemIndex,\n index,\n hasChildren: Boolean(subMenu),\n splitMenuItem\n });\n\n const { onClickCallback } = useMenuItemKeyboardEvents({\n onClick,\n disabled,\n isActive,\n index,\n setActiveItemIndex,\n hasChildren: Boolean(subMenu),\n shouldShowSubMenu,\n setSubMenuIsOpenByIndex,\n menuRef,\n isMouseEnter,\n closeMenu,\n useDocumentEventListeners,\n splitMenuItem,\n isMouseEnterMenuItem,\n isMouseEnterIconButton\n });\n\n const closeSubMenu = useCallback(\n (option: CloseMenuOption = {}) => {\n setSubMenuIsOpenByIndex(index, false);\n if (option.propagate) {\n closeMenu(option);\n }\n },\n [setSubMenuIsOpenByIndex, index, closeMenu]\n );\n\n return (\n <Text\n id={id}\n element=\"li\"\n type=\"text2\"\n aria-haspopup={subMenu ? true : undefined}\n aria-expanded={subMenu ? shouldShowSubMenu : undefined}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_ITEM, index)}\n className={cx(styles.item, className, {\n [styles.disabled]: disabled,\n [styles.focused]: isActive,\n [styles.selected]: selected,\n [styles.initialSelected]: isInitialSelectedState,\n [styles.splitMenuItem]: splitMenuItem\n })}\n ref={mergedRef}\n onClick={onClickCallback}\n role=\"menuitem\"\n aria-current={isActive}\n onMouseLeave={onMouseLeave}\n onMouseEnter={onMouseEnter}\n tabIndex={TAB_INDEX_FOCUS_WITH_JS_ONLY}\n >\n {children}\n {Boolean(subMenu) && (\n <>\n <MenuItemSubMenuIcon\n ref={splitMenuItemIconButtonRef}\n isSplit={splitMenuItem}\n active={shouldShowSubMenu}\n disabled={disabled}\n />\n <MenuItemSubMenu\n anchorRef={anchorRef}\n open={shouldShowSubMenu}\n onClose={closeSubMenu}\n autoFocusOnMount={!useDocumentEventListeners}\n submenuPosition={submenuPosition}\n >\n {subMenu}\n </MenuItemSubMenu>\n </>\n )}\n </Text>\n );\n }\n);\n\nexport default BaseMenuItem;\n"],"names":["BaseMenuItem","forwardRef","_ref","ref","subMenu","className","menuRef","_ref$disabled","disabled","_ref$selected","selected","onClick","_ref$activeItemIndex","activeItemIndex","setActiveItemIndex","index","id","_ref$isParentMenuVisi","isParentMenuVisible","resetOpenSubMenuIndex","_ref$hasOpenSubMenu","hasOpenSubMenu","setSubMenuIsOpenByIndex","closeMenu","_ref$useDocumentEvent","useDocumentEventListeners","isInitialSelectedState","onMouseEnter","onMouseLeave","shouldScrollMenu","dataTestId","_ref$splitMenuItem","splitMenuItem","children","_ref$submenuPosition","submenuPosition","isActive","shouldShowSubMenu","anchorRef","useRef","splitMenuItemIconButtonRef","mergedRef","useMergeRef","isMouseEnterMenuItem","useIsMouseEnter","isMouseEnterIconButton","useEffect","anchorElement","current","scrollIntoViewIfNeeded","behaviour","_a","scrollIntoView","call","behavior","block","focus","isMouseEnter","useMenuItemMouseEvents","hasChildren","onClickCallback","useMenuItemKeyboardEvents","closeSubMenu","useCallback","option","arguments","length","undefined","propagate","React","createElement","Text","element","type","getTestId","ComponentDefaultTestId","MENU_ITEM","cx","styles","item","_defineProperty","focused","initialSelected","role","tabIndex","TAB_INDEX_FOCUS_WITH_JS_ONLY","Fragment","MenuItemSubMenuIcon","isSplit","active","MenuItemSubMenu","open","onClose","autoFocusOnMount"],"mappings":"qwBAeMA,IAAAA,EAAeC,GACnB,SAAAC,
|
|
1
|
+
{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../../src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useRef } from \"react\";\nimport Text from \"../../../../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { TAB_INDEX_FOCUS_WITH_JS_ONLY } from \"../../MenuItemConstants\";\nimport MenuItemSubMenuIcon from \"../MenuItemSubMenuIcon/MenuItemSubMenuIcon\";\nimport MenuItemSubMenu from \"../MenuItemSubMenu/MenuItemSubMenu\";\nimport { CloseMenuOption } from \"../../../Menu/MenuConstants\";\nimport useMenuItemMouseEvents from \"../../hooks/useMenuItemMouseEvents\";\nimport useMenuItemKeyboardEvents from \"../../hooks/useMenuItemKeyboardEvents\";\nimport useMergeRef from \"../../../../../hooks/useMergeRef\";\nimport useIsMouseEnter from \"../../../../../hooks/useIsMouseEnter\";\nimport styles from \"./BaseMenuItem.module.scss\";\nimport { BaseMenuItemProps } from \"./BaseMenuItem.types\";\n\nconst BaseMenuItem = forwardRef(\n (\n {\n subMenu,\n className,\n menuRef,\n disabled = false,\n selected = false,\n onClick,\n activeItemIndex = -1,\n setActiveItemIndex,\n index,\n id,\n isParentMenuVisible = false,\n resetOpenSubMenuIndex,\n hasOpenSubMenu = false,\n setSubMenuIsOpenByIndex,\n closeMenu,\n useDocumentEventListeners = false,\n isInitialSelectedState,\n onMouseEnter,\n onMouseLeave,\n shouldScrollMenu,\n \"data-testid\": dataTestId,\n splitMenuItem = false,\n children,\n submenuPosition = \"right\",\n autoAdjustOnSubMenuContentResize\n }: BaseMenuItemProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const isActive = activeItemIndex === index;\n const isSubMenuOpen = isActive && hasOpenSubMenu;\n const shouldShowSubMenu = !disabled && Boolean(subMenu) && isParentMenuVisible && isSubMenuOpen;\n\n const anchorRef = useRef(null);\n const splitMenuItemIconButtonRef = useRef(null);\n\n const mergedRef = useMergeRef(ref, anchorRef);\n\n const isMouseEnterMenuItem = useIsMouseEnter({ ref: anchorRef });\n const isMouseEnterIconButton = useIsMouseEnter({ ref: splitMenuItemIconButtonRef });\n\n useEffect(() => {\n const anchorElement = anchorRef.current;\n if (!isActive || !shouldScrollMenu || !anchorElement) {\n return;\n }\n if (anchorElement.scrollIntoViewIfNeeded) {\n anchorElement.scrollIntoViewIfNeeded({ behaviour: \"smooth\" });\n return;\n }\n anchorElement.scrollIntoView?.({ behavior: \"smooth\", block: \"center\" });\n }, [isActive, shouldScrollMenu]);\n\n useEffect(() => {\n const anchorElement = anchorRef.current;\n if (useDocumentEventListeners) return;\n if (isActive) {\n anchorElement?.focus();\n }\n }, [isActive, useDocumentEventListeners]);\n\n const isMouseEnter = useMenuItemMouseEvents({\n ref: anchorRef,\n splitMenuItemIconButtonRef,\n resetOpenSubMenuIndex,\n setSubMenuIsOpenByIndex,\n isActive,\n setActiveItemIndex,\n index,\n hasChildren: Boolean(subMenu),\n splitMenuItem\n });\n\n const { onClickCallback } = useMenuItemKeyboardEvents({\n onClick,\n disabled,\n isActive,\n index,\n setActiveItemIndex,\n hasChildren: Boolean(subMenu),\n shouldShowSubMenu,\n setSubMenuIsOpenByIndex,\n menuRef,\n isMouseEnter,\n closeMenu,\n useDocumentEventListeners,\n splitMenuItem,\n isMouseEnterMenuItem,\n isMouseEnterIconButton\n });\n\n const closeSubMenu = useCallback(\n (option: CloseMenuOption = {}) => {\n setSubMenuIsOpenByIndex(index, false);\n if (option.propagate) {\n closeMenu(option);\n }\n },\n [setSubMenuIsOpenByIndex, index, closeMenu]\n );\n\n return (\n <Text\n id={id}\n element=\"li\"\n type=\"text2\"\n aria-haspopup={subMenu ? true : undefined}\n aria-expanded={subMenu ? shouldShowSubMenu : undefined}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_ITEM, index)}\n className={cx(styles.item, className, {\n [styles.disabled]: disabled,\n [styles.focused]: isActive,\n [styles.selected]: selected,\n [styles.initialSelected]: isInitialSelectedState,\n [styles.splitMenuItem]: splitMenuItem\n })}\n ref={mergedRef}\n onClick={onClickCallback}\n role=\"menuitem\"\n aria-current={isActive}\n onMouseLeave={onMouseLeave}\n onMouseEnter={onMouseEnter}\n tabIndex={TAB_INDEX_FOCUS_WITH_JS_ONLY}\n >\n {children}\n {Boolean(subMenu) && (\n <>\n <MenuItemSubMenuIcon\n ref={splitMenuItemIconButtonRef}\n isSplit={splitMenuItem}\n active={shouldShowSubMenu}\n disabled={disabled}\n />\n <MenuItemSubMenu\n anchorRef={anchorRef}\n open={shouldShowSubMenu}\n onClose={closeSubMenu}\n autoFocusOnMount={!useDocumentEventListeners}\n submenuPosition={submenuPosition}\n autoAdjustOnSubMenuContentResize={autoAdjustOnSubMenuContentResize}\n >\n {subMenu}\n </MenuItemSubMenu>\n </>\n )}\n </Text>\n );\n }\n);\n\nexport default BaseMenuItem;\n"],"names":["BaseMenuItem","forwardRef","_ref","ref","subMenu","className","menuRef","_ref$disabled","disabled","_ref$selected","selected","onClick","_ref$activeItemIndex","activeItemIndex","setActiveItemIndex","index","id","_ref$isParentMenuVisi","isParentMenuVisible","resetOpenSubMenuIndex","_ref$hasOpenSubMenu","hasOpenSubMenu","setSubMenuIsOpenByIndex","closeMenu","_ref$useDocumentEvent","useDocumentEventListeners","isInitialSelectedState","onMouseEnter","onMouseLeave","shouldScrollMenu","dataTestId","_ref$splitMenuItem","splitMenuItem","children","_ref$submenuPosition","submenuPosition","autoAdjustOnSubMenuContentResize","isActive","shouldShowSubMenu","anchorRef","useRef","splitMenuItemIconButtonRef","mergedRef","useMergeRef","isMouseEnterMenuItem","useIsMouseEnter","isMouseEnterIconButton","useEffect","anchorElement","current","scrollIntoViewIfNeeded","behaviour","_a","scrollIntoView","call","behavior","block","focus","isMouseEnter","useMenuItemMouseEvents","hasChildren","onClickCallback","useMenuItemKeyboardEvents","closeSubMenu","useCallback","option","arguments","length","undefined","propagate","React","createElement","Text","element","type","getTestId","ComponentDefaultTestId","MENU_ITEM","cx","styles","item","_defineProperty","focused","initialSelected","role","tabIndex","TAB_INDEX_FOCUS_WITH_JS_ONLY","Fragment","MenuItemSubMenuIcon","isSplit","active","MenuItemSubMenu","open","onClose","autoFocusOnMount"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{useRef as n,useMemo as o}from"react";import t from"../../../../DialogContentContainer/DialogContentContainer.js";import i from"../../../../../hooks/usePopover.js";import{Placement as s}from"../../../../../hooks/popoverConstants.js";import r from"../../../../../hooks/ssr/useIsomorphicLayoutEffect.js";var l=function(l){var u,
|
|
1
|
+
import e,{useRef as n,useMemo as o}from"react";import t from"../../../../DialogContentContainer/DialogContentContainer.js";import i from"../../../../../hooks/usePopover.js";import{Placement as s}from"../../../../../hooks/popoverConstants.js";import r from"../../../../../hooks/ssr/useIsomorphicLayoutEffect.js";var l=function(l){var u,a=l.anchorRef,c=l.open,p=l.autoFocusOnMount,m=l.onClose,v=l.children,f=l.submenuPosition,d=l.autoAdjustOnSubMenuContentResize,b=n(null),h=n(null);r((function(){p&&c&&(null==b?void 0:b.current)&&requestAnimationFrame((function(){b.current.focus()}))}),[p,c]);var j=o((function(){return"left"===f?s.LEFT_START:void 0}),[f]),C=i(null==a?void 0:a.current,null==h?void 0:h.current,{isOpen:c,placement:j,observeContentResize:d}),O=C.styles,g=C.attributes,y=v&&e.Children.only(v);return(null===(u=null==y?void 0:y.type)||void 0===u?void 0:u.isMenu)?e.createElement("div",Object.assign({style:Object.assign(Object.assign({},O.popper),{visibility:c?"visible":"hidden"})},g.popper,{ref:h}),y&&c&&e.createElement(t,null,e.cloneElement(y,Object.assign(Object.assign({},null==y?void 0:y.props),{isVisible:c,isSubMenu:!0,onClose:m,ref:b,useDocumentEventListeners:!p})))):(console.error("MenuItem can accept only Menu element as first level child, this element is not valid: ",y),null)};export{l as default};
|
|
2
2
|
//# sourceMappingURL=MenuItemSubMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItemSubMenu.js","sources":["../../../../../../../src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\nimport DialogContentContainer from \"../../../../DialogContentContainer/DialogContentContainer\";\nimport usePopover from \"../../../../../hooks/usePopover\";\nimport { MenuChild } from \"../../../Menu/MenuConstants\";\nimport { MenuItemSubMenuProps } from \"./MenuItemSubMenu.types\";\nimport { Placement } from \"../../../../../hooks/popoverConstants\";\nimport useIsomorphicLayoutEffect from \"../../../../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nconst MenuItemSubMenu = ({\n anchorRef,\n open,\n autoFocusOnMount,\n onClose,\n children,\n submenuPosition,\n
|
|
1
|
+
{"version":3,"file":"MenuItemSubMenu.js","sources":["../../../../../../../src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\nimport DialogContentContainer from \"../../../../DialogContentContainer/DialogContentContainer\";\nimport usePopover from \"../../../../../hooks/usePopover\";\nimport { MenuChild } from \"../../../Menu/MenuConstants\";\nimport { MenuItemSubMenuProps } from \"./MenuItemSubMenu.types\";\nimport { Placement } from \"../../../../../hooks/popoverConstants\";\nimport useIsomorphicLayoutEffect from \"../../../../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nconst MenuItemSubMenu = ({\n anchorRef,\n open,\n autoFocusOnMount,\n onClose,\n children,\n submenuPosition,\n autoAdjustOnSubMenuContentResize\n}: MenuItemSubMenuProps) => {\n const childRef = useRef<HTMLDivElement>(null);\n const popperElementRef = useRef<HTMLDivElement>(null);\n\n useIsomorphicLayoutEffect(() => {\n if (!autoFocusOnMount || !open || !childRef?.current) {\n return;\n }\n requestAnimationFrame(() => {\n childRef.current.focus();\n });\n }, [autoFocusOnMount, open]);\n\n const submenuPlacement = useMemo(\n () => (submenuPosition === \"left\" ? Placement.LEFT_START : undefined),\n [submenuPosition]\n );\n\n const { styles: popoverStyles, attributes: popoverAttributes } = usePopover(\n anchorRef?.current,\n popperElementRef?.current,\n {\n isOpen: open,\n placement: submenuPlacement,\n observeContentResize: autoAdjustOnSubMenuContentResize\n }\n );\n\n const subMenu: MenuChild = children && React.Children.only(children);\n if (!subMenu?.type?.isMenu) {\n console.error(\"MenuItem can accept only Menu element as first level child, this element is not valid: \", subMenu);\n return null;\n }\n\n return (\n <div\n style={{ ...popoverStyles.popper, visibility: open ? \"visible\" : \"hidden\" }}\n {...popoverAttributes.popper}\n ref={popperElementRef}\n >\n {subMenu && open && (\n <DialogContentContainer>\n {React.cloneElement(subMenu, {\n ...subMenu?.props,\n isVisible: open,\n isSubMenu: true,\n onClose,\n ref: childRef,\n useDocumentEventListeners: !autoFocusOnMount\n })}\n </DialogContentContainer>\n )}\n </div>\n );\n};\n\nexport default MenuItemSubMenu;\n"],"names":["MenuItemSubMenu","_ref","anchorRef","open","autoFocusOnMount","onClose","children","submenuPosition","autoAdjustOnSubMenuContentResize","childRef","useRef","popperElementRef","useIsomorphicLayoutEffect","current","requestAnimationFrame","focus","submenuPlacement","useMemo","Placement","LEFT_START","undefined","_usePopover","usePopover","isOpen","placement","observeContentResize","popoverStyles","styles","popoverAttributes","attributes","subMenu","React","Children","only","_a","type","isMenu","createElement","Object","assign","style","popper","visibility","ref","DialogContentContainer","cloneElement","props","isVisible","isSubMenu","useDocumentEventListeners","console","error"],"mappings":"uTAQA,IAAMA,EAAkB,SAAHC,GAQM,MAPzBC,EAASD,EAATC,UACAC,EAAIF,EAAJE,KACAC,EAAgBH,EAAhBG,iBACAC,EAAOJ,EAAPI,QACAC,EAAQL,EAARK,SACAC,EAAeN,EAAfM,gBACAC,EAAgCP,EAAhCO,iCAEMC,EAAWC,EAAuB,MAClCC,EAAmBD,EAAuB,MAEhDE,GAA0B,WACnBR,GAAqBD,IAASM,aAAA,EAAAA,EAAUI,UAG7CC,uBAAsB,WACpBL,EAASI,QAAQE,OACnB,GACF,GAAG,CAACX,EAAkBD,IAEtB,IAAMa,EAAmBC,GACvB,WAAA,MAA2B,SAApBV,EAA6BW,EAAUC,gBAAaC,CAAS,GACpE,CAACb,IAGHc,EAAiEC,EAC/DpB,aAAA,EAAAA,EAAWW,QACXF,aAAA,EAAAA,EAAkBE,QAClB,CACEU,OAAQpB,EACRqB,UAAWR,EACXS,qBAAsBjB,IANVkB,EAAaL,EAArBM,OAAmCC,EAAiBP,EAA7BQ,WAUzBC,EAAqBxB,GAAYyB,EAAMC,SAASC,KAAK3B,GAC3D,OAAoB,QAAf4B,EAAAJ,aAAA,EAAAA,EAASK,YAAM,IAAAD,OAAA,EAAAA,EAAAE,QAMlBL,EAAAM,cAAA,MAAAC,OAAAC,OAAA,CACEC,MAAKF,OAAAC,OAAAD,OAAAC,OAAA,GAAOb,EAAce,QAAQ,CAAAC,WAAYvC,EAAO,UAAY,YAC7DyB,EAAkBa,QACtBE,IAAKhC,IAEJmB,GAAW3B,GACV4B,gBAACa,EAAsB,KACpBb,EAAMc,aAAaf,EAAOQ,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACtBT,aAAA,EAAAA,EAASgB,OAAK,CACjBC,UAAW5C,EACX6C,WAAW,EACX3C,QAAAA,EACAsC,IAAKlC,EACLwC,2BAA4B7C,QAlBpC8C,QAAQC,MAAM,0FAA2FrB,GAClG,KAuBX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vibe/core",
|
|
3
|
-
"version": "3.16.0-alpha-
|
|
3
|
+
"version": "3.16.0-alpha-5e4f6.0",
|
|
4
4
|
"description": "Official monday.com UI resources for application development in React.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
},
|
|
83
83
|
"dependencies": {
|
|
84
84
|
"@popperjs/core": "2.11.6",
|
|
85
|
-
"@vibe/icons": "1.3.1-alpha-
|
|
85
|
+
"@vibe/icons": "1.3.1-alpha-5e4f6.0",
|
|
86
86
|
"a11y-dialog": "^7.5.2",
|
|
87
87
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
88
88
|
"browserslist-config-monday": "1.0.6",
|
|
@@ -268,5 +268,5 @@
|
|
|
268
268
|
"browserslist": [
|
|
269
269
|
"extends browserslist-config-monday"
|
|
270
270
|
],
|
|
271
|
-
"gitHead": "
|
|
271
|
+
"gitHead": "47cd8cecb685444e58e062b5a14e36864515d679"
|
|
272
272
|
}
|