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

package/out/ui/packages/rating/components/ratingCommit.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* Clicks commit only when the rating is editable and a handler was passed. 
+local function ratingCommit(readOnly, onChange, landed)
+	if readOnly == true or onChange == nil then
+		return nil
+	end
+	return landed
+end
+return {
+	ratingCommit = ratingCommit,
+}

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

@@ -0,0 +1,2 @@
+export { DragRect, hitRect, isReorderMove, isReorderPress, isReorderRelease, passedDragThreshold, placeItem, REORDER_THRESHOLD, transferId } from "./reorder";
+export { ReorderDragHandle, ReorderDragState, useReorderDrag } from "./useReorderDrag";

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

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+local _reorder = TS.import(script, script, "reorder")
+exports.hitRect = _reorder.hitRect
+exports.isReorderMove = _reorder.isReorderMove
+exports.isReorderPress = _reorder.isReorderPress
+exports.isReorderRelease = _reorder.isReorderRelease
+exports.passedDragThreshold = _reorder.passedDragThreshold
+exports.placeItem = _reorder.placeItem
+exports.REORDER_THRESHOLD = _reorder.REORDER_THRESHOLD
+exports.transferId = _reorder.transferId
+exports.useReorderDrag = TS.import(script, script, "useReorderDrag").useReorderDrag
+return exports

package/out/ui/packages/reorder/reorder.d.ts

