carbon-react 106.6.8 → 106.7.0

package/esm/__internal__/focus-trap/focus-trap-utils.js

@@ -1,11 +1,35 @@
 const defaultFocusableSelectors = 'button:not([disabled]), [href], input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]';
 
+const waitForVisibleAndFocus = element => {
+  const INTERVAL = 10;
+  const MAX_TIME = 100;
+  let timeSoFar = 0;
+
+  const stylesMatch = () => {
+    const actualStyles = window.getComputedStyle(element);
+    return actualStyles.visibility === "visible";
+  };
+
+  const check = () => {
+    /* istanbul ignore else */
+    if (stylesMatch()) {
+      element.focus();
+    } else if (timeSoFar < MAX_TIME) {
+      setTimeout(check, INTERVAL);
+      timeSoFar += INTERVAL;
+    } // just "fail" silently if maxTime exceeded - callback will never be called
+
+  };
+
+  check();
+};
+
 function setElementFocus(element) {
   if (typeof element === "function") {
     element();
   } else {
     const el = element.current || element;
-    el.focus();
+    waitForVisibleAndFocus(el);
   }
 }
 

package/{lib/src → esm}/__internal__/focus-trap/focus-trap.component.d.ts

@@ -1,10 +1,11 @@
 export default FocusTrap;
