@lattice-ui/popover 0.1.1 → 0.3.0

package/out/index.d.ts

@@ -1,7 +1,16 @@
-export { PopoverAnchor } from "./Popover/PopoverAnchor";
-export { PopoverClose } from "./Popover/PopoverClose";
-export { PopoverContent } from "./Popover/PopoverContent";
-export { PopoverPortal } from "./Popover/PopoverPortal";
-export { Popover } from "./Popover/PopoverRoot";
-export { PopoverTrigger } from "./Popover/PopoverTrigger";
+import { PopoverAnchor } from "./Popover/PopoverAnchor";
+import { PopoverClose } from "./Popover/PopoverClose";
+import { PopoverContent } from "./Popover/PopoverContent";
+import { PopoverPortal } from "./Popover/PopoverPortal";
+import { Popover as PopoverRoot } from "./Popover/PopoverRoot";
+import { PopoverTrigger } from "./Popover/PopoverTrigger";
+export declare const Popover: {
+    readonly Root: typeof PopoverRoot;
+    readonly Trigger: typeof PopoverTrigger;
+    readonly Portal: typeof PopoverPortal;
+    readonly Content: typeof PopoverContent;
+    readonly Anchor: typeof PopoverAnchor;
+    readonly Close: typeof PopoverClose;
+};
+export { PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger };
 export type { PopoverAnchorProps, PopoverCloseProps, PopoverContentProps, PopoverPortalProps, PopoverProps, PopoverTriggerProps, } from "./Popover/types";

package/out/init.luau

@@ -1,10 +1,25 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local exports = {}
-exports.PopoverAnchor = TS.import(script, script, "Popover", "PopoverAnchor").PopoverAnchor
-exports.PopoverClose = TS.import(script, script, "Popover", "PopoverClose").PopoverClose
-exports.PopoverContent = TS.import(script, script, "Popover", "PopoverContent").PopoverContent
-exports.PopoverPortal = TS.import(script, script, "Popover", "PopoverPortal").PopoverPortal
-exports.Popover = TS.import(script, script, "Popover", "PopoverRoot").Popover
-exports.PopoverTrigger = TS.import(script, script, "Popover", "PopoverTrigger").PopoverTrigger
-return exports
+local PopoverAnchor = TS.import(script, script, "Popover", "PopoverAnchor").PopoverAnchor
+local PopoverClose = TS.import(script, script, "Popover", "PopoverClose").PopoverClose
+local PopoverContent = TS.import(script, script, "Popover", "PopoverContent").PopoverContent
+local PopoverPortal = TS.import(script, script, "Popover", "PopoverPortal").PopoverPortal
+local PopoverRoot = TS.import(script, script, "Popover", "PopoverRoot").Popover
+local PopoverTrigger = TS.import(script, script, "Popover", "PopoverTrigger").PopoverTrigger
+local Popover = {
+	Root = PopoverRoot,
+	Trigger = PopoverTrigger,
+	Portal = PopoverPortal,
+	Content = PopoverContent,
+	Anchor = PopoverAnchor,
+	Close = PopoverClose,
+}
+return {
+	Popover = Popover,
+	PopoverAnchor = PopoverAnchor,
+	PopoverClose = PopoverClose,
+	PopoverContent = PopoverContent,
+	PopoverPortal = PopoverPortal,
+	PopoverRoot = PopoverRoot,
+	PopoverTrigger = PopoverTrigger,
+}

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@lattice-ui/popover",
-  "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/layer": "0.1.1",
-    "@lattice-ui/popper": "0.1.1",
-    "@lattice-ui/core": "0.1.1"
+    "@lattice-ui/core": "0.3.0",
+    "@lattice-ui/popper": "0.3.0",
+    "@lattice-ui/layer": "0.3.0"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -19,7 +23,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/Popover/PopoverAnchor.tsx

@@ -1,33 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { usePopoverContext } from "./context";
-import type { PopoverAnchorProps } from "./types";
-
-function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
-    return undefined;
-  }
-
-  return instance;
-}
-
-export function PopoverAnchor(props: PopoverAnchorProps) {
-  const popoverContext = usePopoverContext();
-
-  const setAnchorRef = React.useCallback(
-    (instance: Instance | undefined) => {
-      popoverContext.anchorRef.current = toGuiObject(instance);
-    },
-    [popoverContext.anchorRef],
-  );
-
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[PopoverAnchor] `asChild` requires a child element.");
-    }
-
-    return <Slot ref={setAnchorRef}>{child}</Slot>;
-  }
-
-  return <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(0, 0)} ref={setAnchorRef} />;
-}

