chore(deps): update dependency @zendeskgarden/eslint-config to v19 (#…

…1004) Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Jonathan Zempel <jzempel@gmail.com>
zendeskgarden · Mar 23, 2021 · 54799bb · 54799bb
1 parent 5b0a855
commit 54799bb
Show file tree

Hide file tree

Showing 39 changed files with 516 additions and 224 deletions.
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "@typescript-eslint/eslint-plugin": "4.15.2",
     "@typescript-eslint/parser": "4.15.2",
     "@zendeskgarden/css-bedrock": "8.0.1",
-    "@zendeskgarden/eslint-config": "17.1.0",
+    "@zendeskgarden/eslint-config": "19.0.0",
     "@zendeskgarden/scripts": "0.1.11",
     "@zendeskgarden/stylelint-config": "15.0.0",
     "@zendeskgarden/svg-icons": "6.29.0",
@@ -82,7 +82,7 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-notice": "0.9.10",
-    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-react": "7.23.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "execa": "5.0.0",
     "fork-ts-checker-webpack-plugin": "6.1.0",

diff --git a/packages/accordions/.size-snapshot.json b/packages/accordions/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 37402,
-    "minified": 25831,
-    "gzipped": 5859
+    "bundled": 37875,
+    "minified": 26023,
+    "gzipped": 5896
   },
   "index.esm.js": {
-    "bundled": 35189,
-    "minified": 23861,
-    "gzipped": 5729,
+    "bundled": 35647,
+    "minified": 24037,
+    "gzipped": 5770,
     "treeshaked": {
       "rollup": {
-        "code": 19013,
-        "import_statements": 566
+        "code": 19173,
+        "import_statements": 579
       },
       "webpack": {
-        "code": 21919
+        "code": 22127
       }
     }
   }

diff --git a/packages/accordions/src/elements/accordion/Accordion.tsx b/packages/accordions/src/elements/accordion/Accordion.tsx
@@ -12,7 +12,8 @@ import React, {
   RefAttributes,
   HTMLAttributes,
   PropsWithoutRef,
-  ForwardRefExoticComponent
+  ForwardRefExoticComponent,
+  useMemo
 } from 'react';
 import { useAccordion } from '@zendeskgarden/container-accordion';
 import { StyledAccordion } from '../../styled';
@@ -83,18 +84,32 @@ export const Accordion = forwardRef<HTMLDivElement, IAccordionProps>(
       currentIndexRef.current = 0;
     });
 
-    const value = {
-      level,
-      isBare,
-      isCompact,
-      isAnimated,
-      isCollapsible,
-      getPanelProps,
-      getHeaderProps,
-      getTriggerProps,
-      currentIndexRef,
-      expandedSections
-    };
+    const value = useMemo(
+      () => ({
+        level,
+        isBare,
+        isCompact,
+        isAnimated,
+        isCollapsible,
+        getPanelProps,
+        getHeaderProps,
+        getTriggerProps,
+        currentIndexRef,
+        expandedSections
+      }),
+      [
+        level,
+        isBare,
+        isCompact,
+        isAnimated,
+        isCollapsible,
+        getPanelProps,
+        getHeaderProps,
+        getTriggerProps,
+        currentIndexRef,
+        expandedSections
+      ]
+    );
 
     return (
       <AccordionContext.Provider value={value}>

diff --git a/packages/accordions/src/elements/accordion/components/Header.tsx b/packages/accordions/src/elements/accordion/components/Header.tsx
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useState, FocusEvent, forwardRef, HTMLAttributes } from 'react';
+import React, { useState, FocusEvent, forwardRef, HTMLAttributes, useMemo } from 'react';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import ChevronDown from '@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg';
 import { useAccordionContext, useSectionContext, HeaderContext } from '../../../utils';
@@ -48,10 +48,13 @@ export const Header = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
     }, 0);
   };
 
