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

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

@@ -3,14 +3,16 @@ local TS = _G[script]
 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 SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useShadowStyles = TS.import(script, script.Parent, "Shadow.styles").default
+local ORIGIN = UDim2.fromOffset(0, 0)
+local ZERO_ANCHOR = Vector2.new(0, 0)
 local function Shadow(props)
 	local _binding = useShadowStyles()
 	local container = _binding.container
 	local blob = _binding.blob
-	local parent, setParent = useState(nil)
 	local cornerRadius, setCornerRadius = useState()
 	local blobSize, setBlobSize = useState(UDim2.fromOffset(0, 0))
 	local _binding_1 = props
@@ -24,31 +26,189 @@ local function Shadow(props)
 	end
 	local defaultZIndex = _condition
 	local zIndex, setZIndex = useState(defaultZIndex)
-	useEffect(function()
-		if not parent then
+	local alive = useRef(true)
+	local gen = useRef(0)
+	local shadowRef = useRef()
+	local wrapRef = useRef()
+	local faceRef = useRef()
+	local conns = useRef({})
+	local disconnect = function()
+		for _, conn in conns.current do
+			conn:Disconnect()
+		end
+		conns.current = {}
+	end
+	local follow = function(face)
+		local wrap = wrapRef.current
+		if not wrap or face.Parent ~= wrap then
 			return nil
 		end
-		local _cornerRadius = parent:FindFirstChildOfClass("UICorner")
-		if _cornerRadius ~= nil then
-			_cornerRadius = _cornerRadius.CornerRadius
+		if face.Position ~= ORIGIN then
+			wrap.Position = face.Position
+			face.Position = ORIGIN
 		end
-		local cornerRadius = _cornerRadius
-		setCornerRadius(cornerRadius)
-		local _condition_1 = parent.ZIndex
-		if _condition_1 == nil then
-			_condition_1 = defaultZIndex
+		if face.AnchorPoint ~= ZERO_ANCHOR then
+			wrap.AnchorPoint = face.AnchorPoint
+			face.AnchorPoint = ZERO_ANCHOR
 		end
-		setZIndex(_condition_1 - 1)
-		parent.ClipsDescendants = false
+		wrap.Size = face.Size
+		wrap.AutomaticSize = face.AutomaticSize
+		wrap.LayoutOrder = face.LayoutOrder
+		wrap.ZIndex = face.ZIndex
+		wrap.Visible = face.Visible
+		local size = UDim2.fromOffset(face.AbsoluteSize.X, face.AbsoluteSize.Y)
+		setBlobSize(function(prev)
+			return if prev.X.Offset == size.X.Offset and prev.Y.Offset == size.Y.Offset then prev else size
+		end)
+		local _radius = face:FindFirstChildOfClass("UICorner")
+		if _radius ~= nil then
+			_radius = _radius.CornerRadius
+		end
+		local radius = _radius
+		setCornerRadius(function(prev)
+			if radius == nil then
+				return if prev == nil then prev else nil
+			end
+			if prev ~= nil and prev.Offset == radius.Offset and prev.Scale == radius.Scale then
+				return prev
+			end
+			return radius
+		end)
+		setZIndex(face.ZIndex - 1)
+	end
+	local schedule
+	local bind = function(face)
+		disconnect()
 		local sync = function()
-			setBlobSize(UDim2.fromOffset(parent.AbsoluteSize.X, parent.AbsoluteSize.Y))
+			return follow(face)
 		end
 		sync()
-		local conn = parent:GetPropertyChangedSignal("AbsoluteSize"):Connect(sync)
+		local watch = { "AbsoluteSize", "Size", "AutomaticSize", "Position", "AnchorPoint", "LayoutOrder", "ZIndex", "Visible" }
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#watch)
+		local _callback = function(name)
+			return face:GetPropertyChangedSignal(name):Connect(sync)
+		end
+		for _k, _v in watch do
+			_newValue[_k] = _callback(_v, _k - 1, watch)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		conns.current = _newValue
+		local _current = conns.current
+		local _arg0 = face.AncestryChanged:Connect(function()
+			local shadow = shadowRef.current
+			if shadow then
+				schedule(shadow)
+			end
+		end)
+		table.insert(_current, _arg0)
+	end
+	local lift = function(shadow)
+		if not alive.current then
+			return nil
+		end
+		local parent = shadow.Parent
+		if not parent or not parent:IsA("GuiObject") then
+			return nil
+		end
+		local existing = wrapRef.current
+		if existing and parent == existing then
+			local face = faceRef.current
+			if not face or face.Parent == existing then
+				return nil
+			end
+			if face.Position ~= ORIGIN then
+				existing.Position = face.Position
+				face.Position = ORIGIN
+			end
+			if face.AnchorPoint ~= ZERO_ANCHOR then
+				existing.AnchorPoint = face.AnchorPoint
+				face.AnchorPoint = ZERO_ANCHOR
+			end
+			shadow.Parent = existing
+			face.Parent = existing
+			return nil
+		end
+		local face = parent
+		local wrapped = existing ~= nil and face.Parent == existing
+		local holder = if wrapped then existing.Parent else face.Parent
+		if not holder then
+			return nil
+		end
+		disconnect()
+		local wrap = existing or Instance.new("Frame")
+		if existing == nil then
+			wrap.Name = "ShadowWrap"
+			wrap.BackgroundTransparency = 1
+			wrap.BorderSizePixel = 0
+			wrap.ClipsDescendants = false
+			wrapRef.current = wrap
+		end
+		wrap.Size = face.Size
+		wrap.AutomaticSize = face.AutomaticSize
+		wrap.LayoutOrder = face.LayoutOrder
+		wrap.ZIndex = face.ZIndex
+		wrap.Visible = face.Visible
+		if not wrapped then
+			wrap.Position = face.Position
+			wrap.AnchorPoint = face.AnchorPoint
+			-- Shadow first, surface next, so the face paints over the blob.
+			shadow.Parent = wrap
+			face.Parent = wrap
+			face.Position = ORIGIN
+			face.AnchorPoint = ZERO_ANCHOR
+			wrap.Parent = holder
+		else
+			shadow.Parent = wrap
+		end
+		faceRef.current = face
+		bind(face)
+	end
+	schedule = function(shadow)
+		if not alive.current then
+			return nil
+		end
+		local wrap = wrapRef.current
+		local face = faceRef.current
+		if wrap and shadow.Parent == wrap and face and face.Parent == wrap then
+			return nil
+		end
+		gen.current += 1
+		local token = gen.current
+		task.defer(function()
+			if not alive.current or gen.current ~= token then
+				return nil
+			end
+			lift(shadow)
+		end)
+	end
+	useEffect(function()
+		local shadow = shadowRef.current
+		if shadow then
+			schedule(shadow)
+		end
 		return function()
-			return conn:Disconnect()
+			alive.current = false
+			gen.current += 1
+			disconnect()
+			local wrap = wrapRef.current
+			local face = faceRef.current
+			local host = shadowRef.current
+			wrapRef.current = nil
+			if wrap and face and face.Parent == wrap then
+				face.Position = wrap.Position
+				face.AnchorPoint = wrap.AnchorPoint
+				if host and host.Parent == wrap then
+					host.Parent = face
+				end
+				face.Parent = wrap.Parent
+			end
+			local _result = wrap
+			if _result ~= nil then
+				_result:Destroy()
+			end
 		end
-	end, { parent })
+	end, {})
 	local _attributes = {
 		tag = "frame",
 	}
