@lattice-ui/layer 0.1.1 → 0.3.0

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@lattice-ui/layer",
-  "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/dismissable/DismissableLayer.tsx

@@ -1,118 +0,0 @@
-import { React } from "@lattice-ui/core";
-import { DEFAULT_LAYER_IGNORE_GUI_INSET } from "../internals/constants";
-import { Portal } from "../portal/Portal";
-import { usePortalContext } from "../portal/PortalProvider";
-import { isOutsidePointerEvent } from "./events";
-import { registerLayer, unregisterLayer } from "./layerStack";
-import type { DismissableLayerProps, LayerInteractEvent } from "./types";
-
-function useLatest<T>(value: T) {
-  const ref = React.useRef(value);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref;
-}
-
-export function DismissableLayer(props: DismissableLayerProps) {
-  const enabled = props.enabled ?? true;
-  const shouldBlockOutsidePointer = props.modal === true || props.disableOutsidePointerEvents === true;
-  const layerIgnoresGuiInset = DEFAULT_LAYER_IGNORE_GUI_INSET;
-
-  const portalContext = usePortalContext();
-  const contentRootRef = React.useRef<Frame>();
-  const [stackOrder, setStackOrder] = React.useState(0);
-
-  const enabledRef = useLatest(enabled);
-  const onDismissRef = useLatest(props.onDismiss);
-  const onPointerDownOutsideRef = useLatest(props.onPointerDownOutside);
-  const onInteractOutsideRef = useLatest(props.onInteractOutside);
-  const onEscapeKeyDownRef = useLatest(props.onEscapeKeyDown);
-
-  const callPointerDownOutside = React.useCallback((event: LayerInteractEvent) => {
-    onPointerDownOutsideRef.current?.(event);
-  }, []);
-
-  const callInteractOutside = React.useCallback((event: LayerInteractEvent) => {
-    onInteractOutsideRef.current?.(event);
-  }, []);
-
-  const callEscape = React.useCallback((event: LayerInteractEvent) => {
-    onEscapeKeyDownRef.current?.(event);
-  }, []);
-
-  const callDismiss = React.useCallback(() => {
-    onDismissRef.current?.();
-  }, []);
-
-  React.useEffect(() => {
-    const registration = registerLayer({
-      getEnabled: () => enabledRef.current,
-      isPointerOutside: (inputObject) => {
-        const contentRoot = contentRootRef.current;
-        if (!contentRoot) {
-          return false;
-        }
-        return isOutsidePointerEvent(inputObject, portalContext.container, contentRoot, {
-          layerIgnoresGuiInset,
-        });
-      },
-      onPointerDownOutside: callPointerDownOutside,
-      onInteractOutside: callInteractOutside,
-      onEscapeKeyDown: callEscape,
-      onDismiss: callDismiss,
-    });
-
-    setStackOrder(registration.mountOrder);
-
-    return () => {
-      unregisterLayer(registration.id);
-    };
-  }, [
-    callDismiss,
-    callEscape,
-    callInteractOutside,
-    callPointerDownOutside,
-    enabledRef,
-    layerIgnoresGuiInset,
-    portalContext.container,
-  ]);
-
-  return (
-    <Portal>
-      <screengui
-        key={`Layer_${stackOrder}`}
-        DisplayOrder={portalContext.displayOrderBase + stackOrder}
-        IgnoreGuiInset={layerIgnoresGuiInset}
-        ResetOnSpawn={false}
-        ZIndexBehavior={Enum.ZIndexBehavior.Sibling}
-      >
-        {shouldBlockOutsidePointer ? (
-          <textbutton
-            Active={true}
-            AutoButtonColor={false}
-            BackgroundTransparency={1}
-            BorderSizePixel={0}
-            Modal={true}
-            Position={UDim2.fromScale(0, 0)}
-            Selectable={false}
-            Size={UDim2.fromScale(1, 1)}
-            Text=""
-            TextTransparency={1}
-            ZIndex={0}
-          />
-        ) : undefined}
-        <frame
-          BackgroundTransparency={1}
-          BorderSizePixel={0}
-          Position={UDim2.fromScale(0, 0)}
-          Size={UDim2.fromScale(1, 1)}
-          ref={contentRootRef}
-          ZIndex={1}
-        >
-          {props.children}
-        </frame>
-      </screengui>
-    </Portal>
-  );
-}

package/src/dismissable/events.ts

