@rbxts/uiblox 0.2.0-alpha.36 → 0.2.0-alpha.38

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

@@ -7,6 +7,7 @@ local useRef = _react.useRef
 local useState = _react.useState
 local _services = TS.import(script, TS.getModule(script, "@rbxts", "services"))
 local GuiService = _services.GuiService
+local TextService = _services.TextService
 local UserInputService = _services.UserInputService
 local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
@@ -16,6 +17,7 @@ local useTheme = _theme.useTheme
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local spinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").spinnerPixels
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
+local Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
@@ -37,6 +39,8 @@ local _selectMulti = TS.import(script, script.Parent, "selectMulti")
 local includesChoice = _selectMulti.includesChoice
 local selectionLabel = _selectMulti.selectionLabel
 local typeaheadChoice = TS.import(script, script.Parent, "selectTypeahead").typeaheadChoice
+local fieldChrome = TS.import(script, script.Parent.Parent.Parent, "input", "components", "fieldChrome").fieldChrome
+local selectWidth = TS.import(script, script.Parent, "selectWidth").selectWidth
 local stepChoice = TS.import(script, script.Parent, "stepChoice").stepChoice
 local function Select(props)
 	local _binding = props
@@ -60,6 +64,11 @@ local function Select(props)
 	local empty = _binding.empty
 	local reducedProp = _binding.reducedMotion
 	local size = _binding.size
+	local hasError = _binding.hasError
+	if hasError == nil then
+		hasError = false
+	end
+	local helperText = _binding.helperText
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -67,10 +76,14 @@ local function Select(props)
 	local reducedMotion = useReducedMotion(reducedProp)
 	local styles = useSelectStyles({
 		size = size,
+		hasError = hasError,
+		helperText = helperText,
 	})
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
-	local row = controlMetrics(theme.density, size).height
+	local metrics = controlMetrics(theme.density, size)
+	local mark = metrics.icon
+	local row = metrics.height
 	local active = canActivate(disabled, loading)
 	local anchor, setAnchor = useState()
 	local open, setOpen = useState(defaultOpen == true and not loading)
@@ -104,6 +117,19 @@ local function Select(props)
 	local rows = groupRows(filtered)
 	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 font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
+	local textSize = metrics.font
+	local widest = 0
+	for _, line in rows do
+		local shown = if line.kind == "header" then line.label else optionLabel(line.label, if values ~= nil then includesChoice(values, filtered[line.optionIndex + 1].value) else filtered[line.optionIndex + 1].value == value)
+		local bounds = TextService:GetTextSize(shown, textSize, font, Vector2.new(10000, 100))
+		if bounds.X > widest then
+			widest = bounds.X
+		end
+	end
+	local pad = fieldChrome(metrics.height, theme.padding.calc(1)).padX * 2
+	local floor = if anchor ~= nil then anchor.AbsoluteSize.X else 0
+	local popupWidth = if #rows == 0 then 0 else selectWidth(widest, pad, floor)
 	local _condition_1 = empty
 	if _condition_1 == nil then
 		local _attributes = {}
@@ -265,7 +291,7 @@ local function Select(props)
 		key = "Trigger",
 		ref = setAnchor,
 	}
