@nyaruka/temba-components 0.141.0 → 0.142.0

package/static/svg/work/traced/expand-06.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.311 2.307 C 2.023 2.517,2.000 2.748,2.000 5.410 C 2.000 8.014,2.029 8.318,2.305 8.623 C 2.711 9.072,3.430 9.063,3.751 8.604 C 3.932 8.346,4.000 7.853,4.000 6.807 L 4.000 5.365 5.803 7.163 C 7.706 9.060,8.137 9.285,8.695 8.667 C 9.243 8.062,9.042 7.688,7.163 5.803 L 5.365 4.000 6.807 4.000 C 8.466 4.000,8.960 3.783,8.960 3.056 C 8.960 2.162,8.670 2.080,5.498 2.080 C 3.266 2.080,2.552 2.131,2.311 2.307 M15.291 2.331 C 15.153 2.470,15.040 2.790,15.040 3.042 C 15.040 3.785,15.524 4.000,17.193 4.000 L 18.635 4.000 16.837 5.803 C 14.940 7.706,14.715 8.137,15.333 8.695 C 15.938 9.243,16.312 9.042,18.197 7.163 L 20.000 5.365 20.000 6.807 C 20.000 7.853,20.068 8.346,20.249 8.604 C 20.570 9.063,21.289 9.072,21.695 8.623 C 21.971 8.318,22.000 8.014,22.000 5.410 C 22.000 2.748,21.977 2.517,21.689 2.307 C 21.211 1.957,15.644 1.979,15.291 2.331 M2.338 15.285 C 1.965 15.658,1.891 16.358,1.948 19.004 C 1.992 21.075,2.042 21.471,2.286 21.715 C 2.538 21.967,2.901 22.000,5.429 22.000 C 8.014 22.000,8.318 21.971,8.623 21.695 C 9.072 21.289,9.063 20.570,8.604 20.249 C 8.346 20.068,7.853 20.000,6.807 20.000 L 5.365 20.000 7.163 18.197 C 9.060 16.294,9.285 15.863,8.667 15.305 C 8.062 14.757,7.688 14.958,5.803 16.837 L 4.000 18.635 4.000 17.193 C 4.000 15.524,3.785 15.040,3.042 15.040 C 2.790 15.040,2.473 15.150,2.338 15.285 M15.305 15.333 C 14.757 15.938,14.958 16.312,16.837 18.197 L 18.635 20.000 17.193 20.000 C 16.147 20.000,15.654 20.068,15.396 20.249 C 14.938 20.570,14.928 21.289,15.376 21.695 C 15.672 21.963,16.023 22.006,18.276 22.051 C 21.112 22.108,21.621 22.001,21.918 21.286 C 22.039 20.992,22.085 19.965,22.051 18.276 C 22.006 16.023,21.963 15.672,21.695 15.376 C 21.289 14.928,20.570 14.938,20.249 15.396 C 20.068 15.654,20.000 16.147,20.000 17.193 L 20.000 18.635 18.197 16.837 C 16.294 14.940,15.863 14.715,15.305 15.333 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/used/expand-06.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8L21 3M21 3H16M21 3V8M8 8L3 3M3 3L3 8M3 3L8 3M8 16L3 21M3 21H8M3 21L3 16M16 16L21 21M21 21V16M21 21H16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/test/temba-canvas-menu.test.ts

@@ -107,6 +107,61 @@ describe('temba-canvas-menu', () => {
     expect(menu.open).to.be.false;
   });
 
