Merge branch 'vibe3' into vibe3-welcome-page

.github/workflows/release.yml

@@ -35,7 +35,7 @@ jobs:
       - uses: ./.github/actions/git-creds
       - uses: ./.github/actions/download-builds
       - name: Generate new versions
-        run: yarn lerna version --exact --conventional-commits -y
+        run: yarn lerna version --exact --conventional-commits --conventional-graduate -y
       - run: yarn config set registry https://registry.npmjs.org/
       - name: Setup .npmrc for publish
         id: setup-npmrc

.github/workflows/test.yml

@@ -40,8 +40,7 @@ jobs:
           SINCE_FLAG: ${{ steps.determine-since-flag.outputs.since_flag }}
         run: yarn lerna run ${{ matrix.command }} $SINCE_FLAG
 
-  tests_e2e:
-    name: Run end-to-end tests
+  e2e:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -56,12 +55,12 @@ jobs:
       - uses: ./.github/actions/download-builds
       - name: Install playwright browsers
         run: npx playwright install --with-deps
-      - name: Run tests
+      - name: Run e2e tests
         run: yarn lerna run test:e2e $SINCE_FLAG --scope "@vibe/testkit"
       - uses: actions/upload-artifact@v4
         if: ${{ always() }}
         with:
           name: test-results    
           path: |
             packages/testkit/reports
-            packages/testkit/test-results
+            packages/testkit/test-results

packages/codemod/README.md

@@ -66,3 +66,8 @@ The following migrations are included in this CLI:
 
 - **Migration Type**: `v3` (`--migration v3`)
 - **Description**: This migration transforms components and files to comply with version 3 of @vibe/code.
+
+### `enums` Migration
+
+- **Migration Type**: `enums` (`--migration enums`)
+- **Description**: This migration transforms enums to TS types with version 3 of @vibe/code.

