@rbxts/uiblox 0.1.53 → 0.2.0-alpha.1

package/out/ui/packages/init.luau

@@ -1,6 +1,12 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "circularProgress") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "skeleton") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "divider") or {} do
 	exports[_k] = _v
 end
@@ -25,6 +31,9 @@ end
 for _k, _v in TS.import(script, script, "progressBar") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "scroll") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "shadow") or {} do
 	exports[_k] = _v
 end
@@ -43,7 +52,145 @@ end
 for _k, _v in TS.import(script, script, "button") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "checkbox") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "colorPicker") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "fontEditor") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "loadingStroke") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "numberInput") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "numberRangeEditor") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "rectEditor") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "rayEditor") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "physicalPropertiesEditor") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "udimEditor") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "vectorEditor") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "cframeEditor") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "enumPicker") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "popup") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "modal") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "dialog") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "paper") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "card") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "chip") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "badge") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "brickColorPicker") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "avatar") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "assetField") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "gradientEditor") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "drawer") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "breadcrumbs") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "pagination") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "stepper") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "accordion") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "snackbar") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "table") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "autocomplete") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "fab") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "appBar") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "bottomNavigation") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "listItem") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "menu") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "motion") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "radioGroup") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "select") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "slider") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "splitPane") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "stateMatrix") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "switch") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "tabs") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "tooltip") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "virtualList") or {} do
+	exports[_k] = _v
+end
 return exports

package/out/ui/packages/input/components/Input.d.ts

@@ -1,9 +1,11 @@
-import { CustomizedProps } from "../../../../theme/index";
+import React from "@rbxts/react";
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
 import { InputColor, InputMargin, InputVariant } from "../types/index";
 export type DefaultInputComponent = Frame;
 export interface InputProps {
     color?: InputColor;
     disabled?: boolean;
+    loading?: boolean;
     hasError?: boolean;
     helperText?: string;
     margin?: InputMargin;
@@ -13,7 +15,12 @@ export interface InputProps {
     placeholder?: string;
     rounded?: boolean;
     clearsTextOnFocus?: boolean;
+    size?: ControlSize;
+    reducedMotion?: boolean;
+    startAdornment?: React.Element;
+    endAdornment?: React.Element;
     onTextChanged?: (text: string) => void;
+    onInput?: (text: string) => void;
     onFocus?: () => void;
     onBlur?: () => void;
     onEnterPressed?: (text: string) => void;

package/out/ui/packages/input/components/Input.luau

@@ -2,11 +2,27 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
 local useState = _react.useState
-local classNames = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").classNames
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local cx = _theme.cx
+local useTheme = _theme.useTheme
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local spinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").spinnerPixels
+local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
 local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local useInputStyles = TS.import(script, script.Parent, "Input.styles").default
+local syncInputDraft = TS.import(script, script.Parent, "inputDraft").syncInputDraft
+local function adornmentAlign()
+	return React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})
+end
 local function Input(props)
 	local _binding = props
 	local text = _binding.text
@@ -20,6 +36,10 @@ local function Input(props)
 	if disabled == nil then
 		disabled = false
 	end
+	local loading = _binding.loading
+	if loading == nil then
+		loading = false
+	end
 	local hasError = _binding.hasError
 	if hasError == nil then
 		hasError = false
@@ -28,29 +48,55 @@ local function Input(props)
 	if rounded == nil then
 		rounded = false
 	end
+	local size = _binding.size
+	local reducedMotion = _binding.reducedMotion
+	local startAdornment = _binding.startAdornment
+	local endAdornment = _binding.endAdornment
 	local onTextChanged = _binding.onTextChanged
+	local onInput = _binding.onInput
 	local onFocus = _binding.onFocus
 	local onBlur = _binding.onBlur
 	local onEnterPressed = _binding.onEnterPressed
 	local className = _binding.className
+	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local _binding_1 = useInputStyles(props)
-	local root = _binding_1.root
-	local font = _binding_1.font
-	local margin = _binding_1.margin
-	local box = _binding_1.box
-	local helper = _binding_1.helper
-	local errorColorFrame = _binding_1.errorColorFrame
-	local errorColorText = _binding_1.errorColorText
-	local divider = _binding_1.divider
-	local corner = _binding_1.corner
-	local stroke = _binding_1.stroke
+	local focusedRef = useRef(false)
+	local entered = useRef(false)
 	local _condition = text
 	if _condition == nil then
 		_condition = ""
 	end
