@lattice-ui/combobox 0.3.0

package/out/init.luau

@@ -0,0 +1,32 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+local ComboboxContent = TS.import(script, script, "Combobox", "ComboboxContent").ComboboxContent
+local ComboboxGroup = TS.import(script, script, "Combobox", "ComboboxGroup").ComboboxGroup
+local ComboboxInput = TS.import(script, script, "Combobox", "ComboboxInput").ComboboxInput
+local ComboboxItem = TS.import(script, script, "Combobox", "ComboboxItem").ComboboxItem
+local ComboboxLabel = TS.import(script, script, "Combobox", "ComboboxLabel").ComboboxLabel
+local ComboboxPortal = TS.import(script, script, "Combobox", "ComboboxPortal").ComboboxPortal
+local ComboboxRoot = TS.import(script, script, "Combobox", "ComboboxRoot").ComboboxRoot
+local ComboboxSeparator = TS.import(script, script, "Combobox", "ComboboxSeparator").ComboboxSeparator
+local ComboboxTrigger = TS.import(script, script, "Combobox", "ComboboxTrigger").ComboboxTrigger
+local ComboboxValue = TS.import(script, script, "Combobox", "ComboboxValue").ComboboxValue
+local Combobox = {
+	Root = ComboboxRoot,
+	Trigger = ComboboxTrigger,
+	Input = ComboboxInput,
+	Value = ComboboxValue,
+	Portal = ComboboxPortal,
+	Content = ComboboxContent,
+	Item = ComboboxItem,
+	Group = ComboboxGroup,
+	Label = ComboboxLabel,
+	Separator = ComboboxSeparator,
+}
+local _logic = TS.import(script, script, "Combobox", "logic")
+exports.defaultComboboxFilter = _logic.defaultComboboxFilter
+exports.filterComboboxOptions = _logic.filterComboboxOptions
+exports.resolveComboboxInputValue = _logic.resolveComboboxInputValue
+exports.resolveForcedComboboxValue = _logic.resolveForcedComboboxValue
+exports.Combobox = Combobox
+return exports

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@lattice-ui/combobox",
+  "version": "0.3.0",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@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",
+    "@rbxts/react-roblox": "17.3.7-ts.1"
+  },
+  "peerDependencies": {
+    "@rbxts/react": "^17",
+    "@rbxts/react-roblox": "^17"
+  },
+  "scripts": {
+    "build": "rbxtsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "watch": "rbxtsc -p tsconfig.json -w"
+  }
+}

package/src/Combobox/ComboboxContent.tsx

@@ -0,0 +1,142 @@
+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 { useComboboxContext } from "./context";
+import type { ComboboxContentProps } from "./types";
+
+type ComboboxContentImplProps = {
+  enabled: boolean;
+  visible: boolean;
+  onDismiss: () => void;
+  asChild?: boolean;
+  placement?: ComboboxContentProps["placement"];
+  offset?: ComboboxContentProps["offset"];
+  padding?: ComboboxContentProps["padding"];
+} & Pick<ComboboxContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+function ComboboxContentImpl(props: ComboboxContentImplProps) {
+  const comboboxContext = useComboboxContext();
+
+  const popper = usePopper({
+    anchorRef: comboboxContext.triggerRef,
+    contentRef: comboboxContext.contentRef,
+    placement: props.placement,
+    offset: props.offset,
+    padding: props.padding,
+    enabled: props.enabled,
+  });
+
+  const setContentRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      comboboxContext.contentRef.current = toGuiObject(instance);
+    },
+    [comboboxContext.contentRef],
+  );
+
+  const contentNode = props.asChild ? (
+    (() => {
+      const child = props.children;
+      if (!React.isValidElement(child)) {
+        error("[ComboboxContent] `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={false}
+      onDismiss={props.onDismiss}
+      onEscapeKeyDown={props.onEscapeKeyDown}
+      onInteractOutside={props.onInteractOutside}
+      onPointerDownOutside={props.onPointerDownOutside}
+    >
+      <RovingFocusGroup active={props.enabled} autoFocus="first" loop={comboboxContext.loop} orientation="vertical">
+        {contentNode}
+      </RovingFocusGroup>
+    </DismissableLayer>
+  );
+}
+
+export function ComboboxContent(props: ComboboxContentProps) {
+  const comboboxContext = useComboboxContext();
+  const open = comboboxContext.open;
+  const forceMount = props.forceMount === true;
+
+  const handleDismiss = React.useCallback(() => {
+    comboboxContext.setOpen(false);
+  }, [comboboxContext]);
+
+  if (!open && !forceMount) {
+    return undefined;
+  }
+
+  if (forceMount) {
+    return (
+      <ComboboxContentImpl
+        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}
+      </ComboboxContentImpl>
+    );
+  }
+
+  return (
+    <Presence
+      exitFallbackMs={0}
+      present={open}
+      render={(state) => (
+        <ComboboxContentImpl
+          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}
+        </ComboboxContentImpl>
+      )}
+    />
+  );
+}

package/src/Combobox/ComboboxGroup.tsx

@@ -0,0 +1,19 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { ComboboxGroupProps } from "./types";
+
+export function ComboboxGroup(props: ComboboxGroupProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[ComboboxGroup] `asChild` requires a child element.");
+    }
+
+    return <Slot>{child}</Slot>;
+  }
+
+  return (
+    <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(220, 108)}>
+      {props.children}
+    </frame>
+  );
+}