-	for _k, _v in cx(styles.trigger, current == nil and styles.placeholder, not active and {
+	for _k, _v in cx(styles.trigger, current == nil and styles.placeholder, hasError and styles.errorText, not active and {
 		TextTransparency = 0.5,
 	}) do
 		_attributes_1[_k] = _v
@@ -305,133 +331,166 @@ local function Select(props)
 			return onKey(input, true)
 		end,
 	}
-	local _attributes_2 = table.clone(cx(styles.padding, loading and {
-		PaddingRight = UDim.new(0, theme.padding.calc(1.5) + spinnerPixels(size) + theme.padding.calc(1)),
+	local _attributes_2 = table.clone(cx(styles.padding, {
+		PaddingRight = UDim.new(0, theme.padding.calc(1) + (if loading then spinnerPixels(size) else mark) + theme.padding.calc(1)),
 	}))
 	setmetatable(_attributes_2, nil)
 	local _exp = React.createElement("uipadding", _attributes_2)
 	local _attributes_3 = table.clone(styles.corner)
 	setmetatable(_attributes_3, nil)
 	local _exp_1 = React.createElement("uicorner", _attributes_3)
-	local _attributes_4 = table.clone(cx(styles.stroke, focused and styles.focusStroke))
+	local _exp_2 = styles.stroke
+	local _condition_3 = focused
+	if _condition_3 then
+		local _result_2
+		if hasError then
+			local _object = table.clone(styles.focusStroke)
+			setmetatable(_object, nil)
+			_object.Color = theme.palette.status.error.main
+			_result_2 = _object
+		else
+			_result_2 = styles.focusStroke
+		end
+		_condition_3 = _result_2
+	end
+	local _attributes_4 = table.clone(cx(_exp_2, _condition_3))
 	setmetatable(_attributes_4, nil)
-	local _exp_2 = React.createElement("textbutton", _attributes_1, _exp, _exp_1, React.createElement("uistroke", _attributes_4), loading and (React.createElement(CircularProgress, {
+	local _exp_3 = React.createElement("textbutton", _attributes_1, _exp, _exp_1, React.createElement("uistroke", _attributes_4), if loading then (React.createElement(CircularProgress, {
 		size = spinnerPixels(size),
 		thickness = 2,
 		color = theme.palette.text.secondary,
 		reducedMotion = reducedMotion,
 		className = {
 			AnchorPoint = Vector2.new(1, 0.5),
-			Position = UDim2.new(1, -theme.padding.calc(1), 0.5, 0),
+			Position = UDim2.new(1, spinnerPixels(size) + theme.padding.calc(1), 0.5, 0),
+		},
+	})) else (React.createElement(Icon, {
+		id = "Chevron",
+		glyph = "chevronDown",
+		size = mark,
+		tint = theme.palette.text.secondary,
+		className = {
+			AnchorPoint = Vector2.new(1, 0.5),
+			Position = UDim2.new(1, mark + theme.padding.calc(1), 0.5, 0),
+			Rotation = if shown then 180 else 0,
 		},
 	})))
-	local _condition_3 = shown
-	if _condition_3 then
+	local _condition_4 = helperText ~= nil
+	if _condition_4 then
 		local _attributes_5 = {
-			key = "Menu",
+			key = "Helper",
 		}
-		for _k, _v in styles.menu do
+		for _k, _v in styles.helper do
 			_attributes_5[_k] = _v
 		end
-		local _exp_3 = React.createElement(Shadow)
-		local _attributes_6 = table.clone(styles.corner)
-		setmetatable(_attributes_6, nil)
-		local _exp_4 = React.createElement("uicorner", _attributes_6)
-		local _attributes_7 = table.clone(styles.stroke)
-		setmetatable(_attributes_7, nil)
-		local _exp_5 = React.createElement("uistroke", _attributes_7)
-		local _exp_6 = React.createElement("uilistlayout", {
-			FillDirection = Enum.FillDirection.Vertical,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-		})
-		local _condition_4 = search
-		if _condition_4 then
+		_attributes_5.Text = helperText
+		_condition_4 = React.createElement("textlabel", _attributes_5)
+	end
+	local _attributes_5 = {
+		key = "Menu",
+	}
+	for _k, _v in styles.menu do
+		_attributes_5[_k] = _v
+	end
+	local _exp_4 = React.createElement(Shadow)
+	local _attributes_6 = table.clone(styles.corner)
+	setmetatable(_attributes_6, nil)
+	local _exp_5 = React.createElement("uicorner", _attributes_6)
+	local _attributes_7 = table.clone(styles.stroke)
+	setmetatable(_attributes_7, nil)
+	local _exp_6 = React.createElement("uistroke", _attributes_7)
+	local _exp_7 = React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Vertical,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})
+	local _condition_5 = search
+	if _condition_5 then
+		local _attributes_8 = {
+			key = "Search",
+		}
+		for _k, _v in styles.search do
+			_attributes_8[_k] = _v
+		end
+		_attributes_8.LayoutOrder = 1
+		_condition_5 = (React.createElement("frame", _attributes_8, React.createElement(Input, {
+			text = query,
+			placeholder = "Search",
+			width = UDim.new(1, 0),
+			onInput = function(text)
+				setQuery(text)
+				setHighlight(0)
+			end,
+		})))
+	end
+	return React.createElement(SxHost, _attributes, _exp_3, _condition_4, React.createElement(Popup, {
+		open = shown,
+		anchor = anchor,
+		preferredHeight = menuHeight,
+		preferredWidth = popupWidth,
+		onDismiss = close,
+		onInput = function(input)
+			return onKey(input, true)
+		end,
+	}, React.createElement("frame", _attributes_5, _exp_4, _exp_5, _exp_6, _exp_7, _condition_5, React.createElement("frame", {
+		key = "ListHost",
+		Size = UDim2.new(1, 0, 1, if search then -row else 0),
+		BackgroundTransparency = 1,
+		LayoutOrder = 2,
+	}, React.createElement(VirtualList, {
+		key = "Options",
+		items = rows,
+		getKey = function(row, index)
+			return `{row.kind}-{row.label}-{index}`
+		end,
+		itemHeight = row,
+		listRef = listRef,
+		empty = emptyHint,
+		className = styles.list,
+		renderItem = function(row)
+			if row.kind == "header" then
+				local _attributes_8 = table.clone(styles.group)
+				setmetatable(_attributes_8, nil)
+				_attributes_8.Text = row.label
+				local _attributes_9 = table.clone(styles.padding)
+				setmetatable(_attributes_9, nil)
+				return React.createElement("textlabel", _attributes_8, React.createElement("uipadding", _attributes_9))
+			end
+			local index = row.optionIndex
+			local picked = if values ~= nil then includesChoice(values, filtered[index + 1].value) else filtered[index + 1].value == value
 			local _attributes_8 = {
-				key = "Search",
+				ref = function(button)
+					if button and index == highlight and canFocusGui(button) then
+						GuiService.SelectedObject = button
+					end
+				end,
 			}
-			for _k, _v in styles.search do
+			for _k, _v in cx(styles.option, picked and styles.selected, index == highlight and styles.highlighted, row.disabled == true and styles.disabledOption) do
 				_attributes_8[_k] = _v
 			end
-			_attributes_8.LayoutOrder = 1
-			_condition_4 = (React.createElement("frame", _attributes_8, React.createElement(Input, {
-				text = query,
-				placeholder = "Search",
-				width = UDim.new(1, 0),
-				onInput = function(text)
-					setQuery(text)
-					setHighlight(0)
+			_attributes_8.Text = optionLabel(row.label, picked)
+			_attributes_8.Active = row.disabled ~= true
+			_attributes_8.Selectable = row.disabled ~= true
+			_attributes_8.Event = {
+				Activated = function()
+					return choose(index, true)
 				end,
-			})))
-		end
-		_condition_3 = (React.createElement(Popup, {
-			anchor = anchor,
-			preferredHeight = menuHeight,
-			onDismiss = close,
-			onInput = function(input)
-				return onKey(input, true)
-			end,
-		}, 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,
-			LayoutOrder = 2,
-		}, React.createElement(VirtualList, {
-			key = "Options",
-			items = rows,
-			getKey = function(row, index)
-				return `{row.kind}-{row.label}-{index}`
-			end,
-			itemHeight = row,
-			listRef = listRef,
-			empty = emptyHint,
-			className = styles.list,
-			renderItem = function(row)
-				if row.kind == "header" then
-					local _attributes_8 = table.clone(styles.group)
-					setmetatable(_attributes_8, nil)
-					_attributes_8.Text = row.label
-					local _attributes_9 = table.clone(styles.padding)
-					setmetatable(_attributes_9, nil)
-					return React.createElement("textlabel", _attributes_8, React.createElement("uipadding", _attributes_9))
-				end
-				local index = row.optionIndex
-				local picked = if values ~= nil then includesChoice(values, filtered[index + 1].value) else filtered[index + 1].value == value
-				local _attributes_8 = {
-					ref = function(button)
-						if button and index == highlight and canFocusGui(button) then
-							GuiService.SelectedObject = button
-						end
-					end,
-				}
-				for _k, _v in cx(styles.option, picked and styles.selected, index == highlight and styles.highlighted, row.disabled == true and styles.disabledOption) do
-					_attributes_8[_k] = _v
-				end
-				_attributes_8.Text = optionLabel(row.label, picked)
-				_attributes_8.Active = row.disabled ~= true
-				_attributes_8.Selectable = row.disabled ~= true
-				_attributes_8.Event = {
-					Activated = function()
-						return choose(index, true)
-					end,
-					MouseEnter = function()
-						if row.disabled ~= true then
-							setHighlight(index)
-						end
-					end,
-					SelectionGained = function()
-						return setHighlight(index)
-					end,
-					InputBegan = function(_, input)
-						return onKey(input, true)
-					end,
-				}
-				local _attributes_9 = table.clone(styles.padding)
-				setmetatable(_attributes_9, nil)
-				return React.createElement("textbutton", _attributes_8, React.createElement("uipadding", _attributes_9))
-			end,
-		})))))
-	end
-	return React.createElement(SxHost, _attributes, _exp_2, _condition_3)
+				MouseEnter = function()
+					if row.disabled ~= true then
+						setHighlight(index)
+					end
+				end,
+				SelectionGained = function()
+					return setHighlight(index)
+				end,
+				InputBegan = function(_, input)
+					return onKey(input, true)
+				end,
+			}
+			local _attributes_9 = table.clone(styles.padding)
+			setmetatable(_attributes_9, nil)
+			return React.createElement("textbutton", _attributes_8, React.createElement("uipadding", _attributes_9))
+		end,
+	})))))
 end
 local default = Select
 return {

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

@@ -1,6 +1,8 @@
 import { ControlSize } from "../../../../theme/index";
 export interface SelectStyleProps {
     size?: ControlSize;
+    hasError?: boolean;
+    helperText?: string;
 }
 declare const useSelectStyles: (props: SelectStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
 export default useSelectStyles;

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

@@ -4,17 +4,26 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local focusRing = _theme.focusRing
+local fieldChrome = TS.import(script, script.Parent.Parent.Parent, "input", "components", "fieldChrome").fieldChrome
 local useSelectStyles = componentStyles("Select", function(theme, _param)
 	local size = _param.size
+	local hasError = _param.hasError
+	if hasError == nil then
+		hasError = false
+	end
+	local helperText = _param.helperText
 	local metrics = controlMetrics(theme.density, size)
+	local chrome = fieldChrome(metrics.height, theme.padding.calc(1))
+	local withHelper = helperText ~= nil
 	return createStyles({
 		root = {
-			Size = UDim2.fromOffset(theme.spacing.calc(12), metrics.height),
+			Size = UDim2.fromOffset(theme.spacing.calc(12), if withHelper then chrome.height + metrics.height else chrome.height),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
 		trigger = {
-			Size = UDim2.fromScale(1, 1),
+			Size = UDim2.new(1, 0, 0, chrome.height),
 			BackgroundColor3 = theme.palette.surface.input,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
@@ -28,8 +37,8 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 			TextColor3 = theme.palette.text.secondary,
 		},
 		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingLeft = UDim.new(0, chrome.padX),
+			PaddingRight = UDim.new(0, chrome.padX),
 		},
 		menu = {
 			Size = UDim2.fromScale(1, 1),
@@ -88,14 +97,26 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
 		stroke = {
-			Color = theme.palette.border,
+			Color = if hasError then theme.palette.status.error.main else theme.palette.border,
+			Transparency = 0,
+			Thickness = 1,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
-		focusStroke = {
-			Color = theme.palette.focus,
-			Thickness = 2,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		errorText = {
+			TextColor3 = theme.palette.status.error.main,
+		},
+		helper = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Position = UDim2.new(0, 0, 1, 0),
+			AnchorPoint = Vector2.new(0, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextColor3 = if hasError then theme.palette.status.error.main else theme.palette.text.secondary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = metrics.font,
+			TextXAlignment = Enum.TextXAlignment.Left,
 		},
+		focusStroke = focusRing(theme.palette.focus),
 	})
 end)
 local default = useSelectStyles

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

@@ -0,0 +1,2 @@
+/** Grow past a narrow field so the option fits. Stay at least as wide as the field. */
+export declare function selectWidth(text: number, pad: number, floor: number): number;

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

@@ -0,0 +1,15 @@
+-- Compiled with roblox-ts v3.0.0
+--* Grow past a narrow field so the option fits. Stay at least as wide as the field. 
+local function selectWidth(text, pad, floor)
+	local need = text + pad
+	if need < 0 then
+		need = 0
+	end
+	if floor > need then
+		return floor
+	end
+	return need
+end
+return {
+	selectWidth = selectWidth,
+}