@@ -57,7 +217,16 @@ local function Shadow(props)
 		_condition_1 = "Shadow"
 	end
 	_attributes.key = _condition_1
-	_attributes.hostRef = ref
+	_attributes.hostRef = function(instance)
+		shadowRef.current = instance
+		if type(ref) == "function" then
+			ref(instance)
+			return nil
+		end
+		if ref ~= nil then
+			ref.current = instance
+		end
+	end
 	_attributes.base = container
 	_attributes.className = className
 	_attributes.sx = sx
@@ -65,7 +234,7 @@ local function Shadow(props)
 	_attributes.Event = {
 		AncestryChanged = function(rbx, parent)
 			if parent:IsA("GuiObject") and rbx.Parent == parent then
-				setParent(parent)
+				schedule(rbx)
 			end
 		end,
 	}
@@ -77,10 +246,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/sidebar/components/Sidebar.styles.luau

@@ -28,6 +28,7 @@ local useSidebarStyles = componentStyles("Sidebar", function(theme, props)
 			AnchorPoint = Vector2.new(0.5, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
+			ClipsDescendants = true,
 			ZIndex = 5100,
 		},
 	})

package/out/ui/packages/skeleton/components/Skeleton.luau

@@ -69,6 +69,8 @@ local function SkeletonBlock(props)
 	_attributes.base = {
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
+		AutomaticSize = Enum.AutomaticSize.None,
+		ClipsDescendants = true,
 	}
 	_attributes.className = className
 	_attributes.sx = sx
