upgrade to yarn v4 (grommet#7260)

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

package.json

@@ -241,5 +241,6 @@
     "gui",
     "graphical user interface",
     "styled-components"
-  ]
+  ],
+  "packageManager": "[email protected]"
 }

src/js/components/Clock/Analog.js

@@ -15,7 +15,7 @@ const ANGLE_UNIT = 6;
 // 360 / 12
 const HOUR_ANGLE_UNIT = 30;
 
-const getClockDimensions = theme => ({
+const getClockDimensions = (theme) => ({
   size: parseMetricToNum(theme.clock.analog.size.medium),
   secondSize: parseMetricToNum(theme.clock.analog.second.size),
   minuteSize: parseMetricToNum(theme.clock.analog.minute.size),

src/js/components/Collapsible/Collapsible.js

@@ -1,10 +1,4 @@
-import React, {
-  forwardRef,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { useLayoutEffect } from '../../utils/use-isomorphic-layout-effect';

src/js/components/DataChart/Detail.js

@@ -1,10 +1,4 @@
-import React, {
-  Fragment,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Box } from '../Box';
 import { Drop } from '../Drop';

src/js/components/DataTable/Resizer.js

@@ -1,9 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { Box } from '../Box';
@@ -17,7 +12,7 @@ const InteractionBox = styled(Box)`
   }
 
   // when mouse down, we want to continue to display styling
-  ${props => props.active && '> * { opacity: 1; }'}
+  ${(props) => props.active && '> * { opacity: 1; }'}
 
   &:hover {
     > * {
@@ -33,7 +28,7 @@ const Resizer = ({ onResize, property }) => {
   const [width, setWidth] = useState();
   const ref = useRef();
 
-  const onMouseDown = useCallback(event => {
+  const onMouseDown = useCallback((event) => {
     if (ref.current) {
       let element = ref.current;
       // find TH parent
@@ -46,7 +41,7 @@ const Resizer = ({ onResize, property }) => {
   }, []);
 
   const onMouseMove = useCallback(
-    event => {
+    (event) => {
       // We determined 12 empirically as being wide enough to hit but
       // not too wide to cause false hits.
       const nextWidth = Math.max(12, width + (event.clientX - start));

src/js/components/DataTable/Searcher.js

@@ -29,7 +29,7 @@ const Searcher = ({ filtering, filters, onFilter, onFiltering, property }) => {
           a11yTitle={`Search by ${property}`}
           ref={inputRef}
           value={filters[property]}
-          onChange={event => onFilter(property, event.target.value)}
+          onChange={(event) => onFilter(property, event.target.value)}
           onBlur={() => onFiltering(undefined)}
         />
       </Box>

src/js/utils/useThemeValue.js

@@ -1,6 +1,6 @@
-import { useContext } from "react";
-import { ThemeContext } from "styled-components";
-import { defaultProps } from "../default-props";
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import { defaultProps } from '../default-props';
 
 /*
   Hook that returns theme value.