@rbxts/uiblox 0.1.52 → 0.2.0-alpha.0

package/out/ui/packages/virtualList/components/VirtualList.luau

@@ -0,0 +1,178 @@
+-- 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 useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local useDragScroll = TS.import(script, script.Parent.Parent.Parent, "scroll").useDragScroll
+local useVirtualListStyles = TS.import(script, script.Parent, "VirtualList.styles").default
+local _virtualWindow = TS.import(script, script.Parent, "virtualWindow")
+local ensureVisibleScroll = _virtualWindow.ensureVisibleScroll
+local itemOffset = _virtualWindow.itemOffset
+local scrollToIndexOffset = _virtualWindow.scrollToIndexOffset
+local visibleWindow = _virtualWindow.visibleWindow
+local function VirtualList(props)
+	local _binding = props
+	local items = _binding.items
+	local getKey = _binding.getKey
+	local renderItem = _binding.renderItem
+	local itemHeight = _binding.itemHeight
+	local overscan = _binding.overscan
+	if overscan == nil then
+		overscan = 2
+	end
+	local listRef = _binding.listRef
+	local empty = _binding.empty
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local children = _binding.children
+	local styles = useVirtualListStyles()
+	local frame, setFrame = useState()
+	local scrollTop, setScrollTop = useState(0)
+	local viewportHeight, setViewportHeight = useState(0)
+	local frameRef = useRef()
+	local scrollTopRef = useRef(0)
+	local viewportRef = useRef(0)
+	local drag = useDragScroll(frame)
+	local count = #items
+	local canvasHeight = math.max(0, count * itemHeight)
+	local applyScroll = function(offset)
+		local clamped = math.clamp(offset, 0, math.max(0, canvasHeight - viewportRef.current))
+		scrollTopRef.current = clamped
+		setScrollTop(clamped)
+		local current = frameRef.current
+		if current then
+			current.CanvasPosition = Vector2.new(current.CanvasPosition.X, clamped)
+		end
+	end
+	useEffect(function()
+		if not listRef then
+			return nil
+		end
+		listRef.current = {
+			scrollToIndex = function(index, align)
+				if align == nil then
+					align = "start"
+				end
+				applyScroll(scrollToIndexOffset(index, count, itemHeight, viewportRef.current, align))
+			end,
+			ensureVisible = function(index, align)
+				if align == nil then
+					align = "nearest"
+				end
+				applyScroll(ensureVisibleScroll(scrollTopRef.current, viewportRef.current, index, count, itemHeight, align))
+			end,
+			suppressClick = drag.suppressClick,
+		}
+	end)
+	useEffect(function()
+		return function()
+			if listRef then
+				listRef.current = nil
+			end
+		end
+	end, { listRef })
+	useEffect(function()
+		if not frame then
+			return nil
+		end
+		frameRef.current = frame
+		local sync = function()
+			local nextTop = frame.CanvasPosition.Y
+			local nextHeight = frame.AbsoluteSize.Y
+			scrollTopRef.current = nextTop
+			viewportRef.current = nextHeight
+			setScrollTop(nextTop)
+			setViewportHeight(nextHeight)
+		end
+		sync()
+		local connections = { frame:GetPropertyChangedSignal("CanvasPosition"):Connect(sync), frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(sync) }
+		return function()
+			for _, connection in connections do
+				connection:Disconnect()
+			end
+			if frameRef.current == frame then
+				frameRef.current = nil
+			end
+		end
+	end, { frame })
+	useEffect(function()
+		if not frame then
+			return nil
+		end
+		local max = math.max(0, canvasHeight - frame.AbsoluteSize.Y)
+		if frame.CanvasPosition.Y > max then
+			applyScroll(max)
+		end
+	end, { frame, canvasHeight })
+	local window = if itemHeight > 0 then visibleWindow(scrollTop, viewportHeight, count, itemHeight, overscan) else {
+		start = 0,
+		["end"] = -1,
+	}
+	local rows = {}
+	if count > 0 and window["end"] >= window.start then
+		do
+			local index = window.start
+			local _shouldIncrement = false
+			while true do
+				if _shouldIncrement then
+					index += 1
+				else
+					_shouldIncrement = true
+				end
+				if not (index <= window["end"]) then
+					break
+				end
+				local item = items[index + 1]
+				local _attributes = {
+					key = getKey(item, index),
+				}
+				for _k, _v in styles.item do
+					_attributes[_k] = _v
+				end
+				_attributes.Size = UDim2.new(1, 0, 0, itemHeight)
+				_attributes.Position = UDim2.fromOffset(0, itemOffset(index, itemHeight))
+				local _arg0 = React.createElement("frame", _attributes, renderItem(item, index, {
+					index = index,
+				}))
+				table.insert(rows, _arg0)
+			end
+		end
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "VirtualList"
+	end
+	_attributes.key = _condition
+	_attributes.ref = function(rbx)
+		setFrame(rbx)
+		if type(ref) == "function" then
+			ref(rbx)
+		elseif ref then
+			ref.current = rbx
+		end
+	end
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	_attributes.CanvasSize = UDim2.fromOffset(0, canvasHeight)
+	return React.createElement("scrollingframe", _attributes, if count == 0 then empty else rows, children)
+end
+local default = VirtualList
+return {
+	default = default,
+}

