@rbxts/react-clean-ui 1.1.0 → 1.2.4

package/out/Components/Layout/Pagination.luau

@@ -0,0 +1,400 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local ColorHelper = _Helpers.ColorHelper
+local CssHelper = _Helpers.CssHelper
+local SpacingHelper = _Helpers.SpacingHelper
+local TypographyHelper = _Helpers.TypographyHelper
+local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
+local BoxShadow = _Decorator.BoxShadow
+local Corners = _Decorator.Corners
+local Padding = _Decorator.Padding
+local _HoverButton = TS.import(script, script.Parent.Parent, "Input", "HoverButton")
+local HoverButton = _HoverButton.HoverButton
+local HoverButtonContext = _HoverButton.HoverButtonContext
+local Icon = TS.import(script, script.Parent.Parent, "Surface", "Icon").Icon
+local Text = TS.import(script, script.Parent.Parent, "Typography").Text
+local Container = TS.import(script, script.Parent, "Container").Container
+local HStack = TS.import(script, script.Parent, "HStack").HStack
+local function computePaginationItems(page, totalPages, siblingCount)
+	local pageCount = math.max(0, math.floor(totalPages))
+	if pageCount == 0 then
+		return {}
+	end
+	local currentPage = math.clamp(math.floor(page), 1, pageCount)
+	local siblings = math.max(0, math.floor(siblingCount))
+	local visiblePageCount = siblings * 2 + 5
+	if pageCount <= visiblePageCount then
+		local allPages = {}
+		do
+			local value = 1
+			local _shouldIncrement = false
+			while true do
+				if _shouldIncrement then
+					value += 1
+				else
+					_shouldIncrement = true
+				end
+				if not (value <= pageCount) then
+					break
+				end
+				local _value = value
+				table.insert(allPages, _value)
+			end
+		end
+		return allPages
+	end
+	local leftSiblingIndex = math.max(currentPage - siblings, 1)
+	local rightSiblingIndex = math.min(currentPage + siblings, pageCount)
+	local showLeftEllipsis = leftSiblingIndex > 2
+	local showRightEllipsis = rightSiblingIndex < pageCount - 1
+	if not showLeftEllipsis and showRightEllipsis then
+		local leftItemCount = siblings * 2 + 3
+		local items = {}
+		do
+			local value = 1
+			local _shouldIncrement = false
+			while true do
+				if _shouldIncrement then
+					value += 1
+				else
+					_shouldIncrement = true
+				end
+				if not (value <= leftItemCount) then
+					break
+				end
+				local _value = value
+				table.insert(items, _value)
+			end
+		end
+		table.insert(items, "ellipsis")
+		table.insert(items, pageCount)
+		return items
+	end
+	if showLeftEllipsis and not showRightEllipsis then
+		local rightItemCount = siblings * 2 + 3
+		local items = { 1, "ellipsis" }
+		do
+			local value = pageCount - rightItemCount + 1
+			local _shouldIncrement = false
+			while true do
+				if _shouldIncrement then
+					value += 1
+				else
+					_shouldIncrement = true
+				end
+				if not (value <= pageCount) then
+					break
+				end
+				local _value = value
+				table.insert(items, _value)
+			end
+		end
+		return items
+	end
+	local items = { 1, "ellipsis" }
+	do
+		local value = leftSiblingIndex
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				value += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (value <= rightSiblingIndex) then
+				break
+			end
+			local _value = value
+			table.insert(items, _value)
+		end
+	end
+	table.insert(items, "ellipsis")
+	table.insert(items, pageCount)
+	return items
+end
+local PaginationContext = React.createContext(nil)
+local function usePagination()
+	local context = React.useContext(PaginationContext)
+	if context == nil then
+		error("Pagination subparts must be rendered inside Pagination")
+	end
+	return context
+end
+local function PaginationItemVisual(props)
+	local theme = React.useContext(CleanThemeContext)
+	local hover = React.useContext(HoverButtonContext)
+	local _result
+	if props.disabled then
+		_result = "disabled"
+	else
+		local _result_1 = hover
+		if _result_1 ~= nil then
+			_result_1 = _result_1.isSelected
+		end
+		local _result_2
+		if _result_1 then
+			_result_2 = "focus"
+		else
+			local _result_3 = hover
+			if _result_3 ~= nil then
+				_result_3 = _result_3.hover
+			end
+			_result_2 = if _result_3 then "hover" else "default"
+		end
+		_result = _result_2
+	end
+	local colors = ColorHelper:getIntentColors(theme, "primary", _result, theme.components.pagination.item.intents)
+	local _exp = React.createElement(Corners, {
+		radius = theme.components.pagination.item.cornerRadius,
+	})
+	local _exp_1 = React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.pagination.item.spacing, theme.components.pagination.item.padding),
+	})
+	local _attributes = {}
+	local _condition = colors.boxShadow
+	if _condition == nil then
+		_condition = theme.components.pagination.item.boxShadow
+	end
+	_attributes.value = _condition
+	return React.createElement(React.Fragment, nil, _exp, _exp_1, React.createElement(BoxShadow, _attributes), if props.text ~= nil then (React.createElement(Text, {
+		name = "PaginationItemText",
+		text = props.text,
+		TextColor3 = colors.textColor,
+		typography = TypographyHelper:getTypography(theme, nil, colors.typography or theme.components.pagination.item.typography),
+	})) else (React.createElement(Container, {
+		name = "PaginationIconContainer",
+	}, React.createElement(Icon, {
+		name = "PaginationIcon",
+		icon = props.icon,
+		color = colors.textColor,
+	}))))
+end
+local function getButtonState(theme)
+	local itemTheme = theme.components.pagination.item
+	local defaultColors = ColorHelper:getIntentColors(theme, "primary", "default", itemTheme.intents)
+	local hoverColors = ColorHelper:getIntentColors(theme, "primary", "hover", itemTheme.intents)
+	local focusColors = ColorHelper:getIntentColors(theme, "primary", "focus", itemTheme.intents)
+	local disabledColors = ColorHelper:getIntentColors(theme, "primary", "disabled", itemTheme.intents)
+	return {
+		defaultColors = defaultColors,
+		hoverColors = hoverColors,
+		focusColors = focusColors,
+		disabledColors = disabledColors,
+		defaultImage = CssHelper:resolveBackgroundImage(defaultColors.backgroundImage),
+		hoverImage = CssHelper:resolveBackgroundImage(hoverColors.backgroundImage),
+		focusImage = CssHelper:resolveBackgroundImage(focusColors.backgroundImage),
+	}
+end
+local function PaginationButton(props)
+	local theme = React.useContext(CleanThemeContext)
+	local state = getButtonState(theme)
+	return React.createElement(HoverButton, {
+		name = props.name,
+		isSelected = props.selected,
+		default = {
+			Active = not props.disabled,
+			Selectable = not props.disabled,
+			LayoutOrder = props.layoutOrder,
+			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundColor3 = if props.disabled then state.disabledColors.backgroundColor else state.defaultColors.backgroundColor,
+			BackgroundTransparency = if props.disabled then state.disabledColors.backgroundTransparency else state.defaultColors.backgroundTransparency,
+			BorderSizePixel = theme.components.pagination.item.borderThickness,
+			BorderColor3 = if props.disabled then state.disabledColors.borderColor else state.defaultColors.borderColor,
+			AutoButtonColor = false,
+			Image = state.defaultImage.Image,
+			ImageColor3 = state.defaultImage.ImageColor3,
+			ImageTransparency = if props.disabled then 0.7 else state.defaultImage.ImageTransparency,
+			ScaleType = state.defaultImage.ScaleType,
+			SliceCenter = state.defaultImage.SliceCenter,
+			SliceScale = state.defaultImage.SliceScale,
+			TileSize = state.defaultImage.TileSize,
+			Event = {
+				Activated = function()
+					if not props.disabled then
+						props.onActivate()
+					end
+				end,
+			},
+		},
+		hover = if props.disabled then nil else {
+			BackgroundColor3 = state.hoverColors.backgroundColor,
+			BackgroundTransparency = state.hoverColors.backgroundTransparency,
+			BorderColor3 = state.hoverColors.borderColor,
+			Image = state.hoverImage.Image,
+			ImageColor3 = state.hoverImage.ImageColor3,
+			ImageTransparency = state.hoverImage.ImageTransparency,
+			ScaleType = state.hoverImage.ScaleType,
+			SliceCenter = state.hoverImage.SliceCenter,
+			SliceScale = state.hoverImage.SliceScale,
+			TileSize = state.hoverImage.TileSize,
+		},
+		focus = {
+			BackgroundColor3 = state.focusColors.backgroundColor,
+			BackgroundTransparency = state.focusColors.backgroundTransparency,
+			BorderColor3 = state.focusColors.borderColor,
+			Image = state.focusImage.Image,
+			ImageColor3 = state.focusImage.ImageColor3,
+			ImageTransparency = state.focusImage.ImageTransparency,
+			ScaleType = state.focusImage.ScaleType,
+			SliceCenter = state.focusImage.SliceCenter,
+			SliceScale = state.focusImage.SliceScale,
+			TileSize = state.focusImage.TileSize,
+		},
+	}, props.children)
+end
+local function PaginationItem(props)
+	local _binding = usePagination()
+	local page = _binding.page
+	local setPage = _binding.setPage
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	_attributes.text = `{props.value}`
+	return React.createElement(PaginationButton, {
+		name = `PaginationItem-{props.value}`,
+		selected = page == props.value,
+		layoutOrder = props.layoutOrder,
+		onActivate = function()
+			return setPage(props.value)
+		end,
+	}, React.createElement(PaginationItemVisual, _attributes))
+end
+local function PaginationPrev()
+	local _binding = usePagination()
+	local page = _binding.page
+	local setPage = _binding.setPage
+	local canGoPrev = _binding.canGoPrev
+	return React.createElement(PaginationButton, {
+		name = "PaginationPrev",
+		disabled = not canGoPrev,
+		onActivate = function()
+			return setPage(page - 1)
+		end,
+	}, React.createElement(PaginationItemVisual, {
+		icon = "chevron-left",
+		disabled = not canGoPrev,
+	}))
+end
+local function PaginationNext()
+	local _binding = usePagination()
+	local page = _binding.page
+	local setPage = _binding.setPage
+	local canGoNext = _binding.canGoNext
+	return React.createElement(PaginationButton, {
+		name = "PaginationNext",
+		disabled = not canGoNext,
+		onActivate = function()
+			return setPage(page + 1)
+		end,
+	}, React.createElement(PaginationItemVisual, {
+		icon = "chevron-right",
+		disabled = not canGoNext,
+	}))
+end
+local function PaginationEllipsis(props)
+	local theme = React.useContext(CleanThemeContext)
+	return React.createElement(Text, {
+		name = "PaginationEllipsis",
+		text = "…",
+		LayoutOrder = props.layoutOrder,
+		typography = TypographyHelper:getTypography(theme, nil, theme.components.pagination.item.typography),
+	})
+end
+local function PaginationList(props)
+	local _binding = usePagination()
+	local items = _binding.items
+	local _condition = props.children
+	if _condition == nil then
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#items)
+		local _callback = function(item, index)
+			return if item == "ellipsis" then (React.createElement(PaginationEllipsis, {
+				key = `ellipsis-{index}`,
+				layoutOrder = index,
+			})) else (React.createElement(PaginationItem, {
+				key = item,
+				value = item,
+				layoutOrder = index,
+			}))
+		end
+		for _k, _v in items do
+			_newValue[_k] = _callback(_v, _k - 1, items)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_condition = _newValue
+	end
+	return React.createElement(Container, {
+		name = "PaginationList",
+	}, React.createElement(HStack, {
+		Wraps = false,
+		valign = "Center",
+	}, _condition))
+end
+local function PaginationDefaultLayout()
+	local theme = React.useContext(CleanThemeContext)
+	local paginationTheme = theme.components.pagination
+	return React.createElement(HStack, {
+		Wraps = false,
+		valign = "Center",
+		spacing = "None",
+		Padding = UDim.new(0, SpacingHelper:GetPadding(theme, nil, paginationTheme.spacing)),
+	}, React.createElement(PaginationPrev), React.createElement(PaginationList), React.createElement(PaginationNext))
+end
+local Pagination = React.forwardRef(function(props, _ref)
+	local theme = React.useContext(CleanThemeContext)
+	local pageCount = math.max(0, math.floor(props.totalPages))
+	local currentPage = if pageCount == 0 then 0 else math.clamp(math.floor(props.page), 1, pageCount)
+	local _condition = props.siblingCount
+	if _condition == nil then
+		_condition = 1
+	end
+	local siblingCount = math.max(0, math.floor(_condition))
+	local items = React.useMemo(function()
+		return computePaginationItems(currentPage, pageCount, siblingCount)
+	end, { currentPage, pageCount, siblingCount })
+	local setPage = function(page)
+		if pageCount == 0 then
+			return nil
+		end
+		props.onPageChange(math.clamp(math.floor(page), 1, pageCount))
+	end
+	local contextValue = React.useMemo(function()
+		return {
+			page = currentPage,
+			totalPages = pageCount,
+			items = items,
+			setPage = setPage,
+			canGoPrev = currentPage > 1,
+			canGoNext = currentPage < pageCount,
+		}
+	end, { currentPage, pageCount, items, props.onPageChange })
+	local paginationTheme = theme.components.pagination
+	return React.createElement(PaginationContext.Provider, {
+		value = contextValue,
+	}, React.createElement(Container, {
+		name = "Pagination",
+		BackgroundColor3 = paginationTheme.backgroundColor,
+		BackgroundTransparency = paginationTheme.backgroundTransparency,
+		BorderSizePixel = 0,
+	}, React.createElement("uistroke", {
+		key = "PaginationBorder",
+		Thickness = paginationTheme.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = paginationTheme.borderColor,
+	}), React.createElement(Corners, {
+		radius = paginationTheme.cornerRadius,
+	}), React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, paginationTheme.spacing, paginationTheme.padding),
+	}), if props.children ~= nil then props.children else React.createElement(PaginationDefaultLayout)))
+end)
+Pagination.Prev = PaginationPrev
+Pagination.Next = PaginationNext
+Pagination.Item = PaginationItem
+Pagination.Ellipsis = PaginationEllipsis
+Pagination.List = PaginationList
+return {
+	Pagination = Pagination,
+}

