fix(reshaping-container): fixes children to move with container

packages/core/src/__docs__/3-advanced-usage/docs.mdx

@@ -29,7 +29,7 @@ import * as Styled from './styled';
 import { WrappedMotion as Motion } from '../../Motion';
 import { WrappedVisibilityManager as VisibilityManager } from '../../VisibilityManager';
 import CircleExpand from '../../motions/CircleExpand';
-import TripeHoverMenu from '../../motions/ReshapingContainer/__docz__/TripeHoverMenu';
+import TripeHoverMenu from '../../motions/RevealReshapingContainer/__docz__/TripeHoverMenu';
 import FocalRevealMove from '../../motions/FocalRevealMove';
 import FocalConcealMove from '../../motions/FocalConcealMove';
 import FocalTarget from '../../FocalTarget';

packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/index.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import * as Common from '@element-motion/dev';
+import * as Styled from './styled';
+import ReshapingContainer from '../../../RevealReshapingContainer';
+
+const avatar = require('./images/avatar.jpg');
+
+const NotificationPill = () => (
+  <Styled.AlignCenter>
+    <Common.Toggler interval onIntervalSet={val => val + 1}>
+      {toggler => (
+        <ReshapingContainer
+          triggerKey={toggler.shown}
+          display="inline-block"
+          boxShadow="rgba(32, 33, 36, 0.25) 0px 3px 6px"
+          padding="4px 6px"
+          borderRadius="20px"
+          maxWidth="250px"
+        >
+          {motion => (
+            <Styled.MessageNotification {...motion} onClick={() => toggler.set(toggler.shown + 1)}>
+              <Styled.Avatar src={avatar} />
+              <Styled.NotificationText>{Styled.messages(toggler.shown)}</Styled.NotificationText>
+            </Styled.MessageNotification>
+          )}
+        </ReshapingContainer>
+      )}
+    </Common.Toggler>
+  </Styled.AlignCenter>
+);
+
+export default NotificationPill;

packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/styled.tsx

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+const avatarSize = '18px';
+
+export const MessageNotification = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+`;
+
+export const AlignCenter = styled.div`
+  text-align: center;
+`;
+
+export const NotificationText = styled.span`
+  width: calc(100% - ${avatarSize});
+  padding-right: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const Avatar = styled.img`
+  border-radius: 50%;
+  height: ${avatarSize};
+  width: ${avatarSize};
+  flex-shrink: 0;
+  margin-right: 6px;
+  object-fit: cover;
+  background-color: #ccc;
+`;
+
+export const messages = (index: number = 0) => {
+  const msgs = [
+    'seriously help me i cant get past genchrio',
+    'sekiro is so hard meh',
+    'hello???',
+    'how do i cheese it????',
+  ];
+  return msgs[index % msgs.length];
+};

packages/core/src/motions/ReshapingContainer/__docz__/TripeHoverMenu.tsx → packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/index.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import * as Common from '@element-motion/dev'; // eslint-disable-line import/no-extraneous-dependencies
 import { Transition } from 'react-transition-group'; // eslint-disable-line import/no-extraneous-dependencies
-import ReshapingContainer from '../index';
+import RevealReshapingContainer from '../../index';
 import * as Styled from './styled';
 
 const menuPosition = [200, 100, 20];
-const innerTimeout = { enter: 200, exit: 300 };
 
 const TripeHoverMenu = () => (
   <Common.Toggler
@@ -68,7 +67,7 @@ const TripeHoverMenu = () => (
                 right: menuPosition[toggler.shown.shown],
               }}
             >
-              <ReshapingContainer
+              <RevealReshapingContainer
                 triggerKey={toggler.shown.shown}
                 boxShadow="0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3), 0 -18px 60px -10px rgba(0,0,0,.025)"
                 background="#fff"
@@ -78,63 +77,42 @@ const TripeHoverMenu = () => (
               >
                 {motion => (
                   <Styled.Menu {...motion}>
-                    <Transition
-                      in={toggler.shown.shown === '0'}
-                      timeout={innerTimeout}
-                      unmountOnExit
-                      mountOnEnter
-                    >
-                      {tstate => (
-                        <Styled.InnerMenu state={tstate}>
-                          <Styled.MenuItem>
-                            Pricing
-                            <small>Find out how much tripe you can buy for $100</small>
-                          </Styled.MenuItem>
-                          <Styled.MenuItem>
-                            Billing
-                            <small>Need an invoice? Look in here</small>
-                          </Styled.MenuItem>
-                          <Styled.MenuItem>
-                            Connect
-                            <small>Find other tripe enthusiasts? Check here first</small>
-                          </Styled.MenuItem>
-                        </Styled.InnerMenu>
-                      )}
-                    </Transition>
+                    {toggler.shown.shown === '0' && (
+                      <Styled.InnerMenu>
+                        <Styled.MenuItem>
+                          Pricing
+                          <small>Find out how much tripe you can buy for $100</small>
+                        </Styled.MenuItem>
+                        <Styled.MenuItem>
+                          Billing
+                          <small>Need an invoice? Look in here</small>
+                        </Styled.MenuItem>
+                        <Styled.MenuItem>
+                          Connect
+                          <small>Find other tripe enthusiasts? Check here first</small>
+                        </Styled.MenuItem>
+                      </Styled.InnerMenu>
+                    )}
 
-                    <Transition
-                      in={toggler.shown.shown === '1'}
-                      timeout={innerTimeout}
-                      unmountOnExit
-                      mountOnEnter
-                    >
-                      {tstate => (
-                        <Styled.InnerMenu state={tstate}>
-                          <Styled.MenuItem>
-                            Recipes
-                            <small>Find the best way to cook it</small>
-                          </Styled.MenuItem>
-                        </Styled.InnerMenu>
-                      )}
-                    </Transition>
+                    {toggler.shown.shown === '1' && (
+                      <Styled.InnerMenu>
+                        <Styled.MenuItem>
+                          Recipes
+                          <small>Find the best way to cook it</small>
+                        </Styled.MenuItem>
+                      </Styled.InnerMenu>
+                    )}
 
-                    <Transition
-                      in={toggler.shown.shown === '2'}
-                      timeout={innerTimeout}
-                      unmountOnExit
-                      mountOnEnter
-                    >
-                      {tstate => (
-                        <Styled.InnerMenu state={tstate}>
-                          <Styled.MenuItem>About Tripe</Styled.MenuItem>
-                          <Styled.MenuItem>Customers</Styled.MenuItem>
-                          <Styled.MenuItem>Jobs</Styled.MenuItem>
-                        </Styled.InnerMenu>
-                      )}
-                    </Transition>
+                    {toggler.shown.shown === '2' && (
+                      <Styled.InnerMenu>
+                        <Styled.MenuItem>About Tripe</Styled.MenuItem>
+                        <Styled.MenuItem>Customers</Styled.MenuItem>
+                        <Styled.MenuItem>Jobs</Styled.MenuItem>
+                      </Styled.InnerMenu>
+                    )}
                   </Styled.Menu>
                 )}
-              </ReshapingContainer>
+              </RevealReshapingContainer>
             </Styled.ContainerPositioning>
           )}
         </Transition>

