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

package/out/ui/packages/dateRange/components/DateRangePicker.luau

@@ -1,15 +1,20 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local useTheme = _theme.useTheme
+local fieldChrome = TS.import(script, script.Parent.Parent.Parent, "input", "components", "fieldChrome").fieldChrome
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local _dateRangeValue = TS.import(script, script.Parent.Parent, "dateRangeValue")
 local dateStamp = _dateRangeValue.dateStamp
 local daysInMonth = _dateRangeValue.daysInMonth
 local formatStamp = _dateRangeValue.formatStamp
 local orderSpan = _dateRangeValue.orderSpan
+local shiftDay = _dateRangeValue.shiftDay
 local shiftMonth = _dateRangeValue.shiftMonth
 local weekday = _dateRangeValue.weekday
+local weekStamps = _dateRangeValue.weekStamps
 local MONTHS = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }
 local WEEKDAYS = { "S", "M", "T", "W", "T", "F", "S" }
 local function covers(stamp, value)
@@ -30,12 +35,25 @@ local function DateRangePicker(props)
 	local value = _binding.value
 	local onChange = _binding.onChange
 	local onMonthChange = _binding.onMonthChange
+	local view = _binding.view
+	local anchor = _binding.anchor
+	local onAnchorChange = _binding.onAnchorChange
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local weekMode = view == "week"
+	local _condition = anchor
+	if _condition == nil then
+		_condition = dateStamp(year, month, 1)
+	end
+	local anchorStamp = _condition
+	local week = if weekMode then weekStamps(anchorStamp) else {}
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
+	local chrome = fieldChrome(controlMetrics(theme.density).height, theme.padding.calc(1))
+	local pad = chrome.padX
+	local row = chrome.height
 	local lead = weekday(year, month, 1)
 	local count = daysInMonth(year, month)
 	local cells = {}
@@ -87,17 +105,37 @@ local function DateRangePicker(props)
 		end
 	end
 	local move = function(delta)
+		if weekMode then
+			local moved = shiftDay(anchorStamp, delta * 7)
+			local _result = onAnchorChange
+			if _result ~= nil then
+				_result(moved)
+			end
+			onMonthChange(math.floor(moved / 10000), math.floor(moved / 100) % 100)
+			return nil
+		end
 		local shifted = shiftMonth(year, month, delta)
 		onMonthChange(shifted.year, shifted.month)
 	end
