@nrbx/topbar-components 1.0.4 → 1.0.6

package/out/components/provider.d.ts

@@ -1,8 +1,13 @@
 import React from '@rbxts/react';
+import type { Dock } from './icon';
 export type SelectionMode = 'Single' | 'Multiple';
+interface ContainerProps extends React.PropsWithChildren {
+    dock: Dock;
+}
+export declare function TopBarContainer({ dock, children }: ContainerProps): React.JSX.Element;
 interface ProviderProps extends React.PropsWithChildren {
     selectionMode?: SelectionMode;
     gameVoiceChatEnabled?: boolean;
 }
-export declare function TopbarProvider({ selectionMode, gameVoiceChatEnabled, children }: ProviderProps): React.JSX.Element;
+export declare function TopbarProvider({ selectionMode, gameVoiceChatEnabled, children, }: ProviderProps): React.JSX.Element;
 export {};

package/out/components/provider.luau

@@ -2,6 +2,10 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local createContext = _react.createContext
+local useContext = _react.useContext
+local useEffect = _react.useEffect
+local useMemo = _react.useMemo
 local useState = _react.useState
 local _context = TS.import(script, script.Parent.Parent, "context")
 local LocationContext = _context.LocationContext
@@ -9,38 +13,135 @@ local useStylesheet = _context.useStylesheet
 local useGuiInset = TS.import(script, script.Parent.Parent, "hooks", "use-gui-inset").useGuiInset
 local useVoicechatEnabled = TS.import(script, script.Parent.Parent, "hooks", "use-voicechat-enabled").useVoicechatEnabled
 local debugLog = TS.import(script, script.Parent.Parent, "utilities", "debug").debugLog