+  it('shows reflow option when showReflow is true', async () => {
+    const menu = await createCanvasMenu();
+    menu.show(100, 100, { x: 50, y: 50 }, true, true);
+    await menu.updateComplete;
+
+    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
+    expect(menuItems?.length).to.equal(4);
+
+    const titles = Array.from(menuItems || []).map(
+      (item) => item.querySelector('.menu-item-title')?.textContent
+    );
+    expect(titles).to.deep.equal([
+      'Add Action',
+      'Add Split',
+      'Add Sticky Note',
+      'Reflow'
+    ]);
+  });
+
+  it('fires reflow selection event when reflow is clicked', async () => {
+    const menu = await createCanvasMenu();
+    menu.show(100, 100, { x: 50, y: 50 }, true, true);
+    await menu.updateComplete;
+
+    let selectionDetail = null;
+    menu.addEventListener('temba-selection', (event: any) => {
+      selectionDetail = event.detail;
+    });
+
+    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
+    const reflowItem = menuItems?.[3] as HTMLElement;
+    reflowItem.click();
+    await menu.updateComplete;
+
+    expect(selectionDetail).to.deep.equal({
+      action: 'reflow',
+      position: { x: 50, y: 50 }
+    });
+    expect(menu.open).to.be.false;
+  });
+
+  it('hides reflow option by default', async () => {
+    const menu = await createCanvasMenu();
+    menu.show(100, 100, { x: 50, y: 50 });
+    await menu.updateComplete;
+
+    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
+    expect(menuItems?.length).to.equal(3);
+
+    const titles = Array.from(menuItems || []).map(
+      (item) => item.querySelector('.menu-item-title')?.textContent
+    );
+    expect(titles).to.not.include('Reflow');
+  });
+
   it('adjusts position to stay within viewport bounds', async () => {
     const menu = await createCanvasMenu();
 

package/test/temba-contact-chat.test.ts

@@ -116,6 +116,23 @@ describe('temba-contact-chat', () => {
     await assertScreenshot('contacts/chat-for-stopped-contact', getClip(chat));
   });
 
+  it('keeps flow footer from blocking scrollbar drag interactions', async () => {
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-dave-active'
+    });
+
+    const flowFooter = chat.shadowRoot.querySelector(
+      '.flow-footer'
+    ) as HTMLElement;
+    const inFlow = flowFooter.querySelector('.in-flow') as HTMLElement;
+
+    expect(flowFooter).to.exist;
+    expect(inFlow).to.exist;
+    expect(getComputedStyle(flowFooter).pointerEvents).to.equal('none');
+    expect(getComputedStyle(inFlow).pointerEvents).to.equal('auto');
+  });
+
   it('sends text without attachments', async () => {
     // we are a StoreElement, so load a store first
     await loadStore();

package/test/temba-flow-collision.test.ts

@@ -37,6 +37,37 @@ describe('Collision Detection Utilities', () => {
 
       document.body.removeChild(mockElement);
     });
+
+    it('uses layout-space dimensions unaffected by ancestor CSS transform', () => {
+      // Simulate zoom: ancestor has transform: scale(0.5)
+      const container = document.createElement('div');
+      container.style.transform = 'scale(0.5)';
+      container.style.transformOrigin = '0 0';
+      document.body.appendChild(container);
+
+      const mockElement = document.createElement('div');
+      mockElement.id = 'zoom-test-node';
+      mockElement.style.width = '200px';
+      mockElement.style.height = '150px';
+      container.appendChild(mockElement);
+
+      const position = { left: 100, top: 200 };
+      const bounds = getNodeBounds('zoom-test-node', position, mockElement);
+
+      // getNodeBounds uses offsetWidth/offsetHeight which are layout-space
+      expect(bounds).to.not.be.null;
+      expect(bounds!.width).to.equal(200);
+      expect(bounds!.height).to.equal(150);
+      expect(bounds!.right).to.equal(300); // left + layout width
+      expect(bounds!.bottom).to.equal(350); // top + layout height
+
+      // Verify that getBoundingClientRect WOULD return scaled values
+      const rect = mockElement.getBoundingClientRect();
+      expect(rect.width).to.equal(100); // 200 * 0.5 scale
+      expect(rect.height).to.equal(75); // 150 * 0.5 scale
+
+      container.remove();
+    });
   });
 
   describe('nodesOverlap', () => {