@vibe/core 3.70.2-alpha-96f20.0 → 3.70.2-alpha-23478.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/components/Modal/Modal/Modal.types.d.ts +6 -28
  2. package/dist/metadata.json +1 -10
  3. package/dist/mocked_classnames/components/Modal/Modal/Modal.types.d.ts +6 -28
  4. package/dist/mocked_classnames/src/components/Dialog/DialogContent/DialogContent.js +1 -1
  5. package/dist/mocked_classnames/src/components/Dialog/DialogContent/DialogContent.js.map +1 -1
  6. package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js +1 -1
  7. package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js.map +1 -1
  8. package/dist/src/components/Dialog/DialogContent/DialogContent.js +1 -1
  9. package/dist/src/components/Dialog/DialogContent/DialogContent.js.map +1 -1
  10. package/dist/src/components/Modal/Modal/Modal.js +1 -1
  11. package/dist/src/components/Modal/Modal/Modal.js.map +1 -1
  12. package/package.json +2 -2
  13. package/dist/components/Modal/hooks/useFocusEscapeTargets/index.d.ts +0 -2
  14. package/dist/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.d.ts +0 -10
  15. package/dist/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.types.d.ts +0 -2
  16. package/dist/mocked_classnames/components/Modal/hooks/useFocusEscapeTargets/index.d.ts +0 -2
  17. package/dist/mocked_classnames/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.d.ts +0 -10
  18. package/dist/mocked_classnames/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.types.d.ts +0 -2
  19. package/dist/mocked_classnames/src/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.js +0 -2
  20. package/dist/mocked_classnames/src/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.js.map +0 -1
  21. package/dist/src/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.js +0 -2
  22. package/dist/src/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.js.map +0 -1
@@ -2,7 +2,6 @@ import { type VibeComponentProps } from "../../../types";
2
2
  import type React from "react";
