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

package/out/ui/packages/layout/components/Stack.luau

@@ -1,7 +1,16 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local resolveSx = _theme.resolveSx
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local _Pad = TS.import(script, script.Parent, "Pad")
+local automaticAxes = _Pad.automaticAxes
+local Pad = _Pad.Pad
+local padActive = _Pad.padActive
+local styleAutomaticSize = _Pad.styleAutomaticSize
+local withoutPad = _Pad.withoutPad
 local useStackStyles = TS.import(script, script.Parent, "Stack.styles").default
 local function Stack(props)
 	local _binding = props
@@ -16,6 +25,8 @@ local function Stack(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local styles = useStackStyles({
 		direction = direction,
 		spacing = spacing,
@@ -24,19 +35,74 @@ local function Stack(props)
 		alignItems = alignItems,
 		justifyContent = justifyContent,
 	})
-	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Stack"
-	end
-	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	local _attributes_1 = table.clone(styles.list)
-	setmetatable(_attributes_1, nil)
-	return React.createElement(SxHost, _attributes, React.createElement("uilistlayout", _attributes_1), children)
+	local pad = resolveSx(theme, sx).padding
+	local _result = pad
+	if _result ~= nil then
+		_result = _result.PaddingLeft.Offset
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = 0
+	end
+	local left = _condition
+	local _result_1 = pad
+	if _result_1 ~= nil then
+		_result_1 = _result_1.PaddingRight.Offset
+	end
+	local _condition_1 = _result_1
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	local right = _condition_1
+	local _result_2 = pad
+	if _result_2 ~= nil then
+		_result_2 = _result_2.PaddingTop.Offset
+	end
+	local _condition_2 = _result_2
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	local top = _condition_2
+	local _result_3 = pad
+	if _result_3 ~= nil then
+		_result_3 = _result_3.PaddingBottom.Offset
+	end
+	local _condition_3 = _result_3
+	if _condition_3 == nil then
+		_condition_3 = 0
+	end
+	local bottom = _condition_3
+	local inset = padActive(left, right, top, bottom)
+	local _result_4 = sx
+	if _result_4 ~= nil then
+		_result_4 = _result_4.AutomaticSize
+	end
+	local _condition_4 = _result_4
+	if _condition_4 == nil then
+		_condition_4 = styleAutomaticSize(styles.root)
+	end
+	local auto = automaticAxes(_condition_4)
+	local _attributes = table.clone(styles.list)
+	setmetatable(_attributes, nil)
+	local body = (React.createElement(React.Fragment, nil, React.createElement("uilistlayout", _attributes), children))
+	local _attributes_1 = {}
+	local _condition_5 = id
+	if not (_condition_5 ~= 0 and _condition_5 == _condition_5 and _condition_5 ~= "" and _condition_5) then
+		_condition_5 = "Stack"
+	end
+	_attributes_1.key = _condition_5
+	_attributes_1.hostRef = ref
+	_attributes_1.base = styles.root
+	_attributes_1.className = className
+	_attributes_1.sx = if inset then withoutPad(sx) else sx
+	return React.createElement(SxHost, _attributes_1, if inset then (React.createElement(Pad, {
+		left = left,
+		right = right,
+		top = top,
+		bottom = bottom,
+		autoX = auto.x,
+		autoY = auto.y,
+	}, body)) else body)
 end
 local default = Stack
 return {

package/out/ui/packages/link/components/Link.luau

@@ -6,16 +6,6 @@ local useState = _react.useState
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useLinkStyles = TS.import(script, script.Parent, "Link.styles").default
-local function escapeRich(text)
-	local out = text
-	for _, _binding in { { "&", "&amp;" }, { "<", "&lt;" }, { ">", "&gt;" } } do
-		local from = _binding[1]
-		local to = _binding[2]
-		local replaced = string.gsub(out, from, to)
-		out = replaced
-	end
-	return out
-end
 local function Link(props)
 	local _binding = props
 	local text = _binding.text
@@ -35,12 +25,12 @@ local function Link(props)
 	local ref = _binding.ref
 	local hover, setHover = useState(false)
 	local showUnderline = underline == "always" or (underline == "hover" and hover)
+	local reserve = underline ~= "none"
 	local styles = useLinkStyles({
 		color = color,
 		disabled = disabled,
 	})
 	local active = canActivate(disabled)
-	local label = escapeRich(text)
 	local _attributes = {
 		tag = "textbutton",
 	}
@@ -57,7 +47,7 @@ local function Link(props)
 		disabled = disabled,
 		hover = hover,
 	}
-	_attributes.Text = if showUnderline then `<u>{label}</u>` else label
+	_attributes.Text = text
 	_attributes.Active = active
 	_attributes.Selectable = active
 	_attributes.Event = {
@@ -76,7 +66,23 @@ local function Link(props)
 			return setHover(false)
 		end,
 	}
-	return React.createElement(SxHost, _attributes)
+	local _result
+	if reserve then
+		local _attributes_1 = table.clone(styles.reserve)
+		setmetatable(_attributes_1, nil)
+		local _exp = React.createElement("uipadding", _attributes_1)
+		local _attributes_2 = {
+			key = "Underline",
+		}
+		for _k, _v in styles.underline do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.BackgroundTransparency = if showUnderline then 0 else 1
+		_result = (React.createElement(React.Fragment, nil, _exp, React.createElement("frame", _attributes_2)))
+	else
+		_result = nil
+	end
+	return React.createElement(SxHost, _attributes, _result)
 end
 local default = Link
 return {

package/out/ui/packages/link/components/Link.styles.luau

@@ -34,12 +34,21 @@ local useLinkStyles = componentStyles("Link", function(theme, _param)
 			AutoButtonColor = false,
 			Active = not disabled,
 			Selectable = not disabled,
-			RichText = true,
 			TextColor3 = ink,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
+		underline = {
+			Size = UDim2.new(1, 0, 0, 1),
+			Position = UDim2.new(0, 0, 1, 0),
+			AnchorPoint = Vector2.new(0, 1),
+			BackgroundColor3 = ink,
+			BorderSizePixel = 0,
+		},
+		reserve = {
+			PaddingBottom = UDim.new(0, 1),
+		},
 	})
 end)
 local default = useLinkStyles

