@lattice-ui/menu 0.1.1 → 0.3.0

package/out/index.d.ts

@@ -1,9 +1,20 @@
-export { MenuContent } from "./Menu/MenuContent";
-export { MenuGroup } from "./Menu/MenuGroup";
-export { MenuItem } from "./Menu/MenuItem";
-export { MenuLabel } from "./Menu/MenuLabel";
-export { MenuPortal } from "./Menu/MenuPortal";
-export { Menu } from "./Menu/MenuRoot";
-export { MenuSeparator } from "./Menu/MenuSeparator";
-export { MenuTrigger } from "./Menu/MenuTrigger";
+import { MenuContent } from "./Menu/MenuContent";
+import { MenuGroup } from "./Menu/MenuGroup";
+import { MenuItem } from "./Menu/MenuItem";
+import { MenuLabel } from "./Menu/MenuLabel";
+import { MenuPortal } from "./Menu/MenuPortal";
+import { Menu as MenuRoot } from "./Menu/MenuRoot";
+import { MenuSeparator } from "./Menu/MenuSeparator";
+import { MenuTrigger } from "./Menu/MenuTrigger";
+export declare const Menu: {
+    readonly Root: typeof MenuRoot;
+    readonly Trigger: typeof MenuTrigger;
+    readonly Portal: typeof MenuPortal;
+    readonly Content: typeof MenuContent;
+    readonly Item: typeof MenuItem;
+    readonly Group: typeof MenuGroup;
+    readonly Label: typeof MenuLabel;
+    readonly Separator: typeof MenuSeparator;
+};
+export { MenuContent, MenuGroup, MenuItem, MenuLabel, MenuPortal, MenuRoot, MenuSeparator, MenuTrigger };
 export type { MenuContentProps, MenuGroupProps, MenuItemProps, MenuLabelProps, MenuPortalProps, MenuProps, MenuSelectEvent, MenuSeparatorProps, MenuTriggerProps, } from "./Menu/types";

package/out/init.luau

@@ -1,12 +1,31 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local exports = {}
-exports.MenuContent = TS.import(script, script, "Menu", "MenuContent").MenuContent
-exports.MenuGroup = TS.import(script, script, "Menu", "MenuGroup").MenuGroup
-exports.MenuItem = TS.import(script, script, "Menu", "MenuItem").MenuItem
-exports.MenuLabel = TS.import(script, script, "Menu", "MenuLabel").MenuLabel
-exports.MenuPortal = TS.import(script, script, "Menu", "MenuPortal").MenuPortal
-exports.Menu = TS.import(script, script, "Menu", "MenuRoot").Menu
-exports.MenuSeparator = TS.import(script, script, "Menu", "MenuSeparator").MenuSeparator
-exports.MenuTrigger = TS.import(script, script, "Menu", "MenuTrigger").MenuTrigger
-return exports
+local MenuContent = TS.import(script, script, "Menu", "MenuContent").MenuContent
+local MenuGroup = TS.import(script, script, "Menu", "MenuGroup").MenuGroup
+local MenuItem = TS.import(script, script, "Menu", "MenuItem").MenuItem
+local MenuLabel = TS.import(script, script, "Menu", "MenuLabel").MenuLabel
+local MenuPortal = TS.import(script, script, "Menu", "MenuPortal").MenuPortal
+local MenuRoot = TS.import(script, script, "Menu", "MenuRoot").Menu
+local MenuSeparator = TS.import(script, script, "Menu", "MenuSeparator").MenuSeparator
+local MenuTrigger = TS.import(script, script, "Menu", "MenuTrigger").MenuTrigger
+local Menu = {
+	Root = MenuRoot,
+	Trigger = MenuTrigger,
+	Portal = MenuPortal,
+	Content = MenuContent,
+	Item = MenuItem,
+	Group = MenuGroup,
+	Label = MenuLabel,
+	Separator = MenuSeparator,
+}
+return {
+	Menu = Menu,
+	MenuContent = MenuContent,
+	MenuGroup = MenuGroup,
+	MenuItem = MenuItem,
+	MenuLabel = MenuLabel,
+	MenuPortal = MenuPortal,
+	MenuRoot = MenuRoot,
+	MenuSeparator = MenuSeparator,
+	MenuTrigger = MenuTrigger,
+}

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@lattice-ui/menu",
-  "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/popper": "0.1.1"
+    "@lattice-ui/core": "0.3.0",
+    "@lattice-ui/focus": "0.3.0",
+    "@lattice-ui/layer": "0.3.0",
+    "@lattice-ui/popper": "0.3.0"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -20,7 +24,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/Menu/MenuContent.tsx

