@lattice-ui/select 0.3.0

package/src/Select/SelectContent.tsx

@@ -0,0 +1,297 @@
+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 { useSelectContext } from "./context";
+import type { SelectContentProps, SelectItemRegistration } from "./types";
+
+const GuiService = game.GetService("GuiService");
+const UserInputService = game.GetService("UserInputService");
+
+const digitKeyMap: Record<string, string> = {
+  Zero: "0",
+  One: "1",
+  Two: "2",
+  Three: "3",
+  Four: "4",
+  Five: "5",
+  Six: "6",
+  Seven: "7",
+  Eight: "8",
+  Nine: "9",
+};
+
+type SelectContentImplProps = {
+  enabled: boolean;
+  visible: boolean;
+  onDismiss: () => void;
+  asChild?: boolean;
+  placement?: SelectContentProps["placement"];
+  offset?: SelectContentProps["offset"];
+  padding?: SelectContentProps["padding"];
+} & Pick<SelectContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+function toSearchCharacter(keyCode: Enum.KeyCode) {
+  if (keyCode === Enum.KeyCode.Space) {
+    return " ";
+  }
+
+  const digitCharacter = digitKeyMap[keyCode.Name];
+  if (digitCharacter !== undefined) {
+    return digitCharacter;
+  }
+
+  if (keyCode.Name.size() === 1) {
+    return string.lower(keyCode.Name);
+  }
+
+  return undefined;
+}
+
+function startsWithIgnoreCase(value: string, query: string) {
+  if (query.size() === 0) {
+    return false;
+  }
+
+  const normalizedValue = string.lower(value);
+  return string.sub(normalizedValue, 1, query.size()) === query;
+}
+
+function findCurrentIndex(items: Array<SelectItemRegistration>, selectedObject: GuiObject | undefined) {
+  if (!selectedObject) {
+    return -1;
+  }
+
+  return items.findIndex((item) => {
+    const node = item.getNode();
+    if (!node) {
+      return false;
+    }
+
+    return selectedObject === node || selectedObject.IsDescendantOf(node);
+  });
+}
+
+function findTypeaheadMatch(items: Array<SelectItemRegistration>, query: string, startIndex: number) {
+  const itemCount = items.size();
+  if (itemCount === 0) {
+    return -1;
+  }
+
+  for (let attempts = 0; attempts < itemCount; attempts++) {
+    const candidateIndex = (startIndex + attempts) % itemCount;
+    const candidate = items[candidateIndex];
+    if (!candidate || candidate.getDisabled()) {
+      continue;
+    }
+
+    if (startsWithIgnoreCase(candidate.getTextValue(), query)) {
+      return candidateIndex;
+    }
+  }
+
+  return -1;
+}
+
+function focusItem(item: SelectItemRegistration | undefined) {
+  if (!item) {
+    return;
+  }
+
+  const node = item.getNode();
+  if (!node || !node.Selectable) {
+    return;
+  }
+
+  GuiService.SelectedObject = node;
+}
+
+function SelectContentImpl(props: SelectContentImplProps) {
+  const selectContext = useSelectContext();
+
+  const popper = usePopper({
+    anchorRef: selectContext.triggerRef,
+    contentRef: selectContext.contentRef,
+    placement: props.placement,
+    offset: props.offset,
+    padding: props.padding,
+    enabled: props.enabled,
+  });
+
+  const setContentRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      selectContext.contentRef.current = toGuiObject(instance);
+    },
+    [selectContext.contentRef],
+  );
+
+  const searchRef = React.useRef("");
+  const searchTimestampRef = React.useRef(0);
+
+  React.useEffect(() => {
+    if (!props.enabled) {
+      return;
+    }
+
+    const orderedItems = selectContext.getOrderedItems();
+    const selectedItem = orderedItems.find((item) => item.value === selectContext.value && !item.getDisabled());
+    focusItem(selectedItem);
+  }, [props.enabled, selectContext, selectContext.value]);
+
+  React.useEffect(() => {
+    if (!props.enabled) {
+      return;
+    }
+
+    searchRef.current = "";
+    searchTimestampRef.current = 0;
+
+    const connection = UserInputService.InputBegan.Connect((inputObject, gameProcessedEvent) => {
+      if (gameProcessedEvent) {
+        return;
+      }
+
+      if (inputObject.UserInputType !== Enum.UserInputType.Keyboard) {
+        return;
+      }
+
+      const contentNode = selectContext.contentRef.current;
+      const selectedObject = GuiService.SelectedObject;
+      if (!contentNode || !selectedObject || !selectedObject.IsDescendantOf(contentNode)) {
+        return;
+      }
+
+      const searchCharacter = toSearchCharacter(inputObject.KeyCode);
+      if (searchCharacter === undefined) {
+        return;
+      }
+
+      const now = os.clock();
+      const shouldResetQuery = now - searchTimestampRef.current > 0.8;
+      const nextQuery = shouldResetQuery ? searchCharacter : `${searchRef.current}${searchCharacter}`;
+      searchRef.current = nextQuery;
+      searchTimestampRef.current = now;
+
+      const orderedItems = selectContext.getOrderedItems();
+      const currentIndex = findCurrentIndex(orderedItems, selectedObject);
+      const startIndex = currentIndex >= 0 ? currentIndex + 1 : 0;
+      const matchIndex = findTypeaheadMatch(orderedItems, string.lower(nextQuery), startIndex);
+      if (matchIndex < 0) {
+        return;
+      }
+
+      const matchedItem = orderedItems[matchIndex];
+      focusItem(matchedItem);
+    });
+
+    return () => {
+      connection.Disconnect();
+    };
+  }, [props.enabled, selectContext]);
+
+  const contentNode = props.asChild ? (
+    (() => {
+      const child = props.children;
+      if (!React.isValidElement(child)) {
+        error("[SelectContent] `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={selectContext.loop} orientation="vertical">
+        {contentNode}
+      </RovingFocusGroup>
+    </DismissableLayer>
+  );
+}
+
+export function SelectContent(props: SelectContentProps) {
+  const selectContext = useSelectContext();
+  const open = selectContext.open;
+  const forceMount = props.forceMount === true;
+
+  const handleDismiss = React.useCallback(() => {
+    selectContext.setOpen(false);
+  }, [selectContext]);
+
+  if (!open && !forceMount) {
+    return undefined;
+  }
+
+  if (forceMount) {
+    return (
+      <SelectContentImpl
+        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}
+      </SelectContentImpl>
+    );
+  }
+
+  return (
+    <Presence
+      exitFallbackMs={0}
+      present={open}
+      render={(state) => (
+        <SelectContentImpl
+          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}
+        </SelectContentImpl>
+      )}
+    />
+  );
+}

package/src/Select/SelectGroup.tsx

@@ -0,0 +1,19 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { SelectGroupProps } from "./types";
+
+export function SelectGroup(props: SelectGroupProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[SelectGroup] `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/Select/SelectItem.tsx

@@ -0,0 +1,132 @@
+import { React, Slot } from "@lattice-ui/core";
+import { RovingFocusItem } from "@lattice-ui/focus";
+import { useSelectContext } from "./context";
+import type { SelectItemProps } from "./types";
+
+let nextItemId = 0;
+let nextItemOrder = 0;
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function SelectItem(props: SelectItemProps) {
+  const selectContext = useSelectContext();
+  const itemRef = React.useRef<GuiObject>();
+
+  const disabled = selectContext.disabled || props.disabled === true;
+  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 selectContext.registerItem({
+      id: itemIdRef.current,
+      value: props.value,
+      order: itemOrderRef.current,
+      getNode: () => itemRef.current,
+      getDisabled: () => disabledRef.current,
+      getTextValue: () => textValueRef.current,
+    });
+  }, [props.value, selectContext]);
+
+  const setItemRef = React.useCallback((instance: Instance | undefined) => {
+    itemRef.current = toGuiObject(instance);
+  }, []);
+
+  const handleSelect = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    selectContext.setValue(props.value);
+    selectContext.setOpen(false);
+  }, [disabled, props.value, 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) {
+        return;
+      }
+
+      selectContext.setValue(props.value);
+      selectContext.setOpen(false);
+    },
+    [disabled, props.value, selectContext],
+  );
+
+  const eventHandlers = React.useMemo(
+    () => ({
+      Activated: handleSelect,
+      InputBegan: handleInputBegan,
+    }),
+    [handleInputBegan, handleSelect],
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[SelectItem] `asChild` requires a child element.");
+    }
+
+    return (
+      <RovingFocusItem asChild disabled={disabled}>
+        <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled} 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}
+        ref={setItemRef}
+      >
+        <uipadding PaddingLeft={new UDim(0, 10)} PaddingRight={new UDim(0, 10)} />
+        {props.children}
+      </textbutton>
+    </RovingFocusItem>
+  );
+}

package/src/Select/SelectLabel.tsx

@@ -0,0 +1,27 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { SelectLabelProps } from "./types";
+
+export function SelectLabel(props: SelectLabelProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[SelectLabel] `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/Select/SelectPortal.tsx

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

package/src/Select/SelectRoot.tsx

@@ -0,0 +1,124 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { SelectContextProvider } from "./context";
+import type { SelectItemRegistration, SelectProps } from "./types";
+
+function getOrderedItems(items: Array<SelectItemRegistration>) {
+  const ordered = [...items];
+  ordered.sort((left, right) => left.order < right.order);
+  return ordered;
+}
+
+export function SelectRoot(props: SelectProps) {
+  const [open, setOpenState] = useControllableState<boolean>({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange,
+  });
+
+  const [value, setValueState] = useControllableState<string | undefined>({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: (nextValue) => {
+      if (nextValue !== undefined) {
+        props.onValueChange?.(nextValue);
+      }
+    },
+  });
+
+  const disabled = props.disabled === true;
+  const required = props.required === true;
+  const loop = props.loop ?? true;
+
+  const triggerRef = React.useRef<GuiObject>();
+  const contentRef = React.useRef<GuiObject>();
+
+  const itemEntriesRef = React.useRef<Array<SelectItemRegistration>>([]);
+  const [registryRevision, setRegistryRevision] = React.useState(0);
+
+  const registerItem = React.useCallback((item: SelectItemRegistration) => {
+    itemEntriesRef.current.push(item);
+    setRegistryRevision((revision) => revision + 1);
+
+    return () => {
+      const index = itemEntriesRef.current.findIndex((entry) => entry.id === item.id);
+      if (index >= 0) {
+        itemEntriesRef.current.remove(index);
+        setRegistryRevision((revision) => revision + 1);
+      }
+    };
+  }, []);
+
+  const resolveOrderedItems = React.useCallback(() => {
+    return getOrderedItems(itemEntriesRef.current);
+  }, [registryRevision]);
+
+  const getItemText = React.useCallback(
+    (candidateValue: string) => {
+      const selected = resolveOrderedItems().find((item) => item.value === candidateValue);
+      return selected?.getTextValue();
+    },
+    [resolveOrderedItems],
+  );
+
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      if (disabled && nextOpen) {
+        return;
+      }
+
+      setOpenState(nextOpen);
+    },
+    [disabled, setOpenState],
+  );
+
+  const setValue = React.useCallback(
+    (nextValue: string) => {
+      if (disabled) {
+        return;
+      }
+
+      const selected = resolveOrderedItems().find((item) => item.value === nextValue);
+      if (selected && selected.getDisabled()) {
+        return;
+      }
+
+      setValueState(nextValue);
+    },
+    [disabled, resolveOrderedItems, setValueState],
+  );
+
+  React.useEffect(() => {
+    if (value === undefined) {
+      return;
+    }
+
+    const orderedItems = resolveOrderedItems();
+    const selected = orderedItems.find((item) => item.value === value);
+    if (selected && !selected.getDisabled()) {
+      return;
+    }
+
+    const fallback = orderedItems.find((item) => !item.getDisabled());
+    setValueState(fallback?.value);
+  }, [registryRevision, resolveOrderedItems, setValueState, value]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      value,
+      setValue,
+      disabled,
+      required,
+      loop,
+      triggerRef,
+      contentRef,
+      registerItem,
+      getOrderedItems: resolveOrderedItems,
+      getItemText,
+    }),
+    [disabled, getItemText, loop, open, registerItem, required, resolveOrderedItems, setOpen, setValue, value],
+  );
+
+  return <SelectContextProvider value={contextValue}>{props.children}</SelectContextProvider>;
+}

package/src/Select/SelectSeparator.tsx

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