@capillarytech/creatives-library 9.0.4 → 9.0.6-beta.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.4",
+  "version": "9.0.6-beta.0.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/NewCallTask/index.js

@@ -40,15 +40,18 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
     this.insertAtCursor(`{{${data}}}`);
   }
 
+  setInputRef = (textarea) => {
+    this.textArea = textarea;
+  }
+
   insertAtCursor = (myValue) => {
-    const textAreaRef = document.getElementById('new-call-task-message-body');
-    if (!textAreaRef) return;
-    textAreaRef.focus();
+    this.textArea.focus();
+    const textAreaRef = this.textArea.textAreaRef;
     let pos = textAreaRef.selectionEnd + myValue.length;
     //IE support
     let newMessage = textAreaRef.value + myValue;
     if (document.selection) {
-      textAreaRef.focus();
+      this.textArea.focus();
       const sel = document.selection.createRange();
       sel.text = myValue;
     } else if (textAreaRef.selectionStart || textAreaRef.selectionStart === '0') { //MOZILLA and others
@@ -125,7 +128,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
                   injectedTags={injectedTags}
                 />
                 <CapInput.TextArea
-                  id="new-call-task-message-body"
+                  setInputRef={this.setInputRef}
                   label={formatMessage(messages.messageHeader)}
                   onChange={this.updateMessageBody}
                   value={messageBody}

package/v2Containers/FTP/index.js

@@ -166,6 +166,10 @@ export class FTP extends React.Component {
     this.insertAtCursor(`{{${data}}}`);
   };
 
+  setInputRef = (textarea) => {
+    this.textArea = textarea;
+  };
+
   getServerSelectionContent = () => {
     const { getFTPServersInProgress } = this.props.FTP || {};
     const { formatMessage } = this.props.intl;
@@ -253,7 +257,7 @@ export class FTP extends React.Component {
               injectedTags={injectedTags || {}}
             />
             <CapInput.TextArea
-              id="ftp-message-content"
+              setInputRef={this.setInputRef}
               label={formatMessage(messages.messageHeader)}
               onChange={this.updateMessageBody}
               value={messageContent}
@@ -525,14 +529,13 @@ export class FTP extends React.Component {
   };
 
   insertAtCursor = (myValue) => {
-    const textAreaRef = document.getElementById('ftp-message-content');
-    if (!textAreaRef) return;
-    textAreaRef.focus();
+    this.textArea.focus();
+    const textAreaRef = this.textArea.textAreaRef;
     let pos = textAreaRef.selectionEnd + myValue.length;
     //IE support
     let newMessage = textAreaRef.value + myValue;
     if (document.selection) {
-      textAreaRef.focus();
+      this.textArea.focus();
       const sel = document.selection.createRange();
       sel.text = myValue;
     } else if (textAreaRef.selectionStart || textAreaRef.selectionStart === '0') { //MOZILLA and others

package/v2Containers/WebPush/Create/components/MessageSection.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
@@ -73,13 +73,6 @@ export const MessageSection = ({
   handleMessageTextAreaRef,
   isAiContentBotDisabled,
 }) => {
-  // resolve the underlying DOM
-  // <textarea> by id and feed it to the existing ref handler. CapEmojiPicker and
-  // the Aira trigger both read `messageTextAreaRef.current` as that DOM node.
-  useEffect(() => {
-    handleMessageTextAreaRef(document.getElementById('webpush-message-input'));
-  }, [handleMessageTextAreaRef]);
-
   const renderCharacterCount = () => {
     if (!SHOW_CHARACTER_COUNT) return null;
 
@@ -126,6 +119,7 @@ export const MessageSection = ({
               size="default"
               isRequired
               autosize={{ minRows: 3, maxRows: 5 }}
+              setInputRef={handleMessageTextAreaRef}
               errorMessage={
                 error && (
                   <CapError className="webpush-template-message-error">

package/v2Containers/WebPush/Create/preview/tests/PreviewControls.test.js

@@ -700,6 +700,147 @@ describe('PreviewControls', () => {
     });
   });
 
+  describe('getPopupContainer (getDropdownPopupContainer)', () => {
+    const getResolver = (wrapper) =>
+      wrapper.find(CapSelect.CapCustomSelect).first().prop('getPopupContainer');
+
+    let appended;
+
+    beforeEach(() => {
+      appended = [];
+    });
+
+    afterEach(() => {
+      // Keep jsdom clean between assertions so containers from one test don't leak
+      appended.forEach((node) => {
+        if (node && node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+      });
+      appended = [];
+    });
+
+    const mountInBody = (node) => {
+      document.body.appendChild(node);
+      appended.push(node);
+      return node;
+    };
+
+    it('should pass getPopupContainer to every rendered select', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
+      const selects = wrapper.find(CapSelect.CapCustomSelect);
+      expect(selects.length).toBe(3);
+      selects.forEach((select) => {
+        expect(typeof select.prop('getPopupContainer')).toBe('function');
+      });
+    });
+
+    it('should return the closest .ant-modal-container ancestor when one exists', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const modalContainer = document.createElement('div');
+      modalContainer.className = 'ant-modal-container';
+      const triggerNode = document.createElement('span');
+      modalContainer.appendChild(triggerNode);
+      mountInBody(modalContainer);
+
+      expect(getPopupContainer(triggerNode)).toBe(modalContainer);
+    });
+
+    it('should return the closest .ant-modal-content ancestor when one exists', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const modalContent = document.createElement('div');
+      modalContent.className = 'ant-modal-content';
+      const triggerNode = document.createElement('span');
+      modalContent.appendChild(triggerNode);
+      mountInBody(modalContent);
+
+      expect(getPopupContainer(triggerNode)).toBe(modalContent);
+    });
+
+    it('should resolve through deeply nested descendants up to the modal ancestor', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const modalContainer = document.createElement('div');
+      modalContainer.className = 'ant-modal-container';
+      const middle = document.createElement('div');
+      const triggerNode = document.createElement('span');
+      middle.appendChild(triggerNode);
+      modalContainer.appendChild(middle);
+      mountInBody(modalContainer);
+
+      expect(getPopupContainer(triggerNode)).toBe(modalContainer);
+    });
+
+    it('should match the trigger node itself when it is the modal container', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const modalContainer = document.createElement('div');
+      modalContainer.className = 'ant-modal-content';
+      mountInBody(modalContainer);
+
+      // closest() includes the element itself, so a self-match should be returned
+      expect(getPopupContainer(modalContainer)).toBe(modalContainer);
+    });
+
+    it('should pick the nearest modal ancestor when modals are nested', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const outerModal = document.createElement('div');
+      outerModal.className = 'ant-modal-container';
+      const innerModal = document.createElement('div');
+      innerModal.className = 'ant-modal-content';
+      const triggerNode = document.createElement('span');
+      innerModal.appendChild(triggerNode);
+      outerModal.appendChild(innerModal);
+      mountInBody(outerModal);
+
+      expect(getPopupContainer(triggerNode)).toBe(innerModal);
+    });
+
+    it('should fall back to document.body when the trigger is not inside a modal', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const wrapperDiv = document.createElement('div');
+      wrapperDiv.className = 'some-unrelated-container';
+      const triggerNode = document.createElement('span');
+      wrapperDiv.appendChild(triggerNode);
+      mountInBody(wrapperDiv);
+
+      expect(getPopupContainer(triggerNode)).toBe(document.body);
+    });
+
+    it('should fall back to document.body for a detached (unattached) trigger node', () => {
+      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
+      const getPopupContainer = getResolver(wrapper);
+
+      const detachedNode = document.createElement('span');
+      expect(getPopupContainer(detachedNode)).toBe(document.body);
+    });
+
+    it('should resolve the same way for the compact layout selects', () => {
+      const wrapper = mountWithIntl(
+        <PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} showStateDropdown={true} />,
+      );
+      const getPopupContainer = getResolver(wrapper);
+
+      const modalContainer = document.createElement('div');
+      modalContainer.className = 'ant-modal-container';
+      const triggerNode = document.createElement('span');
+      modalContainer.appendChild(triggerNode);
+      mountInBody(modalContainer);
+
+      expect(getPopupContainer(triggerNode)).toBe(modalContainer);
+    });
+  });
+
   describe('FormattedMessage Integration', () => {
     it('should render FormattedMessage for operatingSystem label', () => {
       const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);

package/v2Containers/WebPush/Create/preview/tests/__snapshots__/PreviewControls.test.js.snap

@@ -21,6 +21,7 @@ exports[`PreviewControls Basic Rendering should render correctly with default pr
         />
       </CapLabel>
       <ComponentWithLabel(InjectIntl(CapCustomSelect))
+        getPopupContainer={[Function]}
         onChange={[Function]}
         options={
           Array [
@@ -70,6 +71,7 @@ exports[`PreviewControls Basic Rendering should render correctly with default pr
         />
       </CapLabel>
       <ComponentWithLabel(InjectIntl(CapCustomSelect))
+        getPopupContainer={[Function]}
         onChange={[Function]}
         options={
           Array [
@@ -119,6 +121,7 @@ exports[`PreviewControls Basic Rendering should render correctly with default pr
         />
       </CapLabel>
       <ComponentWithLabel(InjectIntl(CapCustomSelect))
+        getPopupContainer={[Function]}
         onChange={[MockFunction]}
         options={
           Array [