@@ -179,6 +181,8 @@ local function Skeleton(props)
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.Size = UDim2.new(0, width, 0, blockHeight)
+	_attributes.AutomaticSize = Enum.AutomaticSize.None
+	_attributes.ClipsDescendants = true
 	_attributes.BackgroundTransparency = 1
 	_attributes.BorderSizePixel = 0
 	local _exp = React.createElement("uilistlayout", {

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;

package/out/ui/packages/slider/components/RangeSlider.luau

@@ -0,0 +1,232 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useRef = _react.useRef
+local useState = _react.useState
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlFade = _theme.controlFade
+local cx = _theme.cx
+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 commitNumber = TS.import(script, script.Parent.Parent.Parent, "numberInput", "components", "numberValue").commitNumber
+local _sliderNudge = TS.import(script, script.Parent, "sliderNudge")
+local isSliderDrag = _sliderNudge.isSliderDrag
+local isSliderMove = _sliderNudge.isSliderMove
+local nudgeDelta = _sliderNudge.nudgeDelta
+local nudgeValue = _sliderNudge.nudgeValue
+local useRangeSliderStyles = TS.import(script, script.Parent, "RangeSlider.styles").default
+local _rangeValue = TS.import(script, script.Parent, "rangeValue")
+local orderRange = _rangeValue.orderRange
+local rangeMove = _rangeValue.rangeMove
+local rangeRatios = _rangeValue.rangeRatios
+local rangeThumb = _rangeValue.rangeThumb
+local function RangeSlider(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local onCommit = _binding.onCommit
+	local min = _binding.min
+	local max = _binding.max
+	local step = _binding.step
+	local disabled = _binding.disabled
+	local size = _binding.size
+	local color = _binding.color
+	if color == nil then
+		color = "primary"
+	end
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useRangeSliderStyles({
+		size = size,
+		color = color,
+	})
+	local ordered = orderRange(value.start, value.finish)
+	local ratios = rangeRatios(ordered.start, ordered.finish, min, max)
+	local active = canActivate(disabled)
+	local focused, setFocused = useState(false)
+	local pressed, setPressed = useState(false)
+	local dragging = useRef(false)
+	local thumb = useRef("low")
+	local latest = useRef(ordered)
+	latest.current = ordered
+	local faded = disabled == true
+	local showFocus = focused and active
+	local pointerValue = function(rbx, x)
+		local width = rbx.AbsoluteSize.X
+		if width <= 0 then
+			return nil
+		end
+		return commitNumber(min + ((x - rbx.AbsolutePosition.X) / width) * (max - min), min, max, step)
+	end
+	local publish = function(landed, commit)
+		thumb.current = landed.thumb
+		if landed.start == latest.current.start and landed.finish == latest.current.finish then
+			return nil
+		end
+		latest.current = {
+			start = landed.start,
+			finish = landed.finish,
+		}
+		onChange(latest.current)
+		if commit and onCommit then
+			onCommit(latest.current)
+		end
+	end
+	local update = function(rbx, x)
+		local landed = pointerValue(rbx, x)
+		if landed == nil then
+			return nil
+		end
+		publish(rangeMove(thumb.current, landed, latest.current.start, latest.current.finish), false)
+	end
+	local finish = function()
+		if not dragging.current then
+			return nil
+		end
+		dragging.current = false
+		setPressed(false)
+		if onCommit then
+			onCommit(latest.current)
+		end
+	end
+	local nudge = function(direction)
+		if not active then
+			return nil
+		end
+		local current = if thumb.current == "low" then latest.current.start else latest.current.finish
+		local nudged = nudgeValue(current, min, max, step, direction)
+		if nudged == nil then
+			return nil
+		end
+		publish(rangeMove(thumb.current, nudged, latest.current.start, latest.current.finish), true)
+	end
+	local knobLook = function(ratio, which)
+		return cx(styles.knob, {
+			Position = UDim2.fromScale(ratio, 0.5),
+			BackgroundTransparency = if faded then controlFade else 0,
+			ZIndex = if which == thumb.current then 3 else 2,
+		})
+	end
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "RangeSlider"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+		pressed = pressed,
+		focused = focused,
+	}
+	_attributes.Active = active
+	_attributes.Selectable = active
+	_attributes.Event = {
+		InputBegan = function(rbx, input)
+			if not active then
+				return nil
+			end
+			local direction = nudgeDelta(input.KeyCode.Name)
+			if direction ~= nil then
+				nudge(direction)
+				return nil
+			end
+			if not isSliderDrag(input.UserInputType.Name) then
+				return nil
+			end
+			local landed = pointerValue(rbx, input.Position.X)
+			if landed ~= nil then
+				thumb.current = rangeThumb(landed, latest.current.start, latest.current.finish)
+			end
+			dragging.current = true
+			setPressed(true)
+			update(rbx, input.Position.X)
+		end,
+		InputChanged = function(rbx, input)
+			if dragging.current and isSliderMove(input.UserInputType.Name) then
+				update(rbx, input.Position.X)
+			end
+		end,
+		InputEnded = function(_rbx, input)
+			if isSliderDrag(input.UserInputType.Name) then
+				finish()
+			end
+		end,
+		MouseLeave = function()
+			return finish()
+		end,
+		SelectionGained = function()
+			return setFocused(true)
+		end,
+		SelectionLost = function()
+			return setFocused(false)
+		end,
+	}
+	local _attributes_1 = {
+		key = "Track",
+	}
+	for _k, _v in styles.track do
+		_attributes_1[_k] = _v
+	end
+	_attributes_1.BackgroundTransparency = if faded then controlFade else 0.35
+	local _attributes_2 = table.clone(styles.corner)
+	setmetatable(_attributes_2, nil)
+	local _exp = React.createElement("uicorner", _attributes_2)
+	local _attributes_3 = {
+		key = "Fill",
+	}
+	for _k, _v in cx(styles.fill, {
+		Position = UDim2.fromScale(ratios.low, 0),
+		Size = UDim2.fromScale(ratios.high - ratios.low, 1),
+		BackgroundTransparency = if faded then controlFade elseif pressed then 0.1 else 0,
+	}) do
+		_attributes_3[_k] = _v
+	end
+	local _attributes_4 = table.clone(styles.corner)
+	setmetatable(_attributes_4, nil)
+	local _exp_1 = React.createElement("frame", _attributes_3, React.createElement("uicorner", _attributes_4))
+	local _attributes_5 = {
+		key = "Low",
+	}
+	for _k, _v in knobLook(ratios.low, "low") do
+		_attributes_5[_k] = _v
+	end
+	local _attributes_6 = table.clone(styles.corner)
+	setmetatable(_attributes_6, nil)
+	local _exp_2 = React.createElement("uicorner", _attributes_6)
+	local _condition_1 = showFocus and thumb.current == "low"
+	if _condition_1 then
+		local _attributes_7 = table.clone(styles.stroke)
+		setmetatable(_attributes_7, nil)
+		_condition_1 = React.createElement("uistroke", _attributes_7)
+	end
+	local _exp_3 = React.createElement("frame", _attributes_5, _exp_2, _condition_1)
+	local _attributes_7 = {
+		key = "High",
+	}
+	for _k, _v in knobLook(ratios.high, "high") do
+		_attributes_7[_k] = _v
+	end
+	local _attributes_8 = table.clone(styles.corner)
+	setmetatable(_attributes_8, nil)
+	local _exp_4 = React.createElement("uicorner", _attributes_8)
+	local _condition_2 = showFocus and thumb.current == "high"
+	if _condition_2 then
+		local _attributes_9 = table.clone(styles.stroke)
+		setmetatable(_attributes_9, nil)
+		_condition_2 = React.createElement("uistroke", _attributes_9)
+	end
+	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, _exp, _exp_1, _exp_3, React.createElement("frame", _attributes_7, _exp_4, _condition_2)))
+end
+local default = RangeSlider
+return {
+	default = default,
+}

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

