Enable husky + lint-staged to fix linting errors on commit rather than waiting for circle ci

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

package.json

@@ -7,6 +7,9 @@
     "type": "git",
     "url": "https://github.com/adobe/react-spectrum"
   },
+  "engines": {
+    "node": ">=16.0.0 <18.0.0"
+  },
   "scripts": {
     "check-types": "tsc && tsc-strict",
     "install-16": "yarn add -W react@^16.8.0 react-dom@^16.8.0 @testing-library/react@^12 @testing-library/react-hooks@^8",
@@ -42,7 +45,8 @@
     "check-apis": "yarn build:api-branch --githash=\"origin/main\" --output=\"base-api\" && yarn build:api-branch && yarn compare:apis",
     "check-published-apis": "yarn build:api-published && yarn build:api-branch && yarn compare:apis",
     "bumpVersions": "node scripts/bumpVersions.js",
-    "test:parcel": "jest --testMatch '**/*.parceltest.{ts,tsx}'"
+    "test:parcel": "jest --testMatch '**/*.parceltest.{ts,tsx}'",
+    "prepare": "husky install"
   },
   "workspaces": [
     "packages/react-stately",
@@ -122,6 +126,7 @@
     "fast-glob": "^3.1.0",
     "fs-extra": "^10.0.0",
     "full-icu": "^1.3.0",
+    "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "^5.0.1",
     "jest": "^27.4.3",
@@ -131,6 +136,7 @@
     "jsdom": "^16.7.0",
     "lerna": "^3.13.2",
     "lfcdn": "^0.4.2",
+    "lint-staged": "^13.2.2",
     "md5": "^2.2.1",
     "npm-cli-login": "^1.0.0",
     "nyc": "^10.2.0",
@@ -178,5 +184,10 @@
     "postcss-modules": "^3.2.2",
     "react-refresh": "0.9.0",
     "browserslist": "4.20.3"
+  },
+  "lint-staged": {
+    "{**/*.ts?(x),**/*.js?(x)}": [
+      "eslint --fix --quiet"
+    ]
   }
 }

packages/@react-aria/tooltip/src/useTooltip.ts

@@ -14,7 +14,7 @@ import {AriaTooltipProps} from '@react-types/tooltip';
 import {DOMAttributes} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {TooltipTriggerState} from '@react-stately/tooltip';
-import {useHover} from '@react-aria/interactions';
+import {useHover, usePress} from '@react-aria/interactions';
 
 export interface TooltipAria {
   /**
@@ -28,14 +28,15 @@ export interface TooltipAria {
  */
 export function useTooltip(props: AriaTooltipProps, state?: TooltipTriggerState): TooltipAria {
   let domProps = filterDOMProps(props, {labelable: true});
+  let {pressProps} = usePress({});
 
   let {hoverProps} = useHover({
     onHoverStart: () => state?.open(true),
     onHoverEnd: () => state?.close()
   });
 
   return {
-    tooltipProps: mergeProps(domProps, hoverProps, {
+    tooltipProps: mergeProps(domProps, hoverProps, pressProps, {
       role: 'tooltip'
     })
   };

packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx

@@ -17,7 +17,7 @@ import Delete from '@spectrum-icons/workflow/Delete';
 import Edit from '@spectrum-icons/workflow/Edit';
 import {Flex} from '@react-spectrum/layout';
 import {Link} from '@react-spectrum/link';
-import React, {useState} from 'react';
+import React, {CSSProperties, useState} from 'react';
 import SaveTo from '@spectrum-icons/workflow/SaveTo';
 import {SpectrumTooltipTriggerProps} from '@react-types/tooltip';
 import {Tooltip, TooltipTrigger} from '../src';
@@ -176,6 +176,24 @@ export const TooltripTriggerInsideActionGroup: TooltipTriggerStory = {
   )
 };
 
+const TooltipDivRender = (args) => {
+  const [isDisabled, setIsDisabled] = useState(false);
+  const wrapperStyle: CSSProperties = {width: '400px', height: '400px', backgroundColor: 'red', position: 'absolute'};
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    <div onClick={() => setIsDisabled(!isDisabled)} style={wrapperStyle}>
+      <TooltipTrigger {...args} isOpen>
+        <ActionButton isDisabled={isDisabled} aria-label="Edit" UNSAFE_style={{top: '50px'}}>click red to disable</ActionButton>
+        <Tooltip>Click on tooltip doesn't propagate to parent</Tooltip>
+      </TooltipTrigger>
+    </div>
+  );
+};
+export const TooltripTriggerInsideDiv: TooltipTriggerStory = {
+  args: {delay: 0},
+  render: TooltipDivRender
+};
+
 export const ArrowPositioningAtEdge: TooltipTriggerStory = {
   args: {
     children: [

packages/@react-spectrum/tooltip/test/Tooltip.test.js

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {fireEvent, render} from '@react-spectrum/test-utils';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils';
 import {Tooltip} from '../';
 
 describe('Tooltip', function () {
@@ -40,4 +40,15 @@ describe('Tooltip', function () {
     let tooltip = getByRole('tooltip');
     expect(ref.current.UNSAFE_getDOMNode()).toBe(tooltip);
   });
+
+  it('click does not propagate to parent', () => {
+    let mockClick = jest.fn();
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    let {getByRole} = render(<div onClick={mockClick}><Tooltip>This is a tooltip</Tooltip></div>);
+    let tooltip = getByRole('tooltip');
+    fireEvent.pointerDown(tooltip);
+    fireEvent.click(tooltip);
+    fireEvent.mouseDown(tooltip);
+    expect(mockClick).not.toHaveBeenCalled();
+  });
 });