@capillarytech/creatives-library 9.0.4 → 9.0.5

package/package.json

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

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

@@ -77,7 +77,7 @@ export const MessageSection = ({
   // <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(document?.getElementById('webpush-message-input'));
   }, [handleMessageTextAreaRef]);
 
   const renderCharacterCount = () => {
@@ -152,7 +152,7 @@ MessageSection.propTypes = {
   tagList: PropTypes.node,
   messageCountRef: PropTypes.object,
   messageTextAreaRef: PropTypes.object,
-  handleMessageTextAreaRef: PropTypes.func.isRequired,
+  handleMessageTextAreaRef: PropTypes.func,
   isAiContentBotDisabled: PropTypes.bool,
 };
 
@@ -161,6 +161,7 @@ MessageSection.defaultProps = {
   tagList: null,
   messageCountRef: null,
   messageTextAreaRef: null,
+  handleMessageTextAreaRef: () => {},
   isAiContentBotDisabled: false,
 };
 

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 [