Fix lint job on CI (#6921)

* Fix lint job on CI

Author: snowystinger

.circleci/config.yml

@@ -291,7 +291,7 @@ jobs:
             node --loader ./scripts/esm-support/loader.mjs ./scripts/esm-support/testESM.mjs
 
   lint:
-    executor: rsp
+    executor: rsp-xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}

package.json

@@ -35,7 +35,7 @@
     "build": "make build",
     "test:ssr": "cross-env STRICT_MODE=1 yarn jest --config jest.ssr.config.js",
     "ci-test": "cross-env STRICT_MODE=1 yarn jest --maxWorkers=2 && cross-env STRICT_MODE=1 yarn test:ssr --runInBand",
-    "lint": "yarn check-types & eslint packages --ext .js,.ts,.tsx & yarn constraints & node scripts/lint-packages.js",
+    "lint": "concurrently \"yarn check-types\" \"eslint packages --ext .js,.ts,.tsx\" \"node scripts/lint-packages.js\" \"yarn constraints\"",
     "jest": "node scripts/jest.js",
     "copyrights": "babel-node --presets @babel/env ./scripts/addHeaders.js",
     "build:icons": "babel-node --presets @babel/env ./scripts/buildIcons.js",

packages/@react-spectrum/s2/src/AvatarGroup.tsx

@@ -12,7 +12,7 @@
 
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {AvatarContext} from './Avatar';
-import {ContextValue} from 'react-aria-components';
+import {ContextValue, SlotProps} from 'react-aria-components';
 import {createContext, CSSProperties, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
@@ -21,7 +21,7 @@ import {useDOMRef} from '@react-spectrum/utils';
 import {useLabel} from 'react-aria';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps {
+export interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {
   /** Avatar children of the avatar group. */
   children: ReactNode,
   /** The label for the avatar group. */

packages/@react-spectrum/s2/src/Badge.tsx

@@ -25,13 +25,13 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 export interface BadgeStyleProps {
   /**
    * The size of the badge.
-   * 
+   *
    * @default 'S'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /**
    * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.
-   * 
+   *
    * @default 'neutral'
    */
   variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',
@@ -169,7 +169,7 @@ const badge = style<BadgeStyleProps>({
           neutral: 'gray-700',
           positive: 'positive-700',
           notice: 'notice-700',
-          negative: 'negative-800',
+          negative: 'negative-800'
         }
       }
     }

packages/@react-spectrum/s2/src/Tabs.tsx

@@ -15,14 +15,15 @@ import {
     TabPanel as AriaTabPanel,
     TabPanelProps as AriaTabPanelProps,
     TabProps as AriaTabProps,
-    TabsProps as AriaTabsProps, 
+    TabsProps as AriaTabsProps,
     ContextValue,
     Provider,
     Tab as RACTab,
     TabList as RACTabList,
     Tabs as RACTabs,
     TabListStateContext,
-    useSlottedContext} from 'react-aria-components';
+    useSlottedContext
+  } from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';
 import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';
@@ -57,7 +58,7 @@ export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'children' |
   children?: ReactNode
 }
 
-export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {  
+export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The content to display in the tab panels. */
@@ -121,7 +122,7 @@ const icon = style({
 });
 
 export function Tab(props: TabProps) {
-  let {density} = useSlottedContext(TabsContext);
+  let {density} = useSlottedContext(TabsContext) ?? {};
 
   return (
     <RACTab
@@ -174,7 +175,7 @@ const tablist = style({
 });
 
 export function TabList<T extends object>(props: TabListProps<T>) {
-  let {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext);
+  let {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext) ?? {};
   let state = useContext(TabListStateContext);
   let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);
   let tablistRef = useRef<HTMLDivElement>(null);

packages/@react-spectrum/s2/src/bar-utils.ts

@@ -25,7 +25,7 @@ export const bar = () => ({
     labelPosition: {
       top: [
         'label value',
-        'bar bar',
+        'bar bar'
       ],
       side: [
         'label bar value'

packages/react-aria-components/src/FieldError.tsx

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMProps, ValidationResult} from "@react-types/shared";
-import {filterDOMProps} from "@react-aria/utils";
+import {DOMProps, ValidationResult} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {RenderProps, useRenderProps} from './utils';
 import {Text} from './Text';