carbon-react 107.1.4 → 107.1.7

package/lib/__internal__/label/label.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Label = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -41,30 +41,30 @@ const tooltipPosition = ({
   info,
   inline
 }) => {
-  return (error || warning || info) && inline === true ? "top" : "right";
+  return (error || warning || info) && inline ? "top" : "right";
 };
 
 const Label = ({
-  disabled,
-  inline,
   align = "right",
-  width,
-  optional,
-  labelId,
-  tooltipId,
   children,
+  disabled,
   error,
-  warning,
-  info,
   help,
   helpIcon,
   helpTabIndex,
-  useValidationIcon = true,
   htmlFor,
+  info,
+  inline,
+  isRequired,
+  labelId,
+  optional,
   pr,
   pl,
-  isRequired,
-  validationIconId
+  tooltipId,
+  useValidationIcon = true,
+  validationIconId,
+  warning,
+  width = 30
 }) => {
   const [isFocused, setFocus] = (0, _react.useState)(false);
   const {
@@ -76,14 +76,14 @@ const Label = ({
     onMouseLeave: onGroupMouseLeave
   } = (0, _react.useContext)(_inputBehaviour.InputGroupContext);
 
-  const handleMouseEnter = ev => {
-    if (onMouseEnter) onMouseEnter(ev);
-    if (onGroupMouseEnter) onGroupMouseEnter(ev);
+  const handleMouseEnter = () => {
+    if (onMouseEnter) onMouseEnter();
+    if (onGroupMouseEnter) onGroupMouseEnter();
   };
 
-  const handleMouseLeave = ev => {
-    if (onMouseLeave) onMouseLeave(ev);
-    if (onGroupMouseLeave) onGroupMouseLeave(ev);
+  const handleMouseLeave = () => {
+    if (onMouseLeave) onMouseLeave();
+    if (onGroupMouseLeave) onGroupMouseLeave();
   };
 
   const icon = () => {
@@ -141,66 +141,28 @@ const Label = ({
   }, children), icon());
 };
 
+exports.Label = Label;
 Label.propTypes = {
-  /** Label width */
-  width: _propTypes.default.number,
-
-  /** Label alignment */
-  align: _propTypes.default.oneOf(["left", "right"]),
-
-  /** When true, label is placed in line an input */
-  inline: _propTypes.default.bool,
-
-  /** If true, the component will be disabled */
-  disabled: _propTypes.default.bool,
-
-  /** Flag to configure component as optional in Form */
-  optional: _propTypes.default.bool,
-
-  /** The unique id of the label element */
-  labelId: _propTypes.default.string,
-
-  /** The unique id of the Help component tooltip, used for accessibility */
-  tooltipId: _propTypes.default.string,
-
-  /** Children elements */
-  children: _propTypes.default.node,
-
-  /** Status of error validations */
-  error: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Status of warnings */
-  warning: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Status of info */
-  info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** A message that the Help component will display */
-  help: _propTypes.default.node,
-
-  /** Icon type */
-  helpIcon: _propTypes.default.string,
-
-  /** Overrides the default tabindex of the Help component */
-  helpTabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** Whether to show the validation icon */
-  useValidationIcon: _propTypes.default.bool,
-
-  /** A string that represents the ID of another form element */
-  htmlFor: _propTypes.default.string,
-
-  /** Padding right, integer multiplied by base spacing constant (8) */
-  pr: _propTypes.default.oneOf([1, 2]),
-
-  /** Padding left, integer multiplied by base spacing constant (8) */
-  pl: _propTypes.default.oneOf([1, 2]),
-
-  /** Flag to configure component as mandatory */
-  isRequired: _propTypes.default.bool,
-
-  /** Id of the validation icon */
-  validationIconId: _propTypes.default.string
+  "align": _propTypes.default.oneOf(["left", "right"]),
+  "children": _propTypes.default.node,
+  "disabled": _propTypes.default.bool,
+  "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "help": _propTypes.default.node,
+  "helpIcon": _propTypes.default.oneOf(["add", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "copy", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "messages", "minus_large", "minus", "mobile", "money_bag", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "three_boxes", "tick_circle", "tick", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "helpTabIndex": _propTypes.default.string,
+  "htmlFor": _propTypes.default.string,
+  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "inline": _propTypes.default.bool,
+  "isRequired": _propTypes.default.bool,
+  "labelId": _propTypes.default.string,
+  "optional": _propTypes.default.bool,
+  "pl": _propTypes.default.oneOf([1, 2]),
+  "pr": _propTypes.default.oneOf([1, 2]),
+  "tooltipId": _propTypes.default.string,
+  "useValidationIcon": _propTypes.default.bool,
+  "validationIconId": _propTypes.default.string,
+  "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "width": _propTypes.default.number
 };
 
 var _default = /*#__PURE__*/_react.default.memo(Label);

package/lib/__internal__/label/label.style.d.ts

@@ -1,3 +1,23 @@
-export const StyledLabelContainer: any;
-export default LabelStyle;
-declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
+export interface StyledLabelProps {
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** Flag to configure component as mandatory */
+    isRequired?: boolean;
+}
+declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
+export interface StyledLabelContainerProps {
+    /** Label alignment */
+    align?: "left" | "right";
+    /** When true, label is placed in line an input */
+    inline?: boolean;
+    /** Flag to configure component as optional in Form */
+    optional?: boolean;
+    /** Padding right, integer multiplied by base spacing constant (8) */
+    pr?: 1 | 2;
+    /** Padding left, integer multiplied by base spacing constant (8) */
+    pl?: 1 | 2;
+    /** Label width */
+    width?: number;
+}
+export declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, StyledLabelContainerProps, never>;
+export default StyledLabel;

package/lib/__internal__/label/label.style.js

@@ -7,15 +7,11 @@ exports.default = exports.StyledLabelContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const LabelStyle = _styledComponents.default.label`
+const StyledLabel = _styledComponents.default.label`
   color: var(--colorsUtilityYin090);
   display: block;
   font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
@@ -37,10 +33,7 @@ const LabelStyle = _styledComponents.default.label`
       color: var(--colorsUtilityYin030);
     `}
 `;
-LabelStyle.propTypes = {
-  disabled: _propTypes.default.bool,
-  isRequired: _propTypes.default.bool
-};
+const DEFAULT_CONTAINER_WIDTH = 30;
 const StyledLabelContainer = _styledComponents.default.div`
   display: flex;
   align-items: center;
@@ -62,7 +55,7 @@ const StyledLabelContainer = _styledComponents.default.div`
         padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
-      width: ${width === 0 ? StyledLabelContainer.defaultProps.width : width}%;
+      width: ${width || DEFAULT_CONTAINER_WIDTH}%;
     `}
 
   ${({
@@ -76,16 +69,5 @@ const StyledLabelContainer = _styledComponents.default.div`
     `}
 `;
 exports.StyledLabelContainer = StyledLabelContainer;
-StyledLabelContainer.defaultProps = {
-  align: "right",
-  width: 30
-};
-StyledLabelContainer.propTypes = {
-  align: _propTypes.default.oneOf(["left", "right"]),
-  inline: _propTypes.default.bool,
-  width: _propTypes.default.number,
-  pr: _propTypes.default.number,
-  pl: _propTypes.default.number
-};
-var _default = LabelStyle;
+var _default = StyledLabel;
 exports.default = _default;

package/lib/__internal__/utils/helpers/events/events.d.ts

@@ -13,41 +13,11 @@ declare const Events: {
      * A method to determine if an event is of a particular type
      * */
     isEventType: (ev: React.SyntheticEvent | Event, type: string) => boolean;
-    /**
-     * A method to determine whether a key down event was an arrow key
-     * */
-    isNavigationKeyup: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * A method to determine whether a key down event was an enter key
-     * */
-    isEnterKeyup: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * A method to determine whether a key up event is allowed or not.
-     * */
-    isValidKeypress: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Determines if a number key along the top of the keyboard or a number key on the
      * keypad is pressed
      * */
     isNumberKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is part of the numpad
-     * includes symbols
-     * */
-    isNumpadKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is a alphabet key
-     * Case insensitive
-     * */
-    isAlphabetKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is a valid symbol
-     * */
-    isSymbolKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is a navigation key
-     * */
-    isNavigationKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Determines if the key pressed is a navigation left key
      * */
@@ -64,10 +34,6 @@ declare const Events: {
      * Determines if the key pressed is a navigation down key
      * */
     isDownKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is a meta key
-     * */
-    isMetaKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Determines if the key pressed is the escape key
      * */
@@ -80,18 +46,6 @@ declare const Events: {
      * Determines if the key pressed is the tab key
      * */
     isTabKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the backspace key
-     * */
-    isBackspaceKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the delete key
-     * */
-    isDeleteKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the backspace or delete key
-     * */
-    isDeletingKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Determines if the key pressed is the shift key
      * */
@@ -104,18 +58,6 @@ declare const Events: {
      * Determines if the key pressed is the space key or enter key
      * */
     isEnterOrSpaceKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the period key
-     * */
-    isPeriodKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the comma key
-     * */
-    isCommaKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the minus key
-     * */
-    isMinusKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Determines if the key pressed is the home key
      * */

package/lib/__internal__/utils/helpers/events/events.js

@@ -27,43 +27,6 @@ const Events = {
     return ev.type === type;
   },
 
-  /**
-   * A method to determine whether a key down event was an arrow key
-   * */
-  isNavigationKeyup: ev => {
-    if (!Events.isEventType(ev, "keyup")) {
-      return false;
-    }
-
-    return Events.isNavigationKey(ev);
-  },
-
-  /**
-   * A method to determine whether a key down event was an enter key
-   * */
-  isEnterKeyup: ev => {
-    if (!Events.isEventType(ev, "keyup")) {
-      return false;
-    }
-
-    return Events.isEnterKey(ev);
-  },
-
-  /**
-   * A method to determine whether a key up event is allowed or not.
-   * */
-  isValidKeypress: ev => {
-    if (!Events.isEventType(ev, "keyup")) {
-      return false;
-    }
-
-    if (Events.isNumberKey(ev) || Events.isAlphabetKey(ev) || Events.isNumpadKey(ev) || Events.isSymbolKey(ev) || Events.isSpaceKey(ev) || Events.isDeletingKey(ev) || Events.isBackspaceKey(ev)) {
-      return true;
-    }
-
-    return false;
-  },
-
   /**
    * Determines if a number key along the top of the keyboard or a number key on the
    * keypad is pressed
@@ -75,167 +38,88 @@ const Events = {
     return charCode !== undefined && charCode >= 48 && charCode <= 57;
   },
 
-  /**
-   * Determines if the key pressed is part of the numpad
-   * includes symbols
-   * */
-  isNumpadKey: ev => {
-    return ev.which !== undefined && ev.which >= 96 && ev.which <= 111;
-  },
-
-  /**
-   * Determines if the key pressed is a alphabet key
-   * Case insensitive
-   * */
-  isAlphabetKey: ev => {
-    return ev.which !== undefined && ev.which >= 65 && ev.which <= 90;
-  },
-
-  /**
-   * Determines if the key pressed is a valid symbol
-   * */
-  isSymbolKey: ev => {
-    return ev.which !== undefined && (ev.which >= 58 && ev.which <= 64 || ev.which >= 106 && ev.which <= 107 || ev.which >= 186 && ev.which <= 192 || ev.which >= 219 && ev.which <= 222);
-  },
-
-  /**
-   * Determines if the key pressed is a navigation key
-   * */
-  isNavigationKey: ev => {
-    return ev.which !== undefined && ev.which >= 37 && ev.which <= 40;
-  },
-
   /**
    * Determines if the key pressed is a navigation left key
    * */
   isLeftKey: ev => {
-    return ev.which === 37;
+    return ev.key === "ArrowLeft";
   },
 
   /**
    * Determines if the key pressed is a navigation up key
    * */
   isUpKey: ev => {
-    return ev.which === 38;
+    return ev.key === "ArrowUp";
   },
 
   /**
    * Determines if the key pressed is a navigation right key
    * */
   isRightKey: ev => {
-    return ev.which === 39;
+    return ev.key === "ArrowRight";
   },
 
   /**
    * Determines if the key pressed is a navigation down key
    * */
   isDownKey: ev => {
-    return ev.which === 40;
-  },
-
-  /**
-   * Determines if the key pressed is a meta key
-   * */
-  isMetaKey: ev => {
-    return !!ev.metaKey;
+    return ev.key === "ArrowDown";
   },
 
   /**
    * Determines if the key pressed is the escape key
    * */
   isEscKey: ev => {
-    return ev.which === 27;
+    return ev.key === "Escape";
   },
 
   /**
    * Determines if the key pressed is the enter key
    * */
   isEnterKey: ev => {
-    return ev.which === 13;
+    return ev.key === "Enter";
   },
 
   /**
    * Determines if the key pressed is the tab key
    * */
   isTabKey: ev => {
-    return ev.which === 9;
-  },
-
-  /**
-   * Determines if the key pressed is the backspace key
-   * */
-  isBackspaceKey: ev => {
-    return ev.key === "Backspace";
-  },
-
-  /**
-   * Determines if the key pressed is the delete key
-   * */
-  isDeleteKey: ev => {
-    return ev.key === "Delete";
-  },
-
-  /**
-   * Determines if the key pressed is the backspace or delete key
-   * */
-  isDeletingKey: ev => {
-    return Events.isDeleteKey(ev) || Events.isBackspaceKey(ev);
+    return ev.key === "Tab";
   },
 
   /**
    * Determines if the key pressed is the shift key
    * */
   isShiftKey: ev => {
-    return ev.shiftKey || ev.which === 16;
+    return ev.shiftKey;
   },
 
   /**
    * Determines if the key pressed is the space key
    * */
   isSpaceKey: ev => {
-    return ev.which === 32;
+    return ev.key === " ";
   },
 
   /**
    * Determines if the key pressed is the space key or enter key
    * */
   isEnterOrSpaceKey: ev => {
-    return ev.which === 13 || ev.which === 32;
-  },
-
-  /**
-   * Determines if the key pressed is the period key
-   * */
-  isPeriodKey: ev => {
-    return ev.which === 190;
-  },
-
-  /**
-   * Determines if the key pressed is the comma key
-   * */
-  isCommaKey: ev => {
-    return ev.which === 188;
-  },
-
-  /**
-   * Determines if the key pressed is the minus key
-   * */
-  isMinusKey: ev => {
-    return ev.key === "-" || ev.key === "Subtract";
+    return ev.key === "Enter" || ev.key === " ";
   },
 
   /**
    * Determines if the key pressed is the home key
    * */
   isHomeKey: ev => {
-    return ev.which === 36;
+    return ev.key === "Home";
   },
 
   /**
    * Determines if the key pressed is the end key
    * */
   isEndKey: ev => {
-    return ev.which === 35;
+    return ev.key === "End";
   },
 
   /**

package/lib/__spec_helper__/test-utils.d.ts

@@ -8,32 +8,11 @@ declare const assertStyleMatch: <Props>(styleSpec: {
     [key: string]: string | number | undefined;
 }, component: ReactWrapper<Props, {}, import("react").Component<{}, {}, any>> | ShallowWrapper<Props, {}, import("react").Component<{}, {}, any>> | ReactTestRendererJSON | ReactTestRendererJSON[] | null, opts?: jest.Options | undefined) => void;
 declare const makeArrayKeys: (n: number) => number[];
-declare const keyMap: {
-    readonly UpArrow: 38;
-    readonly DownArrow: 40;
-    readonly RightArrow: 39;
-    readonly LeftArrow: 37;
-    readonly Enter: 13;
-    readonly Tab: 9;
-    readonly Space: 32;
-    readonly Escape: 27;
-    readonly End: 35;
-    readonly Home: 36;
-    readonly D: 68;
-    readonly E: 69;
-    readonly P: 80;
-    readonly Z: 90;
-    readonly 1: 49;
-};
-declare type Keys = keyof typeof keyMap;
-declare type MappedKeys = `press${Keys}`;
-declare type KeyboardAccumulatorType = Record<MappedKeys, () => void>;
-declare const keyboard: KeyboardAccumulatorType;
-declare type KeydownAccumulatorType = Record<MappedKeys, (wrapper: ReactWrapper<any>, options?: {
-    shiftKey: boolean;
-}) => void>;
+declare const keyboard: Record<string, () => void>;
 declare const simulate: {
-    keydown: KeydownAccumulatorType;
+    keydown: Record<string, (target: ReactWrapper<any>, { shiftKey }?: {
+        shiftKey: boolean;
+    } | undefined) => void>;
 };
 declare const listFrom: (wrapper: ReactWrapper) => ReactWrapper<import("enzyme").HTMLAttributes, any, import("react").Component<{}, {}, any>>;
 declare const childrenFrom: (node: ReactWrapper) => ReactWrapper<any, any, import("react").Component<{}, {}, any>>;

package/lib/__spec_helper__/test-utils.js

@@ -50,30 +50,16 @@ exports.makeArrayKeys = makeArrayKeys;
 
 const dispatchKeyPress = code => {
   const ev = new KeyboardEvent("keydown", {
-    which: code
+    key: code
   });
   document.dispatchEvent(ev);
 };
 
-const keyMap = {
-  UpArrow: 38,
-  DownArrow: 40,
-  RightArrow: 39,
-  LeftArrow: 37,
-  Enter: 13,
-  Tab: 9,
-  Space: 32,
-  Escape: 27,
-  End: 35,
-  Home: 36,
-  D: 68,
-  E: 69,
-  P: 80,
-  Z: 90,
-  1: 49
-};
-const keyboard = Object.keys(keyMap).reduce((acc, key) => {
-  acc[`press${key}`] = () => dispatchKeyPress(keyMap[key]);
+const keys = ["ArrowUp", "ArrowDown", "ArrowRight", "ArrowLeft", "Enter", "Tab", " ", "Escape", "End", "Home", "D", "E", "P", "Z", "1"];
+const keyboard = keys.reduce((acc, key) => {
+  const methodName = `press${key === " " ? "Space" : key}`;
+
+  acc[methodName] = () => dispatchKeyPress(key);
 
   return acc;
 }, {}); // Build an object of Enzyme simulate helpers
@@ -81,16 +67,17 @@ const keyboard = Object.keys(keyMap).reduce((acc, key) => {
 // e.g. simulate.keydown.pressEscape(target)
 
 exports.keyboard = keyboard;
-const keydown = Object.keys(keyMap).reduce((acc, key) => {
-  acc[`press${key}`] = (target, {
+const keydown = keys.reduce((acc, key) => {
+  const methodName = `press${key === " " ? "Space" : key}`;
+
+  acc[methodName] = (target, {
     shiftKey
   } = {
     shiftKey: false
   }) => {
     target.simulate("keydown", {
       shiftKey,
-      key,
-      which: keyMap[key]
+      key
     });
   };
 
@@ -146,7 +133,7 @@ const assertCorrectTraversal = method => expect => ({
   expect(arraysEqual(validIndexes, indexesThatWereSelected)).toBeTruthy();
 };
 
-const assertKeyboardTraversal = assertCorrectTraversal(() => keyboard.pressDownArrow)(expect);
+const assertKeyboardTraversal = assertCorrectTraversal(() => keyboard.pressArrowDown)(expect);
 exports.assertKeyboardTraversal = assertKeyboardTraversal;
 const assertHoverTraversal = assertCorrectTraversal(wrapper => hoverList(wrapper))(expect);
 exports.assertHoverTraversal = assertHoverTraversal;

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -92,8 +92,8 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       e.preventDefault();
       e.stopPropagation();
       setFocusIndex(items.length - 1);
-    } else if (_events.default.isAlphabetKey(e)) {
-      // A-Za-z: focus the next item on the list that starts with the pressed key
+    } else if (e.key.length === 1) {
+      // any printable character: focus the next item on the list that starts with that character
       // selection should wrap to the start of the list
       e.stopPropagation();
       let firstMatch;