@@ -1,146 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { RovingFocusGroup } from "@lattice-ui/focus";
-import { DismissableLayer, Presence } from "@lattice-ui/layer";
-import { usePopper } from "@lattice-ui/popper";
-import { useMenuContext } from "./context";
-import type { MenuContentProps } from "./types";
-
-type MenuContentImplProps = {
-  enabled: boolean;
-  visible: boolean;
-  onDismiss: () => void;
-  loop: boolean;
-  asChild?: boolean;
-  placement?: MenuContentProps["placement"];
-  offset?: MenuContentProps["offset"];
-  padding?: MenuContentProps["padding"];
-} & Pick<MenuContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
-
-function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
-    return undefined;
-  }
-
-  return instance;
-}
-
-function MenuContentImpl(props: MenuContentImplProps) {
-  const menuContext = useMenuContext();
-
-  const popper = usePopper({
-    anchorRef: menuContext.triggerRef,
-    contentRef: menuContext.contentRef,
-    placement: props.placement,
-    offset: props.offset,
-    padding: props.padding,
-    enabled: props.enabled,
-  });
-
-  const setContentRef = React.useCallback(
-    (instance: Instance | undefined) => {
-      menuContext.contentRef.current = toGuiObject(instance);
-    },
-    [menuContext.contentRef],
-  );
-
-  const contentNode = props.asChild ? (
-    (() => {
-      const child = props.children;
-      if (!React.isValidElement(child)) {
-        error("[MenuContent] `asChild` requires a child element.");
-      }
-
-      return (
-        <Slot AnchorPoint={popper.anchorPoint} Position={popper.position} Visible={props.visible} ref={setContentRef}>
-          {child}
-        </Slot>
-      );
-    })()
-  ) : (
-    <frame
-      AnchorPoint={popper.anchorPoint}
-      BackgroundTransparency={1}
-      BorderSizePixel={0}
-      Position={popper.position}
-      Size={UDim2.fromOffset(0, 0)}
-      Visible={props.visible}
-      ref={setContentRef}
-    >
-      {props.children}
-    </frame>
-  );
-
-  return (
-    <DismissableLayer
-      enabled={props.enabled}
-      modal={menuContext.modal}
-      onDismiss={props.onDismiss}
-      onEscapeKeyDown={props.onEscapeKeyDown}
-      onInteractOutside={props.onInteractOutside}
-      onPointerDownOutside={props.onPointerDownOutside}
-    >
-      <RovingFocusGroup active={props.enabled} autoFocus="first" loop={props.loop} orientation="vertical">
-        {contentNode}
-      </RovingFocusGroup>
-    </DismissableLayer>
-  );
-}
-
-export function MenuContent(props: MenuContentProps) {
-  const menuContext = useMenuContext();
-  const open = menuContext.open;
-  const forceMount = props.forceMount === true;
-  const loop = props.loop ?? true;
-
-  const handleDismiss = React.useCallback(() => {
-    menuContext.setOpen(false);
-  }, [menuContext.setOpen]);
-
-  if (!open && !forceMount) {
-    return undefined;
-  }
-
-  if (forceMount) {
-    return (
-      <MenuContentImpl
-        asChild={props.asChild}
-        enabled={open}
-        loop={loop}
-        offset={props.offset}
-        onDismiss={handleDismiss}
-        onEscapeKeyDown={props.onEscapeKeyDown}
-        onInteractOutside={props.onInteractOutside}
-        onPointerDownOutside={props.onPointerDownOutside}
-        padding={props.padding}
-        placement={props.placement}
-        visible={open}
-      >
-        {props.children}
-      </MenuContentImpl>
-    );
-  }
-
-  return (
-    <Presence
-      exitFallbackMs={0}
-      present={open}
-      render={(state) => (
-        <MenuContentImpl
-          asChild={props.asChild}
-          enabled={state.isPresent}
-          loop={loop}
-          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}
-        </MenuContentImpl>
-      )}
-    />
-  );
-}

package/src/Menu/MenuGroup.tsx

@@ -1,24 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import type { MenuGroupProps } from "./types";
-
-export function MenuGroup(props: MenuGroupProps) {
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[MenuGroup] `asChild` requires a child element.");
-    }
-
-    return <Slot>{child}</Slot>;
-  }
-
-  return (
-    <frame BackgroundTransparency={1} Size={UDim2.fromOffset(220, 0)}>
-      <uilistlayout
-        FillDirection={Enum.FillDirection.Vertical}
-        Padding={new UDim(0, 4)}
-        SortOrder={Enum.SortOrder.LayoutOrder}
-      />
-      {props.children}
-    </frame>
-  );
-}