package/src/Combobox/ComboboxInput.tsx

@@ -0,0 +1,98 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useComboboxContext } from "./context";
+import type { ComboboxInputProps } from "./types";
+
+function toTextBox(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("TextBox")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function ComboboxInput(props: ComboboxInputProps) {
+  const comboboxContext = useComboboxContext();
+  const disabled = comboboxContext.disabled || props.disabled === true;
+  const readOnly = comboboxContext.readOnly || props.readOnly === true;
+
+  const setInputRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      comboboxContext.inputRef.current = toTextBox(instance);
+    },
+    [comboboxContext.inputRef],
+  );
+
+  const handleTextChanged = React.useCallback(
+    (textBox: TextBox) => {
+      if (disabled || readOnly) {
+        if (textBox.Text !== comboboxContext.inputValue) {
+          textBox.Text = comboboxContext.inputValue;
+        }
+
+        return;
+      }
+
+      comboboxContext.setInputValue(textBox.Text);
+    },
+    [comboboxContext, disabled, readOnly],
+  );
+
+  const handleFocusLost = React.useCallback(() => {
+    comboboxContext.setOpen(false);
+    comboboxContext.syncInputFromValue();
+  }, [comboboxContext]);
+
+  const handleInputBegan = React.useCallback(
+    (_rbx: GuiObject, inputObject: InputObject) => {
+      if (disabled) {
+        return;
+      }
+
+      const keyCode = inputObject.KeyCode;
+      if (keyCode === Enum.KeyCode.Down || keyCode === Enum.KeyCode.Up) {
+        comboboxContext.setOpen(true);
+      }
+    },
+    [comboboxContext, disabled],
+  );
+
+  const sharedProps = {
+    Active: !disabled,
+    ClearTextOnFocus: false,
+    PlaceholderText: props.placeholder ?? "Type to filter",
+    Selectable: !disabled,
+    Text: comboboxContext.inputValue,
+    TextEditable: !disabled && !readOnly,
+    Change: {
+      Text: handleTextChanged,
+    },
+    Event: {
+      FocusLost: handleFocusLost,
+      InputBegan: handleInputBegan,
+    },
+    ref: setInputRef,
+  };
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[ComboboxInput] `asChild` requires a child element.");
+    }
+
+    return <Slot {...sharedProps}>{child}</Slot>;
+  }
+
+  return (
+    <textbox
+      {...sharedProps}
+      BackgroundColor3={Color3.fromRGB(39, 46, 61)}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(240, 36)}
+      TextColor3={disabled ? Color3.fromRGB(137, 145, 162) : Color3.fromRGB(235, 240, 248)}
+      TextSize={15}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    >
+      <uipadding PaddingLeft={new UDim(0, 10)} PaddingRight={new UDim(0, 10)} />
+    </textbox>
+  );
+}

package/src/Combobox/ComboboxItem.tsx