-	local input, setInput = useState(_condition)
+	local draft, setDraft = useState(_condition)
+	local focused, setFocused = useState(false)
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local editable = canActivate(disabled, loading)
+	local endSlotContent = if loading then nil else endAdornment
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	_object.focused = focused
+	local _binding_2 = useInputStyles(_object)
+	local root = _binding_2.root
+	local font = _binding_2.font
+	local margin = _binding_2.margin
+	local shell = _binding_2.shell
+	local box = _binding_2.box
+	local startSlot = _binding_2.startSlot
+	local endSlot = _binding_2.endSlot
+	local helper = _binding_2.helper
+	local errorColorFrame = _binding_2.errorColorFrame
+	local errorColorText = _binding_2.errorColorText
+	local divider = _binding_2.divider
+	local corner = _binding_2.corner
+	local stroke = _binding_2.stroke
+	useEffect(function()
+		setDraft(function(current)
+			return syncInputDraft(focusedRef.current, text, current)
+		end)
+	end, { text })
+	local showStroke = variant == "outlined" or variant == "filled"
+	local showCorner = rounded
 	local _attributes = {}
 	local _condition_1 = id
 	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
@@ -66,6 +112,11 @@ local function Input(props)
 			_attributes[_k] = _v
 		end
 	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _attributes_1 = {
 		key = "Margin",
 	}
@@ -73,81 +124,150 @@ local function Input(props)
 		_attributes_1[_k] = _v
 	end
 	local _attributes_2 = {
+		key = "Shell",
+	}
+	for _k, _v in shell do
+		_attributes_2[_k] = _v
+	end
+	local _condition_2 = showStroke
+	if _condition_2 then
+		local _attributes_3 = table.clone(stroke)
+		setmetatable(_attributes_3, nil)
+		_condition_2 = React.createElement("uistroke", _attributes_3)
+	end
+	local _condition_3 = showCorner
+	if _condition_3 then
+		local _attributes_3 = table.clone(corner)
+		setmetatable(_attributes_3, nil)
+		_condition_3 = React.createElement("uicorner", _attributes_3)
+	end
+	local _condition_4 = startAdornment ~= nil
+	if _condition_4 then
+		local _attributes_3 = {
+			key = "Start",
+		}
+		for _k, _v in startSlot do
+			_attributes_3[_k] = _v
+		end
+		_condition_4 = (React.createElement("frame", _attributes_3, adornmentAlign(), startAdornment))
+	end
+	local _attributes_3 = {
 		key = "Field",
 	}
 	for _k, _v in font do
-		_attributes_2[_k] = _v
+		_attributes_3[_k] = _v
 	end
 	for _k, _v in box do
-		_attributes_2[_k] = _v
+		_attributes_3[_k] = _v
 	end
-	_attributes_2.Active = not disabled
-	_attributes_2.Text = input
-	_attributes_2.PlaceholderText = placeholder
-	for _k, _v in classNames({
-		[errorColorText] = hasError,
-	}) do
-		_attributes_2[_k] = _v
+	_attributes_3.Active = editable
+	_attributes_3.TextEditable = editable
+	_attributes_3.Text = draft
+	_attributes_3.PlaceholderText = placeholder
+	for _k, _v in cx(hasError and errorColorText) do
+		_attributes_3[_k] = _v
 	end
