@nrbx/topbar-components 1.1.4 → 1.1.6

package/out/components/icon.luau

@@ -3,7 +3,6 @@ local TS = _G[script]
 local deepEquals = TS.import(script, TS.getModule(script, "@rbxts", "object-utils")).deepEquals
 local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
 local mapBinding = _pretty_react_hooks.mapBinding
-local useAsyncEffect = _pretty_react_hooks.useAsyncEffect
 local useMotion = _pretty_react_hooks.useMotion
 local useMountEffect = _pretty_react_hooks.useMountEffect
 local useUnmountEffect = _pretty_react_hooks.useUnmountEffect
@@ -149,7 +148,7 @@ local function Icon(componentProps)
 	local currentImage = stateful(props.imageId, currentState)
 	local currentText = stateful(props.text, currentState)
 	local previousQueryRef = useRef()
-	useAsyncEffect(TS.async(function()
+	useEffect(function()
 		local currentQuery = {
 			Font = stateful(props.fontFace, currentState),
 			Size = stateful(props.textSize, currentState),
@@ -170,9 +169,10 @@ local function Icon(componentProps)
 		params.Font = stateful(props.fontFace, currentState)
 		params.Size = stateful(props.textSize, currentState)
 		params.Width = sizing.textMeasurementWidth
-		setTextBounds(TS.await(TextService:GetTextBoundsAsync(params)))
+		local bounds = TextService:GetTextBoundsAsync(params)
+		setTextBounds(bounds)
 		previousQueryRef.current = currentQuery
-	end), { currentText, props.fontFace, props.textSize, currentState })
+	end, { currentText, props.fontFace, props.textSize, currentState })
 	local imageSizeOff = stateful(props.imageSizeOffset, currentState)
 	local forceHeight = if location.type == "dropdown" then stylesheet.dropdown.forceHeight else nil
 	local _condition = sizing.iconHeight
@@ -199,21 +199,22 @@ local function Icon(componentProps)
 	end
 	local imageToTextGap = _condition_3
 	local imageSize = iconHeight - contentPadY * 2 + imageSizeOff
-	local minLabelWidth = if location.type == "dropdown" then location.desiredIconWidth - sizing.minLabelWidthPadding else inset.Height - sizing.iconHorizontalPadding * 2
-	local accumulatedLabelWidth = if currentImage ~= "" and currentImage then textBounds.X else math.max(textBounds.X, minLabelWidth)
-	local contentWidth = if currentImage ~= "" and currentImage then imageSize + imageToTextGap + textBounds.X else textBounds.X
+	local _exp = (if currentImage ~= "" and currentImage then imageSize else 0)
+	local _condition_4 = currentImage
+	if _condition_4 ~= "" and _condition_4 then
+		_condition_4 = currentText
+	end
+	local contentWidth = _exp + (if _condition_4 ~= "" and _condition_4 then imageToTextGap else 0) + (if currentText ~= "" and currentText then textBounds.X else 0)
 	local autoWidth = contentWidth + contentPadX * 2
-	local _condition_4 = props.iconWidth
-	if not (_condition_4 ~= 0 and _condition_4 == _condition_4 and _condition_4) then
-		_condition_4 = sizing.iconWidth
-		if not (_condition_4 ~= 0 and _condition_4 == _condition_4 and _condition_4) then
-			_condition_4 = math.max(iconHeight, autoWidth)
+	local _condition_5 = props.iconWidth
+	if not (_condition_5 ~= 0 and _condition_5 == _condition_5 and _condition_5) then
+		_condition_5 = sizing.iconWidth
+		if not (_condition_5 ~= 0 and _condition_5 == _condition_5 and _condition_5) then
+			_condition_5 = math.max(iconHeight, autoWidth)
 		end
 	end
-	local iconWidth = _condition_4
+	local iconWidth = _condition_5
 	local iconSize = Vector2.new(iconWidth, iconHeight)
-	local imagePosY = (iconHeight - imageSize) / 2 + imageSizeOff * -0.5
-	local textLabelPos = UDim2.new(0, if currentImage ~= "" and currentImage then contentPadX + imageSize + imageToTextGap else contentPadX, 0.5, 0)
 	useEffect(function()
 		if props.static then
 			return nil
@@ -259,7 +260,10 @@ local function Icon(componentProps)
 		Size = UDim2.new(1, 0, 0, iconSize.Y),
 		Active = not props.static,
 		Selectable = not props.static,
-		AutoButtonColor = not props.static,
+		AutoButtonColor = false,
+		Text = "",
+		BackgroundTransparency = animatedProps.backgroundTransparency,
+		BackgroundColor3 = animatedProps.backgroundColor,
 		Event = {
 			MouseButton1Click = function()
 				if props.static then
@@ -304,16 +308,26 @@ local function Icon(componentProps)
 				props.unhover()
 			end,
 		},
-		Text = "",
-		BackgroundTransparency = stateful(props.backgroundTransparency, currentState),
-		BackgroundColor3 = stateful(props.backgroundColor, currentState),
-	}, children, currentImage ~= nil and currentImage ~= "" and (React.createElement("imagelabel", {
+	}, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, contentPadX),
+		PaddingRight = UDim.new(0, contentPadX),
+		PaddingTop = UDim.new(0, contentPadY),
+		PaddingBottom = UDim.new(0, contentPadY),
+	}), React.createElement("frame", {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundTransparency = 1,
+	}, React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		Padding = UDim.new(0, imageToTextGap),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}), currentImage ~= nil and currentImage ~= "" and (React.createElement("imagelabel", {
 		Size = UDim2.fromOffset(imageSize, imageSize),
-		Position = UDim2.fromOffset(contentPadX, imagePosY),
 		Image = currentImage,
 		BackgroundTransparency = 1,
-		ImageColor3 = stateful(props.imageColor, currentState),
-		ImageTransparency = stateful(props.imageTransparency, currentState),
+		ImageColor3 = animatedProps.imageColor,
+		ImageTransparency = animatedProps.imageTransparency,
 		ImageRectOffset = stateful(props.imageRectOffset, currentState),
 		ImageRectSize = stateful(props.imageRectSize, currentState),
 	})), currentText ~= nil and currentText ~= "" and (React.createElement("textlabel", {
@@ -321,9 +335,8 @@ local function Icon(componentProps)
 		TextSize = stateful(props.textSize, currentState),
 		TextColor3 = stateful(props.textColor, currentState),
 		TextWrapped = false,
-		AnchorPoint = Vector2.new(0, 0.5),
-		Size = UDim2.new(0, accumulatedLabelWidth, sizing.buttonLabelHeightFraction, 0),
-		Position = textLabelPos,
+		Size = UDim2.fromOffset(textBounds.X, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
 		TextXAlignment = stateful(props.textAlignment, currentState),
 		RichText = stateful(props.richText, currentState),
 		BackgroundTransparency = 1,
@@ -332,7 +345,7 @@ local function Icon(componentProps)
 		Thickness = stateful(props.strokeThickness, currentState),
 		Color = stateful(props.strokeColor, currentState),
 		Transparency = stateful(props.strokeTransparency, currentState),
-	}))), React.createElement("uicorner", {
+	})))), children, React.createElement("uicorner", {
 		CornerRadius = if location.type == "dropdown" then stylesheet.dropdown.iconCornerRadius else stateful(props.cornerRadius, currentState),
 	}), props.disabled and (React.createElement("frame", {
 		Size = UDim2.fromScale(1, 1),

package/out/hooks/use-voicechat-enabled.luau

@@ -1,15 +1,18 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local useAsyncEffect = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useAsyncEffect
-local useState = TS.import(script, TS.getModule(script, "@rbxts", "react")).useState
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useEffect = _react.useEffect
+local useState = _react.useState
 local _services = TS.import(script, TS.getModule(script, "@rbxts", "services"))
 local Players = _services.Players
 local VoiceChatService = _services.VoiceChatService
 local function useVoicechatEnabled()
 	local enabled, setEnabled = useState(false)
-	useAsyncEffect(TS.async(function()
-		setEnabled(VoiceChatService:IsVoiceEnabledForUserIdAsync(Players.LocalPlayer))
-	end), {})
+	useEffect(function()
+		TS.Promise.try(function()
+			return VoiceChatService:IsVoiceEnabledForUserIdAsync(Players.LocalPlayer)
+		end):andThen(setEnabled)
+	end, {})
 	return enabled
 end
 return {

package/out/style.luau

@@ -54,8 +54,8 @@ local DefaultStylesheet = {
 		toggleKey = Enum.KeyCode.Unknown,
 		notificationCount = 0,
 		iconWidth = 0,
-		contentPaddingX = 6,
-		contentPaddingY = 6,
+		contentPaddingX = 2,
+		contentPaddingY = 2,
 		imageToTextSpacing = 6,
 		selected = noop,
 		deselected = noop,
@@ -105,8 +105,8 @@ local DefaultStylesheet = {
 		imageToTextSpacing = 6,
 		iconHorizontalPadding = 6,
 		iconVerticalPadding = 6,
-		contentPaddingX = 6,
-		contentPaddingY = 6,
+		contentPaddingX = 2,
+		contentPaddingY = 2,
 		textMeasurementWidth = 99999,
 		minLabelWidthPadding = 12,
 		buttonLabelHeightFraction = 0.8,

package/package.json

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