-declare function FocusTrap({ children, autoFocus, focusFirstElement, bespokeTrap, wrapperRef, }: {
+declare function FocusTrap({ children, autoFocus, focusFirstElement, bespokeTrap, wrapperRef, isOpen, }: {
     children: any;
     autoFocus?: boolean | undefined;
     focusFirstElement: any;
     bespokeTrap: any;
     wrapperRef: any;
+    isOpen: any;
 }): JSX.Element;
 declare namespace FocusTrap {
     namespace propTypes {
@@ -17,6 +18,7 @@ declare namespace FocusTrap {
         const wrapperRef: PropTypes.Requireable<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
         }>>;
+        const isOpen: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from "prop-types";

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -2,22 +2,23 @@ import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, use
 import PropTypes from "prop-types";
 import { defaultFocusableSelectors, nextNonRadioElementIndex, isRadio, setElementFocus } from "./focus-trap-utils";
 import { ModalContext } from "../../components/modal/modal.component";
+import usePrevious from "../../hooks/__internal__/usePrevious";
 
 const FocusTrap = ({
   children,
   autoFocus = true,
   focusFirstElement,
   bespokeTrap,
-  wrapperRef
+  wrapperRef,
+  isOpen
 }) => {
   const trapRef = useRef(null);
-  const firstOpen = useRef(true);
   const [focusableElements, setFocusableElements] = useState();
   const [firstElement, setFirstElement] = useState();
   const [lastElement, setLastElement] = useState();
   const [currentFocusedElement, setCurrentFocusedElement] = useState();
   const {
-    isAnimationComplete,
+    isAnimationComplete = true,
     triggerRefocusFlag
   } = useContext(ModalContext);
   const hasNewInputs = useCallback(candidate => {
@@ -53,12 +54,13 @@ const FocusTrap = ({
   useLayoutEffect(() => {
     updateFocusableElements();
   }, [children, updateFocusableElements]);
+  const shouldSetFocus = autoFocus && isOpen && isAnimationComplete && (focusFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
+  const prevShouldSetFocus = usePrevious(shouldSetFocus);
   useEffect(() => {
-    if (autoFocus && firstOpen.current && isAnimationComplete && (focusFirstElement || firstElement)) {
-      setElementFocus(focusFirstElement || firstElement);
-      firstOpen.current = false;
+    if (shouldSetFocus && !prevShouldSetFocus) {
+      setElementFocus(focusFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
     }
-  }, [autoFocus, firstElement, focusFirstElement, isAnimationComplete]);
+  }, [shouldSetFocus, prevShouldSetFocus, focusFirstElement, wrapperRef]);
   useEffect(() => {
     const trapFn = ev => {
       if (bespokeTrap) {
@@ -76,7 +78,7 @@ const FocusTrap = ({
           ev.preventDefault();
         } else if (ev.shiftKey) {
           /* shift + tab */
-          if (activeElement === firstElement) {
+          if (activeElement === firstElement || activeElement === wrapperRef.current) {
             lastElement.focus();
             ev.preventDefault();
           } // If current element is radio button -
@@ -99,7 +101,7 @@ const FocusTrap = ({
     return function cleanup() {
       document.removeEventListener("keydown", trapFn);
     };
-  }, [firstElement, lastElement, focusableElements, bespokeTrap]);
+  }, [firstElement, lastElement, focusableElements, bespokeTrap, wrapperRef]);
   const updateCurrentFocusedElement = useCallback(() => {
     const element = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.find(el => el === document.activeElement);
 
@@ -114,22 +116,49 @@ const FocusTrap = ({
     };
   }, [updateCurrentFocusedElement]);
   const refocusTrap = useCallback(() => {
+    var _wrapperRef$current;
+
     /* istanbul ignore else */
     if (currentFocusedElement && !currentFocusedElement.hasAttribute("disabled")) {
       // the trap breaks if it tries to refocus a disabled element
       setElementFocus(currentFocusedElement);
+    } else if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.hasAttribute("tabindex")) {
+      setElementFocus(wrapperRef.current);
     } else if (firstElement) {
       setElementFocus(firstElement);
     }
-  }, [currentFocusedElement, firstElement]);
+  }, [currentFocusedElement, firstElement, wrapperRef]);
   useEffect(() => {
     if (triggerRefocusFlag) {
       refocusTrap();
     }
   }, [triggerRefocusFlag, refocusTrap]);
+  const [tabIndex, setTabIndex] = useState(0);
+  useEffect(() => {
+    // issue in cypress prevents setting tabIndex to -1, instead tabIndex is set to 0 and removed on blur.
+    if (!isOpen) {
+      setTabIndex(0);
+    }
+  }, [isOpen]);
+
+  const onBlur = () => {
+    /* istanbul ignore else */
+    if (isOpen) {
+      setTabIndex(undefined);
+    }
+  };
+
+  const focusProps = {
+    tabIndex,
+    onBlur
+  }; // passes focusProps if no tabindex has been explicitly set on the wrapper
+
+  const clonedChildren = React.Children.map(children, child => {
+    return child.props.tabIndex === undefined ? /*#__PURE__*/React.cloneElement(child, focusProps) : child;
+  });
   return /*#__PURE__*/React.createElement("div", {
     ref: trapRef
-  }, children);
+  }, clonedChildren);
 };
 
 FocusTrap.propTypes = {
@@ -149,6 +178,9 @@ FocusTrap.propTypes = {
   /** a ref to the container wrapping the focusable elements */
   wrapperRef: PropTypes.shape({
     current: PropTypes.any
-  })
+  }),
+
+  /* whether the modal (etc.) component that the focus trap is inside is open or not */
+  isOpen: PropTypes.bool
 };
 export default FocusTrap;

package/esm/__internal__/utils/argTypes/specialCharacters.d.ts

@@ -0,0 +1,36 @@
+export declare const singleSpecialCharacters: {
+    options: string[];
+    mapping: {
+        minus: string;
+        questionMark: string;
+        hash: string;
+        at: string;
+        dollar: string;
+        percent: string;
+        caret: string;
+        exclamation: string;
+        asterisk: string;
+    };
+};
+export declare const email: {
+    options: string[];
+    mapping: {
+        email: string;
+    };
+};
+export declare const number: {
+    options: string[];
+    mapping: {
+        floatNumberCommaString: string;
+        floatMinusNumberCommaString: string;
+    };
+};
+declare const _default: {
+    options: string[];
+    mapping: {
+        undefined: undefined;
+        otherLanguage: string;
+        specialCharacters: string;
+    };
+};
+export default _default;

package/esm/__internal__/utils/argTypes/specialCharacters.js

@@ -0,0 +1,36 @@
+export const singleSpecialCharacters = {
+  options: ["minus", "questionMark", "hash", "at", "dollar", "percent", "caret", "exclamation", "asterisk"],
+  mapping: {
+    minus: "-",
+    questionMark: "?",
+    hash: "#",
+    at: "@",
+    dollar: "$",
+    percent: "%",
+    caret: "^",
+    exclamation: "!",
+    asterisk: "*"
+  }
+};
+export const email = {
+  options: ["email"],
+  mapping: {
+    email: "test.frontend.squad@gmail.com"
+  }
+};
+export const number = {
+  options: ["floatNumberCommaString", "floatMinusNumberCommaString"],
+  mapping: {
+    floatNumberCommaString: "0,112",
+    floatMinusNumberCommaString: "-0,112"
+  }
+};
+export default {
+  options: ["undefined", "otherLanguage", "specialCharacters"],
+  mapping: {
+    // eslint-disable-next-line object-shorthand
+    undefined: undefined,
+    otherLanguage: "mp150ú¿¡üßä",
+    specialCharacters: "!@#$%^*()_+-=~[];:.,?{}&\"'<>"
+  }
+};

package/esm/components/advanced-color-picker/advanced-color-picker.component.js

@@ -48,17 +48,17 @@ const AdvancedColorPicker = ({
       setSelectedColorRef(selected.ref.current);
     }
   }, [colors, currentColor, dialogOpen, isOpen]);
-  const handleFocus = useCallback((e, firstFocusableElement, lastFocusableElement) => {
+  const handleFocus = useCallback((e, firstFocusableElement) => {
     if (e.key === "Tab") {
       /* istanbul ignore else */
       if (e.shiftKey) {
         /* istanbul ignore else */
-        if (document.activeElement === selectedColorRef) {
-          lastFocusableElement.focus();
+        if (document.activeElement === firstFocusableElement) {
+          selectedColorRef.focus();
           e.preventDefault();
         }
-      } else if (document.activeElement === lastFocusableElement) {
-        selectedColorRef.focus();
+      } else if (document.activeElement === selectedColorRef) {
+        firstFocusableElement.focus();
         e.preventDefault();
       }
     }