@lattice-ui/dialog 0.1.1 → 0.3.0

package/out/Dialog/DialogContent.luau

@@ -15,6 +15,7 @@ local function DialogContentImpl(props)
 		onInteractOutside = props.onInteractOutside,
 		onPointerDownOutside = props.onPointerDownOutside,
 	}, React.createElement(FocusScope, {
+		active = props.enabled,
 		restoreFocus = props.restoreFocus,
 		trapped = props.trapFocus,
 	}, props.children))

package/out/index.d.ts

@@ -1,7 +1,16 @@
-export { DialogClose } from "./Dialog/DialogClose";
-export { DialogContent } from "./Dialog/DialogContent";
-export { DialogOverlay } from "./Dialog/DialogOverlay";
-export { DialogPortal } from "./Dialog/DialogPortal";
-export { Dialog } from "./Dialog/DialogRoot";
-export { DialogTrigger } from "./Dialog/DialogTrigger";
+import { DialogClose } from "./Dialog/DialogClose";
+import { DialogContent } from "./Dialog/DialogContent";
+import { DialogOverlay } from "./Dialog/DialogOverlay";
+import { DialogPortal } from "./Dialog/DialogPortal";
+import { Dialog as DialogRoot } from "./Dialog/DialogRoot";
+import { DialogTrigger } from "./Dialog/DialogTrigger";
+export declare const Dialog: {
+    readonly Root: typeof DialogRoot;
+    readonly Trigger: typeof DialogTrigger;
+    readonly Portal: typeof DialogPortal;
+    readonly Content: typeof DialogContent;
+    readonly Overlay: typeof DialogOverlay;
+    readonly Close: typeof DialogClose;
+};
+export { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTrigger };
 export type { DialogCloseProps, DialogContentProps, DialogOverlayProps, DialogPortalProps, DialogProps, DialogTriggerProps, } from "./Dialog/types";

package/out/init.luau

@@ -1,10 +1,25 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local exports = {}
-exports.DialogClose = TS.import(script, script, "Dialog", "DialogClose").DialogClose
-exports.DialogContent = TS.import(script, script, "Dialog", "DialogContent").DialogContent
-exports.DialogOverlay = TS.import(script, script, "Dialog", "DialogOverlay").DialogOverlay
-exports.DialogPortal = TS.import(script, script, "Dialog", "DialogPortal").DialogPortal
-exports.Dialog = TS.import(script, script, "Dialog", "DialogRoot").Dialog
-exports.DialogTrigger = TS.import(script, script, "Dialog", "DialogTrigger").DialogTrigger
-return exports
+local DialogClose = TS.import(script, script, "Dialog", "DialogClose").DialogClose
+local DialogContent = TS.import(script, script, "Dialog", "DialogContent").DialogContent
+local DialogOverlay = TS.import(script, script, "Dialog", "DialogOverlay").DialogOverlay
+local DialogPortal = TS.import(script, script, "Dialog", "DialogPortal").DialogPortal
+local DialogRoot = TS.import(script, script, "Dialog", "DialogRoot").Dialog
+local DialogTrigger = TS.import(script, script, "Dialog", "DialogTrigger").DialogTrigger
+local Dialog = {
+	Root = DialogRoot,
+	Trigger = DialogTrigger,
+	Portal = DialogPortal,
+	Content = DialogContent,
+	Overlay = DialogOverlay,
+	Close = DialogClose,
+}
+return {
+	Dialog = Dialog,
+	DialogClose = DialogClose,
+	DialogContent = DialogContent,
+	DialogOverlay = DialogOverlay,
+	DialogPortal = DialogPortal,
+	DialogRoot = DialogRoot,
+	DialogTrigger = DialogTrigger,
+}

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@lattice-ui/dialog",
-  "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/focus": "0.1.1",
-    "@lattice-ui/layer": "0.1.1"
+    "@lattice-ui/core": "0.3.0",
+    "@lattice-ui/layer": "0.3.0",
+    "@lattice-ui/focus": "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/Dialog/DialogClose.tsx

