monday-ui-react-core/dist/esm/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.js

Official monday.com UI resources for application development in React.js

import e,{useCallback as t}from"react";import o from"../../hooks/useKeyEvent/index.js";import r from"../Flex/Flex.js";import i from"../Avatar/Avatar.js";import n from"../Clickable/ClickableWrapper.js";import s from"./AvatarGroupCounterTooltipContent.module.scss.js";import a from"../../hooks/useEventListener/index.js";import c from"../../hooks/useListenFocusTriggers/index.js";import{AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY as l,AVATAR_GROUP_COUNTER_AVATAR_SIZE as u}from"./AvatarGroupConstants.js";import"../../constants/dialog.js";import{keyCodes as f}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import"../../constants/positions.js";var m=[f.TAB],d=[f.ESCAPE];function p(e){var r=e.counterContainerRef,i=void 0===r?void 0:r,n=e.tooltipContentContainerRef,s=e.focusPrevPlaceholderRef,u=e.focusNextPlaceholderRef,f=e.isKeyboardTooltipVisible,p=e.setIsKeyboardTooltipVisible,v=t((function(){f||setTimeout((function(){return p(!0)}),l)}),[f,p]),b=t((function(){f&&p(!1)}),[f,p]);c({ref:i,onFocusByKeyboard:v}),a({eventName:"blur",ref:n,callback:b}),o({keys:m,ref:i,withoutAnyModifier:!0,preventDefault:!0,callback:t((function(){f&&(null==n?void 0:n.current)&&n.current.focus()}),[f,n])}),o({keys:m,modifier:o.modifiers.SHIFT,ref:i,callback:b}),o({keys:m,ref:n,withoutAnyModifier:!0,callback:t((function(){(null==u?void 0:u.current)&&u.current.focus(),f&&p(!1)}),[u,f,p])}),o({keys:m,ref:n,modifier:o.modifiers.SHIFT,callback:t((function(){(null==s?void 0:s.current)&&s.current.focus(),f&&p(!1)}),[s,f,p])}),o({keys:d,ref:n,callback:t((function(){(null==i?void 0:i.current)&&i.current.focus(),f&&p(!1)}),[i,f,p])}),o({keys:d,ref:i,callback:b}),a({eventName:"focus",ref:u,callback:b})}var v=function(t,o,a,c,l){var f=t.value,m=Object.assign(Object.assign({},a),{width:l?void 0:"100%"}),d="tooltip-item-".concat(o,"-label");return e.createElement(n,{key:o,isClickable:!!(null==f?void 0:f.onClick),clickableProps:{onClick:function(e){return f.onClick(e,f.id)},tabIndex:"-1"}},e.createElement("div",{style:m},e.createElement(r,{direction:r.directions.ROW,gap:r.gaps.XS,ariaLabelledby:d},e.createElement(i,Object.assign({},f,{tooltipProps:void 0,ariaLabel:"",customSize:u,type:c||(null==f?void 0:f.type),tabIndex:-1,size:i.sizes.SMALL,className:s.tooltipAvatarItemAvatar})),!l&&e.createElement("div",{id:d,className:s.tooltipAvatarItemTitle},f.tooltipContent))))};export{v as avatarRenderer,p as useTooltipContentTabNavigation};
//# sourceMappingURL=AvatarGroupCounterTooltipHelper.js.map