Updated change history

Author: aeagle

package.json

@@ -87,7 +87,7 @@
 		"start": "rollup -c -w",
 		"build": "npm run build:prod",
 		"build:prod": "rollup -c",
-		"publish:alpha": "npm publish --tag alpha",
+		"publish:beta": "npm publish --tag beta",
 		"storybook": "start-storybook -p 6006",
 		"build-storybook": "build-storybook",
 		"test": "jest"

src/components/Space.tsx

@@ -29,6 +29,19 @@ export const Space: React.FC<ISpaceProps> = (props) => {
 		onTouchEnd,
 		children,
 	} = props;
+
+	const events = {
+		onClick: onClick,
+		onDoubleClick: onDoubleClick,
+		onMouseDown: onMouseDown,
+		onMouseEnter: onMouseEnter,
+		onMouseLeave: onMouseLeave,
+		onMouseMove: onMouseMove,
+		onTouchStart: onTouchStart,
+		onTouchMove: onTouchMove,
+		onTouchEnd: onTouchEnd,
+	};
+
 	const { space, domRect, elementRef, resizeHandles } = useSpace(props);
 
 	React.useEffect(() => {
@@ -37,15 +50,9 @@ export const Space: React.FC<ISpaceProps> = (props) => {
 
 	const userClasses = className ? className.split(" ").map((c) => c.trim()) : [];
 
-	const outerClasses = [
-		...[
-			"spaces-space",
-			//props.scrollable ? (isResizable(props) ? "scrollable" : "scrollable-a") : undefined,
-			space.children.find((s) => s.resizing) ? " spaces-resizing" : undefined,
-		],
-		//...(isResizable(props) && props.scrollable ? userClasses.map((c) => `${c}-container`) : userClasses),
-		...userClasses,
-	].filter((c) => c);
+	const outerClasses = [...["spaces-space", space.children.find((s) => s.resizing) ? "spaces-resizing" : undefined], ...userClasses].filter(
+		(c) => c,
+	);
 
 	const centeredContent = applyCentering(children, props.centerContent);
 
@@ -54,30 +61,24 @@ export const Space: React.FC<ISpaceProps> = (props) => {
 			{React.createElement(
 				props.as || "div",
 				{
-					id: space.id,
-					ref: elementRef,
-					style: style,
-					className: outerClasses.join(" "),
-					onClick: onClick,
-					onDoubleClick: onDoubleClick,
-					onMouseDown: onMouseDown,
-					onMouseEnter: onMouseEnter,
-					onMouseLeave: onMouseLeave,
-					onMouseMove: onMouseMove,
-					onTouchStart: onTouchStart,
-					onTouchMove: onTouchMove,
-					onTouchEnd: onTouchEnd,
+					...{
+						id: space.id,
+						ref: elementRef,
+						className: outerClasses.join(" "),
+						style: style,
+					},
+					...events,
 				},
-				<ParentContext.Provider value={space.id}>
-					<LayerContext.Provider value={undefined}>
-						<DOMRectContext.Provider value={domRect}>
-							{resizeHandles.map((r) => (
-								<div {...r} />
-							))}
-							{centeredContent}
-						</DOMRectContext.Provider>
-					</LayerContext.Provider>
-				</ParentContext.Provider>,
+				<>
+					{resizeHandles.map((r) => (
+						<div {...r} />
+					))}
+					<ParentContext.Provider value={space.id}>
+						<LayerContext.Provider value={undefined}>
+							<DOMRectContext.Provider value={domRect}>{centeredContent}</DOMRectContext.Provider>
+						</LayerContext.Provider>
+					</ParentContext.Provider>
+				</>,
 			)}
 		</>
 	);

src/components/stories/00-docs/04-ChangeHistory.stories.mdx

@@ -7,6 +7,15 @@ import { CommonHeader } from "../Utils";
 
 ## Change history
 
+### 0.2.0
+
+- Rewrote core state management for all spaces using global state (issue #69)
+- Moved space dynamic styling updates from React managed with a React portal to direct DOM manipulation
+- Added JEST testing for core space behaviour (issue #71)
+- Added DOMRect as second parameter to `onResizeEnd` callback
+- Fixed "Cannot update a component from inside the function body of a different component" from latest version of React - 16.3.0 (issue #64)
+- Fixed issue where changing space anchors in the same parent 'ate' space incorrectly from a `<Fill />` space (issue #52)
+
 ### 0.1.25
 
 - Added storybook docs. View with `npm run storybook`.

src/components/stories/Utils.tsx

@@ -149,12 +149,12 @@ export const ResizableProps = () => (
 		<Prop name="maximumSize" type="number" description="Constrains resizing of the space to a maximum size." />
 		<Prop
 			name="onResizeStart"
-			type="() => boolean"
+			type="() => boolean | void"
 			description="Triggered when a resize starts. Returning false from the event handler cancels the resize."
 		/>
 		<Prop
 			name="onResizeEnd"
-			type="(newSize: number) => void"
+			type="(newSize: number, newRect: DOMRect) => void"
 			description="Triggered when a resize ends. The final size in pixels of the space in after the resize is passed as the first parameter."
 		/>
 	</>

src/core-types.ts

@@ -66,6 +66,7 @@ export interface ISpaceProps extends ICommonProps {
 	anchor?: AnchorType | undefined;
 	order?: number | undefined;
 	position?: IPositionalProps | undefined;
+	overlayHandle?: boolean | undefined;
 	handleSize?: number | undefined;
 	minimumSize?: number | undefined;
 	maximumSize?: number | undefined;