feat(floating-panel): position arrow element

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Added
 
+- Support arrow in Floating panel element
 - Allow trigger id to be set in the Floating panel element
 
 ## [0.2.0] - 2024-01-14

packages/core/package.json

@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@ambiki/impulse": "^0.2.0",
-    "@floating-ui/dom": "^1.5.4",
+    "@floating-ui/dom": "^1.6.3",
     "composed-offset-position": "^0.0.4",
     "tabbable": "^6.2.0"
   }

packages/core/rollup.config.js

@@ -13,7 +13,6 @@ export default [
         dir: 'dist',
         entryFileNames: '[name].js',
         format: 'es',
-        preserveModules: true,
         preserveModulesRoot: 'src',
       },
     ],

packages/core/src/elements/floating_panel/index.test.ts

@@ -15,16 +15,19 @@ describe('Floating panel', () => {
 
     expect(el).not.to.have.attribute('active');
     expect(el).not.to.have.attribute('data-current-placement');
+    expect(panel).not.to.have.attribute('data-current-placement');
 
     el.active = true;
     expect(el).to.have.attribute('active');
     await waitUntil(() => el.hasAttribute('data-current-placement'));
     expect(el).to.have.attribute('data-current-placement', 'bottom-start');
+    expect(panel).to.have.attribute('data-current-placement', 'bottom-start');
     expect(panel).to.have.style('position', 'absolute');
 
     el.active = false;
     expect(el).not.to.have.attribute('active');
     expect(el).not.to.have.attribute('data-current-placement');
+    expect(panel).not.to.have.attribute('data-current-placement');
   });
 
   it('setting the initial placement', async () => {

packages/core/src/elements/floating_panel/index.ts

@@ -6,6 +6,7 @@ import {
   Placement,
   ShiftOptions,
   Strategy,
+  arrow,
   autoUpdate,
   computePosition,
   flip,
@@ -68,6 +69,7 @@ export default class FloatingPanelElement extends ImpulseElement {
 
   @target() trigger?: HTMLElement;
   @target() panel: HTMLElement;
+  @target() arrow?: HTMLElement;
 
   private cleanup?: ReturnType<typeof autoUpdate>;
 
@@ -109,7 +111,7 @@ export default class FloatingPanelElement extends ImpulseElement {
       if (this.cleanup) {
         this.cleanup();
         this.cleanup = undefined;
-        this.removeAttribute('data-current-placement');
+        this.setCurrentPlacement('');
         requestAnimationFrame(() => resolve());
       } else {
         resolve();
@@ -141,12 +143,20 @@ export default class FloatingPanelElement extends ImpulseElement {
     middleware.push(flip(presence(this.flipOptions)));
     middleware.push(shift(presence(this.shiftOptions)));
 
+    if (this.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrow,
+        })
+      );
+    }
+
     const getOffsetParent =
       this.strategy === 'absolute'
         ? (element: Element) => platform.getOffsetParent(element, offsetParent)
         : platform.getOffsetParent;
 
-    const { x, y, strategy, placement } = await computePosition(this.triggerElement, this.panel, {
+    const { x, y, strategy, placement, middlewareData } = await computePosition(this.triggerElement, this.panel, {
       placement: this.placement,
       middleware,
       strategy: this.strategy,
@@ -162,13 +172,31 @@ export default class FloatingPanelElement extends ImpulseElement {
       position: strategy,
     });
 
-    this.setAttribute('data-current-placement', placement);
+    if (this.arrow && middlewareData.arrow) {
+      const { x, y } = middlewareData.arrow;
+      Object.assign(this.arrow.style, {
+        left: typeof x === 'number' ? `${x}px` : '',
+        top: typeof y === 'number' ? `${y}px` : '',
+      });
+    }
+
+    this.setCurrentPlacement(placement);
     this.emit('changed');
   }
 
   private get triggerElement() {
     return document.getElementById(this.triggerId) || this.trigger;
   }
+
+  private setCurrentPlacement(placement: string) {
+    if (placement) {
+      this.setAttribute('data-current-placement', placement);
+      this.panel.setAttribute('data-current-placement', placement);
+    } else {
+      this.removeAttribute('data-current-placement');
+      this.panel.removeAttribute('data-current-placement');
+    }
+  }
 }
 
 declare global {

packages/playground/index.html

@@ -25,22 +25,28 @@
 
     <div>
       <twc-popover class="relative">
-        <button type="button" data-target="twc-popover.trigger">Toggle</button>
-        <div
-          data-target="twc-popover.panel"
-          class="hidden absolute w-64 p-4 bg-white border rounded shadow-lg data-[headlessui-state='open']:block"
-        >
-          <p>This is a popover</p>
-          <twc-popover class="relative">
-            <button type="button" data-target="twc-popover.trigger">Toggle nested</button>
+        <twc-floating-panel placement="top" offset-options="8">
+          <button type="button" data-target="twc-popover.trigger twc-floating-panel.trigger">Toggle</button>
+          <div
+            data-target="twc-popover.panel twc-floating-panel.panel"
+            class="group z-10 hidden w-64 p-4 bg-white border rounded shadow-lg data-[headlessui-state='open']:block"
+          >
             <div
-              data-target="twc-popover.panel"
-              class="hidden absolute w-64 p-4 bg-white border rounded shadow-lg data-[headlessui-state='open']:block"
-            >
-              <p>Nested popover</p>
-            </div>
-          </twc-popover>
-        </div>
+              class="absolute h-0 w-0 border-x-[10px] border-x-transparent border-t-[10px] border-t-white group-data-[current-placement^='top']:-bottom-2 group-data-[current-placement^='bottom']:-top-2 group-data-[current-placement^='right']:-left-2 group-data-[current-placement^='left']:-right-2"
+              data-target="twc-floating-panel.arrow"
+            ></div>
+            <p>This is a popover</p>
+            <twc-popover class="relative">
+              <button type="button" data-target="twc-popover.trigger">Toggle nested</button>
+              <div
+                data-target="twc-popover.panel"
+                class="hidden absolute w-64 p-4 bg-white border rounded shadow-lg data-[headlessui-state='open']:block"
+              >
+                <p>Nested popover</p>
+              </div>
+            </twc-popover>
+          </div>
+        </twc-floating-panel>
       </twc-popover>
     </div>
 

yarn.lock

@@ -203,22 +203,22 @@
   dependencies:
     "@types/chai" "^4.2.12"
 
-"@floating-ui/core@^1.5.3":
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.3.tgz#b6aa0827708d70971c8679a16cf680a515b8a52a"
-  integrity sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
   dependencies:
-    "@floating-ui/utils" "^0.2.0"
+    "@floating-ui/utils" "^0.2.1"
 
-"@floating-ui/dom@^1.5.4":
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.4.tgz#28df1e1cb373884224a463235c218dcbd81a16bb"
-  integrity sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==
+"@floating-ui/dom@^1.6.3":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
   dependencies:
-    "@floating-ui/core" "^1.5.3"
+    "@floating-ui/core" "^1.0.0"
     "@floating-ui/utils" "^0.2.0"
 
-"@floating-ui/utils@^0.2.0":
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
   integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==