@rbxts/react-clean-ui 1.3.0 → 1.4.0

package/out/Components/Chart/Pie.luau

@@ -132,14 +132,7 @@ local function Pie(props)
 			end
 			sectionRemaining = 1 + sectionRemaining
 		end
-		local _condition = not props["Label-hidden"]
-		if _condition then
-			_condition = v.label
-			if _condition ~= "" and _condition then
-				_condition = (not props["label-hover"] or state.hover == index)
-			end
-		end
-		if _condition ~= "" and _condition then
+		if not props["Label-hidden"] and v.label ~= nil and v.label ~= "" and (not props["label-hover"] or state.hover == index) then
 			local label = v.label
 			local isTextLabel = type(label) == "string" or label.text ~= nil
 			local position = if #props.values == 1 then UDim2.fromScale(0.5, 0.5) else getCirclePosition(totalPercent, props["label-distance"])
@@ -157,31 +150,31 @@ local function Pie(props)
 					BackgroundColor3 = background,
 					BorderSizePixel = 0,
 				}
-				local _condition_1 = theme.components.charts.pie.labels.backgroundTransparency
-				if _condition_1 == nil then
-					_condition_1 = theme.components.box.backgroundTransparency
+				local _condition = theme.components.charts.pie.labels.backgroundTransparency
+				if _condition == nil then
+					_condition = theme.components.box.backgroundTransparency
 				end
-				_attributes.BackgroundTransparency = _condition_1
+				_attributes.BackgroundTransparency = _condition
 				local _exp_2 = React.createElement(Text, {
 					name = "PieLabelText",
 					text = text,
 					typography = TypographyHelper:getTypography(theme, "md", theme.components.charts.pie.labels.typography),
 				})
 				local _attributes_1 = {}
-				local _condition_2 = theme.components.charts.pie.labels.cornerRadius
-				if _condition_2 == nil then
-					_condition_2 = theme.components.box.cornerRadius
+				local _condition_1 = theme.components.charts.pie.labels.cornerRadius
+				if _condition_1 == nil then
+					_condition_1 = theme.components.box.cornerRadius
 				end
-				_attributes_1.radius = _condition_2
+				_attributes_1.radius = _condition_1
 				local _exp_3 = React.createElement(Corners, _attributes_1)
 				local _attributes_2 = {
 					key = "Stroke",
 				}
-				local _condition_3 = theme.components.charts.pie.labels.borderThickness
-				if _condition_3 == nil then
-					_condition_3 = theme.components.box.borderThickness
+				local _condition_2 = theme.components.charts.pie.labels.borderThickness
+				if _condition_2 == nil then
+					_condition_2 = theme.components.box.borderThickness
 				end
