@rbxts/react-clean-ui 1.0.14 → 1.0.36

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

@@ -1,5 +1,5 @@
-import React, { Component, ReactNode } from "@rbxts/react";
-import { DroppableRegistration, RegistryContext } from "../../Providers";
+import React from "@rbxts/react";
+import { DroppableRegistration } from "../../Providers";
 type GuiObjectProps = React.InstanceProps<GuiObject>;
 type GuiElement = React.ReactElement<GuiObjectProps>;
 interface DragHandleProps {
@@ -15,32 +15,8 @@ interface DraggableProps {
     children: GuiElement;
     id?: string;
 }
-interface DraggableState {
-    dragging: boolean;
-    overlayPosition: Vector2;
-    overlaySize: Vector2;
-    placeholderPosition: UDim2;
-    placeholderAnchorPoint: Vector2;
-    placeholderLayoutOrder: number;
-    placeholderZIndex: number;
-}
-export declare class Draggable extends Component<DraggableProps, DraggableState> {
-    static Handle: typeof DragHandle;
-    readonly state: DraggableState;
-    static contextType: React.Context<import("../../Providers").RegistryContextValue | undefined>;
-    context: React.ContextType<typeof RegistryContext>;
-    rootRef: React.RefObject<GuiObject>;
-    private readonly placeholderRef;
-    private dragInformation;
-    private usePlaceholder;
-    private registration;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private beginDrag;
-    private updateDrag;
-    private endDrag;
-    private findDroppable;
-    private readonly contextValue;
-    render(): ReactNode;
-}
-export {};
+type DraggableComponent = React.ForwardRefExoticComponent<DraggableProps & React.RefAttributes<Frame>> & {
+    Handle: typeof DragHandle;
+};
+declare const Draggable: DraggableComponent;
+export { Draggable };

package/out/Components/Layout/Draggable.luau

@@ -1,10 +1,6 @@
 -- 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 Component = _react.Component
-local ReactComponent = _react.ReactComponent
-local useContext = _react.useContext
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local GuiHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").GuiHelper
 local _Providers = TS.import(script, script.Parent.Parent.Parent, "Providers")
 local DraggableRegistryKey = _Providers.DraggableRegistryKey
@@ -65,7 +61,7 @@ local function DragHandle(_param)
 	return React.cloneElement(children, _object)
 end
 local function Placeholder(props)
-	local theme = useContext(CleanThemeContext)
+	local theme = React.useContext(CleanThemeContext)
 	local _attributes = table.clone(props)
 	setmetatable(_attributes, nil)
 	_attributes.BackgroundTransparency = theme.components.draggable.placeholder.backgroundTransparency
@@ -78,180 +74,32 @@ local function Placeholder(props)
 		radius = theme.components.draggable.placeholder.cornerRadius,
 	}))
 end