package/out/ui/packages/virtualList/components/VirtualList.styles.d.ts

@@ -0,0 +1,2 @@
+declare const useVirtualListStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export default useVirtualListStyles;

package/out/ui/packages/virtualList/components/VirtualList.styles.luau

@@ -0,0 +1,29 @@
+-- Compiled with roblox-ts v3.0.0
+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 useVirtualListStyles = componentStyles("VirtualList", function()
+	return createStyles({
+		root = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScrollBarThickness = 6,
+			ScrollingDirection = Enum.ScrollingDirection.Y,
+			AutomaticCanvasSize = Enum.AutomaticSize.None,
+			CanvasSize = UDim2.fromScale(0, 0),
+			ClipsDescendants = true,
+		},
+		item = {
+			Position = UDim2.fromOffset(0, 0),
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+	})
+end)
+local default = useVirtualListStyles
+return {
+	default = default,
+}

package/out/ui/packages/virtualList/components/virtualWindow.d.ts

@@ -0,0 +1,10 @@
+export type VirtualListAlign = "start" | "center" | "end" | "nearest";
+export interface VirtualWindow {
+    start: number;
+    end: number;
+}
+export declare function clampScroll(scrollTop: number, viewportHeight: number, contentHeight: number): number;
+export declare function visibleWindow(scrollTop: number, viewportHeight: number, itemCount: number, itemHeight: number, overscan?: number): VirtualWindow;
+export declare function itemOffset(index: number, itemHeight: number): number;
+export declare function ensureVisibleScroll(scrollTop: number, viewportHeight: number, index: number, itemCount: number, itemHeight: number, align?: VirtualListAlign): number;
+export declare function scrollToIndexOffset(index: number, itemCount: number, itemHeight: number, viewportHeight: number, align?: VirtualListAlign): number;

package/out/ui/packages/virtualList/components/virtualWindow.luau

@@ -0,0 +1,66 @@
+-- Compiled with roblox-ts v3.0.0
+local function clampScroll(scrollTop, viewportHeight, contentHeight)
+	local max = math.max(0, contentHeight - viewportHeight)
+	return math.clamp(scrollTop, 0, max)
+end
+local function visibleWindow(scrollTop, viewportHeight, itemCount, itemHeight, overscan)
+	if overscan == nil then
+		overscan = 2
+	end
+	if itemCount <= 0 or itemHeight <= 0 or viewportHeight < 0 then
+		return {
+			start = 0,
+			["end"] = -1,
+		}
+	end
+	local first = math.floor(scrollTop / itemHeight)
+	local last = math.floor((scrollTop + viewportHeight) / itemHeight)
+	return {
+		start = math.max(0, first - overscan),
+		["end"] = math.min(itemCount - 1, last + overscan),
+	}
+end
+local function itemOffset(index, itemHeight)
+	return index * itemHeight
+end
+local function ensureVisibleScroll(scrollTop, viewportHeight, index, itemCount, itemHeight, align)
+	if align == nil then
+		align = "nearest"
+	end
+	if itemCount <= 0 or itemHeight <= 0 or index < 0 or index >= itemCount then
+		return clampScroll(scrollTop, viewportHeight, itemCount * itemHeight)
+	end
+	local top = itemOffset(index, itemHeight)
+	local bottom = top + itemHeight
+	local contentHeight = itemCount * itemHeight
+	local visibleBottom = scrollTop + viewportHeight
+	if align == "nearest" then
+		if top < scrollTop then
+			return clampScroll(top, viewportHeight, contentHeight)
+		end
+		if bottom > visibleBottom then
+			return clampScroll(bottom - viewportHeight, viewportHeight, contentHeight)
+		end
+		return clampScroll(scrollTop, viewportHeight, contentHeight)
+	end
+	if align == "start" then
+		return clampScroll(top, viewportHeight, contentHeight)
+	end
+	if align == "end" then
+		return clampScroll(bottom - viewportHeight, viewportHeight, contentHeight)
+	end
+	return clampScroll(top + itemHeight / 2 - viewportHeight / 2, viewportHeight, contentHeight)
+end
+local function scrollToIndexOffset(index, itemCount, itemHeight, viewportHeight, align)
+	if align == nil then
+		align = "start"
+	end
+	return ensureVisibleScroll(0, viewportHeight, index, itemCount, itemHeight, if align == "nearest" then "start" else align)
+end
+return {
+	clampScroll = clampScroll,
+	visibleWindow = visibleWindow,
+	itemOffset = itemOffset,
+	ensureVisibleScroll = ensureVisibleScroll,
+	scrollToIndexOffset = scrollToIndexOffset,
+}

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