@@ -1,35 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { useDialogContext } from "./context";
-import type { DialogCloseProps } from "./types";
-
-export function DialogClose(props: DialogCloseProps) {
-  const dialogContext = useDialogContext();
-
-  const handleActivated = React.useCallback(() => {
-    dialogContext.setOpen(false);
-  }, [dialogContext.setOpen]);
-
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[DialogClose] `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/Dialog/DialogContent.tsx

@@ -1,84 +0,0 @@
-import { React } from "@lattice-ui/core";
-import { FocusScope } from "@lattice-ui/focus";
-import { DismissableLayer, Presence } from "@lattice-ui/layer";
-import { useDialogContext } from "./context";
-import type { DialogContentProps } from "./types";
-
-type DialogContentImplProps = {
-  enabled: boolean;
-  modal: boolean;
-  trapFocus: boolean;
-  restoreFocus: boolean;
-  onDismiss: () => void;
-} & Pick<DialogContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
-
-function DialogContentImpl(props: DialogContentImplProps) {
-  return (
-    <DismissableLayer
-      enabled={props.enabled}
-      modal={props.modal}
-      onDismiss={props.onDismiss}
-      onEscapeKeyDown={props.onEscapeKeyDown}
-      onInteractOutside={props.onInteractOutside}
-      onPointerDownOutside={props.onPointerDownOutside}
-    >
-      <FocusScope restoreFocus={props.restoreFocus} trapped={props.trapFocus}>
-        {props.children}
-      </FocusScope>
-    </DismissableLayer>
-  );
-}
-
-export function DialogContent(props: DialogContentProps) {
-  const dialogContext = useDialogContext();
-  const open = dialogContext.open;
-  const forceMount = props.forceMount === true;
-  const trapFocus = props.trapFocus ?? true;
-  const restoreFocus = props.restoreFocus ?? true;
-
-  const handleDismiss = React.useCallback(() => {
-    dialogContext.setOpen(false);
-  }, [dialogContext.setOpen]);
-
-  if (!open && !forceMount) {
-    return undefined;
-  }
-
-  if (forceMount) {
-    return (
-      <DialogContentImpl
-        enabled={open}
-        modal={dialogContext.modal}
-        onDismiss={handleDismiss}
-        onEscapeKeyDown={props.onEscapeKeyDown}
-        onInteractOutside={props.onInteractOutside}
-        onPointerDownOutside={props.onPointerDownOutside}
-        restoreFocus={restoreFocus}
-        trapFocus={trapFocus}
-      >
-        {props.children}
-      </DialogContentImpl>
-    );
-  }
-
-  return (
-    <Presence
-      exitFallbackMs={0}
-      present={open}
-      render={(state) => (
-        <DialogContentImpl
-          enabled={state.isPresent}
-          modal={dialogContext.modal}
-          onDismiss={handleDismiss}
-          onEscapeKeyDown={props.onEscapeKeyDown}
-          onInteractOutside={props.onInteractOutside}
-          onPointerDownOutside={props.onPointerDownOutside}
-          restoreFocus={restoreFocus}
-          trapFocus={trapFocus}
-        >
-          {props.children}
-        </DialogContentImpl>
-      )}
-    />
-  );
-}

package/src/Dialog/DialogOverlay.tsx

@@ -1,48 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { useDialogContext } from "./context";
-import type { DialogOverlayProps } from "./types";
-
-export function DialogOverlay(props: DialogOverlayProps) {
-  const dialogContext = useDialogContext();
-  const open = dialogContext.open;
-  const shouldRender = open || props.forceMount === true;
-
-  const handleActivated = React.useCallback(() => {
-    dialogContext.setOpen(false);
-  }, [dialogContext.setOpen]);
-
-  if (!shouldRender) {
-    return undefined;
-  }
-
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[DialogOverlay] `asChild` requires a child element.");
-    }
-
-    return (
-      <Slot Active={open} Event={{ Activated: handleActivated }} Visible={open}>
-        {child}
-      </Slot>
-    );
-  }
-
-  return (
-    <textbutton
-      Active={open}
-      AutoButtonColor={false}
-      BackgroundColor3={Color3.fromRGB(8, 10, 14)}
-      BackgroundTransparency={open ? 0.35 : 1}
-      BorderSizePixel={0}
-      Event={{ Activated: handleActivated }}
-      Position={UDim2.fromScale(0, 0)}
-      Selectable={false}
-      Size={UDim2.fromScale(1, 1)}
-      Text=""
-      TextTransparency={1}
-      Visible={open}
-      ZIndex={5}
-    />
-  );
-}

package/src/Dialog/DialogPortal.tsx

@@ -1,28 +0,0 @@
-import { React } from "@lattice-ui/core";
-import { Portal, PortalProvider, usePortalContext } from "@lattice-ui/layer";
-import type { DialogPortalProps } from "./types";
-
-function DialogPortalWithOverrides(props: DialogPortalProps) {
-  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 DialogPortal(props: DialogPortalProps) {
-  const hasOverrides = props.container !== undefined || props.displayOrderBase !== undefined;
-  if (hasOverrides) {
-    return (
-      <DialogPortalWithOverrides container={props.container} displayOrderBase={props.displayOrderBase}>
-        {props.children}
-      </DialogPortalWithOverrides>
-    );
-  }
-
-  return <Portal>{props.children}</Portal>;
-}

package/src/Dialog/DialogRoot.tsx

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

package/src/Dialog/DialogTrigger.tsx

@@ -1,60 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { useDialogContext } from "./context";
-import type { DialogTriggerProps } from "./types";
-
-function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
-    return undefined;
-  }
-
-  return instance;
-}
-
-export function DialogTrigger(props: DialogTriggerProps) {
-  const dialogContext = useDialogContext();
-
-  const setTriggerRef = React.useCallback(
-    (instance: Instance | undefined) => {
-      dialogContext.triggerRef.current = toGuiObject(instance);
-    },
-    [dialogContext.triggerRef],
-  );
-
-  const handleActivated = React.useCallback(() => {
-    if (props.disabled) {
-      return;
-    }
-
-    dialogContext.setOpen(true);
-  }, [dialogContext.setOpen, props.disabled]);
-
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[DialogTrigger] `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 }}
-      Size={UDim2.fromOffset(140, 38)}
-      Text="Open Dialog"
-      TextColor3={Color3.fromRGB(240, 244, 250)}
-      TextSize={16}
-      ref={setTriggerRef}
-    >
-      {props.children}
-    </textbutton>
-  );
-}