@@ -1,78 +0,0 @@
-import { getGuiInsetTopLeft } from "../internals/env";
-import type { LayerInteractEvent } from "./types";
-
-type OutsidePointerOptions = {
-  layerIgnoresGuiInset: boolean;
-};
-
-export function isPointerInput(inputObject: InputObject) {
-  return (
-    inputObject.UserInputType === Enum.UserInputType.MouseButton1 ||
-    inputObject.UserInputType === Enum.UserInputType.Touch
-  );
-}
-
-export function toLayerInteractEvent(originalEvent: InputObject): LayerInteractEvent {
-  const event: LayerInteractEvent = {
-    originalEvent,
-    defaultPrevented: false,
-    preventDefault: () => {
-      event.defaultPrevented = true;
-    },
-  };
-  return event;
-}
-
-function addUniqueSample(samples: Array<Vector2>, sampleKeys: Record<string, true>, x: number, y: number) {
-  const roundedX = math.round(x);
-  const roundedY = math.round(y);
-  const key = `${roundedX}:${roundedY}`;
-  if (sampleKeys[key]) {
-    return;
-  }
-
-  sampleKeys[key] = true;
-  samples.push(new Vector2(roundedX, roundedY));
-}
-
-function getPointerSamples(pointerPosition: Vector2, options: OutsidePointerOptions) {
-  const insetTopLeft = getGuiInsetTopLeft();
-
-  const samples = new Array<Vector2>();
-  const sampleKeys: Record<string, true> = {};
-
-  addUniqueSample(samples, sampleKeys, pointerPosition.X, pointerPosition.Y);
-  addUniqueSample(samples, sampleKeys, pointerPosition.X + insetTopLeft.X, pointerPosition.Y + insetTopLeft.Y);
-  addUniqueSample(samples, sampleKeys, pointerPosition.X - insetTopLeft.X, pointerPosition.Y - insetTopLeft.Y);
-
-  if (options.layerIgnoresGuiInset) {
-    addUniqueSample(samples, sampleKeys, pointerPosition.X, pointerPosition.Y + insetTopLeft.Y);
-    addUniqueSample(samples, sampleKeys, pointerPosition.X, pointerPosition.Y - insetTopLeft.Y);
-    addUniqueSample(samples, sampleKeys, pointerPosition.X + insetTopLeft.X, pointerPosition.Y);
-    addUniqueSample(samples, sampleKeys, pointerPosition.X - insetTopLeft.X, pointerPosition.Y);
-  }
-
-  return samples;
-}
-
-export function isOutsidePointerEvent(
-  inputObject: InputObject,
-  container: BasePlayerGui,
-  contentRoot: GuiObject,
-  options: OutsidePointerOptions,
-) {
-  const rawPointerPosition = inputObject.Position;
-  const pointerPosition = new Vector2(rawPointerPosition.X, rawPointerPosition.Y);
-  const pointerSamples = getPointerSamples(pointerPosition, options);
-
-  for (const sample of pointerSamples) {
-    const hitGuiObjects = container.GetGuiObjectsAtPosition(sample.X, sample.Y);
-    for (const hitObject of hitGuiObjects) {
-      if (hitObject.IsDescendantOf(contentRoot)) {
-        return false;
-      }
-    }
-  }
-
-  return true;
-}

package/src/dismissable/layerStack.ts

