@lattice-ui/select 0.3.0

package/out/Select/SelectRoot.luau

@@ -0,0 +1,201 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local useControllableState = _core.useControllableState
+local SelectContextProvider = TS.import(script, script.Parent, "context").SelectContextProvider
+local function getOrderedItems(items)
+	local _array = {}
+	local _length = #_array
+	table.move(items, 1, #items, _length + 1, _array)
+	local ordered = _array
+	table.sort(ordered, function(left, right)
+		return left.order < right.order
+	end)
+	return ordered
+end
+local function SelectRoot(props)
+	local _object = {
+		value = props.open,
+	}
+	local _left = "defaultValue"
+	local _condition = props.defaultOpen
+	if _condition == nil then
+		_condition = false
+	end
+	_object[_left] = _condition
+	_object.onChange = props.onOpenChange
+	local _binding = useControllableState(_object)
+	local open = _binding[1]
+	local setOpenState = _binding[2]
+	local _binding_1 = useControllableState({
+		value = props.value,
+		defaultValue = props.defaultValue,
+		onChange = function(nextValue)
+			if nextValue ~= nil then
+				local _result = props.onValueChange
+				if _result ~= nil then
+					_result(nextValue)
+				end
+			end
+		end,
+	})
+	local value = _binding_1[1]
+	local setValueState = _binding_1[2]
+	local disabled = props.disabled == true
+	local required = props.required == true
+	local _condition_1 = props.loop
+	if _condition_1 == nil then
+		_condition_1 = true
+	end
+	local loop = _condition_1
+	local triggerRef = React.useRef()
+	local contentRef = React.useRef()
+	local itemEntriesRef = React.useRef({})
+	local registryRevision, setRegistryRevision = React.useState(0)
+	local registerItem = React.useCallback(function(item)
+		local _current = itemEntriesRef.current
+		local _item = item
+		table.insert(_current, _item)
+		setRegistryRevision(function(revision)
+			return revision + 1
+		end)
+		return function()
+			local _exp = itemEntriesRef.current
+			-- ▼ ReadonlyArray.findIndex ▼
+			local _callback = function(entry)
+				return entry.id == item.id
+			end
+			local _result = -1
+			for _i, _v in _exp do
+				if _callback(_v, _i - 1, _exp) == true then
+					_result = _i - 1
+					break
+				end
+			end
+			-- ▲ ReadonlyArray.findIndex ▲
+			local index = _result
+			if index >= 0 then
+				table.remove(itemEntriesRef.current, index + 1)
+				setRegistryRevision(function(revision)
+					return revision + 1
+				end)
+			end
+		end
+	end, {})
+	local resolveOrderedItems = React.useCallback(function()
+		return getOrderedItems(itemEntriesRef.current)
+	end, { registryRevision })
+	local getItemText = React.useCallback(function(candidateValue)
+		local _exp = resolveOrderedItems()
+		-- ▼ ReadonlyArray.find ▼
+		local _callback = function(item)
+			return item.value == candidateValue
+		end
+		local _result
+		for _i, _v in _exp do
+			if _callback(_v, _i - 1, _exp) == true then
+				_result = _v
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.find ▲
+		local selected = _result
+		local _result_1 = selected
+		if _result_1 ~= nil then
+			_result_1 = _result_1.getTextValue()
+		end
+		return _result_1
+	end, { resolveOrderedItems })
+	local setOpen = React.useCallback(function(nextOpen)
+		if disabled and nextOpen then
+			return nil
+		end
+		setOpenState(nextOpen)
+	end, { disabled, setOpenState })
+	local setValue = React.useCallback(function(nextValue)
+		if disabled then
+			return nil
+		end
+		local _exp = resolveOrderedItems()
+		-- ▼ ReadonlyArray.find ▼
+		local _callback = function(item)
+			return item.value == nextValue
+		end
+		local _result
+		for _i, _v in _exp do
+			if _callback(_v, _i - 1, _exp) == true then
+				_result = _v
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.find ▲
+		local selected = _result
+		if selected and selected.getDisabled() then
+			return nil
+		end
+		setValueState(nextValue)
+	end, { disabled, resolveOrderedItems, setValueState })
+	React.useEffect(function()
+		if value == nil then
+			return nil
+		end
+		local orderedItems = resolveOrderedItems()
+		-- ▼ ReadonlyArray.find ▼
+		local _callback = function(item)
+			return item.value == value
+		end
+		local _result
+		for _i, _v in orderedItems do
+			if _callback(_v, _i - 1, orderedItems) == true then
+				_result = _v
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.find ▲
+		local selected = _result
+		if selected and not selected.getDisabled() then
+			return nil
+		end
+		-- ▼ ReadonlyArray.find ▼
+		local _callback_1 = function(item)
+			return not item.getDisabled()
+		end
+		local _result_1
+		for _i, _v in orderedItems do
+			if _callback_1(_v, _i - 1, orderedItems) == true then
+				_result_1 = _v
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.find ▲
+		local fallback = _result_1
+		local _result_2 = fallback
+		if _result_2 ~= nil then
+			_result_2 = _result_2.value
+		end
+		setValueState(_result_2)
+	end, { registryRevision, resolveOrderedItems, setValueState, value })
+	local contextValue = React.useMemo(function()
+		return {
+			open = open,
+			setOpen = setOpen,
+			value = value,
+			setValue = setValue,
+			disabled = disabled,
+			required = required,
+			loop = loop,
+			triggerRef = triggerRef,
+			contentRef = contentRef,
+			registerItem = registerItem,
+			getOrderedItems = resolveOrderedItems,
+			getItemText = getItemText,
+		}
+	end, { disabled, getItemText, loop, open, registerItem, required, resolveOrderedItems, setOpen, setValue, value })
+	return React.createElement(SelectContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	SelectRoot = SelectRoot,
+}

package/out/Select/SelectSeparator.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { SelectSeparatorProps } from "./types";
+export declare function SelectSeparator(props: SelectSeparatorProps): React.JSX.Element;

package/out/Select/SelectSeparator.luau

@@ -0,0 +1,22 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local function SelectSeparator(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[SelectSeparator] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end
+	return React.createElement("frame", {
+		BackgroundColor3 = Color3.fromRGB(78, 86, 104),
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(220, 1),
+	}, props.children)
+end
+return {
+	SelectSeparator = SelectSeparator,
+}

package/out/Select/SelectTrigger.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { SelectTriggerProps } from "./types";
+export declare function SelectTrigger(props: SelectTriggerProps): React.JSX.Element;

package/out/Select/SelectTrigger.luau

@@ -0,0 +1,72 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useSelectContext = TS.import(script, script.Parent, "context").useSelectContext
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function SelectTrigger(props)
+	local selectContext = useSelectContext()
+	local disabled = selectContext.disabled or props.disabled == true
+	local setTriggerRef = React.useCallback(function(instance)
+		selectContext.triggerRef.current = toGuiObject(instance)
+	end, { selectContext.triggerRef })
+	local handleActivated = React.useCallback(function()
+		if disabled then
+			return nil
+		end
+		selectContext.setOpen(not selectContext.open)
+	end, { disabled, selectContext })
+	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
+		if disabled then
+			return nil
+		end
+		local keyCode = inputObject.KeyCode
+		if keyCode == Enum.KeyCode.Return or keyCode == Enum.KeyCode.Space then
+			selectContext.setOpen(not selectContext.open)
+			return nil
+		end
+		if keyCode == Enum.KeyCode.Down or keyCode == Enum.KeyCode.Up then
+			selectContext.setOpen(true)
+		end
+	end, { disabled, selectContext })
+	local eventHandlers = React.useMemo(function()
+		return {
+			Activated = handleActivated,
+			InputBegan = handleInputBegan,
+		}
+	end, { handleActivated, handleInputBegan })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[SelectTrigger] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Active = not disabled,
+			Event = eventHandlers,
+			Selectable = not disabled,
+			ref = setTriggerRef,
+		}, child)
+	end
+	return React.createElement("textbutton", {
+		Active = not disabled,
+		AutoButtonColor = false,
+		BackgroundColor3 = Color3.fromRGB(41, 48, 63),
+		BorderSizePixel = 0,
+		Event = eventHandlers,
+		Selectable = not disabled,
+		Size = UDim2.fromOffset(220, 36),
+		Text = "Select",
+		TextColor3 = if disabled then Color3.fromRGB(140, 148, 164) else Color3.fromRGB(235, 241, 248),
+		TextSize = 15,
+		ref = setTriggerRef,
+	}, props.children)
+end
+return {
+	SelectTrigger = SelectTrigger,
+}

