shadcn_phlexcomponents 0.1.16 → 0.1.18

data/app/javascript/utils/floating_ui.js

@@ -1,160 +1,121 @@
-import {
-  computePosition,
-  flip,
-  shift,
-  offset,
-  autoUpdate,
-  size,
-  arrow,
-} from "@floating-ui/dom";
+import { computePosition, flip, shift, offset, autoUpdate, size, arrow, limitShift, } from '@floating-ui/dom';
+// https://github.com/radix-ui/primitives/blob/13e76f08f7afdea623aebfd3c55a7e41ae8d8078/packages/react/popper/src/popper.tsx
 const OPPOSITE_SIDE = {
-  top: "bottom",
-  right: "left",
-  bottom: "top",
-  left: "right",
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
 };
 const ARROW_TRANSFORM_ORIGIN = {
-  top: "",
-  right: "0 0",
-  bottom: "center 0",
-  left: "100% 0",
+    top: '',
+    right: '0 0',
+    bottom: 'center 0',
+    left: '100% 0',
 };
 const ARROW_TRANSFORM = {
-  top: "translateY(100%)",
-  right: "translateY(50%) rotate(90deg) translateX(-50%)",
-  bottom: `rotate(180deg)`,
-  left: "translateY(50%) rotate(-90deg) translateX(50%)",
+    top: 'translateY(100%)',
+    right: 'translateY(50%) rotate(90deg) translateX(-50%)',
+    bottom: `rotate(180deg)`,
+    left: 'translateY(50%) rotate(-90deg) translateX(50%)',
 };