-	_attributes_2.Event = {
+	_attributes_3.Change = {
+		Text = function(rbx)
+			if not editable then
+				return nil
+			end
+			setDraft(rbx.Text)
+			if focusedRef.current and onInput then
+				onInput(rbx.Text)
+			end
+		end,
+	}
+	_attributes_3.Event = {
+		Focused = function()
+			if not editable then
+				return nil
+			end
+			focusedRef.current = true
+			entered.current = false
+			setFocused(true)
+			if onFocus then
+				onFocus()
+			end
+		end,
 		ReturnPressedFromOnScreenKeyboard = function(rbx)
-			if onEnterPressed then
-				local text = rbx.Text
-				onEnterPressed(text)
+			if not editable or entered.current or not onEnterPressed then
+				return nil
 			end
+			entered.current = true
+			onEnterPressed(rbx.Text)
 		end,
-		Focused = onFocus,
-		FocusLost = function(rbx)
-			if onTextChanged then
-				local text = rbx.Text
-				onTextChanged(text)
+		FocusLost = function(rbx, enterPressed)
+			focusedRef.current = false
+			setFocused(false)
+			local committed = rbx.Text
+			if editable and onTextChanged then
+				onTextChanged(committed)
 			end
+			if editable and enterPressed and not entered.current and onEnterPressed then
+				onEnterPressed(committed)
+			end
+			entered.current = false
 			if onBlur then
 				onBlur()
 			end
+			local _condition_5 = text
+			if _condition_5 == nil then
+				_condition_5 = ""
+			end
+			setDraft(_condition_5)
 		end,
 	}
-	local _condition_2 = variant == "outlined"
-	if _condition_2 then
-		local _attributes_3 = table.clone(stroke)
-		setmetatable(_attributes_3, nil)
-		_condition_2 = React.createElement("uistroke", _attributes_3)
+	local _exp = React.createElement("textbox", _attributes_3)
+	local _condition_5 = loading
+	if _condition_5 then
+		local _attributes_4 = {
+			key = "End",
+		}
+		for _k, _v in endSlot do
+			_attributes_4[_k] = _v
+		end
+		_condition_5 = (React.createElement("frame", _attributes_4, adornmentAlign(), React.createElement(CircularProgress, {
+			size = spinnerPixels(size),
+			thickness = 2,
+			color = theme.palette.text.secondary,
+			reducedMotion = reducedMotion,
+		})))
 	end
-	local _condition_3 = rounded
-	if _condition_3 then
-		local _attributes_3 = table.clone(corner)
-		setmetatable(_attributes_3, nil)
-		_condition_3 = React.createElement("uicorner", _attributes_3)
+	local _condition_6 = endSlotContent ~= nil
+	if _condition_6 then
+		local _attributes_4 = {
+			key = "End",
+		}
+		for _k, _v in endSlot do
+			_attributes_4[_k] = _v
+		end
+		_condition_6 = (React.createElement("frame", _attributes_4, adornmentAlign(), endSlotContent))
 	end
-	local _exp = React.createElement("textbox", _attributes_2, _condition_2, _condition_3)
-	local _exp_1 = React.createElement(Divider, {
+	local _exp_1 = React.createElement("frame", _attributes_2, _condition_2, _condition_3, _condition_4, _exp, _condition_5, _condition_6)
+	local _exp_2 = variant == "standard" and (React.createElement(Divider, {
 		padding = 0,
 		orientation = Orientations.Horizontal,
-		className = classNames({
-			[errorColorFrame] = hasError,
-			[divider] = true,
-		}),
-	})
-	local _condition_4 = helperText ~= nil
-	if _condition_4 then
-		local _attributes_3 = {
+		className = cx(divider, hasError and errorColorFrame),
+	}))
+	local _condition_7 = helperText ~= nil
+	if _condition_7 then
+		local _attributes_4 = {
 			key = "HelperText",
 		}
 		for _k, _v in font do
-			_attributes_3[_k] = _v
+			_attributes_4[_k] = _v
 		end
 		for _k, _v in helper do
-			_attributes_3[_k] = _v
+			_attributes_4[_k] = _v
 		end
-		for _k, _v in classNames({
-			[errorColorText] = hasError,
-		}) do
-			_attributes_3[_k] = _v
+		for _k, _v in cx(hasError and errorColorText) do
+			_attributes_4[_k] = _v
 		end
-		_attributes_3.Text = helperText
-		_condition_4 = (React.createElement("textlabel", _attributes_3))
+		_attributes_4.Text = helperText
+		_condition_7 = (React.createElement("textlabel", _attributes_4))
 	end
-	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _exp_1, _condition_4))
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp_1, _exp_2, _condition_7))
 end
 local default = Input
 return {

package/out/ui/packages/input/components/Input.styles.d.ts

@@ -1,3 +1,5 @@
 import { InputProps } from "./Input";
-declare const useInputStyles: (props: InputProps) => import("../../../../theme/index").ClassNameMap<string>;
+declare const useInputStyles: (props: InputProps & {
+    focused?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default useInputStyles;