package/out/Select/SelectValue.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { SelectValueProps } from "./types";
+export declare function SelectValue(props: SelectValueProps): React.JSX.Element;

package/out/Select/SelectValue.luau

@@ -0,0 +1,47 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useSelectContext = TS.import(script, script.Parent, "context").useSelectContext
+local function SelectValue(props)
+	local selectContext = useSelectContext()
+	local selectedValue = selectContext.value
+	local hasValue = selectedValue ~= nil
+	local resolvedText = React.useMemo(function()
+		if not hasValue or selectedValue == nil then
+			local _condition = props.placeholder
+			if _condition == nil then
+				_condition = ""
+			end
+			return _condition
+		end
+		local _condition = selectContext.getItemText(selectedValue)
+		if _condition == nil then
+			_condition = selectedValue
+		end
+		return _condition
+	end, { hasValue, props.placeholder, selectContext, selectedValue })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[SelectValue] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Name = "SelectValue",
+			Text = resolvedText,
+		}, child)
+	end
+	return React.createElement("textlabel", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(200, 20),
+		Text = resolvedText,
+		TextColor3 = if hasValue then Color3.fromRGB(235, 240, 248) else Color3.fromRGB(153, 161, 177),
+		TextSize = 14,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	})
+end
+return {
+	SelectValue = SelectValue,
+}