package/out/ui/packages/listItem/components/ListItem.luau

@@ -1,9 +1,14 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useState = _react.useState
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local _listItemLayout = TS.import(script, script.Parent, "listItemLayout")
 local listItemCopyInset = _listItemLayout.listItemCopyInset
+local listItemFill = _listItemLayout.listItemFill
 local listItemRowInset = _listItemLayout.listItemRowInset
 local listItemTrailInset = _listItemLayout.listItemTrailInset
 local useListItemStyles = TS.import(script, script.Parent, "ListItem.styles").default
@@ -45,16 +50,38 @@ local function ListItem(props)
 		dense = dense,
 		wrap = wrap,
 		tone = tone,
+		divider = divider,
 	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local hovering, setHovering = useState(false)
+	local down, setDown = useState(false)
+	local face = listItemFill({
+		disabled = disabled,
+		selected = selected,
+		hover = hovering and not disabled,
+		down = down and not disabled,
+	})
+	local fill = if face == "pressed" then theme.palette.action.pressed elseif face == "hover" then theme.palette.action.hover else theme.palette.action.selected
+	local pad = theme.padding.calc(if dense == true then 0.5 else 1)
 	local lead = listItemCopyInset(leading ~= nil)
+	useEffect(function()
+		if not disabled then
+			return nil
+		end
+		setHovering(false)
+		setDown(false)
+	end, { disabled })
 	local trail = listItemTrailInset(trailing ~= nil)
 	local rowInset = listItemRowInset(leading ~= nil, trailing ~= nil)
+	local textSize = UDim2.new(1, if rowInset > 0 then 0 else -pad * 2, 0, 0)
 	local _attributes = {
 		key = "Primary",
 	}
 	for _k, _v in styles.primary do
 		_attributes[_k] = _v
 	end
+	_attributes.Size = textSize
 	_attributes.Text = text
 	local _exp = React.createElement("textlabel", _attributes)
 	local _result
@@ -65,6 +92,7 @@ local function ListItem(props)
 		for _k, _v in styles.secondary do
 			_attributes_1[_k] = _v
 		end
+		_attributes_1.Size = textSize
 		_attributes_1.Text = secondary
 		_result = (React.createElement("textlabel", _attributes_1))
 	else
@@ -80,12 +108,18 @@ local function ListItem(props)
 	end
 	_attributes_1.key = _condition
 	_attributes_1.hostRef = ref
