fix(ui-layout-view): refactor styles and transitions

.changeset/real-owls-marry.md

@@ -0,0 +1,2 @@
+---
+---

components/ui-layout-view/src/UiLayoutView.css.ts

@@ -1,168 +1,161 @@
-import { style } from '@vanilla-extract/css';
+import { assignVars, createGlobalThemeContract, style, styleVariants } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 
 import { uiLayers, uiTheme } from '@tabula/ui-theme';
 
-export const root = style({
-  '@layer': {
-    [uiLayers.components]: {
-      vars: {
-        '--duration': uiTheme.duration.moderate[1],
-        '--entrance-easing': uiTheme.easing.entrance.productive,
-        '--exit-easing': uiTheme.easing.exit.productive,
+const theme = createGlobalThemeContract({
+  duration: 'duration',
 
-        '--left-sidebar-width': '0px',
-        '--right-sidebar-width': '0px',
-      },
+  easing: {
+    entrance: 'entrance-easing',
+    exit: 'exit-easing',
+  },
 
-      position: 'relative',
-      overflow: 'hidden',
-    },
+  width: {
+    left: 'left-sidebar-width',
+    right: 'right-sidebar-width',
   },
 });
 
-// ----- Container and animation styles
-
-export const container = style({
+export const root = style({
   '@layer': {
     [uiLayers.components]: {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
+      vars: assignVars(theme, {
+        duration: uiTheme.duration.moderate[1],
 
-      left: calc.multiply(-1, 'var(--left-sidebar-width)'),
-      right: calc.multiply(-1, 'var(--right-sidebar-width)'),
-      willChange: 'left, right',
+        easing: {
+          entrance: uiTheme.easing.entrance.productive,
+          exit: uiTheme.easing.exit.productive,
+        },
+
+        width: {
+          left: '0px',
+          right: '0px',
+        },
+      }),
+
+      position: 'relative',
+      overflow: 'hidden',
     },
   },
 });
 
-// ----- Left sidebar styles
+// ----- Panel styles
 
-export const withLeftSidebar = style({
-  '@layer': {
-    [uiLayers.components]: {
+export const panels = styleVariants(
+  {
+    leftSidebar: {
       left: 0,
+      zIndex: 1,
+      width: theme.width.left,
+      overflow: 'hidden',
     },
-  },
-});
-
-export const enterLeftSidebar = style({
-  '@layer': {
-    [uiLayers.components]: {
-      left: calc.multiply(-1, 'var(--left-sidebar-width)'),
+    body: {
+      left: theme.width.left,
+      right: theme.width.right,
+    },
+    rightSidebar: {
+      right: 0,
+      zIndex: 1,
+      width: theme.width.right,
+      overflow: 'hidden',
     },
   },
-});
+  (styles) => ({
+    '@layer': {
+      [uiLayers.components]: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+
+        ...styles,
+      },
+    },
+  }),
+);
 
-export const enterLeftSidebarActive = style({
-  '@layer': {
-    [uiLayers.components]: {
+// ----- Container and animation styles
+
+export const leftSidebarStates = styleVariants(
+  {
+    enter: {
+      left: calc.multiply(-1, theme.width.left),
+    },
+    enterActive: {
       left: 0,
-      transition: 'left var(--duration) var(--entrance-easing)',
+      transition: `left ${theme.duration} ${theme.easing.entrance}`,
     },
-  },
-});
-
-export const exitLeftSidebar = style({
-  '@layer': {
-    [uiLayers.components]: {
+    exit: {
       left: 0,
     },
-  },
-});
-
-export const exitLeftSidebarActive = style({
-  '@layer': {
-    [uiLayers.components]: {
-      left: calc.multiply(-1, 'var(--left-sidebar-width)'),
-      transition: 'left var(--duration) var(--exit-easing)',
+    exitActive: {
+      left: calc.multiply(-1, theme.width.left),
+      transition: `left ${theme.duration} ${theme.easing.exit}`,
     },
   },
-});
-
-// ----- Right sidebar styles
-
-export const withRightSidebar = style({
-  '@layer': {
-    [uiLayers.components]: {
-      right: 0,
+  (styles) => ({
+    '@layer': {
+      [uiLayers.components]: styles,
     },
-  },
-});
+  }),
+);
 
-export const enterRightSidebar = style({
-  '@layer': {
-    [uiLayers.components]: {
-      right: calc.multiply(-1, 'var(--right-sidebar-width)'),
+export const rightSidebarStates = styleVariants(
+  {
+    enter: {
+      right: calc.multiply(-1, theme.width.right),
     },
-  },
-});
-
-export const enterRightSidebarActive = style({
-  '@layer': {
-    [uiLayers.components]: {
+    enterActive: {
       right: 0,
-      transition: 'right var(--duration) var(--entrance-easing)',
+      transition: `right ${theme.duration} ${theme.easing.entrance}`,
     },
-  },
-});
-
-export const exitRightSidebar = style({
-  '@layer': {
-    [uiLayers.components]: {
+    exit: {
       right: 0,
     },
-  },
-});
-
-export const exitRightSidebarActive = style({
-  '@layer': {
-    [uiLayers.components]: {
-      right: calc.multiply(-1, 'var(--right-sidebar-width)'),
-      transition: 'right var(--duration) var(--exit-easing)',
+    exitActive: {
+      right: calc.multiply(-1, theme.width.right),
+      transition: `right ${theme.duration} ${theme.easing.exit}`,
     },
   },
-});
-
-// ----- Panel styles
-
-export const body = style({
-  '@layer': {
-    [uiLayers.components]: {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 'var(--left-sidebar-width)',
-      right: 'var(--right-sidebar-width)',
+  (styles) => ({
+    '@layer': {
+      [uiLayers.components]: styles,
     },
-  },
-});
+  }),
+);
 
-export const leftSidebar = style({
+export const container = style({
   '@layer': {
     [uiLayers.components]: {
       position: 'absolute',
       top: 0,
       bottom: 0,
-      left: 0,
-      zIndex: 1,
-      width: 'var(--left-sidebar-width)',
-      overflow: 'hidden',
-    },
-  },
-});
 
-export const rightSidebar = style({
-  '@layer': {
-    [uiLayers.components]: {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      right: 0,
-      zIndex: 1,
-      width: 'var(--right-sidebar-width)',
-      overflow: 'hidden',
+      left: calc.multiply(-1, theme.width.left),
+      right: calc.multiply(-1, theme.width.right),
+      willChange: 'left, right',
+      transition: [
+        `left ${theme.duration} ${theme.easing.exit}`,
+        `right ${theme.duration} ${theme.easing.exit}`,
+      ].join(', '),
+
+      selectors: {
+        [`&:has(${panels.leftSidebar}:not(:empty))`]: {
+          left: 0,
+          transition: [
+            `left ${theme.duration} ${theme.easing.entrance}`,
+            `right ${theme.duration} ${theme.easing.entrance}`,
+          ].join(', '),
+        },
+
+        [`&:has(${panels.rightSidebar}:not(:empty))`]: {
+          right: 0,
+          transition: [
+            `left ${theme.duration} ${theme.easing.entrance}`,
+            `right ${theme.duration} ${theme.easing.entrance}`,
+          ].join(', '),
+        },
+      },
     },
   },
 });

components/ui-layout-view/src/UiLayoutView.tsx

@@ -3,23 +3,14 @@ import { ReactElement, createElement, useRef } from 'react';
 import clsx from 'clsx';
 import { CSSTransition } from 'react-transition-group';
 
-import {
-  body,
-  container,
-  leftSidebar,
-  rightSidebar,
-  root,
-  withLeftSidebar,
-  withRightSidebar,
-} from './UiLayoutView.css';
+import { container, leftSidebarStates, panels, rightSidebarStates, root } from './UiLayoutView.css';
 
-import {
-  DURATION,
-  LEFT_SIDEBAR_CLASS_NAMES,
-  RIGHT_SIDEBAR_CLASS_NAMES,
-} from './UiLayoutView.const';
 import { Props } from './UiLayoutView.types';
 
+const endListener = (node: HTMLElement, done: () => void) => {
+  node.addEventListener('transitionend', done, false);
+};
+
 export function UiLayoutView({
   rootClassName,
   bodyClassName,
@@ -38,33 +29,24 @@ export function UiLayoutView({
   return (
     <div className={clsx(root, rootClassName)} ref={forwardedRef}>
       <CSSTransition
+        addEndListener={endListener}
+        classNames={leftSidebarStates}
         in={isLeftSidebarVisible}
-        timeout={DURATION}
-        classNames={LEFT_SIDEBAR_CLASS_NAMES}
-        nodeRef={ref}
       >
         <CSSTransition
+          addEndListener={endListener}
+          classNames={rightSidebarStates}
           in={isRightSidebarVisible}
-          timeout={DURATION}
-          classNames={RIGHT_SIDEBAR_CLASS_NAMES}
-          nodeRef={ref}
         >
-          <div
-            ref={ref}
-            className={clsx(
-              container,
-              isLeftSidebarVisible && withLeftSidebar,
-              isRightSidebarVisible && withRightSidebar,
-            )}
-          >
+          <div ref={ref} className={clsx(container)}>
             {hasLeftSidebar && (
-              <div className={clsx(leftSidebar, props.leftSidebarClassName)}>
+              <div className={clsx(panels.leftSidebar, props.leftSidebarClassName)}>
                 {isLeftSidebarVisible && createElement(props.leftSidebar, null)}
               </div>
             )}
-            <div className={clsx(body, bodyClassName)}>{children}</div>
+            <div className={clsx(panels.body, bodyClassName)}>{children}</div>
             {hasRightSidebar && (
-              <div className={clsx(rightSidebar, props.rightSidebarClassName)}>
+              <div className={clsx(panels.rightSidebar, props.rightSidebarClassName)}>
                 {isRightSidebarVisible && createElement(props.rightSidebar, null)}
               </div>
             )}