package/out/Select/context.d.ts

@@ -0,0 +1,3 @@
+import type { SelectContextValue } from "./types";
+declare const SelectContextProvider: import("@rbxts/react").Provider<SelectContextValue | undefined>, useSelectContext: () => SelectContextValue;
+export { SelectContextProvider, useSelectContext };

package/out/Select/context.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local createStrictContext = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).createStrictContext
+local _binding = createStrictContext("Select")
+local SelectContextProvider = _binding[1]
+local useSelectContext = _binding[2]
+return {
+	SelectContextProvider = SelectContextProvider,
+	useSelectContext = useSelectContext,
+}

package/out/Select/types.d.ts

@@ -0,0 +1,84 @@
+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/out/Select/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/index.d.ts

@@ -0,0 +1,22 @@
+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 declare const Select: {
+    readonly Root: typeof SelectRoot;
+    readonly Trigger: typeof SelectTrigger;
+    readonly Value: typeof SelectValue;
+    readonly Portal: typeof SelectPortal;
+    readonly Content: typeof SelectContent;
+    readonly Item: typeof SelectItem;
+    readonly Group: typeof SelectGroup;
+    readonly Label: typeof SelectLabel;
+    readonly 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/out/init.luau

@@ -0,0 +1,34 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local SelectContent = TS.import(script, script, "Select", "SelectContent").SelectContent
+local SelectGroup = TS.import(script, script, "Select", "SelectGroup").SelectGroup
+local SelectItem = TS.import(script, script, "Select", "SelectItem").SelectItem
+local SelectLabel = TS.import(script, script, "Select", "SelectLabel").SelectLabel
+local SelectPortal = TS.import(script, script, "Select", "SelectPortal").SelectPortal
+local SelectRoot = TS.import(script, script, "Select", "SelectRoot").SelectRoot
+local SelectSeparator = TS.import(script, script, "Select", "SelectSeparator").SelectSeparator
+local SelectTrigger = TS.import(script, script, "Select", "SelectTrigger").SelectTrigger
+local SelectValue = TS.import(script, script, "Select", "SelectValue").SelectValue
+local Select = {
+	Root = SelectRoot,
+	Trigger = SelectTrigger,
+	Value = SelectValue,
+	Portal = SelectPortal,
+	Content = SelectContent,
+	Item = SelectItem,
+	Group = SelectGroup,
+	Label = SelectLabel,
+	Separator = SelectSeparator,
+}
+return {
+	Select = Select,
+	SelectContent = SelectContent,
+	SelectGroup = SelectGroup,
+	SelectItem = SelectItem,
+	SelectLabel = SelectLabel,
+	SelectPortal = SelectPortal,
+	SelectRoot = SelectRoot,
+	SelectSeparator = SelectSeparator,
+	SelectTrigger = SelectTrigger,
+	SelectValue = SelectValue,
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@lattice-ui/select",
+  "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/popper": "0.3.0",
+    "@lattice-ui/layer": "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"
+  }
+}