gatsby-theme-carbon 4.2.5 → 4.2.7

package/gatsby-node.mjs

@@ -35,7 +35,7 @@ export const onPreBootstrap = ({ store, reporter }) => {
 // We can't do page queries from MDX templates, so we'll add the page's relative path to context after it's created.
 // The context object **is** supplied to MDX templates through the pageContext prop.
 export const onCreatePage = (
-  { page, actions, getNodesByType, ...rest },
+  { page, actions, getNodesByType, ...rest }, // eslint-disable-line no-unused-vars
   pluginOptions
 ) => {
   // Don't override if it's already been provided

package/gatsby-ssr.js

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-unknown-property */
-/* eslint-disable react/no-danger */
 import React from 'react';
 import wrapRoot from './src/util/wrap-root-element';
 import { version } from './package.json';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "4.2.5",
+  "version": "4.2.7",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {
@@ -18,28 +18,28 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "gatsby": "^5.13.6",
+    "gatsby": "^5.14.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@babel/core": "^7.24.7",
+    "@babel/core": "^7.26.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-jsx": "^7.25.9",
-    "@carbon/elements": "^11.59.0",
-    "@carbon/grid": "^11.30.0",
-    "@carbon/pictograms-react": "^11.70.0",
-    "@carbon/react": "^1.74.0",
-    "@carbon/themes": "^11.45.0",
+    "@carbon/elements": "^11.60.0",
+    "@carbon/grid": "^11.31.0",
+    "@carbon/pictograms-react": "^11.71.1",
+    "@carbon/react": "^1.75.0",
+    "@carbon/themes": "^11.46.0",
     "@garcia-enterprise/gatsby-plugin-sass-resources": "^4.0.2",
-    "@mdx-js/mdx": "^3.0.1",
-    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/mdx": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
     "@reach/router": "^1.3.4",
-    "@vimeo/player": "^2.23.0",
+    "@vimeo/player": "^2.25.1",
     "beautiful-react-hooks": "^5.0.2",
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
-    "focus-trap-react": "^10.2.3",
+    "focus-trap-react": "^10.3.1",
     "gatsby-plugin-catch-links": "^5.14.0",
     "gatsby-plugin-local-search": "^2.0.1",
     "gatsby-plugin-manifest": "^5.14.0",
@@ -58,15 +58,15 @@
     "lodash.startcase": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "mkdirp": "^3.0.1",
-    "prism-react-renderer": "^2.3.1",
+    "prism-react-renderer": "^2.4.1",
     "prop-types": "^15.8.1",
     "react-helmet": "^6.1.0",
     "react-lunr": "^1.1.0",
     "react-transition-group": "^4.4.5",
-    "react-use": "^17.5.0",
+    "react-use": "^17.6.0",
     "rehype-mdx-fenced-code-meta-support": "^1.0.4",
     "remark-gfm": "3.0.1",
-    "sass": "^1.82.0",
+    "sass": "^1.84.0",
     "slugify": "^1.6.6",
     "smooth-scroll": "^16.1.3",
     "use-media": "^1.5.0",

package/src/components/Code/Code.js

@@ -108,9 +108,9 @@ const Code = ({ children, className: classNameProp = '', metaData }) => {
               })}
               style={style}>
               {getLines(tokens).map((line, i) => (
-                <div {...getLineProps({ line, key: i })}>
+                <div {...getLineProps({ line, key: i })} key={i}>
                   {line.map((token, key) => (
-                    <span {...getTokenProps({ token, key })} />
+                    <span {...getTokenProps({ token, key })} key={key} />
                   ))}
                 </div>
               ))}

package/src/components/Container/Container.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-duplicates */
 import React, { useContext, useEffect, useRef, useCallback } from 'react';
 import cx from 'classnames';
 import NavContext from '../../util/context/NavContext';

package/src/components/FeedbackDialog/Comment.js

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 // eslint doesn't know about TextArea labeling
 import React, { useState } from 'react';
 import { TextArea } from '@carbon/react';

package/src/components/FeedbackDialog/Experience.js

@@ -16,8 +16,6 @@ const NEUTRAL = 'feedback-form-neutral';
 const POSITIVE = 'feedback-form-positive';
 
 const Experience = React.forwardRef((props, ref) => {
-  'Experience';
-
   const [selected, setSelected] = useState(NEUTRAL);
 
   const onExperienceChange = (e) => {
@@ -98,4 +96,6 @@ const Experience = React.forwardRef((props, ref) => {
   );
 });
 
+Experience.displayName = 'Experience';
+
 export default Experience;

package/src/components/GlobalSearch/GlobalSearch.js

@@ -1,7 +1,4 @@
 // https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html/#ex1
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable jsx-a11y/label-has-associated-control */
-/* eslint-disable jsx-a11y/role-has-required-aria-props */
 
 import React, {
   useState,
@@ -13,7 +10,7 @@ import React, {
 } from 'react';
 import { useLunr } from 'react-lunr';
 import { Close, Search } from '@carbon/react/icons';
-import _throttle from 'lodash.throttle';
+import _throttle from 'lodash.throttle'; // eslint-disable-line no-unused-vars
 import { graphql, navigate, useStaticQuery } from 'gatsby';
 import cx from 'classnames';
 import NavContext from '../../util/context/NavContext';

package/src/components/GlobalSearch/Menu.js

@@ -1,5 +1,5 @@
 // Gatsby doesn't include the recommended exceptions to this rule
-/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+
 // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-to-interactive-role.md#rule-details
 
 import React, { useEffect, createContext, useContext } from 'react';

package/src/components/ImageGallery/ImageGallery.js

@@ -131,8 +131,6 @@ function ImageGallery({ children, className }) {
         !isMobile &&
         ReactDOM.createPortal(
           <FocusTrap>
-            {/* Because of FocusTrap, the key down events will propagate up removing the accessibility problem that would be created by having a keydown event listener on a non-interactive element. */}
-            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
             <div
               role="group"
               className={inDialogGalleryContainer}

package/src/components/Layout.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React, { useEffect } from 'react';
 
 import Meta from './Meta';
@@ -8,6 +7,7 @@ import { Switcher } from './Switcher';
 import Footer from './Footer';
 import Container from './Container';
 import useMetadata from '../util/hooks/useMetadata';
+import smoothScroll from 'smooth-scroll';
 
 import '../styles/index.scss';
 
@@ -25,8 +25,7 @@ const Layout = ({
   const { isSwitcherEnabled } = useMetadata();
 
   useEffect(() => {
-    // eslint-disable-next-line global-require
-    const scroll = require('smooth-scroll')('a[href*="#"]', {
+    const scroll = smoothScroll('a[href*="#"]', {
       speed: 400,
       durationMin: 250,
       durationMax: 700,

package/src/components/LeftNav/LeftNavTree.js

@@ -29,7 +29,7 @@ const LeftNavTree = ({ items, pathPrefix, theme }) => {
       // branch node with more than 1 leaf nodes
       if (item.pages && item.pages.length > 1) {
         item.isBranch = true;
-        item.pages.forEach((SubNavItem, i) => assignNodeType(SubNavItem));
+        item.pages.forEach((SubNavItem) => assignNodeType(SubNavItem));
       }
       // if it is branch node with only one leaf node, convert it to a leaf node
       else if (item.pages && item.pages.length) {
@@ -185,6 +185,7 @@ LeftNavTree.propTypes = {
   ),
 };
 
+// eslint-disable-next-line no-unused-vars
 const areEqual = (prevProps, nextProps) => true;
 
 export default memo(LeftNavTree, areEqual);

package/src/components/LeftNav/ResourceLinks.js

@@ -25,13 +25,13 @@ const LeftNavResourceLinks = ({
           [dividerSpace]: includeDividerSpace,
         })}
       />
+      {/* eslint-disable-next-line no-unused-vars */}
       {links.map(({ title, href, ...rest }, i) => {
         const outbound = !/^\/(?!\/)/.test(href);
         return (
           <SideNavLink
             key={i}
             renderIcon={outbound ? LaunchIcon : undefined}
-            // eslint-disable-next-line jsx-a11y/aria-proptypes
             aria-current=""
             to={href}
             href={href}

package/src/components/MDXProvider/defaultComponents.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React from 'react';
 
 import { P, H1, H2, H3, H4, H5, Ul, Ol, Li, Blockquote } from '../markdown';

package/src/components/MediumPosts/MediumPosts.js

@@ -29,6 +29,7 @@ const MediumPosts = ({ postLimit = 3, cardProps, ...rest }) => {
     <Row {...rest}>
       {allPosts.slice(0, postLimit).map((latestPost) => (
         <Column
+          key={latestPost.slug}
           colSm={4}
           colMd={4}
           colLg={4}

package/src/components/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 // Gatsby doesn't include the recommended exceptions to this rule
-/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+
 // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-to-interactive-role.md#rule-details
 
 import React, {

package/src/components/Video/Video.js

@@ -130,7 +130,6 @@ const Video = ({
           {isPlaying ? 'Pause' : 'Play'}
         </span>
       </div>
-      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <video
         autoPlay={autoPlay}
         className={video}

package/src/components/markdown/Li.js

@@ -16,5 +16,4 @@ const Li = ({ children, ...rest }) =>
     )
   );
 
-// eslint-disable-next-line no-restricted-exports
 export { Li as default, LiConsumer };

package/src/components/markdown/Ol.js

@@ -3,6 +3,7 @@ import { OrderedList } from '@carbon/react';
 import { LiConsumer } from './Li.js';
 import { ordered } from './Markdown.module.scss';
 
+// eslint-disable-next-line no-unused-vars
 const Ol = ({ children, className, ...rest }) =>
   React.createElement(LiConsumer, null, (value) => {
     if (value.hasListItemParent) {

package/src/components/markdown/Ul.js

@@ -3,6 +3,7 @@ import { UnorderedList } from '@carbon/react';
 import { LiConsumer } from './Li.js';
 import { unordered } from './Markdown.module.scss';
 
+// eslint-disable-next-line no-unused-vars
 const Ul = ({ children, className, ...rest }) =>
   React.createElement(LiConsumer, null, (value) => {
     if (value.hasListItemParent) {

package/src/util/hooks/useId.js

@@ -2,7 +2,7 @@ import { useState, useEffect, useLayoutEffect } from 'react';
 
 let serverHandoffComplete = false;
 let globalIndex = 0;
-// eslint-disable-next-line no-plusplus
+
 const genId = () => ++globalIndex;
 
 // https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
@@ -28,7 +28,6 @@ export const useId = (label) => {
        */
       setId(genId());
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {

package/src/util/hooks/useOnClickOutside.js

@@ -12,6 +12,7 @@ try {
   window.addEventListener('testPassive', null, opts);
   window.removeEventListener('testPassive', null, opts);
 } catch (e) {
+  console.warn(e);
   passiveListenerSupported = false;
 }
 

package/src/util/hooks/useScrollPosition.js

@@ -13,6 +13,7 @@ try {
   window.addEventListener('testPassive', null, opts);
   window.removeEventListener('testPassive', null, opts);
 } catch (e) {
+  console.warn(e);
   passiveListenerSupported = false;
 }