The correct element is "CenteredVertically", but the documentation references "VerticallyCentered"

I wanted to set up something like this, where the left bar can be toggled between 50px and 100px, but this is not working – the other elements don't react:

const AppLayout: FunctionComponent = () => {
  const [expanded, setExpanded] = useState(false);
  return (
    <ViewPort>
      <Left
        size={!expanded ? 50 : 100}
      >
        ...
      </Left>
      <Fill>...</Fill>
    </ViewPort>

is there a "right" way to do this?

https://codesandbox.io/s/react-shapes-0v1g3?fontsize=14

Describe the bug
Using a Custom space with resize={true} that we pass our own anchorSize into - if we shrink the window down and the maximumSize that we pass to the space is reduced accordingly, the space will not shrink to that size until a resize operation begins.

Expected behavior
maximumSize should always take precedence over anchorSize

Desktop (please complete the following information):

• OS: Windows 7
• Browser Electron
• Version 8.5.x

Describe the bug
In React 16.13.1, I have an error when rendering component

Warning: Cannot update a component (Fixed) while rendering a different component (Unknown). To locate the bad setState() call inside Unknown, follow the stack trace as described in https://fb.me/setstate-in-render

Describe the bug

react.development.js:167 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `HeadStyles`. See https://fb.me/react-warning-keys for more information.
    in Fragment (created by HeadStyles)
    in HeadStyles (created by ViewPort)
    in div (created by ViewPort)

To Reproduce
Not sure yet, but new issue only present in 0.20.x

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 7
• Browser: Electron
• Version: 6.0.12

Additional context

 <Spaces.ViewPort>
    <InsideViewport>
      <Spaces.LeftResizable>{children[0]}</Spaces.LeftResizable>
      <Spaces.Fill>{children[1]}</Spaces.Fill>
    </InsideViewport>
 </Spaces.ViewPort>

@aeagle When I run the code at https://codesandbox.io/s/misty-fast-r4qeo - it works fine in this online sandbox.

But when I run the same code on my local machine in an app set up via create-react-app, it throws the below error (and the browser freezes).

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
in SpaceInternal (created by Fill)

The bug
I am getting a window is not defined error while using it on nextjs.

To Reproduce
Codesandbox demo form the docs in nextjs with apollo

Expected behavior
Run with no error.

Screenshots

window is not defined
ReferenceError: window is not defined
    at r (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:1903)
    at s (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:1991)
    at e.exports (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:5562)
    at Object.<anonymous> (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:11119)
    at n (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:124)
    at Module.<anonymous> (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:20622)
    at n (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:124)
    at /home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:923
    at Object.<anonymous> (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:933)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)

Desktop (please complete the following information):

• OS: Linux Mint
• Browser Chrome
• Version 75

Current resizable spaces apply a debounce on resize updates of 5ms.

• Allow this to be configurable or switched off

Describe the bug
Clicking a divider twice without any drag

To Reproduce
Steps to reproduce the behavior:

1. Click a space divider without dragging, onResizeStart fires, followed immediately by onResizeEnd
2. Click the same space divider again, without dragging. (This step may or may not be necessary - sometimes this doesn't seem to occur on the first click)
3. Observe that onResizeStart fires, but onResizeEnd never runs.

Clicking and dragging after this returns the space to is normal behavior.

Expected behavior
onResizeEnd should always fire at some point following an onResizeStart

Desktop (please complete the following information):

• OS: Windows 7
• Browser: [email protected]
• Version: [email protected]

Additional context

@aeagle is there any CodeSandbox of JSFiddle you may have already made for some other reason that could be added to the issue template? I'd take a shot at creating an example, but starting from scratch is more than I've got time for at the moment.

Is your feature request related to a problem? Please describe.
I'd like to track the X position of a user's mouse relative to `, but that requires wrapping it like:

<div
  onMouseMove = {this.onMouseMove}>
  <ViewPort />
</div>

Describe the solution you'd like
Pass React event handlers to the internal component, the one with the className spaces-space-inner

Describe alternatives you've considered
Wrapping <ViewPort /> with a div to handle events, or the reverse using <ViewPort /> to wrap a div that handles events. I'm not sure what side effects throwing extra wrappers inside of ViewPort, but above the spaces it contains can cause, if any.

Additional context
This might be more of an issue with <Fixed />. Not really sure.

Even if there are no side effects, avoiding the need to add more nested divs would be great. React-Spaces provides amazing functionality, but it can make inspecting the DOM a bit more confusing since even the simplest implementation involves adding 5 layers of divs, plus the sibling-level resize handles.

Also produces nicer code overall:

// Currently to handle events
<Spaces.ViewPort>
    <div onMouseMove={this.onMouseMove}>
        <Spaces.LeftResizable {...{ size, minimumSize, }}>
            <div onClick={this.onClick}>
                {this.props.children[0]}
            </div>
        </Spaces.LeftResizable>
        <Spaces.Fill>
            {this.props.children[1]}
        </Spaces.Fill>
    </div>
</Spaces.ViewPort>

Versus

// Spaces that can pass event handlers would be nifty
<Spaces.ViewPort onMouseMove={this.onMouseMove}>
    <Spaces.LeftResizable {...{ size, minimumSize, }} onClick={this.onClick}>
        {this.props.children[0]}
    </Spaces.LeftResizable>
    <Spaces.Fill>
        {this.props.children[1]}
    </Spaces.Fill>
</Spaces.ViewPort>

If I have a space, I want its height to be whatever height the content needs it to be. Then other spaces move with respect to that space.

I can of course do this myself, by getting the size of the rendered component and then setting the size of your space, etc. However, this would be a great built in feature.

Description:
I am able to drag the edge of a <Space.LeftResizable> past the edge of a <Space.RightResizable> meaning that the content of the left space is underneath the right space (or vice versa)

Example:
An example can be seen on the first "Resizable Spaces" example , here: https://www.allaneagle.com/projects/react-spaces/examples#resizable

To reproduce:

1. Drag the edge of the <Space.LeftResizable> to the right, past the boundary with the <Space.RightResizable>
2. See that the content of the left space is stretched since the left space extends past the boundary, and "underneath" the right space.

Expected behavior:

• I would expect the edge being dragged to "hit" the edge of the other space and then either:
  • ...continue shrinking the right space (according to the right space's minimum size)
  • ...stop (if the right space has a fixed size or is already at its minimum size)
• I would not expect to be able to make one space overlap another space

Screenshots:
Here you can see the overlap between the two spaces where I was able to drag one space border over the other one, despite them being on the same layer.

(I used slightly translucent backgrounds for the two spaces to make it more obvious)

Desktop:

• OS: Windows
• Browser: Chrome
• Version: 83.0.4103.61

Package:

• Version: 0.1.25

I know it's in the examples, but I think you'd agree that it probably deserves to be under "Useful Properties" on the About page.

I don't think there's a maximumSize property, but that would be really useful too!

Again, very cool project! Thanks for sharing!

Describe the bug
Missing ';' in HeadStyles.tsx
Change css.push(`height: ${style.height}`);
To css.push(`height: ${style.height};`);

To Reproduce
Steps to reproduce the behavior:
1 - Create Layer with z-index,
2 - Add Top element with % size
3 - Style is

{
    left: 0;
    top: 0;
    right: 0;
    height: 25% z-index: 1000;
}

Expected behavior

{
    left: 0;
    top: 0;
    right: 0;
    height: 25%;
    z-index: 1000;
}

Allow actions to be carried out when spaces when resized and the size hits various breakpoints.

• Apply classes based on configuration?

or

• Provide events when breakpoints reached and allow consumer to provide functionality themselves?

or

• Both

Dynamically shown and hidden spaces position is not recalculated correctly in some cases. Need to determine what these cases are for repro. Looks like anchored spacing is duplicated when making a space visible after it has been hidden.

Information on these properties needs to be added to the documentation.

They allow the ViewPort space to be offset from each side of the browser viewport.

This is reported in the console with the current version:

'Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.'

Need to remove side-effects from render() method and reimplement in another React lifecycle.

Closed

Describe the bug
Great library! In a Resizable component (i.e. ) if the size and maximumSize numbers are the same, maximumSize does not appear to be honored and I can resize beyond the max; however, if I set size to be one below the max then behavior is as expected.

To Reproduce
Steps to reproduce the behavior:

1. Create a resizable component that uses the same value for size and maximumSize

      <Space.ViewPort>
        <Space.Top size="60px" style={{ backgroundColor: '#808080' }}>
          This is the header
        </Space.Top>
        <Space.Fill>
          <Space.LeftResizable
            trackSize={true}
            size={350}
            minimumSize={0}
            maximumSize={350}
            style={{
              backgroundColor: 'beige'
            }}
          >
            This is the side Layer List
          </Space.LeftResizable>
          <Space.Fill scrollable>
            Fill Space
          </Space.Fill>
        </Space.Fill>
      </Space.ViewPort>

Expected behavior
Expect maximumSize to be enforced, but it's not.

Desktop (please complete the following information):

• OS: MacOS 10.13
• Browser Chrome 78

Is your feature request related to a problem? Please describe.
I'd like to implement a feature to hide a space if it's reduced to a certain size. Programmatically setting state and passing that state to the component initially works, but can get out of sync with the pass props. I assume this is not surprising or intended to be possible at present?

Describe the solution you'd like
It would be great to be able programmatically set a size. A key place this might be used is in dragStart and dragEnd events #32

render() {
    const { size } = this.state;
    return (
      <Space.ViewPort>
        <Space.LeftResizable size={size} />>
        <Space.Fill />
      </Space.ViewPort>
    );
  }

Describe alternatives you've considered
A CSS and plain JavaScript eventListener-based approach, but meh.

The nested space cover the resize handle of the parent space preventing correct drag resize operation.

Describe the bug

react-spaces tries to access the document global on the server side execution. Stack trace:

ReferenceError: document is not defined
    at updateStyleDefinition (<snip>/node_modules/react-spaces/dist/index.js:1:6669)
    at Object.addSpace (<snip>/node_modules/react-spaces/dist/index.js:1:12033)
    at useSpace (<snip>/node_modules/react-spaces/dist/index.js:1:17621)
    at SpaceInner (<snip>/node_modules/react-spaces/dist/index.js:1:20542)
    at processChild (<snip>/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (<snip>/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (<snip>/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (<snip>/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (<snip>/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (<snip>/node_modules/next/dist/next-server/server/render.js:53:851)
    at Object.ctx.renderPage (webpack-internal:///./src/pages/_document.tsx:79:26)
    at Function.getInitialProps (webpack-internal:///../../node_modules/next/dist/pages/_document.js:135:19)
    at Function.MyDocument.getInitialProps (webpack-internal:///./src/pages/_document.tsx:87:83)
    at loadGetInitialProps (<snip>/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (<snip>/node_modules/next/dist/next-server/server/render.js:53:1142)
    at async <snip>/node_modules/next/dist/next-server/server/next-server.js:98:97

To Reproduce
Steps to reproduce the behavior:

1. Use react-spaces in a server environment, e.g. nextjs

Expected behavior
Should render as normal

Package versions (please complete the following information):

• React version: 17.0.1
• React spaces version: ^0.2.0

Desktop (please complete the following information):

• OS: Manjaro
• Browser Chrome
• Version 87

I see previously there was a separate dist folder for an SRR-enabled version of react-spaces, however I can't find any traces of it in the newest version. :) If you want I can set up a quick nextjs repro repo.

In the example, https://codesandbox.io/s/frosty-sky-5b5bm - when I open/close the Left Pinnable pane - the constructor() of is called everytime (component is recreated) when resizable={true}. This is causing my component Sample to lose its state.

When you set resizable={false}, constructor() of is not called.

Currently state for spaces contained in a parent space is kept at the parent space however keeping this in sync with standard React state methods is proving to be difficult. Addition and removal of spaces as well as changing their properties has to propagate a state change to Fill spaces in the same parent/layer.

The current implementation relies on a side effect in the render method of a space to fulfill the implementation for the <Fill /> space and stacked spaces. This has manifested itself as a React warning "Cannot update a component from inside the function body of a different component" in the latest versions of React.

As use of space components technically drive the state, moving the state to a global state container will potentially alleviate these issues by retaining complete control over the re-rendering of space components that have changed.

A existing global state container (i.e. MOBX, Redux) is potentially overkill and will add unnecessary overhead so and a very specific custom global state container is preferable. Potentially this global state container may be able to be used as a backend for different frameworks.

• Potential to fix #64
• Potential to fix #60
• Potential to fix #52

Initial basic implementation on global-state branch in Experimental.tsx fixes #64.

@aeagle I have the following.

<Left className={"my-class"} />

The resulting DOM is formed as follows.

<div class="spaces-space anchor-left my-class">
  <div class="spaces-space-inner my-class"></div>
</div>

Ideally, my-class should be applied to only the root element, not the inner element. This causes a problem when let's say, "my-class": { border: 1px solid red } -- this gives me a double border.

Describe the bug
When using react 16.13.0 a new warning appears:
"Cannot update a component from inside the function body of a different component"

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/react-spaces-y0q3n
2. see warnings in console

Expected behavior
no warnings

Describe the bug
I won't have time to document this well and we're opting to stay on 0.1.25, but I wanted to report that code we have that collapses the space when it's dragged to a size smaller than the minimum defined no longer works properly.

Is there any changelog for versions beyond 0.1.23? Maybe that will make it obvious where things are going wrong.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [email protected]
• Version 0.1.25

@aeagle This issue is related to the way Layer is currently implemented and facebook/react#3965.

Let me try and explain below.

Say, I have the following structure.

<Space.Fixed>
    <Space.Top size={300} />
    <Space.Fill />
    <Space.Bottom size={300} />

    <Space.Layer zIndex={1}>
        <Space.Top size={100}>
            <MyComponent />
        </Space.Top>
    </Space.Layer>
</Space.Fixed>

Now for some reason, I have to reparent the <Space.Top size={100}> component as shown below.

<Space.Fixed>
    <Space.Top size="300" order={1} />
    <Space.Top size={100} order={2}>
        <MyComponent />
    </Space.Top>
    <Space.Fill />
    <Space.Bottom size="300" />
</Space.Fixed>

So I removed <Space.Top size={100}> from the Layer and added it to the base structure.

When I do this, <MyComponent /> is destroyed and recreated entirely because of facebook/react#3965. This hits the performance of <MyComponent /> and also results in loss of its state.

I was thinking if React Spaces could additionally support layering by avoiding nesting, maybe by passing in a prop, something like below.

<Space.Fixed>
    <Space.Top size={100} layered={true} zIndex={1}>
        <MyComponent />
    </Space.Top>
    <Space.Top size="300" />
    <Space.Fill />
    <Space.Bottom size="300" />
    <Space.Bottom size={100} layered={true} zIndex={2}>
        <MyComponent />
    </Space.Bottom>
</Space.Fixed>

Thoughts?

Thanks for publishing this project!

It could be nice to have an option to configure some spaces as floating above their siblings, so they don't take any space from them.
Could be an easy way to implement something like a left/right drawer menu.

@aeagle When I change the zIndex dynamically, it has no effect while trying to achieve layering without wrapping into the Layer component.

Demo

• https://codesandbox.io/s/competent-tesla-myp6e
• https://codesandbox.io/s/elegant-currying-g0ijr

A space which can be anchored relative to another space.

• Specify whether to be attached to left, right, above or below another space (or maybe any element by ref?)
• Alignment options (i.e. left, centre, right, top, middle, bottom or specific offset unit)
• Allow z-index to be specified

Basic coverage to cover each component to be able to catch breaking changes to core behaviour.

• Correct styling applied
• Correct resize behaviour observed

Describe the bug
I have a site where I have a sidebar that people can toggle between being shown on the right and on the bottom. When I toggle between these by changing the element from Space.RightResizable to Space.BottomResizable, the new situation is calculated as if the old sidebar was still in place.

To Reproduce
See https://codesandbox.io/s/festive-mcclintock-pujdo Press "Toggle side" a few times, and see the sidebar eat away more and more of the main content.

Expected behavior
I expect the sidebar to be placed in accordance to the surrounding Space.Viewport without taking into account the old sidebar element.

Strangely enough, when you switch between a Space.RightResizable and no element (<> </>) the calculation does use the "new" situation".

Desktop (please complete the following information):

• OS: [e.g. iOS] Ubuntu
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 78

@aeagle I'm facing this problem.

Step 1: I initially have,
<Left resizable={true} size={200}> Left Section </Left>

Step 2: Now on click of a button, I'm manually toggling the size prop between 10 and 200. All works well.

Step 3: Now I resize this space by dragging it, thus, let's say, increasing the size by 20.

Step 4: I repeat Step 2. This is where the problem occurs. The calculated width becomes calc(30px) and calc(220px). Somehow the resized delta is being added to the size I'm providing.

Describe the bug
When viewing the NPM page for this package, there is no link provided to this repo, because the repository field is not populated in the package.json. Adding this is just a convenience for developers who want a link to the source from NPM.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
<Spaces.Custom handleSize={1} >{children}</Spaces.Custom>

Expected behavior
Resizer should have a width of 1px when passing handleSize={1}.

Desktop (please complete the following information):

• OS: Windows 7
• Browser Electron
• Version 8.5.x

A space which can be positioned absolutely within it's parent. Provide modal/window like functionality.

• Allow z-index to be specified
• Allow optional dragging of any side to adjust width/height
• Allow optional dragging to re-position it given a drag handle

Hi @aeagle - we have a requirement where we need a custom-built ResizeHandle component. So could we have a way in which we can pass a custom component via props?

Something like this probably.
<Space.Left resizable={true} resizeHandleComponent={} size="20%" />

Is your feature request related to a problem? Please describe.
The only way to get the heights and widths of the resizable components is to nest an Info element inside of it. This also triggers for every small change and can cause performance issues when you want to save the sizes to a server for example.

Describe the solution you'd like
I'd like to see an onResizeComplete functions as a prop that triggers when you release the mouse and passed the new width and height as parameters.

Describe alternatives you've considered
A debounce could be used but is not ideal, since you don't really have a trigger when the drag is completed, plus it triggers too often.

@aeagle I get this error on the console when I change the zIndex programmatically.

Warning: React has detected a change in the order of Hooks called by SpaceInternal. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useRef                     useRef
2. useState                   useState
3. useRef                     useRef
4. useRef                     useRef
5. useEffect                  useEffect
6. useEffect                  useEffect
7. useEffect                  useEffect
8. useContext                 useContext
9. undefined                  useContext

Describe the bug
A clear and concise description of what the bug is.
onResizeStart and onResizeEnd events are not running.

To Reproduce
Steps to reproduce the behavior:

1. Go to codesandbox
2. Open console
3. Resize the blue left sider.
4. It doesn't print anything.

Expected behavior
When we resize, it should run the event passing size values.

Screenshots
Code available at
https://codesandbox.io/s/react-spaces-resize-issue-p7h0i?file=/src/App.js

Hey @aeagle, I was reviewing packages to update and I was excited to see react-spaces on the list of updated packages. I was wondering what's changed though? I took a glance at the commits, but nothing's as good as a changelog. I know the library is still in version 0.x, so no changelog is entirely understandable - but is there any chance we could get a changelog.md or release notes on the release page?

Thank you again for all your hard work and for sharing it with us all.

Is your feature request related to a problem? Please describe.
I know <Info /> lets you tap into height/width, but not necessarily event start/finish.

We're moving from react-split-pane which allowed us to listen for a start/finish of resize. Specifically, if a user resizes past a certain point we want to handle it ourselves, but we want to allow users to trigger the action via ending their drag event, rather than trying to guess at when we should respond. Perhaps this is already possible in a way I'm overlooking.

Describe the solution you'd like
Ability to add props such as onDragStarted and onDragFinished to a space. (Those are the names used by react-split-pane.

Describe alternatives you've considered
A timer based solution to listen for no changes to size for X seconds, but definitely not ideal.

Components are missing validation of properties for javascript only consumers of the library.

Add PropTypes for each component to supplement the Typescript typings.

Describe the bug
When using LeftResizable it adds an immense amount of left padding for no reason. We can't seem to resolve the issue

    <Space.ViewPort top={0} bottom={0} left={0} right={0}>
      <Space.LeftResizable
        minimumSize={200}
        maximumSize={350}
        size={200}
        style={{ backgroundColor: 'blue' }}
      >
        <div>Left</div>
      </Space.LeftResizable>
      <Space.Fill scrollable={true} style={{ backgroundColor: 'red' }}>
        <div>Middle</div>
      </Space.Fill>
    </Space.ViewPort>

Result: