Merge branch 'master' into master

.github/workflows/merge-queue.yml

@@ -0,0 +1,17 @@
+name: Merge Queue Checks
+
+on:
+  merge_group:
+    types:
+      - checks_requested
+
+jobs:
+  commitlint:
+    name: Commit Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.sha }}
+
+      - uses: YossiSaadi/commitlint-github-action@vibe-fork/support-merge_group-event

.github/workflows/pr.yml

@@ -18,3 +18,13 @@ jobs:
     uses: ./.github/workflows/test.yml
     secrets:
       npm_token: ${{ secrets.npm_token }}
+
+  commitlint:
+    name: Commit Lint
+    needs: build
+    if: false
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.sha }}

.github/workflows/release.yml

@@ -27,6 +27,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
+          token: ${{ secrets.VIBE_GITHUB_TOKEN }}
           fetch-depth: 0
       - name: Run Setup
         uses: ./.github/actions/setup
@@ -35,7 +36,9 @@ jobs:
       - uses: ./.github/actions/git-creds
       - uses: ./.github/actions/download-builds
       - name: Generate new versions
-        run: yarn lerna version --exact --conventional-commits --conventional-graduate -y
+        run: yarn lerna version --exact --conventional-commits --conventional-graduate --message "Publish [skip ci]" -y
+        env:
+          GH_TOKEN: ${{ secrets.VIBE_GITHUB_TOKEN }}
       - run: yarn config set registry https://registry.npmjs.org/
       - name: Setup .npmrc for publish
         id: setup-npmrc

package.json

@@ -8,7 +8,7 @@
     "lint": "lerna run lint",
     "test": "lerna run test",
     "storybook": "lerna run storybook --parallel --stream",
-    "postinstall": "lerna run build --scope=vibe-storybook-components"
+    "postinstall": "lerna run build --scope={vibe-storybook-components,@vibe/icons}"
   },
   "devDependencies": {
     "lerna": "^8.1.2",

packages/core/.eslintrc.cjs

@@ -97,16 +97,21 @@ module.exports = {
       }
     },
     {
-      files: [
-        "*.stories.@(js|jsx|ts|tsx)",
-        "*.stories.helpers.@(js|jsx|ts|tsx)",
-        "src/storybook/decorators/**/with*.{js,jsx,ts,tsx}"
-      ],
+      files: ["*.stories.@(js|jsx)", "*.stories.helpers.@(js|jsx)", "src/storybook/decorators/**/with*.{js,jsx}"],
       rules: {
         ...commonRules,
         "react-hooks/rules-of-hooks": "off",
         "react/jsx-key": "off"
       }
+    },
+    {
+      files: ["*.stories.@(ts|tsx)", "*.stories.helpers.@(ts|tsx)", "src/storybook/decorators/**/with*.{ts,tsx}"],
+      rules: {
+        ...commonRules,
+        "react-hooks/rules-of-hooks": "off",
+        "react/jsx-key": "off",
+        "react/require-default-props": "off"
+      }
     }
   ],
   env: {

packages/core/.storybook/manager-head.html

@@ -3,8 +3,13 @@
 <meta property="og:title" content="Vibe Design System" />
 <meta property="og:image" content="https://irp.cdn-website.com/33477119/dms3rep/multi/og-banner.jpeg" />
 <title>Vibe Design System</title>
-<link rel="shortcut icon" href="/favicon.ico" />
 <script src="https://use.fontawesome.com/660238b999.js"></script>
+<script type="module">
+  const faviconLink = document.querySelector("link[rel='icon']");
+  if (import.meta.url.includes("localhost")) {
+    faviconLink.href = "/favicon-dev.ico";
+  }
+</script>
 <style>
   body {
     font-family: "Figtree", sans-serif;

packages/core/.storybook/manager.jsx

@@ -27,14 +27,20 @@ addons.setConfig({
       return <SidebarItem status={parameters.status}>{name.replace(storyStatus, "").trim()}</SidebarItem>;
     },
     filters: {
-      patterns: filterStory
+      patterns: shouldShowStory
     },
     showRoots: false
   }
 });
 
