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

package/out/ui/packages/input/components/clampText.d.ts

@@ -0,0 +1,2 @@
+/** Keep a field within max characters. A missing or negative max leaves the text alone. */
+export declare function clampText(text: string, max?: number): string;

package/out/ui/packages/input/components/clampText.luau

@@ -0,0 +1,16 @@
+-- Compiled with roblox-ts v3.0.0
+--* Keep a field within max characters. A missing or negative max leaves the text alone. 
+local function clampText(text, max)
+	if max == nil or max < 0 then
+		return text
+	end
+	if #text <= max then
+		return text
+	end
+	local _text = text
+	local _max = max
+	return string.sub(_text, 1, _max)
+end
+return {
+	clampText = clampText,
+}

package/out/ui/packages/input/components/multilineHeight.d.ts

@@ -0,0 +1 @@
+export declare function multilineHeight(measured: number, lineHeight: number, minRows: number, maxRows: number, padding: number): number;

package/out/ui/packages/input/components/multilineHeight.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+local function multilineHeight(measured, lineHeight, minRows, maxRows, padding)
+	local minimumRows = math.max(1, math.floor(minRows))
+	local maximumRows = math.max(minimumRows, math.floor(maxRows))
+	local minimum = minimumRows * lineHeight + padding * 2
+	local maximum = maximumRows * lineHeight + padding * 2
+	return math.clamp(measured + padding * 2, minimum, maximum)
+end
+return {
+	multilineHeight = multilineHeight,
+}

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

@@ -6,6 +6,16 @@ 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
@@ -28,9 +38,9 @@ local function Link(props)
 	local styles = useLinkStyles({
 		color = color,
 		disabled = disabled,
-		showUnderline = showUnderline,
 	})
 	local active = canActivate(disabled)
+	local label = escapeRich(text)
 	local _attributes = {
 		tag = "textbutton",
 	}
@@ -47,7 +57,7 @@ local function Link(props)
 		disabled = disabled,
 		hover = hover,
 	}
-	_attributes.Text = text
+	_attributes.Text = if showUnderline then `<u>{label}</u>` else label
 	_attributes.Active = active
 	_attributes.Selectable = active
 	_attributes.Event = {
@@ -66,13 +76,7 @@ local function Link(props)
 			return setHover(false)
 		end,
 	}
