playroom 1.0.2 → 1.0.3-react-18-ref-fix-20251211043848

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 (4) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +1 -1
  3. package/src/components/Playroom/Playroom.tsx +1 -1
  4. package/src/components/Playroom/ResizeHandle.tsx +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # playroom
2
2
 
3
+ ## 1.0.3-react-18-ref-fix-20251211043848
4
+
5
+ ### Patch Changes
6
+
7
+ - [`49461ea`](https://github.com/seek-oss/playroom/commit/49461ea8763d5d56c73158598b96f252bd53227d) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Ensure all `ref` usage is React 18 compatible
8
+
3
9
  ## 1.0.2
4
10
 
5
11
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "playroom",
3
- "version": "1.0.2",
3
+ "version": "1.0.3-react-18-ref-fix-20251211043848",
4
4
  "description": "Design with code, powered by your own component library",
5
5
  "bin": {
6
6
  "playroom": "bin/cli.cjs"
package/src/components/Playroom/Playroom.tsx CHANGED
@@ -130,7 +130,7 @@ export default () => {
130
130
  ref={editorRef}
131
131
  >
132
132
  <ResizeHandle
133
- ref={editorRef}
133
+ targetRef={editorRef}
134
134
  position={resizeHandlePosition[editorOrientation]}
135
135
  onResize={(newValue) => {
136
136
  dispatch({
package/src/components/Playroom/ResizeHandle.tsx CHANGED
@@ -25,14 +25,14 @@ const resolvePosition = (
25
25
 
26
26
  export const ResizeHandle = ({
27
27
  position,
28
- ref,
28
+ targetRef,
29
29
  onResize,
30
30
  onResizeStart,
31
31
  onResizeEnd,
32
32
  }: {
33
33
  position: 'top' | 'right' | 'left';
34
34
  flip?: boolean;
35
- ref: RefObject<HTMLElement | null>;
35
+ targetRef: RefObject<HTMLElement | null>;
36
36
  onResize: (newValue: number) => void;
37
37
  onResizeStart?: (startValue: number) => void;
38
38
  onResizeEnd?: (endValue: number) => void;
@@ -48,7 +48,7 @@ export const ResizeHandle = ({
48
48
  event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
49
49
  ) => {
50
50
  const startPosition = resolvePosition(event.nativeEvent, pagePos);
51
- const startSize = ref.current?.[elementSize] ?? 0;
51
+ const startSize = targetRef.current?.[elementSize] ?? 0;
52
52
 
53
53
  setResizing(true);
54
54
  onResizeStart?.(startSize);
@@ -61,7 +61,7 @@ export const ResizeHandle = ({
61
61
  };
62
62
 
63
63
  const stopHandler = () => {
64
- const endSize = ref.current?.[elementSize] ?? 0;
64
+ const endSize = targetRef.current?.[elementSize] ?? 0;
65
65
  setResizing(false);
66
66
  onResizeEnd?.(endSize);
67
67
  document.body.classList.remove(styles.resizeCursor[direction]);