package/src/Popover/PopoverClose.tsx

@@ -1,35 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { usePopoverContext } from "./context";
-import type { PopoverCloseProps } from "./types";
-
-export function PopoverClose(props: PopoverCloseProps) {
-  const popoverContext = usePopoverContext();
-
-  const handleActivated = React.useCallback(() => {
-    popoverContext.setOpen(false);
-  }, [popoverContext.setOpen]);
-
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[PopoverClose] `asChild` requires a child element.");
-    }
-
-    return <Slot Event={{ Activated: handleActivated }}>{child}</Slot>;
-  }
-
-  return (
-    <textbutton
-      AutoButtonColor={false}
-      BackgroundTransparency={1}
-      BorderSizePixel={0}
-      Event={{ Activated: handleActivated }}
-      Size={UDim2.fromOffset(110, 34)}
-      Text="Close"
-      TextColor3={Color3.fromRGB(240, 244, 250)}
-      TextSize={16}
-    >
-      {props.children}
-    </textbutton>
-  );
-}

package/src/Popover/PopoverContent.tsx

@@ -1,145 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { DismissableLayer, Presence } from "@lattice-ui/layer";
-import { usePopper } from "@lattice-ui/popper";
-import { usePopoverContext } from "./context";
-import type { PopoverContentProps } from "./types";
-
-type PopoverContentImplProps = {
-  enabled: boolean;
-  visible: boolean;
-  onDismiss: () => void;
-  asChild?: boolean;
-  placement?: PopoverContentProps["placement"];
-  offset?: PopoverContentProps["offset"];
-  padding?: PopoverContentProps["padding"];
-} & Pick<PopoverContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
-
-function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
-    return undefined;
-  }
-
-  return instance;
-}
-
-function PopoverContentImpl(props: PopoverContentImplProps) {
-  const popoverContext = usePopoverContext();
-  const anchorRef = popoverContext.anchorRef.current ? popoverContext.anchorRef : popoverContext.triggerRef;
-
-  const popper = usePopper({
-    anchorRef,
-    contentRef: popoverContext.contentRef,
-    placement: props.placement,
-    offset: props.offset,
-    padding: props.padding,
-    enabled: props.enabled,
-  });
-
-  const setContentRef = React.useCallback(
-    (instance: Instance | undefined) => {
-      popoverContext.contentRef.current = toGuiObject(instance);
-    },
-    [popoverContext.contentRef],
-  );
-
-  if (props.asChild) {
-    const child = props.children;
-    if (!React.isValidElement(child)) {
-      error("[PopoverContent] `asChild` requires a child element.");
-    }
-
-    return (
-      <DismissableLayer
-        enabled={props.enabled}
-        modal={popoverContext.modal}
-        onDismiss={props.onDismiss}
-        onEscapeKeyDown={props.onEscapeKeyDown}
-        onInteractOutside={props.onInteractOutside}
-        onPointerDownOutside={props.onPointerDownOutside}
-      >
-        <Slot AnchorPoint={popper.anchorPoint} Position={popper.position} Visible={props.visible} ref={setContentRef}>
-          {child}
-        </Slot>
-      </DismissableLayer>
-    );
-  }
-
-  return (
-    <DismissableLayer
-      enabled={props.enabled}
-      modal={popoverContext.modal}
-      onDismiss={props.onDismiss}
-      onEscapeKeyDown={props.onEscapeKeyDown}
-      onInteractOutside={props.onInteractOutside}
-      onPointerDownOutside={props.onPointerDownOutside}
-    >
-      <frame
-        AnchorPoint={popper.anchorPoint}
-        BackgroundTransparency={1}
-        BorderSizePixel={0}
-        Position={popper.position}
-        Size={UDim2.fromOffset(0, 0)}
-        Visible={props.visible}
-        ref={setContentRef}
-      >
-        {props.children}
-      </frame>
-    </DismissableLayer>
-  );
-}
-
-export function PopoverContent(props: PopoverContentProps) {
-  const popoverContext = usePopoverContext();
-  const open = popoverContext.open;
-  const forceMount = props.forceMount === true;
-
-  const handleDismiss = React.useCallback(() => {
-    popoverContext.setOpen(false);
-  }, [popoverContext.setOpen]);
-
-  if (!open && !forceMount) {
-    return undefined;
-  }
-
-  if (forceMount) {
-    return (
-      <PopoverContentImpl
-        asChild={props.asChild}
-        enabled={open}
-        offset={props.offset}
-        onDismiss={handleDismiss}
-        onEscapeKeyDown={props.onEscapeKeyDown}
-        onInteractOutside={props.onInteractOutside}
-        onPointerDownOutside={props.onPointerDownOutside}
-        padding={props.padding}
-        placement={props.placement}
-        visible={open}
-      >
-        {props.children}
-      </PopoverContentImpl>
-    );
-  }
-
-  return (
-    <Presence
-      exitFallbackMs={0}
-      present={open}
-      render={(state) => (
-        <PopoverContentImpl
-          asChild={props.asChild}
-          enabled={state.isPresent}
-          offset={props.offset}
-          onDismiss={handleDismiss}
-          onEscapeKeyDown={props.onEscapeKeyDown}
-          onInteractOutside={props.onInteractOutside}
-          onPointerDownOutside={props.onPointerDownOutside}
-          padding={props.padding}
-          placement={props.placement}
-          visible={state.isPresent}
-        >
-          {props.children}
-        </PopoverContentImpl>
-      )}
-    />
-  );
-}

