@rbxts/uiblox 0.2.0-alpha.4 → 0.2.0-alpha.5

package/out/ui/packages/menu/components/Menu.luau

@@ -3,6 +3,7 @@ local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local ListItem = TS.import(script, script.Parent.Parent.Parent, "listItem").ListItem
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
+local EmptyListHint = TS.import(script, script.Parent.Parent.Parent, "virtualList").EmptyListHint
 local useMenuStyles = TS.import(script, script.Parent, "Menu.styles").default
 local ROW = 28
 local function Menu(props)
@@ -12,10 +13,14 @@ local function Menu(props)
 	local items = _binding.items
 	local onSelect = _binding.onSelect
 	local onClose = _binding.onClose
+	local emptyText = _binding.emptyText
+	local empty = _binding.empty
 	local styles = useMenuStyles()
 	if not open then
 		return nil
 	end
+	local vacant = #items == 0
+	local height = if vacant then ROW else #items * ROW
 	local _attributes = {
 		key = "Surface",
 	}
@@ -25,34 +30,54 @@ local function Menu(props)
 	local _attributes_1 = table.clone(styles.corner)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uicorner", _attributes_1)
-	local _attributes_2 = table.clone(styles.list)
+	local _attributes_2 = table.clone(styles.stroke)
 	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#items)
-	local _callback = function(item)
-		return React.createElement(ListItem, {
-			key = item.id,
-			text = item.text,
-			disabled = item.disabled,
-			onActivated = function()
-				if item.disabled == true then
-					return nil
-				end
-				onSelect(item.id)
-				onClose()
-			end,
-		})
+	local _exp_1 = React.createElement("uistroke", _attributes_2)
+	local _attributes_3 = table.clone(styles.list)
+	setmetatable(_attributes_3, nil)
+	local _exp_2 = React.createElement("uilistlayout", _attributes_3)
+	local _result
+	if vacant then
+		local _condition = empty
+		if _condition == nil then
+			local _attributes_4 = {}
+			local _condition_1 = emptyText
+			if _condition_1 == nil then
+				_condition_1 = "No options"
+			end
+			_attributes_4.text = _condition_1
+			_attributes_4.height = ROW
+			_condition = React.createElement(EmptyListHint, _attributes_4)
+		end
+		_result = _condition
+	else
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#items)
+		local _callback = function(item)
+			return React.createElement(ListItem, {
+				key = item.id,
+				text = item.text,
+				disabled = item.disabled,
+				onActivated = function()
+					if item.disabled == true then
+						return nil
+					end
+					onSelect(item.id)
+					onClose()
+				end,
+			})
+		end
+		for _k, _v in items do
+			_newValue[_k] = _callback(_v, _k - 1, items)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_result = _newValue
 	end