-	local _attributes_1 = {
-		key = "Underline",
-	}
-	for _k, _v in styles.underline do
-		_attributes_1[_k] = _v
-	end
-	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1))
+	return React.createElement(SxHost, _attributes)
 end
 local default = Link
 return {

package/out/ui/packages/link/components/Link.styles.d.ts

@@ -3,6 +3,5 @@ export type LinkUnderline = "always" | "hover" | "none";
 declare const useLinkStyles: (props: {
     color?: LinkColor;
     disabled?: boolean;
-    showUnderline?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useLinkStyles;

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

@@ -24,10 +24,6 @@ local useLinkStyles = componentStyles("Link", function(theme, _param)
 	if disabled == nil then
 		disabled = false
 	end
-	local showUnderline = _param.showUnderline
-	if showUnderline == nil then
-		showUnderline = true
-	end
 	local ink = linkColor(theme, color, disabled)
 	return createStyles({
 		root = {
@@ -38,19 +34,12 @@ 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,
-			BackgroundTransparency = if showUnderline then 0 else 1,
-			BorderSizePixel = 0,
-		},
 	})
 end)
 local default = useLinkStyles

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

@@ -1,4 +1,6 @@
+import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
+import { ListItemTone } from "./listItemInk";
 export interface ListItemProps {
     text: string;
     secondary?: string;
@@ -6,6 +8,10 @@ export interface ListItemProps {
     disabled?: boolean;
     dense?: boolean;
     divider?: boolean;
+    wrap?: boolean;
+    tone?: ListItemTone;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
     onActivated?: () => void;
 }
 declare function ListItem(props: CustomizedProps<TextButton, ListItemProps>): JSX.Element;

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

@@ -2,6 +2,10 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local _listItemLayout = TS.import(script, script.Parent, "listItemLayout")
+local listItemCopyInset = _listItemLayout.listItemCopyInset
+local listItemRowInset = _listItemLayout.listItemRowInset
+local listItemTrailInset = _listItemLayout.listItemTrailInset
 local useListItemStyles = TS.import(script, script.Parent, "ListItem.styles").default
 local function ListItem(props)
 	local _binding = props
@@ -23,6 +27,13 @@ local function ListItem(props)
 	if divider == nil then
 		divider = false
 	end
+	local wrap = _binding.wrap
+	if wrap == nil then
+		wrap = false
+	end
+	local tone = _binding.tone
+	local leading = _binding.leading
+	local trailing = _binding.trailing
 	local onActivated = _binding.onActivated
 	local className = _binding.className
 	local sx = _binding.sx
@@ -32,62 +43,109 @@ local function ListItem(props)
 		selected = selected,
 		disabled = disabled,
 		dense = dense,
+		wrap = wrap,
+		tone = tone,
 	})
+	local lead = listItemCopyInset(leading ~= nil)
+	local trail = listItemTrailInset(trailing ~= nil)
+	local rowInset = listItemRowInset(leading ~= nil, trailing ~= nil)
 	local _attributes = {
+		key = "Primary",
+	}
+	for _k, _v in styles.primary do
+		_attributes[_k] = _v
+	end
+	_attributes.Text = text
+	local _exp = React.createElement("textlabel", _attributes)
+	local _result
+	if secondary ~= nil and #secondary > 0 then
+		local _attributes_1 = {
+			key = "Secondary",
+		}
+		for _k, _v in styles.secondary do
+			_attributes_1[_k] = _v
+		end
+		_attributes_1.Text = secondary
+		_result = (React.createElement("textlabel", _attributes_1))
+	else
+		_result = nil
+	end
+	local copy = (React.createElement(React.Fragment, nil, _exp, _result))
+	local _attributes_1 = {
 		tag = "textbutton",
 	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "ListItem"
 	end
-	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
+	_attributes_1.key = _condition
+	_attributes_1.hostRef = ref
+	_attributes_1.base = styles.root
+	_attributes_1.className = className
+	_attributes_1.sx = sx
+	_attributes_1.state = {
 		disabled = disabled,
 		selected = selected,
 	}
-	_attributes.Text = ""
-	_attributes.Active = not disabled
-	_attributes.Selectable = not disabled
-	_attributes.AutoButtonColor = false
-	_attributes.Event = {
+	_attributes_1.Text = ""
+	_attributes_1.Active = not disabled
+	_attributes_1.Selectable = not disabled
+	_attributes_1.AutoButtonColor = false
+	_attributes_1.Event = {
 		Activated = function()
 			if not disabled and onActivated ~= nil then
 				onActivated()
 			end
 		end,
 	}
-	local _attributes_1 = table.clone(styles.padding)
-	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uipadding", _attributes_1)
-	local _attributes_2 = table.clone(styles.list)
+	local _attributes_2 = table.clone(styles.padding)
 	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
-	local _attributes_3 = {
-		key = "Primary",
-	}
-	for _k, _v in styles.primary do
-		_attributes_3[_k] = _v
-	end
-	_attributes_3.Text = text
-	local _exp_2 = React.createElement("textlabel", _attributes_3)
-	local _result
-	if secondary ~= nil and #secondary > 0 then
-		local _attributes_4 = {
-			key = "Secondary",
-		}
-		for _k, _v in styles.secondary do
-			_attributes_4[_k] = _v
-		end
-		_attributes_4.Text = secondary
-		_result = (React.createElement("textlabel", _attributes_4))
+	local _exp_1 = React.createElement("uipadding", _attributes_2)
+	local _attributes_3 = table.clone(styles.list)
+	setmetatable(_attributes_3, nil)
+	local _exp_2 = React.createElement("uilistlayout", _attributes_3)
+	local _result_1
+	if rowInset > 0 then
+		local _exp_3 = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Horizontal,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			Padding = UDim.new(0, 8),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		})
+		local _exp_4 = if lead > 0 then (React.createElement("frame", {
+			key = "Lead",
+			LayoutOrder = 0,
+			Size = UDim2.fromOffset(lead, lead),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, leading)) else nil
+		local _attributes_4 = table.clone(styles.list)
+		setmetatable(_attributes_4, nil)
+		_result_1 = (React.createElement("frame", {
+			key = "Body",
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, _exp_3, _exp_4, React.createElement("frame", {
+			key = "Copy",
+			LayoutOrder = 1,
+			Size = UDim2.new(1, -rowInset, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, React.createElement("uilistlayout", _attributes_4), copy), if trail > 0 then (React.createElement("frame", {
+			key = "Trail",
+			LayoutOrder = 2,
+			Size = UDim2.new(0, trail, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, trailing)) else nil))
 	else
-		_result = nil
+		_result_1 = copy
 	end
-	local _result_1
+	local _result_2
 	if divider == true then
 		local _attributes_4 = {
 			key = "Divider",
@@ -95,11 +153,11 @@ local function ListItem(props)
 		for _k, _v in styles.divider do
 			_attributes_4[_k] = _v
 		end
-		_result_1 = React.createElement("frame", _attributes_4)
+		_result_2 = React.createElement("frame", _attributes_4)
 	else
-		_result_1 = nil
+		_result_2 = nil
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _result, _result_1)
+	return React.createElement(SxHost, _attributes_1, _exp_1, _exp_2, _result_1, _result_2)
 end
 local default = ListItem
 return {

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

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

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

@@ -3,6 +3,8 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 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 useListItemStyles = componentStyles("ListItem", function(theme, _param)
 	local selected = _param.selected
 	if selected == nil then
@@ -16,8 +18,21 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 	if dense == nil then
 		dense = false
 	end
+	local wrap = _param.wrap
+	if wrap == nil then
+		wrap = false
+	end
+	local tone = _param.tone
 	local pad = theme.padding.calc(if dense == true then 0.5 else 1)
-	return createStyles({
+	local label = listItemLabelLayout(wrap)
+	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 _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -39,35 +54,42 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 			FillDirection = Enum.FillDirection.Vertical,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
-		primary = {
-			LayoutOrder = 1,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = if dense == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body,
-			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		secondary = {
-			LayoutOrder = 2,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		divider = {
-			LayoutOrder = 3,
-			Size = UDim2.new(1, 0, 0, 1),
-			BackgroundColor3 = theme.palette.divider,
-			BorderSizePixel = 0,
-		},
-	})
+	}
+	local _left = "primary"
+	local _object_1 = {
+		LayoutOrder = 1,
+	}
+	for _k, _v in textBox do
+		_object_1[_k] = _v
+	end
+	_object_1.BackgroundTransparency = 1
+	_object_1.BorderSizePixel = 0
+	_object_1.Font = theme.typography.fontFamilies.default
+	_object_1.TextSize = if dense == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body
+	_object_1.TextColor3 = primaryColor
+	_object_1.TextXAlignment = Enum.TextXAlignment.Left
+	_object[_left] = _object_1
+	local _left_1 = "secondary"
+	local _object_2 = {
+		LayoutOrder = 2,
+	}
+	for _k, _v in textBox 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.TextXAlignment = Enum.TextXAlignment.Left
+	_object[_left_1] = _object_2
+	_object.divider = {
+		LayoutOrder = 3,
+		Size = UDim2.new(1, 0, 0, 1),
+		BackgroundColor3 = theme.palette.divider,
+		BorderSizePixel = 0,
+	}
+	return createStyles(_object)
 end)
 local default = useListItemStyles
 return {

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

@@ -0,0 +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";

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

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+--* Primary label color. Disabled wins over a danger tone. 
+local function listItemInk(tone, disabled)
+	if disabled == true then
+		return "disabled"
+	end
+	if tone == "danger" then
+		return "error"
+	end
+	return "primary"
+end
+return {
+	listItemInk = listItemInk,
+}

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

@@ -0,0 +1,12 @@
+export interface ListItemLabelLayout {
+    widthScale: number;
+    wrapped: boolean;
+}
+/** Wrapped rows fill the list. Shrink-wrapped rows stay one line for menus. */
+export declare function listItemLabelLayout(wrap?: boolean): 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;
+/** 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

@@ -0,0 +1,41 @@
+-- Compiled with roblox-ts v3.0.0
+--* Wrapped rows fill the list. Shrink-wrapped rows stay one line for menus. 
+local function listItemLabelLayout(wrap)
+	if wrap == true then
+		return {
+			widthScale = 1,
+			wrapped = true,
+		}
+	end
+	return {
+		widthScale = 0,
+		wrapped = false,
+	}
+end
+--* Pixels the title column yields when a leading avatar or icon is present. 
+local function listItemCopyInset(leading)
+	return if leading == true then 40 else 0
+end
+--* Pixels reserved for a control on the far side of the row. 
+local function listItemTrailInset(trailing)
+	return if trailing == true then 48 else 0
+end
+--* Title column inset, including the gaps beside any side slots. 
+local function listItemRowInset(leading, trailing)
+	local lead = listItemCopyInset(leading)
+	local trail = listItemTrailInset(trailing)
+	local gaps = 0
+	if lead > 0 then
+		gaps += 8
+	end
+	if trail > 0 then
+		gaps += 8
+	end
+	return lead + trail + gaps
+end
+return {
+	listItemLabelLayout = listItemLabelLayout,
+	listItemCopyInset = listItemCopyInset,
+	listItemTrailInset = listItemTrailInset,
+	listItemRowInset = listItemRowInset,
+}

package/out/ui/packages/markdown/components/Markdown.d.ts

@@ -1,6 +1,8 @@
 import { CustomizedProps } from "../../../../theme/index";
+import { MarkdownLinkPayload } from "../parseMarkdown";
 export interface MarkdownProps {
     value?: string;
+    onLink?: (payload: MarkdownLinkPayload) => void;
 }
 declare function Markdown(props: CustomizedProps<Frame, MarkdownProps>): JSX.Element;
 export default Markdown;