@rbxts/uiblox 0.2.0-alpha.24 → 0.2.0-alpha.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/out/hooks/index.d.ts +1 -0
  2. package/out/hooks/init.luau +3 -0
  3. package/out/hooks/useBreakpoints.luau +2 -11
  4. package/out/hooks/viewportObserver.d.ts +10 -0
  5. package/out/hooks/viewportObserver.luau +75 -0
  6. package/out/theme/interfaces/theme/Theme.d.ts +15 -0
  7. package/out/theme/styles/utilities/componentStyles.luau +45 -3
  8. package/out/theme/styles/utilities/componentTheme.d.ts +15 -0
  9. package/out/theme/styles/utilities/index.d.ts +2 -0
  10. package/out/theme/styles/utilities/init.luau +7 -0
  11. package/out/theme/styles/utilities/resolveStyle.d.ts +10 -2
  12. package/out/theme/styles/utilities/resolveStyle.luau +7 -3
  13. package/out/theme/styles/utilities/resolveSx.d.ts +110 -0
  14. package/out/theme/styles/utilities/resolveSx.luau +479 -0
  15. package/out/theme/styles/utilities/styleCache.d.ts +2 -0
  16. package/out/theme/styles/utilities/styleCache.luau +9 -0
  17. package/out/ui/packages/accordion/components/Accordion.luau +12 -16
  18. package/out/ui/packages/alert/components/Alert.luau +9 -16
  19. package/out/ui/packages/appBar/components/AppBar.luau +9 -16
  20. package/out/ui/packages/assetField/components/AssetField.luau +12 -16
  21. package/out/ui/packages/avatar/components/Avatar.luau +9 -16
  22. package/out/ui/packages/backdrop/components/Backdrop.luau +9 -16
  23. package/out/ui/packages/badge/components/Badge.luau +9 -16
  24. package/out/ui/packages/bottomNavigation/components/BottomNavigation.luau +12 -16
  25. package/out/ui/packages/breadcrumbs/components/Breadcrumbs.luau +9 -16
  26. package/out/ui/packages/brickColorPicker/components/BrickColorPicker.luau +12 -16
  27. package/out/ui/packages/button/components/Button.luau +20 -18
  28. package/out/ui/packages/card/components/Card.d.ts +2 -1
  29. package/out/ui/packages/card/components/Card.luau +8 -0
  30. package/out/ui/packages/cframeEditor/components/CFrameEditor.luau +12 -16
  31. package/out/ui/packages/checkbox/components/Checkbox.luau +16 -16
  32. package/out/ui/packages/chip/components/Chip.luau +13 -16
  33. package/out/ui/packages/circularProgress/components/CircularProgress.luau +16 -16
  34. package/out/ui/packages/colorPicker/components/ColorPicker.luau +12 -16
  35. package/out/ui/packages/colorPicker/components/ColorSequenceEditor.luau +12 -16
  36. package/out/ui/packages/colorPicker/components/NumberSequenceEditor.luau +12 -16
  37. package/out/ui/packages/dialog/components/Dialog.d.ts +2 -1
  38. package/out/ui/packages/dialog/components/Dialog.luau +21 -10
  39. package/out/ui/packages/divider/components/Divider.luau +20 -33
  40. package/out/ui/packages/drawer/components/Drawer.d.ts +2 -1
  41. package/out/ui/packages/drawer/components/Drawer.luau +18 -5
  42. package/out/ui/packages/fab/components/Fab.luau +15 -16
  43. package/out/ui/packages/fontEditor/components/FontEditor.luau +12 -16
  44. package/out/ui/packages/formText/components/FormHelperText.luau +12 -16
  45. package/out/ui/packages/formText/components/FormLabel.luau +12 -16
  46. package/out/ui/packages/gradientEditor/components/GradientEditor.luau +12 -16
  47. package/out/ui/packages/host/components/SxHost.d.ts +18 -0
  48. package/out/ui/packages/host/components/SxHost.luau +197 -0
  49. package/out/ui/packages/host/hostPaint.d.ts +11 -0
  50. package/out/ui/packages/host/hostPaint.luau +33 -0
  51. package/out/ui/packages/host/hostRules.d.ts +15 -0
  52. package/out/ui/packages/host/hostRules.luau +92 -0
  53. package/out/ui/packages/host/index.d.ts +3 -0
  54. package/out/ui/packages/host/init.luau +13 -0
  55. package/out/ui/packages/icon/components/Icon.luau +9 -16
  56. package/out/ui/packages/iconButton/components/IconButton.luau +16 -16
  57. package/out/ui/packages/imageList/components/ImageList.luau +9 -16
  58. package/out/ui/packages/imageList/components/ImageList.styles.luau +4 -3
  59. package/out/ui/packages/input/components/Input.luau +14 -16
  60. package/out/ui/packages/layout/components/Box.luau +6 -15
  61. package/out/ui/packages/layout/components/Container.luau +6 -15
  62. package/out/ui/packages/layout/components/FlexItem.luau +6 -15
  63. package/out/ui/packages/layout/components/Grid.luau +6 -15
  64. package/out/ui/packages/layout/components/List.luau +9 -16
  65. package/out/ui/packages/layout/components/Stack.luau +6 -15
  66. package/out/ui/packages/link/components/Link.luau +13 -16
  67. package/out/ui/packages/listItem/components/ListItem.d.ts +2 -1
  68. package/out/ui/packages/listItem/components/ListItem.luau +23 -4
  69. package/out/ui/packages/loadingStroke/components/LoadingStroke.d.ts +5 -1
  70. package/out/ui/packages/loadingStroke/components/loadingStrokeSx.d.ts +11 -0
  71. package/out/ui/packages/loadingStroke/components/loadingStrokeSx.luau +2 -0
  72. package/out/ui/packages/markdown/components/Markdown.luau +9 -16
  73. package/out/ui/packages/markdown/components/MarkdownEditor.luau +9 -16
  74. package/out/ui/packages/menu/components/Menu.d.ts +2 -1
  75. package/out/ui/packages/menu/components/Menu.luau +23 -12
  76. package/out/ui/packages/modal/components/Modal.d.ts +2 -1
  77. package/out/ui/packages/modal/components/Modal.luau +29 -5
  78. package/out/ui/packages/numberInput/components/NumberInput.d.ts +1 -0
  79. package/out/ui/packages/numberInput/components/NumberInput.luau +14 -3
  80. package/out/ui/packages/numberInput/components/numberValue.d.ts +1 -0
  81. package/out/ui/packages/numberInput/components/numberValue.luau +45 -0
  82. package/out/ui/packages/numberRangeEditor/components/NumberRangeEditor.luau +12 -16
  83. package/out/ui/packages/pagination/components/Pagination.luau +12 -16
  84. package/out/ui/packages/paper/components/Paper.d.ts +2 -1
  85. package/out/ui/packages/paper/components/Paper.luau +21 -12
  86. package/out/ui/packages/physicalPropertiesEditor/components/PhysicalPropertiesEditor.luau +63 -38
  87. package/out/ui/packages/physicalPropertiesEditor/components/PhysicalPropertiesEditor.styles.luau +21 -7
  88. package/out/ui/packages/physicalPropertiesEditor/components/physicalParts.d.ts +2 -0
  89. package/out/ui/packages/physicalPropertiesEditor/components/physicalParts.luau +14 -0
  90. package/out/ui/packages/popup/components/Popup.d.ts +2 -1
  91. package/out/ui/packages/popup/components/Popup.luau +35 -18
  92. package/out/ui/packages/preloader/components/Preloader.luau +9 -16
  93. package/out/ui/packages/progressBar/components/ProgressBar.luau +12 -16
  94. package/out/ui/packages/radioGroup/components/RadioGroup.luau +12 -16
  95. package/out/ui/packages/rating/components/Rating.luau +12 -16
  96. package/out/ui/packages/rayEditor/components/RayEditor.luau +12 -16
  97. package/out/ui/packages/rectEditor/components/RectEditor.luau +86 -43
  98. package/out/ui/packages/rectEditor/components/RectEditor.styles.luau +30 -7
  99. package/out/ui/packages/select/components/Select.luau +13 -16
  100. package/out/ui/packages/shadow/components/Shadow.d.ts +2 -1
  101. package/out/ui/packages/shadow/components/Shadow.luau +17 -5
  102. package/out/ui/packages/sidebar/components/Sidebar.luau +9 -16
  103. package/out/ui/packages/skeleton/components/Skeleton.luau +19 -28
  104. package/out/ui/packages/slider/components/Slider.luau +16 -17
  105. package/out/ui/packages/speedDial/components/SpeedDial.luau +12 -16
  106. package/out/ui/packages/splitPane/components/SplitPane.luau +12 -16
  107. package/out/ui/packages/stateMatrix.luau +1171 -675
  108. package/out/ui/packages/stepper/components/Stepper.luau +9 -16
  109. package/out/ui/packages/switch/components/Switch.luau +16 -16
  110. package/out/ui/packages/table/components/Table.luau +9 -16
  111. package/out/ui/packages/tabs/components/Tabs.luau +12 -16
  112. package/out/ui/packages/toast/components/Toast.luau +16 -13
  113. package/out/ui/packages/toggleButton/components/ToggleButton.luau +24 -32
  114. package/out/ui/packages/tooltip/components/Tooltip.luau +9 -16
  115. package/out/ui/packages/treeView/components/TreeView.luau +9 -16
  116. package/out/ui/packages/typography/components/Typography.luau +13 -14
  117. package/out/ui/packages/udimEditor/components/UDimEditor.luau +12 -16
  118. package/out/ui/packages/vectorEditor/components/VectorEditor.luau +12 -16
  119. package/out/ui/packages/virtualList/components/EmptyListHint.d.ts +2 -1
  120. package/out/ui/packages/virtualList/components/EmptyListHint.luau +15 -4
  121. package/out/ui/packages/virtualList/components/VirtualList.luau +9 -16
  122. package/package.json +2 -2
