@nrbx/topbar-components 1.2.0 → 1.2.2

package/README.md

@@ -289,6 +289,7 @@ The stylesheet exposes the following sections for full control:
         sizeScale: new Vector2(1, 1),
         insetHeightOffset: 0,
         forceFrameHeight: undefined,  // override auto height (e.g. 55)
+        centreOffset: undefined,       // right-shift for centre dock (auto: 0 on new topbar, 12 on old)
     },
 
     // Icon internal sizing

package/out/components/provider.d.ts

@@ -1,17 +1,5 @@
 import React from '@rbxts/react';
 export type SelectionMode = 'Single' | 'Multiple';
-/** Docks icons to the left side of the topbar. */
-export declare function LeftDock({ children, frameRef }: React.PropsWithChildren & {
-    frameRef?: React.Ref<Frame>;
-}): React.JSX.Element;
-/** Docks icons to the center of the topbar. */
-export declare function CenterDock({ children, frameRef }: React.PropsWithChildren & {
-    frameRef?: React.Ref<Frame>;
-}): React.JSX.Element;
-/** Docks icons to the right side of the topbar. */
-export declare function RightDock({ children, frameRef }: React.PropsWithChildren & {
-    frameRef?: React.Ref<Frame>;
-}): React.JSX.Element;
 interface ProviderProps extends React.PropsWithChildren {
     /**
      * How icon selection works across the topbar.

package/out/components/provider.luau

@@ -53,11 +53,15 @@ end
 local function CenterDock(_param)
 	local children = _param.children
 	local frameRef = _param.frameRef
+	local centreOffset = _param.centreOffset
+	if centreOffset == nil then
+		centreOffset = 0
+	end
 	local stylesheet = useStylesheet().provider
 	return React.createElement(DockFrame, {
 		frameRef = frameRef,
 		anchor = Vector2.new(0.5, 0.5),
-		position = UDim2.new(0.5, 0, 0.5, 0),
+		position = UDim2.new(0.5, centreOffset, 0.5, 0),
 		paddingLeft = UDim.new(0, stylesheet.iconGroupSpacing),
 		paddingRight = UDim.new(0, stylesheet.iconGroupSpacing),
 		children = children,
@@ -100,6 +104,25 @@ local function TopbarProvider(_param)
 	local inset = useGuiInset()
 	local voiceChatEnabled = useVoicechatEnabled()
 	local stylesheet = useStylesheet().provider
+	--[[
+		*
+			 * Pixel offset that shifts the centre dock right to visually account for
+			 * Roblox's default left-side CoreGui icons (menu button, chips bar, etc.).
+			 *
+			 * Mirrors TopbarPlus's startInset logic:
+			 * - New topbar (height > 36): no offset — icons are mathematically centered
+			 * - Old topbar (height ≤ 36): 12px offset to account for the classic menu button
+			 *
+			 * Set `centreOffset` explicitly in the stylesheet to override.
+			 
+	]]
+	local centreOffset = useMemo(function()
+		if stylesheet.centreOffset ~= nil then
+			return stylesheet.centreOffset
+		end
+		local isOldTopbar = inset.Height <= 36
+		return if isOldTopbar then 12 else 0
+	end, { stylesheet.centreOffset, inset.Height })
 	local containerRef = useRef()
 	local leftDockRef = useRef()
 	local centerDockRef = useRef()
@@ -255,7 +278,7 @@ local function TopbarProvider(_param)
 				table.insert(overflowed, _arg0)
 			end
 		end
-		return React.createElement(React.createFragment, nil, visible, React.createElement(Overflow, nil, overflowed))
+		return React.createElement(React.Fragment, nil, visible, React.createElement(Overflow, nil, overflowed))
 	end
 	local hasBetaLabel = gameVoiceChatEnabled and voiceChatEnabled
 	local leftPadding = if hasBetaLabel then stylesheet.paddingLeft + 16 else stylesheet.paddingLeft
@@ -323,13 +346,11 @@ local function TopbarProvider(_param)
 		frameRef = leftDockRef,
 	}, buildDockContent(sorted.groups.left, "left")), React.createElement(CenterDock, {
 		frameRef = centerDockRef,
+		centreOffset = centreOffset,
 	}, buildDockContent(sorted.groups.centre, "centre")), React.createElement(RightDock, {
 		frameRef = rightDockRef,
 	}, buildDockContent(sorted.groups.right, "right")), sorted.other))
 end
 return {
-	LeftDock = LeftDock,
-	CenterDock = CenterDock,
-	RightDock = RightDock,
 	TopbarProvider = TopbarProvider,
 }

package/out/components/stylesheet.luau

@@ -3,7 +3,7 @@ local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local StylesheetContext = TS.import(script, script.Parent.Parent, "context").StylesheetContext
 local DefaultStylesheet = TS.import(script, script.Parent.Parent, "style").DefaultStylesheet
-local reconcile = TS.import(script, script.Parent.Parent, "utilities", "merge").default
+local reconcile = TS.import(script, script.Parent.Parent, "utilities", "merge").reconcile
 --[[
 	*
 	 * Applies a custom stylesheet to all descendant topbar components.

package/out/style.d.ts

@@ -36,6 +36,12 @@ export interface Stylesheet {
         iconGroupSpacing: number;
         /** Override for the topbar frame height. Uses inset height when `undefined`. */
         forceFrameHeight: number | undefined;
+        /**
+         * Pixel offset that shifts the centre dock to the right to visually
+         * account for Roblox's default left-side CoreGui icons (menu button,
+         * chips bar, etc.). Auto-detected from the topbar type when `undefined`.
+         */
+        centreOffset: number | undefined;
     };
     /** Sizing and spacing values shared by all icons. */
     sizing: {

package/out/style.luau

@@ -52,7 +52,7 @@ local DefaultStylesheet = {
 		toggleStateOnClick = true,
 		static = false,
 		disabled = false,
-		toggleKey = Enum.KeyCode.Unknown,
+		toggleKey = Enum.KeyCode.None,
 		notificationCount = 0,
 		iconWidth = 0,
 		contentPaddingX = 10,
@@ -98,6 +98,7 @@ local DefaultStylesheet = {
 		insetHeightOffset = 0,
 		iconGroupSpacing = 0,
 		forceFrameHeight = nil,
+		centreOffset = nil,
 	},
 	sizing = {
 		iconHeight = nil,

package/out/utilities/merge.d.ts

@@ -1 +1 @@
-export default function reconcile(target: object, template: object): object;
+export declare function reconcile(target: object, template: object): object;

package/out/utilities/merge.luau

@@ -29,5 +29,5 @@ function deepCopy(original)
 	return copy
 end
 return {
-	default = reconcile,
+	reconcile = reconcile,
 }

package/package.json

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