-const initFloatingUi = ({
-  referenceElement,
-  floatingElement,
-  side = "bottom",
-  align = "center",
-  sideOffset = 0,
-  alignOffset = 0,
-  arrowElement,
-}) => {
-  let placement = `${side}-${align}`;
-  placement = placement.replace(/-center/g, "");
-  let arrowHeight = 0,
-    arrowWidth = 0;
-  if (arrowElement) {
-    const rect = arrowElement.getBoundingClientRect();
-    arrowWidth = rect.width;
-    arrowHeight = rect.height;
-  }
-  const middleware = [
-    transformOrigin({ arrowHeight, arrowWidth }),
-    offset({ mainAxis: sideOffset, alignmentAxis: alignOffset }),
-    size({
-      apply: ({ elements, rects, availableWidth, availableHeight }) => {
-        const { width: anchorWidth, height: anchorHeight } = rects.reference;
-        const contentStyle = elements.floating.style;
-        contentStyle.setProperty(
-          "--radix-popper-available-width",
-          `${availableWidth}px`,
-        );
-        contentStyle.setProperty(
-          "--radix-popper-available-height",
-          `${availableHeight}px`,
-        );
-        contentStyle.setProperty(
-          "--radix-popper-anchor-width",
-          `${anchorWidth}px`,
-        );
-        contentStyle.setProperty(
-          "--radix-popper-anchor-height",
-          `${anchorHeight}px`,
-        );
-      },
-    }),
-  ];
-  const flipMiddleware = flip({
-    // Ensure we flip to the perpendicular axis if it doesn't fit
-    // on narrow viewports.
-    crossAxis: "alignment",
-    fallbackAxisSideDirection: "end", // or 'start'
-  });
-  const shiftMiddleware = shift();
-  // Prioritize flip over shift for edge-aligned placements only.
-  if (placement.includes("-")) {
-    middleware.push(flipMiddleware, shiftMiddleware);
-  } else {
-    middleware.push(shiftMiddleware, flipMiddleware);
-  }
-  if (arrowElement) {
-    middleware.push(arrow({ element: arrowElement, padding: 0 }));
-  }
-  return autoUpdate(referenceElement, floatingElement, () => {
-    computePosition(referenceElement, floatingElement, {
-      placement: placement,
-      strategy: "fixed",
-      middleware,
-    }).then(({ middlewareData, x, y }) => {
-      const arrowX = middlewareData.arrow?.x;
-      const arrowY = middlewareData.arrow?.y;
-      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-      floatingElement.style.setProperty(
-        "--radix-popper-transform-origin",
-        `${middlewareData.transformOrigin?.x} ${middlewareData.transformOrigin?.y}`,
-      );
-      if (arrowElement) {
-        const baseSide = OPPOSITE_SIDE[side];
-        const arrowStyle = {
-          position: "absolute",
-          left: arrowX ? `${arrowX}px` : undefined,
-          top: arrowY ? `${arrowY}px` : undefined,
-          [baseSide]: 0,
-          transformOrigin: ARROW_TRANSFORM_ORIGIN[side],
-          transform: ARROW_TRANSFORM[side],
-          visibility: cannotCenterArrow ? "hidden" : undefined,
-        };
-        Object.assign(arrowElement.style, arrowStyle);
-      }
-      Object.assign(floatingElement.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      });
+const initFloatingUi = ({ referenceElement, floatingElement, side = 'bottom', align = 'center', sideOffset = 0, alignOffset = 0, arrowElement, }) => {
+    let placement = `${side}-${align}`;
+    placement = placement.replace(/-center/g, '');
+    let arrowHeight = 0, arrowWidth = 0;
+    if (arrowElement) {
+        const rect = arrowElement.getBoundingClientRect();
+        arrowWidth = rect.width;
+        arrowHeight = rect.height;
+    }
+    const middleware = [
+        offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
+        shift({
+            mainAxis: true,
+            crossAxis: false,
+            limiter: limitShift(),
+        }),
+        flip({ crossAxis: 'alignment', fallbackAxisSideDirection: 'end' }),
+        transformOrigin({ arrowHeight, arrowWidth }),
+        size({
+            apply: ({ elements, rects, availableWidth, availableHeight }) => {
+                const { width: anchorWidth, height: anchorHeight } = rects.reference;
+                const contentStyle = elements.floating.style;
+                contentStyle.setProperty('--radix-popper-available-width', `${availableWidth}px`);
+                contentStyle.setProperty('--radix-popper-available-height', `${availableHeight}px`);
+                contentStyle.setProperty('--radix-popper-anchor-width', `${anchorWidth}px`);
+                contentStyle.setProperty('--radix-popper-anchor-height', `${anchorHeight}px`);
+            },
+        }),
+        arrowElement && arrow({ element: arrowElement, padding: 0 }),
+    ];
+    return autoUpdate(referenceElement, floatingElement, () => {
+        computePosition(referenceElement, floatingElement, {
+            placement: placement,
+            strategy: 'fixed',
+            middleware,
+        }).then(({ middlewareData, x, y }) => {
+            const arrowX = middlewareData.arrow?.x;
+            const arrowY = middlewareData.arrow?.y;
+            const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+            floatingElement.style.setProperty('--radix-popper-transform-origin', `${middlewareData.transformOrigin?.x} ${middlewareData.transformOrigin?.y}`);
+            if (arrowElement) {
+                const baseSide = OPPOSITE_SIDE[side];
+                const arrowStyle = {
+                    position: 'absolute',
+                    left: arrowX ? `${arrowX}px` : undefined,
+                    top: arrowY ? `${arrowY}px` : undefined,
+                    [baseSide]: 0,
+                    transformOrigin: ARROW_TRANSFORM_ORIGIN[side],
+                    transform: ARROW_TRANSFORM[side],
+                    visibility: cannotCenterArrow ? 'hidden' : undefined,
+                };
+                Object.assign(arrowElement.style, arrowStyle);
+            }
+            Object.assign(floatingElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        });
     });
-  });
 };
 const transformOrigin = (options) => {
-  return {
-    name: "transformOrigin",
-    options,
-    fn(data) {
-      const { placement, rects, middlewareData } = data;
-      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-      const isArrowHidden = cannotCenterArrow;
-      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
-      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
-      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
-      const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[
-        placedAlign
-      ];
-      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
-      const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
-      let x = "";
-      let y = "";
-      if (placedSide === "bottom") {
-        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
-        y = `${-arrowHeight}px`;
-      } else if (placedSide === "top") {
-        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
-        y = `${rects.floating.height + arrowHeight}px`;
-      } else if (placedSide === "right") {
-        x = `${-arrowHeight}px`;
-        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
-      } else if (placedSide === "left") {
-        x = `${rects.floating.width + arrowHeight}px`;
-        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
-      }
-      return { data: { x, y } };
-    },
-  };
+    return {
+        name: 'transformOrigin',
+        options,
+        fn(data) {
+            const { placement, rects, middlewareData } = data;
+            const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+            const isArrowHidden = cannotCenterArrow;
+            const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+            const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+            const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+            const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[placedAlign];
+            const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+            const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+            let x = '';
+            let y = '';
+            if (placedSide === 'bottom') {
+                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+                y = `${-arrowHeight}px`;
+            }
+            else if (placedSide === 'top') {
+                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+                y = `${rects.floating.height + arrowHeight}px`;
+            }
+            else if (placedSide === 'right') {
+                x = `${-arrowHeight}px`;
+                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+            }
+            else if (placedSide === 'left') {
+                x = `${rects.floating.width + arrowHeight}px`;
+                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+            }
+            return { data: { x, y } };
+        },
+    };
 };
 function getSideAndAlignFromPlacement(placement) {
-  const [side, align = "center"] = placement.split("-");
-  return [side, align];
+    const [side, align = 'center'] = placement.split('-');
+    return [side, align];
 }
 export { initFloatingUi };