package/src/Menu/MenuItem.tsx

@@ -1,72 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { RovingFocusItem } from "@lattice-ui/focus";
-import { useMenuContext } from "./context";
-import type { MenuItemProps, MenuSelectEvent } from "./types";
-
-function createMenuSelectEvent(): MenuSelectEvent {
-  const event: MenuSelectEvent = {
-    defaultPrevented: false,
-    preventDefault: () => {
-      event.defaultPrevented = true;
-    },
-  };
-
-  return event;
-}
-
-export function MenuItem(props: MenuItemProps) {
-  const menuContext = useMenuContext();
-
-  const handleActivated = React.useCallback(() => {
-    if (props.disabled) {
-      return;
-    }
-
-    const event = createMenuSelectEvent();
-    props.onSelect?.(event);
-
-    if (!event.defaultPrevented) {
-      menuContext.setOpen(false);
-    }
-  }, [menuContext, props.disabled, props.onSelect]);
-
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[MenuItem] `asChild` requires a child element.");
-    }
-
-    return (
-      <RovingFocusItem asChild disabled={props.disabled}>
-        <Slot
-          Active={props.disabled !== true}
-          Event={{ Activated: handleActivated }}
-          Selectable={props.disabled !== true}
-        >
-          {child}
-        </Slot>
-      </RovingFocusItem>
-    );
-  }
-
-  return (
-    <RovingFocusItem asChild disabled={props.disabled}>
-      <textbutton
-        Active={props.disabled !== true}
-        AutoButtonColor={false}
-        BackgroundColor3={Color3.fromRGB(47, 53, 68)}
-        BorderSizePixel={0}
-        Event={{ Activated: handleActivated }}
-        Selectable={props.disabled !== true}
-        Size={UDim2.fromOffset(220, 34)}
-        Text="Menu Item"
-        TextColor3={props.disabled ? Color3.fromRGB(135, 142, 156) : Color3.fromRGB(234, 239, 247)}
-        TextSize={15}
-        TextXAlignment={Enum.TextXAlignment.Left}
-      >
-        <uipadding PaddingLeft={new UDim(0, 10)} PaddingRight={new UDim(0, 10)} />
-        {props.children}
-      </textbutton>
-    </RovingFocusItem>
-  );
-}

package/src/Menu/MenuLabel.tsx

@@ -1,27 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import type { MenuLabelProps } from "./types";
-
-export function MenuLabel(props: MenuLabelProps) {
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[MenuLabel] `asChild` requires a child element.");
-    }
-
-    return <Slot>{child}</Slot>;
-  }
-
-  return (
-    <textlabel
-      BackgroundTransparency={1}
-      Size={UDim2.fromOffset(220, 24)}
-      Text="Label"
-      TextColor3={Color3.fromRGB(162, 173, 191)}
-      TextSize={14}
-      TextXAlignment={Enum.TextXAlignment.Left}
-    >
-      <uipadding PaddingLeft={new UDim(0, 10)} />
-      {props.children}
-    </textlabel>
-  );
-}

package/src/Menu/MenuPortal.tsx

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

package/src/Menu/MenuRoot.tsx

@@ -1,35 +0,0 @@
-import { React, useControllableState } from "@lattice-ui/core";
-import { MenuContextProvider } from "./context";
-import type { MenuProps } from "./types";
-
-export function Menu(props: MenuProps) {
-  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 contentRef = React.useRef<GuiObject>();
-
-  const setOpen = React.useCallback(
-    (nextOpen: boolean) => {
-      setOpenState(nextOpen);
-    },
-    [setOpenState],
-  );
-
-  const contextValue = React.useMemo(
-    () => ({
-      open,
-      setOpen,
-      modal,
-      triggerRef,
-      contentRef,
-    }),
-    [modal, open, setOpen],
-  );
-
-  return <MenuContextProvider value={contextValue}>{props.children}</MenuContextProvider>;
-}

package/src/Menu/MenuSeparator.tsx

@@ -1,15 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import type { MenuSeparatorProps } from "./types";
-
-export function MenuSeparator(props: MenuSeparatorProps) {
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[MenuSeparator] `asChild` requires a child element.");
-    }
-
-    return <Slot>{child}</Slot>;
-  }
-
-  return <frame BackgroundColor3={Color3.fromRGB(72, 79, 97)} BorderSizePixel={0} Size={UDim2.fromOffset(220, 1)} />;
-}