package/out/Components/Layout/Row.d.ts

@@ -1,6 +1,7 @@
 import React from "@rbxts/react";
 import { BreakPointElementProps, SpacedElementProps } from "../../Interfaces/";
 interface RowProps extends SpacedElementProps, BreakPointElementProps {
+    name?: string;
 }
 export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<Frame>>;
 export {};

package/out/Components/Layout/Row.luau

@@ -13,55 +13,32 @@ local Row = React.forwardRef(function(props, ref)
 	local width, setWidth = React.useState(0)
 	local breakpoints = props.breakpoints or theme.breakpoints
 	local padding = UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing))
-	local rowRef = React.useRef()
-	local setRowRef = function(instance)
-		rowRef.current = instance
-		local _ref = ref
-		if type(_ref) == "function" then
-			ref(instance)
-		else
-			local _condition = ref ~= nil
-			if _condition then
-				local _ref_1 = ref
-				_condition = type(_ref_1) == "table"
-			end
-			if _condition then
-				ref.current = instance
-			end
-		end
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Row"
 	end
-	React.useEffect(function()
-		local frame = rowRef.current
-		if not frame then
-			return nil
-		end
-		-- Some renderers (e.g. the browser-based Loom scene preview) don't
-		-- back this ref with an instance that supports property-changed
-		-- signals, so guard the subscription instead of throwing and
-		-- losing breakpoint width tracking.
-		local conn
-		pcall(function()
-			conn = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
-				local nextWidth = frame.AbsoluteSize.X
-				setWidth(function(currentWidth)
-					return if currentWidth == nextWidth then currentWidth else nextWidth
-				end)
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.Size = UDim2.fromScale(1, 1)
+	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.BackgroundTransparency = 1
+	_attributes.Change = {
+		AbsoluteSize = function(instance)
+			local nextWidth = instance.AbsoluteSize.X
+			setWidth(function(currentWidth)
+				return if currentWidth == nextWidth then currentWidth else nextWidth
 			end)
-		end)
-		return function()
-			local _result = conn
-			if _result ~= nil then
-				_result:Disconnect()
-			end
-		end
-	end, {})
+		end,
+	}
 	local _exp = React.createElement("uilistlayout", {
+		key = "RowLayout",
 		FillDirection = Enum.FillDirection.Horizontal,
 		SortOrder = Enum.SortOrder.LayoutOrder,
 		Padding = padding,
 		Wraps = true,
 	})
