@nrbx/topbar-components 1.3.0 → 1.3.1

package/out/components/overflow.luau

@@ -1,60 +1,58 @@
 -- 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 useCallback = _react.useCallback
-local useMemo = _react.useMemo
-local useState = _react.useState
-local useStylesheet = TS.import(script, script.Parent.Parent, "context").useStylesheet
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _context = TS.import(script, script.Parent.Parent, "context")
+local LocationContext = _context.LocationContext
+local useLocation = _context.useLocation
+local Dropdown = TS.import(script, script.Parent, "dropdown").Dropdown
 local Icon = TS.import(script, script.Parent, "icon").Icon
 --[[
-	*
-	 * Collects child icons and renders a "more" button (⋯) when they overflow
-	 * the available space. Overflowing icons appear in a dropdown.
-	 *
-	 * Simplified from TopbarPlus v3 overflow handler.
+	*
+	 * Collects child icons and renders a "more" button (⋯) when they overflow
+	 * the available space. Overflowing icons appear in a dropdown.
+	 *
+	 * Simplified from TopbarPlus v3 overflow handler.
 	 
 ]]
+local OverflowDropdown
 local function Overflow(_param)
 	local children = _param.children
-	local stylesheet = useStylesheet()
-	local expanded, setExpanded = useState(false)
-	local childArray = useMemo(function()
-		local arr = React.Children.toArray(children)
-		return arr
-	end, { children })
-	local overflowCount = #childArray
-	local handleToggle = useCallback(function(state)
-		setExpanded(state == "selected")
-	end, {})
-	if overflowCount == 0 then
+	local childArray = React.Children.toArray(children)
+	if #childArray == 0 then
 		return React.createElement(React.Fragment)
 	end
 	return React.createElement(Icon, {
 		imageId = "rbxassetid://6069276526",
 		toggle = true,
 		defaultState = "deselected",
-		stateChanged = handleToggle,
 		contentPaddingX = 4,
 		contentPaddingY = 4,
-	}, expanded and (React.createElement("frame", {
-		Size = UDim2.new(0, 0, 0, 0),
-		Position = stylesheet.customDropdown.position or stylesheet.dropdownTheme.position,
-		BackgroundColor3 = stylesheet.dropdownTheme.backgroundColor,
-		BackgroundTransparency = stylesheet.dropdownTheme.backgroundTransparency,
-		BorderSizePixel = stylesheet.dropdownTheme.borderSize,
-		BorderColor3 = stylesheet.dropdownTheme.borderColor,
-		ZIndex = 50,
-	}, React.createElement("uicorner", {
-		CornerRadius = stylesheet.dropdownTheme.cornerRadius,
-	}), React.createElement("uistroke", {
-		Color = stylesheet.dropdownTheme.borderColor,
-		Transparency = stylesheet.dropdownTheme.borderTransparency,
-		Thickness = stylesheet.dropdownTheme.borderSize,
-	}), React.createElement("uilistlayout", {
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, 2),
-	}), childArray)))
+	}, React.createElement(OverflowDropdown, nil, childArray))
+end
+--[[
+	*
+	 * Mounts a {@link Dropdown} inside the overflow button without letting it
+	 * resize the button's layout footprint. The overflow menu is a floating
+	 * overlay, so it must not push the surrounding topbar icons around when it
+	 * opens or closes.
+	 
+]]
+function OverflowDropdown(_param)
+	local children = _param.children
+	local location = useLocation()
+	local _arg0 = location.type == "icon"
+	assert(_arg0, "Overflow dropdown must be rendered under an icon")
+	return React.createElement(LocationContext.Provider, {
+		value = {
+			type = "icon",
+			isVisible = location.isVisible,
+			isUnderDropdown = location.isUnderDropdown,
+			width = location.width,
+			setAnimationState = location.setAnimationState,
+			setContentSize = location.setContentSize,
+			setDropdownSize = function() end,
+		},
+	}, React.createElement(Dropdown, nil, children))
 end
 return {
 	Overflow = Overflow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nrbx/topbar-components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "main": "out/init.luau",
   "scripts": {
     "build": "rbxtsc",