-				_attributes_2.Thickness = _condition_3
+				_attributes_2.Thickness = _condition_2
 				_attributes_2.BorderStrokePosition = Enum.BorderStrokePosition.Inner
 				_attributes_2.Color = border
 				local _arg0_1 = React.createElement("frame", _attributes, _exp_2, _exp_3, React.createElement("uistroke", _attributes_2), React.createElement(Padding, {

package/out/Components/Input/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "@rbxts/react";
-import { BackgroundElementProps, IconElementProps, IntentElementProps, ScalableElementProps, ShadowElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
+import { BackgroundElementProps, CssPadding, IconElementProps, IntentElementProps, ScalableElementProps, ShadowElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
 import { IconProps } from "../Surface";
 import { ThemeTemplate } from "../../Theme/theme.template";
 export type ButtonStyleOverride = Partial<ThemeTemplate["components"]["button"]>;
@@ -14,6 +14,7 @@ export interface ButtonProps extends SpacedElementProps, ShadowElementProps, ZIn
     LayoutOrder?: number;
     styleOverride?: ButtonStyleOverride;
     name?: string;
+    padding?: CssPadding;
 }
 export interface ButtonTextProps extends ScalableElementProps, IntentElementProps {
     children?: string;

package/out/Components/Input/Button.luau

@@ -94,6 +94,7 @@ local function ButtonIcon(props)
 	_attributes.icon = props.icon
 	_attributes.spinning = props.spinning
 	_attributes.speed = props.speed
+	_attributes.LayoutOrder = props.LayoutOrder
 	local _exp = props.intent
 	local _exp_1 = if props.disabled then "disabled" else "default"
 	local _exp_2 = theme.components.button.intents

package/out/Components/Interaction/Tooltip.d.ts

@@ -6,6 +6,8 @@ interface TooltipProps extends BoxProps, IntentElementProps {
     content: React.ReactNode | string;
     children: React.ReactElement<React.InstanceProps<GuiObject>>;
     placement?: TooltipPlacement;
+    disabled?: boolean;
+    open?: boolean;
 }
 export declare function Tooltip(props: TooltipProps): React.JSX.Element;
 export {};

package/out/Components/Interaction/Tooltip.luau

@@ -3,6 +3,7 @@ local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local _Contexts = TS.import(script, script.Parent.Parent.Parent, "Contexts")
 local CleanThemeContext = _Contexts.CleanThemeContext
+local DragStateContext = _Contexts.DragStateContext
 local OverlayConsumer = _Contexts.OverlayConsumer
 local Text = TS.import(script, script.Parent.Parent, "Typography").Text
 local ReactRoblox = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox"))
@@ -13,6 +14,7 @@ local Padding = _Decorator.Padding
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
 local CssHelper = _Helpers.CssHelper
+local ElementHelper = _Helpers.ElementHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local useTween = TS.import(script, TS.getModule(script, "@rbxts", "react-ripple").src).useTween
 local function TooltipPopup(props)
@@ -30,8 +32,7 @@ local function TooltipPopup(props)
 		left = 0,
 		right = 0,
 	}
-	local _value = theme.components.tooltip.boxShadow
-	local shadow = if _value ~= 0 and _value == _value and _value ~= "" and _value then CssHelper:parseCssShadow(theme.components.tooltip.boxShadow) else nil
+	local shadow = if theme.components.tooltip.boxShadow ~= nil and theme.components.tooltip.boxShadow ~= 0 then CssHelper:parseCssShadow(theme.components.tooltip.boxShadow) else nil
 	if shadow ~= nil then
 		resolvedPadding.top += shadow.blurRadius.Offset + shadow.spread.Y.Offset - shadow.offset.Y.Offset
 		resolvedPadding.bottom += shadow.blurRadius.Offset + shadow.spread.Y.Offset + shadow.offset.Y.Offset
@@ -178,12 +179,20 @@ end
 local function Tooltip(props)
 	local targetRef = React.useRef()
 	local hideRequest = React.useRef(0)
+	local hoveredRef = React.useRef(false)
+	local shownRef = React.useRef(false)
 	local target, setTarget = React.useState()
 	local visible, setVisible = React.useState(false)
 	local theme = React.useContext(CleanThemeContext)
+	local dragState = React.useContext(DragStateContext)
 	local fadeDuration = theme.components.tooltip.fadeDuration
-	local show = function()
-		hideRequest.current += 1
+	local suppressed = props.disabled == true or dragState.preview or dragState.dragging
+	local suppressedRef = React.useRef(suppressed)
+	suppressedRef.current = suppressed
+	local controlled = props.open ~= nil
+	local controlledRef = React.useRef(controlled)
+	controlledRef.current = controlled
+	local captureTarget = function()
 		local _result = targetRef.current
 		if _result ~= nil then
 			_result = _result.AbsolutePosition
@@ -204,9 +213,15 @@ local function Tooltip(props)
 			_object[_left_1] = _result_2
 			setTarget(_object)
 		end
+	end
+	local show = function()
+		shownRef.current = true
+		hideRequest.current += 1
+		captureTarget()
 		setVisible(true)
 	end
 	local hide = function()
+		shownRef.current = false
 		setVisible(false)
 		local request = hideRequest.current + 1
 		hideRequest.current = request
@@ -220,40 +235,53 @@ local function Tooltip(props)
 			end
 		end)
 	end
-	local _exp = props.children
-	local _object = {
-		ref = targetRef,
-	}
-	local _left = "Event"
-	local _object_1 = {}
-	local _spread = props.children.props.Event
-	if _spread then
-		for _k, _v in _spread do
-			_object_1[_k] = _v
+	React.useEffect(function()
+		if suppressed then
+			hoveredRef.current = false
 		end
-	end
-	_object_1.MouseEnter = function(guiObject, x, y)
-		local _result = props.children.props.Event
-		if _result ~= nil then
-			_result = _result.MouseEnter
-			if _result ~= nil then
-				_result(guiObject, x, y)
+		local _condition = not suppressed
+		if _condition then
+			local _condition_1 = props.open
+			if _condition_1 == nil then
+				_condition_1 = hoveredRef.current
 			end
+			_condition = _condition_1
 		end
-		show()
-	end
-	_object_1.MouseLeave = function(guiObject, x, y)
-		local _result = props.children.props.Event
-		if _result ~= nil then
-			_result = _result.MouseLeave
-			if _result ~= nil then
-				_result(guiObject, x, y)
-			end
+		local wanted = _condition
+		if wanted and not shownRef.current then
+			show()
+		elseif not wanted and shownRef.current then
+			hide()
 		end
-		hide()
-	end
-	_object[_left] = _object_1
-	local child = React.cloneElement(_exp, _object)
+	end, { suppressed, props.open })
+	React.useEffect(function()
+		local instance = targetRef.current
+		if not visible or instance == nil then
+			return nil
+		end
+		local positionChanged = instance:GetPropertyChangedSignal("AbsolutePosition"):Connect(captureTarget)
+		local sizeChanged = instance:GetPropertyChangedSignal("AbsoluteSize"):Connect(captureTarget)
+		return function()
+			positionChanged:Disconnect()
+			sizeChanged:Disconnect()
+		end
+	end, { visible })
+	local child = ElementHelper:cloneWithEvents(props.children, {
+		ref = targetRef,
+	}, {
+		MouseEnter = function()
+			hoveredRef.current = true
+			if not controlledRef.current and not suppressedRef.current then
+				show()
+			end
+		end,
+		MouseLeave = function()
+			hoveredRef.current = false
+			if not controlledRef.current then
+				hide()
+			end
+		end,
+	})
 	return React.createElement(React.Fragment, nil, child, target ~= nil and (React.createElement(OverlayConsumer, {
 		render = function(overlay)
 			if overlay == nil then

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

@@ -17,16 +17,27 @@ interface AccordionContentProps extends PaddingProps {
     text?: string;
 }
 declare function AccordionContent(_props: AccordionContentProps): undefined;
-export interface AccordionProps extends ScalableElementProps {
+interface AccordionBaseProps extends ScalableElementProps {
     children?: React.ReactNode;
     collapsible?: boolean;
     animationDuration?: number;
+    autoSize?: boolean;
+    keepMounted?: boolean;
+    name?: string;
+}
+export interface AccordionProps extends AccordionBaseProps {
+    multiple?: false;
     defaultValue?: string;
     value?: string;
     onValueChange?: (value: string | undefined) => void;
-    name?: string;
 }
-type AccordionComponent = React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<ImageLabel>> & {
+export interface AccordionMultipleProps extends AccordionBaseProps {
+    multiple: true;
+    defaultValue?: string[];
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+type AccordionComponent = React.ForwardRefExoticComponent<(AccordionProps | AccordionMultipleProps) & React.RefAttributes<ImageLabel>> & {
     Item: typeof AccordionItem;
     Header: typeof AccordionHeader;
     Content: typeof AccordionContent;

package/out/Components/Layout/Accordion.luau

@@ -119,15 +119,33 @@ local function AccordionHeaderVisual(props)
 		Rotation = rotation,
 	}))))
 end
+local function toValues(value)
+	if value == nil then
+		return {}
+	end
+	local _value = value
+	return if type(_value) == "string" then { value } else value
+end
 local function RenderedAccordionItem(props)
 	local theme = React.useContext(CleanThemeContext)
 	local mounted, setMounted = React.useState(props.open)
 	local height, heightTween = useTween(0, {
 		duration = props.duration,
 	})
+	local contentRef = React.useRef()
 	React.useEffect(function()
 		if props.open then
 			setMounted(true)
+			local content = contentRef.current
+			if content ~= nil then
+				heightTween:setGoal(content.AbsoluteSize.Y, {
+					duration = props.duration,
+				})
+				if props.duration == 0 then
+					heightTween:setPosition(content.AbsoluteSize.Y)
+				end
+				heightTween:start()
+			end
 		else
 			heightTween:setGoal(0, {
 				duration = props.duration,
@@ -252,11 +270,12 @@ local function RenderedAccordionItem(props)
 		disabled = props.disabled,
 		duration = props.duration,
 		open = props.open,
-	})), mounted and (React.createElement("frame", {
+	})), (mounted or props.keepMounted) and (React.createElement("frame", {
 		key = "ContentClip",
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		ClipsDescendants = true,
+		Visible = mounted,
 		Size = height:map(function(value)
 			local _exp = UDim2.fromScale(1, 0)
 			local _arg0 = UDim2.fromOffset(0, value)
@@ -264,6 +283,7 @@ local function RenderedAccordionItem(props)
 		end),
 	}, React.createElement("frame", {
 		key = "Content",
+		ref = contentRef,
 		BackgroundColor3 = theme.components.accordion.content.backgroundColor,
 		BackgroundTransparency = theme.components.accordion.content.backgroundTransparency,
 		BorderSizePixel = 0,
@@ -341,9 +361,10 @@ local Accordion = React.forwardRef(function(props, ref)
 		end)
 		return parsed
 	end, { props.children })
-	local initial = if props.defaultValue ~= nil then { props.defaultValue } else {}
-	local uncontrolled, setUncontrolled = React.useState(initial)
-	local supplied = if props.value ~= nil then { props.value } else uncontrolled
+	local uncontrolled, setUncontrolled = React.useState(function()
+		return toValues(props.defaultValue)
+	end)
+	local supplied = if props.value ~= nil then toValues(props.value) else uncontrolled
 	local _set = {}
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#items)
@@ -372,7 +393,8 @@ local Accordion = React.forwardRef(function(props, ref)
 		end
 	end
 	-- ▲ ReadonlyArray.filter ▲
-	local openValues = _newValue_1
+	local filtered = _newValue_1
+	local openValues = if props.multiple or #filtered <= 1 then filtered else { filtered[1] }
 	React.useEffect(function()
 		local _condition = props.value == nil
 		if _condition then
@@ -406,7 +428,38 @@ local Accordion = React.forwardRef(function(props, ref)
 		local _value = item.value
 		local isOpen = table.find(openValues, _value) ~= nil
 		local nextValues
-		if isOpen then
+		if props.multiple then
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue_2 = table.create(#items)
+			local _callback_2 = function(other)
+				return other.value
+			end
+			for _k, _v in items do
+				_newValue_2[_k] = _callback_2(_v, _k - 1, items)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			-- ▼ ReadonlyArray.filter ▼
+			local _newValue_3 = {}
+			local _callback_3 = function(value)
+				local _result
+				if value == item.value then
+					_result = not isOpen
+				else
+					local _value_1 = value
+					_result = table.find(openValues, _value_1) ~= nil
+				end
+				return _result
+			end
+			local _length_1 = 0
+			for _k, _v in _newValue_2 do
+				if _callback_3(_v, _k - 1, _newValue_2) == true then
+					_length_1 += 1
+					_newValue_3[_length_1] = _v
+				end
+			end
+			-- ▲ ReadonlyArray.filter ▲
+			nextValues = _newValue_3
+		elseif isOpen then
 			if not props.collapsible then
 				return nil
 			end
@@ -417,9 +470,16 @@ local Accordion = React.forwardRef(function(props, ref)
 		if props.value == nil then
 			setUncontrolled(nextValues)
 		end
-		local _result = props.onValueChange
-		if _result ~= nil then
-			_result(nextValues[1])
+		if props.multiple then
+			local _result = props.onValueChange
+			if _result ~= nil then
+				_result(nextValues)
+			end
+		else
+			local _result = props.onValueChange
+			if _result ~= nil then
+				_result(nextValues[1])
+			end
 		end
 	end
 	local _attributes = {
@@ -431,7 +491,8 @@ local Accordion = React.forwardRef(function(props, ref)
 	end
 	_attributes.name = _condition
 	_attributes.width = "100%"
-	_attributes.height = "100%"
+	_attributes.height = if props.autoSize then nil else "100%"
+	_attributes.AutomaticSize = if props.autoSize then Enum.AutomaticSize.Y else nil
 	_attributes.ClipsDescendants = true
 	local _exp = React.createElement(Corners, {
 		radius = theme.components.accordion.cornerRadius,
@@ -459,6 +520,11 @@ local Accordion = React.forwardRef(function(props, ref)
 			_condition_1 = theme.components.accordion.animation.duration
 		end
 		_attributes_1.duration = _condition_1
+		local _condition_2 = props.keepMounted
+		if _condition_2 == nil then
+			_condition_2 = false
+		end
+		_attributes_1.keepMounted = _condition_2
 		_attributes_1.onActivate = function()
 			return activate(item)
 		end

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

@@ -1,15 +1,18 @@
 import React from "@rbxts/react";
 import { DroppableRegistration } from "../../Providers";
+import { DragEventInfo } from "../../Contexts";
 type GuiObjectProps = React.InstanceProps<GuiObject>;
 type GuiElement = React.ReactElement<GuiObjectProps>;
 interface DragHandleProps {
     children: GuiElement;
 }
 declare function DragHandle({ children }: DragHandleProps): React.ReactElement<GuiObjectProps, string | React.JSXElementConstructor<any>>;
-interface DraggableProps {
-    onDropped?: (droppable?: DroppableRegistration) => void;
-    onDragged?: (droppable?: DroppableRegistration) => void;
-    onStartDrag?: () => void;
+export interface DraggableProps {
+    onDropped?: (droppable: DroppableRegistration | undefined, info: DragEventInfo) => void;
+    onDragged?: (droppable: DroppableRegistration | undefined, info: DragEventInfo) => void;
+    onStartDrag?: (info: DragEventInfo) => void;
+    inputTypes?: Enum.UserInputType[];
+    renderOverlay?: () => React.ReactNode;
     placeholder?: boolean;
     retainPosition?: boolean;
     children: GuiElement;