3
3
  import { type ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types";
4
4
  import { type PortalTarget } from "../hooks/usePortalTarget/usePortalTarget.types";
5
- import { type FocusEscapeTarget } from "../hooks/useFocusEscapeTargets/useFocusEscapeTargets.types";
6
5
  export type ModalSize = "small" | "medium" | "large" | "full-view";
7
6
  export type ModalCloseEvent = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;
8
7
  export interface ModalProps extends VibeComponentProps {
@@ -40,39 +39,18 @@ export interface ModalProps extends VibeComponentProps {
40
39
  * - Notice this might break keyboard and general accessibility and should be used with caution.
41
40
  */
42
41
  autoFocus?: boolean;
43
- /**
44
- * Specifies elements/containers that should be allowed to receive focus outside this modal.
45
- * When focus moves to these elements, the focus lock will ignore them.
46
- * This allows other UI components (tooltips, dropdowns, nested modals, etc.) to receive focus.
47
- *
48
- * Accepts:
49
- * - CSS selectors (string)
50
- * - Refs to elements (React.RefObject<HTMLElement>)
51
- * - Direct element references (HTMLElement)
52
- */
53
- allowFocusEscapeTo?: FocusEscapeTarget[];
54
42
  /**
55
43
  * This is intended for advanced use-cases.
56
- * It allows you to control which elements the focus lock should manage.
44
+ * It allows you to control the focus behavior when moving between elements within the modal.
57
45
  * Make sure to use this prop only when you understand the implications.
58
46
  *
59
- * **Note:** If you only need to allow focus to specific selectors, use `allowFocusEscapeTo` instead.
60
- *
61
- * Called whenever focus is attempting to move to any element (inside or outside the modal).
47
+ * Called whenever focus is about to move to a new element within the modal.
62
48
  * Return:
63
- * - `true` to let focus-lock **manage** this element (keep it within the modal's focus trap).
64
- * - `false` to let focus-lock **ignore** this element (allow focus to move outside the modal).
65
- * - An HTMLElement to redirect focus to that element instead.
49
+ * - `true` to allow normal flow focus.
50
+ * - `false` to block it (let the browser decide, usually moves to body).
51
+ * - Notice this might break keyboard accessibility and should be used with caution.
52
+ * - An HTMLElement to redirect focus to instead of normal flow.
66
53
  * - Any other value (e.g., null, undefined) would act as `false`.
67
- *
68
- * @example
69
- * // Complex custom logic
70
- * <Modal
71
- * onFocusAttempt={(el) => {
72
- * if (el?.dataset.customBehavior) return false;
73
- * return true;
74
- * }}
75
- * />
76
54
  */
77
55
  onFocusAttempt?: (nextFocusedElement?: HTMLElement) => boolean | HTMLElement;
78
56
  /**
@@ -20501,18 +20501,9 @@
20501
20501
  "name": "boolean"
20502
20502
  }
20503
20503
  },
20504
- "allowFocusEscapeTo": {
20505
- "defaultValue": null,
20506
- "description": "Specifies elements/containers that should be allowed to receive focus outside this modal.\nWhen focus moves to these elements, the focus lock will ignore them.\nThis allows other UI components (tooltips, dropdowns, nested modals, etc.) to receive focus.\n\nAccepts:\n- CSS selectors (string)\n- Refs to elements (React.RefObject<HTMLElement>)\n- Direct element references (HTMLElement)",
20507
- "name": "allowFocusEscapeTo",
20508
- "required": false,
20509
- "type": {
20510
- "name": "any[]"
20511
- }
20512
- },
20513
20504
  "onFocusAttempt": {
20514
20505
  "defaultValue": null,
20515
- "description": "This is intended for advanced use-cases.\nIt allows you to control which elements the focus lock should manage.\nMake sure to use this prop only when you understand the implications.\n\n**Note:** If you only need to allow focus to specific selectors, use `allowFocusEscapeTo` instead.\n\nCalled whenever focus is attempting to move to any element (inside or outside the modal).\nReturn:\n- `true` to let focus-lock **manage** this element (keep it within the modal's focus trap).\n- `false` to let focus-lock **ignore** this element (allow focus to move outside the modal).\n- An HTMLElement to redirect focus to that element instead.\n- Any other value (e.g., null, undefined) would act as `false`.\n@example // Complex custom logic\n<Modal\n onFocusAttempt={(el) => {\n if (el?.dataset.customBehavior) return false;\n return true;\n }}\n/>",
20506
+ "description": "This is intended for advanced use-cases.\nIt allows you to control the focus behavior when moving between elements within the modal.\nMake sure to use this prop only when you understand the implications.\n\nCalled whenever focus is about to move to a new element within the modal.\nReturn:\n- `true` to allow normal flow focus.\n- `false` to block it (let the browser decide, usually moves to body).\n - Notice this might break keyboard accessibility and should be used with caution.\n- An HTMLElement to redirect focus to instead of normal flow.\n- Any other value (e.g., null, undefined) would act as `false`.",
20516
20507
  "name": "onFocusAttempt",
20517
20508
  "required": false,
20518
20509
  "type": {
@@ -2,7 +2,6 @@ import { type VibeComponentProps } from "../../../types";
2
2
  import type React from "react";
3
3
  import { type ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types";
4
4
  import { type PortalTarget } from "../hooks/usePortalTarget/usePortalTarget.types";
5
- import { type FocusEscapeTarget } from "../hooks/useFocusEscapeTargets/useFocusEscapeTargets.types";
6
5
  export type ModalSize = "small" | "medium" | "large" | "full-view";
7
6
  export type ModalCloseEvent = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;
8
7
  export interface ModalProps extends VibeComponentProps {
@@ -40,39 +39,18 @@ export interface ModalProps extends VibeComponentProps {
40
39
  * - Notice this might break keyboard and general accessibility and should be used with caution.
41
40
  */
42
41
  autoFocus?: boolean;
43
- /**
44
- * Specifies elements/containers that should be allowed to receive focus outside this modal.
45
- * When focus moves to these elements, the focus lock will ignore them.
46
- * This allows other UI components (tooltips, dropdowns, nested modals, etc.) to receive focus.
47
- *
48
- * Accepts:
49
- * - CSS selectors (string)
50
- * - Refs to elements (React.RefObject<HTMLElement>)
51
- * - Direct element references (HTMLElement)
52
- */
53
- allowFocusEscapeTo?: FocusEscapeTarget[];
54
42
  /**
55
43
  * This is intended for advanced use-cases.
56
- * It allows you to control which elements the focus lock should manage.
44
+ * It allows you to control the focus behavior when moving between elements within the modal.
57
45
  * Make sure to use this prop only when you understand the implications.
58
46
  *
59
- * **Note:** If you only need to allow focus to specific selectors, use `allowFocusEscapeTo` instead.
60
- *
61
- * Called whenever focus is attempting to move to any element (inside or outside the modal).
47
+ * Called whenever focus is about to move to a new element within the modal.
62
48
  * Return:
63
- * - `true` to let focus-lock **manage** this element (keep it within the modal's focus trap).
64
- * - `false` to let focus-lock **ignore** this element (allow focus to move outside the modal).
65
- * - An HTMLElement to redirect focus to that element instead.
49
+ * - `true` to allow normal flow focus.
50
+ * - `false` to block it (let the browser decide, usually moves to body).
51
+ * - Notice this might break keyboard accessibility and should be used with caution.
52
+ * - An HTMLElement to redirect focus to instead of normal flow.
66
53
  * - Any other value (e.g., null, undefined) would act as `false`.
67
- *
68
- * @example
69
- * // Complex custom logic
70
- * <Modal
71
- * onFocusAttempt={(el) => {
72
- * if (el?.dataset.customBehavior) return false;
73
- * return true;
74
- * }}
75
- * />
76
54
  */
77
55
  onFocusAttempt?: (nextFocusedElement?: HTMLElement) => boolean | HTMLElement;
78
56
  /**
@@ -1,2 +1,2 @@
1
- import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as t,useRef as a,useCallback as s,useEffect as r,cloneElement as i}from"react";import n from"classnames";import{camelCase as p}from"es-toolkit";import{CSSTransition as l}from"react-transition-group";import c from"../../../hooks/useClickOutside/index.js";import{chainFunctions as d,NOOP as m}from"../../../utils/function-utils.js";import u from"../../../hooks/useKeyEvent/index.js";import{keyCodes as f}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{getStyle as v}from"../../../helpers/typesciptCssModulesHelper.js";import y from"./DialogContent.module.scss.js";import k from"../../../hooks/useDisableScroll/index.js";var C={},x=[f.ESCAPE],E=t((function(t,f){var E=t.onEsc,h=void 0===E?m:E,b=t.children,j=t.position,A=t.wrapperClassName,N=t.isOpen,g=void 0!==N&&N,M=t.startingEdge,S=t.animationType,w=void 0===S?"expand":S,O=t.onMouseEnter,D=void 0===O?m:O,H=t.onMouseLeave,L=void 0===H?m:H,P=t.onClickOutside,T=void 0===P?m:P,R=t.onClick,_=void 0===R?m:R,z=t.onContextMenu,B=void 0===z?m:z,K=t.showDelay,W=t.styleObject,q=void 0===W?C:W,F=t.isReferenceHidden,G=t.hasTooltip,I=void 0!==G&&G,J=t.containerSelector,Q=t.disableContainerScroll,U=void 0!==Q&&Q,V=t["data-testid"],X=a(null),Y=s((function(e){if(g)return T(e,"clickoutside")}),[g,T]),Z=s((function(e){g&&B(e)}),[g,B]);u({keys:x,callback:h}),c({callback:Y,ref:X}),c({eventName:"contextmenu",callback:Z,ref:X});var $=k("string"==typeof U?U:J),ee=$.disableScroll,oe=$.enableScroll;r((function(){U&&(g?ee():oe())}),[U,ee,oe,g]);var te={classNames:void 0};switch(w){case"expand":te.classNames={appear:y.expandAppear,appearActive:y.expandAppearActive,exit:y.expandExit};break;case"opacity-and-slide":te.classNames={appear:y.opacitySlideAppear,appearActive:y.opacitySlideAppearActive}}return o.createElement("span",{className:n("monday-style-dialog-content-wrapper",y.contentWrapper,A),ref:f,"data-testid":V,style:q,onClickCapture:_,"data-popper-reference-hidden":F},o.createElement(l,{classNames:te.classNames,nodeRef:X,in:g,appear:!!w,timeout:K},o.createElement("div",{className:n(y.contentComponent,v(y,p(j)),e(e({},v(y,p("edge-"+M)),M),y.hasTooltip,I)),ref:X},o.Children.toArray(b).map((function(e){return i(e,{onMouseEnter:d([e.props.onMouseEnter,D]),onMouseLeave:d([e.props.onMouseLeave,L])})})))))}));export{E as default};
1
+ import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as t,useRef as a,useCallback as s,useEffect as r,cloneElement as i}from"react";import n from"classnames";import{camelCase as p}from"es-toolkit";import{CSSTransition as l}from"react-transition-group";import c from"../../../hooks/useClickOutside/index.js";import{chainFunctions as d,NOOP as m}from"../../../utils/function-utils.js";import u from"../../../hooks/useKeyEvent/index.js";import{keyCodes as f}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{getStyle as v}from"../../../helpers/typesciptCssModulesHelper.js";import k from"./DialogContent.module.scss.js";import y from"../../../hooks/useDisableScroll/index.js";import C from"../../../hooks/useMergeRef.js";var x={},h=[f.ESCAPE],E=t((function(t,f){var E=t.onEsc,j=void 0===E?m:E,b=t.children,A=t.position,g=t.wrapperClassName,M=t.isOpen,N=void 0!==M&&M,S=t.startingEdge,w=t.animationType,O=void 0===w?"expand":w,D=t.onMouseEnter,H=void 0===D?m:D,L=t.onMouseLeave,P=void 0===L?m:L,R=t.onClickOutside,T=void 0===R?m:R,_=t.onClick,z=void 0===_?m:_,B=t.onContextMenu,K=void 0===B?m:B,W=t.showDelay,q=t.styleObject,F=void 0===q?x:q,G=t.isReferenceHidden,I=t.hasTooltip,J=void 0!==I&&I,Q=t.containerSelector,U=t.disableContainerScroll,V=void 0!==U&&U,X=t["data-testid"],Y=a(null),Z=a(null),$=C(f,Z),ee=s((function(e){if(N)return T(e,"clickoutside")}),[N,T]),oe=s((function(e){N&&K(e)}),[N,K]);u({keys:h,callback:j}),c({callback:ee,ref:Z}),c({eventName:"contextmenu",callback:oe,ref:Z});var te=y("string"==typeof V?V:Q),ae=te.disableScroll,se=te.enableScroll;r((function(){V&&(N?ae():se())}),[V,ae,se,N]);var re={classNames:void 0};switch(O){case"expand":re.classNames={appear:k.expandAppear,appearActive:k.expandAppearActive,exit:k.expandExit};break;case"opacity-and-slide":re.classNames={appear:k.opacitySlideAppear,appearActive:k.opacitySlideAppearActive}}return o.createElement("span",{className:n("monday-style-dialog-content-wrapper",k.contentWrapper,g),ref:$,"data-testid":X,style:F,onClickCapture:z,"data-popper-reference-hidden":G},o.createElement(l,{classNames:re.classNames,nodeRef:Y,in:N,appear:!!O,timeout:W},o.createElement("div",{className:n(k.contentComponent,v(k,p(A)),e(e({},v(k,p("edge-"+S)),S),k.hasTooltip,J)),ref:Y},o.Children.toArray(b).map((function(e){return i(e,{onMouseEnter:d([e.props.onMouseEnter,H]),onMouseLeave:d([e.props.onMouseLeave,P])})})))))}));export{E as default};
2
2
  //# sourceMappingURL=DialogContent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DialogContent.js","sources":["../../../../../../src/components/Dialog/DialogContent/DialogContent.tsx"],"sourcesContent":["import React, {\n cloneElement,\n type CSSProperties,\n forwardRef,\n type ReactElement,\n useCallback,\n useEffect,\n useRef\n} from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type CSSTransitionProps } from \"react-transition-group/CSSTransition\";\nimport useClickOutside from \"../../../hooks/useClickOutside\";\nimport { chainFunctions, NOOP } from \"../../../utils/function-utils\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { keyCodes } from \"../../../constants\";\nimport { type DialogAnimationType, type DialogTriggerEvent } from \"../Dialog.types\";\nimport type * as PopperJS from \"@popperjs/core\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./DialogContent.module.scss\";\nimport useDisableScroll from \"../../../hooks/useDisableScroll\";\n\nconst EMPTY_OBJECT = {};\nconst ESCAPE_KEYS = [keyCodes.ESCAPE];\n\nexport interface DialogContentProps extends VibeComponentProps {\n /**\n * The content inside the dialog.\n */\n children?: ReactElement | ReactElement[];\n /**\n * The placement of the dialog relative to the reference element.\n */\n position?: PopperJS.Placement;\n /**\n * Class name applied to the dialog wrapper.\n */\n wrapperClassName?: string;\n /**\n * If true, the dialog is open.\n */\n isOpen?: boolean;\n // TODO: [breaking] use type\n /**\n * The starting edge of the dialog.\n */\n startingEdge?: any;\n /**\n * The animation type used for showing/hiding the dialog.\n */\n animationType?: DialogAnimationType;\n /**\n * Callback fired when the Escape key is pressed.\n */\n onEsc?: (event: React.KeyboardEvent) => void;\n /**\n * Callback fired when the mouse enters the dialog.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse leaves the dialog.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when clicking outside the dialog.\n */\n onClickOutside?: (event: React.MouseEvent, hideShowEvent: DialogTriggerEvent) => void;\n /**\n * Callback fired when clicking inside the dialog.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * Delay before showing the dialog.\n */\n showDelay?: number;\n /**\n * Inline styles applied to the dialog.\n */\n styleObject?: CSSProperties;\n /**\n * If true, hides the reference element when the dialog is shown.\n */\n isReferenceHidden?: boolean;\n /**\n * If true, applies tooltip arrow to the dialog.\n */\n hasTooltip?: boolean;\n /**\n * The CSS selector of the container where the dialog should be rendered.\n */\n containerSelector?: string;\n /**\n * If true, disables scrolling in the container when the dialog is open.\n */\n disableContainerScroll?: boolean | string;\n /**\n * Callback fired when the context menu (right-click) event occurs outside the dialog.\n */\n onContextMenu?: (e: React.MouseEvent) => void;\n}\n\nconst DialogContent = forwardRef(\n (\n {\n onEsc = NOOP,\n children,\n position,\n wrapperClassName,\n isOpen = false,\n startingEdge,\n animationType = \"expand\",\n onMouseEnter = NOOP,\n onMouseLeave = NOOP,\n onClickOutside = NOOP,\n onClick = NOOP,\n onContextMenu = NOOP,\n showDelay,\n styleObject = EMPTY_OBJECT,\n isReferenceHidden,\n hasTooltip = false,\n containerSelector,\n disableContainerScroll = false,\n \"data-testid\": dataTestId\n }: DialogContentProps,\n forwardRef: React.ForwardedRef<HTMLElement>\n ) => {\n const ref = useRef<HTMLDivElement>(null);\n const onOutSideClick = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n return onClickOutside(event, \"clickoutside\");\n }\n },\n [isOpen, onClickOutside]\n );\n const overrideOnContextMenu = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n onContextMenu(event);\n }\n },\n [isOpen, onContextMenu]\n );\n useKeyEvent({ keys: ESCAPE_KEYS, callback: onEsc });\n useClickOutside({ callback: onOutSideClick, ref });\n useClickOutside({ eventName: \"contextmenu\", callback: overrideOnContextMenu, ref });\n const selectorToDisable = typeof disableContainerScroll === \"string\" ? disableContainerScroll : containerSelector;\n const { disableScroll, enableScroll } = useDisableScroll(selectorToDisable);\n\n useEffect(() => {\n if (disableContainerScroll) {\n if (isOpen) {\n disableScroll();\n } else {\n enableScroll();\n }\n }\n }, [disableContainerScroll, disableScroll, enableScroll, isOpen]);\n\n const transitionOptions: Partial<CSSTransitionProps> = { classNames: undefined };\n\n switch (animationType) {\n case \"expand\":\n transitionOptions.classNames = {\n appear: styles.expandAppear,\n appearActive: styles.expandAppearActive,\n exit: styles.expandExit\n };\n break;\n case \"opacity-and-slide\":\n transitionOptions.classNames = {\n appear: styles.opacitySlideAppear,\n appearActive: styles.opacitySlideAppearActive\n };\n break;\n }\n return (\n <span\n // don't remove old classname - override from Monolith\n className={cx(\"monday-style-dialog-content-wrapper\", styles.contentWrapper, wrapperClassName)}\n ref={forwardRef}\n data-testid={dataTestId}\n style={styleObject}\n onClickCapture={onClick}\n data-popper-reference-hidden={isReferenceHidden}\n >\n <CSSTransition\n classNames={transitionOptions.classNames}\n nodeRef={ref}\n in={isOpen}\n appear={!!animationType}\n timeout={showDelay}\n >\n <div\n className={cx(styles.contentComponent, getStyle(styles, camelCase(position)), {\n [getStyle(styles, camelCase(\"edge-\" + startingEdge))]: startingEdge,\n [styles.hasTooltip]: hasTooltip\n })}\n ref={ref}\n >\n {React.Children.toArray(children).map((child: ReactElement) => {\n return cloneElement(child, {\n onMouseEnter: chainFunctions([child.props.onMouseEnter, onMouseEnter]),\n onMouseLeave: chainFunctions([child.props.onMouseLeave, onMouseLeave])\n });\n })}\n </div>\n </CSSTransition>\n </span>\n );\n }\n);\n\nexport default DialogContent;\n"],"names":["EMPTY_OBJECT","ESCAPE_KEYS","keyCodes","ESCAPE","DialogContent","forwardRef","_ref","_ref$onEsc","onEsc","NOOP","children","position","wrapperClassName","_ref$isOpen","isOpen","startingEdge","_ref$animationType","animationType","_ref$onMouseEnter","onMouseEnter","_ref$onMouseLeave","onMouseLeave","_ref$onClickOutside","onClickOutside","_ref$onClick","onClick","_ref$onContextMenu","onContextMenu","showDelay","_ref$styleObject","styleObject","isReferenceHidden","_ref$hasTooltip","hasTooltip","containerSelector","_ref$disableContainer","disableContainerScroll","dataTestId","ref","useRef","onOutSideClick","useCallback","event","overrideOnContextMenu","useKeyEvent","keys","callback","useClickOutside","eventName","_useDisableScroll","useDisableScroll","disableScroll","enableScroll","useEffect","transitionOptions","classNames","undefined","appear","styles","expandAppear","appearActive","expandAppearActive","exit","expandExit","opacitySlideAppear","opacitySlideAppearActive","React","createElement","className","cx","contentWrapper","style","onClickCapture","CSSTransition","nodeRef","in","timeout","contentComponent","getStyle","camelCase","_defineProperty","Children","toArray","map","child","cloneElement","chainFunctions","props"],"mappings":"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"}
1
+ {"version":3,"file":"DialogContent.js","sources":["../../../../../../src/components/Dialog/DialogContent/DialogContent.tsx"],"sourcesContent":["import React, {\n cloneElement,\n type CSSProperties,\n forwardRef,\n type ReactElement,\n useCallback,\n useEffect,\n useRef\n} from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type CSSTransitionProps } from \"react-transition-group/CSSTransition\";\nimport useClickOutside from \"../../../hooks/useClickOutside\";\nimport { chainFunctions, NOOP } from \"../../../utils/function-utils\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { keyCodes } from \"../../../constants\";\nimport { type DialogAnimationType, type DialogTriggerEvent } from \"../Dialog.types\";\nimport type * as PopperJS from \"@popperjs/core\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./DialogContent.module.scss\";\nimport useDisableScroll from \"../../../hooks/useDisableScroll\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\nconst EMPTY_OBJECT = {};\nconst ESCAPE_KEYS = [keyCodes.ESCAPE];\n\nexport interface DialogContentProps extends VibeComponentProps {\n /**\n * The content inside the dialog.\n */\n children?: ReactElement | ReactElement[];\n /**\n * The placement of the dialog relative to the reference element.\n */\n position?: PopperJS.Placement;\n /**\n * Class name applied to the dialog wrapper.\n */\n wrapperClassName?: string;\n /**\n * If true, the dialog is open.\n */\n isOpen?: boolean;\n // TODO: [breaking] use type\n /**\n * The starting edge of the dialog.\n */\n startingEdge?: any;\n /**\n * The animation type used for showing/hiding the dialog.\n */\n animationType?: DialogAnimationType;\n /**\n * Callback fired when the Escape key is pressed.\n */\n onEsc?: (event: React.KeyboardEvent) => void;\n /**\n * Callback fired when the mouse enters the dialog.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse leaves the dialog.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when clicking outside the dialog.\n */\n onClickOutside?: (event: React.MouseEvent, hideShowEvent: DialogTriggerEvent) => void;\n /**\n * Callback fired when clicking inside the dialog.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * Delay before showing the dialog.\n */\n showDelay?: number;\n /**\n * Inline styles applied to the dialog.\n */\n styleObject?: CSSProperties;\n /**\n * If true, hides the reference element when the dialog is shown.\n */\n isReferenceHidden?: boolean;\n /**\n * If true, applies tooltip arrow to the dialog.\n */\n hasTooltip?: boolean;\n /**\n * The CSS selector of the container where the dialog should be rendered.\n */\n containerSelector?: string;\n /**\n * If true, disables scrolling in the container when the dialog is open.\n */\n disableContainerScroll?: boolean | string;\n /**\n * Callback fired when the context menu (right-click) event occurs outside the dialog.\n */\n onContextMenu?: (e: React.MouseEvent) => void;\n}\n\nconst DialogContent = forwardRef(\n (\n {\n onEsc = NOOP,\n children,\n position,\n wrapperClassName,\n isOpen = false,\n startingEdge,\n animationType = \"expand\",\n onMouseEnter = NOOP,\n onMouseLeave = NOOP,\n onClickOutside = NOOP,\n onClick = NOOP,\n onContextMenu = NOOP,\n showDelay,\n styleObject = EMPTY_OBJECT,\n isReferenceHidden,\n hasTooltip = false,\n containerSelector,\n disableContainerScroll = false,\n \"data-testid\": dataTestId\n }: DialogContentProps,\n forwardRef: React.ForwardedRef<HTMLElement>\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n\n const wrapperRef = useRef<HTMLSpanElement>(null);\n const mergedWrapperRef = useMergeRef(forwardRef, wrapperRef);\n\n const onOutSideClick = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n return onClickOutside(event, \"clickoutside\");\n }\n },\n [isOpen, onClickOutside]\n );\n const overrideOnContextMenu = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n onContextMenu(event);\n }\n },\n [isOpen, onContextMenu]\n );\n useKeyEvent({ keys: ESCAPE_KEYS, callback: onEsc });\n // Watch the wrapper ref to include padding area, tooltip arrows, and nested Dialogs\n useClickOutside({ callback: onOutSideClick, ref: wrapperRef });\n useClickOutside({ eventName: \"contextmenu\", callback: overrideOnContextMenu, ref: wrapperRef });\n const selectorToDisable = typeof disableContainerScroll === \"string\" ? disableContainerScroll : containerSelector;\n const { disableScroll, enableScroll } = useDisableScroll(selectorToDisable);\n\n useEffect(() => {\n if (disableContainerScroll) {\n if (isOpen) {\n disableScroll();\n } else {\n enableScroll();\n }\n }\n }, [disableContainerScroll, disableScroll, enableScroll, isOpen]);\n\n const transitionOptions: Partial<CSSTransitionProps> = { classNames: undefined };\n\n switch (animationType) {\n case \"expand\":\n transitionOptions.classNames = {\n appear: styles.expandAppear,\n appearActive: styles.expandAppearActive,\n exit: styles.expandExit\n };\n break;\n case \"opacity-and-slide\":\n transitionOptions.classNames = {\n appear: styles.opacitySlideAppear,\n appearActive: styles.opacitySlideAppearActive\n };\n break;\n }\n return (\n <span\n // don't remove old classname - override from Monolith\n className={cx(\"monday-style-dialog-content-wrapper\", styles.contentWrapper, wrapperClassName)}\n ref={mergedWrapperRef}\n data-testid={dataTestId}\n style={styleObject}\n onClickCapture={onClick}\n data-popper-reference-hidden={isReferenceHidden}\n >\n <CSSTransition\n classNames={transitionOptions.classNames}\n nodeRef={contentRef}\n in={isOpen}\n appear={!!animationType}\n timeout={showDelay}\n >\n <div\n className={cx(styles.contentComponent, getStyle(styles, camelCase(position)), {\n [getStyle(styles, camelCase(\"edge-\" + startingEdge))]: startingEdge,\n [styles.hasTooltip]: hasTooltip\n })}\n ref={contentRef}\n >\n {React.Children.toArray(children).map((child: ReactElement) => {\n return cloneElement(child, {\n onMouseEnter: chainFunctions([child.props.onMouseEnter, onMouseEnter]),\n onMouseLeave: chainFunctions([child.props.onMouseLeave, onMouseLeave])\n });\n })}\n </div>\n </CSSTransition>\n </span>\n );\n }\n);\n\nexport default DialogContent;\n"],"names":["EMPTY_OBJECT","ESCAPE_KEYS","keyCodes","ESCAPE","DialogContent","forwardRef","_ref","_ref$onEsc","onEsc","NOOP","children","position","wrapperClassName","_ref$isOpen","isOpen","startingEdge","_ref$animationType","animationType","_ref$onMouseEnter","onMouseEnter","_ref$onMouseLeave","onMouseLeave","_ref$onClickOutside","onClickOutside","_ref$onClick","onClick","_ref$onContextMenu","onContextMenu","showDelay","_ref$styleObject","styleObject","isReferenceHidden","_ref$hasTooltip","hasTooltip","containerSelector","_ref$disableContainer","disableContainerScroll","dataTestId","contentRef","useRef","wrapperRef","mergedWrapperRef","useMergeRef","onOutSideClick","useCallback","event","overrideOnContextMenu","useKeyEvent","keys","callback","useClickOutside","ref","eventName","_useDisableScroll","useDisableScroll","disableScroll","enableScroll","useEffect","transitionOptions","classNames","undefined","appear","styles","expandAppear","appearActive","expandAppearActive","exit","expandExit","opacitySlideAppear","opacitySlideAppearActive","React","createElement","className","cx","contentWrapper","style","onClickCapture","CSSTransition","nodeRef","in","timeout","contentComponent","getStyle","camelCase","_defineProperty","Children","toArray","map","child","cloneElement","chainFunctions","props"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import c from"react-focus-lock";import{AnimatePresence as d,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p,ComponentVibeId as v}from"../../../tests/constants.js";import y from"./Modal.module.scss.js";import E from"../ModalTopActions/ModalTopActions.js";import{getStyle as b}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as j}from"es-toolkit";import{ModalProvider as A}from"../context/ModalContext.js";import{keyCodes as T}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationFullViewVariants as h,modalAnimationAnchorPopVariants as x,modalAnimationCenterPopVariants as M,modalAnimationOverlayVariants as L}from"../utils/animationVariants.js";import{createPortal as k}from"react-dom";import F from"../hooks/usePortalTarget/usePortalTarget.js";import P from"../hooks/useFocusEscapeTargets/useFocusEscapeTargets.js";import g from"../../LayerProvider/LayerProvider.js";import w from"../../../hooks/useMergeRef.js";var C=c.default||c,I=r((function(r,c){var I=r.id,N=r.show,z=r.size,D=void 0===z?"medium":z,H=r.renderHeaderAction,_=r.closeButtonTheme,B=r.closeButtonAriaLabel,O=r.onClose,R=void 0===O?function(){}:O,V=r.autoFocus,X=void 0===V||V,K=r.allowFocusEscapeTo,S=r.onFocusAttempt,Y=r.anchorElementRef,q=r.alertModal,G=r.container,J=void 0===G?document.body:G,Q=r.children,U=r.style,W=r.zIndex,Z=r.className,$=r["data-testid"],ee=r["aria-labelledby"],te=r["aria-describedby"],oe=F(J),re=a(null),ae=w(c,re),ie=a(null),se=i(),ne=e(se,2),le=ne[0],me=ne[1],ce=i(),de=e(ce,2),ue=de[0],fe=de[1],pe=s((function(e){ee||me(e)}),[ee]),ve=s((function(e){te||fe(e)}),[te]),ye=n((function(){return{modalId:I,setTitleId:pe,setDescriptionId:ve,autoFocus:X}}),[I,pe,ve,X]),Ee=s((function(e){N&&!q&&R(e)}),[N,q,R]),be=s((function(e){e.key===T.ESCAPE&&N&&!q&&R(e)}),[q,R,N]),je="full-view"===D?h:(null==Y?void 0:Y.current)?x:M,Ae=W?{"--monday-modal-z-index":W}:{},Te=P(K),he=s((function(e){if(S){var t=S(e);return!0===t||t instanceof HTMLElement&&(t.focus(),!1)}return!Te(e)}),[S,Te]);return o.createElement(d,null,N&&o.createElement(g,{layerRef:ie},o.createElement(A,{value:ye},k(o.createElement(C,{returnFocus:!0,autoFocus:X,whiteList:he},o.createElement("div",{ref:ie,className:y.container,style:Ae},o.createElement(u.div,{variants:L,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,I),className:y.overlay,onClick:Ee,"aria-hidden":!0}),o.createElement(m,{forwardProps:!0,ref:ae},o.createElement(u.div,{variants:je,initial:"exit",animate:"enter",exit:"exit",custom:Y,className:l(y.modal,b(y,j("size-"+D)),t({},y.withHeaderAction,!!H),Z),id:I,"data-testid":$||f(p.MODAL_NEXT,I),"data-vibe":v.MODAL,role:"dialog","aria-modal":!0,"aria-labelledby":ee||le,"aria-describedby":te||ue,style:U,onKeyDown:be,tabIndex:-1},Q,o.createElement(E,{renderAction:H,theme:_,closeButtonAriaLabel:B,onClose:R}))))),oe))))}));export{I as default};
1
+ import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import c from"react-focus-lock";import{AnimatePresence as d,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p,ComponentVibeId as v}from"../../../tests/constants.js";import y from"./Modal.module.scss.js";import E from"../ModalTopActions/ModalTopActions.js";import{getStyle as b}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as A}from"es-toolkit";import{ModalProvider as j}from"../context/ModalContext.js";import{keyCodes as h}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationFullViewVariants as x,modalAnimationAnchorPopVariants as M,modalAnimationCenterPopVariants as L,modalAnimationOverlayVariants as T}from"../utils/animationVariants.js";import{createPortal as P}from"react-dom";import k from"../hooks/usePortalTarget/usePortalTarget.js";import C from"../../LayerProvider/LayerProvider.js";import w from"../../../hooks/useMergeRef.js";var I=c.default||c,N=r((function(r,c){var N=r.id,g=r.show,z=r.size,D=void 0===z?"medium":z,F=r.renderHeaderAction,H=r.closeButtonTheme,_=r.closeButtonAriaLabel,B=r.onClose,O=void 0===B?function(){}:B,R=r.autoFocus,V=void 0===R||R,X=r.onFocusAttempt,K=r.anchorElementRef,S=r.alertModal,Y=r.container,q=void 0===Y?document.body:Y,G=r.children,J=r.style,Q=r.zIndex,U=r.className,W=r["data-testid"],Z=r["aria-labelledby"],$=r["aria-describedby"],ee=k(q),te=a(null),oe=w(c,te),re=a(null),ae=i(),ie=e(ae,2),se=ie[0],ne=ie[1],le=i(),me=e(le,2),ce=me[0],de=me[1],ue=s((function(e){Z||ne(e)}),[Z]),fe=s((function(e){$||de(e)}),[$]),pe=n((function(){return{modalId:N,setTitleId:ue,setDescriptionId:fe,autoFocus:V}}),[N,ue,fe,V]),ve=s((function(e){g&&!S&&O(e)}),[g,S,O]),ye=s((function(e){e.key===h.ESCAPE&&g&&!S&&O(e)}),[S,O,g]),Ee="full-view"===D?x:(null==K?void 0:K.current)?M:L,be=Q?{"--monday-modal-z-index":Q}:{},Ae=s((function(e){if(!X)return!0;var t=X(e);return!0===t||t instanceof HTMLElement&&(t.focus(),!1)}),[X]);return o.createElement(d,null,g&&o.createElement(C,{layerRef:re},o.createElement(j,{value:pe},P(o.createElement(I,{returnFocus:!0,autoFocus:V,whiteList:Ae},o.createElement("div",{ref:re,className:y.container,style:be},o.createElement(u.div,{variants:T,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,N),className:y.overlay,onClick:ve,"aria-hidden":!0}),o.createElement(m,{forwardProps:!0,ref:oe},o.createElement(u.div,{variants:Ee,initial:"exit",animate:"enter",exit:"exit",custom:K,className:l(y.modal,b(y,A("size-"+D)),t({},y.withHeaderAction,!!F),U),id:N,"data-testid":W||f(p.MODAL_NEXT,N),"data-vibe":v.MODAL,role:"dialog","aria-modal":!0,"aria-labelledby":Z||se,"aria-describedby":$||ce,style:J,onKeyDown:ye,tabIndex:-1},G,o.createElement(E,{renderAction:F,theme:H,closeButtonAriaLabel:_,onClose:O}))))),ee))))}));export{N as default};
2
2
  //# sourceMappingURL=Modal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n modalAnimationAnchorPopVariants,\n modalAnimationCenterPopVariants,\n modalAnimationFullViewVariants,\n modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport useFocusEscapeTargets from \"../hooks/useFocusEscapeTargets/useFocusEscapeTargets\";\nimport { LayerProvider } from \"../../LayerProvider\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n autoFocus = true,\n allowFocusEscapeTo,\n onFocusAttempt,\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId,\n \"aria-labelledby\": ariaLabelledby,\n \"aria-describedby\": ariaDescribedby\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const modalRef = useRef<HTMLDivElement>(null);\n const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback(\n (newId: string) => {\n if (ariaLabelledby) return;\n setTitleId(newId);\n },\n [ariaLabelledby]\n );\n const setDescriptionIdCallback = useCallback(\n (newId: string) => {\n if (ariaDescribedby) return;\n setDescriptionId(newId);\n },\n [ariaDescribedby]\n );\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback,\n autoFocus\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n e => {\n if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n onClose(e);\n },\n [alertModal, onClose, show]\n );\n\n const modalAnimationVariants =\n size === \"full-view\"\n ? modalAnimationFullViewVariants\n : anchorElementRef?.current\n ? modalAnimationAnchorPopVariants\n : modalAnimationCenterPopVariants;\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n const shouldAllowFocusEscape = useFocusEscapeTargets(allowFocusEscapeTo);\n\n const handleFocusLockWhiteList = useCallback(\n (nextFocusedElement?: HTMLElement) => {\n if (onFocusAttempt) {\n const outcome = onFocusAttempt(nextFocusedElement);\n\n if (outcome === true) return true;\n\n if (outcome instanceof HTMLElement) {\n outcome.focus();\n return false;\n }\n\n return false;\n }\n\n // Check if element should be allowed to escape focus lock\n if (shouldAllowFocusEscape(nextFocusedElement)) {\n return false; // Tell focus-lock to ignore it\n }\n\n // Element doesn't match any exception - let focus-lock manage it\n return true;\n },\n [onFocusAttempt, shouldAllowFocusEscape]\n );\n\n return (\n <AnimatePresence>\n {show && (\n <LayerProvider layerRef={containerRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n <div ref={containerRef} className={styles.container} style={zIndexStyle}>\n <motion.div\n variants={modalAnimationOverlayVariants}\n initial=\"initial\"\n animate=\"enter\"\n exit=\"exit\"\n data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n />\n <RemoveScroll forwardProps ref={modalMergedRef}>\n <motion.div\n variants={modalAnimationVariants}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n custom={anchorElementRef}\n className={cx(\n styles.modal,\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n data-vibe={ComponentVibeId.MODAL}\n role=\"dialog\"\n aria-modal\n aria-labelledby={ariaLabelledby || titleId}\n aria-describedby={ariaDescribedby || descriptionId}\n style={style}\n onKeyDown={onModalKeyDown}\n tabIndex={-1}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </motion.div>\n </RemoveScroll>\n </div>\n </FocusLockComponent>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n )}\n </AnimatePresence>\n );\n }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","allowFocusEscapeTo","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","modalAnimationVariants","modalAnimationFullViewVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","shouldAllowFocusEscape","useFocusEscapeTargets","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","styles","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","ComponentVibeId","MODAL","role","onKeyDown","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n modalAnimationAnchorPopVariants,\n modalAnimationCenterPopVariants,\n modalAnimationFullViewVariants,\n modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport { LayerProvider } from \"../../LayerProvider\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n autoFocus = true,\n onFocusAttempt,\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId,\n \"aria-labelledby\": ariaLabelledby,\n \"aria-describedby\": ariaDescribedby\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const modalRef = useRef<HTMLDivElement>(null);\n const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback(\n (newId: string) => {\n if (ariaLabelledby) return;\n setTitleId(newId);\n },\n [ariaLabelledby]\n );\n const setDescriptionIdCallback = useCallback(\n (newId: string) => {\n if (ariaDescribedby) return;\n setDescriptionId(newId);\n },\n [ariaDescribedby]\n );\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback,\n autoFocus\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n e => {\n if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n onClose(e);\n },\n [alertModal, onClose, show]\n );\n\n const modalAnimationVariants =\n size === \"full-view\"\n ? modalAnimationFullViewVariants\n : anchorElementRef?.current\n ? modalAnimationAnchorPopVariants\n : modalAnimationCenterPopVariants;\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n const handleFocusLockWhiteList = useCallback(\n (nextFocusedElement?: HTMLElement) => {\n if (!onFocusAttempt) return true;\n\n const outcome = onFocusAttempt(nextFocusedElement);\n\n if (outcome === true) return true;\n\n if (outcome instanceof HTMLElement) {\n outcome.focus();\n return false;\n }\n\n return false;\n },\n [onFocusAttempt]\n );\n\n return (\n <AnimatePresence>\n {show && (\n <LayerProvider layerRef={containerRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n <div ref={containerRef} className={styles.container} style={zIndexStyle}>\n <motion.div\n variants={modalAnimationOverlayVariants}\n initial=\"initial\"\n animate=\"enter\"\n exit=\"exit\"\n data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n />\n <RemoveScroll forwardProps ref={modalMergedRef}>\n <motion.div\n variants={modalAnimationVariants}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n custom={anchorElementRef}\n className={cx(\n styles.modal,\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n data-vibe={ComponentVibeId.MODAL}\n role=\"dialog\"\n aria-modal\n aria-labelledby={ariaLabelledby || titleId}\n aria-describedby={ariaDescribedby || descriptionId}\n style={style}\n onKeyDown={onModalKeyDown}\n tabIndex={-1}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </motion.div>\n </RemoveScroll>\n </div>\n </FocusLockComponent>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n )}\n </AnimatePresence>\n );\n }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","modalAnimationVariants","modalAnimationFullViewVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","styles","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","ComponentVibeId","MODAL","role","onKeyDown","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as t,useRef as a,useCallback as s,useEffect as r,cloneElement as i}from"react";import n from"classnames";import{camelCase as p}from"es-toolkit";import{CSSTransition as l}from"react-transition-group";import c from"../../../hooks/useClickOutside/index.js";import{chainFunctions as d,NOOP as m}from"../../../utils/function-utils.js";import u from"../../../hooks/useKeyEvent/index.js";import{keyCodes as f}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{getStyle as v}from"../../../helpers/typesciptCssModulesHelper.js";import y from"./DialogContent.module.scss.js";import k from"../../../hooks/useDisableScroll/index.js";var C={},x=[f.ESCAPE],E=t((function(t,f){var E=t.onEsc,h=void 0===E?m:E,b=t.children,j=t.position,A=t.wrapperClassName,N=t.isOpen,g=void 0!==N&&N,M=t.startingEdge,S=t.animationType,w=void 0===S?"expand":S,O=t.onMouseEnter,D=void 0===O?m:O,H=t.onMouseLeave,L=void 0===H?m:H,P=t.onClickOutside,T=void 0===P?m:P,R=t.onClick,_=void 0===R?m:R,z=t.onContextMenu,B=void 0===z?m:z,K=t.showDelay,W=t.styleObject,q=void 0===W?C:W,F=t.isReferenceHidden,G=t.hasTooltip,I=void 0!==G&&G,J=t.containerSelector,Q=t.disableContainerScroll,U=void 0!==Q&&Q,V=t["data-testid"],X=a(null),Y=s((function(e){if(g)return T(e,"clickoutside")}),[g,T]),Z=s((function(e){g&&B(e)}),[g,B]);u({keys:x,callback:h}),c({callback:Y,ref:X}),c({eventName:"contextmenu",callback:Z,ref:X});var $=k("string"==typeof U?U:J),ee=$.disableScroll,oe=$.enableScroll;r((function(){U&&(g?ee():oe())}),[U,ee,oe,g]);var te={classNames:void 0};switch(w){case"expand":te.classNames={appear:y.expandAppear,appearActive:y.expandAppearActive,exit:y.expandExit};break;case"opacity-and-slide":te.classNames={appear:y.opacitySlideAppear,appearActive:y.opacitySlideAppearActive}}return o.createElement("span",{className:n("monday-style-dialog-content-wrapper",y.contentWrapper,A),ref:f,"data-testid":V,style:q,onClickCapture:_,"data-popper-reference-hidden":F},o.createElement(l,{classNames:te.classNames,nodeRef:X,in:g,appear:!!w,timeout:K},o.createElement("div",{className:n(y.contentComponent,v(y,p(j)),e(e({},v(y,p("edge-"+M)),M),y.hasTooltip,I)),ref:X},o.Children.toArray(b).map((function(e){return i(e,{onMouseEnter:d([e.props.onMouseEnter,D]),onMouseLeave:d([e.props.onMouseLeave,L])})})))))}));export{E as default};