-	for _k, _v in items do
-		_newValue[_k] = _callback(_v, _k - 1, items)
-	end
-	-- ▲ ReadonlyArray.map ▲
 	return React.createElement(Popup, {
 		anchor = anchor,
-		preferredHeight = #items * ROW,
+		preferredHeight = height,
 		onDismiss = onClose,
-	}, React.createElement("frame", _attributes, _exp, _exp_1, _newValue))
+	}, React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _result))
 end
 local default = Menu
 return {

package/out/ui/packages/menu/components/Menu.styles.luau

@@ -8,12 +8,16 @@ local useMenuStyles = componentStyles("Menu", function(theme)
 		surface = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundColor3 = theme.palette.surface.paper,
+			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
+		stroke = {
+			Color = theme.palette.border,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
 		list = {
 			FillDirection = Enum.FillDirection.Vertical,
 			SortOrder = Enum.SortOrder.LayoutOrder,

package/out/ui/packages/select/components/Select.d.ts

@@ -1,3 +1,4 @@
+import React from "@rbxts/react";
 import { ControlSize, CustomizedProps } from "../../../../theme/index";
 import { ChoiceOption } from "../../radioGroup/index";
 export interface SelectProps<T> {
@@ -9,6 +10,10 @@ export interface SelectProps<T> {
     loading?: boolean;
     placeholder?: string;
     searchable?: boolean;
+    defaultOpen?: boolean;
+    defaultQuery?: string;
+    emptyText?: string;
+    empty?: React.Element;
     reducedMotion?: boolean;
     size?: ControlSize;
 }

package/out/ui/packages/select/components/Select.luau

@@ -20,7 +20,9 @@ local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion").playProperty
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
-local VirtualList = TS.import(script, script.Parent.Parent.Parent, "virtualList").VirtualList
+local _virtualList = TS.import(script, script.Parent.Parent.Parent, "virtualList")
+local EmptyListHint = _virtualList.EmptyListHint
+local VirtualList = _virtualList.VirtualList
 local useSelectStyles = TS.import(script, script.Parent, "Select.styles").default
 local optionLabel = TS.import(script, script.Parent, "optionLabel").optionLabel
 local _selectFilter = TS.import(script, script.Parent, "selectFilter")
@@ -53,6 +55,10 @@ local function Select(props)
 		placeholder = ""
 	end
 	local searchable = _binding.searchable
+	local defaultOpen = _binding.defaultOpen
+	local defaultQuery = _binding.defaultQuery
+	local emptyText = _binding.emptyText
+	local empty = _binding.empty
 	local reducedProp = _binding.reducedMotion
 	local size = _binding.size
 	local className = _binding.className
@@ -68,11 +74,15 @@ local function Select(props)
 	local row = controlMetrics(theme.density, size).height
 	local active = canActivate(disabled, loading)
 	local anchor, setAnchor = useState()
-	local open, setOpen = useState(false)
+	local open, setOpen = useState(defaultOpen == true and not loading)
 	local held, setHeld = useState(false)
 	local focused, setFocused = useState(false)
 	local highlight, setHighlight = useState(-1)
-	local query, setQuery = useState("")
+	local _condition = defaultQuery
+	if _condition == nil then
+		_condition = ""
+	end
+	local query, setQuery = useState(_condition)
 	local recent = useRef()
 	local typed = useRef()
 	local onKeyRef = useRef()
@@ -95,7 +105,20 @@ local function Select(props)
 	local search = usesSelectSearch(#options, searchable)
 	local filtered = filterChoices(options, query)
 	local rows = groupRows(filtered)
-	local menuHeight = math.min(#rows * row, theme.spacing.calc(16)) + (if search then row else 0)
+	local listHeight = if #rows == 0 then row else math.min(#rows * row, theme.spacing.calc(16))
+	local menuHeight = listHeight + (if search then row else 0)
+	local _condition_1 = empty
+	if _condition_1 == nil then
+		local _attributes = {}
+		local _condition_2 = emptyText
+		if _condition_2 == nil then
+			_condition_2 = (if #query > 0 or #options > 0 then "No results" else "No options")
+		end
+		_attributes.text = _condition_2
+		_attributes.height = row
+		_condition_1 = (React.createElement(EmptyListHint, _attributes))
+	end
+	local emptyHint = _condition_1
 	local close = function()
 		setOpen(false)
 		setQuery("")
@@ -125,15 +148,15 @@ local function Select(props)
 		if fromPointer == nil then
 			fromPointer = false
 		end
-		local _condition = fromPointer
-		if _condition then
+		local _condition_2 = fromPointer
+		if _condition_2 then
 			local _result_1 = listRef.current
 			if _result_1 ~= nil then
 				_result_1 = _result_1.suppressClick()
 			end
-			_condition = _result_1
+			_condition_2 = _result_1
 		end
-		if _condition then
+		if _condition_2 then
 			return nil
 		end
 		local choice = filtered[index + 1]
@@ -254,11 +277,11 @@ local function Select(props)
 		end
 	end, { shown, held, reducedMotion })
 	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Select"
+	local _condition_2 = id
+	if not (_condition_2 ~= 0 and _condition_2 == _condition_2 and _condition_2 ~= "" and _condition_2) then
+		_condition_2 = "Select"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_2
 	_attributes.ref = ref
 	for _k, _v in styles.root do
 		_attributes[_k] = _v
@@ -290,11 +313,11 @@ local function Select(props)
 		if _result_2 ~= nil then
 			_result_2 = _result_2.label
 		end
-		local _condition_1 = _result_2
-		if _condition_1 == nil then
-			_condition_1 = placeholder
+		local _condition_3 = _result_2
+		if _condition_3 == nil then
+			_condition_3 = placeholder
 		end
-		_result_1 = _condition_1
+		_result_1 = _condition_3
 	end
 	_attributes_1.Text = _result_1
 	_attributes_1.Active = active
@@ -337,8 +360,8 @@ local function Select(props)
 			Position = UDim2.new(1, -theme.padding.calc(1), 0.5, 0),
 		},
 	})))
-	local _condition_1 = (shown or held)
-	if _condition_1 then
+	local _condition_3 = (shown or held)
+	if _condition_3 then
 		local _attributes_5 = {
 			key = "Menu",
 		}
@@ -356,8 +379,8 @@ local function Select(props)
 			FillDirection = Enum.FillDirection.Vertical,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		})
-		local _condition_2 = search
-		if _condition_2 then
+		local _condition_4 = search
+		if _condition_4 then
 			local _attributes_8 = {
 				key = "Search",
 			}
@@ -365,7 +388,7 @@ local function Select(props)
 				_attributes_8[_k] = _v
 			end
 			_attributes_8.LayoutOrder = 1