@@ -0,0 +1,7 @@
+import { ControlSize } from "../../../../theme/index";
+import { SliderColor } from "./Slider.styles";
+declare const useRangeSliderStyles: (props: {
+    size?: ControlSize;
+    color?: SliderColor;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useRangeSliderStyles;

package/out/ui/packages/slider/components/RangeSlider.styles.luau

@@ -0,0 +1,48 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
+local createStyles = _theme.createStyles
+local focusRing = _theme.focusRing
+local useRangeSliderStyles = componentStyles("RangeSlider", function(theme, _param)
+	local size = _param.size
+	local color = _param.color
+	if color == nil then
+		color = "primary"
+	end
+	local metrics = controlMetrics(theme.density, size)
+	local tone = if color == "accent" then theme.palette.accent.main else theme.palette.primary.main
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, metrics.sliderHeight),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		track = {
+			Size = UDim2.new(1, 0, 0, metrics.sliderTrack),
+			Position = UDim2.fromScale(0, 0.5),
+			AnchorPoint = Vector2.new(0, 0.5),
+			BackgroundColor3 = theme.palette.action.disabled,
+			BorderSizePixel = 0,
+		},
+		fill = {
+			BackgroundColor3 = tone,
+			BorderSizePixel = 0,
+		},
+		knob = {
+			Size = UDim2.fromOffset(metrics.sliderKnob, metrics.sliderKnob),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundColor3 = theme.palette.text.primary,
+			BorderSizePixel = 0,
+		},
+		corner = {
+			CornerRadius = UDim.new(1, 0),
+		},
+		stroke = focusRing(theme.palette.focus),
+	})
+end)
+local default = useRangeSliderStyles
+return {
+	default = default,
+}

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

@@ -10,6 +10,7 @@ export interface SliderProps {
     disabled?: boolean;
     size?: ControlSize;
     marks?: boolean | ReadonlyArray<number>;
+    format?: (value: number) => string;
     color?: SliderColor;
 }
 declare function Slider(props: CustomizedProps<Frame, SliderProps>): JSX.Element;