carbon-react 111.9.0 → 111.10.0

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

@@ -41,6 +41,19 @@ const getRadioElementToFocus = (groupName, shiftKey) => {
 
 const getNextElement = (element, focusableElements, shiftKey) => {
   const currentIndex = focusableElements.indexOf(element);
+
+  if (currentIndex === -1) {
+    // we're not currently on a focusable element - most likely because the focusableElements come from a different focus trap!
+    // So we need to leave focus where it is.
+    // The exception is when the focus is on the document body - perhaps because the previously-focused element was dynamically removed.
+    // In that case focus the first element.
+    if (element === document.body) {
+      return focusableElements[0];
+    }
+
+    return element;
+  }
+
   const increment = shiftKey ? -1 : 1;
   let nextIndex = currentIndex;
   let foundElement;
@@ -61,7 +74,14 @@ const getNextElement = (element, focusableElements, shiftKey) => {
     if (nextElement === element) {
       // guard in case there is only one focusable element (or only a single radio group) in the trap.
       // If this happens we don't want to freeze the browser by looping forever, and it's OK to just focus
-      // the same element we're already on
+      // the same element we're already on.
+      // There is an exception though: if we're in a single radio group, we need to ensure we focus on
+      // the correct one. This may not be "element" if it's not currently focused (due to the focus actually
+      // being on a wrapper element and this function being called with the first/last element as "element").
+      if (isRadio(element) && document.activeElement !== element) {
+        return getRadioElementToFocus(element.getAttribute("name"), shiftKey);
+      }
+
       return element;
     }
 

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

@@ -94,6 +94,10 @@ const FocusTrap = ({
             elementToFocus = getNextElement(activeElement, focusableElements, ev.shiftKey);
           }
 
+          setElementFocus(elementToFocus);
+          ev.preventDefault();
+        } else if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
+          const elementToFocus = getNextElement(lastElement, focusableElements, ev.shiftKey);
           setElementFocus(elementToFocus);
           ev.preventDefault();
         } else {

package/esm/components/grouped-character/grouped-character.component.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { TextboxProps } from "../textbox";
+declare type EventValue = {
+    formattedValue: string;
+    rawValue: string;
+};
+declare type CustomTarget = {
+    name?: string;
+    id?: string;
+    value: EventValue;
+};
+export interface CustomEvent extends Omit<React.ChangeEvent<HTMLInputElement>, "target"> {
+    target: CustomTarget;
+}
+export interface GroupedCharacterProps extends Omit<TextboxProps, "onChange" | "onBlur"> {
+    /** Default input value if component is meant to be used as an uncontrolled component */
+    defaultValue?: string;
+    /** pattern by which input value should be grouped */
+    groups: number[];
+    /** Handler for blur event */
+    onBlur?: (ev: CustomEvent) => void;
+    /** Handler for change event if input is meant to be used as a controlled component */
+    onChange?: (ev: CustomEvent) => void;
+    /** character to be used as separator - has to be a 1 character string */
+    separator: string;
+    /** Input value if component is meant to be used as a controlled component */
+    value?: string;
+}
+export declare const GroupedCharacter: ({ defaultValue, groups, onBlur, onChange, separator: rawSeparator, value: externalValue, ...rest }: GroupedCharacterProps) => JSX.Element;
+export default GroupedCharacter;