@lattice-ui/radio-group 0.5.0-next.1 → 0.5.0-next.2

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 (3) hide show
  1. package/out/RadioGroup/RadioGroupIndicator.luau +25 -15
  2. package/package.json +5 -5
  3. package/src/RadioGroup/RadioGroupIndicator.tsx +31 -22
package/out/RadioGroup/RadioGroupIndicator.luau CHANGED
@@ -6,41 +6,52 @@ local Slot = _core.Slot
6
6
  local Presence = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out).Presence
7
7
  local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
8
8
  local createIndicatorRevealRecipe = _motion.createIndicatorRevealRecipe
9
- local usePresenceMotion = _motion.usePresenceMotion
9
+ local usePresenceMotionController = _motion.usePresenceMotionController
10
10
  local useRadioGroupItemContext = TS.import(script, script.Parent, "context").useRadioGroupItemContext
11
11
  local function RadioGroupIndicatorImpl(props)
12
- local motionRef = usePresenceMotion(props.motionPresent, props.transition or createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)), props.onExitComplete)
12
+ local defaultTransition = React.useMemo(function()
13
+ return createIndicatorRevealRecipe(UDim2.fromOffset(10, 10))
14
+ end, {})
15
+ local config = props.transition or defaultTransition
16
+ local motion = usePresenceMotionController({
17
+ present = props.present,
18
+ forceMount = props.forceMount,
19
+ config = config,
20
+ onExitComplete = props.onExitComplete,
21
+ })
22
+ local mounted = motion.mounted
23
+ local visible = mounted and (motion.present or motion.phase ~= "exited")
24
+ if not mounted then
25
+ return nil
26
+ end
13
27
  if props.asChild then
14
28
  local child = props.children
15
29
  if not React.isValidElement(child) then
16
30
  error("[RadioGroupIndicator] `asChild` requires a child element.")
17
31
  end
18
32
  return React.createElement(Slot, {
19
- Visible = props.visible,
20
- ref = motionRef,
33
+ Visible = visible,
34
+ ref = motion.ref,
21
35
  }, child)
22
36
  end
23
37
  return React.createElement("frame", {
24
38
  BackgroundColor3 = Color3.fromRGB(240, 244, 252),
25
39
  BorderSizePixel = 0,
26
40
  Size = UDim2.fromOffset(10, 10),
27
- Visible = props.visible,
28
- ref = motionRef,
41
+ Visible = visible,
42
+ ref = motion.ref,
29
43
  }, props.children)
30
44
  end
31
45
  local function RadioGroupIndicator(props)
32
46
  local radioGroupItemContext = useRadioGroupItemContext()
33
47
  local visible = radioGroupItemContext.checked
34
48
  local forceMount = props.forceMount == true
35
- local transition = React.useMemo(function()
36
- return props.transition or createIndicatorRevealRecipe(UDim2.fromOffset(10, 10))
37
- end, { props.transition })
38
49
  if forceMount then
39
50
  return React.createElement(RadioGroupIndicatorImpl, {
40
51
  asChild = props.asChild,
41
- motionPresent = visible,
42
- transition = transition,
43
- visible = visible,
52
+ forceMount = true,
53
+ present = visible,
54
+ transition = props.transition,
44
55
  }, props.children)
45
56
  end
