Merge branch 'master' into change-attention-warning-icon

packages/core/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.9.2](https://github.com/mondaycom/vibe/compare/@vibe/[email protected]...@vibe/[email protected]) (2024-12-23)
+
+**Note:** Version bump only for package @vibe/core
+
+
+
+
+
+## [3.9.1](https://github.com/mondaycom/vibe/compare/@vibe/[email protected]...@vibe/[email protected]) (2024-12-22)
+
+
+### Bug Fixes
+
+* **List:** fix error when ListItem is not HTMLElement ([#2672](https://github.com/mondaycom/vibe/issues/2672)) ([e175d32](https://github.com/mondaycom/vibe/commit/e175d326cab32d8a0d8e3d812689b8d8397aba56))
+
+
+
+
+
+# [3.9.0](https://github.com/mondaycom/vibe/compare/@vibe/[email protected]...@vibe/[email protected]) (2024-12-19)
+
+
+### Bug Fixes
+
+* **ModalBasicLayout:** fix for logic of when to show modal footer shadow ([#2665](https://github.com/mondaycom/vibe/issues/2665)) ([9d68962](https://github.com/mondaycom/vibe/commit/9d68962a87fcae22d43d592aa395bbbe8aa470c7))
+
+
+### Features
+
+* **TransitionView:** remove previous slide before continuing to next slide, enhance animation ([#2668](https://github.com/mondaycom/vibe/issues/2668)) ([0bd51df](https://github.com/mondaycom/vibe/commit/0bd51df7253834864d60039f420ef531b0fdfc30))
+
+
+
+
+
 # [3.8.0](https://github.com/mondaycom/vibe/compare/@vibe/[email protected]...@vibe/[email protected]) (2024-12-19)
 
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/core",
-  "version": "3.8.0",
+  "version": "3.9.2",
   "description": "Official monday.com UI resources for application development in React.js",
   "repository": {
     "type": "git",

packages/core/src/components/Dropdown/Dropdown.tsx

@@ -376,7 +376,10 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
       }
     };
 
-    const DropDownComponent: React.ElementType = asyncOptions ? AsyncSelect : Select;
+    let DropDownComponent: React.ElementType = asyncOptions ? AsyncSelect : Select;
+
+    // @ts-expect-error - We need to check if the default export is available
+    DropDownComponent = DropDownComponent.default || DropDownComponent;
 
     const asyncAdditions = {
       ...(asyncOptions && {

packages/core/src/components/List/List.tsx

@@ -117,7 +117,7 @@ const List: VibeComponent<ListProps> & {
 
     useEffect(() => {
       const selectedItemIndex = childrenRefs.current.findIndex(
-        child => isListItem(child) && child?.getAttribute("aria-selected") === "true"
+        child => child instanceof HTMLElement && isListItem(child) && child?.getAttribute("aria-selected") === "true"
       );
       if (selectedItemIndex !== -1) {
         updateFocusedItem(getListItemIdByIndex(childrenRefs, selectedItemIndex));

packages/core/src/components/List/utils/ListUtils.ts

@@ -37,7 +37,7 @@ export const getListItemComponentType = (listComponent: ListElement): ListItemEl
 };
 
 export const isListItem = (element: HTMLElement) => {
-  return element && element.getAttribute("role") === "option";
+  return element && element instanceof HTMLElement && element.getAttribute("role") === "option";
 };
 
 export const getNextListItemIndex = (currentIndex: number, childrenRefs: MutableRefObject<HTMLElement[]>) => {

packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import Button from "../../../Button/Button";
 import { StorybookLink, Tip } from "vibe-storybook-components";
-import { useAfterFirstRender } from "../../../../hooks";
 import cx from "classnames";
 import styles from "./Modal.stories.module.scss";
 import { getStyle } from "../../../../helpers/typesciptCssModulesHelper";
@@ -21,14 +20,12 @@ export const OpenedModalPreview = forwardRef(
     },
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
-    const isAfterFirstRender = useAfterFirstRender();
     return (
       <div
         className={cx(styles.preview, { [getStyle(styles, size)]: isDocsView })}
         ref={ref}
         // workaround to prevent modal from autofocusing on page load
-        // autofocus would work as expected when modal closes and reopens
-        {...(!isAfterFirstRender.current && isDocsView && { "data-no-autofocus": true })}
+        {...(isDocsView && { "data-no-autofocus": true })}
       >
         <Button onClick={onOpenModalClick}>Open Modal</Button>
         {modal}
@@ -51,8 +48,7 @@ export const useRemoveModalScrollLock = (show: boolean, isDocsView?: boolean) =>
         );
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- this is intended to run once, on mount
-  }, []);
+  }, [show, isDocsView]);
 };
 
 export function withOpenedModalPreview(
@@ -65,7 +61,7 @@ export function withOpenedModalPreview(
 ) {
   const [show, setShow] = useState(true);
   const container = useRef<HTMLElement>(null);
-  useRemoveModalScrollLock(show, isDocsView); // internal hook, for documentation purposes, to enable scroll on first load
+  useRemoveModalScrollLock(show, isDocsView); // internal hook, for documentation purposes, to enable page scroll on docs view
 
   return (
     // internal component, for documentation purposes, to open modal inside a container

packages/core/src/components/SlideTransition/SlideTransition.module.scss

@@ -1,4 +1,4 @@
 .slide {
-  position: absolute;
+  height: 100%;
   width: 100%;
 }

packages/core/src/components/SlideTransition/SlideTransition.tsx

@@ -14,7 +14,6 @@ const SlideTransition = forwardRef(
         variants={slideAnimationVariants}
         initial="initial"
         animate="enter"
-        exit="exit"
         transition={slideAnimationTransition}
         className={cx(styles.slide, className)}
         style={style}

packages/core/src/components/SlideTransition/utils/animationVariants.ts

@@ -2,20 +2,14 @@ import { SlideDirection } from "../SlideTransition.types";
 
 export const slideAnimationVariants = {
   initial: (direction: SlideDirection) => ({
-    x: direction === "forward" ? "10%" : "-10%",
-    opacity: 0
+    x: direction === "forward" ? "3%" : "-3%"
   }),
   enter: {
-    x: 0,
-    opacity: 1
-  },
-  exit: (direction: SlideDirection) => ({
-    x: direction === "forward" ? "-10%" : "10%",
-    opacity: 0
-  })
+    x: 0
+  }
 };
 
 export const slideAnimationTransition = {
-  duration: 0.1,
+  duration: 0.25,
   ease: [0.0, 0.0, 0.4, 1.0]
 };

packages/core/src/components/TransitionView/TransitionView.module.scss

@@ -1,6 +1,5 @@
 .slideshow {
-  position: relative;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  min-height: 0;
 }

packages/core/src/components/TransitionView/TransitionView.tsx

@@ -1,46 +1,26 @@
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef } from "react";
 import cx from "classnames";
 import { AnimatePresence } from "framer-motion";
 import { TransitionViewProps } from "./TransitionView.types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import styles from "./TransitionView.module.scss";
 import SlideTransition from "../SlideTransition/SlideTransition";
-import useMergeRef from "../../hooks/useMergeRef";
 
 const TransitionView = forwardRef(
   (
-    { activeStep, direction, height, id, className, "data-testid": dataTestId, children }: TransitionViewProps,
+    { activeStep, direction, id, className, "data-testid": dataTestId, children }: TransitionViewProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
-    const componentRef = useRef<HTMLDivElement>(null);
-    const mergedRef = useMergeRef(ref, componentRef);
-    const slideTransitionRef = useRef<HTMLDivElement>(null);
-    const [contentHeight, setContentHeight] = useState<number | "100%">(height);
-    const slideTransitionHeight = height || contentHeight === "100%" || contentHeight > 0 ? "100%" : "auto";
-
-    useEffect(() => {
-      if (!slideTransitionRef.current) return;
-      // if parent has definite height, stretch component to fill it, otherwise use content height
-      setContentHeight(componentRef.current.clientHeight > 0 ? "100%" : slideTransitionRef.current.scrollHeight);
-    }, [height, slideTransitionRef]);
-
     return (
       <div
         id={id}
         className={cx(styles.slideshow, className)}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.TRANSITION_VIEW, id)}
-        ref={mergedRef}
-        style={{ height: height ?? contentHeight }}
+        ref={ref}
       >
-        <AnimatePresence initial={false} custom={direction}>
-          <SlideTransition
-            key={activeStep}
-            direction={direction}
-            // it must be "auto" on initial load to consider scrollable content in contentHeight calculation
-            style={{ height: slideTransitionHeight }}
-            ref={slideTransitionRef}
-          >
+        <AnimatePresence initial={false} custom={direction} exitBeforeEnter>
+          <SlideTransition key={activeStep} direction={direction}>
             {children[activeStep]}
           </SlideTransition>
         </AnimatePresence>

packages/core/src/components/TransitionView/TransitionView.types.ts

@@ -5,7 +5,6 @@ import { SlideDirection } from "../SlideTransition/SlideTransition.types";
 export interface TransitionViewProps extends VibeComponentProps {
   activeStep: number;
   direction: TransitionDirection;
-  height?: number;
   children: React.ReactNode[];
 }
 

packages/core/src/components/VirtualizedGrid/VirtualizedGrid.tsx

@@ -1,6 +1,12 @@
 import React, { CSSProperties, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import cx from "classnames";
-import { GridChildComponentProps, GridOnScrollProps, ScrollDirection, VariableSizeGrid as Grid } from "react-window";
+import {
+  GridChildComponentProps,
+  GridOnScrollProps,
+  ScrollDirection,
+  VariableSizeGrid as Grid,
+  GridOnItemsRenderedProps
+} from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
 import {
   getNormalizedItems,
@@ -209,14 +215,14 @@ const VirtualizedGrid: VibeComponent<VirtualizedGridProps> = forwardRef(
     );
 
     const onItemsRenderedCB = useThrottledCallback(
-      ({ visibleStartIndex, visibleStopIndex }) => {
+      ({ visibleRowStartIndex, visibleRowStopIndex }: GridOnItemsRenderedProps) => {
         if (!onItemsRendered) return;
         const data = getOnItemsRenderedData(
           items,
           normalizedItems,
           idGetter,
-          visibleStartIndex,
-          visibleStopIndex,
+          visibleRowStartIndex,
+          visibleRowStopIndex,
           gridHeight,
           scrollTopRef.current
         );