packages/core/src/motions/ReshapingContainer/__docz__/styled.tsx → packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/styled.tsx

@@ -12,13 +12,7 @@ const opac = {
   exiting: 0,
 };
 
-const pos = {
-  exiting: 'absolute',
-};
-
-export const InnerMenu = styled.div<{ state: string }>`
-  opacity: ${props => opac[props.state]};
-  position: ${props => pos[props.state]};
+export const InnerMenu = styled.div`
   top: 0;
 `;
 

packages/core/src/motions/RevealReshapingContainer/__docz__/docs.mdx

@@ -1,27 +1,67 @@
 ---
-name: RevealReshapingContainer
-route: /reveal-reshaping-container
+name: ReshapingContainer
+route: /reshaping-container
 menu: Composite experiences
 ---
 
 import { Playground, Props } from 'docz';
 import * as Common from '@element-motion/dev';
-import RevealReshapingContainer from '../index';
+import TripeMenu from './TripeHoverMenu';
+import NotificationPill from './NotificationPill';
+import ReshapingContainer from '../index';
 import * as Styled from './styled';
 
-# RevealReshapingContainer
+# ReshapingContainer
 
-A composite experience that is made up of [Reveal](/reveal) and [ReshapingContainer](/reshaping-container).
-It will do everything the reshaping container does plus keeping the children within the container when resizing.
-
-This is useful for any experience that does not change its position,
-only dimensions.
-For example a modal dialog!
+A composite experience that is made up of [Move](/move) and [Reveal](/reveal).
 
 ## Usage
 
+<Playground>
+  <NotificationPill />
+</Playground>
+
 ```js
-import { RevealReshapingContainer } from '@element-motion/core';
+import { ReshapingContainer } from '@element-motion/core';
+
+({ message, avatar }) => (
+  <ReshapingContainer
+    triggerKey={message}
+    display="inline-block"
+    boxShadow="rgba(32, 33, 36, 0.25) 0px 3px 6px"
+    padding="4px 6px"
+    borderRadius="20px"
+    maxWidth="250px"
+  >
+    {motion => (
+      <Styled.MessageNotification {...motion}>
+        <Styled.Avatar src={avatar} />
+        <Styled.NotificationText>{message}</Styled.NotificationText>
+      </Styled.MessageNotification>
+    )}
+  </ReshapingContainer>
+);
+```
+
+<Playground>
+  <TripeMenu />
+</Playground>
+
+```js
+import { ReshapingContainer } from '@element-motion/core';
+
+({ children }) => (
+  <ReshapingContainer
+    triggerKey={children}
+    boxShadow="0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3), 0 -18px 60px -10px rgba(0,0,0,.025)"
+    background="#fff"
+    maxWidth="500px"
+    borderRadius="3px"
+    padding="16px"
+  >
+    {motion => <Styled.Menu {...motion}>{children}</Styled.Menu>}
+  </ReshapingContainer>
+);
 ```
 
 <Playground>
@@ -30,7 +70,7 @@ import { RevealReshapingContainer } from '@element-motion/core';
       <Styled.Container>
         <Styled.Background />
 
-        <RevealReshapingContainer
+        <ReshapingContainer
           triggerKey={toggler.shown}
           id="reveal-reshaping-example"
           boxShadow="0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3), 0 -18px 60px -10px rgba(0,0,0,.025)"
@@ -67,7 +107,7 @@ import { RevealReshapingContainer } from '@element-motion/core';
               </p>
             </Styled.ModalDialog>
           )}
-        </RevealReshapingContainer>
+        </ReshapingContainer>
       </Styled.Container>
     )}
 
@@ -76,7 +116,7 @@ import { RevealReshapingContainer } from '@element-motion/core';
 
 ## Props
 
-<Props of={RevealReshapingContainer} />
+<Props of={ReshapingContainer} />
 
 ## Caveats