-local function sortByDock(children)
-	local left = {}
-	local center = {}
-	local right = {}
-	local li = 0
-	local ci = 0
-	local ri = 0
-	React.Children.forEach(children, function(child)
-		if child == nil then
-			return nil
-		end
-		local childObj = child
-		local props = childObj.props
-		local _dockValue = props
-		if _dockValue ~= nil then
-			_dockValue = _dockValue.dock
-		end
-		local dockValue = _dockValue
-		debugLog(`sortByDock child: hasProps={props ~= nil}`, `dock="{dockValue}"`, `→ {if dockValue == "Center" then "Center" elseif dockValue == "Right" then "Right" else "Left"}`)
-		if dockValue == "Center" then
-			center[ci + 1] = child
-			ci += 1
-		elseif dockValue == "Right" then
-			right[ri + 1] = child
-			ri += 1
-		else
-			left[li + 1] = child
-			li += 1
+-- ── Dock registry — containers register their children by dock ──────────────
+local DockRegistryContext = createContext(nil)
+local function useDockRegistry()
+	return useContext(DockRegistryContext)
+end
+-- ── TopBarContainer ─────────────────────────────────────────────────────────
+local function TopBarContainer(_param)
+	local dock = _param.dock
+	local children = _param.children
+	local registry = useDockRegistry()
+	local id = useMemo(function()
+		return math.random()
+	end, {})
+	useEffect(function()
+		registry:register(dock, id, children)
+		return function()
+			return registry:unregister(dock, id)
 		end
-	end)
-	debugLog(`sortByDock totals: left={#left} center={#center} right={#right}`)
-	return { left, center, right }
+	end, {})
+	return React.createElement(React.Fragment)
+end
+-- ── Provider ────────────────────────────────────────────────────────────────
+local function useDockNodes()
+	local leftNodes, setLeftNodes = useState({})
+	local centerNodes, setCenterNodes = useState({})
+	local rightNodes, setRightNodes = useState({})
+	local registry = useMemo(function()
+		return {
+			register = function(dock, id, element)
+				local entry = {
+					id = id,
+					element = element,
+				}
+				debugLog(`DockRegistry: register id={id} dock="{dock}"`)
+				if dock == "Center" then
+					setCenterNodes(function(prev)
+						local _array = {}
+						local _length = #_array
+						local _prevLength = #prev
+						table.move(prev, 1, _prevLength, _length + 1, _array)
+						_length += _prevLength
+						_array[_length + 1] = entry
+						return _array
+					end)
+				elseif dock == "Right" then
+					setRightNodes(function(prev)
+						local _array = {}
+						local _length = #_array
+						local _prevLength = #prev
+						table.move(prev, 1, _prevLength, _length + 1, _array)
+						_length += _prevLength
+						_array[_length + 1] = entry
+						return _array
+					end)
+				else
+					setLeftNodes(function(prev)
+						local _array = {}
+						local _length = #_array
+						local _prevLength = #prev
+						table.move(prev, 1, _prevLength, _length + 1, _array)
+						_length += _prevLength
+						_array[_length + 1] = entry
+						return _array
+					end)
+				end
+			end,
+			unregister = function(dock, id)
+				debugLog(`DockRegistry: unregister id={id} dock="{dock}"`)
+				if dock == "Center" then
+					setCenterNodes(function(prev)
+						-- ▼ ReadonlyArray.filter ▼
+						local _newValue = {}
+						local _callback = function(e)
+							return e.id ~= id
+						end
+						local _length = 0
+						for _k, _v in prev do
+							if _callback(_v, _k - 1, prev) == true then
+								_length += 1
+								_newValue[_length] = _v
+							end
+						end
+						-- ▲ ReadonlyArray.filter ▲
+						return _newValue
+					end)
+				elseif dock == "Right" then
+					setRightNodes(function(prev)
+						-- ▼ ReadonlyArray.filter ▼
+						local _newValue = {}
+						local _callback = function(e)
+							return e.id ~= id
+						end
+						local _length = 0
+						for _k, _v in prev do
+							if _callback(_v, _k - 1, prev) == true then
+								_length += 1
+								_newValue[_length] = _v
+							end
+						end
+						-- ▲ ReadonlyArray.filter ▲
+						return _newValue
+					end)
+				else
+					setLeftNodes(function(prev)
+						-- ▼ ReadonlyArray.filter ▼
+						local _newValue = {}
+						local _callback = function(e)
+							return e.id ~= id
+						end
+						local _length = 0
+						for _k, _v in prev do
+							if _callback(_v, _k - 1, prev) == true then
+								_length += 1
+								_newValue[_length] = _v
+							end
+						end
+						-- ▲ ReadonlyArray.filter ▲
+						return _newValue
+					end)
+				end
+			end,
+		}
+	end, {})
+	return {
+		registry = registry,
+		leftNodes = leftNodes,
+		centerNodes = centerNodes,
+		rightNodes = rightNodes,
+	}
 end
 local function TopbarProvider(_param)
 	local selectionMode = _param.selectionMode
@@ -53,18 +154,117 @@ local function TopbarProvider(_param)
 	local inset = useGuiInset()
 	local voiceChatEnabled = useVoicechatEnabled()
 	local stylesheet = useStylesheet().provider
+	local _binding = useDockNodes()
+	local registry = _binding.registry
+	local leftNodes = _binding.leftNodes
+	local centerNodes = _binding.centerNodes
+	local rightNodes = _binding.rightNodes
 	local hasBetaLabel = gameVoiceChatEnabled and voiceChatEnabled
 	local leftPadding = if hasBetaLabel then stylesheet.paddingLeft + 16 else stylesheet.paddingLeft
 	local rawHeight = inset.Height - stylesheet.insetHeightOffset
 	local frameHeight = if stylesheet.forceFrameHeight ~= nil then stylesheet.forceFrameHeight else rawHeight
 	debugLog(`TopbarProvider frame: inset.Height={inset.Height}, inset.Width={inset.Width}`, `insetHeightOffset={stylesheet.insetHeightOffset}`, `rawHeight={rawHeight}`, `forceFrameHeight={stylesheet.forceFrameHeight}`, `finalHeight={frameHeight}`, `sizeScale=({stylesheet.sizeScale.X}, {stylesheet.sizeScale.Y})`)
