fix(Overlay): faster transitions

Author: tenphi

.changeset/neat-clouds-sleep.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Faster overlay transition with 120ms duration instead of 180ms.

src/components/overlays/OverlayWrapper.tsx

@@ -45,7 +45,7 @@ export function OverlayWrapper({
     <CSSTransition
       unmountOnExit
       in={isOpen}
-      timeout={180}
+      timeout={120}
       classNames="cube-overlay-transition"
     >
       <>{children}</>

src/utils/react/index.ts

@@ -7,3 +7,4 @@ export { useLayoutEffect } from './useLayoutEffect';
 export { useCombinedRefs } from './useCombinedRefs';
 export { wrapNodeIfPlain } from './wrapNodeIfPlain';
 export { useViewportSize } from './useViewportSize';
+export { useQaProps } from './useQaProps';

src/utils/react/useQaProps.ts

@@ -0,0 +1,45 @@
+type Props = {
+  qa?: string;
+  qaVal?: string;
+  'data-qa'?: string;
+  'data-qa-val'?: string;
+};
+
+/**
+ * Processes QA props.
+ * If `qa` or `qaVal` props are present, they are not modified and have higher priority.
+ * Otherwise, maps `data-qa` to `qa` and `data-qa-val` to `qaVal`.
+ * Data attributes are always removed.
+ * Modifies the original props object without copying it.
+ * Accepts only non-falsy values, otherwise deletes both props.
+ *
+ * @param props - The object to process
+ * @returns The modified object
+ */
+export function useQaProps<T extends Props>(props: T): T {
+  // Helper function to process qa attributes
+  const processQaAttribute = (propName: string, dataAttrName: string) => {
+    if (props[propName] !== undefined || props[dataAttrName] !== undefined) {
+      const propValue = props[propName];
+      const dataAttrValue = props[dataAttrName];
+
+      if (!propValue) {
+        if (dataAttrValue) {
+          // If prop is empty but data-attr is truthy, map data-attr to prop
+          props[propName] = dataAttrValue;
+        } else {
+          // Both values are falsy, delete both
+          delete props[propName];
+        }
+      }
+
+      delete props[dataAttrName];
+    }
+  };
+
+  // Process qa attributes
+  processQaAttribute('qa', 'data-qa');
+  processQaAttribute('qaVal', 'data-qa-val');
+
+  return props;
+}

src/utils/transitions.ts

@@ -41,7 +41,7 @@ export const getOverlayTransitionCSS = ({
     };
     --overlay-translate-visible: translate(0px, 0px);
     --overlay-translate-hidden: ${TRANSLATE_MAP[placement]};
-    --overlay-transition: 180ms;
+    --overlay-transition: 120ms;
     --overlay-hidden-scale: scale(var(--overlay-hidden-x-scale), var(--overlay-hidden-y-scale));
     --overlay-normal-scale: scale(1, 1);
   }