package/src/Dialog/context.ts

@@ -1,6 +0,0 @@
-import { createStrictContext } from "@lattice-ui/core";
-import type { DialogContextValue } from "./types";
-
-const [DialogContextProvider, useDialogContext] = createStrictContext<DialogContextValue>("Dialog");
-
-export { DialogContextProvider, useDialogContext };

package/src/Dialog/types.ts

@@ -1,52 +0,0 @@
-import type { LayerInteractEvent } from "@lattice-ui/layer";
-import type React from "@rbxts/react";
-
-export type DialogSetOpen = (open: boolean) => void;
-
-export type DialogContextValue = {
-  open: boolean;
-  setOpen: DialogSetOpen;
-  modal: boolean;
-  triggerRef: React.MutableRefObject<GuiObject | undefined>;
-};
-
-export type DialogProps = {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  modal?: boolean;
-  children?: React.ReactNode;
-};
-
-export type DialogTriggerProps = {
-  asChild?: boolean;
-  disabled?: boolean;
-  children?: React.ReactElement;
-};
-
-export type DialogPortalProps = {
-  container?: BasePlayerGui;
-  displayOrderBase?: number;
-  children?: React.ReactNode;
-};
-
-export type DialogOverlayProps = {
-  asChild?: boolean;
-  forceMount?: boolean;
-  children?: React.ReactElement;
-};
-
-export type DialogContentProps = {
-  forceMount?: boolean;
-  trapFocus?: boolean;
-  restoreFocus?: boolean;
-  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
-  onPointerDownOutside?: (event: LayerInteractEvent) => void;
-  onInteractOutside?: (event: LayerInteractEvent) => void;
-  children?: React.ReactNode;
-};
-
-export type DialogCloseProps = {
-  asChild?: boolean;
-  children?: React.ReactElement;
-};

package/src/index.ts

@@ -1,14 +0,0 @@
-export { DialogClose } from "./Dialog/DialogClose";
-export { DialogContent } from "./Dialog/DialogContent";
-export { DialogOverlay } from "./Dialog/DialogOverlay";
-export { DialogPortal } from "./Dialog/DialogPortal";
-export { Dialog } from "./Dialog/DialogRoot";
-export { DialogTrigger } from "./Dialog/DialogTrigger";
-export type {
-  DialogCloseProps,
-  DialogContentProps,
-  DialogOverlayProps,
-  DialogPortalProps,
-  DialogProps,
-  DialogTriggerProps,
-} from "./Dialog/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"]
-    }
-  }
-}