@lattice-ui/select 0.3.0

package/src/Select/SelectTrigger.tsx

@@ -0,0 +1,89 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useSelectContext } from "./context";
+import type { SelectTriggerProps } from "./types";
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function SelectTrigger(props: SelectTriggerProps) {
+  const selectContext = useSelectContext();
+  const disabled = selectContext.disabled || props.disabled === true;
+
+  const setTriggerRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      selectContext.triggerRef.current = toGuiObject(instance);
+    },
+    [selectContext.triggerRef],
+  );
+
+  const handleActivated = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    selectContext.setOpen(!selectContext.open);
+  }, [disabled, selectContext]);
+
+  const handleInputBegan = React.useCallback(
+    (_rbx: GuiObject, inputObject: InputObject) => {
+      if (disabled) {
+        return;
+      }
+
+      const keyCode = inputObject.KeyCode;
+      if (keyCode === Enum.KeyCode.Return || keyCode === Enum.KeyCode.Space) {
+        selectContext.setOpen(!selectContext.open);
+        return;
+      }
+
+      if (keyCode === Enum.KeyCode.Down || keyCode === Enum.KeyCode.Up) {
+        selectContext.setOpen(true);
+      }
+    },
+    [disabled, selectContext],
+  );
+
+  const eventHandlers = React.useMemo(
+    () => ({
+      Activated: handleActivated,
+      InputBegan: handleInputBegan,
+    }),
+    [handleActivated, handleInputBegan],
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[SelectTrigger] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled} ref={setTriggerRef}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textbutton
+      Active={!disabled}
+      AutoButtonColor={false}
+      BackgroundColor3={Color3.fromRGB(41, 48, 63)}
+      BorderSizePixel={0}
+      Event={eventHandlers}
+      Selectable={!disabled}
+      Size={UDim2.fromOffset(220, 36)}
+      Text="Select"
+      TextColor3={disabled ? Color3.fromRGB(140, 148, 164) : Color3.fromRGB(235, 241, 248)}
+      TextSize={15}
+      ref={setTriggerRef}
+    >
+      {props.children}
+    </textbutton>
+  );
+}

package/src/Select/SelectValue.tsx

@@ -0,0 +1,42 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useSelectContext } from "./context";
+import type { SelectValueProps } from "./types";
+
+export function SelectValue(props: SelectValueProps) {
+  const selectContext = useSelectContext();
+  const selectedValue = selectContext.value;
+  const hasValue = selectedValue !== undefined;
+
+  const resolvedText = React.useMemo(() => {
+    if (!hasValue || selectedValue === undefined) {
+      return props.placeholder ?? "";
+    }
+
+    return selectContext.getItemText(selectedValue) ?? selectedValue;
+  }, [hasValue, props.placeholder, selectContext, selectedValue]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[SelectValue] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Name="SelectValue" Text={resolvedText}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textlabel
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(200, 20)}
+      Text={resolvedText}
+      TextColor3={hasValue ? Color3.fromRGB(235, 240, 248) : Color3.fromRGB(153, 161, 177)}
+      TextSize={14}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    />
+  );
+}

package/src/Select/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { SelectContextValue } from "./types";
+
+const [SelectContextProvider, useSelectContext] = createStrictContext<SelectContextValue>("Select");
+
+export { SelectContextProvider, useSelectContext };

package/src/Select/types.ts

@@ -0,0 +1,96 @@
+import type { LayerInteractEvent } from "@lattice-ui/layer";
+import type { PopperPlacement } from "@lattice-ui/popper";
+import type React from "@rbxts/react";
+
+export type SelectSetOpen = (open: boolean) => void;
+export type SelectSetValue = (value: string) => void;
+
+export type SelectItemRegistration = {
+  id: number;
+  value: string;
+  order: number;
+  getNode: () => GuiObject | undefined;
+  getDisabled: () => boolean;
+  getTextValue: () => string;
+};
+
+export type SelectContextValue = {
+  open: boolean;
+  setOpen: SelectSetOpen;
+  value?: string;
+  setValue: SelectSetValue;
+  disabled: boolean;
+  required: boolean;
+  loop: boolean;
+  triggerRef: React.MutableRefObject<GuiObject | undefined>;
+  contentRef: React.MutableRefObject<GuiObject | undefined>;
+  registerItem: (item: SelectItemRegistration) => () => void;
+  getOrderedItems: () => Array<SelectItemRegistration>;
+  getItemText: (value: string) => string | undefined;
+};
+
+export type SelectProps = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  required?: boolean;
+  loop?: boolean;
+  children?: React.ReactNode;
+};
+
+export type SelectTriggerProps = {
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: React.ReactElement;
+};
+
+export type SelectValueProps = {
+  asChild?: boolean;
+  placeholder?: string;
+  children?: React.ReactElement;
+};
+
+export type SelectPortalProps = {
+  container?: BasePlayerGui;
+  displayOrderBase?: number;
+  children?: React.ReactNode;
+};
+
+export type SelectContentProps = {
+  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 SelectItemProps = {
+  value: string;
+  textValue?: string;
+  disabled?: boolean;
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type SelectSeparatorProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type SelectGroupProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type SelectLabelProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};

package/src/index.ts

@@ -0,0 +1,59 @@
+import { SelectContent } from "./Select/SelectContent";
+import { SelectGroup } from "./Select/SelectGroup";
+import { SelectItem } from "./Select/SelectItem";
+import { SelectLabel } from "./Select/SelectLabel";
+import { SelectPortal } from "./Select/SelectPortal";
+import { SelectRoot } from "./Select/SelectRoot";
+import { SelectSeparator } from "./Select/SelectSeparator";
+import { SelectTrigger } from "./Select/SelectTrigger";
+import { SelectValue } from "./Select/SelectValue";
+
+export const Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Portal: SelectPortal,
+  Content: SelectContent,
+  Item: SelectItem,
+  Group: SelectGroup,
+  Label: SelectLabel,
+  Separator: SelectSeparator,
+} as const satisfies {
+  Root: typeof SelectRoot;
+  Trigger: typeof SelectTrigger;
+  Value: typeof SelectValue;
+  Portal: typeof SelectPortal;
+  Content: typeof SelectContent;
+  Item: typeof SelectItem;
+  Group: typeof SelectGroup;
+  Label: typeof SelectLabel;
+  Separator: typeof SelectSeparator;
+};
+
+export {
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectPortal,
+  SelectRoot,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
+
+export type {
+  SelectContentProps,
+  SelectContextValue,
+  SelectGroupProps,
+  SelectItemProps,
+  SelectItemRegistration,
+  SelectLabelProps,
+  SelectPortalProps,
+  SelectProps,
+  SelectSeparatorProps,
+  SelectSetOpen,
+  SelectSetValue,
+  SelectTriggerProps,
+  SelectValueProps,
+} from "./Select/types";

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "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

@@ -0,0 +1,35 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/accordion": ["accordion/src/index.ts"],
+      "@lattice-ui/avatar": ["avatar/src/index.ts"],
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/combobox": ["combobox/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/progress": ["progress/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/scroll-area": ["scroll-area/src/index.ts"],
+      "@lattice-ui/select": ["select/src/index.ts"],
+      "@lattice-ui/slider": ["slider/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/text-field": ["text-field/src/index.ts"],
+      "@lattice-ui/textarea": ["textarea/src/index.ts"],
+      "@lattice-ui/toast": ["toast/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}