@@ -0,0 +1,2 @@
+export { default as VirtualList } from "./components/VirtualList";
+export { VirtualListProps, VirtualListHandle, VirtualListItemState, VirtualListAlign, } from "./components/VirtualList";

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

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.VirtualList = TS.import(script, script, "components", "VirtualList").default
+return exports

package/package.json

@@ -1,12 +1,15 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.1.52",
+	"version": "0.2.0-alpha.0",
 	"description": "UI Library and theming for roblox-ts projects",
-	"main": "out/init.lua",
+	"main": "out/init.luau",
+	"packageManager": "pnpm@11.3.0",
 	"scripts": {
 		"build": "rbxtsc",
 		"watch": "rbxtsc -w",
-		"prepublishOnly": "npm run build"
+		"pack:check": "node scripts/pack-check.mjs",
+		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-motion.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
+		"prepublishOnly": "pnpm build"
 	},
 	"keywords": [
 		"roblox-ts",
@@ -50,6 +53,7 @@
 		"@rbxts/react": "^17.2.1",
 		"@rbxts/react-reflex": "^0.3.4",
 		"@rbxts/react-roblox": "^17.2.1",
+		"@rbxts/reflex": "4.3.1",
 		"@rbxts/services": "^1.5.5"
 	},
 	"directories": {

package/out/theme/interfaces/palette/colors/Colors.d.ts

@@ -1,42 +0,0 @@
-export default interface Colors {
-    backgroundDefault: Color3;
-    backgroundContrast: Color3;
-    backgroundMuted: Color3;
-    backgroundUIDefault: Color3;
-    backgroundUIMuted: Color3;
-    backgroundUIContrast: Color3;
-    UIDefault: Color3;
-    UIMuted: Color3;
-    UIEmphasis: Color3;
-    textDefault: Color3;
-    textMuted: Color3;
-    textEmphasis: Color3;
-    iconDefault: Color3;
-    iconEmphasis: Color3;
-    iconOnHover: Color3;
-    systemPrimaryDefault: Color3;
-    systemPrimaryOnHover: Color3;
-    systemPrimaryContent: Color3;
-    contextualPrimaryDefault: Color3;
-    contextualPrimaryOnHover: Color3;
-    contextualPrimaryContent: Color3;
-    secondaryDefault: Color3;
-    secondaryOnHover: Color3;
-    secondaryContent: Color3;
-    divider: Color3;
-    overlay: Color3;
-    dropShadow: Color3;
-    navigationBar: Color3;
-    badge: Color3;
-    badgeContent: Color3;
-    placeholder: Color3;
-    online: Color3;
-    offline: Color3;
-    alert: Color3;
-    success: Color3;
-    accent: Color3;
-    link: Color3;
-    caution: Color3;
-    text: Color3;
-    background: Color3;
-}

package/out/theme/interfaces/palette/colors/Colors.luau

@@ -1,2 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-return nil

package/out/theme/styles/types/ConditionalStylesMap.d.ts

@@ -1,2 +0,0 @@
-import { WriteableStyle } from "./WriteableStyle";
-export type ConditionalStylesMap<T extends Instance> = Map<WriteableStyle<T> | undefined, boolean>;

package/out/theme/styles/types/ConditionalStylesMap.luau

@@ -1,2 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-return nil