@@ -8,6 +8,7 @@ local useState = _react.useState
8
8
  local _services = TS.import(script, TS.getModule(script, "@rbxts", "services"))
9
9
  local GuiService = _services.GuiService
10
10
  local UserInputService = _services.UserInputService
11
+ local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
11
12
  local _popup = TS.import(script, script.Parent.Parent.Parent, "popup")
12
13
  local Portal = _popup.Portal
13
14
  local portalTarget = _popup.portalTarget
@@ -22,6 +23,10 @@ local function Modal(props)
22
23
  local open = _binding.open
23
24
  local onClose = _binding.onClose
24
25
  local children = _binding.children
26
+ local className = _binding.className
27
+ local sx = _binding.sx
28
+ local id = _binding.id
29
+ local ref = _binding.ref
25
30
  local styles = useModalStyles()
26
31
  local close = useRef(onClose)
27
32
  local surface = useRef()
@@ -64,6 +69,7 @@ local function Modal(props)
64
69
  end
65
70
  end
66
71
  end, { open, layer })
72
+ local surfaceStyle = styles.surface
67
73
  local _exp = React.createElement("frame", {
68
74
  key = "ModalAnchor",
69
75
  ref = anchor,
@@ -92,12 +98,30 @@ local function Modal(props)
92
98
  }
93
99
  local _exp_1 = React.createElement("textbutton", _attributes_1)
94
100
  local _attributes_2 = {
95
- key = "Surface",
96
- ref = surface,
101
+ tag = "frame",
97
102
  }
98
- for _k, _v in styles.surface do
99
- _attributes_2[_k] = _v
103
+ local _condition_1 = id
104
+ if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
105
+ _condition_1 = "Surface"
100
106
  end
107
+ _attributes_2.key = _condition_1
108
+ _attributes_2.hostRef = function(instance)
109
+ surface.current = instance
110
+ if ref == nil then
111
+ return nil
112
+ end
113
+ if type(ref) == "function" then
114
+ ref(instance)
115
+ return nil
116
+ end
117
+ ref.current = instance
118
+ end
119
+ _attributes_2.base = surfaceStyle
120
+ _attributes_2.className = className
121
+ _attributes_2.sx = sx
122
+ _attributes_2.AnchorPoint = surfaceStyle.AnchorPoint
123
+ _attributes_2.Position = surfaceStyle.Position
124
+ _attributes_2.ZIndex = surfaceStyle.ZIndex
101
125
  local _attributes_3 = table.clone(styles.padding)
102
126
  setmetatable(_attributes_3, nil)
103
127
  local _exp_2 = React.createElement("uipadding", _attributes_3)
@@ -105,7 +129,7 @@ local function Modal(props)
105
129
  setmetatable(_attributes_4, nil)
106
130
  _condition = (React.createElement(Portal, {
107
131
  host = layer,
108
- }, React.createElement("frame", _attributes, _exp_1, React.createElement("frame", _attributes_2, _exp_2, React.createElement("uicorner", _attributes_4), children))))
132
+ }, React.createElement("frame", _attributes, _exp_1, React.createElement(SxHost, _attributes_2, _exp_2, React.createElement("uicorner", _attributes_4), children))))
109
133
  end