-local Draggable
-do
-	local super = Component
-	Draggable = setmetatable({}, {
-		__tostring = function()
-			return "Draggable"
-		end,
-		__index = super,
+local Draggable = React.forwardRef(function(props, _ref)
+	local dragging, setDragging = React.useState(false)
+	local overlayPosition, setOverlayPosition = React.useState(Vector2.zero)
+	local overlaySize, setOverlaySize = React.useState(Vector2.zero)
+	local placeholderPosition, setPlaceholderPosition = React.useState({
+		Position = UDim2.fromOffset(0, 0),
+		AnchorPoint = Vector2.zero,
+		LayoutOrder = 0,
+		ZIndex = 1,
 	})
-	Draggable.__index = Draggable
-	function Draggable.new(...)
-		local self = setmetatable({}, Draggable)
-		return self:constructor(...) or self
+	local registry = React.useContext(RegistryContext)
+	local rootRef = React.useRef()
+	local placeholderRef = React.useRef()
+	local dragInformationRef = React.useRef()
+	local _condition = props.placeholder
+	if _condition == nil then
+		_condition = true
 	end
-	function Draggable:constructor(...)
-		super.constructor(self, ...)
-		self.state = {
-			dragging = false,
-			overlayPosition = Vector2.zero,
-			overlaySize = Vector2.zero,
-			placeholderPosition = UDim2.fromOffset(0, 0),
-			placeholderAnchorPoint = Vector2.zero,
-			placeholderLayoutOrder = 0,
-			placeholderZIndex = 1,
-		}
-		self.rootRef = React.createRef()
-		self.placeholderRef = React.createRef()
-		local _condition = self.props.placeholder
-		if _condition == nil then
-			_condition = true
-		end
-		self.usePlaceholder = _condition
-		self.beginDrag = function(input, handle)
-			local root = self.rootRef.current
-			if root == nil then
-				return nil
-			end
-			local _allDraggables = self.context
-			if _allDraggables ~= nil then
-				_allDraggables = _allDraggables.getAll(DraggableRegistryKey)
-			end
-			local allDraggables = _allDraggables
-			local _result = allDraggables
-			if _result ~= nil then
-				-- ▼ ReadonlyArray.some ▼
-				local _result_1 = false
-				local _callback = function(registration)
-					return registration.draggable.isDragging
-				end
-				for _k, _v in _result do
-					if _callback(_v, _k - 1, _result) then
-						_result_1 = true
-						break
-					end
-				end
-				-- ▲ ReadonlyArray.some ▲
-				_result = _result_1
-			end
-			if _result then
-				return nil
-			end
-			if self.registration ~= nil then
-				self.registration.draggable.isDragging = true
-			end
-			self.dragInformation = {
-				input = input,
-				inputStart = Vector2.new(input.Position.X, input.Position.Y),
-				absolutePositionStart = root.AbsolutePosition,
-				positionStart = root.Position,
-			}
-			local _result_1 = self.props.onStartDrag
-			if _result_1 ~= nil then
-				_result_1()
-			end
-			self:setState({
-				dragging = true,
-				overlayPosition = root.AbsolutePosition,
-				overlaySize = root.AbsoluteSize,
-				placeholderPosition = root.Position,
-				placeholderAnchorPoint = root.AnchorPoint,
-				placeholderLayoutOrder = root.LayoutOrder,
-				placeholderZIndex = root.ZIndex,
-			})
-		end
-		self.updateDrag = function(input)
-			local root = self.rootRef.current
-			local drag = self.dragInformation
-			if root == nil or drag == nil then
-				return nil
-			end
-			local inputPosition = Vector2.new(input.Position.X, input.Position.Y)
-			local _inputStart = drag.inputStart
-			local delta = inputPosition - _inputStart
-			local overlayPosition = drag.absolutePositionStart + delta
-			local dropRegisteration = self:findDroppable(root, Vector2.new(input.Position.X, input.Position.Y))
-			local _result = self.props.onDragged
-			if _result ~= nil then
-				_result(dropRegisteration)
-			end
-			self:setState({
-				overlayPosition = overlayPosition,
-			})
-		end
-		self.endDrag = function(input)
-			local root = self.rootRef.current
-			local drag = self.dragInformation
-			if root == nil or drag == nil then
-				return nil
-			end
-			if self.registration then
-				self.registration.draggable.isDragging = false
-			end
-			local dropRegisteration = self:findDroppable(root, Vector2.new(input.Position.X, input.Position.Y))
-			self.dragInformation = nil
-			local _result = self.props.onDropped
-			if _result ~= nil then
-				_result(dropRegisteration)
-			end
-			if self.props.retainPosition then
-				local parent = root.Parent
-				local _result_1 = parent
-				if _result_1 ~= nil then
-					_result_1 = _result_1:IsA("GuiObject")
-				end
-				if _result_1 then
-					local _overlayPosition = self.state.overlayPosition
-					local _absolutePosition = parent.AbsolutePosition
-					local localTopLeft = _overlayPosition - _absolutePosition
-					local _absoluteSize = root.AbsoluteSize
-					local _anchorPoint = root.AnchorPoint
-					local anchorOffset = _absoluteSize * _anchorPoint
-					root.Position = UDim2.fromOffset(localTopLeft.X + anchorOffset.X, localTopLeft.Y + anchorOffset.Y)
-				end
-			end
-			self:setState({
-				dragging = false,
-			})
-		end
-		self.contextValue = {
-			isDragging = false,
-			beginDrag = self.beginDrag,
-			updateDrag = self.updateDrag,
-			endDrag = self.endDrag,
-		}
-	end
-	function Draggable:componentDidMount()
-		local registry = self.context
-		local root = self.rootRef.current
-		if registry == nil or root == nil then
-			return nil
-		end
-		local registration = {
-			guiObject = root,
-			id = self.props.id,
-			draggable = self.contextValue,
-		}
-		self.registration = registration
-		registry.register(root, DraggableRegistryKey, registration)
-	end
-	function Draggable:componentWillUnmount()
-		local registry = self.context
-		local registration = self.registration
-		if registry == nil or registration == nil then
-			return nil
-		end
-		registry.unregister(registration.guiObject, DraggableRegistryKey)
-		self.registration = nil
-	end
-	function Draggable:findDroppable(instance, position)
+	local usePlaceholder = _condition
+	local registrationRef = React.useRef()
+	local findDroppable = React.useCallback(function(instance, position)
 		local result
 		local _exp = GuiHelper:getGuiObjectsAtPosition(instance, position)
 		-- ▼ ReadonlyArray.forEach ▼
 		local _callback = function(guiObject)
-			local _registryEntry = self.context
+			local _registryEntry = registry
 			if _registryEntry ~= nil then
 				_registryEntry = _registryEntry.get(guiObject, DroppableRegistryKey)
 			end
@@ -269,47 +117,175 @@ do
 		end
 		-- ▲ ReadonlyArray.forEach ▲
 		return result
-	end
-	function Draggable:render()
-		local original = React.cloneElement(self.props.children, {
-			ref = self.rootRef,
-			Visible = not self.state.dragging,
-		})
-		local placeholder = (React.createElement(Placeholder, {
-			ref = self.placeholderRef,
-			Position = self.state.placeholderPosition,
-			AnchorPoint = self.state.placeholderAnchorPoint,
-			Size = UDim2.fromOffset(self.state.overlaySize.X, self.state.overlaySize.Y),
-			AutomaticSize = Enum.AutomaticSize.None,
-			BackgroundTransparency = 0.3,
-			LayoutOrder = self.state.placeholderLayoutOrder,
-			ZIndex = self.state.placeholderZIndex,
-		}))
-		return React.createElement(DraggableContext.Provider, {
-			value = self.contextValue,
-		}, self.usePlaceholder and self.state.dragging and placeholder, original, React.createElement(OverlayConsumer, {
-			render = function(overlay)
-				if not self.state.dragging or overlay == nil then
-					return nil
+	end, { registry })
+	local beginDrag = React.useCallback(function(input, handle)
+		local root = rootRef.current
+		local registration = registrationRef.current
+		if root == nil then
+			return nil
+		end
+		local _allDraggables = registry
+		if _allDraggables ~= nil then
+			_allDraggables = _allDraggables.getAll(DraggableRegistryKey)
+		end
+		local allDraggables = _allDraggables
+		local _result = allDraggables
+		if _result ~= nil then
+			-- ▼ ReadonlyArray.some ▼
+			local _result_1 = false
+			local _callback = function(registration)
+				return registration.draggable.isDragging
+			end
+			for _k, _v in _result do
+				if _callback(_v, _k - 1, _result) then
+					_result_1 = true
+					break
 				end
-				local _overlayPosition = self.state.overlayPosition
-				local _absolutePosition = overlay.AbsolutePosition
-				local localPosition = _overlayPosition - _absolutePosition
-				return createPortal(React.cloneElement(self.props.children, {
-					Position = UDim2.fromOffset(localPosition.X, localPosition.Y),
-					Size = UDim2.fromOffset(self.state.overlaySize.X, self.state.overlaySize.Y),
-					AnchorPoint = Vector2.zero,
-					AutomaticSize = Enum.AutomaticSize.None,
-					Visible = true,
-					ZIndex = 100001,
-				}), overlay)
-			end,
-		}))
-	end
-	Draggable.Handle = DragHandle
-	Draggable.contextType = RegistryContext
-	Draggable = ReactComponent(Draggable) or Draggable
-end
+			end
+			-- ▲ ReadonlyArray.some ▲
+			_result = _result_1
+		end
+		if _result then
+			return nil
+		end
+		if registration ~= nil then
+			registration.draggable.isDragging = true
+		end
+		dragInformationRef.current = {
+			input = input,
+			inputStart = Vector2.new(input.Position.X, input.Position.Y),
+			absolutePositionStart = root.AbsolutePosition,
+			positionStart = root.Position,
+		}
+		local _result_1 = props.onStartDrag
+		if _result_1 ~= nil then
+			_result_1()
+		end
+		setDragging(true)
+		setOverlayPosition(root.AbsolutePosition)
+		setOverlaySize(root.AbsoluteSize)
+		setPlaceholderPosition({
+			Position = root.Position,
+			AnchorPoint = root.AnchorPoint,
+			LayoutOrder = root.LayoutOrder,
+			ZIndex = root.ZIndex,
+		})
+	end, { registry, props.onStartDrag })
+	local updateDrag = React.useCallback(function(input)
+		local root = rootRef.current
+		local dragInformation = dragInformationRef.current
+		if root == nil or dragInformation == nil then
+			return nil
+		end
+		local inputPosition = Vector2.new(input.Position.X, input.Position.Y)
+		local _inputStart = dragInformation.inputStart
+		local delta = inputPosition - _inputStart
+		local dropRegisteration = findDroppable(root, Vector2.new(input.Position.X, input.Position.Y))
+		local _result = props.onDragged
+		if _result ~= nil then
+			_result(dropRegisteration)
+		end
+		setOverlayPosition(dragInformation.absolutePositionStart + delta)
+	end, { findDroppable, props.onDragged })
+	local endDrag = React.useCallback(function(input)
+		local root = rootRef.current
+		local dragInformation = dragInformationRef.current
+		local registration = registrationRef.current
+		if root == nil or dragInformation == nil then
+			return nil
+		end
+		if registration then
+			registration.draggable.isDragging = false
+		end
+		local dropRegisteration = findDroppable(root, Vector2.new(input.Position.X, input.Position.Y))
+		dragInformationRef.current = nil
+		local _result = props.onDropped
+		if _result ~= nil then
+			_result(dropRegisteration)
+		end
+		if props.retainPosition then
+			local parent = root.Parent
+			local _result_1 = parent
+			if _result_1 ~= nil then
+				_result_1 = _result_1:IsA("GuiObject")
+			end
+			if _result_1 then
+				local inputPosition = Vector2.new(input.Position.X, input.Position.Y)
+				local _inputStart = dragInformation.inputStart
+				local delta = inputPosition - _inputStart
+				local finalOverlayPosition = dragInformation.absolutePositionStart + delta
+				local _absolutePosition = parent.AbsolutePosition
+				local localTopLeft = finalOverlayPosition - _absolutePosition
+				local _absoluteSize = root.AbsoluteSize
+				local _anchorPoint = root.AnchorPoint
+				local anchorOffset = _absoluteSize * _anchorPoint
+				root.Position = UDim2.fromOffset(localTopLeft.X + anchorOffset.X, localTopLeft.Y + anchorOffset.Y)
+			end
+		end
+		setDragging(false)
+	end, { findDroppable, props.onDropped, props.retainPosition })
+	local contextValue = React.useMemo(function()
+		return {
+			isDragging = false,
+			beginDrag = beginDrag,
+			updateDrag = updateDrag,
+			endDrag = endDrag,
+		}
+	end, { beginDrag, updateDrag, endDrag })
+	React.useEffect(function()
+		local root = rootRef.current
+		if registry == nil or root == nil then
+			return nil
+		end
+		local registration = {
+			guiObject = root,
+			id = props.id,
+			draggable = contextValue,
+		}
+		registrationRef.current = registration
+		registry.register(root, DraggableRegistryKey, registration)
+		return function()
+			registry.unregister(registration.guiObject, DraggableRegistryKey)
+			if registrationRef.current == registration then
+				registrationRef.current = nil
+			end
+		end
+	end, { registry, props.id, contextValue })
+	local original = React.cloneElement(props.children, {
+		ref = rootRef,
+		Visible = not dragging,
+	})
+	local placeholder = (React.createElement(Placeholder, {
+		ref = placeholderRef,
+		Position = placeholderPosition.Position,
+		AnchorPoint = placeholderPosition.AnchorPoint,
+		Size = UDim2.fromOffset(overlaySize.X, overlaySize.Y),
+		AutomaticSize = Enum.AutomaticSize.None,
+		BackgroundTransparency = 0.3,
+		LayoutOrder = placeholderPosition.LayoutOrder,
+		ZIndex = placeholderPosition.ZIndex,
+	}))
+	return React.createElement(DraggableContext.Provider, {
+		value = contextValue,
+	}, usePlaceholder and dragging and placeholder, original, React.createElement(OverlayConsumer, {
+		render = function(overlay)
+			if not dragging or overlay == nil then
+				return nil
+			end
+			local _absolutePosition = overlay.AbsolutePosition
+			local localPosition = overlayPosition - _absolutePosition
+			return createPortal(React.cloneElement(props.children, {
+				Position = UDim2.fromOffset(localPosition.X, localPosition.Y),
+				Size = UDim2.fromOffset(overlaySize.X, overlaySize.Y),
+				AnchorPoint = Vector2.zero,
+				AutomaticSize = Enum.AutomaticSize.None,
+				Visible = true,
+				ZIndex = 100001,
+			}), overlay)
+		end,
+	}))
+end)
+Draggable.Handle = DragHandle
 return {
 	Draggable = Draggable,
 }

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

@@ -1,10 +1,9 @@
-import React, { Component } from "@rbxts/react";
-import { CleanThemeContext } from "../../Contexts";
+import React from "@rbxts/react";
 import { Breakpoint, BreakPointElementProps } from "../../Interfaces";
 export interface FieldsetContextValue {
     disabled: boolean;
     checkbox: boolean;
-    labelActivated?: BindableEvent;
+    labelActivated: BindableEvent;
 }
 export declare const FieldsetContext: React.Context<FieldsetContextValue | undefined>;
 interface FieldsetProps extends BreakPointElementProps {
@@ -17,18 +16,9 @@ interface FieldsetSlotProps {
 }
 declare function FieldsetLabel(props: FieldsetSlotProps): React.JSX.Element;
 declare function FieldsetControl(props: FieldsetSlotProps): React.JSX.Element;
-interface FieldsetState {
-    width: number;
-}
-export declare class Fieldset extends Component<FieldsetProps, FieldsetState> {
-    static Label: typeof FieldsetLabel;
-    static Control: typeof FieldsetControl;
-    static contextType: React.Context<import("../..").CleanTheme>;
-    context: React.ContextType<typeof CleanThemeContext>;
-    private readonly labelActivated;
-    private fieldsetContext;
-    private getFieldsetContext;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-}
-export {};
+type FieldsetComponent = React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<Frame>> & {
+    Label: typeof FieldsetLabel;
+    Control: typeof FieldsetControl;
+};
+declare const Fieldset: FieldsetComponent;
+export { Fieldset };

package/out/Components/Layout/Fieldset.luau

@@ -1,9 +1,6 @@
 -- 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 Component = _react.Component
-local ReactComponent = _react.ReactComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local FlexItem = TS.import(script, script.Parent, "FlexItem").FlexItem
 local Container = TS.import(script, script.Parent, "Container").Container
 local HStack = TS.import(script, script.Parent, "HStack").HStack
@@ -24,10 +21,7 @@ local function FieldsetLabel(props)
 		AutomaticSize = Enum.AutomaticSize.XY,
 		Event = {
 			Activated = function()
-				local _result = context.labelActivated
-				if _result ~= nil then
-					_result:Fire()
-				end
+				context.labelActivated:Fire()
 			end,
 		},
 	}, props.children))
