@fusion.dev/helix-core 0.31.0 → 0.32.0

package/custom-elements.json

@@ -1372,7 +1372,7 @@
               },
               "privacy": "private",
               "readonly": true,
-              "default": "new FloatingController(host, { anchor: options.anchor, ...(options.arrow === undefined ? {} : { arrow: options.arrow }), floating: options.surface, ...(options.offset === undefined ? {} : { offset: options.offset }), ...(options.placement === undefined ? {} : { placement: options.placement }), ...(options.within === undefined ? {} : { within: options.within }), })"
+              "default": "new FloatingController(host, { anchor: options.anchor, ...(options.arrow === undefined ? {} : { arrow: options.arrow }), floating: options.surface, ...(options.offset === undefined ? {} : { offset: options.offset }), ...(options.onPlace === undefined ? {} : { onPlace: options.onPlace }), ...(options.placement === undefined ? {} : { placement: options.placement }), ...(options.within === undefined ? {} : { within: options.within }), })"
             },
             {
               "kind": "field",

package/dist/controllers/floating-controller/floating-controller.d.ts

@@ -18,6 +18,15 @@ export interface FloatingOptions {
      * reader cannot use.
      */
     flip?: boolean;
+    /**
+     * Told the placement the element landed on, after every measurement.
+     *
+     * `data-placement` already says it, on the floating element, which is inside
+     * the host's shadow root. A stylesheet outside reaches that element through
+     * `::part()`, and `::part()` cannot be followed by an attribute selector, so
+     * a host whose surface is drawn from outside records the side on itself.
+     */
+    onPlace?: (placement: Placement) => void;
     /**
      * Space between the anchor and the floating element, in pixels.
      *

package/dist/controllers/floating-controller/floating-controller.js

@@ -37,7 +37,10 @@ export class FloatingController {
                 : this.options.placement;
             const middleware = [offset(gap ?? 0)];
             if (this.options.flip !== false) {
-                middleware.push(flip());
+                const side = (preferred ?? 'bottom-start').split('-')[0];
+                middleware.push(flip(side === 'left' || side === 'right'
+                    ? { crossAxis: 'alignment', fallbackAxisSideDirection: 'end' }
+                    : {}));
             }
             if (this.options.shift !== false) {
                 const inside = this.options.within?.();
@@ -72,6 +75,7 @@ export class FloatingController {
                 });
                 floating.setAttribute('data-placement', placement);
                 floating.setAttribute('data-placed', '');
+                this.options.onPlace?.(placement);
                 const point = middlewareData.arrow;
                 if (pointer && point) {
                     Object.assign(pointer.style, {

package/dist/controllers/popover-controller/popover-controller.d.ts

@@ -56,6 +56,11 @@ export interface PopoverOptions {
      * select puts focus back on its trigger, and a tooltip does neither.
      */
     onDismiss: () => void;
+    /**
+     * Told the placement the surface landed on, after every measurement. Passed
+     * through to the floating pass, which says why a host would want it.
+     */
+    onPlace?: (placement: Placement) => void;
     /**
      * Whether the host wants the surface up, read after every update.
      *

package/dist/controllers/popover-controller/popover-controller.js

@@ -9,6 +9,7 @@ export class PopoverController {
             ...(options.arrow === undefined ? {} : { arrow: options.arrow }),
             floating: options.surface,
             ...(options.offset === undefined ? {} : { offset: options.offset }),
+            ...(options.onPlace === undefined ? {} : { onPlace: options.onPlace }),
             ...(options.placement === undefined ? {} : { placement: options.placement }),
             ...(options.within === undefined ? {} : { within: options.within }),
         });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -34,12 +34,12 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.31.0"
+    "@fusion.dev/helix-icons": "0.32.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.31.0",
-    "@fusion.dev/helix-testing": "0.31.0",
+    "@fusion.dev/helix-cem": "0.32.0",
+    "@fusion.dev/helix-testing": "0.32.0",
     "lit": "^3.2.1"
   },
   "homepage": "https://fusion.dev",