-	_attributes_1.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	_object.BackgroundColor3 = fill
+	_object.BackgroundTransparency = if face == "clear" then 1 else 0
+	_attributes_1.base = _object
 	_attributes_1.className = className
 	_attributes_1.sx = sx
 	_attributes_1.state = {
 		disabled = disabled,
 		selected = selected,
+		hover = hovering,
+		pressed = down,
 	}
 	_attributes_1.Text = ""
 	_attributes_1.Active = not disabled
@@ -97,6 +131,23 @@ local function ListItem(props)
 				onActivated()
 			end
 		end,
+		MouseEnter = function()
+			if not disabled then
+				setHovering(true)
+			end
+		end,
+		MouseLeave = function()
+			setHovering(false)
+			setDown(false)
+		end,
+		MouseButton1Down = function()
+			if not disabled then
+				setDown(true)
+			end
+		end,
+		MouseButton1Up = function()
+			return setDown(false)
+		end,
 	}
 	local _attributes_2 = table.clone(styles.padding)
 	setmetatable(_attributes_2, nil)
@@ -123,7 +174,7 @@ local function ListItem(props)
 		setmetatable(_attributes_4, nil)
 		_result_1 = (React.createElement("frame", {
 			key = "Body",
-			Size = UDim2.new(1, 0, 0, 0),
+			Size = UDim2.new(1, -pad * 2, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
@@ -153,7 +204,13 @@ local function ListItem(props)
 		for _k, _v in styles.divider do
 			_attributes_4[_k] = _v
 		end
-		_result_2 = React.createElement("frame", _attributes_4)
+		local _attributes_5 = {
+			key = "Line",
+		}
+		for _k, _v in styles.line do
+			_attributes_5[_k] = _v
+		end
+		_result_2 = (React.createElement("frame", _attributes_4, React.createElement("frame", _attributes_5)))
 	else
 		_result_2 = nil
 	end

package/out/ui/packages/listItem/components/ListItem.styles.d.ts

@@ -5,5 +5,6 @@ declare const useListItemStyles: (props: {
     dense?: boolean;
     wrap?: boolean;
     tone?: ListItemTone;
+    divider?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useListItemStyles;

package/out/ui/packages/listItem/components/ListItem.styles.luau

@@ -4,7 +4,9 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local listItemInk = TS.import(script, script.Parent, "listItemInk").listItemInk
-local listItemLabelLayout = TS.import(script, script.Parent, "listItemLayout").listItemLabelLayout
+local _listItemLayout = TS.import(script, script.Parent, "listItemLayout")
+local listItemLabelLayout = _listItemLayout.listItemLabelLayout
+local listItemSecondaryLayout = _listItemLayout.listItemSecondaryLayout
 local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 	local selected = _param.selected
 	if selected == nil then
@@ -23,15 +25,23 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 		wrap = false
 	end
 	local tone = _param.tone
+	local divider = _param.divider
+	if divider == nil then
+		divider = false
+	end
 	local pad = theme.padding.calc(if dense == true then 0.5 else 1)
-	local label = listItemLabelLayout(wrap)
+	local primaryLayout = listItemLabelLayout(wrap)
+	local secondaryLayout = listItemSecondaryLayout()
 	local ink = listItemInk(tone, disabled)
 	local primaryColor = if ink == "error" then theme.palette.status.error.main elseif ink == "disabled" then theme.palette.text.disabled else theme.palette.text.primary
-	local textBox = {
-		AutomaticSize = if label.wrapped then Enum.AutomaticSize.Y else Enum.AutomaticSize.XY,
-		Size = UDim2.new(label.widthScale, 0, 0, 0),
-		TextWrapped = label.wrapped,
-	}
+	local textBox = function(label)
+		return {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(label.widthScale, 0, 0, 0),
+			TextWrapped = label.wrapped,
+			TextTruncate = if label.truncate then Enum.TextTruncate.AtEnd else Enum.TextTruncate.None,
+		}
+	end
 	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
@@ -46,7 +56,7 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 		},
 		padding = {
 			PaddingTop = UDim.new(0, pad),
-			PaddingBottom = UDim.new(0, pad),
+			PaddingBottom = UDim.new(0, if divider then 0 else pad),
 			PaddingLeft = UDim.new(0, pad),
 			PaddingRight = UDim.new(0, pad),
 		},
@@ -59,7 +69,7 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 	local _object_1 = {
 		LayoutOrder = 1,
 	}
-	for _k, _v in textBox do
+	for _k, _v in textBox(primaryLayout) do
 		_object_1[_k] = _v
 	end
 	_object_1.BackgroundTransparency = 1
@@ -73,18 +83,25 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 	local _object_2 = {
 		LayoutOrder = 2,
 	}
-	for _k, _v in textBox do
+	for _k, _v in textBox(secondaryLayout) do
 		_object_2[_k] = _v
 	end
 	_object_2.BackgroundTransparency = 1
 	_object_2.BorderSizePixel = 0
 	_object_2.Font = theme.typography.fontFamilies.default
 	_object_2.TextSize = theme.typography.fontSizes.caption
-	_object_2.TextColor3 = theme.palette.text.secondary
+	_object_2.TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.secondary
 	_object_2.TextXAlignment = Enum.TextXAlignment.Left
 	_object[_left_1] = _object_2
 	_object.divider = {
 		LayoutOrder = 3,
+		Size = UDim2.new(1, 0, 0, pad),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	_object.line = {
+		AnchorPoint = Vector2.new(0, 1),
+		Position = UDim2.fromScale(0, 1),
 		Size = UDim2.new(1, 0, 0, 1),
 		BackgroundColor3 = theme.palette.divider,
 		BorderSizePixel = 0,

package/out/ui/packages/listItem/components/listItemInk.d.ts

@@ -1,3 +1,3 @@
 export type ListItemTone = "danger";
 /** Primary label color. Disabled wins over a danger tone. */
-export declare function listItemInk(tone?: ListItemTone, disabled?: boolean): "primary" | "error" | "disabled";
+export declare function listItemInk(tone?: ListItemTone, disabled?: boolean): "primary" | "disabled" | "error";

package/out/ui/packages/listItem/components/listItemLayout.d.ts

@@ -1,12 +1,22 @@
+export type ListItemFill = "clear" | "hover" | "pressed" | "selected";
+export declare function listItemFill(input: {
+    disabled: boolean;
+    selected: boolean;
+    hover: boolean;
+    down: boolean;
+}): ListItemFill;
 export interface ListItemLabelLayout {
     widthScale: number;
     wrapped: boolean;
+    truncate: boolean;
 }
-/** Wrapped rows fill the list. Shrink-wrapped rows stay one line for menus. */
+/** Primary fills the row. It stays one line unless wrap is set. */
 export declare function listItemLabelLayout(wrap?: boolean): ListItemLabelLayout;
+/** Secondary wraps inside the same row. */
+export declare function listItemSecondaryLayout(): ListItemLabelLayout;
 /** Pixels the title column yields when a leading avatar or icon is present. */
 export declare function listItemCopyInset(leading?: boolean): 0 | 40;
 /** Pixels reserved for a control on the far side of the row. */
-export declare function listItemTrailInset(trailing?: boolean): 48 | 0;
+export declare function listItemTrailInset(trailing?: boolean): 0 | 48;
 /** Title column inset, including the gaps beside any side slots. */
 export declare function listItemRowInset(leading?: boolean, trailing?: boolean): number;

package/out/ui/packages/listItem/components/listItemLayout.luau

@@ -1,15 +1,40 @@
 -- Compiled with roblox-ts v3.0.0
---* Wrapped rows fill the list. Shrink-wrapped rows stay one line for menus. 
+local function listItemFill(input)
+	if input.disabled then
+		return "clear"
+	end
+	if input.down then
+		return "pressed"
+	end
+	if input.hover then
+		return "hover"
+	end
+	if input.selected then
+		return "selected"
+	end
+	return "clear"
+end
+--* Primary fills the row. It stays one line unless wrap is set. 
 local function listItemLabelLayout(wrap)
 	if wrap == true then
 		return {
 			widthScale = 1,
 			wrapped = true,
+			truncate = false,
 		}
 	end
 	return {
-		widthScale = 0,
+		widthScale = 1,
 		wrapped = false,
+		truncate = true,
+	}
+end
+--* Secondary wraps inside the same row. 
+local function listItemSecondaryLayout()
+	return {
+		widthScale = 1,
+		wrapped = true,
+		truncate = false,
 	}
 end
 --* Pixels the title column yields when a leading avatar or icon is present. 
@@ -34,7 +59,9 @@ local function listItemRowInset(leading, trailing)
 	return lead + trail + gaps
 end
 return {
+	listItemFill = listItemFill,
 	listItemLabelLayout = listItemLabelLayout,
+	listItemSecondaryLayout = listItemSecondaryLayout,
 	listItemCopyInset = listItemCopyInset,
 	listItemTrailInset = listItemTrailInset,
 	listItemRowInset = listItemRowInset,