@@ -42,88 +36,52 @@ local function FieldsetControl(props)
 		GrowRatio = if context.checkbox then 0 else 1,
 	}, props.children)
 end
-local Fieldset
-do
-	local super = Component
-	Fieldset = setmetatable({}, {
-		__tostring = function()
-			return "Fieldset"
-		end,
-		__index = super,
-	})
-	Fieldset.__index = Fieldset
-	function Fieldset.new(...)
-		local self = setmetatable({}, Fieldset)
-		return self:constructor(...) or self
-	end
-	function Fieldset:constructor(...)
-		super.constructor(self, ...)
-		self.labelActivated = Instance.new("BindableEvent")
-		self.fieldsetContext = {
-			disabled = false,
-			checkbox = false,
-			labelActivated = self.labelActivated,
-		}
-	end
-	function Fieldset:getFieldsetContext()
-		local _condition = self.props.disabled
+local Fieldset = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local width, setWidth = React.useState(0)
+	local labelActivated = React.useRef(Instance.new("BindableEvent")).current
+	React.useEffect(function()
+		return function()
+			labelActivated:Destroy()
+		end
+	end, {})
+	local fieldsetContext = React.useMemo(function()
+		local _object = {}
+		local _left = "disabled"
+		local _condition = props.disabled
 		if _condition == nil then
 			_condition = false
 		end
-		local disabled = _condition
-		local _condition_1 = self.props.checkbox
+		_object[_left] = _condition
+		local _left_1 = "checkbox"
+		local _condition_1 = props.checkbox
 		if _condition_1 == nil then
 			_condition_1 = false
 		end
-		local checkbox = _condition_1
-		if self.fieldsetContext.disabled ~= disabled or self.fieldsetContext.checkbox ~= checkbox then
-			self.fieldsetContext = {
-				disabled = disabled,
-				checkbox = checkbox,
-				labelActivated = self.labelActivated,
-			}
-		end
-		return self.fieldsetContext
-	end
-	function Fieldset:componentWillUnmount()
-		self.labelActivated:Destroy()
-	end
-	function Fieldset:render()
-		local context = self:getFieldsetContext()
-		local wrap = false
-		local breakpoints = (if self.props.breakpoints ~= nil then self.props.breakpoints else self.context.breakpoints)
-		local _condition = self.state.width
-		if _condition == nil then
-			_condition = 0
-		end
-		local breakpoint = BreakpointHelper:getBreakpoint(_condition, breakpoints)
-		if BreakpointHelper:compare(breakpoint, "<=", self.props.wrap or "lg") then
-			wrap = true
-		end
-		return React.createElement(FieldsetContext.Provider, {
-			value = context,
-		}, React.createElement(Container, {
-			Change = {
-				AbsoluteSize = function(instance)
-					local width = instance.AbsoluteSize.X
-					if width ~= self.state.width then
-						self:setState({
-							width = width,
-						})
-					end
-				end,
-			},
-		}, React.createElement(HStack, {
-			Wraps = wrap,
-			valign = "Center",
-			HorizontalFlex = Enum.UIFlexAlignment.Fill,
-		}, self.props.children)))
-	end
-	Fieldset.Label = FieldsetLabel
-	Fieldset.Control = FieldsetControl
-	Fieldset.contextType = CleanThemeContext
-	Fieldset = ReactComponent(Fieldset) or Fieldset
-end
+		_object[_left_1] = _condition_1
+		_object.labelActivated = labelActivated
+		return _object
+	end, { props.disabled, props.checkbox })
+	local breakpoints = props.breakpoints or theme.breakpoints
+	local breakpoint = BreakpointHelper:getBreakpoint(width, breakpoints)
+	local wrap = BreakpointHelper:compare(breakpoint, "<=", props.wrap or "lg")
+	return React.createElement(FieldsetContext.Provider, {
+		value = fieldsetContext,
+	}, React.createElement(Container, {
+		ref = ref,
+		Change = {
+			AbsoluteSize = function(instance)
+				setWidth(instance.AbsoluteSize.X)
+			end,
+		},
+	}, React.createElement(HStack, {
+		Wraps = wrap,
+		valign = "Center",
+		HorizontalFlex = Enum.UIFlexAlignment.Fill,
+	}, props.children)))
+end)
+Fieldset.Label = FieldsetLabel
+Fieldset.Control = FieldsetControl
 return {
 	FieldsetContext = FieldsetContext,
 	Fieldset = Fieldset,