-			_condition_2 = (React.createElement("frame", _attributes_8, React.createElement(Input, {
+			_condition_4 = (React.createElement("frame", _attributes_8, React.createElement(Input, {
 				text = query,
 				placeholder = "Search",
 				width = UDim.new(1, 0),
@@ -375,7 +398,7 @@ local function Select(props)
 				end,
 			})))
 		end
-		_condition_1 = (React.createElement(Popup, {
+		_condition_3 = (React.createElement(Popup, {
 			anchor = anchor,
 			preferredHeight = menuHeight,
 			onDismiss = close,
@@ -387,7 +410,7 @@ local function Select(props)
 			Size = UDim2.fromScale(1, 1),
 			BackgroundTransparency = 1,
 			GroupTransparency = 1,
-		}, React.createElement("frame", _attributes_5, _exp_3, _exp_4, _exp_5, _exp_6, _condition_2, React.createElement("frame", {
+		}, React.createElement("frame", _attributes_5, _exp_3, _exp_4, _exp_5, _exp_6, _condition_4, React.createElement("frame", {
 			key = "ListHost",
 			Size = UDim2.new(1, 0, 1, if search then -row else 0),
 			BackgroundTransparency = 1,
@@ -400,6 +423,7 @@ local function Select(props)
 			end,
 			itemHeight = row,
 			listRef = listRef,
+			empty = emptyHint,
 			className = styles.list,
 			renderItem = function(row)
 				if row.kind == "header" then
@@ -447,7 +471,7 @@ local function Select(props)
 			end,
 		}))))))
 	end
-	return React.createElement("frame", _attributes, _exp_2, _condition_1)
+	return React.createElement("frame", _attributes, _exp_2, _condition_3)
 end
 local default = Select
 return {

package/out/ui/packages/select/components/Select.styles.luau

@@ -44,7 +44,7 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 		},
 		list = {
 			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.surface.elevated,
+			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			ScrollBarThickness = theme.padding.default,
 			ScrollBarImageColor3 = theme.palette.text.secondary,

package/out/ui/packages/speedDial/components/SpeedDial.d.ts

@@ -0,0 +1,17 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { Icons } from "../../../enums/index";
+export interface SpeedDialAction {
+    icon: Icons;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface SpeedDialProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    actions: SpeedDialAction[];
+    icon?: Icons;
+    openIcon?: Icons;
+    disabled?: boolean;
+}
+declare function SpeedDial(props: CustomizedProps<Frame, SpeedDialProps>): JSX.Element;
+export default SpeedDial;

package/out/ui/packages/speedDial/components/SpeedDial.luau

@@ -0,0 +1,92 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local Fab = TS.import(script, script.Parent.Parent.Parent, "fab").Fab
+local useSpeedDialStyles = TS.import(script, script.Parent, "SpeedDial.styles").default
+local function SpeedDial(props)
+	local _binding = props
+	local open = _binding.open
+	local onOpenChange = _binding.onOpenChange
+	local actions = _binding.actions
+	local icon = _binding.icon
+	if icon == nil then
+		icon = Icons.OpenBox
+	end
+	local openIcon = _binding.openIcon
+	if openIcon == nil then
+		openIcon = Icons.Close
+	end
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useSpeedDialStyles()
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "SpeedDial"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _condition_1 = open
+	if _condition_1 then
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#actions)
+		local _callback = function(action, index)
+			return React.createElement(Fab, {
+				key = `Action-{index}`,
+				icon = action.icon,
+				size = "small",
+				disabled = disabled == true or action.disabled == true,
+				onClick = function()
+					local _result = action.onClick
+					if _result ~= nil then
+						_result()
+					end
+					onOpenChange(false)
+				end,
+				className = {
+					LayoutOrder = index,
+				},
+			})
+		end
+		for _k, _v in actions do
+			_newValue[_k] = _callback(_v, _k - 1, actions)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_condition_1 = _newValue
+	end
+	return React.createElement("frame", _attributes, _exp, _condition_1, React.createElement(Fab, {
+		key = "Main",
+		icon = if open then openIcon else icon,
+		disabled = disabled,
+		onClick = function()
+			return onOpenChange(not open)
+		end,
+		className = {
+			LayoutOrder = 1000,
+		},
+	}))
+end
+local default = SpeedDial
+return {
+	default = default,
+}

package/out/ui/packages/speedDial/components/SpeedDial.styles.d.ts

@@ -0,0 +1,2 @@
+declare const useSpeedDialStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export default useSpeedDialStyles;

package/out/ui/packages/speedDial/components/SpeedDial.styles.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local useSpeedDialStyles = componentStyles("SpeedDial", function(theme)
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
+			VerticalAlignment = Enum.VerticalAlignment.Bottom,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+		},
+	})
+end)
+local default = useSpeedDialStyles
+return {
+	default = default,
+}

package/out/ui/packages/speedDial/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SpeedDial } from "./components/SpeedDial";
+export { SpeedDialProps, SpeedDialAction } from "./components/SpeedDial";

package/out/ui/packages/speedDial/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.SpeedDial = TS.import(script, script, "components", "SpeedDial").default
+return exports