package/src/Popover/PopoverPortal.tsx

@@ -1,28 +0,0 @@
-import { React } from "@lattice-ui/core";
-import { Portal, PortalProvider, usePortalContext } from "@lattice-ui/layer";
-import type { PopoverPortalProps } from "./types";
-
-function PopoverPortalWithOverrides(props: PopoverPortalProps) {
-  const portalContext = usePortalContext();
-  const container = props.container ?? portalContext.container;
-  const displayOrderBase = props.displayOrderBase ?? portalContext.displayOrderBase;
-
-  return (
-    <PortalProvider container={container} displayOrderBase={displayOrderBase}>
-      <Portal>{props.children}</Portal>
-    </PortalProvider>
-  );
-}
-
-export function PopoverPortal(props: PopoverPortalProps) {
-  const hasOverrides = props.container !== undefined || props.displayOrderBase !== undefined;
-  if (hasOverrides) {
-    return (
-      <PopoverPortalWithOverrides container={props.container} displayOrderBase={props.displayOrderBase}>
-        {props.children}
-      </PopoverPortalWithOverrides>
-    );
-  }
-
-  return <Portal>{props.children}</Portal>;
-}

package/src/Popover/PopoverRoot.tsx

@@ -1,37 +0,0 @@
-import { React, useControllableState } from "@lattice-ui/core";
-import { PopoverContextProvider } from "./context";
-import type { PopoverProps } from "./types";
-
-export function Popover(props: PopoverProps) {
-  const [open, setOpenState] = useControllableState<boolean>({
-    value: props.open,
-    defaultValue: props.defaultOpen ?? false,
-    onChange: props.onOpenChange,
-  });
-  const modal = props.modal ?? false;
-
-  const triggerRef = React.useRef<GuiObject>();
-  const anchorRef = React.useRef<GuiObject>();
-  const contentRef = React.useRef<GuiObject>();
-
-  const setOpen = React.useCallback(
-    (nextOpen: boolean) => {
-      setOpenState(nextOpen);
-    },
-    [setOpenState],
-  );
-
-  const contextValue = React.useMemo(
-    () => ({
-      open,
-      setOpen,
-      modal,
-      triggerRef,
-      anchorRef,
-      contentRef,
-    }),
-    [modal, open, setOpen],
-  );
-
-  return <PopoverContextProvider value={contextValue}>{props.children}</PopoverContextProvider>;
-}

package/src/Popover/PopoverTrigger.tsx