@@ -0,0 +1,134 @@
+import { React, Slot } from "@lattice-ui/core";
+import { RovingFocusItem } from "@lattice-ui/focus";
+import { useComboboxContext } from "./context";
+import type { ComboboxItemProps } from "./types";
+
+let nextItemId = 0;
+let nextItemOrder = 0;
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function ComboboxItem(props: ComboboxItemProps) {
+  const comboboxContext = useComboboxContext();
+  const itemRef = React.useRef<GuiObject>();
+
+  const itemQueryMatch = comboboxContext.filterFn(props.textValue ?? props.value, comboboxContext.inputValue);
+  const disabled = comboboxContext.disabled || props.disabled === true || !itemQueryMatch;
+  const textValue = props.textValue ?? props.value;
+
+  const disabledRef = React.useRef(disabled);
+  const textValueRef = React.useRef(textValue);
+
+  React.useEffect(() => {
+    disabledRef.current = disabled;
+  }, [disabled]);
+
+  React.useEffect(() => {
+    textValueRef.current = textValue;
+  }, [textValue]);
+
+  const itemIdRef = React.useRef(0);
+  if (itemIdRef.current === 0) {
+    nextItemId += 1;
+    itemIdRef.current = nextItemId;
+  }
+
+  const itemOrderRef = React.useRef(0);
+  if (itemOrderRef.current === 0) {
+    nextItemOrder += 1;
+    itemOrderRef.current = nextItemOrder;
+  }
+
+  React.useEffect(() => {
+    return comboboxContext.registerItem({
+      id: itemIdRef.current,
+      value: props.value,
+      order: itemOrderRef.current,
+      getNode: () => itemRef.current,
+      getDisabled: () => disabledRef.current,
+      getTextValue: () => textValueRef.current,
+    });
+  }, [comboboxContext, props.value]);
+
+  const setItemRef = React.useCallback((instance: Instance | undefined) => {
+    itemRef.current = toGuiObject(instance);
+  }, []);
+
+  const handleSelect = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    comboboxContext.setValue(props.value);
+    comboboxContext.setOpen(false);
+  }, [comboboxContext, disabled, props.value]);
+
+  const handleInputBegan = React.useCallback(
+    (_rbx: GuiObject, inputObject: InputObject) => {
+      if (disabled) {
+        return;
+      }
+
+      const keyCode = inputObject.KeyCode;
+      if (keyCode !== Enum.KeyCode.Return && keyCode !== Enum.KeyCode.Space) {
+        return;
+      }
+
+      comboboxContext.setValue(props.value);
+      comboboxContext.setOpen(false);
+    },
+    [comboboxContext, disabled, props.value],
+  );
+
+  const eventHandlers = React.useMemo(
+    () => ({
+      Activated: handleSelect,
+      InputBegan: handleInputBegan,
+    }),
+    [handleInputBegan, handleSelect],
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[ComboboxItem] `asChild` requires a child element.");
+    }
+
+    return (
+      <RovingFocusItem asChild disabled={disabled}>
+        <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled} Visible={itemQueryMatch} ref={setItemRef}>
+          {child}
+        </Slot>
+      </RovingFocusItem>
+    );
+  }
+
+  return (
+    <RovingFocusItem asChild disabled={disabled}>
+      <textbutton
+        Active={!disabled}
+        AutoButtonColor={false}
+        BackgroundColor3={Color3.fromRGB(47, 53, 68)}
+        BorderSizePixel={0}
+        Event={eventHandlers}
+        Selectable={!disabled}
+        Size={UDim2.fromOffset(220, 32)}
+        Text={textValue}
+        TextColor3={disabled ? Color3.fromRGB(134, 141, 156) : Color3.fromRGB(234, 239, 247)}
+        TextSize={15}
+        TextXAlignment={Enum.TextXAlignment.Left}
+        Visible={itemQueryMatch}
+        ref={setItemRef}
+      >
+        <uipadding PaddingLeft={new UDim(0, 10)} PaddingRight={new UDim(0, 10)} />
+        {props.children}
+      </textbutton>
+    </RovingFocusItem>
+  );
+}

package/src/Combobox/ComboboxLabel.tsx

@@ -0,0 +1,27 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { ComboboxLabelProps } from "./types";
+
+export function ComboboxLabel(props: ComboboxLabelProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[ComboboxLabel] `asChild` requires a child element.");
+    }
+
+    return <Slot>{child}</Slot>;
+  }
+
+  return (
+    <textlabel
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(220, 20)}
+      Text="Label"
+      TextColor3={Color3.fromRGB(168, 176, 191)}
+      TextSize={13}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    >
+      {props.children}
+    </textlabel>
+  );
+}

package/src/Combobox/ComboboxPortal.tsx

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