46
57
  return React.createElement(Presence, {
@@ -48,10 +59,9 @@ local function RadioGroupIndicator(props)
48
59
  render = function(state)
49
60
  return React.createElement(RadioGroupIndicatorImpl, {
50
61
  asChild = props.asChild,
51
- motionPresent = state.isPresent,
52
62
  onExitComplete = state.onExitComplete,
53
- transition = transition,
54
- visible = true,
63
+ present = state.isPresent,
64
+ transition = props.transition,
55
65
  }, props.children)
56
66
  end,
57
67
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lattice-ui/radio-group",
3
- "version": "0.5.0-next.1",
3
+ "version": "0.5.0-next.2",
4
4
  "private": false,
5
5
  "main": "out/init.luau",
6
6
  "types": "out/index.d.ts",
@@ -16,10 +16,10 @@
16
16
  "url": "https://github.com/astra-void/lattice-ui.git"
17
17
  },
18
18
  "dependencies": {
19
- "@lattice-ui/core": "0.5.0-next.1",
20
- "@lattice-ui/motion": "0.5.0-next.1",
21
- "@lattice-ui/layer": "0.5.0-next.1",
22
- "@lattice-ui/focus": "0.5.0-next.1"
19
+ "@lattice-ui/core": "0.5.0-next.2",
20
+ "@lattice-ui/layer": "0.5.0-next.2",
21
+ "@lattice-ui/focus": "0.5.0-next.2",
22
+ "@lattice-ui/motion": "0.5.0-next.2"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@rbxts/react": "17.3.7-ts.1",
package/src/RadioGroup/RadioGroupIndicator.tsx CHANGED
@@ -1,22 +1,37 @@
1
1
  import { React, Slot } from "@lattice-ui/core";
2
2
  import { Presence } from "@lattice-ui/layer";
3
- import { createIndicatorRevealRecipe, type PresenceMotionConfig, usePresenceMotion } from "@lattice-ui/motion";
3
+ import {
4
+ createIndicatorRevealRecipe,
5
+ type PresenceMotionConfig,
6
+ usePresenceMotionController,
7
+ } from "@lattice-ui/motion";
4
8
  import { useRadioGroupItemContext } from "./context";
5
9
  import type { RadioGroupIndicatorProps } from "./types";
6
10
 
7
11
  function RadioGroupIndicatorImpl(props: {
8
- motionPresent: boolean;
9
- visible: boolean;
12
+ present: boolean;
13
+ forceMount?: boolean;
10
14
  transition?: PresenceMotionConfig;
11
15
  onExitComplete?: () => void;
12
16
  asChild?: boolean;
13
17
  children?: React.ReactNode;
14
18
  }) {
15
- const motionRef = usePresenceMotion<Frame>(
16
- props.motionPresent,
17
- props.transition ?? createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)),
18
- props.onExitComplete,
19
- );
19
+ const defaultTransition = React.useMemo(() => createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)), []);
20
+ const config = props.transition ?? defaultTransition;
21
+
22
+ const motion = usePresenceMotionController<Frame>({
23
+ present: props.present,
24
+ forceMount: props.forceMount,
25
+ config,
26
+ onExitComplete: props.onExitComplete,
27
+ });
28
+
29
+ const mounted = motion.mounted;
30
+ const visible = mounted && (motion.present || motion.phase !== "exited");
31
+
32
+ if (!mounted) {
33
+ return undefined;
34
+ }
20
35
 
21
36
  if (props.asChild) {
22
37
  const child = props.children;
@@ -25,7 +40,7 @@ function RadioGroupIndicatorImpl(props: {
25
40
  }
26
41
 
27
42
  return (
28
- <Slot Visible={props.visible} ref={motionRef}>
43
+ <Slot Visible={visible} ref={motion.ref}>
29
44
  {child}
30
45
  </Slot>
31
46
  );
@@ -36,8 +51,8 @@ function RadioGroupIndicatorImpl(props: {
36
51
  BackgroundColor3={Color3.fromRGB(240, 244, 252)}
37
52
  BorderSizePixel={0}
38
53
  Size={UDim2.fromOffset(10, 10)}
39
- Visible={props.visible}
40
- ref={motionRef}
54
+ Visible={visible}
55
+ ref={motion.ref}
41
56
  >
42
57
  {props.children}
43
58
  </frame>
@@ -49,18 +64,13 @@ export function RadioGroupIndicator(props: RadioGroupIndicatorProps) {
49
64
  const visible = radioGroupItemContext.checked;
50
65
  const forceMount = props.forceMount === true;
51
66
 
52
- const transition = React.useMemo(
53
- () => props.transition ?? createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)),
54
- [props.transition],
55
- );
56
-
57
67
  if (forceMount) {
58
68
  return (
59
69
  <RadioGroupIndicatorImpl
60
70
  asChild={props.asChild}
61
- motionPresent={visible}
62
- transition={transition}
63
- visible={visible}
71
+ forceMount={true}
72
+ present={visible}
73
+ transition={props.transition}
64
74
  >
65
75
  {props.children}
66
76
  </RadioGroupIndicatorImpl>
@@ -73,10 +83,9 @@ export function RadioGroupIndicator(props: RadioGroupIndicatorProps) {
73
83
  render={(state) => (
74
84
  <RadioGroupIndicatorImpl
75
85
  asChild={props.asChild}
76
- motionPresent={state.isPresent}
77
86
  onExitComplete={state.onExitComplete}
78
- transition={transition}
79
- visible={true}
87
+ present={state.isPresent}
88
+ transition={props.transition}
80
89
  >
81
90
  {props.children}
82
91
  </RadioGroupIndicatorImpl>