carbon-react 114.12.3 → 114.13.1

package/esm/components/anchor-navigation/anchor-navigation.component.js

@@ -1,8 +1,9 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback, createRef } from "react";
+import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import { isFragment } from "react-is";
 import invariant from "invariant";
 import throttle from "lodash/throttle";
+import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
 import Event from "../../__internal__/utils/helpers/events";
 import { StyledAnchorNavigation, StyledNavigation, StyledContent } from "./anchor-navigation.style";
 import AnchorNavigationItem from "./anchor-navigation-item/anchor-navigation-item.component";
@@ -23,9 +24,6 @@ const AnchorNavigation = ({
   !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? invariant(false, `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${AnchorNavigationItem.displayName}\``) : invariant(false) : void 0;
   const [selectedIndex, setSelectedIndex] = useState(0);
   const sectionRefs = useRef(React.Children.map(stickyNavigation.props.children, child => child.props.target));
-  const anchorRefs = useRef(Array.from({
-    length: React.Children.count(stickyNavigation.props.children)
-  }, () => /*#__PURE__*/createRef()));
   const contentRef = useRef(null);
   const navigationRef = useRef(null);
   const isUserScroll = useRef(true);
@@ -51,8 +49,13 @@ const AnchorNavigation = ({
     if (isUserScroll.current) {
       setSelectedAnchorBasedOnScroll();
     } else {
-      if (isUserScrollTimer.current !== undefined) window.clearTimeout(isUserScrollTimer.current);
-      isUserScrollTimer.current = setTimeout(() => {
+      if (isUserScrollTimer.current !== undefined) {
+        window.clearTimeout(isUserScrollTimer.current);
+      }
+
+      isUserScrollTimer.current = setTimeout(
+      /* istanbul ignore next */
+      () => {
         isUserScroll.current = true;
       }, SCROLL_THROTTLE + 50);
     }
@@ -62,23 +65,30 @@ const AnchorNavigation = ({
     return () => window.removeEventListener("scroll", scrollHandler, true);
   }, [scrollHandler]);
 
-  const focusFirstFocusableChild = section => {
-    const defaultFocusableSelectors = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
-    const firstFocusableElement = section.querySelector(defaultFocusableSelectors);
-
-    if (firstFocusableElement) {
-      firstFocusableElement.focus({
-        preventScroll: true
-      });
+  const focusSection = section => {
+    if (!section.matches(defaultFocusableSelectors)) {
+      section.setAttribute("tabindex", "-1");
     }
+
+    section.focus({
+      preventScroll: true
+    });
   };
 
   const scrollToSection = index => {
     const sectionToScroll = sectionRefs.current[index].current; // istanbul ignore if
     // function is called only after component is rendered, so ref cannot hold a null value
 
-    if (sectionToScroll === null) return;
-    focusFirstFocusableChild(sectionToScroll); // workaround due to preventScroll focus method option on firefox not working consistently
+    if (sectionToScroll === null) return; // ensure section has the appropriate element to remove the default focus styles.
+    // Can ignore else branch because there's no harm in setting this to "true" twice (it can't hold any other value),
+    // but it's probably more efficient not to.
+    // istanbul ignore else
+
+    if (!sectionToScroll.dataset.carbonAnchornavRef) {
+      sectionToScroll.dataset.carbonAnchornavRef = "true";
+    }
+
+    focusSection(sectionToScroll); // workaround due to preventScroll focus method option on firefox not working consistently
 
     window.setTimeout(() => {
       isUserScroll.current = false;
@@ -91,26 +101,13 @@ const AnchorNavigation = ({
     }, 10);
   };
 
-  const focusNavItem = index => {
-    var _anchorRefs$current$c;
-
-    const noOfRefs = anchorRefs.current.length;
-    (_anchorRefs$current$c = anchorRefs.current[(index % noOfRefs + noOfRefs) % noOfRefs].current) === null || _anchorRefs$current$c === void 0 ? void 0 : _anchorRefs$current$c.focus();
-  };
-
   const handleClick = (event, index) => {
     event.preventDefault();
     scrollToSection(index);
   };
 
   const handleKeyDown = (event, index) => {
-    event.preventDefault();
-
-    if (Event.isUpKey(event)) {
-      focusNavItem(index - 1);
-    } else if (Event.isDownKey(event)) {
-      focusNavItem(index + 1);
-    } else if (Event.isEnterKey(event) || Event.isSpaceKey(event)) {
+    if (Event.isEnterKey(event)) {
       scrollToSection(index);
     }
   };
@@ -122,11 +119,11 @@ const AnchorNavigation = ({
     ref: navigationRef,
     "data-element": "anchor-sticky-navigation"
   }, React.Children.map(stickyNavigation.props.children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
+    href: child.props.href || "#",
+    // need to pass an href to ensure the link is tabbable by default
     isSelected: index === selectedIndex,
-    tabIndex: index === selectedIndex ? 0 : -1,
     onClick: event => handleClick(event, index),
-    onKeyDown: event => handleKeyDown(event, index),
-    ref: anchorRefs.current[index]
+    onKeyDown: event => handleKeyDown(event, index)
   }))), /*#__PURE__*/React.createElement(StyledContent, null, children));
 };
 

package/esm/components/anchor-navigation/anchor-navigation.style.js

@@ -15,5 +15,9 @@ const StyledNavigation = styled.ul`
 const StyledContent = styled.div`
   flex: 1;
   margin-left: 32px;
+
+  [data-carbon-anchornav-ref="true"]:focus {
+    outline: none;
+  }
 `;
 export { StyledAnchorNavigation, StyledNavigation, StyledContent };

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -46,13 +46,17 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
   const weekdaysLong = useMemo(() => Array.from({
     length: 7
   }).map((_, i) => localize.day(i)), [localize]);
-  const weekdaysShort = useMemo(() => Array.from({
-    length: 7
-  }).map((_, i) => localize.day(i, ["de", "pl"].filter(str => l.locale().includes(str)).length ? {
-    width: "wide"
-  } : {
-    width: "abbreviated"
-  }).substring(0, 3)), [l, localize]);
+  const weekdaysShort = useMemo(() => {
+    const isGivenLocale = str => l.locale().includes(str);
+
+    return Array.from({
+      length: 7
+    }).map((_, i) => localize.day(i, ["de", "pl"].some(isGivenLocale) ? {
+      width: "wide"
+    } : {
+      width: "abbreviated"
+    }).substring(0, isGivenLocale("de") ? 2 : 3));
+  }, [l, localize]);
 
   const handleDayClick = (date, {
     disabled

package/lib/components/anchor-navigation/anchor-navigation.component.js

@@ -15,6 +15,8 @@ var _invariant = _interopRequireDefault(require("invariant"));
 
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 
+var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
+
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _anchorNavigation = require("./anchor-navigation.style");
@@ -45,9 +47,6 @@ const AnchorNavigation = ({
   !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${_anchorNavigationItem.default.displayName}\``) : (0, _invariant.default)(false) : void 0;
   const [selectedIndex, setSelectedIndex] = (0, _react.useState)(0);
   const sectionRefs = (0, _react.useRef)(_react.default.Children.map(stickyNavigation.props.children, child => child.props.target));
-  const anchorRefs = (0, _react.useRef)(Array.from({
-    length: _react.default.Children.count(stickyNavigation.props.children)
-  }, () => /*#__PURE__*/(0, _react.createRef)()));
   const contentRef = (0, _react.useRef)(null);
   const navigationRef = (0, _react.useRef)(null);
   const isUserScroll = (0, _react.useRef)(true);
@@ -73,8 +72,13 @@ const AnchorNavigation = ({
     if (isUserScroll.current) {
       setSelectedAnchorBasedOnScroll();
     } else {
-      if (isUserScrollTimer.current !== undefined) window.clearTimeout(isUserScrollTimer.current);
-      isUserScrollTimer.current = setTimeout(() => {
+      if (isUserScrollTimer.current !== undefined) {
+        window.clearTimeout(isUserScrollTimer.current);
+      }
+
+      isUserScrollTimer.current = setTimeout(
+      /* istanbul ignore next */
+      () => {
         isUserScroll.current = true;
       }, SCROLL_THROTTLE + 50);
     }
@@ -84,23 +88,30 @@ const AnchorNavigation = ({
     return () => window.removeEventListener("scroll", scrollHandler, true);
   }, [scrollHandler]);
 
-  const focusFirstFocusableChild = section => {
-    const defaultFocusableSelectors = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
-    const firstFocusableElement = section.querySelector(defaultFocusableSelectors);
-
-    if (firstFocusableElement) {
-      firstFocusableElement.focus({
-        preventScroll: true
-      });
+  const focusSection = section => {
+    if (!section.matches(_focusTrapUtils.defaultFocusableSelectors)) {
+      section.setAttribute("tabindex", "-1");
     }
+
+    section.focus({
+      preventScroll: true
+    });
   };
 
   const scrollToSection = index => {
     const sectionToScroll = sectionRefs.current[index].current; // istanbul ignore if
     // function is called only after component is rendered, so ref cannot hold a null value
 
-    if (sectionToScroll === null) return;
-    focusFirstFocusableChild(sectionToScroll); // workaround due to preventScroll focus method option on firefox not working consistently
+    if (sectionToScroll === null) return; // ensure section has the appropriate element to remove the default focus styles.
+    // Can ignore else branch because there's no harm in setting this to "true" twice (it can't hold any other value),
+    // but it's probably more efficient not to.
+    // istanbul ignore else
+
+    if (!sectionToScroll.dataset.carbonAnchornavRef) {
+      sectionToScroll.dataset.carbonAnchornavRef = "true";
+    }
+
+    focusSection(sectionToScroll); // workaround due to preventScroll focus method option on firefox not working consistently
 
     window.setTimeout(() => {
       isUserScroll.current = false;
@@ -113,26 +124,13 @@ const AnchorNavigation = ({
     }, 10);
   };
 
-  const focusNavItem = index => {
-    var _anchorRefs$current$c;
-
-    const noOfRefs = anchorRefs.current.length;
-    (_anchorRefs$current$c = anchorRefs.current[(index % noOfRefs + noOfRefs) % noOfRefs].current) === null || _anchorRefs$current$c === void 0 ? void 0 : _anchorRefs$current$c.focus();
-  };
-
   const handleClick = (event, index) => {
     event.preventDefault();
     scrollToSection(index);
   };
 
   const handleKeyDown = (event, index) => {
-    event.preventDefault();
-
-    if (_events.default.isUpKey(event)) {
-      focusNavItem(index - 1);
-    } else if (_events.default.isDownKey(event)) {
-      focusNavItem(index + 1);
-    } else if (_events.default.isEnterKey(event) || _events.default.isSpaceKey(event)) {
+    if (_events.default.isEnterKey(event)) {
       scrollToSection(index);
     }
   };
@@ -144,11 +142,11 @@ const AnchorNavigation = ({
     ref: navigationRef,
     "data-element": "anchor-sticky-navigation"
   }, _react.default.Children.map(stickyNavigation.props.children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
+    href: child.props.href || "#",
+    // need to pass an href to ensure the link is tabbable by default
     isSelected: index === selectedIndex,
-    tabIndex: index === selectedIndex ? 0 : -1,
     onClick: event => handleClick(event, index),
-    onKeyDown: event => handleKeyDown(event, index),
-    ref: anchorRefs.current[index]
+    onKeyDown: event => handleKeyDown(event, index)
   }))), /*#__PURE__*/_react.default.createElement(_anchorNavigation.StyledContent, null, children));
 };
 

package/lib/components/anchor-navigation/anchor-navigation.style.js

@@ -27,5 +27,9 @@ exports.StyledNavigation = StyledNavigation;
 const StyledContent = _styledComponents.default.div`
   flex: 1;
   margin-left: 32px;
+
+  [data-carbon-anchornav-ref="true"]:focus {
+    outline: none;
+  }
 `;
 exports.StyledContent = StyledContent;

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -70,13 +70,17 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
   const weekdaysLong = (0, _react.useMemo)(() => Array.from({
     length: 7
   }).map((_, i) => localize.day(i)), [localize]);
-  const weekdaysShort = (0, _react.useMemo)(() => Array.from({
-    length: 7
-  }).map((_, i) => localize.day(i, ["de", "pl"].filter(str => l.locale().includes(str)).length ? {
-    width: "wide"
-  } : {
-    width: "abbreviated"
-  }).substring(0, 3)), [l, localize]);
+  const weekdaysShort = (0, _react.useMemo)(() => {
+    const isGivenLocale = str => l.locale().includes(str);
+
+    return Array.from({
+      length: 7
+    }).map((_, i) => localize.day(i, ["de", "pl"].some(isGivenLocale) ? {
+      width: "wide"
+    } : {
+      width: "abbreviated"
+    }).substring(0, isGivenLocale("de") ? 2 : 3));
+  }, [l, localize]);
 
   const handleDayClick = (date, {
     disabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.12.3",
+  "version": "114.13.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",