Merge branch 'master' into vibe3

packages/core/.storybook/main.ts

@@ -19,7 +19,8 @@ const getAddons = () => {
       options: storybookAddonStylingWebpackOptions
     },
     "storybook-addon-playground",
-    "@chromatic-com/storybook"
+    "@chromatic-com/storybook",
+    "@storybook/addon-storysource"
   ];
 
   if (process.env.NODE_ENV !== "production") {

packages/core/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.128.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.128.0) (2024-08-01)
+
+
+### Bug Fixes
+
+* Add support for generic types in the TableVirtualizedBody component ([#2292](https://github.com/mondaycom/vibe/issues/2292)) ([203ab3c](https://github.com/mondaycom/vibe/commit/203ab3c544c4d0f989523293ab529f5e15cde8d5))
+* **DatePicker:** Keyboard Navigation ([#2241](https://github.com/mondaycom/vibe/issues/2241)) ([8108b06](https://github.com/mondaycom/vibe/commit/8108b06a1e331615a86da7df3e32cc85d46d8725))
+
+
+### Features
+
+* **icons:** add Items Count icon ([#2294](https://github.com/mondaycom/vibe/issues/2294)) ([da16f1e](https://github.com/mondaycom/vibe/commit/da16f1e56be9f6233b0c5fe7514ff1fb72ef19d5))
+* **Menu:** allow setting submenu position to left ([#2281](https://github.com/mondaycom/vibe/issues/2281)) ([3fc94c2](https://github.com/mondaycom/vibe/commit/3fc94c2c3559e6cb99d55975f802d36f09d7b6de))
+
+
+
+
+
+# [2.127.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.127.0) (2024-07-31)
+
+
+### Features
+
+* added placeholder to textarea ([#2293](https://github.com/mondaycom/vibe/issues/2293)) ([a6d6b6b](https://github.com/mondaycom/vibe/commit/a6d6b6b5d7ee45263de01e681c5df09b083dfd5b))
+
+
+
+
+
+# [2.126.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.126.0) (2024-07-30)
+
+
+### Bug Fixes
+
+* Revert "use react-select version 4.3.1" ([#2288](https://github.com/mondaycom/vibe/issues/2288)) ([b189494](https://github.com/mondaycom/vibe/commit/b18949456662c8f95ef9735af56cddd155178f43))
+
+
+### Features
+
+* add onClear prop to Search component ([#2272](https://github.com/mondaycom/vibe/issues/2272)) ([8a5ca3c](https://github.com/mondaycom/vibe/commit/8a5ca3c7e3878f259192f8b01e390af775590ba7))
+* **Search:** Add `onClear` prop+testing+story for `Search` ([#2276](https://github.com/mondaycom/vibe/issues/2276)) ([4366676](https://github.com/mondaycom/vibe/commit/436667663b69fa9ff11a17bd92e90e75d74711e9))
+
+
+
+
+
 # [2.125.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.125.0) (2024-07-25)
 
 

packages/core/babel.config.js

@@ -1,5 +1,3 @@
-const TESTING_STORYBOOK = process.env.testing === "storybook";
-
 module.exports = api => {
   const env = process.env.NODE_ENV;
   api.cache.using(() => env);
@@ -37,18 +35,7 @@ module.exports = api => {
       [
         "@babel/preset-env",
         {
-          modules: env === "test" ? "commonjs" : false,
-          targets: TESTING_STORYBOOK
-            ? {
-                node: "current"
-              }
-            : {
-                chrome: "66",
-                ie: "11",
-                firefox: "51",
-                edge: "18",
-                node: "current"
-              }
+          modules: env === "test" ? "commonjs" : false
         }
       ],
       "@babel/preset-typescript",

packages/core/jest.init.js

@@ -15,19 +15,6 @@ Object.defineProperty(window, "matchMedia", {
 });
 
 ReactDOM.createPortal = node => node;
-const { testing } = process.env;
-const TESTING_STORYBOOK = testing === "storybook";
-
-if (TESTING_STORYBOOK) {
-  jest.mock("react-transition-group", () => {
-    const FakeTransition = jest.fn(({ children }) => children);
-    const FakeCSSTransition = jest.fn(props => (props.in ? <FakeTransition>{props.children}</FakeTransition> : null));
-    return { CSSTransition: FakeCSSTransition, Transition: FakeTransition, SwitchTransition: FakeTransition };
-  });
-  jest.mock("consolidated-events", () => {
-    return { addEventListener: jest.fn() };
-  });
-}
 
 const error = console.error;
 console.error = function (warning) {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.125.0",
+  "version": "2.128.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types.d.ts",
@@ -114,11 +114,11 @@
     "react-inlinesvg": "^3.0.1",
     "react-is": "^16.9.0",
     "react-popper": "^2.3.0",
-    "react-select": "^4.3.1",
+    "react-select": "^3.2.0",
     "react-transition-group": "^4.4.5",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.7",
-    "react-windowed-select": "^3.1.2",
+    "react-windowed-select": "^2.0.4",
     "style-inject": "^0.3.0",
     "vibe-storybook-components": "0.19.2"
   },
@@ -153,6 +153,7 @@
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-storysource": "^7.5.3",
     "@storybook/addon-styling-webpack": "^0.0.5",
     "@storybook/addon-themes": "^7.5.3",
     "@storybook/addon-toolbars": "^7.5.3",
@@ -181,7 +182,7 @@
     "@types/react-dates": "^21.8.3",
     "@types/react-is": "^16.7.5",
     "@types/react-resizable": "^3.0.7",
-    "@types/react-select": "^4.0.18",
+    "@types/react-select": "^3.1.2",
     "@types/react-test-renderer": "^16.9.0",
     "@types/react-transition-group": "^4.4.5",
     "@types/react-virtualized-auto-sizer": "^1.0.1",

packages/core/src/components/DatePicker/DatePicker.tsx

@@ -71,9 +71,19 @@ const DatePicker: VibeComponent<DatePickerProps, HTMLElement> = forwardRef<HTMLD
     const [focusedInput, setFocusedInput] = useState(FocusInput.startDate);
     const [isMonthYearSelection, setIsMonthYearSelection] = useState(false); //show Month/Year selection dropdown
     const [overrideDateForView, setOverrideDateForView] = useState<Moment | null>(null);
+    const [yearFunc, setYearFunc] = useState(null);
 
     const renderMonth = useCallback(
-      ({ month }: { month: Moment }) => {
+      ({
+        month,
+        onYearSelect
+      }: {
+        month: moment.Moment;
+        onYearSelect: (currentMonth: moment.Moment, newMonthVal: string) => void;
+      }) => {
+        if (!yearFunc && onYearSelect) {
+          setYearFunc(() => onYearSelect);
+        }
         return (
           <DatePickerHeaderComponent
             data-testid={dataTestId || getTestId(ComponentDefaultTestId.DATEPICKER_HEADER, id)}
@@ -84,7 +94,7 @@ const DatePicker: VibeComponent<DatePickerProps, HTMLElement> = forwardRef<HTMLD
           />
         );
       },
-      [dataTestId, isMonthYearSelection, hideNavigationKeys, id]
+      [isMonthYearSelection, dataTestId, id, hideNavigationKeys, yearFunc]
     );
 
     const renderDay = useCallback(
@@ -99,10 +109,15 @@ const DatePicker: VibeComponent<DatePickerProps, HTMLElement> = forwardRef<HTMLD
       [firstDayOfWeek]
     );
 
-    const changeCurrentDateFromMonthYearView = useCallback((date: Moment | null) => {
-      setOverrideDateForView(date);
-      setIsMonthYearSelection(false);
-    }, []);
+    const changeCurrentDateFromMonthYearView = useCallback(
+      (newDate: Moment | null) => {
+        const oldDate = overrideDateForView || date;
+        setOverrideDateForView(newDate);
+        setIsMonthYearSelection(false);
+        yearFunc(oldDate, moment(newDate).year());
+      },
+      [overrideDateForView, date, yearFunc]
+    );
 
     const renderMonthYearSelection = useCallback(() => {
       return (
@@ -113,7 +128,7 @@ const DatePicker: VibeComponent<DatePickerProps, HTMLElement> = forwardRef<HTMLD
           changeCurrentDate={changeCurrentDateFromMonthYearView}
         />
       );
-    }, [dataTestId, shouldBlockYear, changeCurrentDateFromMonthYearView, date, id]);
+    }, [dataTestId, id, overrideDateForView, date, shouldBlockYear, changeCurrentDateFromMonthYearView]);
 
     const onDateRangeChange = useCallback(
       (date: RangeDate) => {
@@ -145,7 +160,6 @@ const DatePicker: VibeComponent<DatePickerProps, HTMLElement> = forwardRef<HTMLD
       >
         {range ? (
           <DayPickerRangeController
-            key={`${overrideDateForView?.toString()}`}
             renderDayContents={showWeekNumber ? renderDay : undefined}
             firstDayOfWeek={firstDayOfWeek}
             hideKeyboardShortcutsPanel
@@ -167,7 +181,6 @@ const DatePicker: VibeComponent<DatePickerProps, HTMLElement> = forwardRef<HTMLD
           />
         ) : (
           <DayPickerSingleDateController
-            key={`${overrideDateForView?.toString()}`}
             renderDayContents={showWeekNumber ? renderDay : undefined}
             firstDayOfWeek={firstDayOfWeek}
             hideKeyboardShortcutsPanel

packages/core/src/components/DatePicker/DatePickerHeader/DatePickerHeader.tsx

@@ -12,6 +12,7 @@ export interface DatePickerHeaderProps {
   onToggleMonthYearPicker: () => void;
   hideNavigationKeys: boolean;
   "data-testid"?: string;
+  ariaLabel?: string;
 }
 
 const DatePickerHeader = (props: DatePickerHeaderProps) => {
@@ -20,7 +21,8 @@ const DatePickerHeader = (props: DatePickerHeaderProps) => {
     isMonthYearSelection,
     onToggleMonthYearPicker,
     hideNavigationKeys,
-    "data-testid": dateTestId
+    "data-testid": dateTestId,
+    ariaLabel = "Toggle select year"
   } = props;
 
   const localedDated = moment(currentDate.valueOf());
@@ -35,6 +37,7 @@ const DatePickerHeader = (props: DatePickerHeaderProps) => {
           data-testid={`${dateTestId}-year-toggle`}
           type="button"
           className={styles.button}
+          aria-label={ariaLabel}
           onClick={onToggleMonthYearPicker}
         >
           <div className={styles.buttonContent}>

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
 import DatePicker from "../DatePicker";
 import moment, { Moment } from "moment";
 import { RangeDate } from "../types";
@@ -100,4 +100,19 @@ describe("DatePicker", () => {
     const yearSelectionElement = container.querySelector("div[data-testid='date-picker-year-picker']");
     expect(yearSelectionElement).not.toBe(null);
   });
+
+  it("Should display new dates according to year selection", async () => {
+    const dateSelected = moment("2023-05-01");
+    const { container } = render(<DatePicker date={dateSelected} data-testid="date-picker" />);
+    const toggleButtonElement = container.querySelector("button[data-testid='date-picker-year-toggle']");
+
+    fireEvent.click(toggleButtonElement);
+
+    const newYear = await waitFor(() => container.querySelector(".pickerOption"));
+    fireEvent.click(newYear);
+
+    const newDay = await waitFor(() => container.querySelector(".CalendarDay_1"));
+    expect(newDay).toBeInTheDocument();
+    expect(newDay.getAttribute("aria-label")).toContain(newYear.innerHTML);
+  });
 });