+	local _result
+	if weekMode and #week == 7 then
+		_result = `{formatStamp(week[1])} – {formatStamp(week[7])}`
+	else
+		local _condition_1 = MONTHS[month]
+		if _condition_1 == nil then
+			_condition_1 = ""
+		end
+		_result = `{_condition_1} {year}`
+	end
+	local title = _result
 	local _attributes = {
 		tag = "frame",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "DateRangePicker"
+	local _condition_1 = id
+	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+		_condition_1 = "DateRangePicker"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_1
 	_attributes.hostRef = ref
 	_attributes.base = {
 		Size = UDim2.new(1, 0, 0, 0),
@@ -108,19 +146,24 @@ local function DateRangePicker(props)
 	_attributes.className = className
 	_attributes.sx = sx
 	local _exp = React.createElement("uipadding", {
-		PaddingTop = UDim.new(0, 8),
-		PaddingBottom = UDim.new(0, 8),
-		PaddingLeft = UDim.new(0, 8),
-		PaddingRight = UDim.new(0, 8),
+		PaddingTop = UDim.new(0, pad),
+		PaddingBottom = UDim.new(0, pad),
+		PaddingLeft = UDim.new(0, pad),
+		PaddingRight = UDim.new(0, pad),
 	})
 	local _exp_1 = React.createElement("uilistlayout", {
 		FillDirection = Enum.FillDirection.Vertical,
-		Padding = UDim.new(0, 8),
+		Padding = UDim.new(0, pad),
 		SortOrder = Enum.SortOrder.LayoutOrder,
 	})
-	local _exp_2 = React.createElement("textbutton", {
-		Text = "Prev",
-		Size = UDim2.fromOffset(56, 28),
+	local _exp_2 = React.createElement("frame", {
+		Size = UDim2.new(1, 0, 0, row),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		LayoutOrder = 0,
+	}, React.createElement("textbutton", {
+		Text = if weekMode then "Earlier" else "Prev",
+		Size = UDim2.fromOffset(if weekMode then 72 else 56, row),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		TextColor3 = theme.palette.text.secondary,
@@ -131,31 +174,23 @@ local function DateRangePicker(props)
 				return move(-1)
 			end,
 		},
-	})
-	local _attributes_1 = {}
-	local _condition_1 = MONTHS[month]
-	if _condition_1 == nil then
-		_condition_1 = ""
-	end
-	_attributes_1.Text = `{_condition_1} {year}`
-	_attributes_1.AnchorPoint = Vector2.new(0.5, 0)
-	_attributes_1.Position = UDim2.fromScale(0.5, 0)
-	_attributes_1.Size = UDim2.fromOffset(140, 28)
-	_attributes_1.BackgroundTransparency = 1
-	_attributes_1.BorderSizePixel = 0
-	_attributes_1.TextColor3 = theme.palette.text.primary
-	_attributes_1.Font = theme.typography.fontFamilies.semibold
-	_attributes_1.TextSize = theme.typography.fontSizes.body
-	local _exp_3 = React.createElement("frame", {
-		Size = UDim2.new(1, 0, 0, 28),
+	}), React.createElement("textlabel", {
+		Text = title,
+		AnchorPoint = Vector2.new(0.5, 0),
+		Position = UDim2.fromScale(0.5, 0),
+		Size = UDim2.new(1, -(if weekMode then 72 else 56) * 2, 1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		LayoutOrder = 0,
-	}, _exp_2, React.createElement("textlabel", _attributes_1), React.createElement("textbutton", {
-		Text = "Next",
+		TextTruncate = Enum.TextTruncate.AtEnd,
+		TextWrapped = false,
+		TextColor3 = theme.palette.text.primary,
+		Font = theme.typography.fontFamilies.semibold,
+		TextSize = theme.typography.fontSizes.body,
+	}), React.createElement("textbutton", {
+		Text = if weekMode then "Later" else "Next",
 		AnchorPoint = Vector2.new(1, 0),
 		Position = UDim2.fromScale(1, 0),
-		Size = UDim2.fromOffset(56, 28),
+		Size = UDim2.fromOffset(if weekMode then 72 else 56, row),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		TextColor3 = theme.palette.text.secondary,
@@ -167,85 +202,141 @@ local function DateRangePicker(props)
 			end,
 		},
 	}))
-	local _exp_4 = React.createElement("textlabel", {
+	local _exp_3 = React.createElement("textlabel", {
 		Text = if value.start == nil then "Choose a start and finish" elseif value.finish == nil then formatStamp(value.start) else `{formatStamp(value.start)} – {formatStamp(value.finish)}`,
-		Size = UDim2.new(1, 0, 0, 16),
+		Size = UDim2.new(1, 0, 0, row),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
+		TextTruncate = Enum.TextTruncate.AtEnd,
+		TextWrapped = false,
 		TextXAlignment = Enum.TextXAlignment.Left,
 		TextColor3 = theme.palette.text.secondary,
 		Font = theme.typography.fontFamilies.default,
 		TextSize = theme.typography.fontSizes.caption,
 		LayoutOrder = 1,
 	})
-	local _exp_5 = React.createElement("uigridlayout", {
-		CellSize = UDim2.fromOffset(36, 28),
-		CellPadding = UDim2.fromOffset(4, 4),
-		FillDirectionMaxCells = 7,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-	})
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#WEEKDAYS)
-	local _callback = function(label, index)
-		return React.createElement("textlabel", {
-			key = `week-{index}`,
-			Text = label,
-			LayoutOrder = index,
+	local _result_1
+	if weekMode then
+		local _exp_4 = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Horizontal,
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
+			Padding = UDim.new(0, pad),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		})
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#week)
+		local _callback = function(stamp, index)
+			local chosen = covers(stamp, value)
+			local endpoint = stamp == value.start or stamp == value.finish
+			local _attributes_1 = {
+				key = `week-{stamp}`,
+			}
+			local _condition_2 = WEEKDAYS[index + 1]
+			if _condition_2 == nil then
+				_condition_2 = ""
+			end
+			_attributes_1.Text = `{_condition_2}\n{stamp % 100}`
+			_attributes_1.LayoutOrder = index
+			_attributes_1.Size = UDim2.new(1 / 7, -math.ceil((pad * 6) / 7), 1, 0)
+			_attributes_1.BackgroundColor3 = if chosen then theme.palette.primary.main else theme.palette.surface.input
+			_attributes_1.BackgroundTransparency = if chosen and not endpoint then 0.55 else 0
+			_attributes_1.BorderSizePixel = 0
+			_attributes_1.TextColor3 = if endpoint then theme.palette.primary.on else theme.palette.text.primary
+			_attributes_1.Font = theme.typography.fontFamilies.default
+			_attributes_1.TextSize = theme.typography.fontSizes.caption
+			_attributes_1.TextWrapped = true
+			_attributes_1.AutoButtonColor = false
+			_attributes_1.Event = {
+				Activated = function()
+					return pick(stamp)
+				end,
+			}
+			return React.createElement("textbutton", _attributes_1, React.createElement("uicorner", {
+				CornerRadius = UDim.new(0, theme.shape.borderRadius),
+			}))
+		end
+		for _k, _v in week do
+			_newValue[_k] = _callback(_v, _k - 1, week)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_result_1 = (React.createElement("frame", {
+			Size = UDim2.new(1, 0, 0, row * 2),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			TextColor3 = theme.palette.text.secondary,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
+			LayoutOrder = 2,
+		}, _exp_4, _newValue))
+	else
+		local _exp_4 = React.createElement("uigridlayout", {
+			CellSize = UDim2.new(1 / 7, -math.ceil((pad * 6) / 7), 0, row),
+			CellPadding = UDim2.fromOffset(pad, pad),
+			FillDirectionMaxCells = 7,
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
 		})
-	end
-	for _k, _v in WEEKDAYS do
-		_newValue[_k] = _callback(_v, _k - 1, WEEKDAYS)
-	end
-	-- ▲ ReadonlyArray.map ▲
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue_1 = table.create(#cells)
-	local _callback_1 = function(cell)
-		local stamp = cell.stamp
-		local chosen = stamp ~= nil and covers(stamp, value)
-		local endpoint = stamp ~= nil and (stamp == value.start or stamp == value.finish)
-		if stamp == nil or cell.day == nil then
-			return React.createElement("frame", {
-				key = `blank-{cell.order}`,
-				LayoutOrder = 10 + cell.order,
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#WEEKDAYS)
+		local _callback = function(label, index)
+			return React.createElement("textlabel", {
+				key = `week-{index}`,
+				Text = label,
+				LayoutOrder = index,
 				BackgroundTransparency = 1,
 				BorderSizePixel = 0,
+				TextColor3 = theme.palette.text.secondary,
+				Font = theme.typography.fontFamilies.default,
+				TextSize = theme.typography.fontSizes.caption,
 			})
 		end
-		return React.createElement("textbutton", {
-			key = `day-{stamp}`,
-			Text = tostring(cell.day),
-			LayoutOrder = 10 + cell.order,
-			BackgroundColor3 = if chosen then theme.palette.primary.main else theme.palette.surface.input,
-			BackgroundTransparency = if chosen and not endpoint then 0.55 else 0,
+		for _k, _v in WEEKDAYS do
+			_newValue[_k] = _callback(_v, _k - 1, WEEKDAYS)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue_1 = table.create(#cells)
+		local _callback_1 = function(cell)
+			local stamp = cell.stamp
+			local chosen = stamp ~= nil and covers(stamp, value)
+			local endpoint = stamp ~= nil and (stamp == value.start or stamp == value.finish)
+			if stamp == nil or cell.day == nil then
+				return React.createElement("frame", {
+					key = `blank-{cell.order}`,
+					LayoutOrder = 10 + cell.order,
+					BackgroundTransparency = 1,
+					BorderSizePixel = 0,
+				})
+			end
+			return React.createElement("textbutton", {
+				key = `day-{stamp}`,
+				Text = tostring(cell.day),
+				LayoutOrder = 10 + cell.order,
+				BackgroundColor3 = if chosen then theme.palette.primary.main else theme.palette.surface.input,
+				BackgroundTransparency = if chosen and not endpoint then 0.55 else 0,
+				BorderSizePixel = 0,
+				TextColor3 = if endpoint then theme.palette.primary.on else theme.palette.text.primary,
+				Font = theme.typography.fontFamilies.default,
+				TextSize = theme.typography.fontSizes.body,
+				AutoButtonColor = false,
+				Event = {
+					Activated = function()
+						return pick(stamp)
+					end,
+				},
+			}, React.createElement("uicorner", {
+				CornerRadius = UDim.new(0, theme.shape.borderRadius),
+			}))
+		end
+		for _k, _v in cells do
+			_newValue_1[_k] = _callback_1(_v, _k - 1, cells)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_result_1 = (React.createElement("frame", {
+			Size = UDim2.new(1, 0, 0, row * 7 + pad * 6),
+			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			TextColor3 = if endpoint then theme.palette.primary.on else theme.palette.text.primary,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
-			AutoButtonColor = false,
-			Event = {
-				Activated = function()
-					return pick(stamp)
-				end,
-			},
-		}, React.createElement("uicorner", {
-			CornerRadius = UDim.new(0, 4),
-		}))
-	end
-	for _k, _v in cells do
-		_newValue_1[_k] = _callback_1(_v, _k - 1, cells)
+			LayoutOrder = 2,
+		}, _exp_4, _newValue, _newValue_1))
 	end
-	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_3, _exp_4, React.createElement("frame", {
-		Size = UDim2.new(1, 0, 0, 248),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-		LayoutOrder = 2,
-	}, _exp_5, _newValue, _newValue_1))
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _exp_3, _result_1)
 end
 local default = DateRangePicker
 return {

package/out/ui/packages/dateRange/dateRangeValue.d.ts

@@ -16,3 +16,8 @@ export declare function dayIndex(stamp: number): number;
 export declare function nightsBetween(start: number, finish: number): number;
 export declare function formatStamp(stamp: number): string;
 export declare function formatSpan(value: DateSpan): string;
+/** Inverse of dayIndex. Day 1 is 1 Jan of year 1. */
+export declare function stampFromIndex(index: number): number;
+export declare function shiftDay(stamp: number, delta: number): number;
+/** Seven stamps, Sunday through Saturday, containing the day. */
+export declare function weekStamps(stamp: number): number[];

package/out/ui/packages/dateRange/dateRangeValue.luau

@@ -107,6 +107,37 @@ local function formatSpan(value)
 	end
 	return `{formatStamp(value.start)} – {formatStamp(value.finish)}`
 end
+--* Inverse of dayIndex. Day 1 is 1 Jan of year 1. 
+local function stampFromIndex(index)
+	local left = index
+	local year = 1
+	while left > (if isLeapYear(year) then 366 else 365) do
+		left -= if isLeapYear(year) then 366 else 365
+		year += 1
+	end
+	local month = 1
+	while month < 12 and left > daysInMonth(year, month) do
+		left -= daysInMonth(year, month)
+		month += 1
+	end
+	return dateStamp(year, month, left)
+end
+local function shiftDay(stamp, delta)
+	return stampFromIndex(dayIndex(stamp) + delta)
+end
+--* Seven stamps, Sunday through Saturday, containing the day. 
+local function weekStamps(stamp)
+	local year = math.floor(stamp / 10000)
+	local month = math.floor(stamp / 100) % 100
+	local day = stamp % 100
+	local origin = dayIndex(stamp) - weekday(year, month, day)
+	local week = {}
+	for offset = 0, 6 do
+		local _arg0 = stampFromIndex(origin + offset)
+		table.insert(week, _arg0)
+	end
+	return week
+end
 return {
 	isLeapYear = isLeapYear,
 	daysInMonth = daysInMonth,
@@ -118,4 +149,7 @@ return {
 	nightsBetween = nightsBetween,
 	formatStamp = formatStamp,
 	formatSpan = formatSpan,
+	stampFromIndex = stampFromIndex,
+	shiftDay = shiftDay,
+	weekStamps = weekStamps,
 }

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

@@ -1,3 +1,3 @@
 export { default as DateRangePicker } from "./components/DateRangePicker";
 export { DateRangePickerProps } from "./components/DateRangePicker";
-export { DateSpan, dateStamp, dayIndex, daysInMonth, formatSpan, formatStamp, isLeapYear, nightsBetween, orderSpan, shiftMonth, weekday, } from "./dateRangeValue";
+export { DateSpan, dateStamp, dayIndex, daysInMonth, formatSpan, formatStamp, isLeapYear, nightsBetween, orderSpan, shiftDay, shiftMonth, stampFromIndex, weekday, weekStamps, } from "./dateRangeValue";

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

@@ -11,6 +11,9 @@ exports.formatStamp = _dateRangeValue.formatStamp
 exports.isLeapYear = _dateRangeValue.isLeapYear
 exports.nightsBetween = _dateRangeValue.nightsBetween
 exports.orderSpan = _dateRangeValue.orderSpan
+exports.shiftDay = _dateRangeValue.shiftDay
 exports.shiftMonth = _dateRangeValue.shiftMonth
+exports.stampFromIndex = _dateRangeValue.stampFromIndex
 exports.weekday = _dateRangeValue.weekday
+exports.weekStamps = _dateRangeValue.weekStamps
 return exports

package/out/ui/packages/dialog/components/Dialog.d.ts

@@ -5,6 +5,7 @@ export interface DialogProps {
     open: boolean;
     title?: string;
     onClose: () => void;
+    fullWidth?: boolean;
     children?: React.ReactNode;
     actions?: React.ReactNode;
 }

package/out/ui/packages/dialog/components/Dialog.luau

@@ -1,8 +1,15 @@
 -- 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 useRef = _react.useRef
+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 Modal = TS.import(script, script.Parent.Parent.Parent, "modal").Modal
+local portalTarget = TS.import(script, script.Parent.Parent.Parent, "popup").portalTarget
+local dialogWidth = TS.import(script, script.Parent, "dialogWidth").dialogWidth
 local useDialogStyles = TS.import(script, script.Parent, "Dialog.styles").default
 local function Dialog(props)
 	local _binding = props
@@ -10,15 +17,57 @@ local function Dialog(props)
 	local open = _binding.open
 	local title = _binding.title
 	local onClose = _binding.onClose
+	local fullWidth = _binding.fullWidth
 	local children = _binding.children
 	local actions = _binding.actions
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local styles = useDialogStyles()
+	local probe = useRef()
+	local room, setRoom = useState(0)
 	local hasTitle = title ~= nil and title ~= ""
 	local hasActions = actions ~= nil
+	local fill = fullWidth == true
+	useEffect(function()
+		if not fill then
+			return nil
+		end
+		local layer = portalTarget(host or probe.current)
+		if layer == nil or not layer:IsA("GuiBase2d") then
+			return nil
+		end
+		local read = function()
+			return setRoom(layer.AbsoluteSize.X)
+		end
+		read()
+		local connection = layer:GetPropertyChangedSignal("AbsoluteSize"):Connect(read)
+		return function()
+			return connection:Disconnect()
+		end
+	end, { fill, host, open })
+	local width = dialogWidth(fullWidth, room - theme.padding.calc(2) * 2, theme.padding.calc(36))
+	local _result
+	if fill then
+		local _object = table.clone(styles.column)
+		setmetatable(_object, nil)
+		_object.AutomaticSize = Enum.AutomaticSize.Y
+		_object.Size = UDim2.fromOffset(width, 0)
+		_result = _object
+	else
+		_result = styles.column
+	end
+	local column = _result
+	local _exp = React.createElement("frame", {
+		key = "Probe",
+		ref = probe,
+		Size = UDim2.fromOffset(0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	})
 	local _attributes = {
 		tag = "frame",
 	}
@@ -28,12 +77,12 @@ local function Dialog(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.column
+	_attributes.base = column
 	_attributes.className = className
 	_attributes.sx = sx
 	local _attributes_1 = table.clone(styles.columnList)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_1)
 	local _condition_1 = hasTitle
 	if _condition_1 then
 		local _attributes_2 = {
@@ -51,7 +100,7 @@ local function Dialog(props)
 	for _k, _v in styles.body do
 		_attributes_2[_k] = _v
 	end
-	local _exp_1 = React.createElement("frame", _attributes_2, children)
+	local _exp_2 = React.createElement("frame", _attributes_2, children)
 	local _condition_2 = hasActions
 	if _condition_2 then
 		local _attributes_3 = {
@@ -64,11 +113,11 @@ local function Dialog(props)
 		setmetatable(_attributes_4, nil)
 		_condition_2 = (React.createElement("frame", _attributes_3, React.createElement("uilistlayout", _attributes_4), actions))
 	end
-	return React.createElement(Modal, {
+	return React.createElement(React.Fragment, nil, _exp, React.createElement(Modal, {
 		host = host,
 		open = open,
 		onClose = onClose,
-	}, React.createElement(SxHost, _attributes, _exp, _condition_1, _exp_1, _condition_2))
+	}, React.createElement(SxHost, _attributes, _exp_1, _condition_1, _exp_2, _condition_2)))
 end
 local default = Dialog
 return {

package/out/ui/packages/dialog/components/Dialog.styles.luau

@@ -4,9 +4,10 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local useDialogStyles = componentStyles("Dialog", function(theme)
+	local heading = theme.typography.variants.h6
 	return createStyles({
 		column = {
-			AutomaticSize = Enum.AutomaticSize.XY,
+			AutomaticSize = Enum.AutomaticSize.Y,
 			Size = UDim2.fromOffset(theme.padding.calc(36), 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
@@ -18,14 +19,16 @@ local useDialogStyles = componentStyles("Dialog", function(theme)
 		},
 		title = {
 			LayoutOrder = 1,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.h6,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
 			TextColor3 = theme.palette.text.primary,
 			TextXAlignment = Enum.TextXAlignment.Left,
+			TextWrapped = true,
 		},
 		body = {
 			LayoutOrder = 2,
@@ -46,6 +49,7 @@ local useDialogStyles = componentStyles("Dialog", function(theme)
 			HorizontalAlignment = Enum.HorizontalAlignment.Right,
 			Padding = UDim.new(0, theme.padding.calc(1)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
+			Wraps = true,
 		},
 	})
 end)

package/out/ui/packages/dialog/components/dialogWidth.d.ts

@@ -0,0 +1,7 @@
+/** Desktop forms stay a column. Phone uses the room instead of the fixed width. */
+export declare const DIALOG_FILL_MAX = 480;
+export declare function dialogWidth(fill: boolean | undefined, available: number, fixed: number, max?: number): number;
+/** Two small actions are wider than the fixed column, so the row wraps at every width. */
+export declare function dialogActionWrap(fixed: number, button: number, count: number, gap?: number): boolean;
+/** A title wider than the column wraps. A short title stays one line. */
+export declare function dialogTitleWrap(textWidth: number, column: number): boolean;

package/out/ui/packages/dialog/components/dialogWidth.luau

@@ -0,0 +1,35 @@
+-- Compiled with roblox-ts v3.0.0
+--* Desktop forms stay a column. Phone uses the room instead of the fixed width. 
+local DIALOG_FILL_MAX = 480
+local function dialogWidth(fill, available, fixed, max)
+	if max == nil then
+		max = DIALOG_FILL_MAX
+	end
+	if fill ~= true or available <= 0 then
+		return fixed
+	end
+	return if available < max then available else max
+end
+--* Two small actions are wider than the fixed column, so the row wraps at every width. 
+local function dialogActionWrap(fixed, button, count, gap)
+	if gap == nil then
+		gap = 0
+	end
+	if count < 2 or fixed <= 0 then
+		return false
+	end
+	return button * count + gap * (count - 1) > fixed
+end
+--* A title wider than the column wraps. A short title stays one line. 
+local function dialogTitleWrap(textWidth, column)
+	if column <= 0 then
+		return false
+	end
+	return textWidth > column
+end
+return {
+	dialogWidth = dialogWidth,
+	dialogActionWrap = dialogActionWrap,
+	dialogTitleWrap = dialogTitleWrap,
+	DIALOG_FILL_MAX = DIALOG_FILL_MAX,
+}