remove react aria dependecies

package.json

@@ -48,10 +48,6 @@
   "homepage": "https://github.com/mondaycom/monday-ui-react-core#readme",
   "dependencies": {
     "@popperjs/core": "^2.11.0",
-    "@react-aria/focus": "3.5.0",
-    "@react-aria/interactions": "3.7.0",
-    "@react-aria/switch": "3.1.3",
-    "@react-aria/visually-hidden": "3.2.3",
     "@react-hook/merged-ref": "1.3.2",
     "@react-stately/toggle": "3.2.3",
     "autosize": "^5.0.1",

src/components/Menu/Menu/Menu.jsx

@@ -1,6 +1,5 @@
 import { SIZES } from "constants/sizes";
 import React, { useMemo, forwardRef, useState, useRef, useEffect, useLayoutEffect, useCallback } from "react";
-import { useFocusWithin } from "@react-aria/interactions";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import useMergeRefs from "hooks/useMergeRefs";
@@ -13,6 +12,7 @@ import useMenuKeyboardNavigation from "./hooks/useMenuKeyboardNavigation";
 import useMouseLeave from "./hooks/useMouseLeave";
 import "./Menu.scss";
 import { useAdjacentSelectableMenuIndex } from "./hooks/useAdjacentSelectableMenuIndex";
+import { useFocusWithin } from "hooks/useFocusWithin";
 
 const Menu = forwardRef(
   (

src/components/Menu/MenuGridItem/MenuGridItem.jsx

@@ -1,12 +1,12 @@
 import React, { useRef, forwardRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
-import { useFocusWithin } from "@react-aria/interactions";
 import useMergeRefs from "../../../hooks/useMergeRefs";
 import "./MenuGridItem.scss";
 import { GridKeyboardNavigationContext } from "../../GridKeyboardNavigationContext/GridKeyboardNavigationContext";
 import { useMenuGridItemNavContext } from "./useMenuGridItemNavContext";
 import { useFocusGridItemByActiveStatus } from "./useFocusGridItemByActiveStatus";
+import { useFocusWithin } from "hooks/useFocusWithin";
 
 const MenuGridItem = forwardRef(
   (

src/components/Switch/Switch.js

@@ -0,0 +1,68 @@
+import React, { useCallback, useMemo, useState } from "react";
+import classes from "./Switch.module.scss";
+import cx from "classnames";
+import isNil from "lodash/isNil";
+
+export const Switch = ({
+  id,
+  name,
+  value,
+  role,
+  disabled,
+  ariaLabel,
+  ariaLabelledBy,
+  checked,
+  inputClassName,
+  onChange,
+  ariaControls,
+  defaultChecked,
+  children: originalChildren,
+  wrapperClassName
+}) => {
+  let overrideDefaultChecked = defaultChecked;
+
+  // If component did not receive default checked and checked props, choose default checked as
+  // default behavior (handle isChecked logic inside input) and set default value
+  if (isNil(overrideDefaultChecked) && isNil(checked)) {
+    overrideDefaultChecked = false;
+  }
+
+  const [overrideChecked, setOverrideChecked] = useState(overrideDefaultChecked || checked);
+  const overrideOnChange = useCallback(
+    e => {
+      setOverrideChecked(!overrideChecked);
+      onChange(e);
+    },
+    [onChange, overrideChecked]
+  );
+
+  const children = useMemo(
+    () =>
+      React.cloneElement(originalChildren, {
+        ...originalChildren?.props,
+        checked: overrideChecked
+      }),
+    [originalChildren, overrideChecked]
+  );
+
+  return (
+    <label htmlFor={id} className={wrapperClassName}>
+      <input
+        id={id}
+        aria-controls={ariaControls}
+        value={value}
+        name={name}
+        type="checkbox"
+        className={cx(classes["hidden-switch"], inputClassName)}
+        checked={overrideChecked}
+        role={role ? role : "switch"}
+        onChange={overrideOnChange}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-checked={overrideChecked}
+      />
+      {children}
+    </label>
+  );
+};

src/components/Switch/Switch.module.scss

@@ -0,0 +1,5 @@
+@import "../../styles/global-css-settings";
+
+.hidden-switch {
+  @include hidden-element();
+}

src/components/Switch/index.js

@@ -0,0 +1,58 @@
+import React, { useCallback, useRef } from "react";
+import classes from "./Switch.module.scss";
+import isNil from "lodash/isNil";
+
+export function useHiddenSwitch({
+  id,
+  name,
+  value,
+  role,
+  disabled,
+  ariaLabel,
+  ariaLabelledBy,
+  checked,
+  onChange,
+  ariaControls
+}) {
+  const inputRef = useRef(null);
+  const onSwitchClick = useCallback(() => {
+    const manualClickEvent = new MouseEvent("click", {
+      shiftKey: true,
+      // After dispatch this event we will want it to be captured by all the relevant event listeners which registered to this checkbox input.
+      bubbles: true,
+      cancelable: true
+    });
+    inputRef.current.dispatchEvent(manualClickEvent);
+  }, []);
+  let overrideDefaultChecked = defaultChecked;
+
+  // If component did not receive default checked and checked props, choose default checked as
+  // default behavior (handle isChecked logic inside input) and set default value
+  if (isNil(overrideDefaultChecked) && isNil(checked)) {
+    overrideDefaultChecked = false;
+  }
+
+  return {
+    onSwitchClick,
+    isChecked: overrideDefaultChecked || checked,
+    HiddenSwitch: (
+      <input
+        ref={ref}
+        id={id}
+        aria-controls={ariaControls}
+        className={classes["hidden-switch"]}
+        value={value}
+        name={name}
+        type="checkbox"
+        role={role ? role : "switch"}
+        onChange={onChange}
+        defaultChecked={overrideDefaultChecked}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        checked={checked}
+        aria-checked={checked}
+      />
+    )
+  };
+}

src/components/Tabs/TabList/TabList.jsx

@@ -1,10 +1,11 @@
 import React, { useRef, forwardRef, useState, useCallback, useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
-import { useFocusWithin, useKeyboard } from "@react-aria/interactions";
 import useMergeRefs from "../../../hooks/useMergeRefs";
 import usePrevious from "../../../hooks/usePrevious";
 import "./TabList.scss";
+import { useFocusWithin } from "hooks/useFocusWithin";
+import { useKeyboard } from "hooks/useKeyboard";
 
 const TabList = forwardRef(({ className, id, onTabChange, activeTabId, tabType, size, children }, ref) => {
   const componentRef = useRef(null);

src/components/Toggle/MockToggle.jsx

@@ -0,0 +1,20 @@
+import ToggleText from "components/Toggle/ToggleText";
+import cx from "classnames";
+import React from "react";
+import { BEMClass } from "helpers/bem-helper";
+import { BASE_TOGGLE_CLASS_NAME } from "components/Toggle/ToggleConstants";
+
+const bemHelper = BEMClass(BASE_TOGGLE_CLASS_NAME);
+export const MockToggle = ({ areLabelsHidden, checked, offOverrideText, onOverrideText, className }) => (
+  <>
+    {areLabelsHidden ? null : <ToggleText>{offOverrideText}</ToggleText>}
+    <div
+      className={cx(bemHelper({ element: "toggle" }), className, {
+        [bemHelper({ element: "toggle", state: "selected" })]: checked,
+        [bemHelper({ element: "toggle", state: "not-selected" })]: !checked
+      })}
+      aria-hidden="true"
+    />
+    {areLabelsHidden ? null : <ToggleText>{onOverrideText}</ToggleText>}
+  </>
+);

src/components/Toggle/Toggle.jsx

@@ -2,11 +2,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import NOOP from "lodash/noop";
-import { useToggle } from "hooks/useToggle";
+import { Switch } from "components/Switch/Switch";
+import { MockToggle } from "components/Toggle/MockToggle";
 import { BEMClass } from "helpers/bem-helper";
 import { backwardCompatibilityForProperties } from "helpers/backwardCompatibilityForProperties";
 import { BASE_TOGGLE_CLASS_NAME } from "./ToggleConstants";
-import ToggleText from "./ToggleText";
 import "./Toggle.scss";
 
 const bemHelper = BEMClass(BASE_TOGGLE_CLASS_NAME);
@@ -32,36 +32,32 @@ const Toggle = ({
 }) => {
   const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);
   const overrideDisabled = backwardCompatibilityForProperties([disabled, isDisabled], false);
-  const { inputProps, isChecked } = useToggle({
-    id,
-    isDefaultSelected,
-    isSelected,
-    onChange,
-    value,
-    name,
-    isDisabled: overrideDisabled,
-    ariaLabel,
-    ariaControls
+  const wrapperClassName = cx(bemHelper({ element: "wrapper" }), {
+    [bemHelper({ element: "wrapper", state: "disabled" })]: overrideDisabled
   });
+  const inputClassName = bemHelper({ element: "input" });
 
   return (
-    <label
-      htmlFor={id}
-      className={cx(bemHelper({ element: "wrapper" }), {
-        [bemHelper({ element: "wrapper", state: "disabled" })]: overrideDisabled
-      })}
+    <Switch
+      defaultChecked={isDefaultSelected}
+      checked={isSelected}
+      id={id}
+      wrapperClassName={wrapperClassName}
+      onChange={onChange}
+      value={value}
+      name={name}
+      disabled={overrideDisabled}
+      ariaLabel={ariaLabel}
+      ariaControls={ariaControls}
+      inputClassName={inputClassName}
     >
-      {areLabelsHidden ? null : <ToggleText>{offOverrideText}</ToggleText>}
-      <input {...inputProps} className={bemHelper({ element: "input" })} />
-      <div
-        className={cx(bemHelper({ element: "toggle" }), overrideClassName, {
-          [bemHelper({ element: "toggle", state: "selected" })]: isChecked,
-          [bemHelper({ element: "toggle", state: "not-selected" })]: !isChecked
-        })}
-        aria-hidden="true"
+      <MockToggle
+        areLabelsHidden={areLabelsHidden}
+        offOverrideText={offOverrideText}
+        className={overrideClassName}
+        onOverrideText={onOverrideText}
       />
-      {areLabelsHidden ? null : <ToggleText>{onOverrideText}</ToggleText>}
-    </label>
+    </Switch>
   );
 };
 

src/components/Toggle/Toggle.scss

@@ -64,7 +64,7 @@
   // we hide the checkbox and draw a new one instead.
   // In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected
   // in the new toggle we drew.
-  &_input {
+  input {
     @include hidden-element;
 
     // When the hidden checkbox will be focused by keyboard navigation events, the toggle appearance will reflect it