1
+ import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as t,useRef as a,useCallback as s,useEffect as r,cloneElement as i}from"react";import n from"classnames";import{camelCase as p}from"es-toolkit";import{CSSTransition as l}from"react-transition-group";import c from"../../../hooks/useClickOutside/index.js";import{chainFunctions as d,NOOP as m}from"../../../utils/function-utils.js";import u from"../../../hooks/useKeyEvent/index.js";import{keyCodes as f}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{getStyle as v}from"../../../helpers/typesciptCssModulesHelper.js";import k from"./DialogContent.module.scss.js";import y from"../../../hooks/useDisableScroll/index.js";import C from"../../../hooks/useMergeRef.js";var x={},h=[f.ESCAPE],E=t((function(t,f){var E=t.onEsc,j=void 0===E?m:E,b=t.children,A=t.position,g=t.wrapperClassName,M=t.isOpen,N=void 0!==M&&M,S=t.startingEdge,w=t.animationType,O=void 0===w?"expand":w,D=t.onMouseEnter,H=void 0===D?m:D,L=t.onMouseLeave,P=void 0===L?m:L,R=t.onClickOutside,T=void 0===R?m:R,_=t.onClick,z=void 0===_?m:_,B=t.onContextMenu,K=void 0===B?m:B,W=t.showDelay,q=t.styleObject,F=void 0===q?x:q,G=t.isReferenceHidden,I=t.hasTooltip,J=void 0!==I&&I,Q=t.containerSelector,U=t.disableContainerScroll,V=void 0!==U&&U,X=t["data-testid"],Y=a(null),Z=a(null),$=C(f,Z),ee=s((function(e){if(N)return T(e,"clickoutside")}),[N,T]),oe=s((function(e){N&&K(e)}),[N,K]);u({keys:h,callback:j}),c({callback:ee,ref:Z}),c({eventName:"contextmenu",callback:oe,ref:Z});var te=y("string"==typeof V?V:Q),ae=te.disableScroll,se=te.enableScroll;r((function(){V&&(N?ae():se())}),[V,ae,se,N]);var re={classNames:void 0};switch(O){case"expand":re.classNames={appear:k.expandAppear,appearActive:k.expandAppearActive,exit:k.expandExit};break;case"opacity-and-slide":re.classNames={appear:k.opacitySlideAppear,appearActive:k.opacitySlideAppearActive}}return o.createElement("span",{className:n("monday-style-dialog-content-wrapper",k.contentWrapper,g),ref:$,"data-testid":X,style:F,onClickCapture:z,"data-popper-reference-hidden":G},o.createElement(l,{classNames:re.classNames,nodeRef:Y,in:N,appear:!!O,timeout:W},o.createElement("div",{className:n(k.contentComponent,v(k,p(A)),e(e({},v(k,p("edge-"+S)),S),k.hasTooltip,J)),ref:Y},o.Children.toArray(b).map((function(e){return i(e,{onMouseEnter:d([e.props.onMouseEnter,H]),onMouseLeave:d([e.props.onMouseLeave,P])})})))))}));export{E as default};
2
2
  //# sourceMappingURL=DialogContent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DialogContent.js","sources":["../../../../../src/components/Dialog/DialogContent/DialogContent.tsx"],"sourcesContent":["import React, {\n cloneElement,\n type CSSProperties,\n forwardRef,\n type ReactElement,\n useCallback,\n useEffect,\n useRef\n} from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type CSSTransitionProps } from \"react-transition-group/CSSTransition\";\nimport useClickOutside from \"../../../hooks/useClickOutside\";\nimport { chainFunctions, NOOP } from \"../../../utils/function-utils\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { keyCodes } from \"../../../constants\";\nimport { type DialogAnimationType, type DialogTriggerEvent } from \"../Dialog.types\";\nimport type * as PopperJS from \"@popperjs/core\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./DialogContent.module.scss\";\nimport useDisableScroll from \"../../../hooks/useDisableScroll\";\n\nconst EMPTY_OBJECT = {};\nconst ESCAPE_KEYS = [keyCodes.ESCAPE];\n\nexport interface DialogContentProps extends VibeComponentProps {\n /**\n * The content inside the dialog.\n */\n children?: ReactElement | ReactElement[];\n /**\n * The placement of the dialog relative to the reference element.\n */\n position?: PopperJS.Placement;\n /**\n * Class name applied to the dialog wrapper.\n */\n wrapperClassName?: string;\n /**\n * If true, the dialog is open.\n */\n isOpen?: boolean;\n // TODO: [breaking] use type\n /**\n * The starting edge of the dialog.\n */\n startingEdge?: any;\n /**\n * The animation type used for showing/hiding the dialog.\n */\n animationType?: DialogAnimationType;\n /**\n * Callback fired when the Escape key is pressed.\n */\n onEsc?: (event: React.KeyboardEvent) => void;\n /**\n * Callback fired when the mouse enters the dialog.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse leaves the dialog.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when clicking outside the dialog.\n */\n onClickOutside?: (event: React.MouseEvent, hideShowEvent: DialogTriggerEvent) => void;\n /**\n * Callback fired when clicking inside the dialog.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * Delay before showing the dialog.\n */\n showDelay?: number;\n /**\n * Inline styles applied to the dialog.\n */\n styleObject?: CSSProperties;\n /**\n * If true, hides the reference element when the dialog is shown.\n */\n isReferenceHidden?: boolean;\n /**\n * If true, applies tooltip arrow to the dialog.\n */\n hasTooltip?: boolean;\n /**\n * The CSS selector of the container where the dialog should be rendered.\n */\n containerSelector?: string;\n /**\n * If true, disables scrolling in the container when the dialog is open.\n */\n disableContainerScroll?: boolean | string;\n /**\n * Callback fired when the context menu (right-click) event occurs outside the dialog.\n */\n onContextMenu?: (e: React.MouseEvent) => void;\n}\n\nconst DialogContent = forwardRef(\n (\n {\n onEsc = NOOP,\n children,\n position,\n wrapperClassName,\n isOpen = false,\n startingEdge,\n animationType = \"expand\",\n onMouseEnter = NOOP,\n onMouseLeave = NOOP,\n onClickOutside = NOOP,\n onClick = NOOP,\n onContextMenu = NOOP,\n showDelay,\n styleObject = EMPTY_OBJECT,\n isReferenceHidden,\n hasTooltip = false,\n containerSelector,\n disableContainerScroll = false,\n \"data-testid\": dataTestId\n }: DialogContentProps,\n forwardRef: React.ForwardedRef<HTMLElement>\n ) => {\n const ref = useRef<HTMLDivElement>(null);\n const onOutSideClick = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n return onClickOutside(event, \"clickoutside\");\n }\n },\n [isOpen, onClickOutside]\n );\n const overrideOnContextMenu = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n onContextMenu(event);\n }\n },\n [isOpen, onContextMenu]\n );\n useKeyEvent({ keys: ESCAPE_KEYS, callback: onEsc });\n useClickOutside({ callback: onOutSideClick, ref });\n useClickOutside({ eventName: \"contextmenu\", callback: overrideOnContextMenu, ref });\n const selectorToDisable = typeof disableContainerScroll === \"string\" ? disableContainerScroll : containerSelector;\n const { disableScroll, enableScroll } = useDisableScroll(selectorToDisable);\n\n useEffect(() => {\n if (disableContainerScroll) {\n if (isOpen) {\n disableScroll();\n } else {\n enableScroll();\n }\n }\n }, [disableContainerScroll, disableScroll, enableScroll, isOpen]);\n\n const transitionOptions: Partial<CSSTransitionProps> = { classNames: undefined };\n\n switch (animationType) {\n case \"expand\":\n transitionOptions.classNames = {\n appear: styles.expandAppear,\n appearActive: styles.expandAppearActive,\n exit: styles.expandExit\n };\n break;\n case \"opacity-and-slide\":\n transitionOptions.classNames = {\n appear: styles.opacitySlideAppear,\n appearActive: styles.opacitySlideAppearActive\n };\n break;\n }\n return (\n <span\n // don't remove old classname - override from Monolith\n className={cx(\"monday-style-dialog-content-wrapper\", styles.contentWrapper, wrapperClassName)}\n ref={forwardRef}\n data-testid={dataTestId}\n style={styleObject}\n onClickCapture={onClick}\n data-popper-reference-hidden={isReferenceHidden}\n >\n <CSSTransition\n classNames={transitionOptions.classNames}\n nodeRef={ref}\n in={isOpen}\n appear={!!animationType}\n timeout={showDelay}\n >\n <div\n className={cx(styles.contentComponent, getStyle(styles, camelCase(position)), {\n [getStyle(styles, camelCase(\"edge-\" + startingEdge))]: startingEdge,\n [styles.hasTooltip]: hasTooltip\n })}\n ref={ref}\n >\n {React.Children.toArray(children).map((child: ReactElement) => {\n return cloneElement(child, {\n onMouseEnter: chainFunctions([child.props.onMouseEnter, onMouseEnter]),\n onMouseLeave: chainFunctions([child.props.onMouseLeave, onMouseLeave])\n });\n })}\n </div>\n </CSSTransition>\n </span>\n );\n }\n);\n\nexport default DialogContent;\n"],"names":["EMPTY_OBJECT","ESCAPE_KEYS","keyCodes","ESCAPE","DialogContent","forwardRef","_ref","_ref$onEsc","onEsc","NOOP","children","position","wrapperClassName","_ref$isOpen","isOpen","startingEdge","_ref$animationType","animationType","_ref$onMouseEnter","onMouseEnter","_ref$onMouseLeave","onMouseLeave","_ref$onClickOutside","onClickOutside","_ref$onClick","onClick","_ref$onContextMenu","onContextMenu","showDelay","_ref$styleObject","styleObject","isReferenceHidden","_ref$hasTooltip","hasTooltip","containerSelector","_ref$disableContainer","disableContainerScroll","dataTestId","ref","useRef","onOutSideClick","useCallback","event","overrideOnContextMenu","useKeyEvent","keys","callback","useClickOutside","eventName","_useDisableScroll","useDisableScroll","disableScroll","enableScroll","useEffect","transitionOptions","classNames","undefined","appear","styles","expandAppear","appearActive","expandAppearActive","exit","expandExit","opacitySlideAppear","opacitySlideAppearActive","React","createElement","className","cx","contentWrapper","style","onClickCapture","CSSTransition","nodeRef","in","timeout","contentComponent","getStyle","camelCase","_defineProperty","Children","toArray","map","child","cloneElement","chainFunctions","props"],"mappings":"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"}