@@ -0,0 +1,24 @@
+export declare const REORDER_THRESHOLD = 6;
+export interface DragRect {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function isReorderPress(kind: Enum.UserInputType): boolean;
+export declare function isReorderMove(kind: Enum.UserInputType): boolean;
+export declare function isReorderRelease(kind: Enum.UserInputType): boolean;
+export declare function passedDragThreshold(startX: number, startY: number, x: number, y: number, threshold?: number): boolean;
+/** Smallest rect containing the point wins, so a card beats the column behind it. */
+export declare function hitRect(rects: readonly DragRect[], x: number, y: number): string | undefined;
+/** Final index after the move. Out-of-range or a no-op returns a copy. */
+export declare function placeItem<T extends defined>(items: readonly T[], from: number, to: number): T[];
+/**
+ * Insert `id` at `index` in `dest` and remove it from `source`.
+ * The same list uses placeItem, where index is the final index.
+ */
+export declare function transferId(source: readonly string[], dest: readonly string[], id: string, index: number): {
+    source: string[];
+    dest: string[];
+};

package/out/ui/packages/reorder/reorder.luau

@@ -0,0 +1,178 @@
+-- Compiled with roblox-ts v3.0.0
+local REORDER_THRESHOLD = 6
+local function isReorderPress(kind)
+	return kind == Enum.UserInputType.MouseButton1 or kind == Enum.UserInputType.Touch
+end
+local function isReorderMove(kind)
+	return kind == Enum.UserInputType.MouseMovement or kind == Enum.UserInputType.Touch
+end
+local function isReorderRelease(kind)
+	return kind == Enum.UserInputType.MouseButton1 or kind == Enum.UserInputType.Touch
+end
+local function passedDragThreshold(startX, startY, x, y, threshold)
+	if threshold == nil then
+		threshold = REORDER_THRESHOLD
+	end
+	local dx = x - startX
+	local dy = y - startY
+	return dx * dx + dy * dy >= threshold * threshold
+end
+--* Smallest rect containing the point wins, so a card beats the column behind it. 
+local function hitRect(rects, x, y)
+	local best
+	local bestArea = math.huge
+	for _, rect in rects do
+		if x < rect.x or y < rect.y or x > rect.x + rect.width or y > rect.y + rect.height then
+			continue
+		end
+		local area = rect.width * rect.height
+		if area < bestArea then
+			best = rect
+			bestArea = area
+		end
+	end
+	local _result = best
+	if _result ~= nil then
+		_result = _result.id
+	end
+	return _result
+end
+--* Final index after the move. Out-of-range or a no-op returns a copy. 
+local function placeItem(items, from, to)
+	local listed = {}
+	for _, item in items do
+		table.insert(listed, item)
+	end
+	local count = #listed
+	if from < 0 or to < 0 or from >= count or to >= count or from == to then
+		return listed
+	end
+	local moved = listed[from + 1]
+	if from < to then
+		do
+			local index = from
+			local _shouldIncrement = false
+			while true do
+				if _shouldIncrement then
+					index += 1
+				else
+					_shouldIncrement = true
+				end
+				if not (index < to) then
+					break
+				end
+				listed[index + 1] = listed[index + 2]
+			end
+		end
+	else
+		do
+			local index = from
+			local _shouldIncrement = false
+			while true do
+				if _shouldIncrement then
+					index -= 1
+				else
+					_shouldIncrement = true
+				end
+				if not (index > to) then
+					break
+				end
+				listed[index + 1] = listed[index]
+			end
+		end
+	end
+	listed[to + 1] = moved
+	return listed
+end
+local function indexOfId(ids, id)
+	for index = 0, #ids - 1 do
+		if ids[index + 1] == id then
+			return index
+		end
+	end
+	return -1
+end
+--[[
+	*
+	 * Insert `id` at `index` in `dest` and remove it from `source`.
+	 * The same list uses placeItem, where index is the final index.
+	 
+]]
+local function transferId(source, dest, id, index)
+	if source == dest then
+		local placed = placeItem(source, indexOfId(source, id), math.clamp(index, 0, math.max(0, #source - 1)))
+		return {
+			source = placed,
+			dest = placed,
+		}
+	end
+	local nextSource = {}
+	local found = false
+	for _, item in source do
+		if item == id then
+			found = true
+		else
+			table.insert(nextSource, item)
+		end
+	end
+	local nextDest = {}
+	for _, item in dest do
+		table.insert(nextDest, item)
+	end
+	if not found then
+		return {
+			source = nextSource,
+			dest = nextDest,
+		}
+	end
+	local at = math.clamp(math.floor(index), 0, #nextDest)
+	local inserted = {}
+	do
+		local cursor = 0
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				cursor += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (cursor < at) then
+				break
+			end
+			local _arg0 = nextDest[cursor + 1]
+			table.insert(inserted, _arg0)
+		end
+	end
+	local _id = id
+	table.insert(inserted, _id)
+	do
+		local cursor = at
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				cursor += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (cursor < #nextDest) then
+				break
+			end
+			local _arg0 = nextDest[cursor + 1]
+			table.insert(inserted, _arg0)
+		end
+	end
+	return {
+		source = nextSource,
+		dest = inserted,
+	}
+end
+return {
+	isReorderPress = isReorderPress,
+	isReorderMove = isReorderMove,
+	isReorderRelease = isReorderRelease,
+	passedDragThreshold = passedDragThreshold,
+	hitRect = hitRect,
+	placeItem = placeItem,
+	transferId = transferId,
+	REORDER_THRESHOLD = REORDER_THRESHOLD,
+}

package/out/ui/packages/reorder/useReorderDrag.d.ts

@@ -0,0 +1,15 @@
+import { DragRect } from "./reorder";
+export interface ReorderDragState {
+    active: boolean;
+    id?: string;
+    overId?: string;
+    x: number;
+    y: number;
+}
+export interface ReorderDragHandle {
+    drag: ReorderDragState;
+    begin: (id: string, input: InputObject) => boolean;
+    cancel: () => void;
+    suppressClick: () => boolean;
+}
+export declare function useReorderDrag(onDrop: (fromId: string, overId?: string) => void, getRects: () => readonly DragRect[]): ReorderDragHandle;

package/out/ui/packages/reorder/useReorderDrag.luau

@@ -0,0 +1,129 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+local _reorder = TS.import(script, script.Parent, "reorder")
+local hitRect = _reorder.hitRect
+local isReorderMove = _reorder.isReorderMove
+local isReorderPress = _reorder.isReorderPress
+local isReorderRelease = _reorder.isReorderRelease
+local passedDragThreshold = _reorder.passedDragThreshold
+local rest = function()
+	return {
+		active = false,
+		x = 0,
+		y = 0,
+	}
+end
+local function useReorderDrag(onDrop, getRects)
+	local drag, setDrag = useState(rest())
+	local tracking = useRef({
+		down = false,
+		active = false,
+		x = 0,
+		y = 0,
+		startX = 0,
+		startY = 0,
+	})
+	local onDropRef = useRef(onDrop)
+	local rectsRef = useRef(getRects)
+	local took = useRef(false)
+	onDropRef.current = onDrop
+	rectsRef.current = getRects
+	local clear = function(drop)
+		local current = tracking.current
+		tracking.current = {
+			down = false,
+			active = false,
+			x = 0,
+			y = 0,
+			startX = 0,
+			startY = 0,
+		}
+		setDrag(rest())
+		if drop and current.active and current.id ~= nil then
+			took.current = true
+			onDropRef.current(current.id, current.overId)
+		end
+	end
+	useEffect(function()
+		local changed = UserInputService.InputChanged:Connect(function(input)
+			local current = tracking.current
+			if not current.down or not isReorderMove(input.UserInputType) then
+				return nil
+			end
+			local x = input.Position.X
+			local y = input.Position.Y
+			local active = current.active or passedDragThreshold(current.startX, current.startY, x, y)
+			local overId = if active then hitRect(rectsRef.current(), x, y) else nil
+			local _object = table.clone(current)
+			setmetatable(_object, nil)
+			_object.active = active
+			_object.x = x
+			_object.y = y
+			_object.overId = overId
+			tracking.current = _object
+			if active then
+				setDrag({
+					active = true,
+					id = current.id,
+					overId = overId,
+					x = x,
+					y = y,
+				})
+			end
+		end)
+		local ended = UserInputService.InputEnded:Connect(function(input)
+			if not tracking.current.down or not isReorderRelease(input.UserInputType) then
+				return nil
+			end
+			clear(true)
+		end)
+		local began = UserInputService.InputBegan:Connect(function(input)
+			if input.KeyCode == Enum.KeyCode.Escape then
+				clear(false)
+			end
+		end)
+		return function()
+			changed:Disconnect()
+			ended:Disconnect()
+			began:Disconnect()
+		end
+	end, {})
+	return {
+		drag = drag,
+		begin = function(id, input)
+			if not isReorderPress(input.UserInputType) then
+				return false
+			end
+			local x = input.Position.X
+			local y = input.Position.Y
+			tracking.current = {
+				down = true,
+				active = false,
+				id = id,
+				x = x,
+				y = y,
+				startX = x,
+				startY = y,
+			}
+			return true
+		end,
+		cancel = function()
+			return clear(false)
+		end,
+		suppressClick = function()
+			if not took.current then
+				return false
+			end
+			took.current = false
+			return true
+		end,
+	}
+end
+return {
+	useReorderDrag = useReorderDrag,
+}

package/out/ui/packages/scroll/components/ScrollView.luau

@@ -1,8 +1,30 @@
 -- 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 resolveSx = _theme.resolveSx
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local function isPadKey(key)
+	return key == "p" or key == "px" or key == "py" or key == "pt" or key == "pr" or key == "pb" or key == "pl" or key == "padding"
+end
+--* Padding on a scrolling frame offsets scale-sized children without shrinking them. 
+local function withoutPad(sx)
+	if sx == nil then
+		return nil
+	end
+	local rest = {}
+	local kept = false
+	for key, value in pairs(sx) do
+		local name = tostring(key)
+		if isPadKey(name) then
+			continue
+		end
+		rest[name] = value
+		kept = true
+	end
+	return if kept then rest else nil
+end
 local function ScrollView(props)
 	local _binding = props
 	local children = _binding.children
@@ -22,19 +44,66 @@ local function ScrollView(props)
 		ScrollBarThickness = theme.spacing.calc(0.5),
 		ScrollBarImageColor3 = theme.palette.text.secondary,
 	}
+	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 = left + right + top + bottom > 0
 	local _attributes = {
 		tag = "scrollingframe",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "ScrollView"
+	local _condition_4 = id
+	if not (_condition_4 ~= 0 and _condition_4 == _condition_4 and _condition_4 ~= "" and _condition_4) then
+		_condition_4 = "ScrollView"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_4
 	_attributes.hostRef = ref
 	_attributes.base = root
 	_attributes.className = className
-	_attributes.sx = sx
-	return React.createElement(SxHost, _attributes, children)
+	_attributes.sx = withoutPad(sx)
+	return React.createElement(SxHost, _attributes, if inset then (React.createElement("frame", {
+		key = "Pad",
+		Size = UDim2.new(1, -(left + right), 0, 0),
+		Position = UDim2.new(0, left, 0, top),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}, React.createElement("uipadding", {
+		PaddingBottom = UDim.new(0, bottom),
+	}), children)) else children)
 end
 local default = ScrollView
 return {

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")
@@ -37,6 +38,7 @@ 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 selectWidth = TS.import(script, script.Parent, "selectWidth").selectWidth
 local stepChoice = TS.import(script, script.Parent, "stepChoice").stepChoice
 local function Select(props)
 	local _binding = props
@@ -70,7 +72,8 @@ local function Select(props)
 	})
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
-	local row = controlMetrics(theme.density, size).height
+	local metrics = controlMetrics(theme.density, size)
+	local row = metrics.height
 	local active = canActivate(disabled, loading)
 	local anchor, setAnchor = useState()
 	local open, setOpen = useState(defaultOpen == true and not loading)
@@ -104,6 +107,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 = theme.padding.calc(1.5) * 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 = {}
@@ -366,6 +382,7 @@ local function Select(props)
 		_condition_3 = (React.createElement(Popup, {
 			anchor = anchor,
 			preferredHeight = menuHeight,
+			preferredWidth = popupWidth,
 			onDismiss = close,
 			onInput = function(input)
 				return onKey(input, true)

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

@@ -4,6 +4,7 @@ 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 useSelectStyles = componentStyles("Select", function(theme, _param)
 	local size = _param.size
 	local metrics = controlMetrics(theme.density, size)
@@ -91,11 +92,7 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 			Color = theme.palette.border,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
-		focusStroke = {
-			Color = theme.palette.focus,
-			Thickness = 2,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-		},
+		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,
+}

package/out/ui/packages/shadow/components/Shadow.luau

@@ -77,10 +77,22 @@ local function Shadow(props)
 	end
 	_attributes_1.Size = blobSize
 	_attributes_1.ZIndex = zIndex
-	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, cornerRadius ~= nil and React.createElement("uicorner", {
+	return React.createElement(SxHost, _attributes, React.createElement("scrollingframe", {
+		key = "Bounds",
+		Size = UDim2.fromOffset(0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		ScrollBarThickness = 0,
+		ScrollingEnabled = false,
+		AutomaticCanvasSize = Enum.AutomaticSize.None,
+		CanvasSize = UDim2.fromOffset(0, 0),
+		ClipsDescendants = false,
+		Active = false,
+		Selectable = false,
+	}, React.createElement("frame", _attributes_1, cornerRadius ~= nil and React.createElement("uicorner", {
 		key = "Corner",
 		CornerRadius = cornerRadius,
-	})))
+	}))))
 end
 local default = Shadow
 return {

package/out/ui/packages/slider/components/RangeSlider.d.ts

@@ -0,0 +1,16 @@
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
+import { SliderColor } from "./Slider.styles";
+import { RangeValue } from "./rangeValue";
+export interface RangeSliderProps {
+    value: RangeValue;
+    onChange: (value: RangeValue) => void;
+    onCommit?: (value: RangeValue) => void;
+    min: number;
+    max: number;
+    step?: number;
+    disabled?: boolean;
+    size?: ControlSize;
+    color?: SliderColor;
+}
+declare function RangeSlider(props: CustomizedProps<Frame, RangeSliderProps>): JSX.Element;
+export default RangeSlider;