-	local _attributes = {}
+	local _attributes_1 = {}
 	local _object = {
 		width = width,
 	}
@@ -83,13 +60,8 @@ local Row = React.forwardRef(function(props, ref)
 	_object[_left] = #_newValue
 	_object.padding = padding
 	_object.breakpoint = BreakpointHelper:getBreakpoint(width, breakpoints)
-	_attributes.value = _object
-	return React.createElement("frame", {
-		ref = setRowRef,
-		Size = UDim2.fromScale(1, 1),
-		AutomaticSize = Enum.AutomaticSize.Y,
-		BackgroundTransparency = 1,
-	}, _exp, React.createElement(RowContext.Provider, _attributes, props.children))
+	_attributes_1.value = _object
+	return React.createElement("frame", _attributes, _exp, React.createElement(RowContext.Provider, _attributes_1, props.children))
 end)
 return {
 	Row = Row,

package/out/Components/Layout/Scroller.d.ts

@@ -3,6 +3,7 @@ import { PositionElementProps, SizeElementProps, SpacedElementProps } from "../.
 interface ScrollerProps extends SizeElementProps, SpacedElementProps, PositionElementProps {
     children?: React.ReactNode;
     AutomaticSizeParent?: boolean;
+    name?: string;
 }
 export declare function Scroller(props: ScrollerProps): React.JSX.Element;
 export {};

package/out/Components/Layout/Scroller.luau

@@ -19,46 +19,38 @@ local function Scroller(props)
 			setIsScrolling(frame.AbsoluteCanvasSize.Y > frame.AbsoluteWindowSize.Y)
 		end
 		updateScrolling()
-		-- Some renderers (e.g. the browser-based Loom scene preview) don't back
-		-- this ref with an instance that supports property-changed signals, so
-		-- guard the subscription instead of throwing and losing overflow tracking.
-		local canvasConn
-		local windowConn
-		pcall(function()
-			canvasConn = frame:GetPropertyChangedSignal("AbsoluteCanvasSize"):Connect(updateScrolling)
-		end)
-		pcall(function()
-			windowConn = frame:GetPropertyChangedSignal("AbsoluteWindowSize"):Connect(updateScrolling)
-		end)
+		local canvasConn = frame:GetPropertyChangedSignal("AbsoluteCanvasSize"):Connect(updateScrolling)
+		local windowConn = frame:GetPropertyChangedSignal("AbsoluteWindowSize"):Connect(updateScrolling)
 		return function()
-			local _result = canvasConn
-			if _result ~= nil then
-				_result:Disconnect()
-			end
-			local _result_1 = windowConn
-			if _result_1 ~= nil then
-				_result_1:Disconnect()
-			end
+			canvasConn:Disconnect()
+			windowConn:Disconnect()
 		end
 	end, {})
 	local spacing = SpacingHelper:GetPadding(theme, props.spacing)
