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

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

import{slicedToArray as o,defineProperty as e,toConsumableArray as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as n}from"../../../_virtual/_tslib.js";import{camelCase as t}from"lodash-es";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as s}from"../../tests/testIds.js";import l from"classnames";import d,{useState as c,useRef as m,useCallback as u,useMemo as g}from"react";import{SplitButtonSecondaryContentPosition as p,ENTER_KEYS as f,EMPTY_ARR as D,DEFAULT_DIALOG_SHOW_TRIGGER as v,DEFAULT_DIALOG_HIDE_TRIGGER as T,DIALOG_MOVE_BY as y,SECONDARY_BUTTON_ARIA_LABEL as C,SECONDARY_BUTTON_WRAPPER_CLASSNAME as S}from"./SplitButtonConstants.js";import{withStaticProps as h}from"../../types/withStaticProps.js";import{AnimationType as N}from"../../constants/dialog.js";import"../../constants/sizes.js";import{DialogPosition as I}from"../../constants/positions.js";import{HideShowEvent as O}from"../Dialog/consts/dialog-show-hide-event.js";import{NOOP as P}from"../../utils/function-utils.js";import{isInsideClass as j}from"../../utils/dom-utils.js";import k from"../../hooks/useKeyEvent/index.js";import E from"../../hooks/useEventListener/index.js";import b from"../Button/Button.js";import B from"../Dialog/Dialog.js";import _ from"../Icon/Icons/components/DropdownChevronDown.js";import z from"../DialogContentContainer/DialogContentContainer.js";import A from"./SplitButton.module.scss.js";var w=function(h){var I=h.secondaryDialogContent,w=h.onSecondaryDialogDidShow,M=void 0===w?P:w,L=h.onSecondaryDialogDidHide,R=void 0===L?P:L,x=h.shouldCloseOnClickInsideDialog,H=h.zIndex,U=void 0===H?null:H,F=h.secondaryDialogClassName,K=h.secondaryDialogPosition,Y=void 0===K?p.BOTTOM_START:K,W=h.dialogContainerSelector,V=h.dialogPaddingSize,X=void 0===V?z.sizes.MEDIUM:V,q=h.disabled,G=h.loading,J=h.kind,Q=h.color,Z=h.className,$=h.leftIcon,oo=h.rightIcon,eo=h.onClick,io=h.children,no=h.marginLeft,to=h.marginRight,ao=h.active,ro=h.id,so=h["data-testid"],lo=n(h,["secondaryDialogContent","onSecondaryDialogDidShow","onSecondaryDialogDidHide","shouldCloseOnClickInsideDialog","zIndex","secondaryDialogClassName","secondaryDialogPosition","dialogContainerSelector","dialogPaddingSize","disabled","success","loading","kind","color","className","leftIcon","rightIcon","onClick","children","marginLeft","marginRight","active","id","data-testid"]),co=c(!1),mo=o(co,2),uo=mo[0],go=mo[1],po=c(!1),fo=o(po,2),Do=fo[0],vo=fo[1],To=c(!1),yo=o(To,2),Co=yo[0],So=yo[1],ho=m(null),No=m(null),Io=u((function(){return vo(!0)}),[vo]),Oo=u((function(){return vo(!1)}),[vo]),Po=u((function(o){return!q&&!j(o.target,S)}),[q]),jo=u((function(o){Po(o)&&So(!0)}),[So,Po]),ko=u((function(){return So(!1)}),[So]),Eo=u((function(o){Po(o)&&So(!0)}),[So,Po]),bo=u((function(){go(!0),M()}),[go,M]),Bo=u((function(o,e){go(!1),R(),e===O.ESCAPE_KEY&&No.current.focus()}),[go,R]);E({eventName:"mouseenter",callback:Io,ref:ho}),E({eventName:"mouseleave",callback:Oo,ref:ho}),E({eventName:"mousedown",callback:jo,ref:ho}),E({eventName:"mouseup",callback:ko,ref:ho}),E({eventName:"transitionend",callback:ko,ref:ho}),k({keys:f,ref:ho,callback:Eo});var _o=g((function(){return l(A.button,a(A,t("kind-"+J)),a(A,t("color-"+Q)),e(e(e(e(e({},A.mainActive,ao),A.active,Co),A.splitContentOpen,uo),A.hovered,Do),A.disabled,q),Z)}),[Z,J,Q,ao,Co,uo,Do,q]),zo=g((function(){return q?D:v}),[q]),Ao=g((function(){return x?[].concat(i(T),[O.CONTENT_CLICK]):T}),[x]),wo=u((function(){var o="function"==typeof I?I():I;return d.createElement(z,{type:z.types.POPOVER,size:X},o)}),[I,X]),Mo=g((function(){return Y===p.BOTTOM_MIDDLE?"":Y===p.BOTTOM_START?"bottom":"top"}),[Y]);return d.createElement("div",{className:_o,ref:ho,id:ro,"data-testid":so||r(s.SPLIT_BUTTON,ro)},d.createElement(b,Object.assign({},lo,{preventClickAnimation:!0,leftIcon:$,rightIcon:oo,rightFlat:!0,color:Q,kind:J,active:ao,onClick:eo,className:A.mainButton,marginLeft:no,onFocus:Io,onBlur:Oo,disabled:q,loading:G,"data-testid":so||r(s.SPLIT_BUTTON_PRIMARY_BUTTON,ro)}),io),d.createElement("div",{className:A.secondaryButtonWrapper},d.createElement(B,{wrapperClassName:F,zIndex:U,content:wo,position:Y,containerSelector:W,startingEdge:Mo,animationType:N.EXPAND,moveBy:y,onDialogDidShow:bo,onDialogDidHide:Bo,showTrigger:zo,hideTrigger:Ao},d.createElement(b,Object.assign({},lo,{ref:No,preventClickAnimation:!0,leftFlat:!0,noSidePadding:!0,color:Q,kind:J,className:A.secondaryButton,active:uo,marginRight:to,onFocus:Io,onBlur:Oo,disabled:q,ariaLabel:C,ariaHasPopup:!0,ariaExpanded:uo,"data-testid":so||r(s.SPLIT_BUTTON_SECONDARY_BUTTON,ro)}),d.createElement("div",{className:A.secondaryButtonIconWrapper},d.createElement(_,{"aria-hidden":"true"}))))))};w.defaultProps=Object.assign(Object.assign({},b.defaultProps),{onSecondaryDialogDidShow:P,onSecondaryDialogDidHide:P,zIndex:null,secondaryDialogClassName:"",secondaryDialogPosition:I.BOTTOM_START,dialogPaddingSize:z.sizes.MEDIUM});var M=h(w,{secondaryPositions:p,secondaryDialogPositions:p,sizes:b.sizes,colors:b.colors,kinds:b.kinds,inputTags:b.inputTags,dialogPaddingSizes:z.sizes});export{M as default};
//# sourceMappingURL=SplitButton.js.map