-	local _binding = sortByDock(children)
-	local leftChildren = _binding[1]
-	local centerChildren = _binding[2]
-	local rightChildren = _binding[3]
-	local hasCenter = #centerChildren > 0
-	local hasRight = #rightChildren > 0
-	return React.createElement(LocationContext.Provider, {
+	local hasCenter = #centerNodes > 0
+	local hasRight = #rightNodes > 0
+	local _exp = React.createElement("uipadding", {
+		key = "UIPadding",
+		PaddingLeft = UDim.new(0, leftPadding),
+		PaddingRight = UDim.new(0, stylesheet.paddingRight),
+		PaddingTop = UDim.new(0, stylesheet.paddingTop),
+		PaddingBottom = UDim.new(0, stylesheet.paddingBottom),
+	})
+	local _exp_1 = React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = UDim.new(0, stylesheet.iconSpacing),
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+	})
+	local _exp_2 = children
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#leftNodes)
+	local _callback = function(entry)
+		return React.createElement(React.Fragment, {
+			key = entry.id,
+		}, entry.element)
+	end
+	for _k, _v in leftNodes do
+		_newValue[_k] = _callback(_v, _k - 1, leftNodes)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local _exp_3 = React.createElement("frame", {
+		key = "LeftDock",
+		BackgroundTransparency = 1,
+		AnchorPoint = Vector2.new(0, 0.5),
+		Position = UDim2.new(0, 0, 0.5, 0),
+		Size = UDim2.fromScale(0, 1),
+		AutomaticSize = Enum.AutomaticSize.X,
+	}, _exp_1, _exp_2, _newValue)
+	local _condition = hasCenter
+	if _condition then
+		local _exp_4 = React.createElement("uipadding", {
+			PaddingLeft = UDim.new(0, stylesheet.iconGroupSpacing),
+			PaddingRight = UDim.new(0, stylesheet.iconGroupSpacing),
+		})
+		local _exp_5 = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Horizontal,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, stylesheet.iconSpacing),
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+		})
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue_1 = table.create(#centerNodes)
+		local _callback_1 = function(entry)
+			return React.createElement(React.Fragment, {
+				key = entry.id,
+			}, entry.element)
+		end
+		for _k, _v in centerNodes do
+			_newValue_1[_k] = _callback_1(_v, _k - 1, centerNodes)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_condition = (React.createElement("frame", {
+			key = "CenterDock",
+			BackgroundTransparency = 1,
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.new(0.5, 0, 0.5, 0),
+			Size = UDim2.fromScale(0, 1),
+			AutomaticSize = Enum.AutomaticSize.X,
+		}, _exp_4, _exp_5, _newValue_1))
+	end
+	local _condition_1 = hasRight
+	if _condition_1 then
+		local _exp_4 = React.createElement("uipadding", {
+			PaddingLeft = UDim.new(0, stylesheet.iconGroupSpacing),
+		})
+		local _exp_5 = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Horizontal,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, stylesheet.iconSpacing),
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+		})
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue_1 = table.create(#rightNodes)
+		local _callback_1 = function(entry)
+			return React.createElement(React.Fragment, {
+				key = entry.id,
+			}, entry.element)
+		end
+		for _k, _v in rightNodes do
+			_newValue_1[_k] = _callback_1(_v, _k - 1, rightNodes)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_condition_1 = (React.createElement("frame", {
+			key = "RightDock",
+			BackgroundTransparency = 1,
+			AnchorPoint = Vector2.new(1, 0.5),
+			Position = UDim2.new(1, 0, 0.5, 0),
+			Size = UDim2.fromScale(0, 1),
+			AutomaticSize = Enum.AutomaticSize.X,
+		}, _exp_4, _exp_5, _newValue_1))
+	end
+	return React.createElement(DockRegistryContext.Provider, {
+		value = registry,
+	}, React.createElement(LocationContext.Provider, {
 		value = {
 			type = "provider",
 			selectedIcons = selectedIcons,
@@ -83,29 +283,29 @@ local function TopbarProvider(_param)
 				end)
 			end,
 			iconDeselected = function(iconId)
-				local _condition = selectionMode == "Single"
-				if _condition then
+				local _condition_2 = selectionMode == "Single"
+				if _condition_2 then
 					local _iconId = iconId
-					_condition = table.find(selectedIcons, _iconId) ~= nil
+					_condition_2 = table.find(selectedIcons, _iconId) ~= nil
 				end
-				if _condition then
+				if _condition_2 then
 					return setSelectedIcons({})
 				end
 				return setSelectedIcons(function(icons)
 					-- ▼ ReadonlyArray.filter ▼
-					local _newValue = {}
-					local _callback = function(T)
+					local _newValue_1 = {}
+					local _callback_1 = function(T)
 						return T ~= iconId
 					end
 					local _length = 0
 					for _k, _v in icons do
-						if _callback(_v, _k - 1, icons) == true then
+						if _callback_1(_v, _k - 1, icons) == true then
 							_length += 1
-							_newValue[_length] = _v
+							_newValue_1[_length] = _v
 						end
 					end
 					-- ▲ ReadonlyArray.filter ▲
-					return _newValue
+					return _newValue_1
 				end)
 			end,
 		},
@@ -116,55 +316,9 @@ local function TopbarProvider(_param)
 		Size = UDim2.fromOffset(inset.Width * stylesheet.sizeScale.X, frameHeight * stylesheet.sizeScale.Y),
 		AnchorPoint = stylesheet.anchorPoint,
 		Position = stylesheet.position,
-	}, React.createElement("uipadding", {
-		key = "UIPadding",
-		PaddingLeft = UDim.new(0, leftPadding),
-		PaddingRight = UDim.new(0, stylesheet.paddingRight),
-		PaddingTop = UDim.new(0, stylesheet.paddingTop),
-		PaddingBottom = UDim.new(0, stylesheet.paddingBottom),
-	}), React.createElement("frame", {
-		key = "LeftDock",
-		BackgroundTransparency = 1,
-		AnchorPoint = Vector2.new(0, 0.5),
-		Position = UDim2.new(0, 0, 0.5, 0),
-		Size = UDim2.fromScale(0, 1),
-		AutomaticSize = Enum.AutomaticSize.X,
-	}, React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Horizontal,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, stylesheet.iconSpacing),
-		VerticalAlignment = Enum.VerticalAlignment.Center,
-	}), leftChildren), hasCenter and (React.createElement("frame", {
-		key = "CenterDock",
-		BackgroundTransparency = 1,
-		AnchorPoint = Vector2.new(0.5, 0.5),
-		Position = UDim2.new(0.5, 0, 0.5, 0),
-		Size = UDim2.fromScale(0, 1),
-		AutomaticSize = Enum.AutomaticSize.X,
-	}, React.createElement("uipadding", {
-		PaddingLeft = UDim.new(0, stylesheet.iconGroupSpacing),
-		PaddingRight = UDim.new(0, stylesheet.iconGroupSpacing),
-	}), React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Horizontal,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, stylesheet.iconSpacing),
-		VerticalAlignment = Enum.VerticalAlignment.Center,
-	}), centerChildren)), hasRight and (React.createElement("frame", {
-		key = "RightDock",
-		BackgroundTransparency = 1,
-		AnchorPoint = Vector2.new(1, 0.5),
-		Position = UDim2.new(1, 0, 0.5, 0),
-		Size = UDim2.fromScale(0, 1),
-		AutomaticSize = Enum.AutomaticSize.X,
-	}, React.createElement("uipadding", {
-		PaddingLeft = UDim.new(0, stylesheet.iconGroupSpacing),
-	}), React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Horizontal,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, stylesheet.iconSpacing),
-		VerticalAlignment = Enum.VerticalAlignment.Center,
-	}), rightChildren))))
+	}, _exp, _exp_3, _condition, _condition_1)))
 end
 return {
+	TopBarContainer = TopBarContainer,
 	TopbarProvider = TopbarProvider,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nrbx/topbar-components",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "out/init.lua",
   "scripts": {
     "build": "rbxtsc",