package/src/Menu/MenuTrigger.tsx

@@ -1,61 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { useMenuContext } from "./context";
-import type { MenuTriggerProps } from "./types";
-
-function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
-    return undefined;
-  }
-
-  return instance;
-}
-
-export function MenuTrigger(props: MenuTriggerProps) {
-  const menuContext = useMenuContext();
-
-  const setTriggerRef = React.useCallback(
-    (instance: Instance | undefined) => {
-      menuContext.triggerRef.current = toGuiObject(instance);
-    },
-    [menuContext.triggerRef],
-  );
-
-  const handleActivated = React.useCallback(() => {
-    if (props.disabled) {
-      return;
-    }
-
-    menuContext.setOpen(!menuContext.open);
-  }, [menuContext.open, menuContext.setOpen, props.disabled]);
-
-  if (props.asChild) {
-    const child = props.children;
-    if (!child) {
-      error("[MenuTrigger] `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(140, 38)}
-      Text="Toggle Menu"
-      TextColor3={Color3.fromRGB(240, 244, 250)}
-      TextSize={16}
-      ref={setTriggerRef}
-    >
-      {props.children}
-    </textbutton>
-  );
-}

package/src/Menu/context.ts

@@ -1,6 +0,0 @@
-import { createStrictContext } from "@lattice-ui/core";
-import type { MenuContextValue } from "./types";
-
-const [MenuContextProvider, useMenuContext] = createStrictContext<MenuContextValue>("Menu");
-
-export { MenuContextProvider, useMenuContext };

package/src/Menu/types.ts

@@ -1,73 +0,0 @@
-import type { LayerInteractEvent } from "@lattice-ui/layer";
-import type { PopperPlacement } from "@lattice-ui/popper";
-import type React from "@rbxts/react";
-
-export type MenuSetOpen = (open: boolean) => void;
-
-export type MenuContextValue = {
-  open: boolean;
-  setOpen: MenuSetOpen;
-  modal: boolean;
-  triggerRef: React.MutableRefObject<GuiObject | undefined>;
-  contentRef: React.MutableRefObject<GuiObject | undefined>;
-};
-
-export type MenuProps = {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  modal?: boolean;
-  children?: React.ReactNode;
-};
-
-export type MenuTriggerProps = {
-  asChild?: boolean;
-  disabled?: boolean;
-  children?: React.ReactElement;
-};
-
-export type MenuPortalProps = {
-  container?: BasePlayerGui;
-  displayOrderBase?: number;
-  children?: React.ReactNode;
-};
-
-export type MenuContentProps = {
-  asChild?: boolean;
-  forceMount?: boolean;
-  placement?: PopperPlacement;
-  offset?: Vector2;
-  padding?: number;
-  loop?: boolean;
-  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
-  onPointerDownOutside?: (event: LayerInteractEvent) => void;
-  onInteractOutside?: (event: LayerInteractEvent) => void;
-  children?: React.ReactNode;
-};
-
-export type MenuSelectEvent = {
-  defaultPrevented: boolean;
-  preventDefault: () => void;
-};
-
-export type MenuItemProps = {
-  asChild?: boolean;
-  disabled?: boolean;
-  onSelect?: (event: MenuSelectEvent) => void;
-  children?: React.ReactElement;
-};
-
-export type MenuSeparatorProps = {
-  asChild?: boolean;
-  children?: React.ReactElement;
-};
-
-export type MenuGroupProps = {
-  asChild?: boolean;
-  children?: React.ReactElement;
-};
-
-export type MenuLabelProps = {
-  asChild?: boolean;
-  children?: React.ReactElement;
-};

package/src/index.ts

@@ -1,19 +0,0 @@
-export { MenuContent } from "./Menu/MenuContent";
-export { MenuGroup } from "./Menu/MenuGroup";
-export { MenuItem } from "./Menu/MenuItem";
-export { MenuLabel } from "./Menu/MenuLabel";
-export { MenuPortal } from "./Menu/MenuPortal";
-export { Menu } from "./Menu/MenuRoot";
-export { MenuSeparator } from "./Menu/MenuSeparator";
-export { MenuTrigger } from "./Menu/MenuTrigger";
-export type {
-  MenuContentProps,
-  MenuGroupProps,
-  MenuItemProps,
-  MenuLabelProps,
-  MenuPortalProps,
-  MenuProps,
-  MenuSelectEvent,
-  MenuSeparatorProps,
-  MenuTriggerProps,
-} from "./Menu/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"]
-    }
-  }
-}