1
+ {"version":3,"file":"DialogContent.js","sources":["../../../../../src/components/Dialog/DialogContent/DialogContent.tsx"],"sourcesContent":["import React, {\n cloneElement,\n type CSSProperties,\n forwardRef,\n type ReactElement,\n useCallback,\n useEffect,\n useRef\n} from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type CSSTransitionProps } from \"react-transition-group/CSSTransition\";\nimport useClickOutside from \"../../../hooks/useClickOutside\";\nimport { chainFunctions, NOOP } from \"../../../utils/function-utils\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { keyCodes } from \"../../../constants\";\nimport { type DialogAnimationType, type DialogTriggerEvent } from \"../Dialog.types\";\nimport type * as PopperJS from \"@popperjs/core\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./DialogContent.module.scss\";\nimport useDisableScroll from \"../../../hooks/useDisableScroll\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\nconst EMPTY_OBJECT = {};\nconst ESCAPE_KEYS = [keyCodes.ESCAPE];\n\nexport interface DialogContentProps extends VibeComponentProps {\n /**\n * The content inside the dialog.\n */\n children?: ReactElement | ReactElement[];\n /**\n * The placement of the dialog relative to the reference element.\n */\n position?: PopperJS.Placement;\n /**\n * Class name applied to the dialog wrapper.\n */\n wrapperClassName?: string;\n /**\n * If true, the dialog is open.\n */\n isOpen?: boolean;\n // TODO: [breaking] use type\n /**\n * The starting edge of the dialog.\n */\n startingEdge?: any;\n /**\n * The animation type used for showing/hiding the dialog.\n */\n animationType?: DialogAnimationType;\n /**\n * Callback fired when the Escape key is pressed.\n */\n onEsc?: (event: React.KeyboardEvent) => void;\n /**\n * Callback fired when the mouse enters the dialog.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse leaves the dialog.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when clicking outside the dialog.\n */\n onClickOutside?: (event: React.MouseEvent, hideShowEvent: DialogTriggerEvent) => void;\n /**\n * Callback fired when clicking inside the dialog.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * Delay before showing the dialog.\n */\n showDelay?: number;\n /**\n * Inline styles applied to the dialog.\n */\n styleObject?: CSSProperties;\n /**\n * If true, hides the reference element when the dialog is shown.\n */\n isReferenceHidden?: boolean;\n /**\n * If true, applies tooltip arrow to the dialog.\n */\n hasTooltip?: boolean;\n /**\n * The CSS selector of the container where the dialog should be rendered.\n */\n containerSelector?: string;\n /**\n * If true, disables scrolling in the container when the dialog is open.\n */\n disableContainerScroll?: boolean | string;\n /**\n * Callback fired when the context menu (right-click) event occurs outside the dialog.\n */\n onContextMenu?: (e: React.MouseEvent) => void;\n}\n\nconst DialogContent = forwardRef(\n (\n {\n onEsc = NOOP,\n children,\n position,\n wrapperClassName,\n isOpen = false,\n startingEdge,\n animationType = \"expand\",\n onMouseEnter = NOOP,\n onMouseLeave = NOOP,\n onClickOutside = NOOP,\n onClick = NOOP,\n onContextMenu = NOOP,\n showDelay,\n styleObject = EMPTY_OBJECT,\n isReferenceHidden,\n hasTooltip = false,\n containerSelector,\n disableContainerScroll = false,\n \"data-testid\": dataTestId\n }: DialogContentProps,\n forwardRef: React.ForwardedRef<HTMLElement>\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n\n const wrapperRef = useRef<HTMLSpanElement>(null);\n const mergedWrapperRef = useMergeRef(forwardRef, wrapperRef);\n\n const onOutSideClick = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n return onClickOutside(event, \"clickoutside\");\n }\n },\n [isOpen, onClickOutside]\n );\n const overrideOnContextMenu = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n onContextMenu(event);\n }\n },\n [isOpen, onContextMenu]\n );\n useKeyEvent({ keys: ESCAPE_KEYS, callback: onEsc });\n // Watch the wrapper ref to include padding area, tooltip arrows, and nested Dialogs\n useClickOutside({ callback: onOutSideClick, ref: wrapperRef });\n useClickOutside({ eventName: \"contextmenu\", callback: overrideOnContextMenu, ref: wrapperRef });\n const selectorToDisable = typeof disableContainerScroll === \"string\" ? disableContainerScroll : containerSelector;\n const { disableScroll, enableScroll } = useDisableScroll(selectorToDisable);\n\n useEffect(() => {\n if (disableContainerScroll) {\n if (isOpen) {\n disableScroll();\n } else {\n enableScroll();\n }\n }\n }, [disableContainerScroll, disableScroll, enableScroll, isOpen]);\n\n const transitionOptions: Partial<CSSTransitionProps> = { classNames: undefined };\n\n switch (animationType) {\n case \"expand\":\n transitionOptions.classNames = {\n appear: styles.expandAppear,\n appearActive: styles.expandAppearActive,\n exit: styles.expandExit\n };\n break;\n case \"opacity-and-slide\":\n transitionOptions.classNames = {\n appear: styles.opacitySlideAppear,\n appearActive: styles.opacitySlideAppearActive\n };\n break;\n }\n return (\n <span\n // don't remove old classname - override from Monolith\n className={cx(\"monday-style-dialog-content-wrapper\", styles.contentWrapper, wrapperClassName)}\n ref={mergedWrapperRef}\n data-testid={dataTestId}\n style={styleObject}\n onClickCapture={onClick}\n data-popper-reference-hidden={isReferenceHidden}\n >\n <CSSTransition\n classNames={transitionOptions.classNames}\n nodeRef={contentRef}\n in={isOpen}\n appear={!!animationType}\n timeout={showDelay}\n >\n <div\n className={cx(styles.contentComponent, getStyle(styles, camelCase(position)), {\n [getStyle(styles, camelCase(\"edge-\" + startingEdge))]: startingEdge,\n [styles.hasTooltip]: hasTooltip\n })}\n ref={contentRef}\n >\n {React.Children.toArray(children).map((child: ReactElement) => {\n return cloneElement(child, {\n onMouseEnter: chainFunctions([child.props.onMouseEnter, onMouseEnter]),\n onMouseLeave: chainFunctions([child.props.onMouseLeave, onMouseLeave])\n });\n })}\n </div>\n </CSSTransition>\n </span>\n );\n }\n);\n\nexport default DialogContent;\n"],"names":["EMPTY_OBJECT","ESCAPE_KEYS","keyCodes","ESCAPE","DialogContent","forwardRef","_ref","_ref$onEsc","onEsc","NOOP","children","position","wrapperClassName","_ref$isOpen","isOpen","startingEdge","_ref$animationType","animationType","_ref$onMouseEnter","onMouseEnter","_ref$onMouseLeave","onMouseLeave","_ref$onClickOutside","onClickOutside","_ref$onClick","onClick","_ref$onContextMenu","onContextMenu","showDelay","_ref$styleObject","styleObject","isReferenceHidden","_ref$hasTooltip","hasTooltip","containerSelector","_ref$disableContainer","disableContainerScroll","dataTestId","contentRef","useRef","wrapperRef","mergedWrapperRef","useMergeRef","onOutSideClick","useCallback","event","overrideOnContextMenu","useKeyEvent","keys","callback","useClickOutside","ref","eventName","_useDisableScroll","useDisableScroll","disableScroll","enableScroll","useEffect","transitionOptions","classNames","undefined","appear","styles","expandAppear","appearActive","expandAppearActive","exit","expandExit","opacitySlideAppear","opacitySlideAppearActive","React","createElement","className","cx","contentWrapper","style","onClickCapture","CSSTransition","nodeRef","in","timeout","contentComponent","getStyle","camelCase","_defineProperty","Children","toArray","map","child","cloneElement","chainFunctions","props"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import c from"react-focus-lock";import{AnimatePresence as d,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p,ComponentVibeId as v}from"../../../tests/constants.js";import y from"./Modal.module.scss.js";import E from"../ModalTopActions/ModalTopActions.js";import{getStyle as b}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as j}from"es-toolkit";import{ModalProvider as A}from"../context/ModalContext.js";import{keyCodes as T}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationFullViewVariants as h,modalAnimationAnchorPopVariants as x,modalAnimationCenterPopVariants as M,modalAnimationOverlayVariants as L}from"../utils/animationVariants.js";import{createPortal as k}from"react-dom";import F from"../hooks/usePortalTarget/usePortalTarget.js";import P from"../hooks/useFocusEscapeTargets/useFocusEscapeTargets.js";import g from"../../LayerProvider/LayerProvider.js";import w from"../../../hooks/useMergeRef.js";var C=c.default||c,I=r((function(r,c){var I=r.id,N=r.show,z=r.size,D=void 0===z?"medium":z,H=r.renderHeaderAction,_=r.closeButtonTheme,B=r.closeButtonAriaLabel,O=r.onClose,R=void 0===O?function(){}:O,V=r.autoFocus,X=void 0===V||V,K=r.allowFocusEscapeTo,S=r.onFocusAttempt,Y=r.anchorElementRef,q=r.alertModal,G=r.container,J=void 0===G?document.body:G,Q=r.children,U=r.style,W=r.zIndex,Z=r.className,$=r["data-testid"],ee=r["aria-labelledby"],te=r["aria-describedby"],oe=F(J),re=a(null),ae=w(c,re),ie=a(null),se=i(),ne=e(se,2),le=ne[0],me=ne[1],ce=i(),de=e(ce,2),ue=de[0],fe=de[1],pe=s((function(e){ee||me(e)}),[ee]),ve=s((function(e){te||fe(e)}),[te]),ye=n((function(){return{modalId:I,setTitleId:pe,setDescriptionId:ve,autoFocus:X}}),[I,pe,ve,X]),Ee=s((function(e){N&&!q&&R(e)}),[N,q,R]),be=s((function(e){e.key===T.ESCAPE&&N&&!q&&R(e)}),[q,R,N]),je="full-view"===D?h:(null==Y?void 0:Y.current)?x:M,Ae=W?{"--monday-modal-z-index":W}:{},Te=P(K),he=s((function(e){if(S){var t=S(e);return!0===t||t instanceof HTMLElement&&(t.focus(),!1)}return!Te(e)}),[S,Te]);return o.createElement(d,null,N&&o.createElement(g,{layerRef:ie},o.createElement(A,{value:ye},k(o.createElement(C,{returnFocus:!0,autoFocus:X,whiteList:he},o.createElement("div",{ref:ie,className:y.container,style:Ae},o.createElement(u.div,{variants:L,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,I),className:y.overlay,onClick:Ee,"aria-hidden":!0}),o.createElement(m,{forwardProps:!0,ref:ae},o.createElement(u.div,{variants:je,initial:"exit",animate:"enter",exit:"exit",custom:Y,className:l(y.modal,b(y,j("size-"+D)),t({},y.withHeaderAction,!!H),Z),id:I,"data-testid":$||f(p.MODAL_NEXT,I),"data-vibe":v.MODAL,role:"dialog","aria-modal":!0,"aria-labelledby":ee||le,"aria-describedby":te||ue,style:U,onKeyDown:be,tabIndex:-1},Q,o.createElement(E,{renderAction:H,theme:_,closeButtonAriaLabel:B,onClose:R}))))),oe))))}));export{I as default};
1
+ import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import c from"react-focus-lock";import{AnimatePresence as d,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p,ComponentVibeId as v}from"../../../tests/constants.js";import y from"./Modal.module.scss.js";import E from"../ModalTopActions/ModalTopActions.js";import{getStyle as b}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as A}from"es-toolkit";import{ModalProvider as j}from"../context/ModalContext.js";import{keyCodes as h}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationFullViewVariants as x,modalAnimationAnchorPopVariants as M,modalAnimationCenterPopVariants as L,modalAnimationOverlayVariants as T}from"../utils/animationVariants.js";import{createPortal as P}from"react-dom";import k from"../hooks/usePortalTarget/usePortalTarget.js";import C from"../../LayerProvider/LayerProvider.js";import w from"../../../hooks/useMergeRef.js";var I=c.default||c,N=r((function(r,c){var N=r.id,g=r.show,z=r.size,D=void 0===z?"medium":z,F=r.renderHeaderAction,H=r.closeButtonTheme,_=r.closeButtonAriaLabel,B=r.onClose,O=void 0===B?function(){}:B,R=r.autoFocus,V=void 0===R||R,X=r.onFocusAttempt,K=r.anchorElementRef,S=r.alertModal,Y=r.container,q=void 0===Y?document.body:Y,G=r.children,J=r.style,Q=r.zIndex,U=r.className,W=r["data-testid"],Z=r["aria-labelledby"],$=r["aria-describedby"],ee=k(q),te=a(null),oe=w(c,te),re=a(null),ae=i(),ie=e(ae,2),se=ie[0],ne=ie[1],le=i(),me=e(le,2),ce=me[0],de=me[1],ue=s((function(e){Z||ne(e)}),[Z]),fe=s((function(e){$||de(e)}),[$]),pe=n((function(){return{modalId:N,setTitleId:ue,setDescriptionId:fe,autoFocus:V}}),[N,ue,fe,V]),ve=s((function(e){g&&!S&&O(e)}),[g,S,O]),ye=s((function(e){e.key===h.ESCAPE&&g&&!S&&O(e)}),[S,O,g]),Ee="full-view"===D?x:(null==K?void 0:K.current)?M:L,be=Q?{"--monday-modal-z-index":Q}:{},Ae=s((function(e){if(!X)return!0;var t=X(e);return!0===t||t instanceof HTMLElement&&(t.focus(),!1)}),[X]);return o.createElement(d,null,g&&o.createElement(C,{layerRef:re},o.createElement(j,{value:pe},P(o.createElement(I,{returnFocus:!0,autoFocus:V,whiteList:Ae},o.createElement("div",{ref:re,className:y.container,style:be},o.createElement(u.div,{variants:T,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,N),className:y.overlay,onClick:ve,"aria-hidden":!0}),o.createElement(m,{forwardProps:!0,ref:oe},o.createElement(u.div,{variants:Ee,initial:"exit",animate:"enter",exit:"exit",custom:K,className:l(y.modal,b(y,A("size-"+D)),t({},y.withHeaderAction,!!F),U),id:N,"data-testid":W||f(p.MODAL_NEXT,N),"data-vibe":v.MODAL,role:"dialog","aria-modal":!0,"aria-labelledby":Z||se,"aria-describedby":$||ce,style:J,onKeyDown:ye,tabIndex:-1},G,o.createElement(E,{renderAction:F,theme:H,closeButtonAriaLabel:_,onClose:O}))))),ee))))}));export{N as default};
2
2
  //# sourceMappingURL=Modal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n modalAnimationAnchorPopVariants,\n modalAnimationCenterPopVariants,\n modalAnimationFullViewVariants,\n modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport useFocusEscapeTargets from \"../hooks/useFocusEscapeTargets/useFocusEscapeTargets\";\nimport { LayerProvider } from \"../../LayerProvider\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n autoFocus = true,\n allowFocusEscapeTo,\n onFocusAttempt,\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId,\n \"aria-labelledby\": ariaLabelledby,\n \"aria-describedby\": ariaDescribedby\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const modalRef = useRef<HTMLDivElement>(null);\n const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback(\n (newId: string) => {\n if (ariaLabelledby) return;\n setTitleId(newId);\n },\n [ariaLabelledby]\n );\n const setDescriptionIdCallback = useCallback(\n (newId: string) => {\n if (ariaDescribedby) return;\n setDescriptionId(newId);\n },\n [ariaDescribedby]\n );\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback,\n autoFocus\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n e => {\n if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n onClose(e);\n },\n [alertModal, onClose, show]\n );\n\n const modalAnimationVariants =\n size === \"full-view\"\n ? modalAnimationFullViewVariants\n : anchorElementRef?.current\n ? modalAnimationAnchorPopVariants\n : modalAnimationCenterPopVariants;\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n const shouldAllowFocusEscape = useFocusEscapeTargets(allowFocusEscapeTo);\n\n const handleFocusLockWhiteList = useCallback(\n (nextFocusedElement?: HTMLElement) => {\n if (onFocusAttempt) {\n const outcome = onFocusAttempt(nextFocusedElement);\n\n if (outcome === true) return true;\n\n if (outcome instanceof HTMLElement) {\n outcome.focus();\n return false;\n }\n\n return false;\n }\n\n // Check if element should be allowed to escape focus lock\n if (shouldAllowFocusEscape(nextFocusedElement)) {\n return false; // Tell focus-lock to ignore it\n }\n\n // Element doesn't match any exception - let focus-lock manage it\n return true;\n },\n [onFocusAttempt, shouldAllowFocusEscape]\n );\n\n return (\n <AnimatePresence>\n {show && (\n <LayerProvider layerRef={containerRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n <div ref={containerRef} className={styles.container} style={zIndexStyle}>\n <motion.div\n variants={modalAnimationOverlayVariants}\n initial=\"initial\"\n animate=\"enter\"\n exit=\"exit\"\n data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n />\n <RemoveScroll forwardProps ref={modalMergedRef}>\n <motion.div\n variants={modalAnimationVariants}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n custom={anchorElementRef}\n className={cx(\n styles.modal,\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n data-vibe={ComponentVibeId.MODAL}\n role=\"dialog\"\n aria-modal\n aria-labelledby={ariaLabelledby || titleId}\n aria-describedby={ariaDescribedby || descriptionId}\n style={style}\n onKeyDown={onModalKeyDown}\n tabIndex={-1}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </motion.div>\n </RemoveScroll>\n </div>\n </FocusLockComponent>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n )}\n </AnimatePresence>\n );\n }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","allowFocusEscapeTo","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","modalAnimationVariants","modalAnimationFullViewVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","shouldAllowFocusEscape","useFocusEscapeTargets","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","styles","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","ComponentVibeId","MODAL","role","onKeyDown","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n modalAnimationAnchorPopVariants,\n modalAnimationCenterPopVariants,\n modalAnimationFullViewVariants,\n modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport { LayerProvider } from \"../../LayerProvider\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n autoFocus = true,\n onFocusAttempt,\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId,\n \"aria-labelledby\": ariaLabelledby,\n \"aria-describedby\": ariaDescribedby\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const modalRef = useRef<HTMLDivElement>(null);\n const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback(\n (newId: string) => {\n if (ariaLabelledby) return;\n setTitleId(newId);\n },\n [ariaLabelledby]\n );\n const setDescriptionIdCallback = useCallback(\n (newId: string) => {\n if (ariaDescribedby) return;\n setDescriptionId(newId);\n },\n [ariaDescribedby]\n );\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback,\n autoFocus\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n e => {\n if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n onClose(e);\n },\n [alertModal, onClose, show]\n );\n\n const modalAnimationVariants =\n size === \"full-view\"\n ? modalAnimationFullViewVariants\n : anchorElementRef?.current\n ? modalAnimationAnchorPopVariants\n : modalAnimationCenterPopVariants;\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n const handleFocusLockWhiteList = useCallback(\n (nextFocusedElement?: HTMLElement) => {\n if (!onFocusAttempt) return true;\n\n const outcome = onFocusAttempt(nextFocusedElement);\n\n if (outcome === true) return true;\n\n if (outcome instanceof HTMLElement) {\n outcome.focus();\n return false;\n }\n\n return false;\n },\n [onFocusAttempt]\n );\n\n return (\n <AnimatePresence>\n {show && (\n <LayerProvider layerRef={containerRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n <div ref={containerRef} className={styles.container} style={zIndexStyle}>\n <motion.div\n variants={modalAnimationOverlayVariants}\n initial=\"initial\"\n animate=\"enter\"\n exit=\"exit\"\n data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n />\n <RemoveScroll forwardProps ref={modalMergedRef}>\n <motion.div\n variants={modalAnimationVariants}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n custom={anchorElementRef}\n className={cx(\n styles.modal,\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n data-vibe={ComponentVibeId.MODAL}\n role=\"dialog\"\n aria-modal\n aria-labelledby={ariaLabelledby || titleId}\n aria-describedby={ariaDescribedby || descriptionId}\n style={style}\n onKeyDown={onModalKeyDown}\n tabIndex={-1}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </motion.div>\n </RemoveScroll>\n </div>\n </FocusLockComponent>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n )}\n </AnimatePresence>\n );\n }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","modalAnimationVariants","modalAnimationFullViewVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","styles","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","ComponentVibeId","MODAL","role","onKeyDown","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vibe/core",
