@lattice-ui/popper 0.1.1 → 0.3.0

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@lattice-ui/popper",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
+  "files": [
+    "out",
+    "README.md"
+  ],
   "dependencies": {
-    "@lattice-ui/core": "0.1.1"
+    "@lattice-ui/core": "0.3.0"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -17,7 +21,7 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
-    "watch": "rbxtsc -p tsconfig.json -w",
-    "typecheck": "tsc -p tsconfig.typecheck.json"
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "watch": "rbxtsc -p tsconfig.json -w"
   }
 }

package/src/compute.ts

@@ -1,116 +0,0 @@
-import type { ComputePopperInput, ComputePopperResult, PopperPlacement } from "./types";
-
-type XY = {
-  x: number;
-  y: number;
-};
-
-function getPositionForPlacement(
-  placement: PopperPlacement,
-  anchorPosition: Vector2,
-  anchorSize: Vector2,
-  contentSize: Vector2,
-  offset: Vector2,
-  out: XY,
-): XY {
-  if (placement === "top") {
-    out.x = anchorPosition.X + anchorSize.X / 2 - contentSize.X / 2 + offset.X;
-    out.y = anchorPosition.Y - contentSize.Y + offset.Y;
-    return out;
-  }
-
-  if (placement === "left") {
-    out.x = anchorPosition.X - contentSize.X + offset.X;
-    out.y = anchorPosition.Y + anchorSize.Y / 2 - contentSize.Y / 2 + offset.Y;
-    return out;
-  }
-
-  if (placement === "right") {
-    out.x = anchorPosition.X + anchorSize.X + offset.X;
-    out.y = anchorPosition.Y + anchorSize.Y / 2 - contentSize.Y / 2 + offset.Y;
-    return out;
-  }
-
-  out.x = anchorPosition.X + anchorSize.X / 2 - contentSize.X / 2 + offset.X;
-  out.y = anchorPosition.Y + anchorSize.Y + offset.Y;
-  return out;
-}
-
-function overflowsViewport(
-  positionX: number,
-  positionY: number,
-  contentSize: Vector2,
-  viewportSize: Vector2,
-  padding: number,
-) {
-  const minX = padding;
-  const minY = padding;
-  const maxX = viewportSize.X - contentSize.X - padding;
-  const maxY = viewportSize.Y - contentSize.Y - padding;
-  return positionX < minX || positionX > maxX || positionY < minY || positionY > maxY;
-}
-
-function clampToViewport(
-  positionX: number,
-  positionY: number,
-  contentSize: Vector2,
-  viewportSize: Vector2,
-  padding: number,
-  out: XY,
-): XY {
-  const minX = padding;
-  const minY = padding;
-  const maxX = math.max(minX, viewportSize.X - contentSize.X - padding);
-  const maxY = math.max(minY, viewportSize.Y - contentSize.Y - padding);
-
-  out.x = math.clamp(positionX, minX, maxX);
-  out.y = math.clamp(positionY, minY, maxY);
-  return out;
-}
-
-export function computePopper(input: ComputePopperInput): ComputePopperResult {
-  const placement = input.placement ?? "bottom";
-  const offset = input.offset ?? new Vector2(0, 0);
-  const padding = input.padding ?? 8;
-
-  const primary = getPositionForPlacement(
-    placement,
-    input.anchorPosition,
-    input.anchorSize,
-    input.contentSize,
-    offset,
-    { x: 0, y: 0 },
-  );
-
-  const fallbackPlacement: PopperPlacement =
-    placement === "top" ? "bottom" : placement === "bottom" ? "top" : placement === "left" ? "right" : "left";
-
-  let resolvedPlacement = placement;
-  let resolvedX = primary.x;
-  let resolvedY = primary.y;
-
-  if (overflowsViewport(primary.x, primary.y, input.contentSize, input.viewportSize, padding)) {
-    const fallback = getPositionForPlacement(
-      fallbackPlacement,
-      input.anchorPosition,
-      input.anchorSize,
-      input.contentSize,
-      offset,
-      { x: 0, y: 0 },
-    );
-
-    if (!overflowsViewport(fallback.x, fallback.y, input.contentSize, input.viewportSize, padding)) {
-      resolvedPlacement = fallbackPlacement;
-      resolvedX = fallback.x;
-      resolvedY = fallback.y;
-    }
-  }
-
-  const clamped = clampToViewport(resolvedX, resolvedY, input.contentSize, input.viewportSize, padding, { x: 0, y: 0 });
-
-  return {
-    position: UDim2.fromOffset(clamped.x, clamped.y),
-    anchorPoint: new Vector2(0, 0),
-    placement: resolvedPlacement,
-  };
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from "./compute";
-export * from "./types";
-export * from "./usePopper";

package/src/observers.ts

@@ -1,57 +0,0 @@
-const WorkspaceService = game.GetService("Workspace");
-
-export type ObserverUnsubscribe = () => void;
-
-function subscribeGuiObjectLayout(guiObject: GuiObject, onChange: () => void): ObserverUnsubscribe {
-  const positionConnection = guiObject.GetPropertyChangedSignal("AbsolutePosition").Connect(() => {
-    onChange();
-  });
-  const sizeConnection = guiObject.GetPropertyChangedSignal("AbsoluteSize").Connect(() => {
-    onChange();
-  });
-
-  return () => {
-    positionConnection.Disconnect();
-    sizeConnection.Disconnect();
-  };
-}
-
-export function subscribeAnchor(anchor: GuiObject, onChange: () => void): ObserverUnsubscribe {
-  return subscribeGuiObjectLayout(anchor, onChange);
-}
-
-export function subscribeContent(content: GuiObject, onChange: () => void): ObserverUnsubscribe {
-  return subscribeGuiObjectLayout(content, onChange);
-}
-
-export function subscribeViewport(onChange: () => void): ObserverUnsubscribe {
-  let viewportConnection: RBXScriptConnection | undefined;
-
-  const reconnectViewportConnection = () => {
-    if (viewportConnection) {
-      viewportConnection.Disconnect();
-      viewportConnection = undefined;
-    }
-
-    const currentCamera = WorkspaceService.CurrentCamera;
-    if (currentCamera) {
-      viewportConnection = currentCamera.GetPropertyChangedSignal("ViewportSize").Connect(() => {
-        onChange();
-      });
-    }
-  };
-
-  reconnectViewportConnection();
-  const cameraConnection = WorkspaceService.GetPropertyChangedSignal("CurrentCamera").Connect(() => {
-    reconnectViewportConnection();
-    onChange();
-  });
-
-  return () => {
-    if (viewportConnection) {
-      viewportConnection.Disconnect();
-      viewportConnection = undefined;
-    }
-    cameraConnection.Disconnect();
-  };
-}

package/src/types.ts

@@ -1,32 +0,0 @@
-import type React from "@rbxts/react";
-
-export type PopperPlacement = "top" | "bottom" | "left" | "right";
-
-export type ComputePopperInput = {
-  anchorPosition: Vector2;
-  anchorSize: Vector2;
-  contentSize: Vector2;
-  viewportSize: Vector2;
-  placement?: PopperPlacement;
-  offset?: Vector2;
-  padding?: number;
-};
-
-export type ComputePopperResult = {
-  position: UDim2;
-  anchorPoint: Vector2;
-  placement: PopperPlacement;
-};
-
-export type UsePopperOptions = {
-  anchorRef: React.RefObject<GuiObject> | React.MutableRefObject<GuiObject | undefined>;
-  contentRef: React.RefObject<GuiObject> | React.MutableRefObject<GuiObject | undefined>;
-  placement?: PopperPlacement;
-  offset?: Vector2;
-  padding?: number;
-  enabled?: boolean;
-};
-
-export type UsePopperResult = ComputePopperResult & {
-  update: () => void;
-};

package/src/usePopper.ts

@@ -1,130 +0,0 @@
-import { React } from "@lattice-ui/core";
-import { computePopper } from "./compute";
-import { subscribeAnchor, subscribeContent, subscribeViewport } from "./observers";
-import type { ComputePopperResult, UsePopperOptions, UsePopperResult } from "./types";
-
-const WorkspaceService = game.GetService("Workspace");
-const RunService = game.GetService("RunService");
-
-function readGuiRef(ref: UsePopperOptions["anchorRef"] | UsePopperOptions["contentRef"]): GuiObject | undefined {
-  return ref.current;
-}
-
-function getDefaultComputedResult(placement: UsePopperOptions["placement"]): ComputePopperResult {
-  return {
-    anchorPoint: new Vector2(0, 0),
-    placement: placement ?? "bottom",
-    position: UDim2.fromOffset(0, 0),
-  };
-}
-
-function areResultsEqual(a: ComputePopperResult, b: ComputePopperResult) {
-  return (
-    a.placement === b.placement &&
-    a.anchorPoint.X === b.anchorPoint.X &&
-    a.anchorPoint.Y === b.anchorPoint.Y &&
-    a.position.X.Scale === b.position.X.Scale &&
-    a.position.X.Offset === b.position.X.Offset &&
-    a.position.Y.Scale === b.position.Y.Scale &&
-    a.position.Y.Offset === b.position.Y.Offset
-  );
-}
-
-export function usePopper(options: UsePopperOptions): UsePopperResult {
-  const enabled = options.enabled ?? true;
-  const [computedResult, setComputedResult] = React.useState<ComputePopperResult>(() =>
-    getDefaultComputedResult(options.placement),
-  );
-
-  const update = React.useCallback(() => {
-    if (!enabled) {
-      return;
-    }
-
-    const anchor = readGuiRef(options.anchorRef);
-    const content = readGuiRef(options.contentRef);
-    if (!anchor || !content) {
-      return;
-    }
-
-    const viewportSize = WorkspaceService.CurrentCamera?.ViewportSize ?? new Vector2(1920, 1080);
-    const nextResult = computePopper({
-      anchorPosition: anchor.AbsolutePosition,
-      anchorSize: anchor.AbsoluteSize,
-      contentSize: content.AbsoluteSize,
-      offset: options.offset,
-      padding: options.padding,
-      placement: options.placement,
-      viewportSize,
-    });
-
-    setComputedResult((currentResult) => (areResultsEqual(currentResult, nextResult) ? currentResult : nextResult));
-  }, [enabled, options.anchorRef, options.contentRef, options.offset, options.padding, options.placement]);
-
-  React.useEffect(() => {
-    update();
-  }, [update]);
-
-  React.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-
-    let disconnectAnchor: (() => void) | undefined;
-    let disconnectContent: (() => void) | undefined;
-    let disconnectViewport: (() => void) | undefined;
-    let waitForRefsConnection: RBXScriptConnection | undefined;
-    let attached = false;
-
-    const attachObservers = () => {
-      if (attached) {
-        return true;
-      }
-
-      const anchor = readGuiRef(options.anchorRef);
-      const content = readGuiRef(options.contentRef);
-      if (!anchor || !content) {
-        return false;
-      }
-
-      disconnectAnchor = subscribeAnchor(anchor, update);
-      disconnectContent = subscribeContent(content, update);
-      disconnectViewport = subscribeViewport(update);
-      attached = true;
-      return true;
-    };
-
-    if (!attachObservers()) {
-      waitForRefsConnection = RunService.Heartbeat.Connect(() => {
-        if (attachObservers()) {
-          if (waitForRefsConnection) {
-            waitForRefsConnection.Disconnect();
-            waitForRefsConnection = undefined;
-          }
-          update();
-        }
-      });
-    } else {
-      update();
-    }
-
-    return () => {
-      if (waitForRefsConnection) {
-        waitForRefsConnection.Disconnect();
-        waitForRefsConnection = undefined;
-      }
-
-      disconnectAnchor?.();
-      disconnectContent?.();
-      disconnectViewport?.();
-    };
-  }, [enabled, options.anchorRef, options.contentRef, update]);
-
-  return React.useMemo(
-    () => ({
-      ...computedResult,
-      update,
-    }),
-    [computedResult, update],
-  );
-}

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "out",
-    "declaration": true,
-    "typeRoots": [
-      "./node_modules/@rbxts",
-      "../../node_modules/@rbxts",
-      "./node_modules/@lattice-ui",
-      "../../node_modules/@lattice-ui"
-    ],
-    "types": ["types", "compiler-types"]
-  },
-  "include": ["src"]
-}

package/tsconfig.typecheck.json

@@ -1,25 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "baseUrl": "..",
-    "rootDir": "..",
-    "paths": {
-      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
-      "@lattice-ui/core": ["core/src/index.ts"],
-      "@lattice-ui/dialog": ["dialog/src/index.ts"],
-      "@lattice-ui/focus": ["focus/src/index.ts"],
-      "@lattice-ui/layer": ["layer/src/index.ts"],
-      "@lattice-ui/menu": ["menu/src/index.ts"],
-      "@lattice-ui/popover": ["popover/src/index.ts"],
-      "@lattice-ui/popper": ["popper/src/index.ts"],
-      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
-      "@lattice-ui/style": ["style/src/index.ts"],
-      "@lattice-ui/switch": ["switch/src/index.ts"],
-      "@lattice-ui/system": ["system/src/index.ts"],
-      "@lattice-ui/tabs": ["tabs/src/index.ts"],
-      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
-      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
-    }
-  }
-}