-	return React.createElement("scrollingframe", {
-		ref = ref,
-		AnchorPoint = SizeHelper:GetAnchor(props),
-		AutomaticSize = SizeHelper:GetAutoSize(props, Enum.AutomaticSize.None),
-		Position = SizeHelper:GetPosition(props),
-		Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1)),
-		BorderSizePixel = 0,
-		ScrollingDirection = Enum.ScrollingDirection.Y,
-		ScrollBarImageColor3 = theme.components.scroller.barColor,
-		CanvasSize = UDim2.fromScale(1, 0),
-		BackgroundTransparency = 1,
-		ScrollBarThickness = thickness,
-		VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar,
-		AutomaticCanvasSize = Enum.AutomaticSize.Y,
-	}, props.AutomaticSizeParent and React.createElement("uilistlayout", {
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Scroller"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.AnchorPoint = SizeHelper:GetAnchor(props)
+	_attributes.AutomaticSize = SizeHelper:GetAutoSize(props, Enum.AutomaticSize.None)
+	_attributes.Position = SizeHelper:GetPosition(props)
+	_attributes.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1))
+	_attributes.BorderSizePixel = 0
+	_attributes.ScrollingDirection = Enum.ScrollingDirection.Y
+	_attributes.ScrollBarImageColor3 = theme.components.scroller.barColor
+	_attributes.CanvasSize = UDim2.fromScale(1, 0)
+	_attributes.BackgroundTransparency = 1
+	_attributes.ScrollBarThickness = thickness
+	_attributes.VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar
+	_attributes.AutomaticCanvasSize = Enum.AutomaticSize.Y
+	return React.createElement("scrollingframe", _attributes, props.AutomaticSizeParent and React.createElement("uilistlayout", {
+		key = "AutomaticSizeLayout",
 		FillDirection = Enum.FillDirection.Horizontal,
 	}), React.createElement("frame", {
+		key = "ScrollerContent",
 		Size = UDim2.new(1, if isScrolling then -thickness - spacing else 0, 0, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
 		BackgroundTransparency = 1,

package/out/Components/Layout/Table.d.ts

@@ -0,0 +1,31 @@
+import React from "@rbxts/react";
+import { PaddingProps, ScalableElementProps, SizeElementProps } from "../../Interfaces";
+export interface TableProps extends ScalableElementProps, SizeElementProps {
+    children?: React.ReactNode;
+    name?: string;
+}
+export interface TableSectionProps {
+    children?: React.ReactNode;
+}
+export interface TableRowProps {
+    children?: React.ReactNode;
+}
+export interface TableCellProps extends PaddingProps {
+    children?: React.ReactNode | string;
+    text?: string;
+    align?: Enum.HorizontalAlignment | "Left" | "Center" | "Right";
+}
+declare function TableHeader(props: TableSectionProps): React.JSX.Element;
+declare function TableBody(props: TableSectionProps): React.JSX.Element;
+declare function TableRow(props: TableRowProps): React.JSX.Element;
+declare function TableHead(props: TableCellProps): React.JSX.Element;
+declare function TableCell(props: TableCellProps): React.JSX.Element;
+type TableComponent = React.ForwardRefExoticComponent<TableProps & React.RefAttributes<ImageLabel>> & {
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Row: typeof TableRow;
+    Head: typeof TableHead;
+    Cell: typeof TableCell;
+};
+declare const Table: TableComponent;
+export { Table };