@vibe/core 3.75.1-alpha-2e797.0 → 3.75.1-alpha-1a030.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/components/MenuItemIcon/MenuItemIcon.d.ts +1 -1
- package/dist/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.types.d.ts +5 -0
- package/dist/mocked_classnames/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.d.ts +1 -1
- package/dist/mocked_classnames/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.types.d.ts +5 -0
- package/dist/mocked_classnames/src/components/Menu/MenuItem/MenuItem.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/MenuItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/MenuItem.module.scss.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.module.scss.js +1 -1
- package/dist/src/components/Menu/MenuItem/MenuItem.js +1 -1
- package/dist/src/components/Menu/MenuItem/MenuItem.js.map +1 -1
- package/dist/src/components/Menu/MenuItem/MenuItem.module.scss.js +1 -1
- package/dist/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.js +1 -1
- package/dist/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.js.map +1 -1
- package/dist/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.module.scss.js +1 -1
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { type MenuItemIconProps } from "./MenuItemIcon.types";
|
|
3
|
-
declare const MenuItemIcon: ({ icon, type, label, disabled, selected, backgroundColor, wrapperClassName }: MenuItemIconProps) => React.JSX.Element;
|
|
3
|
+
declare const MenuItemIcon: ({ icon, isRightIcon, type, label, disabled, selected, backgroundColor, wrapperClassName }: MenuItemIconProps) => React.JSX.Element;
|
|
4
4
|
export default MenuItemIcon;
|
package/dist/mocked_classnames/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { type MenuItemIconProps } from "./MenuItemIcon.types";
|
|
3
|
-
declare const MenuItemIcon: ({ icon, type, label, disabled, selected, backgroundColor, wrapperClassName }: MenuItemIconProps) => React.JSX.Element;
|
|
3
|
+
declare const MenuItemIcon: ({ icon, isRightIcon, type, label, disabled, selected, backgroundColor, wrapperClassName }: MenuItemIconProps) => React.JSX.Element;
|
|
4
4
|
export default MenuItemIcon;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as o}from"../../../../_virtual/_tslib.js";import e,{forwardRef as t,useRef as i,useMemo as
|
|
1
|
+
import{__rest as o}from"../../../../_virtual/_tslib.js";import e,{forwardRef as t,useRef as i,useMemo as n}from"react";import r from"../../Tooltip/Tooltip.js";import s from"../../../hooks/useIsOverflowing/useIsOverflowing.js";import{withStaticProps as l}from"../../../types/withStaticProps.js";import"../../../utils/colors-vars-map.js";import a from"../../Label/Label.js";import c from"./MenuItem.module.scss.js";import p from"./components/BaseMenuItem/BaseMenuItem.js";import m from"./components/MenuItemIcon/MenuItemIcon.js";import{TooltipPositions as d}from"../../Tooltip/TooltipConstants.js";import u from"../../../../components/icon/dist/Icon/Icon.js";var b=t((function(t,l){var d=t.className,u=t.iconWrapperClassName,b=t.title,f=void 0===b?"":b,g=t.label,I=void 0===g?"":g,h=t.icon,v=void 0===h?"":h,y=t.rightIcon,j=void 0===y?"":y,C=t.rightIconType,k=t.rightIconBackgroundColor,T=t.iconType,N=t.iconBackgroundColor,w=t.disabled,E=void 0!==w&&w,M=t.disableReason,B=t.selected,P=void 0!==B&&B,O=t.key,S=t.children,D=t.tooltipContent,R=t.tooltipPosition,W=void 0===R?"right":R,x=t.tooltipShowDelay,L=void 0===x?300:x,_=t.tooltipProps,V=t["aria-label"],q=o(t,["className","iconWrapperClassName","title","label","icon","rightIcon","rightIconType","rightIconBackgroundColor","rightIconWrapperClassName","iconType","iconBackgroundColor","disabled","disableReason","selected","key","children","tooltipContent","tooltipPosition","tooltipShowDelay","tooltipProps","aria-label"]),z=i(),A=null!=V?V:f,F=s({ref:z})||E||D,G=n((function(){return E?M:D||f}),[M,E,f,D]),H=n((function(){if(I)return"string"==typeof I?e.createElement(a,{kind:"line",text:I}):e.isValidElement(I)&&I.type===a?I:void 0}),[I]);return e.createElement(r,Object.assign({content:F?G:null,position:W,showDelay:L},_),e.createElement(p,Object.assign({key:O,ref:l,subMenu:S,className:d,disabled:E,selected:P},q),!!v&&e.createElement(m,{icon:v,type:T,label:A,disabled:E,selected:P,backgroundColor:N,wrapperClassName:u}),e.createElement("div",{ref:z,className:c.title},f),H,!!j&&!S&&!I&&e.createElement(m,{icon:j,type:C,disabled:E,selected:P,backgroundColor:k,isRightIcon:!0})))}));Object.assign(b,{isSelectable:!0,isMenuChild:!0});var f=l(b,{iconType:u.type,tooltipPositions:d});export{f as default};
|
|
2
2
|
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { type AriaAttributes, type ForwardedRef, type ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport Tooltip, { type TooltipProps } from \"../../../components/Tooltip/Tooltip\";\nimport { type IconType, Icon, type SubIcon } from \"@vibe/icon\";\nimport useIsOverflowing from \"../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { type VibeComponentProps, withStaticProps } from \"../../../types\";\nimport { type CloseMenuOption, type 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 { type TooltipPositions } from \"../../Tooltip/Tooltip.types\";\nimport { TooltipPositions as TooltipPositionsEnum } from \"../../Tooltip/TooltipConstants\";\nimport { type SubmenuPosition } from \"./MenuItem.types\";\nimport cx from \"classnames\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n /**\n * The title of the menu item.\n */\n title?: string;\n /**\n * The label displayed alongside the title.\n */\n label?: string | React.ReactElement<typeof Label>;\n /**\n * The icon displayed in the menu item.\n */\n icon?: SubIcon;\n /**\n * The type of icon.\n */\n iconType?: IconType;\n /**\n * The background color of the icon.\n */\n iconBackgroundColor?: string;\n /**\n * The right icon to be displayed.\n */\n rightIcon?: SubIcon;\n /**\n * The type of right icon.\n */\n rightIconType?: IconType;\n /**\n * The background color of the right icon.\n */\n rightIconBackgroundColor?: string;\n /**\n * The wrapper class name of the right icon.\n */\n rightIconWrapperClassName?: string;\n /**\n * If true, the menu item is disabled.\n */\n disabled?: boolean;\n /**\n * The reason for disabling the item, shown in a tooltip.\n */\n disableReason?: string;\n /**\n * If true, the menu item is selected.\n */\n selected?: boolean;\n /**\n * Callback fired when the menu item is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n /**\n * The active item index in the menu.\n */\n activeItemIndex?: number;\n /**\n * Callback to set the active item index.\n */\n setActiveItemIndex?: (index: number) => void;\n /**\n * The index of the menu item.\n */\n index?: number;\n /**\n * The key of the menu item.\n */\n key?: string;\n /**\n * If true, the parent menu is visible.\n */\n isParentMenuVisible?: boolean;\n /**\n * Callback to reset the open submenu index.\n */\n resetOpenSubMenuIndex?: () => void;\n /**\n * If true, a submenu is open.\n */\n hasOpenSubMenu?: boolean;\n /**\n * Callback to open or close a submenu by index.\n */\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n /**\n * If true, document event listeners are used for handling interactions.\n */\n useDocumentEventListeners?: boolean;\n /**\n * The tooltip content for the menu item.\n */\n tooltipContent?: string;\n /**\n * The position of the tooltip.\n */\n tooltipPosition?: TooltipPositions;\n /**\n * The delay in milliseconds before the tooltip shows.\n */\n tooltipShowDelay?: number;\n /**\n * Additional props for customizing the tooltip.\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * Callback fired when the mouse leaves the item.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse enters the item.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name applied to the icon wrapper.\n */\n iconWrapperClassName?: string;\n /**\n * If true, the menu item starts as selected.\n */\n isInitialSelectedState?: boolean;\n /**\n * If true, the menu scrolls to ensure visibility.\n */\n shouldScrollMenu?: boolean;\n /**\n * Function to close the menu with a given option.\n */\n closeMenu?: (option: CloseMenuOption) => void;\n /**\n * Reference to the menu container.\n */\n menuRef?: React.RefObject<HTMLElement>;\n /**\n * The submenu items, if applicable.\n */\n children?: MenuChild | MenuChild[];\n /**\n * If true, enables a split menu item interaction where the main area triggers an action,\n * while the icon button opens the submenu.\n */\n splitMenuItem?: boolean;\n /**\n * The label of the menu item for accessibility.\n */\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n /**\n * The position of a submenu relative to the menu item.\n */\n submenuPosition?: SubmenuPosition;\n /**\n * If true, automatically repositions the submenu when its content changes.\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 = forwardRef(\n (\n {\n className,\n iconWrapperClassName,\n title = \"\",\n label = \"\",\n icon = \"\",\n rightIcon = \"\",\n rightIconType,\n rightIconBackgroundColor,\n rightIconWrapperClassName,\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 console.log(\"icon\", icon);\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 {Boolean(rightIcon) && !children && !label && (\n <MenuItemIcon\n icon={rightIcon}\n type={rightIconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={rightIconBackgroundColor}\n wrapperClassName={cx(styles.rightIconWrapper, rightIconWrapperClassName)}\n />\n )}\n </BaseMenuItem>\n </Tooltip>\n );\n }\n);\n\nObject.assign(MenuItem, {\n isSelectable: true,\n isMenuChild: true\n});\n\ninterface MenuItemStaticProps {\n iconType: typeof Icon.type;\n tooltipPositions: typeof TooltipPositionsEnum;\n}\n\nexport default withStaticProps<MenuItemProps | MenuItemTitleComponentProps, MenuItemStaticProps>(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","_a$rightIcon","rightIcon","rightIconType","rightIconBackgroundColor","rightIconWrapperClassName","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","console","log","Tooltip","Object","assign","content","position","showDelay","BaseMenuItem","subMenu","MenuItemIcon","backgroundColor","wrapperClassName","styles","cx","rightIconWrapper","isSelectable","isMenuChild","withStaticProps","Icon","tooltipPositions","TooltipPositionsEnum"],"mappings":"2qBAgLA,IAAMA,EAAWC,GACf,SACEC,EAwBAC,GAxBA,IACEC,EAsB4CF,EAtB5CE,UACAC,EAqB4CH,EArB5CG,qBAAoBC,EAqBwBJ,EApB5CK,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAoBkCN,EAnB5CO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAmBkCR,EAlB5CS,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAkBmCV,EAjB5CW,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAgB4CZ,EAhB5CY,cACAC,EAe4Cb,EAf5Ca,yBACAC,EAc4Cd,EAd5Cc,0BACAC,EAa4Cf,EAb5Ce,SACAC,EAY4ChB,EAZ5CgB,oBAAmBC,EAYyBjB,EAX5CkB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAU4CnB,EAV5CmB,cAAaC,EAU+BpB,EAT5CqB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAQ4CtB,EAR5CsB,IACAC,EAO4CvB,EAP5CuB,SACAC,EAM4CxB,EAN5CwB,eAAcC,EAM8BzB,EAL5C0B,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAKmB3B,EAJ5C4B,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EAG4C7B,EAH5C6B,aACcC,EAE8B9B,EAF5C,cACG+B,EAAaC,EAAAhC,EAtBlB,0TA0BMiC,EAAWC,IAGXC,EAAYL,QAAAA,EAAczB,EAG1B+B,EAD+BC,EAAiB,CAAEpC,IAAKgC,KACHf,GAAYM,EAEhEc,EAAsBC,GAAQ,WAClC,OAAIrB,EAAiBC,EACjBK,GACGnB,CACR,GAAE,CAACc,EAAeD,EAAUb,EAAOmB,IAE9BgB,EAAcD,GAAQ,WAC1B,GAAKhC,EACL,MAAqB,iBAAVA,EACFkC,EAAAC,cAACC,EAAK,CAACC,KAAK,OAAOC,KAAMtC,IAE9BkC,EAAMK,eAAevC,IAAUA,EAAMwC,OAASJ,EACzCpC,OADT,CAGF,GAAG,CAACA,IAEJ,OADAyC,QAAQC,IAAI,OAAQxC,GAElBgC,EAACC,cAAAQ,EACCC,OAAAC,OAAA,CAAAC,QAASjB,EAAoBE,EAAsB,KACnDgB,SAAU5B,EACV6B,UAAW3B,GACPC,GAEJY,EAACC,cAAAc,EACCL,OAAAC,OAAA,CAAA9B,IAAKA,EACLrB,IAAKA,EACLwD,QAASlC,EACTrB,UAAWA,EACXgB,SAAUA,EACVG,SAAUA,GACNU,KAEKtB,GACPgC,gBAACiB,EAAY,CACXjD,KAAMA,EACNsC,KAAMhC,EACNR,MAAO4B,EACPjB,SAAUA,EACVG,SAAUA,EACVsC,gBAAiB3C,EACjB4C,iBAAkBzD,IAGtBsC,EAAKC,cAAA,MAAA,CAAAzC,IAAKgC,EAAU/B,UAAW2D,EAAOxD,OACnCA,GAEFmC,IACQ7B,IAAeY,IAAahB,GACnCkC,gBAACiB,EAAY,CACXjD,KAAME,EACNoC,KAAMnC,EACNM,SAAUA,EACVG,SAAUA,EACVsC,gBAAiB9C,EACjB+C,iBAAkBE,EAAGD,EAAOE,iBAAkBjD,MAM1D,IAGFqC,OAAOC,OAAOtD,EAAU,CACtBkE,cAAc,EACdC,aAAa,IAQf,IAAeC,EAAAA,EAAkFpE,EAAU,CACzGiB,SAAUoD,EAAKpB,KACfqB,iBAAkBC"}
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { type AriaAttributes, type ForwardedRef, type ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport Tooltip, { type TooltipProps } from \"../../../components/Tooltip/Tooltip\";\nimport { type IconType, Icon, type SubIcon } from \"@vibe/icon\";\nimport useIsOverflowing from \"../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { type VibeComponentProps, withStaticProps } from \"../../../types\";\nimport { type CloseMenuOption, type 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 { type TooltipPositions } from \"../../Tooltip/Tooltip.types\";\nimport { TooltipPositions as TooltipPositionsEnum } from \"../../Tooltip/TooltipConstants\";\nimport { type SubmenuPosition } from \"./MenuItem.types\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n /**\n * The title of the menu item.\n */\n title?: string;\n /**\n * The label displayed alongside the title.\n */\n label?: string | React.ReactElement<typeof Label>;\n /**\n * The icon displayed in the menu item.\n */\n icon?: SubIcon;\n /**\n * The type of icon.\n */\n iconType?: IconType;\n /**\n * The background color of the icon.\n */\n iconBackgroundColor?: string;\n /**\n * The right icon to be displayed.\n */\n rightIcon?: SubIcon;\n /**\n * The type of right icon.\n */\n rightIconType?: IconType;\n /**\n * The background color of the right icon.\n */\n rightIconBackgroundColor?: string;\n /**\n * The wrapper class name of the right icon.\n */\n rightIconWrapperClassName?: string;\n /**\n * If true, the menu item is disabled.\n */\n disabled?: boolean;\n /**\n * The reason for disabling the item, shown in a tooltip.\n */\n disableReason?: string;\n /**\n * If true, the menu item is selected.\n */\n selected?: boolean;\n /**\n * Callback fired when the menu item is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n /**\n * The active item index in the menu.\n */\n activeItemIndex?: number;\n /**\n * Callback to set the active item index.\n */\n setActiveItemIndex?: (index: number) => void;\n /**\n * The index of the menu item.\n */\n index?: number;\n /**\n * The key of the menu item.\n */\n key?: string;\n /**\n * If true, the parent menu is visible.\n */\n isParentMenuVisible?: boolean;\n /**\n * Callback to reset the open submenu index.\n */\n resetOpenSubMenuIndex?: () => void;\n /**\n * If true, a submenu is open.\n */\n hasOpenSubMenu?: boolean;\n /**\n * Callback to open or close a submenu by index.\n */\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n /**\n * If true, document event listeners are used for handling interactions.\n */\n useDocumentEventListeners?: boolean;\n /**\n * The tooltip content for the menu item.\n */\n tooltipContent?: string;\n /**\n * The position of the tooltip.\n */\n tooltipPosition?: TooltipPositions;\n /**\n * The delay in milliseconds before the tooltip shows.\n */\n tooltipShowDelay?: number;\n /**\n * Additional props for customizing the tooltip.\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * Callback fired when the mouse leaves the item.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse enters the item.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name applied to the icon wrapper.\n */\n iconWrapperClassName?: string;\n /**\n * If true, the menu item starts as selected.\n */\n isInitialSelectedState?: boolean;\n /**\n * If true, the menu scrolls to ensure visibility.\n */\n shouldScrollMenu?: boolean;\n /**\n * Function to close the menu with a given option.\n */\n closeMenu?: (option: CloseMenuOption) => void;\n /**\n * Reference to the menu container.\n */\n menuRef?: React.RefObject<HTMLElement>;\n /**\n * The submenu items, if applicable.\n */\n children?: MenuChild | MenuChild[];\n /**\n * If true, enables a split menu item interaction where the main area triggers an action,\n * while the icon button opens the submenu.\n */\n splitMenuItem?: boolean;\n /**\n * The label of the menu item for accessibility.\n */\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n /**\n * The position of a submenu relative to the menu item.\n */\n submenuPosition?: SubmenuPosition;\n /**\n * If true, automatically repositions the submenu when its content changes.\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 = forwardRef(\n (\n {\n className,\n iconWrapperClassName,\n title = \"\",\n label = \"\",\n icon = \"\",\n rightIcon = \"\",\n rightIconType,\n rightIconBackgroundColor,\n rightIconWrapperClassName,\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 {Boolean(rightIcon) && !children && !label && (\n <MenuItemIcon\n icon={rightIcon}\n type={rightIconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={rightIconBackgroundColor}\n isRightIcon={true}\n />\n )}\n </BaseMenuItem>\n </Tooltip>\n );\n }\n);\n\nObject.assign(MenuItem, {\n isSelectable: true,\n isMenuChild: true\n});\n\ninterface MenuItemStaticProps {\n iconType: typeof Icon.type;\n tooltipPositions: typeof TooltipPositionsEnum;\n}\n\nexport default withStaticProps<MenuItemProps | MenuItemTitleComponentProps, MenuItemStaticProps>(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","_a$rightIcon","rightIcon","rightIconType","rightIconBackgroundColor","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","isRightIcon","isSelectable","isMenuChild","withStaticProps","Icon","tooltipPositions","TooltipPositionsEnum"],"mappings":"ipBA+KA,IAAMA,EAAWC,GACf,SACEC,EAwBAC,GAxBA,IACEC,EAsB4CF,EAtB5CE,UACAC,EAqB4CH,EArB5CG,qBAAoBC,EAqBwBJ,EApB5CK,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAoBkCN,EAnB5CO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAmBkCR,EAlB5CS,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAkBmCV,EAjB5CW,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAgB4CZ,EAhB5CY,cACAC,EAe4Cb,EAf5Ca,yBAEAC,EAa4Cd,EAb5Cc,SACAC,EAY4Cf,EAZ5Ce,oBAAmBC,EAYyBhB,EAX5CiB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAU4ClB,EAV5CkB,cAAaC,EAU+BnB,EAT5CoB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAQ4CrB,EAR5CqB,IACAC,EAO4CtB,EAP5CsB,SACAC,EAM4CvB,EAN5CuB,eAAcC,EAM8BxB,EAL5CyB,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAKmB1B,EAJ5C2B,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EAG4C5B,EAH5C4B,aACcC,EAE8B7B,EAF5C,cACG8B,EAAaC,EAAA/B,EAtBlB,0TA0BMgC,EAAWC,IAGXC,EAAYL,QAAAA,EAAcxB,EAG1B8B,EAD+BC,EAAiB,CAAEnC,IAAK+B,KACHf,GAAYM,EAEhEc,EAAsBC,GAAQ,WAClC,OAAIrB,EAAiBC,EACjBK,GACGlB,CACR,GAAE,CAACa,EAAeD,EAAUZ,EAAOkB,IAE9BgB,EAAcD,GAAQ,WAC1B,GAAK/B,EACL,MAAqB,iBAAVA,EACFiC,EAAAC,cAACC,EAAK,CAACC,KAAK,OAAOC,KAAMrC,IAE9BiC,EAAMK,eAAetC,IAAUA,EAAMuC,OAASJ,EACzCnC,OADT,CAGF,GAAG,CAACA,IAEJ,OACEiC,EAACC,cAAAM,EACCC,OAAAC,OAAA,CAAAC,QAASf,EAAoBE,EAAsB,KACnDc,SAAU1B,EACV2B,UAAWzB,GACPC,GAEJY,EAACC,cAAAY,EACCL,OAAAC,OAAA,CAAA5B,IAAKA,EACLpB,IAAKA,EACLqD,QAAShC,EACTpB,UAAWA,EACXe,SAAUA,EACVG,SAAUA,GACNU,KAEKrB,GACP+B,gBAACe,EAAY,CACX9C,KAAMA,EACNqC,KAAMhC,EACNP,MAAO2B,EACPjB,SAAUA,EACVG,SAAUA,EACVoC,gBAAiBzC,EACjB0C,iBAAkBtD,IAGtBqC,EAAKC,cAAA,MAAA,CAAAxC,IAAK+B,EAAU9B,UAAWwD,EAAOrD,OACnCA,GAEFkC,IACQ5B,IAAeW,IAAaf,GACnCiC,EAAAC,cAACc,EACC,CAAA9C,KAAME,EACNmC,KAAMlC,EACNK,SAAUA,EACVG,SAAUA,EACVoC,gBAAiB3C,EACjB8C,aAAa,KAMzB,IAGFX,OAAOC,OAAOnD,EAAU,CACtB8D,cAAc,EACdC,aAAa,IAQf,IAAeC,EAAAA,EAAkFhE,EAAU,CACzGgB,SAAUiD,EAAKjB,KACfkB,iBAAkBC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={title:"title"
|
|
1
|
+
var e={title:"title"};!function(e){const t="s_id-b06386a2bb6c_3_75_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".title {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-grow: 1;\n padding-block: 1px;\n}");export{e as default};
|
|
2
2
|
//# sourceMappingURL=MenuItem.module.scss.js.map
|
package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"react";import r from"../../../../Flex/Flex.js";import t from"classnames";import
|
|
1
|
+
import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"react";import r from"../../../../Flex/Flex.js";import t from"classnames";import n from"./MenuItemIcon.module.scss.js";import s from"../../../../../../components/icon/dist/Icon/Icon.js";var c=function(c){var i=c.icon,a=c.isRightIcon,l=void 0!==a&&a,m=c.type,p=c.disabled,d=c.selected,f=c.backgroundColor,u=c.wrapperClassName;return o.createElement(r,{justify:"center",className:t(n.iconWrapper,e(e(e(e({},n.leftIcon,!l),n.rightIcon,l),n.disabled,p),n.withBackgroundColor,!!f),u),style:Object.assign({},f&&{backgroundColor:f})},o.createElement(s,{iconType:m||("function"==typeof i?"svg":"font"),icon:i,className:t(n.icon,e({},n.selected,!p&&d)),ignoreFocusStyle:!0,iconSize:18}))};export{c as default};
|
|
2
2
|
//# sourceMappingURL=MenuItemIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItemIcon.js","sources":["../../../../../../../../src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@vibe/icon\";\nimport Flex from \"../../../../Flex/Flex\";\nimport cx from \"classnames\";\nimport styles from \"./MenuItemIcon.module.scss\";\nimport { type MenuItemIconProps } from \"./MenuItemIcon.types\";\n\nconst MenuItemIcon = ({\n icon,\n type,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n label,\n disabled,\n selected,\n backgroundColor,\n wrapperClassName\n}: MenuItemIconProps) => (\n <Flex\n justify=\"center\"\n className={cx(\n styles.iconWrapper,\n {\n [styles.disabled]: disabled,\n [styles.withBackgroundColor]: !!backgroundColor\n },\n wrapperClassName\n )}\n style={{ ...(backgroundColor && { backgroundColor }) }}\n >\n <Icon\n iconType={type || (typeof icon === \"function\" ? \"svg\" : \"font\")}\n icon={icon}\n className={cx(styles.icon, { [styles.selected]: !disabled && selected })}\n ignoreFocusStyle\n iconSize={18}\n />\n </Flex>\n);\n\nexport default MenuItemIcon;\n"],"names":["MenuItemIcon","_ref","icon","type","disabled","selected","backgroundColor","wrapperClassName","React","createElement","Flex","justify","className","cx","styles","iconWrapper","_defineProperty","withBackgroundColor","style","Object","assign","Icon","iconType","ignoreFocusStyle","iconSize"],"mappings":"gSAOA,IAAMA,EAAe,SAAHC,GAAA,IAChBC,EAAID,EAAJC,
|
|
1
|
+
{"version":3,"file":"MenuItemIcon.js","sources":["../../../../../../../../src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@vibe/icon\";\nimport Flex from \"../../../../Flex/Flex\";\nimport cx from \"classnames\";\nimport styles from \"./MenuItemIcon.module.scss\";\nimport { type MenuItemIconProps } from \"./MenuItemIcon.types\";\n\nconst MenuItemIcon = ({\n icon,\n isRightIcon = false,\n type,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n label,\n disabled,\n selected,\n backgroundColor,\n wrapperClassName\n}: MenuItemIconProps) => (\n <Flex\n justify=\"center\"\n className={cx(\n styles.iconWrapper,\n {\n [styles.leftIcon]: !isRightIcon,\n [styles.rightIcon]: isRightIcon,\n [styles.disabled]: disabled,\n [styles.withBackgroundColor]: !!backgroundColor\n },\n wrapperClassName\n )}\n style={{ ...(backgroundColor && { backgroundColor }) }}\n >\n <Icon\n iconType={type || (typeof icon === \"function\" ? \"svg\" : \"font\")}\n icon={icon}\n className={cx(styles.icon, { [styles.selected]: !disabled && selected })}\n ignoreFocusStyle\n iconSize={18}\n />\n </Flex>\n);\n\nexport default MenuItemIcon;\n"],"names":["MenuItemIcon","_ref","icon","_ref$isRightIcon","isRightIcon","type","disabled","selected","backgroundColor","wrapperClassName","React","createElement","Flex","justify","className","cx","styles","iconWrapper","_defineProperty","leftIcon","rightIcon","withBackgroundColor","style","Object","assign","Icon","iconType","ignoreFocusStyle","iconSize"],"mappings":"gSAOA,IAAMA,EAAe,SAAHC,GAAA,IAChBC,EAAID,EAAJC,KAAIC,EAAAF,EACJG,YAAAA,OAAc,IAAHD,GAAQA,EACnBE,EAAIJ,EAAJI,KAGAC,EAAQL,EAARK,SACAC,EAAQN,EAARM,SACAC,EAAeP,EAAfO,gBACAC,EAAgBR,EAAhBQ,iBAAgB,OAEhBC,EAACC,cAAAC,EACC,CAAAC,QAAQ,SACRC,UAAWC,EACTC,EAAOC,YAAWC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAEfF,EAAOG,UAAYf,GACnBY,EAAOI,UAAYhB,GACnBY,EAAOV,SAAWA,GAClBU,EAAOK,sBAAwBb,GAElCC,GAEFa,MAAKC,OAAAC,OAAA,CAAA,EAAQhB,GAAmB,CAAEA,gBAAAA,KAElCE,EAACC,cAAAc,EACC,CAAAC,SAAUrB,IAAyB,mBAATH,EAAsB,MAAQ,QACxDA,KAAMA,EACNY,UAAWC,EAAGC,EAAOd,KAAIgB,EAAA,GAAKF,EAAOT,UAAYD,GAAYC,IAC7DoB,kBAAgB,EAChBC,SAAU,KAEP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var n={iconWrapper:"iconWrapper",leftIcon:"leftIcon",rightIcon:"rightIcon",withBackgroundColor:"withBackgroundColor",disabled:"disabled",icon:"icon",selected:"selected"};!function(n){const o="s_id-916c28f3e347_3_75_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}(".iconWrapper.leftIcon {\n margin-right: var(--spacing-small);\n}\n.iconWrapper.rightIcon {\n margin-left: var(--spacing-small);\n}\n.iconWrapper.withBackgroundColor {\n border-radius: var(--spacing-xs);\n}\n.iconWrapper.withBackgroundColor.disabled {\n opacity: 0.4;\n}\n.iconWrapper.withBackgroundColor .icon {\n color: var(--text-color-on-primary);\n}\n.iconWrapper.disabled .icon {\n cursor: not-allowed;\n color: var(--disabled-text-color);\n}\n.iconWrapper .icon {\n color: var(--icon-color);\n}\n.iconWrapper .icon.selected {\n color: var(--primary-color);\n}");export{n as default};
|
|
2
2
|
//# sourceMappingURL=MenuItemIcon.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as o}from"../../../../_virtual/_tslib.js";import e,{forwardRef as t,useRef as i,useMemo as
|
|
1
|
+
import{__rest as o}from"../../../../_virtual/_tslib.js";import e,{forwardRef as t,useRef as i,useMemo as n}from"react";import r from"../../Tooltip/Tooltip.js";import s from"../../../hooks/useIsOverflowing/useIsOverflowing.js";import{withStaticProps as l}from"../../../types/withStaticProps.js";import"../../../utils/colors-vars-map.js";import a from"../../Label/Label.js";import c from"./MenuItem.module.scss.js";import p from"./components/BaseMenuItem/BaseMenuItem.js";import m from"./components/MenuItemIcon/MenuItemIcon.js";import{TooltipPositions as d}from"../../Tooltip/TooltipConstants.js";import u from"../../../../components/icon/dist/Icon/Icon.js";var b=t((function(t,l){var d=t.className,u=t.iconWrapperClassName,b=t.title,f=void 0===b?"":b,g=t.label,I=void 0===g?"":g,h=t.icon,v=void 0===h?"":h,y=t.rightIcon,j=void 0===y?"":y,C=t.rightIconType,k=t.rightIconBackgroundColor,T=t.iconType,N=t.iconBackgroundColor,w=t.disabled,E=void 0!==w&&w,M=t.disableReason,B=t.selected,P=void 0!==B&&B,O=t.key,S=t.children,D=t.tooltipContent,R=t.tooltipPosition,W=void 0===R?"right":R,x=t.tooltipShowDelay,L=void 0===x?300:x,_=t.tooltipProps,V=t["aria-label"],q=o(t,["className","iconWrapperClassName","title","label","icon","rightIcon","rightIconType","rightIconBackgroundColor","rightIconWrapperClassName","iconType","iconBackgroundColor","disabled","disableReason","selected","key","children","tooltipContent","tooltipPosition","tooltipShowDelay","tooltipProps","aria-label"]),z=i(),A=null!=V?V:f,F=s({ref:z})||E||D,G=n((function(){return E?M:D||f}),[M,E,f,D]),H=n((function(){if(I)return"string"==typeof I?e.createElement(a,{kind:"line",text:I}):e.isValidElement(I)&&I.type===a?I:void 0}),[I]);return e.createElement(r,Object.assign({content:F?G:null,position:W,showDelay:L},_),e.createElement(p,Object.assign({key:O,ref:l,subMenu:S,className:d,disabled:E,selected:P},q),!!v&&e.createElement(m,{icon:v,type:T,label:A,disabled:E,selected:P,backgroundColor:N,wrapperClassName:u}),e.createElement("div",{ref:z,className:c.title},f),H,!!j&&!S&&!I&&e.createElement(m,{icon:j,type:C,disabled:E,selected:P,backgroundColor:k,isRightIcon:!0})))}));Object.assign(b,{isSelectable:!0,isMenuChild:!0});var f=l(b,{iconType:u.type,tooltipPositions:d});export{f as default};
|
|
2
2
|
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { type AriaAttributes, type ForwardedRef, type ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport Tooltip, { type TooltipProps } from \"../../../components/Tooltip/Tooltip\";\nimport { type IconType, Icon, type SubIcon } from \"@vibe/icon\";\nimport useIsOverflowing from \"../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { type VibeComponentProps, withStaticProps } from \"../../../types\";\nimport { type CloseMenuOption, type 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 { type TooltipPositions } from \"../../Tooltip/Tooltip.types\";\nimport { TooltipPositions as TooltipPositionsEnum } from \"../../Tooltip/TooltipConstants\";\nimport { type SubmenuPosition } from \"./MenuItem.types\";\nimport cx from \"classnames\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n /**\n * The title of the menu item.\n */\n title?: string;\n /**\n * The label displayed alongside the title.\n */\n label?: string | React.ReactElement<typeof Label>;\n /**\n * The icon displayed in the menu item.\n */\n icon?: SubIcon;\n /**\n * The type of icon.\n */\n iconType?: IconType;\n /**\n * The background color of the icon.\n */\n iconBackgroundColor?: string;\n /**\n * The right icon to be displayed.\n */\n rightIcon?: SubIcon;\n /**\n * The type of right icon.\n */\n rightIconType?: IconType;\n /**\n * The background color of the right icon.\n */\n rightIconBackgroundColor?: string;\n /**\n * The wrapper class name of the right icon.\n */\n rightIconWrapperClassName?: string;\n /**\n * If true, the menu item is disabled.\n */\n disabled?: boolean;\n /**\n * The reason for disabling the item, shown in a tooltip.\n */\n disableReason?: string;\n /**\n * If true, the menu item is selected.\n */\n selected?: boolean;\n /**\n * Callback fired when the menu item is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n /**\n * The active item index in the menu.\n */\n activeItemIndex?: number;\n /**\n * Callback to set the active item index.\n */\n setActiveItemIndex?: (index: number) => void;\n /**\n * The index of the menu item.\n */\n index?: number;\n /**\n * The key of the menu item.\n */\n key?: string;\n /**\n * If true, the parent menu is visible.\n */\n isParentMenuVisible?: boolean;\n /**\n * Callback to reset the open submenu index.\n */\n resetOpenSubMenuIndex?: () => void;\n /**\n * If true, a submenu is open.\n */\n hasOpenSubMenu?: boolean;\n /**\n * Callback to open or close a submenu by index.\n */\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n /**\n * If true, document event listeners are used for handling interactions.\n */\n useDocumentEventListeners?: boolean;\n /**\n * The tooltip content for the menu item.\n */\n tooltipContent?: string;\n /**\n * The position of the tooltip.\n */\n tooltipPosition?: TooltipPositions;\n /**\n * The delay in milliseconds before the tooltip shows.\n */\n tooltipShowDelay?: number;\n /**\n * Additional props for customizing the tooltip.\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * Callback fired when the mouse leaves the item.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse enters the item.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name applied to the icon wrapper.\n */\n iconWrapperClassName?: string;\n /**\n * If true, the menu item starts as selected.\n */\n isInitialSelectedState?: boolean;\n /**\n * If true, the menu scrolls to ensure visibility.\n */\n shouldScrollMenu?: boolean;\n /**\n * Function to close the menu with a given option.\n */\n closeMenu?: (option: CloseMenuOption) => void;\n /**\n * Reference to the menu container.\n */\n menuRef?: React.RefObject<HTMLElement>;\n /**\n * The submenu items, if applicable.\n */\n children?: MenuChild | MenuChild[];\n /**\n * If true, enables a split menu item interaction where the main area triggers an action,\n * while the icon button opens the submenu.\n */\n splitMenuItem?: boolean;\n /**\n * The label of the menu item for accessibility.\n */\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n /**\n * The position of a submenu relative to the menu item.\n */\n submenuPosition?: SubmenuPosition;\n /**\n * If true, automatically repositions the submenu when its content changes.\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 = forwardRef(\n (\n {\n className,\n iconWrapperClassName,\n title = \"\",\n label = \"\",\n icon = \"\",\n rightIcon = \"\",\n rightIconType,\n rightIconBackgroundColor,\n rightIconWrapperClassName,\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 console.log(\"icon\", icon);\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 {Boolean(rightIcon) && !children && !label && (\n <MenuItemIcon\n icon={rightIcon}\n type={rightIconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={rightIconBackgroundColor}\n wrapperClassName={cx(styles.rightIconWrapper, rightIconWrapperClassName)}\n />\n )}\n </BaseMenuItem>\n </Tooltip>\n );\n }\n);\n\nObject.assign(MenuItem, {\n isSelectable: true,\n isMenuChild: true\n});\n\ninterface MenuItemStaticProps {\n iconType: typeof Icon.type;\n tooltipPositions: typeof TooltipPositionsEnum;\n}\n\nexport default withStaticProps<MenuItemProps | MenuItemTitleComponentProps, MenuItemStaticProps>(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","_a$rightIcon","rightIcon","rightIconType","rightIconBackgroundColor","rightIconWrapperClassName","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","console","log","Tooltip","Object","assign","content","position","showDelay","BaseMenuItem","subMenu","MenuItemIcon","backgroundColor","wrapperClassName","styles","cx","rightIconWrapper","isSelectable","isMenuChild","withStaticProps","Icon","tooltipPositions","TooltipPositionsEnum"],"mappings":"2qBAgLA,IAAMA,EAAWC,GACf,SACEC,EAwBAC,GAxBA,IACEC,EAsB4CF,EAtB5CE,UACAC,EAqB4CH,EArB5CG,qBAAoBC,EAqBwBJ,EApB5CK,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAoBkCN,EAnB5CO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAmBkCR,EAlB5CS,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAkBmCV,EAjB5CW,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAgB4CZ,EAhB5CY,cACAC,EAe4Cb,EAf5Ca,yBACAC,EAc4Cd,EAd5Cc,0BACAC,EAa4Cf,EAb5Ce,SACAC,EAY4ChB,EAZ5CgB,oBAAmBC,EAYyBjB,EAX5CkB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAU4CnB,EAV5CmB,cAAaC,EAU+BpB,EAT5CqB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAQ4CtB,EAR5CsB,IACAC,EAO4CvB,EAP5CuB,SACAC,EAM4CxB,EAN5CwB,eAAcC,EAM8BzB,EAL5C0B,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAKmB3B,EAJ5C4B,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EAG4C7B,EAH5C6B,aACcC,EAE8B9B,EAF5C,cACG+B,EAAaC,EAAAhC,EAtBlB,0TA0BMiC,EAAWC,IAGXC,EAAYL,QAAAA,EAAczB,EAG1B+B,EAD+BC,EAAiB,CAAEpC,IAAKgC,KACHf,GAAYM,EAEhEc,EAAsBC,GAAQ,WAClC,OAAIrB,EAAiBC,EACjBK,GACGnB,CACR,GAAE,CAACc,EAAeD,EAAUb,EAAOmB,IAE9BgB,EAAcD,GAAQ,WAC1B,GAAKhC,EACL,MAAqB,iBAAVA,EACFkC,EAAAC,cAACC,EAAK,CAACC,KAAK,OAAOC,KAAMtC,IAE9BkC,EAAMK,eAAevC,IAAUA,EAAMwC,OAASJ,EACzCpC,OADT,CAGF,GAAG,CAACA,IAEJ,OADAyC,QAAQC,IAAI,OAAQxC,GAElBgC,EAACC,cAAAQ,EACCC,OAAAC,OAAA,CAAAC,QAASjB,EAAoBE,EAAsB,KACnDgB,SAAU5B,EACV6B,UAAW3B,GACPC,GAEJY,EAACC,cAAAc,EACCL,OAAAC,OAAA,CAAA9B,IAAKA,EACLrB,IAAKA,EACLwD,QAASlC,EACTrB,UAAWA,EACXgB,SAAUA,EACVG,SAAUA,GACNU,KAEKtB,GACPgC,gBAACiB,EAAY,CACXjD,KAAMA,EACNsC,KAAMhC,EACNR,MAAO4B,EACPjB,SAAUA,EACVG,SAAUA,EACVsC,gBAAiB3C,EACjB4C,iBAAkBzD,IAGtBsC,EAAKC,cAAA,MAAA,CAAAzC,IAAKgC,EAAU/B,UAAW2D,EAAOxD,OACnCA,GAEFmC,IACQ7B,IAAeY,IAAahB,GACnCkC,gBAACiB,EAAY,CACXjD,KAAME,EACNoC,KAAMnC,EACNM,SAAUA,EACVG,SAAUA,EACVsC,gBAAiB9C,EACjB+C,iBAAkBE,EAAGD,EAAOE,iBAAkBjD,MAM1D,IAGFqC,OAAOC,OAAOtD,EAAU,CACtBkE,cAAc,EACdC,aAAa,IAQf,IAAeC,EAAAA,EAAkFpE,EAAU,CACzGiB,SAAUoD,EAAKpB,KACfqB,iBAAkBC"}
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { type AriaAttributes, type ForwardedRef, type ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport Tooltip, { type TooltipProps } from \"../../../components/Tooltip/Tooltip\";\nimport { type IconType, Icon, type SubIcon } from \"@vibe/icon\";\nimport useIsOverflowing from \"../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { type VibeComponentProps, withStaticProps } from \"../../../types\";\nimport { type CloseMenuOption, type 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 { type TooltipPositions } from \"../../Tooltip/Tooltip.types\";\nimport { TooltipPositions as TooltipPositionsEnum } from \"../../Tooltip/TooltipConstants\";\nimport { type SubmenuPosition } from \"./MenuItem.types\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n /**\n * The title of the menu item.\n */\n title?: string;\n /**\n * The label displayed alongside the title.\n */\n label?: string | React.ReactElement<typeof Label>;\n /**\n * The icon displayed in the menu item.\n */\n icon?: SubIcon;\n /**\n * The type of icon.\n */\n iconType?: IconType;\n /**\n * The background color of the icon.\n */\n iconBackgroundColor?: string;\n /**\n * The right icon to be displayed.\n */\n rightIcon?: SubIcon;\n /**\n * The type of right icon.\n */\n rightIconType?: IconType;\n /**\n * The background color of the right icon.\n */\n rightIconBackgroundColor?: string;\n /**\n * The wrapper class name of the right icon.\n */\n rightIconWrapperClassName?: string;\n /**\n * If true, the menu item is disabled.\n */\n disabled?: boolean;\n /**\n * The reason for disabling the item, shown in a tooltip.\n */\n disableReason?: string;\n /**\n * If true, the menu item is selected.\n */\n selected?: boolean;\n /**\n * Callback fired when the menu item is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n /**\n * The active item index in the menu.\n */\n activeItemIndex?: number;\n /**\n * Callback to set the active item index.\n */\n setActiveItemIndex?: (index: number) => void;\n /**\n * The index of the menu item.\n */\n index?: number;\n /**\n * The key of the menu item.\n */\n key?: string;\n /**\n * If true, the parent menu is visible.\n */\n isParentMenuVisible?: boolean;\n /**\n * Callback to reset the open submenu index.\n */\n resetOpenSubMenuIndex?: () => void;\n /**\n * If true, a submenu is open.\n */\n hasOpenSubMenu?: boolean;\n /**\n * Callback to open or close a submenu by index.\n */\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n /**\n * If true, document event listeners are used for handling interactions.\n */\n useDocumentEventListeners?: boolean;\n /**\n * The tooltip content for the menu item.\n */\n tooltipContent?: string;\n /**\n * The position of the tooltip.\n */\n tooltipPosition?: TooltipPositions;\n /**\n * The delay in milliseconds before the tooltip shows.\n */\n tooltipShowDelay?: number;\n /**\n * Additional props for customizing the tooltip.\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * Callback fired when the mouse leaves the item.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse enters the item.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name applied to the icon wrapper.\n */\n iconWrapperClassName?: string;\n /**\n * If true, the menu item starts as selected.\n */\n isInitialSelectedState?: boolean;\n /**\n * If true, the menu scrolls to ensure visibility.\n */\n shouldScrollMenu?: boolean;\n /**\n * Function to close the menu with a given option.\n */\n closeMenu?: (option: CloseMenuOption) => void;\n /**\n * Reference to the menu container.\n */\n menuRef?: React.RefObject<HTMLElement>;\n /**\n * The submenu items, if applicable.\n */\n children?: MenuChild | MenuChild[];\n /**\n * If true, enables a split menu item interaction where the main area triggers an action,\n * while the icon button opens the submenu.\n */\n splitMenuItem?: boolean;\n /**\n * The label of the menu item for accessibility.\n */\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n /**\n * The position of a submenu relative to the menu item.\n */\n submenuPosition?: SubmenuPosition;\n /**\n * If true, automatically repositions the submenu when its content changes.\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 = forwardRef(\n (\n {\n className,\n iconWrapperClassName,\n title = \"\",\n label = \"\",\n icon = \"\",\n rightIcon = \"\",\n rightIconType,\n rightIconBackgroundColor,\n rightIconWrapperClassName,\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 {Boolean(rightIcon) && !children && !label && (\n <MenuItemIcon\n icon={rightIcon}\n type={rightIconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={rightIconBackgroundColor}\n isRightIcon={true}\n />\n )}\n </BaseMenuItem>\n </Tooltip>\n );\n }\n);\n\nObject.assign(MenuItem, {\n isSelectable: true,\n isMenuChild: true\n});\n\ninterface MenuItemStaticProps {\n iconType: typeof Icon.type;\n tooltipPositions: typeof TooltipPositionsEnum;\n}\n\nexport default withStaticProps<MenuItemProps | MenuItemTitleComponentProps, MenuItemStaticProps>(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","_a$rightIcon","rightIcon","rightIconType","rightIconBackgroundColor","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","isRightIcon","isSelectable","isMenuChild","withStaticProps","Icon","tooltipPositions","TooltipPositionsEnum"],"mappings":"ipBA+KA,IAAMA,EAAWC,GACf,SACEC,EAwBAC,GAxBA,IACEC,EAsB4CF,EAtB5CE,UACAC,EAqB4CH,EArB5CG,qBAAoBC,EAqBwBJ,EApB5CK,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAoBkCN,EAnB5CO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAmBkCR,EAlB5CS,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAkBmCV,EAjB5CW,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAgB4CZ,EAhB5CY,cACAC,EAe4Cb,EAf5Ca,yBAEAC,EAa4Cd,EAb5Cc,SACAC,EAY4Cf,EAZ5Ce,oBAAmBC,EAYyBhB,EAX5CiB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAU4ClB,EAV5CkB,cAAaC,EAU+BnB,EAT5CoB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAQ4CrB,EAR5CqB,IACAC,EAO4CtB,EAP5CsB,SACAC,EAM4CvB,EAN5CuB,eAAcC,EAM8BxB,EAL5CyB,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAKmB1B,EAJ5C2B,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EAG4C5B,EAH5C4B,aACcC,EAE8B7B,EAF5C,cACG8B,EAAaC,EAAA/B,EAtBlB,0TA0BMgC,EAAWC,IAGXC,EAAYL,QAAAA,EAAcxB,EAG1B8B,EAD+BC,EAAiB,CAAEnC,IAAK+B,KACHf,GAAYM,EAEhEc,EAAsBC,GAAQ,WAClC,OAAIrB,EAAiBC,EACjBK,GACGlB,CACR,GAAE,CAACa,EAAeD,EAAUZ,EAAOkB,IAE9BgB,EAAcD,GAAQ,WAC1B,GAAK/B,EACL,MAAqB,iBAAVA,EACFiC,EAAAC,cAACC,EAAK,CAACC,KAAK,OAAOC,KAAMrC,IAE9BiC,EAAMK,eAAetC,IAAUA,EAAMuC,OAASJ,EACzCnC,OADT,CAGF,GAAG,CAACA,IAEJ,OACEiC,EAACC,cAAAM,EACCC,OAAAC,OAAA,CAAAC,QAASf,EAAoBE,EAAsB,KACnDc,SAAU1B,EACV2B,UAAWzB,GACPC,GAEJY,EAACC,cAAAY,EACCL,OAAAC,OAAA,CAAA5B,IAAKA,EACLpB,IAAKA,EACLqD,QAAShC,EACTpB,UAAWA,EACXe,SAAUA,EACVG,SAAUA,GACNU,KAEKrB,GACP+B,gBAACe,EAAY,CACX9C,KAAMA,EACNqC,KAAMhC,EACNP,MAAO2B,EACPjB,SAAUA,EACVG,SAAUA,EACVoC,gBAAiBzC,EACjB0C,iBAAkBtD,IAGtBqC,EAAKC,cAAA,MAAA,CAAAxC,IAAK+B,EAAU9B,UAAWwD,EAAOrD,OACnCA,GAEFkC,IACQ5B,IAAeW,IAAaf,GACnCiC,EAAAC,cAACc,EACC,CAAA9C,KAAME,EACNmC,KAAMlC,EACNK,SAAUA,EACVG,SAAUA,EACVoC,gBAAiB3C,EACjB8C,aAAa,KAMzB,IAGFX,OAAOC,OAAOnD,EAAU,CACtB8D,cAAc,EACdC,aAAa,IAQf,IAAeC,EAAAA,EAAkFhE,EAAU,CACzGgB,SAAUiD,EAAKjB,KACfkB,iBAAkBC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={title:"title_82623e36f0"
|
|
1
|
+
var e={title:"title_82623e36f0"};!function(e){const t="s_id-b06386a2bb6c_3_75_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".title_82623e36f0 {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-grow: 1;\n padding-block: 1px;\n}");export{e as default};
|
|
2
2
|
//# sourceMappingURL=MenuItem.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"react";import r from"../../../../Flex/Flex.js";import t from"classnames";import
|
|
1
|
+
import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"react";import r from"../../../../Flex/Flex.js";import t from"classnames";import n from"./MenuItemIcon.module.scss.js";import s from"../../../../../../components/icon/dist/Icon/Icon.js";var c=function(c){var i=c.icon,a=c.isRightIcon,l=void 0!==a&&a,m=c.type,p=c.disabled,d=c.selected,f=c.backgroundColor,u=c.wrapperClassName;return o.createElement(r,{justify:"center",className:t(n.iconWrapper,e(e(e(e({},n.leftIcon,!l),n.rightIcon,l),n.disabled,p),n.withBackgroundColor,!!f),u),style:Object.assign({},f&&{backgroundColor:f})},o.createElement(s,{iconType:m||("function"==typeof i?"svg":"font"),icon:i,className:t(n.icon,e({},n.selected,!p&&d)),ignoreFocusStyle:!0,iconSize:18}))};export{c as default};
|
|
2
2
|
//# sourceMappingURL=MenuItemIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItemIcon.js","sources":["../../../../../../../src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@vibe/icon\";\nimport Flex from \"../../../../Flex/Flex\";\nimport cx from \"classnames\";\nimport styles from \"./MenuItemIcon.module.scss\";\nimport { type MenuItemIconProps } from \"./MenuItemIcon.types\";\n\nconst MenuItemIcon = ({\n icon,\n type,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n label,\n disabled,\n selected,\n backgroundColor,\n wrapperClassName\n}: MenuItemIconProps) => (\n <Flex\n justify=\"center\"\n className={cx(\n styles.iconWrapper,\n {\n [styles.disabled]: disabled,\n [styles.withBackgroundColor]: !!backgroundColor\n },\n wrapperClassName\n )}\n style={{ ...(backgroundColor && { backgroundColor }) }}\n >\n <Icon\n iconType={type || (typeof icon === \"function\" ? \"svg\" : \"font\")}\n icon={icon}\n className={cx(styles.icon, { [styles.selected]: !disabled && selected })}\n ignoreFocusStyle\n iconSize={18}\n />\n </Flex>\n);\n\nexport default MenuItemIcon;\n"],"names":["MenuItemIcon","_ref","icon","type","disabled","selected","backgroundColor","wrapperClassName","React","createElement","Flex","justify","className","cx","styles","iconWrapper","_defineProperty","withBackgroundColor","style","Object","assign","Icon","iconType","ignoreFocusStyle","iconSize"],"mappings":"gSAOA,IAAMA,EAAe,SAAHC,GAAA,IAChBC,EAAID,EAAJC,
|
|
1
|
+
{"version":3,"file":"MenuItemIcon.js","sources":["../../../../../../../src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@vibe/icon\";\nimport Flex from \"../../../../Flex/Flex\";\nimport cx from \"classnames\";\nimport styles from \"./MenuItemIcon.module.scss\";\nimport { type MenuItemIconProps } from \"./MenuItemIcon.types\";\n\nconst MenuItemIcon = ({\n icon,\n isRightIcon = false,\n type,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n label,\n disabled,\n selected,\n backgroundColor,\n wrapperClassName\n}: MenuItemIconProps) => (\n <Flex\n justify=\"center\"\n className={cx(\n styles.iconWrapper,\n {\n [styles.leftIcon]: !isRightIcon,\n [styles.rightIcon]: isRightIcon,\n [styles.disabled]: disabled,\n [styles.withBackgroundColor]: !!backgroundColor\n },\n wrapperClassName\n )}\n style={{ ...(backgroundColor && { backgroundColor }) }}\n >\n <Icon\n iconType={type || (typeof icon === \"function\" ? \"svg\" : \"font\")}\n icon={icon}\n className={cx(styles.icon, { [styles.selected]: !disabled && selected })}\n ignoreFocusStyle\n iconSize={18}\n />\n </Flex>\n);\n\nexport default MenuItemIcon;\n"],"names":["MenuItemIcon","_ref","icon","_ref$isRightIcon","isRightIcon","type","disabled","selected","backgroundColor","wrapperClassName","React","createElement","Flex","justify","className","cx","styles","iconWrapper","_defineProperty","leftIcon","rightIcon","withBackgroundColor","style","Object","assign","Icon","iconType","ignoreFocusStyle","iconSize"],"mappings":"gSAOA,IAAMA,EAAe,SAAHC,GAAA,IAChBC,EAAID,EAAJC,KAAIC,EAAAF,EACJG,YAAAA,OAAc,IAAHD,GAAQA,EACnBE,EAAIJ,EAAJI,KAGAC,EAAQL,EAARK,SACAC,EAAQN,EAARM,SACAC,EAAeP,EAAfO,gBACAC,EAAgBR,EAAhBQ,iBAAgB,OAEhBC,EAACC,cAAAC,EACC,CAAAC,QAAQ,SACRC,UAAWC,EACTC,EAAOC,YAAWC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAEfF,EAAOG,UAAYf,GACnBY,EAAOI,UAAYhB,GACnBY,EAAOV,SAAWA,GAClBU,EAAOK,sBAAwBb,GAElCC,GAEFa,MAAKC,OAAAC,OAAA,CAAA,EAAQhB,GAAmB,CAAEA,gBAAAA,KAElCE,EAACC,cAAAc,EACC,CAAAC,SAAUrB,IAAyB,mBAATH,EAAsB,MAAQ,QACxDA,KAAMA,EACNY,UAAWC,EAAGC,EAAOd,KAAIgB,EAAA,GAAKF,EAAOT,UAAYD,GAAYC,IAC7DoB,kBAAgB,EAChBC,SAAU,KAEP"}
|
package/dist/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.module.scss.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={iconWrapper:"
|
|
1
|
+
var e={iconWrapper:"iconWrapper_299ec08a59",leftIcon:"leftIcon_6a538e8dd7",rightIcon:"rightIcon_363ebf0c30",withBackgroundColor:"withBackgroundColor_512535b6f1",disabled:"disabled_5aea359cbd",icon:"icon_f6b3d5be19",selected:"selected_347f78dba7"};!function(e){const n="s_id-916c28f3e347_3_75_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,o.firstChild?o.insertBefore(c,o.firstChild):o.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".iconWrapper_299ec08a59.leftIcon_6a538e8dd7 {\n margin-right: var(--spacing-small);\n}\n.iconWrapper_299ec08a59.rightIcon_363ebf0c30 {\n margin-left: var(--spacing-small);\n}\n.iconWrapper_299ec08a59.withBackgroundColor_512535b6f1 {\n border-radius: var(--spacing-xs);\n}\n.iconWrapper_299ec08a59.withBackgroundColor_512535b6f1.disabled_5aea359cbd {\n opacity: 0.4;\n}\n.iconWrapper_299ec08a59.withBackgroundColor_512535b6f1 .icon_f6b3d5be19 {\n color: var(--text-color-on-primary);\n}\n.iconWrapper_299ec08a59.disabled_5aea359cbd .icon_f6b3d5be19 {\n cursor: not-allowed;\n color: var(--disabled-text-color);\n}\n.iconWrapper_299ec08a59 .icon_f6b3d5be19 {\n color: var(--icon-color);\n}\n.iconWrapper_299ec08a59 .icon_f6b3d5be19.selected_347f78dba7 {\n color: var(--primary-color);\n}");export{e as default};
|
|
2
2
|
//# sourceMappingURL=MenuItemIcon.module.scss.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vibe/core",
|
|
3
|
-
"version": "3.75.1-alpha-
|
|
3
|
+
"version": "3.75.1-alpha-1a030.0",
|
|
4
4
|
"description": "Official monday.com UI resources for application development in React.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -272,5 +272,5 @@
|
|
|
272
272
|
"browserslist": [
|
|
273
273
|
"extends browserslist-config-monday"
|
|
274
274
|
],
|
|
275
|
-
"gitHead": "
|
|
275
|
+
"gitHead": "4aaf75539d2d544b47bb29ff12fb9e3e86f4e605"
|
|
276
276
|
}
|