110
134
  return React.createElement(React.Fragment, nil, _exp, _condition)
111
135
  end
@@ -5,6 +5,7 @@ export interface NumberInputProps {
5
5
  min?: number;
6
6
  max?: number;
7
7
  step?: number;
8
+ places?: number;
8
9
  disabled?: boolean;
9
10
  readOnly?: boolean;
10
11
  loading?: boolean;
@@ -2,7 +2,9 @@
2
2
  local TS = _G[script]
3
3
  local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
4
4
  local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
5
- local parseNumberDraft = TS.import(script, script.Parent, "numberValue").parseNumberDraft
5
+ local _numberValue = TS.import(script, script.Parent, "numberValue")
6
+ local formatNumber = _numberValue.formatNumber
7
+ local parseNumberDraft = _numberValue.parseNumberDraft
6
8
  local function NumberInput(props)
7
9
  local _binding = props
8
10
  local value = _binding.value
@@ -10,6 +12,7 @@ local function NumberInput(props)
10
12
  local min = _binding.min
11
13
  local max = _binding.max
12
14
  local step = _binding.step
15
+ local places = _binding.places
13
16
  local disabled = _binding.disabled
14
17
  local readOnly = _binding.readOnly
15
18
  local loading = _binding.loading
@@ -18,6 +21,7 @@ local function NumberInput(props)
18
21
  local size = _binding.size
19
22
  local reducedMotion = _binding.reducedMotion
20
23
  local className = _binding.className
24
+ local sx = _binding.sx
21
25
  local id = _binding.id
22
26
  local ref = _binding.ref
23
27
  local _attributes = {}
@@ -28,7 +32,8 @@ local function NumberInput(props)
28
32
  _attributes.id = _condition
29
33
  _attributes.ref = ref
30
34
  _attributes.className = className
31
- _attributes.text = tostring(value)
35
+ _attributes.sx = sx
36
+ _attributes.text = if places ~= nil then formatNumber(value, places) else tostring(value)
32
37
  _attributes.placeholder = placeholder
33
38
  _attributes.width = width
34
39
  _attributes.disabled = disabled
@@ -38,7 +43,13 @@ local function NumberInput(props)
38
43
  _attributes.reducedMotion = reducedMotion
39
44
  _attributes.onTextChanged = function(text)
40
45
  local committed = parseNumberDraft(text, min, max, step)
41
- if committed ~= nil and committed ~= value then
46
+ if committed == nil then
47
+ return nil
48
+ end
49
+ if places ~= nil and formatNumber(committed, places) == formatNumber(value, places) then
50
+ return nil
51
+ end
52
+ if committed ~= value then
42
53
  onChange(committed)
43
54
  end
44
55
  end
@@ -1,2 +1,3 @@
1
1
  export declare function commitNumber(value: number | undefined, min?: number, max?: number, step?: number): number | undefined;
2
2
  export declare function parseNumberDraft(text: string, min?: number, max?: number, step?: number): number | undefined;
3
+ export declare function formatNumber(value: number, places?: number): string;
@@ -23,7 +23,52 @@ end
23
23
  local function parseNumberDraft(text, min, max, step)
24
24
  return commitNumber(tonumber(text), min, max, step)
25
25
  end
26
+ local function formatNumber(value, places)
27
+ if places == nil then
28
+ places = 4
29
+ end
30
+ if value ~= value or value == math.huge or value == -math.huge then
31
+ return tostring(value)
32
+ end
33
+ local scale = 10 ^ places
34
+ local scaled = math.floor(math.abs(value) * scale + 0.5)
35
+ if scaled == 0 then
36
+ return "0"
37
+ end
38
+ local sign = if value < 0 then "-" else ""
39
+ local whole = math.floor(scaled / scale)
40
+ local frac = scaled % scale
41
+ if frac == 0 then
42
+ return `{sign}{whole}`
43
+ end
44
+ local digits = ""
45
+ local rest = frac
46
+ while rest > 0 do
47
+ digits = `{rest % 10}{digits}`
48
+ rest = math.floor(rest / 10)
49
+ end
50
+ while #digits < places do
51
+ digits = `0{digits}`
52
+ end
53
+ while true do
54
+ local _condition = #digits > 0
55
+ if _condition then
56
+ local _digits = digits
57
+ local _arg0 = #digits
58
+ local _arg1 = #digits
59
+ _condition = string.sub(_digits, _arg0, _arg1) == "0"
60
+ end
61
+ if not _condition then
62
+ break
63
+ end
64
+ local _digits = digits
65
+ local _arg1 = #digits - 1
66
+ digits = string.sub(_digits, 1, _arg1)
67
+ end
68
+ return `{sign}{whole}.{digits}`
69
+ end
26
70
  return {
27
71
  commitNumber = commitNumber,
28
72
  parseNumberDraft = parseNumberDraft,
73
+ formatNumber = formatNumber,
29
74
  }
@@ -1,6 +1,7 @@
1
1
  -- Compiled with roblox-ts v3.0.0
2
2
  local TS = _G[script]
3
3
  local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
4
+ local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
4
5
  local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
5
6
  local useNumberRangeEditorStyles = TS.import(script, script.Parent, "NumberRangeEditor.styles").default
6
7
  local writeNumberRange = TS.import(script, script.Parent, "numberRangeValue").writeNumberRange
@@ -18,26 +19,21 @@ local function NumberRangeEditor(props)
18
19
  local parts = writeNumberRange(value.Min, value.Max, field, amount)
19
20
  onChange(NumberRange.new(parts.Min, parts.Max))
20
21
  end
21
- local _attributes = {}
22
+ local _attributes = {
23
+ tag = "frame",
24
+ }
22
25
  local _condition = id
23
26
  if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
24
27
  _condition = "NumberRangeEditor"
25
28
  end
26
29
  _attributes.key = _condition
27
- _attributes.ref = ref
28
- for _k, _v in styles.root do
29
- _attributes[_k] = _v
30
- end
31
- if className then
32
- for _k, _v in className do
33
- _attributes[_k] = _v
34
- end
35
- end
36
- if sx then
37
- for _k, _v in sx do
38
- _attributes[_k] = _v
39
- end
40
- end
30
+ _attributes.hostRef = ref
31
+ _attributes.base = styles.root
32
+ _attributes.className = className
33
+ _attributes.sx = sx
34
+ _attributes.state = {
35
+ disabled = disabled,
36
+ }
41
37
  local _attributes_1 = table.clone(styles.row)
42
38
  setmetatable(_attributes_1, nil)
43
39
  local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -81,7 +77,7 @@ local function NumberRangeEditor(props)
81
77
  local _exp_5 = React.createElement("textlabel", _attributes_8)
82
78
  local _attributes_9 = table.clone(styles.field)
83
79
  setmetatable(_attributes_9, nil)
84
- return React.createElement("frame", _attributes, _exp, _exp_3, React.createElement("frame", _attributes_6, _exp_4, _exp_5, React.createElement("frame", _attributes_9, React.createElement(NumberInput, {
80
+ return React.createElement(SxHost, _attributes, _exp, _exp_3, React.createElement("frame", _attributes_6, _exp_4, _exp_5, React.createElement("frame", _attributes_9, React.createElement(NumberInput, {
85
81
  value = value.Max,
86
82
  disabled = disabled,
87
83
  width = UDim.new(1, 0),
@@ -3,6 +3,7 @@ local TS = _G[script]
3
3
  local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
4
4
  local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
5
5
  local pageRange = TS.import(script, script.Parent, "pageRange").pageRange
6
+ local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
6
7
  local usePaginationStyles = TS.import(script, script.Parent, "Pagination.styles").default
7
8
  local function Pagination(props)
8
9
  local _binding = props
@@ -23,26 +24,21 @@ local function Pagination(props)
23
24
  variant = variant,
24
25
  })
25
26
  local tokens = pageRange(count, page, siblingCount, boundaryCount)
26
- local _attributes = {}
27
+ local _attributes = {
28
+ tag = "frame",
29
+ }
27
30
  local _condition = id
28
31
  if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
29
32
  _condition = "Pagination"
30
33
  end
31
34
  _attributes.key = _condition
32
- _attributes.ref = ref
33
- for _k, _v in styles.root do
34
- _attributes[_k] = _v
35
- end
36
- if className then
37
- for _k, _v in className do
38
- _attributes[_k] = _v
39
- end
40
- end
41
- if sx then
42
- for _k, _v in sx do
43
- _attributes[_k] = _v
44
- end
45
- end
35
+ _attributes.hostRef = ref
36
+ _attributes.base = styles.root
37
+ _attributes.className = className
38
+ _attributes.sx = sx
39
+ _attributes.state = {
40
+ disabled = disabled,
41
+ }
46
42
  local _attributes_1 = table.clone(styles.list)
47
43
  setmetatable(_attributes_1, nil)
48
44
  local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -92,7 +88,7 @@ local function Pagination(props)
92
88
  _newValue[_k] = _callback(_v, _k - 1, tokens)
93
89
  end
94
90
  -- ▲ ReadonlyArray.map ▲
95
- return React.createElement("frame", _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
91
+ return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
96
92
  end
97
93
  local default = Pagination
98
94
  return {
@@ -1,9 +1,10 @@
1
1
  import React from "@rbxts/react";
2
+ import { CustomizedProps } from "../../../../theme/index";
2
3
  export type PaperElevation = "flat" | "raised" | "outlined";
3
4
  export interface PaperProps {
4
5
  elevation?: PaperElevation;
5
6
  square?: boolean;
6
7
  children?: React.ReactNode;
7
8
  }
8
- declare function Paper(props: PaperProps): JSX.Element;
9
+ declare function Paper(props: CustomizedProps<Frame, PaperProps>): JSX.Element;
9
10
  export default Paper;
@@ -1,6 +1,7 @@
1
1
  -- Compiled with roblox-ts v3.0.0
2
2
  local TS = _G[script]
3
3
  local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
4
+ local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
4
5
  local usePaperStyles = TS.import(script, script.Parent, "Paper.styles").default
5
6
  local function Paper(props)
6
7
  local _binding = props
@@ -10,31 +11,39 @@ local function Paper(props)
10
11
  end
11
12
  local square = _binding.square
12
13
  local children = _binding.children
14
+ local className = _binding.className
15
+ local sx = _binding.sx
16
+ local id = _binding.id
17
+ local ref = _binding.ref
13
18
  local styles = usePaperStyles({
14
19
  elevation = elevation,
15
20
  })
16
- local _attributes = {
17
- key = "Paper",
18
- }
19
- for _k, _v in styles.root do
20
- _attributes[_k] = _v
21
+ local _attributes = {}
22
+ local _condition = id
23
+ if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
24
+ _condition = "Paper"
21
25
  end
26
+ _attributes.key = _condition
27
+ _attributes.hostRef = ref
28
+ _attributes.base = styles.root
29
+ _attributes.className = className
30
+ _attributes.sx = sx
22
31
  local _attributes_1 = table.clone(styles.padding)
23
32
  setmetatable(_attributes_1, nil)
24
33
  local _exp = React.createElement("uipadding", _attributes_1)
25
- local _condition = square ~= true
26
- if _condition then
34
+ local _condition_1 = square ~= true
35
+ if _condition_1 then
27
36
  local _attributes_2 = table.clone(styles.corner)
28
37
  setmetatable(_attributes_2, nil)
29
- _condition = React.createElement("uicorner", _attributes_2)
38
+ _condition_1 = React.createElement("uicorner", _attributes_2)
30
39
  end
31
- local _condition_1 = elevation == "outlined"
32
- if _condition_1 then
40
+ local _condition_2 = elevation == "outlined"
41
+ if _condition_2 then
33
42
  local _attributes_2 = table.clone(styles.stroke)
34
43
  setmetatable(_attributes_2, nil)
35
- _condition_1 = React.createElement("uistroke", _attributes_2)
44
+ _condition_2 = React.createElement("uistroke", _attributes_2)
36
45
  end
37
- return React.createElement("frame", _attributes, _exp, _condition, _condition_1, children)
46
+ return React.createElement(SxHost, _attributes, _exp, _condition_1, _condition_2, children)
38
47
  end
39
48
  local default = Paper
40
49
  return {
@@ -1,11 +1,13 @@
1
1
  -- Compiled with roblox-ts v3.0.0
2
2
  local TS = _G[script]
3
3
  local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
4
+ local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
4
5
  local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
5
6
  local usePhysicalPropertiesEditorStyles = TS.import(script, script.Parent, "PhysicalPropertiesEditor.styles").default
6
7
  local _physicalParts = TS.import(script, script.Parent, "physicalParts")
7
8
  local patchPhysicalParts = _physicalParts.patchPhysicalParts
8
- local physicalFields = _physicalParts.physicalFields
9
+ local physicalCaption = _physicalParts.physicalCaption
10
+ local physicalRows = _physicalParts.physicalRows
9
11
  local function PhysicalPropertiesEditor(props)
10
12
  local _binding = props
11
13
  local value = _binding.value
@@ -16,68 +18,91 @@ local function PhysicalPropertiesEditor(props)
16
18
  local id = _binding.id
17
19
  local ref = _binding.ref
18
20
  local styles = usePhysicalPropertiesEditorStyles()
19
- local amounts = { value.Density, value.Friction, value.Elasticity, value.FrictionWeight, value.ElasticityWeight }
21
+ local amounts = {
22
+ Density = value.Density,
23
+ Friction = value.Friction,
24
+ Elasticity = value.Elasticity,
25
+ FrictionWeight = value.FrictionWeight,
26
+ ElasticityWeight = value.ElasticityWeight,
27
+ }
20
28
  local commit = function(field, amount)
21
29
  local parts = patchPhysicalParts(value.Density, value.Friction, value.Elasticity, value.FrictionWeight, value.ElasticityWeight, field, amount)
22
30
  onChange(PhysicalProperties.new(parts[1], parts[2], parts[3], parts[4], parts[5]))
23
31
  end
24
- local _attributes = {}
32
+ local _attributes = {
33
+ tag = "frame",
34
+ }
25
35
  local _condition = id
26
36
  if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
27
37
  _condition = "PhysicalPropertiesEditor"
28
38
  end
29
39
  _attributes.key = _condition
30
- _attributes.ref = ref
31
- for _k, _v in styles.root do
32
- _attributes[_k] = _v
33
- end
34
- if className then
35
- for _k, _v in className do
36
- _attributes[_k] = _v
37
- end
38
- end
39
- if sx then
40
- for _k, _v in sx do
41
- _attributes[_k] = _v
42
- end
43
- end
40
+ _attributes.hostRef = ref
41
+ _attributes.base = styles.root
42
+ _attributes.className = className
43
+ _attributes.sx = sx
44
+ _attributes.state = {
45
+ disabled = disabled,
46
+ }
44
47
  local _attributes_1 = table.clone(styles.wrap)
45
48
  setmetatable(_attributes_1, nil)
46
49
  local _exp = React.createElement("uilistlayout", _attributes_1)
47
- local _exp_1 = physicalFields()
50
+ local _exp_1 = physicalRows()
48
51
  -- ▼ ReadonlyArray.map ▼
49
52
  local _newValue = table.create(#_exp_1)
50
- local _callback = function(field, index)
53
+ local _callback = function(row, rowIndex)
51
54
  local _attributes_2 = {
52
- key = field,
55
+ key = `Row-{rowIndex}`,
53
56
  }
54
- for _k, _v in styles.axis do
57
+ for _k, _v in styles.row do
55
58
  _attributes_2[_k] = _v
56
59
  end
57
- _attributes_2.LayoutOrder = index + 1
58
- local _attributes_3 = table.clone(styles.row)
60
+ _attributes_2.LayoutOrder = rowIndex + 1
61
+ local _attributes_3 = table.clone(styles.pair)
59
62
  setmetatable(_attributes_3, nil)
60
63
  local _exp_2 = React.createElement("uilistlayout", _attributes_3)
61
- local _attributes_4 = table.clone(styles.label)
62
- setmetatable(_attributes_4, nil)
63
- _attributes_4.Text = field
64
- local _exp_3 = React.createElement("textlabel", _attributes_4)
65
- local _attributes_5 = table.clone(styles.field)
66
- setmetatable(_attributes_5, nil)
67
- return React.createElement("frame", _attributes_2, _exp_2, _exp_3, React.createElement("frame", _attributes_5, React.createElement(NumberInput, {
68
- value = amounts[index + 1],
69
- disabled = disabled,
70
- width = UDim.new(1, 0),
71
- onChange = function(amount)
72
- return commit(field, amount)
73
- end,
74
- })))
64
+ -- ▼ ReadonlyArray.map ▼
65
+ local _newValue_1 = table.create(#row)
66
+ local _callback_1 = function(field, index)
67
+ local _attributes_4 = {
68
+ key = field,
69
+ }
70
+ for _k, _v in styles.cell do
71
+ _attributes_4[_k] = _v
72
+ end
73
+ _attributes_4.LayoutOrder = index + 1
74
+ local _attributes_5 = table.clone(styles.stack)
75
+ setmetatable(_attributes_5, nil)
76
+ local _exp_3 = React.createElement("uilistlayout", _attributes_5)
77
+ local _attributes_6 = table.clone(styles.label)
78
+ setmetatable(_attributes_6, nil)
79
+ _attributes_6.Text = physicalCaption(field)
80
+ _attributes_6.LayoutOrder = 1
81
+ local _exp_4 = React.createElement("textlabel", _attributes_6)
82
+ local _attributes_7 = table.clone(styles.field)
83
+ setmetatable(_attributes_7, nil)
84
+ _attributes_7.LayoutOrder = 2
85
+ return React.createElement("frame", _attributes_4, _exp_3, _exp_4, React.createElement("frame", _attributes_7, React.createElement(NumberInput, {
86
+ value = amounts[field],
87
+ places = 4,
88
+ disabled = disabled,
89
+ width = UDim.new(1, 0),
90
+ onChange = function(amount)
91
+ return commit(field, amount)
92
+ end,
93
+ })))
94
+ end
95
+ for _k, _v in row do
96
+ _newValue_1[_k] = _callback_1(_v, _k - 1, row)
97
+ end
98
+ -- ▲ ReadonlyArray.map ▲
99
+ return React.createElement("frame", _attributes_2, _exp_2, React.createElement(React.Fragment, nil, _newValue_1))
75
100
  end
76
101
  for _k, _v in _exp_1 do
77
102
  _newValue[_k] = _callback(_v, _k - 1, _exp_1)
78
103
  end
79
104
  -- ▲ ReadonlyArray.map ▲
80
- return React.createElement("frame", _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
105
+ return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
81
106
  end
82
107
  local default = PhysicalPropertiesEditor
83
108
  return {
@@ -1,9 +1,11 @@
1
1
  -- Compiled with roblox-ts v3.0.0
2
2
  local TS = _G[script]
3
3
  local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
4
+ local controlMetrics = _theme.controlMetrics
4
5
  local createStyles = _theme.createStyles
5
6
  local componentStyles = _theme.componentStyles
6
7
  local usePhysicalPropertiesEditorStyles = componentStyles("PhysicalPropertiesEditor", function(theme)
8
+ local gap = theme.padding.calc(1)
7
9
  return createStyles({
8
10
  root = {
9
11
  Size = UDim2.new(1, 0, 0, 0),
@@ -16,26 +18,38 @@ local usePhysicalPropertiesEditorStyles = componentStyles("PhysicalPropertiesEdi
16
18
  Padding = UDim.new(0, theme.padding.calc(0.5)),
17
19
  SortOrder = Enum.SortOrder.LayoutOrder,
18
20
  },
19
- row = {
21
+ pair = {
20
22
  FillDirection = Enum.FillDirection.Horizontal,
21
- Padding = UDim.new(0, theme.padding.calc(1)),
22
- VerticalAlignment = Enum.VerticalAlignment.Center,
23
+ Padding = UDim.new(0, gap),
23
24
  SortOrder = Enum.SortOrder.LayoutOrder,
24
25
  },
25
- axis = {
26
- Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
26
+ row = {
27
+ Size = UDim2.new(1, 0, 0, 0),
28
+ AutomaticSize = Enum.AutomaticSize.Y,
29
+ BackgroundTransparency = 1,
30
+ },
31
+ cell = {
32
+ Size = UDim2.new(0.5, -gap / 2, 0, 0),
33
+ AutomaticSize = Enum.AutomaticSize.Y,
27
34
  BackgroundTransparency = 1,
28
35
  },
36
+ stack = {
37
+ FillDirection = Enum.FillDirection.Vertical,
38
+ Padding = UDim.new(0, theme.padding.calc(0.5)),
39
+ SortOrder = Enum.SortOrder.LayoutOrder,
40
+ },
29
41
  label = {
30
- Size = UDim2.new(0, theme.spacing.calc(7), 1, 0),
42
+ Size = UDim2.new(1, 0, 0, 0),
43
+ AutomaticSize = Enum.AutomaticSize.Y,
31
44
  BackgroundTransparency = 1,
32
45
  Font = theme.typography.fontFamilies.default,
33
46
  TextSize = theme.typography.fontSizes.caption,
34
47
  TextColor3 = theme.palette.text.secondary,
35
48
  TextXAlignment = Enum.TextXAlignment.Left,
49
+ TextTruncate = Enum.TextTruncate.AtEnd,
36
50
  },
37
51
  field = {
38
- Size = UDim2.new(1, -theme.spacing.calc(7), 1, 0),
52
+ Size = UDim2.new(1, 0, 0, controlMetrics(theme.density).height),
39
53
  BackgroundTransparency = 1,
40
54
  },
41
55
  })
@@ -1,3 +1,5 @@
1
1
  export type PhysicalField = "Density" | "Friction" | "Elasticity" | "FrictionWeight" | "ElasticityWeight";
2
2
  export declare function physicalFields(): PhysicalField[];
3
+ export declare function physicalCaption(field: PhysicalField): "Density" | "Friction" | "Elasticity" | "Friction wt" | "Elasticity wt";
4
+ export declare function physicalRows(): PhysicalField[][];
3
5
  export declare function patchPhysicalParts(density: number, friction: number, elasticity: number, frictionWeight: number, elasticityWeight: number, field: PhysicalField, amount: number): number[];
@@ -2,6 +2,18 @@
2
2
  local function physicalFields()
3
3
  return { "Density", "Friction", "Elasticity", "FrictionWeight", "ElasticityWeight" }
4
4
  end
5
+ local function physicalCaption(field)
6
+ if field == "FrictionWeight" then
7
+ return "Friction wt"
8
+ end
9
+ if field == "ElasticityWeight" then
10
+ return "Elasticity wt"
11
+ end
12
+ return field
13
+ end
14
+ local function physicalRows()
15
+ return { { "Density", "Friction" }, { "Elasticity", "FrictionWeight" }, { "ElasticityWeight" } }
16
+ end
5
17
  local function patchPhysicalParts(density, friction, elasticity, frictionWeight, elasticityWeight, field, amount)
6
18
  local parts = { density, friction, elasticity, frictionWeight, elasticityWeight }
7
19
  local index = if field == "Density" then 0 elseif field == "Friction" then 1 elseif field == "Elasticity" then 2 elseif field == "FrictionWeight" then 3 else 4
@@ -10,5 +22,7 @@ local function patchPhysicalParts(density, friction, elasticity, frictionWeight,
10
22
  end
11
23
  return {
12
24
  physicalFields = physicalFields,
25
+ physicalCaption = physicalCaption,
26
+ physicalRows = physicalRows,
13
27
  patchPhysicalParts = patchPhysicalParts,
14
28
  }
@@ -1,4 +1,5 @@
1
1
  import React from "@rbxts/react";
2
+ import { CustomizedProps } from "../../../../theme/index";
2
3
  export interface PopupProps {
3
4
  anchor?: GuiObject;
4
5
  /** Content height. Flips above the anchor and caps the shell. */
@@ -9,5 +10,5 @@ export interface PopupProps {
9
10
  onInput?: (input: InputObject) => void;
10
11
  children?: React.ReactNode;
11
12
  }
12
- declare function Popup(props: PopupProps): JSX.Element | undefined;
13
+ declare function Popup(props: CustomizedProps<Frame, PopupProps>): JSX.Element | undefined;
13
14
  export default Popup;