feat: add transitions

.storybook/main.js

@@ -18,6 +18,7 @@ module.exports = {
       'react-native': 'react-native-web',
       '@junipero/core': path.resolve('./packages/core/lib'),
       '@junipero/hooks': path.resolve('./packages/hooks/lib'),
+      '@junipero/transitions': path.resolve('./packages/transitions/lib'),
     };
 
     config.module.rules.push({

packages/react/lib/ColorField/index.d.ts

@@ -22,6 +22,7 @@ export declare type ColorFieldRef = {
 };
 
 declare interface ColorFieldProps extends React.ComponentPropsWithRef<any> {
+  animateMenu: (menu: JSX.Element, opts: { opened: Boolean }) => JSX.Element;
   className?: String;
   dismissOptions?: dismissProps;
   globalEventsTarget: EventTarget;

packages/react/lib/ColorField/index.js

@@ -24,6 +24,7 @@ import TextField from '../TextField';
 import FieldControl from '../FieldControl';
 
 const ColorField = forwardRef(({
+  animateMenu,
   className,
   dismissOptions,
   globalEventsTarget,
@@ -357,7 +358,7 @@ const ColorField = forwardRef(({
           />
         </div>
       </DropdownToggle>
-      <DropdownMenu className="color-menu">
+      <DropdownMenu animate={animateMenu} className="color-menu">
         <div className="color-wheel">
           <div
             className="lightness"
@@ -443,6 +444,7 @@ const ColorField = forwardRef(({
 
 ColorField.displayName = 'ColorField';
 ColorField.propTypes = {
+  animateMenu: PropTypes.func,
   autoFocus: PropTypes.bool,
   disabled: PropTypes.bool,
   dismissOptions: PropTypes.object,

packages/react/lib/ColorField/index.stories.js

@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { slideInDownMenu } from '@junipero/transitions';
 
 import FieldControl from '../FieldControl';
 import Label from '../Label';
@@ -36,3 +37,7 @@ export const autoFocused = () => (
 export const alwaysOpened = () => (
   <ColorField autoFocus={true} trigger="manual" onChange={action('change')} />
 );
+
+export const animated = () => (
+  <ColorField animateMenu={slideInDownMenu} />
+);

packages/react/lib/DateField/index.d.ts

@@ -16,6 +16,7 @@ export declare type DateFieldRef = {
 };
 
 declare interface DateFieldProps extends React.ComponentPropsWithRef<any> {
+  animateMenu: (menu: JSX.Element, opts: { opened: Boolean }) => JSX.Element;
   className?: String;
   min?: Date;
   max?: Date;

packages/react/lib/DateField/index.js

@@ -23,6 +23,7 @@ import DropdownToggle from '../DropdownToggle';
 import DropdownMenu from '../DropdownMenu';
 
 const DateField = forwardRef(({
+  animateMenu,
   className,
   max,
   min,
@@ -368,7 +369,7 @@ const DateField = forwardRef(({
           </div>
         </div>
       </DropdownToggle>
-      <DropdownMenu className="calendar-menu">
+      <DropdownMenu animate={animateMenu} className="calendar-menu">
         <div className="content">
           <div className="calendar-header">
             <div className="current-month">
@@ -429,6 +430,7 @@ const DateField = forwardRef(({
 
 DateField.displayName = 'DateField';
 DateField.propTypes = {
+  animateMenu: PropTypes.func,
   autoFocus: PropTypes.bool,
   clearable: PropTypes.bool,
   disabled: PropTypes.bool,

packages/react/lib/DateField/index.stories.js

@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { slideInDownMenu } from '@junipero/transitions';
 
 import FieldControl from '../FieldControl';
 import Label from '../Label';
@@ -55,3 +56,7 @@ export const alwaysOpened = () => (
     onChange={action('change')}
   />
 );
+
+export const animated = () => (
+  <DateField animateMenu={slideInDownMenu} />
+);

packages/react/lib/Dropdown/index.stories.js

@@ -1,3 +1,5 @@
+import { slideInDownMenu } from '@junipero/transitions';
+
 import DropdownToggle from '../DropdownToggle';
 import DropdownMenu from '../DropdownMenu';
 import DropdownGroup from '../DropdownGroup';
@@ -38,3 +40,12 @@ export const withGroups = () => (
     </DropdownMenu>
   </Dropdown>
 );
+
+export const animated = () => (
+  <Dropdown>
+    <DropdownToggle><Tag>Open me</Tag></DropdownToggle>
+    <DropdownMenu animate={slideInDownMenu}>
+      <DropdownItem><a>Item 1</a></DropdownItem>
+    </DropdownMenu>
+  </Dropdown>
+);

packages/react/lib/DropdownMenu/index.d.ts

@@ -6,6 +6,7 @@ export declare type DropdownMenuRef = {
 };
 
 declare interface DropdownMenuProps extends React.ComponentPropsWithRef<any> {
+  animate: (menu: JSX.Element, opts: { opened: Boolean }) => JSX.Element;
   children?: React.ReactNode;
   className?: String;
   ref?: MutableRefObject<DropdownMenuRef | undefined>;

packages/react/lib/DropdownMenu/index.js

@@ -1,10 +1,12 @@
 import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { classNames, ensureNode } from '@junipero/core';
 import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
 
 import { useDropdown } from '../hooks';
 
 const DropdownMenu = forwardRef(({
+  animate,
   children,
   className,
   ...rest
@@ -25,10 +27,16 @@ const DropdownMenu = forwardRef(({
     isJunipero: true,
   }));
 
-  if (!opened) {
+  if (!opened && !animate) {
     return null;
   }
 
+  const menu = (
+    <ul className="menu-inner">
+      { children }
+    </ul>
+  );
+
   const content = (
     <div
       { ...rest }
@@ -42,15 +50,16 @@ const DropdownMenu = forwardRef(({
       className={classNames('junipero dropdown-menu', className)}
       { ...getFloatingProps() }
     >
-      <ul className="menu-inner">
-        { children }
-      </ul>
+      { animate ? animate(menu, { opened }) : menu }
     </div>
   );
 
   return container ? createPortal(content, ensureNode(container)) : content;
 });
 
 DropdownMenu.displayName = 'DropdownMenu';
+DropdownMenu.propTypes = {
+  animate: PropTypes.func,
+};
 
 export default DropdownMenu;

packages/react/lib/SelectField/index.d.ts

@@ -15,6 +15,7 @@ export declare type SelectFieldRef = {
 };
 
 declare interface SelectFieldProps extends React.ComponentPropsWithRef<any> {
+  animateMenu: (menu: JSX.Element, opts: { opened: Boolean }) => JSX.Element;
   className?: String;
   options?: Array<any>;
   placeholder?: String;

packages/react/lib/SelectField/index.js

@@ -28,6 +28,7 @@ import Tag from '../Tag';
 import Spinner from '../Spinner';
 
 const SelectField = forwardRef(({
+  animateMenu,
   className,
   options,
   placeholder,
@@ -436,6 +437,7 @@ const SelectField = forwardRef(({
         </div>
       </DropdownToggle>
       <DropdownMenu
+        animate={animateMenu}
         className={classNames('select-menu', { searching: state.searching })}
       >
         <div className="content">
@@ -452,6 +454,7 @@ const SelectField = forwardRef(({
 
 SelectField.displayName = 'SelectField';
 SelectField.propTypes = {
+  animateMenu: PropTypes.func,
   allowArbitraryItems: PropTypes.bool,
   autoFocus: PropTypes.bool,
   clearable: PropTypes.bool,

packages/react/lib/SelectField/index.stories.js

@@ -1,3 +1,5 @@
+import { slideInDownMenu } from '@junipero/transitions';
+
 import FieldControl from '../FieldControl';
 import Label from '../Label';
 import Abstract from '../Abstract';
@@ -88,3 +90,7 @@ export const withArbitraryValues = () => (
     multiple={true}
   />
 );
+
+export const animated = () => (
+  <SelectField animateMenu={slideInDownMenu} />
+);

packages/react/lib/Tooltip/index.d.ts

@@ -22,7 +22,7 @@ export declare type TooltipRef = {
 declare interface TooltipProps extends React.ComponentPropsWithRef<any> {
   animate?: (
     tooltipInner: React.ReactNode,
-    options: { opnend?: Boolean }
+    options: { opened?: Boolean }
   ) => void;
   apparition?: String;
   children?: React.ReactNode;

packages/theme/lib/index.sass

@@ -1,6 +1,7 @@
 // Core
 @use "./reset"
 @use "./icons"
+@use "./transitions"
 
 // Display
 @use "./Abstract"

packages/theme/lib/transitions.sass

@@ -0,0 +1,41 @@
+.jp-slide-in-up-menu
+  &-enter
+    opacity: 0
+    transform: translate3d(0, 10px, 0)
+
+    &-active
+      opacity: 1
+      transform: translate3d(0, 0, 0)
+      transition-property: opacity, transform
+      transition-timing-function: ease-out
+      transition-duration: 100ms
+
+  &-exit
+    opacity: 1
+    transform: translate3d(0, 0, 0)
+
+    &-active
+      opacity: 0
+      transform: translate3d(0, 10px, 0)
+      transition-property: opacity, transform
+      transition-timing-function: ease-out
+      transition-duration: 100ms
+
+.jp-slide-in-down-menu
+  &-enter
+    opacity: 0
+    transform: translate3d(0, -10px, 0)
+
+    &-active
+      opacity: 1
+      transform: translate3d(0, 0, 0)
+      transition: opacity .1s ease-out, transform .1s ease-out
+
+  &-exit
+    opacity: 1
+    transform: translate3d(0, 0, 0)
+
+    &-active
+      opacity: 0
+      transform: translate3d(0, -10px, 0)
+      transition: opacity .1s ease-out, transform .1s ease-out

packages/transitions/lib/index.js

@@ -4,9 +4,10 @@ export const animateMenu = (
   name,
   { time = 100, ...opts } = {}
 ) =>
-  (menu, { opened }) => (
+  (menu, { opened } = {}) => (
     <CSSTransition
       in={opened}
+      appear={true}
       mountOnEnter={true}
       unmountOnExit={true}
       timeout={time}
@@ -16,14 +17,14 @@ export const animateMenu = (
     />
   );
 
-export const slideInUpMenu = animateMenu('slide-in-up-menu');
-export const slideInDownMenu = animateMenu('slide-in-down-menu');
+export const slideInUpMenu = animateMenu('jp-slide-in-up-menu');
+export const slideInDownMenu = animateMenu('jp-slide-in-down-menu');
 
 export const animateModal = (
   name,
   { time = 300, ...opts } = {}
 ) =>
-  (modal, { opened }) => (
+  (modal, { opened } = {}) => (
     <CSSTransition
       in={opened}
       mountOnEnter={true}