-function filterStory(item) {
+/**
+ * In order to hide stories you need to add `tags: ['internal']` to the stories file metadata.
+ * In order to hide MDX, you need to add `Internal` to the title in the MDX's `Meta` declaration `title` or to the `title` in the stories file metadata.
+ *
+ * Notice that all stories are available in development mode and in Chromatic.
+ */
+function shouldShowStory(item) {
   const isDev = isChromatic() || process.env.NODE_ENV === "development";
-  const isInternal = !item.tags?.includes?.("internal") && !item.title?.startsWith?.("Internal");
-  return isDev || isInternal;
+  const isPublic = !item.tags?.includes?.("internal") && !item.title?.startsWith?.("Internal");
+  return isDev || isPublic;
 }

packages/core/.storybook/preview-head.html

@@ -41,9 +41,14 @@
   .sbdocs .docs-story {
     border: var(--sb-layout-border-color);
   }
-  .sbdocs .docs-story > div {
+  .sbdocs .docs-story > div:first-child {
     background: var(--sb-secondary-background-color);
   }
+  .sbdocs .docs-story > div:nth-child(2) {
+    /* prevent Show Code from rendering above full-screen components (such as Modal's overlay) */
+    z-index: unset;
+    background: unset;
+  }
 
   .sbdocs {
     color: var(--sb-primary-text-color);

packages/core/CHANGELOG.md

@@ -3,6 +3,75 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.5.1](https://github.com/mondaycom/vibe/compare/@vibe/[email protected]...@vibe/[email protected]) (2024-12-12)
+
+
+### Bug Fixes
+
+* **List:** getting wrong tabIndex on initialization ([#2648](https://github.com/mondaycom/vibe/issues/2648)) ([7aaaa73](https://github.com/mondaycom/vibe/commit/7aaaa73fddb3c8434104785f65268ee373079634))
+
+
+
+
+
+# [3.5.0](https://github.com/mondaycom/vibe/compare/@vibe/[email protected]...@vibe/[email protected]) (2024-12-12)
+
+
+### Features
+
+* **Tooltip:** be able to change max width ([#2643](https://github.com/mondaycom/vibe/issues/2643)) ([f39633b](https://github.com/mondaycom/vibe/commit/f39633b190da5b7e453d958bf36028c8332139f5))
+
+
+
+
+
+## [3.4.1](https://github.com/mondaycom/vibe/compare/@vibe/[email protected]...@vibe/[email protected]) (2024-12-12)
+
+
+### Bug Fixes
+
+* **List:** fix ListTitle getting focus on initialization ([#2638](https://github.com/mondaycom/vibe/issues/2638)) ([0986200](https://github.com/mondaycom/vibe/commit/0986200af94f425a9ba19e4d0948786525557b2e))
+
+
+
+
+
+# [3.4.0](https://github.com/mondaycom/vibe/compare/@vibe/[email protected]...@vibe/[email protected]) (2024-12-09)
+
+
+### Bug Fixes
+
+* **table:** avoid unnecessary re-rendering if TableRowMenu doesn't exist ([#2630](https://github.com/mondaycom/vibe/issues/2630)) ([e8d093e](https://github.com/mondaycom/vibe/commit/e8d093ebc8231c90cfbfa596c686f163d1ad60c4))
+
+
+### Features
+
+* **Modal:** modal improvements, add stories for main Modal and modal's layouts ([#2627](https://github.com/mondaycom/vibe/issues/2627)) ([bead0ba](https://github.com/mondaycom/vibe/commit/bead0bae158a05d9654748e4bf020fc6ccbbc9be))
+* **Modal:** use createPortal and LayerProvider in Modal ([#2634](https://github.com/mondaycom/vibe/issues/2634)) ([b8f895b](https://github.com/mondaycom/vibe/commit/b8f895b3bea0c9a57763ef6d7fe6f604e89989e4))
+
+
+
+
+
+# [3.3.0](https://github.com/mondaycom/vibe/compare/@vibe/[email protected]...@vibe/[email protected]) (2024-12-08)
+
+
+### Bug Fixes
+
+* **Button:** fix secondary disabled border color ([#2622](https://github.com/mondaycom/vibe/issues/2622)) ([0df501d](https://github.com/mondaycom/vibe/commit/0df501db6618f1ae38b6e3581b2e6169da026746))
+* support vitest [prerelease] ([#2625](https://github.com/mondaycom/vibe/issues/2625)) ([638b19f](https://github.com/mondaycom/vibe/commit/638b19f9d582d5bc7cc9c8f6f633bde7bc333e55))
+* **table:** avoid unnecessary re-rendering of table rows ([#2626](https://github.com/mondaycom/vibe/issues/2626)) ([c83a4c4](https://github.com/mondaycom/vibe/commit/c83a4c4ea09173932b66c7cbe3c14d1266ad1388))
+
+
+### Features
+
+* **Modal:** animation enhancements and general fixes and enhancements ([#2620](https://github.com/mondaycom/vibe/issues/2620)) ([17a14fe](https://github.com/mondaycom/vibe/commit/17a14fe4e93e23bcdfd4b6da61095bc679185b3b))
+* **TransitionView:** fill parent if parent has definite height ([#2629](https://github.com/mondaycom/vibe/issues/2629)) ([da5e3b3](https://github.com/mondaycom/vibe/commit/da5e3b3d98d6f5ccdbfd34a4441526c62b5096b0))
+
+
+
+
+
 # [3.2.0](https://github.com/mondaycom/vibe/compare/@vibe/[email protected]...@vibe/[email protected]) (2024-12-04)
 
 

packages/core/docs/vibe-3-changelog.md

@@ -2,7 +2,7 @@
 
 This is the complete list of changes and deprecations in the Vibe 3 release. Changes that are marked with a 🔀 are covered by a migration script (codemod).
 
-For the complete migration guide see the [Vibe 3 Migration Guide](https://style.monday.com/?path=/docs/vibe-3-migration-guide--docs).
+For the complete migration guide see the [Vibe 3 Migration Guide](https://vibe.monday.com/?path=/docs/migration-guide).
 
 ## General
 
@@ -28,7 +28,7 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 ## Typography
 
-- Overhauled typography system, for more information check out the [Typography page](https://style.monday.com/?path=/docs/foundations-typography--docs)
+- Overhauled typography system, for more information check out the [Typography page](https://vibe.monday.com/?path=/docs/foundations-typography)
 - `Text` and `Heading` API and style changed
 
 ## Components
@@ -137,11 +137,11 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 ### EditableInput
 
-- `EditableInput` removed, use [EditableText](https://style.monday.com/?path=/docs/inputs-editabletext--docs) instead
+- `EditableInput` removed, use [EditableText](https://vibe.monday.com/?path=/docs/components-editabletext) instead
 
 ### Heading
 
-- `Heading` component API and style changed, follow the [Heading](https://style.monday.com/?path=/docs/text-heading--docs) docs for the new API.
+- `Heading` component API and style changed, follow the [Heading](https://vibe.monday.com/?path=/docs/text-heading) docs for the new API.
 
 ### Icon
 
@@ -159,7 +159,7 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 > codemod: `InputField-component-import-migration`
 
-- `Input` removed - use [TextField](https://style.monday.com/?path=/docs/inputs-textfield--docs) 🔀
+- `Input` removed - use [TextField](https://vibe.monday.com/?path=/docs/components-textfield) 🔀
 
 ### Label
 
@@ -170,7 +170,7 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 ### EditableHeading
 
-- API and style changed, follow the [EditableHeading](https://style.monday.com/?path=/docs/inputs-editableheading--docs) docs for the new API
+- API and style changed, follow the [EditableHeading](https://vibe.monday.com/?path=/docs/components-editableheading) docs for the new API
 
 ### Link
 
@@ -248,13 +248,13 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 ## Search
 
-- `Search` has changed - follow the [Search](https://style.monday.com/?path=/docs/inputs-search--docs) docs for the new API.
+- `Search` has changed - follow the [Search](https://vibe.monday.com/?path=/docs/components-search) docs for the new API.
 
 ## SearchComponent
 
 > codemod: `SearchComponent-import-migration`
 
-- `SearchComponent` component removed - use [Search](https://style.monday.com/?path=/docs/inputs-search--docs) 🔀
+- `SearchComponent` component removed - use [Search](https://vibe.monday.com/?path=/docs/components-search) 🔀
 
 ## SplitButton
 
@@ -351,7 +351,7 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 ### ResponsiveList
 
-- Component was removed, use the [useIsOverflowing](https://style.monday.com/?path=/docs/hooks-useisoverflowing--docs) hook instead
+- Component was removed, use the [useIsOverflowing](https://vibe.monday.com/?path=/docs/hooks-useisoverflowing) hook instead
 
 ## Icons
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/core",
-  "version": "3.2.0",
+  "version": "3.5.1",
   "description": "Official monday.com UI resources for application development in React.js",
   "repository": {
     "type": "git",
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "@vibe/icons": "1.1.0",
+    "@vibe/icons": "1.2.0",
     "a11y-dialog": "^7.5.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "browserslist-config-monday": "1.0.6",
@@ -96,7 +96,7 @@
     "react-is": "^16.9.0",
     "react-popper": "^2.3.0",
     "react-remove-scroll": "^2.6.0",
-    "react-select": "npm:react-select-module@^3.2.5",
+    "react-select": "npm:react-select-module@^3.2.6",
     "react-transition-group": "^4.4.5",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.7",

packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.tsx

@@ -295,24 +295,29 @@ export const HoverVsClickable: Story = {
     );
   }
 };
-export const Disabled = () => (
-  <AvatarGroup size="large" max={4} disabled>
-    <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-    <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-    <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-    <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-    <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-    <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-    <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-    <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-    <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-    <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-    <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-    <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-    <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-    <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-  </AvatarGroup>
-);
+
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <AvatarGroup size="large" max={4} disabled>
+        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
+        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
+        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
+        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
+        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
+        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
+        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
+        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
+        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
+        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
+        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+      </AvatarGroup>
+    );
+  }
+};
 
 export const LastSeenUsers: Story = {
   render: () => (

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

@@ -22,7 +22,6 @@
 }
 
 .buttonsContainer .button.activeButton {
-  z-index: 20;
   background-color: var(--primary-selected-color);
   border-color: var(--primary-color);
 }
@@ -36,7 +35,6 @@
 }
 
 .optionText:not(.disabled).selected {
-  z-index: 10;
   color: var(--primary-text-color);
 }
 

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

@@ -141,7 +141,14 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
     const [WindowedMenuList, setWindowedMenuList] = useState(null);
     useEffect(() => {
       if (isClient()) {
-        if (process.env.NODE_ENV === "test") {
+        let isRequireAvailable = false;
+        try {
+          isRequireAvailable = typeof require === "function" && typeof module !== "undefined";
+        } catch (e) {
+          isRequireAvailable = false;
+        }
+
+        if (isRequireAvailable) {
           // eslint-disable-next-line @typescript-eslint/no-var-requires
           const module = require("react-windowed-select");
           setWindowedMenuList(() => module.WindowedMenuList);