3
- "version": "3.70.2-alpha-96f20.0",
3
+ "version": "3.70.2-alpha-23478.0",
4
4
  "description": "Official monday.com UI resources for application development in React.js",
5
5
  "repository": {
6
6
  "type": "git",
@@ -276,5 +276,5 @@
276
276
  "browserslist": [
277
277
  "extends browserslist-config-monday"
278
278
  ],
279
- "gitHead": "541914f27881687283aae83101a82512fc5e29e6"
279
+ "gitHead": "a72ae655ac366817f33114e1afeeca84d22027fb"
280
280
  }
@@ -1,2 +0,0 @@
1
- export { default } from "./useFocusEscapeTargets";
2
- export * from "./useFocusEscapeTargets.types";
@@ -1,10 +0,0 @@
1
- import { type FocusEscapeTarget } from "./useFocusEscapeTargets.types";
2
- /**
3
- * Hook that creates a checker function to determine if an element should be allowed
4
- * to receive focus outside of a focus lock.
5
- *
6
- * @param targets - Array of targets (selectors, refs, or elements) that should be allowed to receive focus and won't be managed by the focus-lock
7
- * @returns A function that checks if a given element matches any of the targets
8
- */
9
- declare const useFocusEscapeTargets: (targets?: FocusEscapeTarget[]) => (element?: HTMLElement) => boolean;
10
- export default useFocusEscapeTargets;
@@ -1,2 +0,0 @@
1
- import type React from "react";
2
- export type FocusEscapeTarget = string | HTMLElement | React.RefObject<HTMLElement>;
@@ -1,2 +0,0 @@
1
- export { default } from "./useFocusEscapeTargets";
2
- export * from "./useFocusEscapeTargets.types";
@@ -1,10 +0,0 @@
1
- import { type FocusEscapeTarget } from "./useFocusEscapeTargets.types";
2
- /**
3
- * Hook that creates a checker function to determine if an element should be allowed
4
- * to receive focus outside of a focus lock.
5
- *
6
- * @param targets - Array of targets (selectors, refs, or elements) that should be allowed to receive focus and won't be managed by the focus-lock
7
- * @returns A function that checks if a given element matches any of the targets
8
- */
9
- declare const useFocusEscapeTargets: (targets?: FocusEscapeTarget[]) => (element?: HTMLElement) => boolean;
10
- export default useFocusEscapeTargets;
@@ -1,2 +0,0 @@
1
- import type React from "react";
2
- export type FocusEscapeTarget = string | HTMLElement | React.RefObject<HTMLElement>;
@@ -1,2 +0,0 @@
1
- import{createForOfIteratorHelper as e,typeof as r}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{useMemo as t,useCallback as n}from"react";var l=function(l){var o=t((function(){if(!l||0===l.length)return{combinedSelector:null,elements:[]};var t,n=[],o=[],u=e(l);try{for(u.s();!(t=u.n()).done;){var i=t.value;"string"==typeof i?n.push(i):i&&"object"===r(i)&&"current"in i?i.current&&o.push(i.current):i instanceof HTMLElement&&o.push(i)}}catch(e){u.e(e)}finally{u.f()}return{combinedSelector:n.length>0?n.join(", "):null,elements:o}}),[l]),u=o.combinedSelector,i=o.elements;return n((function(e){if(!e)return!1;if(!u&&0===i.length)return!1;if(u&&e.closest(u))return!0;for(var r=0;i.length>r;r++){var t=i[r];if(e===t||t.contains(e))return!0}return!1}),[u,i])};export{l as default};
2
- //# sourceMappingURL=useFocusEscapeTargets.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useFocusEscapeTargets.js","sources":["../../../../../../../src/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { type FocusEscapeTarget } from \"./useFocusEscapeTargets.types\";\n\n/**\n * Hook that creates a checker function to determine if an element should be allowed\n * to receive focus outside of a focus lock.\n *\n * @param targets - Array of targets (selectors, refs, or elements) that should be allowed to receive focus and won't be managed by the focus-lock\n * @returns A function that checks if a given element matches any of the targets\n */\nconst useFocusEscapeTargets = (targets?: FocusEscapeTarget[]) => {\n // Pre-process and separate targets by type for faster lookup\n const { combinedSelector, elements } = useMemo(() => {\n if (!targets || targets.length === 0) {\n return { combinedSelector: null, elements: [] };\n }\n\n const selectorList: string[] = [];\n const elementList: HTMLElement[] = [];\n\n for (const item of targets) {\n if (typeof item === \"string\") {\n selectorList.push(item);\n } else if (item && typeof item === \"object\" && \"current\" in item) {\n // Resolve ref to element\n if (item.current) {\n elementList.push(item.current);\n }\n } else if (item instanceof HTMLElement) {\n elementList.push(item);\n }\n }\n\n // Combine all selectors into one for a single DOM traversal\n const combined = selectorList.length > 0 ? selectorList.join(\", \") : null;\n\n return { combinedSelector: combined, elements: elementList };\n }, [targets]);\n\n const shouldAllowFocusEscape = useCallback(\n (element?: HTMLElement): boolean => {\n if (!element) {\n return false;\n }\n\n // Early exit if no targets\n if (!combinedSelector && elements.length === 0) {\n return false;\n }\n\n // Check all selectors with a single DOM traversal\n if (combinedSelector && element.closest(combinedSelector)) {\n return true;\n }\n\n // Check elements (direct match or contains)\n for (let i = 0; i < elements.length; i++) {\n const targetElement = elements[i];\n if (element === targetElement || targetElement.contains(element)) {\n return true;\n }\n }\n\n return false;\n },\n [combinedSelector, elements]\n );\n\n return shouldAllowFocusEscape;\n};\n\nexport default useFocusEscapeTargets;\n"],"names":["useFocusEscapeTargets","targets","_useMemo","useMemo","length","combinedSelector","elements","_step","selectorList","elementList","_iterator","_createForOfIteratorHelper","s","n","done","item","value","push","_typeof","current","HTMLElement","err","e","f","join","useCallback","element","closest","i","targetElement","contains"],"mappings":"8JAUA,IAAMA,EAAwB,SAACC,GAE7B,IAAAC,EAAuCC,GAAQ,WAC7C,IAAKF,GAA8B,IAAnBA,EAAQG,OACtB,MAAO,CAAEC,iBAAkB,KAAMC,SAAU,IAG7C,IAG0BC,EAHpBC,EAAyB,GACzBC,EAA6B,GAAGC,EAAAC,EAEnBV,GAAO,IAA1B,IAAAS,EAAAE,MAAAL,EAAAG,EAAAG,KAAAC,MAA4B,CAAA,IAAjBC,EAAIR,EAAAS,MACO,iBAATD,EACTP,EAAaS,KAAKF,GACTA,GAAwB,WAAhBG,EAAOH,IAAqB,YAAaA,EAEtDA,EAAKI,SACPV,EAAYQ,KAAKF,EAAKI,SAEfJ,aAAgBK,aACzBX,EAAYQ,KAAKF,EAEpB,CAED,CAAA,MAAAM,GAAAX,EAAAY,EAAAD,EAAA,CAAA,QAAAX,EAAAa,GAAA,CAGA,MAAO,CAAElB,iBAFQG,EAAaJ,OAAS,EAAII,EAAagB,KAAK,MAAQ,KAEhClB,SAAUG,EACjD,GAAG,CAACR,IAzBII,EAAgBH,EAAhBG,iBAAkBC,EAAQJ,EAARI,SAwD1B,OA7B+BmB,GAC7B,SAACC,GACC,IAAKA,EACH,OAAO,EAIT,IAAKrB,GAAwC,IAApBC,EAASF,OAChC,OAAO,EAIT,GAAIC,GAAoBqB,EAAQC,QAAQtB,GACtC,OAAO,EAIT,IAAK,IAAIuB,EAAI,EAAOtB,EAASF,OAAbwB,EAAqBA,IAAK,CACxC,IAAMC,EAAgBvB,EAASsB,GAC/B,GAAIF,IAAYG,GAAiBA,EAAcC,SAASJ,GACtD,OAAO,CAEV,CAED,OAAO,CACT,GACA,CAACrB,EAAkBC,GAIvB"}
@@ -1,2 +0,0 @@
1
- import{createForOfIteratorHelper as e,typeof as r}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{useMemo as t,useCallback as n}from"react";var l=function(l){var o=t((function(){if(!l||0===l.length)return{combinedSelector:null,elements:[]};var t,n=[],o=[],u=e(l);try{for(u.s();!(t=u.n()).done;){var i=t.value;"string"==typeof i?n.push(i):i&&"object"===r(i)&&"current"in i?i.current&&o.push(i.current):i instanceof HTMLElement&&o.push(i)}}catch(e){u.e(e)}finally{u.f()}return{combinedSelector:n.length>0?n.join(", "):null,elements:o}}),[l]),u=o.combinedSelector,i=o.elements;return n((function(e){if(!e)return!1;if(!u&&0===i.length)return!1;if(u&&e.closest(u))return!0;for(var r=0;i.length>r;r++){var t=i[r];if(e===t||t.contains(e))return!0}return!1}),[u,i])};export{l as default};
2
- //# sourceMappingURL=useFocusEscapeTargets.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useFocusEscapeTargets.js","sources":["../../../../../../src/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { type FocusEscapeTarget } from \"./useFocusEscapeTargets.types\";\n\n/**\n * Hook that creates a checker function to determine if an element should be allowed\n * to receive focus outside of a focus lock.\n *\n * @param targets - Array of targets (selectors, refs, or elements) that should be allowed to receive focus and won't be managed by the focus-lock\n * @returns A function that checks if a given element matches any of the targets\n */\nconst useFocusEscapeTargets = (targets?: FocusEscapeTarget[]) => {\n // Pre-process and separate targets by type for faster lookup\n const { combinedSelector, elements } = useMemo(() => {\n if (!targets || targets.length === 0) {\n return { combinedSelector: null, elements: [] };\n }\n\n const selectorList: string[] = [];\n const elementList: HTMLElement[] = [];\n\n for (const item of targets) {\n if (typeof item === \"string\") {\n selectorList.push(item);\n } else if (item && typeof item === \"object\" && \"current\" in item) {\n // Resolve ref to element\n if (item.current) {\n elementList.push(item.current);\n }\n } else if (item instanceof HTMLElement) {\n elementList.push(item);\n }\n }\n\n // Combine all selectors into one for a single DOM traversal\n const combined = selectorList.length > 0 ? selectorList.join(\", \") : null;\n\n return { combinedSelector: combined, elements: elementList };\n }, [targets]);\n\n const shouldAllowFocusEscape = useCallback(\n (element?: HTMLElement): boolean => {\n if (!element) {\n return false;\n }\n\n // Early exit if no targets\n if (!combinedSelector && elements.length === 0) {\n return false;\n }\n\n // Check all selectors with a single DOM traversal\n if (combinedSelector && element.closest(combinedSelector)) {\n return true;\n }\n\n // Check elements (direct match or contains)\n for (let i = 0; i < elements.length; i++) {\n const targetElement = elements[i];\n if (element === targetElement || targetElement.contains(element)) {\n return true;\n }\n }\n\n return false;\n },\n [combinedSelector, elements]\n );\n\n return shouldAllowFocusEscape;\n};\n\nexport default useFocusEscapeTargets;\n"],"names":["useFocusEscapeTargets","targets","_useMemo","useMemo","length","combinedSelector","elements","_step","selectorList","elementList","_iterator","_createForOfIteratorHelper","s","n","done","item","value","push","_typeof","current","HTMLElement","err","e","f","join","useCallback","element","closest","i","targetElement","contains"],"mappings":"8JAUA,IAAMA,EAAwB,SAACC,GAE7B,IAAAC,EAAuCC,GAAQ,WAC7C,IAAKF,GAA8B,IAAnBA,EAAQG,OACtB,MAAO,CAAEC,iBAAkB,KAAMC,SAAU,IAG7C,IAG0BC,EAHpBC,EAAyB,GACzBC,EAA6B,GAAGC,EAAAC,EAEnBV,GAAO,IAA1B,IAAAS,EAAAE,MAAAL,EAAAG,EAAAG,KAAAC,MAA4B,CAAA,IAAjBC,EAAIR,EAAAS,MACO,iBAATD,EACTP,EAAaS,KAAKF,GACTA,GAAwB,WAAhBG,EAAOH,IAAqB,YAAaA,EAEtDA,EAAKI,SACPV,EAAYQ,KAAKF,EAAKI,SAEfJ,aAAgBK,aACzBX,EAAYQ,KAAKF,EAEpB,CAED,CAAA,MAAAM,GAAAX,EAAAY,EAAAD,EAAA,CAAA,QAAAX,EAAAa,GAAA,CAGA,MAAO,CAAElB,iBAFQG,EAAaJ,OAAS,EAAII,EAAagB,KAAK,MAAQ,KAEhClB,SAAUG,EACjD,GAAG,CAACR,IAzBII,EAAgBH,EAAhBG,iBAAkBC,EAAQJ,EAARI,SAwD1B,OA7B+BmB,GAC7B,SAACC,GACC,IAAKA,EACH,OAAO,EAIT,IAAKrB,GAAwC,IAApBC,EAASF,OAChC,OAAO,EAIT,GAAIC,GAAoBqB,EAAQC,QAAQtB,GACtC,OAAO,EAIT,IAAK,IAAIuB,EAAI,EAAOtB,EAASF,OAAbwB,EAAqBA,IAAK,CACxC,IAAMC,EAAgBvB,EAASsB,GAC/B,GAAIF,IAAYG,GAAiBA,EAAcC,SAASJ,GACtD,OAAO,CAEV,CAED,OAAO,CACT,GACA,CAACrB,EAAkBC,GAIvB"}