packages/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/codemod",
-  "version": "0.1.0",
+  "version": "1.0.0-rc.0",
   "description": "Vibe's component library migration tool",
   "repository": {
     "type": "git",

packages/core/CHANGELOG.md

@@ -3,6 +3,85 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.147.1](https://github.com/mondaycom/vibe/compare/[email protected]@2.147.1) (2024-11-21)
+
+
+### Bug Fixes
+
+* **AvatarGroup:** pass dialogContainerSelector from AvatarGroup to AvatarGroupCounter ([#2602](https://github.com/mondaycom/vibe/issues/2602)) ([571e908](https://github.com/mondaycom/vibe/commit/571e908bbc7e8647444026d08a6fe93a2c000330))
+* **TextField:** when inputValue is undefined, length check fails ([#2603](https://github.com/mondaycom/vibe/issues/2603)) ([ad98340](https://github.com/mondaycom/vibe/commit/ad983408dcbdfc725f9106c0a314c7c84ffb66ec))
+
+
+
+
+
+# [2.147.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.147.0) (2024-11-20)
+
+
+### Features
+
+* **Switcher:** update icon ([#2599](https://github.com/mondaycom/vibe/issues/2599)) ([cdac401](https://github.com/mondaycom/vibe/commit/cdac401ee11c14c2ae3ca2d4fe62aa579b2dd1c0))
+
+
+
+
+
+# [2.146.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.146.0) (2024-11-19)
+
+
+### Bug Fixes
+
+* **TextArea:** Error state not correctly set when maxlength is exceeded ([#2588](https://github.com/mondaycom/vibe/issues/2588)) ([5a140e8](https://github.com/mondaycom/vibe/commit/5a140e8f335c4b2f4c83ae6beeae3de7db55d746))
+
+
+### Features
+
+* **Switcher:** update icon ([#2597](https://github.com/mondaycom/vibe/issues/2597)) ([3c045b1](https://github.com/mondaycom/vibe/commit/3c045b18caf3dad36787c5ee9e84ebb3f71425b2))
+
+
+
+
+
+## [2.145.2](https://github.com/mondaycom/vibe/compare/[email protected]@2.145.2) (2024-11-18)
+
+
+### Bug Fixes
+
+* **Switcher:** revert icon change to older version ([#2596](https://github.com/mondaycom/vibe/issues/2596)) ([202e5a6](https://github.com/mondaycom/vibe/commit/202e5a6a1e20b3fc9c9e20185d8d46fc713650b6))
+
+
+
+
+
+## [2.145.1](https://github.com/mondaycom/vibe/compare/[email protected]@2.145.1) (2024-11-18)
+
+
+### Bug Fixes
+
+* **table:** horizontal scroll on react 18 ([#2594](https://github.com/mondaycom/vibe/issues/2594)) ([09c0dc8](https://github.com/mondaycom/vibe/commit/09c0dc83676f5b5a0504e25db0e26227f6b003c9))
+
+
+
+
+
+# [2.145.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.145.0) (2024-11-18)
+
+
+### Bug Fixes
+
+* **TextArea:** don't show the help section if no help text or char co… ([#2590](https://github.com/mondaycom/vibe/issues/2590)) ([162a77d](https://github.com/mondaycom/vibe/commit/162a77d3c734f7833772e5567222de5698108356))
+* **WhatsNew:** update icon ([#2592](https://github.com/mondaycom/vibe/issues/2592)) ([fbcb99f](https://github.com/mondaycom/vibe/commit/fbcb99f257b624ee7a64eb270c30292b25f6e2ef))
+
+
+### Features
+
+* **AvatarGroupCounter:** add option to render MenuButton on a container ([#2591](https://github.com/mondaycom/vibe/issues/2591)) ([d286b28](https://github.com/mondaycom/vibe/commit/d286b285900e73b65fc7658b61fb59af8dc1d846))
+* **PinFull:** new icon ([#2589](https://github.com/mondaycom/vibe/issues/2589)) ([1e34a3c](https://github.com/mondaycom/vibe/commit/1e34a3cff3ee9d1be3d62643258fbca20a2bed83))
+
+
+
+
+
 # [2.144.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.144.0) (2024-11-15)
 
 

packages/core/package.json

@@ -88,7 +88,7 @@
     "classnames": "^2.3.2",
     "framer-motion": "^6.5.1",
     "lodash-es": "^4.17.21",
-    "monday-ui-style": "0.17.0",
+    "monday-ui-style": "0.20.0",
     "prop-types": "^15.8.1",
     "react-dates": "21.8.0",
     "react-inlinesvg": "^4.1.3",

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

@@ -7,4 +7,8 @@ export type AvatarGroupCounterVisualProps = {
   maxDigits?: number;
   ariaLabelItemsName?: string;
   noAnimation?: boolean;
+  /**
+   * Relevant only for when AvatarGroup contains a clickable avatar
+   */
+  dialogContainerSelector?: string;
 };

packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx

@@ -48,7 +48,8 @@ const AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({
     prefix: counterPrefix = "+",
     maxDigits: counterMaxDigits = 3,
     ariaLabelItemsName: counterAriaLabelItemsName = "items",
-    noAnimation
+    noAnimation,
+    dialogContainerSelector
   } = counterProps || {};
 
   const counterSizeStyle = getStyle(styles, size?.toString());
@@ -103,6 +104,7 @@ const AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({
         zIndex={1}
         className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}
         ariaLabel={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}
+        dialogContainerSelector={dialogContainerSelector}
       >
         <Menu id="menu" size={Menu.sizes.MEDIUM} className={styles.menu} focusItemIndexOnMount={0}>
           {counterTooltipAvatars.map((avatar, index) => {

packages/core/src/components/Search/Search.tsx

@@ -34,6 +34,7 @@ const Search = forwardRef(
       onFocus,
       onBlur,
       onClear,
+      onKeyDown,
       className,
       ariaExpanded,
       ariaHasPopup,
@@ -52,14 +53,11 @@ const Search = forwardRef(
     });
 
     const onClearButtonClick = useCallback(() => {
-      if (disabled) {
-        return;
-      }
-
+      if (disabled) return;
       inputRef.current?.focus?.();
       clearValue();
       onClear?.();
-    }, [disabled, clearValue]);
+    }, [disabled, clearValue, onClear]);
 
     const SearchIcon = (
       <Icon
@@ -112,6 +110,7 @@ const Search = forwardRef(
         onChange={onEventChanged}
         onBlur={onBlur}
         onFocus={onFocus}
+        onKeyDown={onKeyDown}
         autoComplete={autoComplete}
         size={size}
         wrapperRole="search"

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { SubIcon, VibeComponentProps } from "../../types";
-import { InputSize } from "../BaseInput/BaseInput.types";
+import { InputSize } from "../BaseInput";
 import IconButton from "../IconButton/IconButton";
 import MenuButton from "../MenuButton/MenuButton";
 
@@ -93,4 +93,8 @@ export interface SearchProps extends VibeComponentProps {
    * Callback function that is called when the clear button is clicked.
    */
   onClear?: () => void;
+  /**
+   * Callback function that is called when a keyboard key is down.
+   */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }

packages/core/src/components/Search/__tests__/Search.test.tsx

@@ -24,19 +24,19 @@ describe("Search", () => {
     expect(queryByLabelText("Clear")).toBeNull();
   });
 
-  it("should display both the search icon and clear icon when input has value", async () => {
+  it("should display both the search icon and clear icon when input has value", () => {
     const { getByTestId, getAllByTestId } = renderSearch({ value: "Test" });
     expect(getAllByTestId("icon")).toHaveLength(2);
     expect(getByTestId("clean-search-button")).toBeInTheDocument();
   });
 
-  it("should clear the input value when the clear icon is clicked", async () => {
+  it("should clear the input value when the clear icon is clicked", () => {
     const { getByRole, getByLabelText } = renderSearch({ value: "Test" });
     userEvent.click(getByLabelText("Clear"));
     expect(getByRole("searchbox")).toHaveValue("");
   });
 
-  it("should display the clear icon once user inputs", async () => {
+  it("should display the clear icon once user inputs", () => {
     const { getByRole, getByTestId } = renderSearch();
     userEvent.type(getByRole("searchbox"), "Test");
     expect(getByTestId("clean-search-button")).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe("Search", () => {
     expect(onClear).toHaveBeenCalled;
   });
 
-  it("should debounce the onChange call", async () => {
+  it("should debounce the onChange call", () => {
     jest.useFakeTimers();
     const onChange = jest.fn();
 
@@ -153,5 +153,33 @@ describe("Search", () => {
       userEvent.tab();
       expect(onBlur).toHaveBeenCalled();
     });
+
+    it("should call onKeyDown when Enter key is pressed", () => {
+      const onKeyDown = jest.fn();
+      const { getByRole } = renderSearch({ onKeyDown });
+      const input = getByRole("searchbox");
+      userEvent.click(input);
+      userEvent.keyboard("{Enter}");
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not call onKeyDown when input is disabled", () => {
+      const onKeyDown = jest.fn();
+      const { getByRole } = renderSearch({ onKeyDown, disabled: true });
+      const input = getByRole("searchbox");
+      userEvent.click(input);
+      userEvent.keyboard("{Enter}");
+      expect(onKeyDown).not.toHaveBeenCalled();
+    });
+
+    it("should call onKeyDown for each character when input is typed with content", () => {
+      const onKeyDown = jest.fn();
+      const string = "Hello, World!";
+      const { getByRole } = renderSearch({ onKeyDown });
+      const input = getByRole("searchbox");
+      userEvent.click(input);
+      userEvent.type(input, string);
+      expect(onKeyDown).toHaveBeenCalledTimes(string.length);
+    });
   });
 });

packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, forwardRef, UIEventHandler, useCallback, useEffect } from "react";
+import React, { ComponentType, forwardRef, useCallback, useEffect } from "react";
 import { VibeComponentProps } from "../../../types";
 import TableBody from "../TableBody/TableBody";
 import styles from "./TableVirtualizedBody.module.scss";
@@ -28,29 +28,28 @@ const TableVirtualizedBody = forwardRef(
     const { size, virtualizedListRef, onVirtualizedListScroll, markTableAsVirtualized } = useTable();
     const { resetHoveredRow } = useTableRowMenu();
 
-    const onAutoSizerScroll = useCallback<UIEventHandler<HTMLDivElement>>(
-      e => {
+    const handleOuterScroll = useCallback(
+      (e: Event) => {
+        const target = e.target as HTMLDivElement;
         resetHoveredRow();
-        onVirtualizedListScroll(e);
+        onVirtualizedListScroll({
+          target,
+          currentTarget: target
+        } as unknown as React.UIEvent<HTMLDivElement>);
       },
       [resetHoveredRow, onVirtualizedListScroll]
     );
 
     useEffect(() => {
-      markTableAsVirtualized();
-    }, [markTableAsVirtualized]);
+      const scrollElement = virtualizedListRef.current;
+      if (!scrollElement) return;
 
-    const itemRenderer = useCallback<ComponentType<ListChildComponentProps<TableVirtualizedRow>>>(
-      ({ index, style: { width: _width, ...style } }) => {
-        const currentItem = items[index];
-        const element = rowRenderer(currentItem);
-        return React.cloneElement(element, {
-          style: { ...style, ...element.props?.style },
-          key: index
-        });
-      },
-      [items, rowRenderer]
-    );
+      scrollElement.addEventListener("scroll", handleOuterScroll);
+
+      return () => {
+        scrollElement.removeEventListener("scroll", handleOuterScroll);
+      };
+    }, [handleOuterScroll]);
 
     const handleVirtualizedVerticalScroll = useCallback(
       ({
@@ -67,6 +66,22 @@ const TableVirtualizedBody = forwardRef(
       [onScroll]
     );
 
+    const itemRenderer = useCallback<ComponentType<ListChildComponentProps<TableVirtualizedRow>>>(
+      ({ index, style: { width: _width, ...style } }) => {
+        const currentItem = items[index];
+        const element = rowRenderer(currentItem);
+        return React.cloneElement(element, {
+          style: { ...style, ...element.props?.style },
+          key: index
+        });
+      },
+      [items, rowRenderer]
+    );
+
+    useEffect(() => {
+      markTableAsVirtualized();
+    }, [markTableAsVirtualized]);
+
     return (
       <TableBody
         className={cx(styles.tableBody, className)}
@@ -75,7 +90,7 @@ const TableVirtualizedBody = forwardRef(
         ref={ref}
       >
         {items?.length && (
-          <AutoSizer onScroll={onAutoSizerScroll}>
+          <AutoSizer>
             {({ height, width }: AutoSizerSize) => (
               <List
                 itemSize={RowHeights[size]}

packages/core/src/components/TextArea/TextArea.tsx

@@ -41,14 +41,14 @@ const TextArea = forwardRef(
     const numRows = rows || DEFAULT_ROWS[size];
     const helpTextId = helpText && `${id}-help-text`;
     const allowExceedingMaxLengthTextId = allowExceedingMaxLength && `${id}-allow-exceeding-max-length`;
-    const isErrorState = error || (maxLength && value?.length > maxLength);
 
     const ariaDescribedby = useMemo(
       () => [helpTextId, allowExceedingMaxLengthTextId].filter(id => !!id).join(" ") || undefined,
       [helpTextId, allowExceedingMaxLengthTextId]
     );
 
     const [characterCount, setCharacterCount] = useState(value?.length || 0);
+    const isErrorState = error || (typeof maxLength === "number" && characterCount > maxLength);
 
     const handleOnChange = useCallback(
       (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -88,7 +88,7 @@ const TextArea = forwardRef(
           required={required}
           rows={numRows}
           className={cx(styles.textArea, [styles[size]], { [styles.resize]: resize })}
-          aria-invalid={error}
+          aria-invalid={isErrorState}
           aria-describedby={ariaDescribedby}
           onChange={handleOnChange}
         />