-  const value = {
-    isHovered,
-    otherTriggerProps
-  };
+  const value = useMemo(
+    () => ({
+      isHovered,
+      otherTriggerProps
+    }),
+    [isHovered, otherTriggerProps]
+  );
 
   return (
     <HeaderContext.Provider value={value}>

diff --git a/packages/accordions/src/elements/stepper/Stepper.tsx b/packages/accordions/src/elements/stepper/Stepper.tsx
@@ -12,7 +12,8 @@ import React, {
   OlHTMLAttributes,
   ForwardRefExoticComponent,
   PropsWithoutRef,
-  RefAttributes
+  RefAttributes,
+  useMemo
 } from 'react';
 import { StyledStepper } from '../../styled';
 import { StepperContext } from '../../utils';
@@ -41,11 +42,14 @@ interface IStepperProps extends OlHTMLAttributes<HTMLOListElement> {
 export const Stepper = forwardRef<HTMLOListElement, IStepperProps>(
   ({ isHorizontal, activeIndex, ...props }, ref) => {
     const currentIndexRef = useRef(0);
-    const stepperContext = {
-      isHorizontal: isHorizontal!,
-      activeIndex: activeIndex!,
-      currentIndexRef
-    };
+    const stepperContext = useMemo(
+      () => ({
+        isHorizontal: isHorizontal!,
+        activeIndex: activeIndex!,
+        currentIndexRef
+      }),
+      [isHorizontal, activeIndex, currentIndexRef]
+    );
 
     useEffect(() => {
       currentIndexRef.current = 0;

diff --git a/packages/accordions/src/elements/stepper/components/Step.tsx b/packages/accordions/src/elements/stepper/components/Step.tsx
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { forwardRef, LiHTMLAttributes, useEffect, useState } from 'react';
+import React, { forwardRef, LiHTMLAttributes, useEffect, useMemo, useState } from 'react';
 import { StyledStep, StyledLine } from '../../../styled';
 import { StepContext, useStepperContext } from '../../../utils';
 
@@ -23,8 +23,10 @@ export const Step = forwardRef<HTMLLIElement, LiHTMLAttributes<HTMLLIElement>>((
     };
   }, [currentIndexRef]);
 
+  const value = useMemo(() => ({ currentStepIndex }), [currentStepIndex]);
+
   return (
-    <StepContext.Provider value={{ currentStepIndex }}>
+    <StepContext.Provider value={value}>
       <StyledStep ref={ref} isHorizontal={isHorizontal} {...props}>
         {isHorizontal && <StyledLine data-test-id="step-line" />}
         {props.children}

diff --git a/packages/buttons/.size-snapshot.json b/packages/buttons/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "index.cjs.js": {
-    "bundled": 26448,
-    "minified": 19064,
-    "gzipped": 4678
+    "bundled": 26531,
+    "minified": 19105,
+    "gzipped": 4700
   },
   "index.esm.js": {
-    "bundled": 24488,
-    "minified": 17361,
-    "gzipped": 4532,
+    "bundled": 24574,
+    "minified": 17404,
+    "gzipped": 4551,
     "treeshaked": {
       "rollup": {
         "code": 13551,

diff --git a/packages/buttons/src/elements/ButtonGroup.tsx b/packages/buttons/src/elements/ButtonGroup.tsx
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useButtonGroup } from '@zendeskgarden/container-buttongroup';
 
@@ -38,7 +38,10 @@ const ButtonGroup: React.FunctionComponent<IButtonGroupProps> = ({
     onSelect
   });
 
-  const contextValue = { selectedItem, getButtonProps };
+  const contextValue = useMemo(() => ({ selectedItem, getButtonProps }), [
+    selectedItem,
+    getButtonProps
+  ]);
 
   return (
     <ButtonGroupContext.Provider value={contextValue}>

diff --git a/packages/chrome/.size-snapshot.json b/packages/chrome/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 57283,
-    "minified": 44191,
-    "gzipped": 8513
+    "bundled": 57491,
+    "minified": 44331,
+    "gzipped": 8539
   },
   "index.esm.js": {
-    "bundled": 52674,
-    "minified": 40047,
-    "gzipped": 8287,
+    "bundled": 52864,
+    "minified": 40169,
+    "gzipped": 8314,
     "treeshaked": {
       "rollup": {
-        "code": 30500,
+        "code": 30604,
         "import_statements": 565
       },
       "webpack": {
-        "code": 34214
+        "code": 34366
       }
     }
   }

diff --git a/packages/chrome/src/elements/Chrome.tsx b/packages/chrome/src/elements/Chrome.tsx
@@ -41,7 +41,11 @@ const Chrome = React.forwardRef<HTMLDivElement, IChromeProps>(({ hue, isFluid, .
 
   const isLight = hue ? isLightMemoized : false;
   const isDark = hue ? !isLightMemoized : false;
-  const chromeContextValue = { hue: hue || 'chromeHue', isLight, isDark };
+  const chromeContextValue = useMemo(() => ({ hue: hue || 'chromeHue', isLight, isDark }), [
+    hue,
+    isLight,
+    isDark
+  ]);
   const environment = useDocument(theme);
 
   useEffect(() => {

diff --git a/packages/chrome/src/elements/body/Body.tsx b/packages/chrome/src/elements/body/Body.tsx
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { StyledBody } from '../../styled';
 import { BodyContext } from '../../utils/useBodyContext';
@@ -20,7 +20,7 @@ interface IBodyProps {
  */
 export const Body = React.forwardRef<HTMLDivElement, IBodyProps & HTMLAttributes<HTMLDivElement>>(
   ({ hasFooter, ...props }, ref) => {
-    const bodyContextValue = { hasFooter: !!hasFooter };
+    const bodyContextValue = useMemo(() => ({ hasFooter: !!hasFooter }), [hasFooter]);
 
     return (
       <BodyContext.Provider value={bodyContextValue}>

diff --git a/packages/chrome/src/elements/nav/Nav.tsx b/packages/chrome/src/elements/nav/Nav.tsx
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useChromeContext } from '../../utils/useChromeContext';
 import { NavContext } from '../../utils/useNavContext';
@@ -21,7 +21,7 @@ interface INavProps extends HTMLAttributes<HTMLElement> {
  */
 export const Nav = React.forwardRef<HTMLElement, INavProps>((props, ref) => {
   const { hue, isLight, isDark } = useChromeContext();
-  const navContextValue = { isExpanded: !!props.isExpanded };
+  const navContextValue = useMemo(() => ({ isExpanded: !!props.isExpanded }), [props.isExpanded]);
 
   return (
     <NavContext.Provider value={navContextValue}>

diff --git a/packages/datepickers/.size-snapshot.json b/packages/datepickers/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 132617,
-    "minified": 74977,
-    "gzipped": 16575
+    "bundled": 132871,
+    "minified": 75085,
+    "gzipped": 16604
   },
   "index.esm.js": {
-    "bundled": 129571,
-    "minified": 72256,
-    "gzipped": 16477,
+    "bundled": 129822,
+    "minified": 72360,
+    "gzipped": 16510,
     "treeshaked": {
       "rollup": {
         "code": 6852,
         "import_statements": 291
       },
       "webpack": {
-        "code": 62496
+        "code": 62612
       }
     }
   }

diff --git a/packages/datepickers/src/elements/Datepicker/Datepicker.tsx b/packages/datepickers/src/elements/Datepicker/Datepicker.tsx
@@ -5,7 +5,15 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useRef, useEffect, useReducer, useCallback, useState, useContext } from 'react';
+import React, {
+  useRef,
+  useEffect,
+  useReducer,
+  useCallback,
+  useState,
+  useContext,
+  useMemo
+} from 'react';
 import PropTypes from 'prop-types';
 import { ThemeContext } from 'styled-components';
 import { Manager, Popper, Reference } from 'react-popper';
@@ -162,7 +170,7 @@ export const Datepicker: React.FunctionComponent<IDatepickerProps> = props => {
     ? getRtlPopperPlacement(placement!)
     : getPopperPlacement(placement!);
 
-  const contextValue = { state, dispatch };
+  const contextValue = useMemo(() => ({ state, dispatch }), [state, dispatch]);
 
   return (
     <DatepickerContext.Provider value={contextValue}>