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/Button/__tests__/__snapshots__/Button.snapshot.test.tsx.snap

@@ -375,8 +375,7 @@ exports[`Button renders correctly renders correctly with leftIcon 1`] = `
   >
     <path
       clipRule="evenodd"
-      d="M6.19306 2.51988C6.45823 2.20167 6.93116 2.15868 7.24936 2.42385L10 4.71605L12.7506 2.42385C13.0688 2.15868 13.5418 2.20167 13.8069 2.51988C14.0721 2.83809 14.0291 3.31101 13.7109 3.57618L12.0715 4.94233H17C17.4142 4.94233 17.75 5.27811 17.75 5.69233V11.0769C17.75 11.4912 17.4142 11.8269 17 11.8269H16.6731V15.9231C16.6731 16.4077 16.4806 16.8723 16.138 17.215C15.7954 17.5576 15.3307 17.75 14.8461 17.75H5.15384C4.66931 17.75 4.20463 17.5576 3.86201 17.215C3.5194 16.8723 3.32692 16.4077 3.32692 15.9231V11.8269H3C2.58579 11.8269 2.25 11.4912 2.25 11.0769V5.69233C2.25 5.27811 2.58579 4.94233 3 4.94233H7.92846L6.28909 3.57618C5.97088 3.31101 5.92789 2.83809 6.19306 2.51988ZM9.25 6.44233H3.75V10.3269H9.25V6.44233ZM10.75 10.3269V6.44233H16.25V10.3269H10.75ZM9.25 11.827H4.82692V15.9231C4.82692 16.0098 4.86136 16.093 4.92267 16.1543C4.98398 16.2156 5.06714 16.25 5.15384 16.25H9.25V11.827ZM10.75 16.25V11.827H15.1731V15.9231C15.1731 16.0098 15.1386 16.093 15.0773 16.1543C15.016 16.2156 14.9329 16.25 14.8461 16.25H10.75Z"
-      fill="currentColor"
+      d="M10.778 2.657c.972-.928 2.576-.86 3.544-.027a2.482 2.482 0 0 1 .78 2.59h1.039c.966 0 1.75.783 1.75 1.75v1.677a1.75 1.75 0 0 1-1.75 1.75h-.124V16a1.75 1.75 0 0 1-1.75 1.75H5.7A1.75 1.75 0 0 1 3.951 16v-5.603h-.12a1.75 1.75 0 0 1-1.75-1.75V6.97c0-.967.783-1.75 1.75-1.75h.911a2.483 2.483 0 0 1 .78-2.586c.97-.833 2.573-.9 3.546.027.381.365.65.782.848 1.09l.005.008.009-.013c.197-.307.466-.725.848-1.089Zm2.566 1.11c-.449-.386-1.176-.363-1.53-.025-.25.238-.431.519-.646.852l-.038.059c-.102.158-.231.359-.396.549h2.325l.042.002c.29.016.488-.14.57-.435a.983.983 0 0 0-.327-1.002Zm-6.843.004c.45-.386 1.177-.363 1.531-.024.25.237.43.518.646.851l.037.06c.102.157.232.358.396.548H6.786l-.042.002c-.29.016-.488-.139-.57-.435a.983.983 0 0 1 .327-1.002Zm2.733 5.126H3.83a.25.25 0 0 1-.25-.25V6.97a.25.25 0 0 1 .25-.25h5.404v2.177Zm1.502 0V6.72h5.405a.25.25 0 0 1 .25.25v1.677a.25.25 0 0 1-.25.25h-5.405ZM5.451 16v-5.603h3.781v5.853h-3.53a.25.25 0 0 1-.25-.25Zm5.284.25v-5.853h3.782V16a.25.25 0 0 1-.25.25h-3.532Z"
       fillRule="evenodd"
     />
   </svg>
@@ -426,8 +425,7 @@ exports[`Button renders correctly renders correctly with rightIcon 1`] = `
   >
     <path
       clipRule="evenodd"
-      d="M6.19306 2.51988C6.45823 2.20167 6.93116 2.15868 7.24936 2.42385L10 4.71605L12.7506 2.42385C13.0688 2.15868 13.5418 2.20167 13.8069 2.51988C14.0721 2.83809 14.0291 3.31101 13.7109 3.57618L12.0715 4.94233H17C17.4142 4.94233 17.75 5.27811 17.75 5.69233V11.0769C17.75 11.4912 17.4142 11.8269 17 11.8269H16.6731V15.9231C16.6731 16.4077 16.4806 16.8723 16.138 17.215C15.7954 17.5576 15.3307 17.75 14.8461 17.75H5.15384C4.66931 17.75 4.20463 17.5576 3.86201 17.215C3.5194 16.8723 3.32692 16.4077 3.32692 15.9231V11.8269H3C2.58579 11.8269 2.25 11.4912 2.25 11.0769V5.69233C2.25 5.27811 2.58579 4.94233 3 4.94233H7.92846L6.28909 3.57618C5.97088 3.31101 5.92789 2.83809 6.19306 2.51988ZM9.25 6.44233H3.75V10.3269H9.25V6.44233ZM10.75 10.3269V6.44233H16.25V10.3269H10.75ZM9.25 11.827H4.82692V15.9231C4.82692 16.0098 4.86136 16.093 4.92267 16.1543C4.98398 16.2156 5.06714 16.25 5.15384 16.25H9.25V11.827ZM10.75 16.25V11.827H15.1731V15.9231C15.1731 16.0098 15.1386 16.093 15.0773 16.1543C15.016 16.2156 14.9329 16.25 14.8461 16.25H10.75Z"
-      fill="currentColor"
+      d="M10.778 2.657c.972-.928 2.576-.86 3.544-.027a2.482 2.482 0 0 1 .78 2.59h1.039c.966 0 1.75.783 1.75 1.75v1.677a1.75 1.75 0 0 1-1.75 1.75h-.124V16a1.75 1.75 0 0 1-1.75 1.75H5.7A1.75 1.75 0 0 1 3.951 16v-5.603h-.12a1.75 1.75 0 0 1-1.75-1.75V6.97c0-.967.783-1.75 1.75-1.75h.911a2.483 2.483 0 0 1 .78-2.586c.97-.833 2.573-.9 3.546.027.381.365.65.782.848 1.09l.005.008.009-.013c.197-.307.466-.725.848-1.089Zm2.566 1.11c-.449-.386-1.176-.363-1.53-.025-.25.238-.431.519-.646.852l-.038.059c-.102.158-.231.359-.396.549h2.325l.042.002c.29.016.488-.14.57-.435a.983.983 0 0 0-.327-1.002Zm-6.843.004c.45-.386 1.177-.363 1.531-.024.25.237.43.518.646.851l.037.06c.102.157.232.358.396.548H6.786l-.042.002c-.29.016-.488-.139-.57-.435a.983.983 0 0 1 .327-1.002Zm2.733 5.126H3.83a.25.25 0 0 1-.25-.25V6.97a.25.25 0 0 1 .25-.25h5.404v2.177Zm1.502 0V6.72h5.405a.25.25 0 0 1 .25.25v1.677a.25.25 0 0 1-.25.25h-5.405ZM5.451 16v-5.603h3.781v5.853h-3.53a.25.25 0 0 1-.25-.25Zm5.284.25v-5.853h3.782V16a.25.25 0 0 1-.25.25h-3.532Z"
       fillRule="evenodd"
     />
   </svg>

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]}