@@ -1,61 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { usePopoverContext } from "./context";
-import type { PopoverTriggerProps } from "./types";
-
-function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
-    return undefined;
-  }
-
-  return instance;
-}
-
-export function PopoverTrigger(props: PopoverTriggerProps) {
-  const popoverContext = usePopoverContext();
-
-  const setTriggerRef = React.useCallback(
-    (instance: Instance | undefined) => {
-      popoverContext.triggerRef.current = toGuiObject(instance);
-    },
-    [popoverContext.triggerRef],
-  );
-
-  const handleActivated = React.useCallback(() => {
-    if (props.disabled) {
-      return;
-    }
-
-    popoverContext.setOpen(!popoverContext.open);
-  }, [popoverContext.open, popoverContext.setOpen, props.disabled]);
-
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[PopoverTrigger] `asChild` requires a child element.");
-    }
-
-    return (
-      <Slot Event={{ Activated: handleActivated }} ref={setTriggerRef}>
-        {child}
-      </Slot>
-    );
-  }
-
-  return (
-    <textbutton
-      Active={props.disabled !== true}
-      AutoButtonColor={false}
-      BackgroundTransparency={1}
-      BorderSizePixel={0}
-      Event={{ Activated: handleActivated }}
-      Selectable={props.disabled !== true}
-      Size={UDim2.fromOffset(150, 38)}
-      Text="Toggle Popover"
-      TextColor3={Color3.fromRGB(240, 244, 250)}
-      TextSize={16}
-      ref={setTriggerRef}
-    >
-      {props.children}
-    </textbutton>
-  );
-}

package/src/Popover/context.ts

@@ -1,6 +0,0 @@
-import { createStrictContext } from "@lattice-ui/core";
-import type { PopoverContextValue } from "./types";
-
-const [PopoverContextProvider, usePopoverContext] = createStrictContext<PopoverContextValue>("Popover");
-
-export { PopoverContextProvider, usePopoverContext };

package/src/Popover/types.ts

@@ -1,56 +0,0 @@
-import type { LayerInteractEvent } from "@lattice-ui/layer";
-import type { PopperPlacement } from "@lattice-ui/popper";
-import type React from "@rbxts/react";
-
-export type PopoverSetOpen = (open: boolean) => void;
-
-export type PopoverContextValue = {
-  open: boolean;
-  setOpen: PopoverSetOpen;
-  modal: boolean;
-  triggerRef: React.MutableRefObject<GuiObject | undefined>;
-  anchorRef: React.MutableRefObject<GuiObject | undefined>;
-  contentRef: React.MutableRefObject<GuiObject | undefined>;
-};
-
-export type PopoverProps = {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  modal?: boolean;
-  children?: React.ReactNode;
-};
-
-export type PopoverTriggerProps = {
-  asChild?: boolean;
-  disabled?: boolean;
-  children?: React.ReactElement;
-};
-
-export type PopoverPortalProps = {
-  container?: BasePlayerGui;
-  displayOrderBase?: number;
-  children?: React.ReactNode;
-};
-
-export type PopoverContentProps = {
-  asChild?: boolean;
-  forceMount?: boolean;
-  placement?: PopperPlacement;
-  offset?: Vector2;
-  padding?: number;
-  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
-  onPointerDownOutside?: (event: LayerInteractEvent) => void;
-  onInteractOutside?: (event: LayerInteractEvent) => void;
-  children?: React.ReactNode;
-};
-
-export type PopoverAnchorProps = {
-  asChild?: boolean;
-  children?: React.ReactElement;
-};
-
-export type PopoverCloseProps = {
-  asChild?: boolean;
-  children?: React.ReactElement;
-};

package/src/index.ts

@@ -1,14 +0,0 @@
-export { PopoverAnchor } from "./Popover/PopoverAnchor";
-export { PopoverClose } from "./Popover/PopoverClose";
-export { PopoverContent } from "./Popover/PopoverContent";
-export { PopoverPortal } from "./Popover/PopoverPortal";
-export { Popover } from "./Popover/PopoverRoot";
-export { PopoverTrigger } from "./Popover/PopoverTrigger";
-export type {
-  PopoverAnchorProps,
-  PopoverCloseProps,
-  PopoverContentProps,
-  PopoverPortalProps,
-  PopoverProps,
-  PopoverTriggerProps,
-} from "./Popover/types";

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