@@ -1,147 +0,0 @@
-import { GuiService, UserInputService } from "../internals/env";
-import { isPointerInput, toLayerInteractEvent } from "./events";
-import type { LayerInteractEvent } from "./types";
-
-type LayerEntry = {
-  id: number;
-  mountOrder: number;
-  getEnabled: () => boolean;
-  isPointerOutside: (inputObject: InputObject) => boolean;
-  onPointerDownOutside?: (event: LayerInteractEvent) => void;
-  onInteractOutside?: (event: LayerInteractEvent) => void;
-  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
-  onDismiss?: () => void;
-};
-
-type RegisterLayerParams = Omit<LayerEntry, "id" | "mountOrder">;
-
-export type LayerRegistration = {
-  id: number;
-  mountOrder: number;
-};
-
-const layerEntries = new Array<LayerEntry>();
-let nextLayerId = 0;
-let nextMountOrder = 0;
-let inputConnection: RBXScriptConnection | undefined;
-
-function getTopMostEnabledLayer() {
-  for (let index = layerEntries.size() - 1; index >= 0; index--) {
-    const entry = layerEntries[index];
-    if (entry.getEnabled()) {
-      return entry;
-    }
-  }
-  return undefined;
-}
-
-function handleDismissEvent(entry: LayerEntry, event: LayerInteractEvent) {
-  if (!event.defaultPrevented) {
-    entry.onDismiss?.();
-  }
-}
-
-function shouldIgnoreEscapeDismiss() {
-  const focusedTextBox = UserInputService.GetFocusedTextBox();
-  if (focusedTextBox) {
-    return true;
-  }
-
-  const selectedObject = GuiService.SelectedObject;
-  if (selectedObject && selectedObject.IsA("TextBox")) {
-    return true;
-  }
-
-  return false;
-}
-
-function handleInputBegan(inputObject: InputObject, gameProcessedEvent: boolean) {
-  if (gameProcessedEvent) {
-    return;
-  }
-
-  const topLayer = getTopMostEnabledLayer();
-  if (!topLayer) {
-    return;
-  }
-
-  if (inputObject.KeyCode === Enum.KeyCode.Escape) {
-    if (shouldIgnoreEscapeDismiss()) {
-      return;
-    }
-
-    const escapeEvent = toLayerInteractEvent(inputObject);
-    topLayer.onEscapeKeyDown?.(escapeEvent);
-    handleDismissEvent(topLayer, escapeEvent);
-    return;
-  }
-
-  if (!isPointerInput(inputObject)) {
-    return;
-  }
-
-  if (!topLayer.isPointerOutside(inputObject)) {
-    return;
-  }
-
-  const outsideEvent = toLayerInteractEvent(inputObject);
-  topLayer.onPointerDownOutside?.(outsideEvent);
-  topLayer.onInteractOutside?.(outsideEvent);
-  handleDismissEvent(topLayer, outsideEvent);
-}
-
-function startInputListener() {
-  if (inputConnection) {
-    return;
-  }
-
-  inputConnection = UserInputService.InputBegan.Connect((inputObject, gameProcessedEvent) => {
-    handleInputBegan(inputObject, gameProcessedEvent);
-  });
-}
-
-function stopInputListener() {
-  if (!inputConnection) {
-    return;
-  }
-
-  inputConnection.Disconnect();
-  inputConnection = undefined;
-}
-
-function syncInputListener() {
-  if (layerEntries.size() > 0) {
-    startInputListener();
-  } else {
-    stopInputListener();
-  }
-}
-
-export function registerLayer(params: RegisterLayerParams): LayerRegistration {
-  nextLayerId += 1;
-  nextMountOrder += 1;
-
-  const entry: LayerEntry = {
-    id: nextLayerId,
-    mountOrder: nextMountOrder,
-    ...params,
-  };
-
-  layerEntries.push(entry);
-  syncInputListener();
-
-  return {
-    id: entry.id,
-    mountOrder: entry.mountOrder,
-  };
-}
-
-export function unregisterLayer(layerId: number) {
-  const layerIndex = layerEntries.findIndex((entry) => entry.id === layerId);
-  if (layerIndex === -1) {
-    return;
-  }
-
-  layerEntries.remove(layerIndex);
-  syncInputListener();
-}

package/src/dismissable/types.ts

@@ -1,18 +0,0 @@
-import type React from "@rbxts/react";
-
-export type LayerInteractEvent = {
-  originalEvent: InputObject;
-  defaultPrevented: boolean;
-  preventDefault: () => void;
-};
-
-export type DismissableLayerProps = {
-  children?: React.ReactNode;
-  enabled?: boolean;
-  modal?: boolean;
-  disableOutsidePointerEvents?: boolean;
-  onPointerDownOutside?: (event: LayerInteractEvent) => void;
-  onInteractOutside?: (event: LayerInteractEvent) => void;
-  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
-  onDismiss?: () => void;
-};

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from "./dismissable/DismissableLayer";
-export * from "./dismissable/types";
-export * from "./portal/Portal";
-export * from "./portal/PortalProvider";
-export * from "./presence/Presence";

package/src/internals/constants.ts

@@ -1,3 +0,0 @@
-export const DEFAULT_DISPLAY_ORDER_BASE = 1000;
-export const DEFAULT_PRESENCE_EXIT_FALLBACK_MS = 500;
-export const DEFAULT_LAYER_IGNORE_GUI_INSET = true;

package/src/internals/env.ts

@@ -1,7 +0,0 @@
-export const UserInputService = game.GetService("UserInputService");
-export const GuiService = game.GetService("GuiService");
-
-export function getGuiInsetTopLeft() {
-  const [topLeftInset] = GuiService.GetGuiInset();
-  return topLeftInset;
-}

package/src/portal/Portal.tsx

@@ -1,9 +0,0 @@
-import { ReactRoblox } from "@lattice-ui/core";
-import { usePortalContext } from "./PortalProvider";
-import type { PortalProps } from "./types";
-
-export function Portal(props: PortalProps) {
-  const contextValue = usePortalContext();
-  const target = props.container ?? contextValue.container;
-  return ReactRoblox.createPortal(props.children, target);
-}

package/src/portal/PortalProvider.tsx

@@ -1,20 +0,0 @@
-import { createStrictContext, React } from "@lattice-ui/core";
-import { DEFAULT_DISPLAY_ORDER_BASE } from "../internals/constants";
-import type { PortalContextValue, PortalProviderProps } from "./types";
-
-const [PortalContextProvider, usePortalContext] = createStrictContext<PortalContextValue>("PortalProvider");
-
-export function PortalProvider(props: PortalProviderProps) {
-  const displayOrderBase = props.displayOrderBase ?? DEFAULT_DISPLAY_ORDER_BASE;
-  const contextValue = React.useMemo(
-    () => ({
-      container: props.container,
-      displayOrderBase,
-    }),
-    [displayOrderBase, props.container],
-  );
-
-  return <PortalContextProvider value={contextValue}>{props.children}</PortalContextProvider>;
-}
-
-export { usePortalContext };

package/src/portal/types.ts

@@ -1,17 +0,0 @@
-import type React from "@rbxts/react";
-
-export type PortalContextValue = {
-  container: BasePlayerGui;
-  displayOrderBase: number;
-};
-
-export type PortalProviderProps = {
-  container: BasePlayerGui;
-  displayOrderBase?: number;
-  children?: React.ReactNode;
-};
-
-export type PortalProps = {
-  children?: React.ReactNode;
-  container?: Instance;
-};

package/src/presence/Presence.tsx

@@ -1,93 +0,0 @@
-import { React } from "@lattice-ui/core";
-import { DEFAULT_PRESENCE_EXIT_FALLBACK_MS } from "../internals/constants";
-import type { PresenceProps } from "./types";
-
-export function Presence(props: PresenceProps) {
-  const [mounted, setMounted] = React.useState(props.present);
-  const [isPresent, setIsPresent] = React.useState(props.present);
-  const mountedRef = React.useRef(mounted);
-  const fallbackTaskRef = React.useRef<thread>();
-  const onExitCompleteRef = React.useRef(props.onExitComplete);
-
-  React.useEffect(() => {
-    onExitCompleteRef.current = props.onExitComplete;
-  }, [props.onExitComplete]);
-
-  React.useEffect(() => {
-    mountedRef.current = mounted;
-  }, [mounted]);
-
-  const completeExit = React.useCallback(() => {
-    if (!mountedRef.current) {
-      return;
-    }
-
-    const fallbackTask = fallbackTaskRef.current;
-    if (fallbackTask) {
-      task.cancel(fallbackTask);
-      fallbackTaskRef.current = undefined;
-    }
-
-    mountedRef.current = false;
-    setMounted(false);
-    onExitCompleteRef.current?.();
-  }, []);
-
-  React.useEffect(() => {
-    if (props.present) {
-      const fallbackTask = fallbackTaskRef.current;
-      if (fallbackTask) {
-        task.cancel(fallbackTask);
-        fallbackTaskRef.current = undefined;
-      }
-
-      if (!mountedRef.current) {
-        mountedRef.current = true;
-        setMounted(true);
-      }
-      setIsPresent(true);
-      return;
-    }
-
-    if (!mountedRef.current) {
-      return;
-    }
-
-    setIsPresent(false);
-
-    const fallbackTask = fallbackTaskRef.current;
-    if (fallbackTask) {
-      task.cancel(fallbackTask);
-      fallbackTaskRef.current = undefined;
-    }
-
-    const timeoutMs = props.exitFallbackMs ?? DEFAULT_PRESENCE_EXIT_FALLBACK_MS;
-    fallbackTaskRef.current = task.delay(timeoutMs / 1000, () => {
-      completeExit();
-    });
-  }, [completeExit, props.exitFallbackMs, props.present]);
-
-  React.useEffect(() => {
-    return () => {
-      const fallbackTask = fallbackTaskRef.current;
-      if (fallbackTask) {
-        task.cancel(fallbackTask);
-        fallbackTaskRef.current = undefined;
-      }
-    };
-  }, []);
-
-  if (!mounted) {
-    return undefined;
-  }
-
-  const render = props.render ?? props.children;
-  if (!render) {
-    return undefined;
-  }
-
-  return render({
-    isPresent,
-    onExitComplete: completeExit,
-  });
-}

package/src/presence/types.ts

@@ -1,16 +0,0 @@
-import type React from "@rbxts/react";
-
-export type PresenceRenderState = {
-  isPresent: boolean;
-  onExitComplete: () => void;
-};
-
-export type PresenceRender = (state: PresenceRenderState) => React.ReactElement | undefined;
-
-export type PresenceProps = {
-  present: boolean;
-  exitFallbackMs?: number;
-  onExitComplete?: () => void;
-  children?: PresenceRender;
-  render?: PresenceRender;
-};

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"]
-    }
-  }
-}