carbon-react 107.1.4 → 107.1.7

package/esm/__spec_helper__/test-utils.js

@@ -27,46 +27,33 @@ const makeArrayKeys = n => [...Array(n).keys()];
 
 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
 // e.g. simulate.keydown.pressTab(target, { shiftKey: true })
 // e.g. simulate.keydown.pressEscape(target)
 
-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
     });
   };
 
@@ -112,7 +99,7 @@ const assertCorrectTraversal = method => expect => ({
   expect(arraysEqual(validIndexes, indexesThatWereSelected)).toBeTruthy();
 };
 
-const assertKeyboardTraversal = assertCorrectTraversal(() => keyboard.pressDownArrow)(expect);
+const assertKeyboardTraversal = assertCorrectTraversal(() => keyboard.pressArrowDown)(expect);
 const assertHoverTraversal = assertCorrectTraversal(wrapper => hoverList(wrapper))(expect);
 const carbonThemesJestTable = carbonThemeList.map(theme => [theme.name, theme]);
 const marginProps = [["m", "margin"], ["ml", "marginLeft"], ["mr", "marginRight"], ["mt", "marginTop"], ["mb", "marginBottom"], ["mx", "marginLeft"], ["mx", "marginRight"], ["my", "marginTop"], ["my", "marginBottom"]];

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

@@ -70,8 +70,8 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       e.preventDefault();
       e.stopPropagation();
       setFocusIndex(items.length - 1);
-    } else if (Events.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;

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface AnchorNavigationItemProps {
+    /** Reference to the section html element meant to be shown   */
+    target?: React.RefObject<HTMLElement>;
+    /** href to be passed to the anchor element, can be linked with id passed to the scrollable section */
+    href?: string;
+    /** Indicates if component is selected */
+    isSelected?: boolean;
+    /** onClick handler */
+    onClick?: (ev: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** OnKeyDown handler */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLAnchorElement>) => void;
+    /** tabIndex passed to the anchor element */
+    tabIndex?: number;
+    /** Children elements */
+    children?: React.ReactNode;
+}
+declare const AnchorNavigationItem: React.ForwardRefExoticComponent<AnchorNavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export default AnchorNavigationItem;

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unused-prop-types */
 import React from "react";
 import PropTypes from "prop-types";
 import StyledNavigationItem from "./anchor-navigation-item.style";
@@ -20,26 +19,20 @@ const AnchorNavigationItem = /*#__PURE__*/React.forwardRef(({
   "data-element": "anchor-navigation-item"
 }, children)));
 AnchorNavigationItem.propTypes = {
-  children: PropTypes.node,
-
-  /** OnKeyDown handler */
-  onKeyDown: PropTypes.func,
-
-  /** onClick handler */
-  onClick: PropTypes.func,
-
-  /** href to be passed to the anchor element, can be linked with id passed to the scrollable section */
-  href: PropTypes.string,
-
-  /** tabIndex passed to the anchor element */
-  tabIndex: PropTypes.number,
-
-  /** Indicates if component is selected */
-  isSelected: PropTypes.bool,
-
-  /** Reference to the section html element meant to be shown   */
-  target: PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
+  "children": PropTypes.node,
+  "href": PropTypes.string,
+  "isSelected": PropTypes.bool,
+  "onClick": PropTypes.func,
+  "onKeyDown": PropTypes.func,
+  "tabIndex": PropTypes.number,
+  "target": PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
+      if (props[propName] == null) {
+        return new Error("Prop '" + propName + "' is required but wasn't specified");
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }]).isRequired
   })
 };
 AnchorNavigationItem.displayName = "AnchorNavigationItem";

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.d.ts

@@ -0,0 +1,5 @@
+export interface StyledNavigationItemProps {
+    isSelected?: boolean;
+}
+declare const StyledNavigationItem: import("styled-components").StyledComponent<"li", any, StyledNavigationItemProps, never>;
+export default StyledNavigationItem;

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

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 const StyledNavigationItem = styled.li`
   width: 100%;
@@ -31,7 +30,4 @@ const StyledNavigationItem = styled.li`
       `}
   }
 `;
-StyledNavigationItem.propTypes = {
-  isSelected: PropTypes.bool
-};
 export default StyledNavigationItem;

package/esm/components/anchor-navigation/anchor-navigation.component.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface AnchorNavigationProps {
+    /** Child elements */
+    children?: React.ReactNode;
+    /** The AnchorNavigationItems components to be rendered in the sticky navigation.
+    It is important to maintain proper structure.
+    List of AnchorNavigationItems has to be wrapped in React.Fragment */
+    stickyNavigation?: React.ReactNode;
+}
+declare const AnchorNavigation: {
+    ({ children, stickyNavigation, }: AnchorNavigationProps): JSX.Element;
+    displayName: string;
+};
+export default AnchorNavigation;

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

@@ -1,7 +1,8 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, { useState, useRef, useEffect, useMemo, useCallback, createRef } from "react";
 import PropTypes from "prop-types";
-import throttle from "lodash/throttle";
 import { isFragment } from "react-is";
+import invariant from "invariant";
+import throttle from "lodash/throttle";
 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";
@@ -12,45 +13,56 @@ const AnchorNavigation = ({
   children,
   stickyNavigation
 }) => {
+  invariant(isFragment(stickyNavigation), "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.");
+  const hasCorrectItemStructure = useMemo(() => {
+    const incorrectChild = React.Children.toArray(stickyNavigation.props.children).find(child => {
+      return ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== AnchorNavigationItem.displayName;
+    });
+    return !incorrectChild;
+  }, [stickyNavigation]);
+  invariant(hasCorrectItemStructure, `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${AnchorNavigationItem.displayName}\``);
   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__*/React.createRef()));
-  const contentRef = useRef();
-  const navigationRef = useRef();
+  }, () => /*#__PURE__*/createRef()));
+  const contentRef = useRef(null);
+  const navigationRef = useRef(null);
   const isUserScroll = useRef(true);
   const isUserScrollTimer = useRef();
   const setSelectedAnchorBasedOnScroll = useCallback(() => {
-    const sectionsTopOffsets = sectionRefs.current.map(({
+    // istanbul ignore if
+    // function is called only after component is rendered, so ref cannot hold a null value
+    if (navigationRef.current === null) return;
+    const offsetsWithIndexes = sectionRefs.current.map(({
       current
-    }) => current.getBoundingClientRect().top);
+    }, index) => [index, current === null || current === void 0 ? void 0 : current.getBoundingClientRect().top]).filter(offsetWithIndex => offsetWithIndex[1] !== undefined);
     const {
       top: navTopOffset
     } = navigationRef.current.getBoundingClientRect();
-    const indexOfSmallestNegativeTopOffset = sectionsTopOffsets.reduce((currentTopIndex, sectionTopOffset, index) => {
-      if (sectionTopOffset - SECTION_VISIBILITY_OFFSET > navTopOffset) return currentTopIndex;
-      return sectionTopOffset > sectionsTopOffsets[currentTopIndex] ? index : currentTopIndex;
-    }, 0);
+    const indexOfSmallestNegativeTopOffset = offsetsWithIndexes.reduce((currentTopIndex, offsetWithIndex) => {
+      const [index, offset] = offsetWithIndex;
+      if (offset - SECTION_VISIBILITY_OFFSET > navTopOffset) return currentTopIndex;
+      return offset > offsetsWithIndexes[currentTopIndex][1] ? index : currentTopIndex;
+    }, offsetsWithIndexes[0][0]);
     setSelectedIndex(indexOfSmallestNegativeTopOffset);
   }, []);
-  const scrollHandler = useCallback(throttle(() => {
+  const scrollHandler = useMemo(() => throttle(() => {
     if (isUserScroll.current) {
       setSelectedAnchorBasedOnScroll();
     } else {
-      window.clearTimeout(isUserScrollTimer.current);
+      if (isUserScrollTimer.current !== undefined) window.clearTimeout(isUserScrollTimer.current);
       isUserScrollTimer.current = setTimeout(() => {
         isUserScroll.current = true;
       }, SCROLL_THROTTLE + 50);
     }
-  }, SCROLL_THROTTLE), []);
+  }, SCROLL_THROTTLE), [setSelectedAnchorBasedOnScroll]);
   useEffect(() => {
     window.addEventListener("scroll", scrollHandler, true);
     return () => window.removeEventListener("scroll", scrollHandler, true);
   }, [scrollHandler]);
 
   const focusFirstFocusableChild = section => {
-    // eslint-disable-next-line max-len
     const defaultFocusableSelectors = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
     const firstFocusableElement = section.querySelector(defaultFocusableSelectors);
 
@@ -61,46 +73,45 @@ const AnchorNavigation = ({
     }
   };
 
-  const scrollToSection = section => {
-    isUserScroll.current = false;
-    section.scrollIntoView({
-      block: "start",
-      inline: "nearest",
-      behavior: "smooth"
-    });
-  };
+  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
 
-  const handleClick = (event, index) => {
-    event.preventDefault();
-    const sectionToScroll = sectionRefs.current[index].current;
+    if (sectionToScroll === null) return;
     focusFirstFocusableChild(sectionToScroll); // workaround due to preventScroll focus method option on firefox not working consistently
 
     window.setTimeout(() => {
-      scrollToSection(sectionToScroll);
+      isUserScroll.current = false;
+      sectionToScroll.scrollIntoView({
+        block: "start",
+        inline: "nearest",
+        behavior: "smooth"
+      });
       setSelectedIndex(index);
     }, 10);
   };
 
-  const focusNavItem = (event, index) => {
-    event.preventDefault();
-    let newIndex = index;
+  const focusNavItem = index => {
+    var _anchorRefs$current$c;
 
-    if (index === -1) {
-      newIndex = anchorRefs.current.length - 1;
-    } else if (index === anchorRefs.current.length) {
-      newIndex = 0;
-    }
+    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();
+  };
 
-    anchorRefs.current[newIndex].current.focus();
+  const handleClick = (event, index) => {
+    event.preventDefault();
+    scrollToSection(index);
   };
 
   const handleKeyDown = (event, index) => {
+    event.preventDefault();
+
     if (Event.isUpKey(event)) {
-      focusNavItem(event, index - 1);
+      focusNavItem(index - 1);
     } else if (Event.isDownKey(event)) {
-      focusNavItem(event, index + 1);
+      focusNavItem(index + 1);
     } else if (Event.isEnterKey(event) || Event.isSpaceKey(event)) {
-      handleClick(event, index);
+      scrollToSection(index);
     }
   };
 
@@ -113,43 +124,15 @@ const AnchorNavigation = ({
   }, React.Children.map(stickyNavigation.props.children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
     isSelected: index === selectedIndex,
     tabIndex: index === selectedIndex ? 0 : -1,
-    onClick: ev => handleClick(ev, index),
-    onKeyDown: ev => handleKeyDown(ev, index),
+    onClick: event => handleClick(event, index),
+    onKeyDown: event => handleKeyDown(event, index),
     ref: anchorRefs.current[index]
   }))), /*#__PURE__*/React.createElement(StyledContent, null, children));
 };
 
 AnchorNavigation.propTypes = {
-  children: PropTypes.node,
-
-  /** The AnchorNavigationItems components to be rendered in the sticky navigation.
-  It is important to maintain proper structure.
-  List of AnchorNavigationItems has to be wrapped in React.Fragment */
-  stickyNavigation: (props, propName, componentName) => {
-    let error;
-    const prop = props[propName];
-    const errorsList = [];
-
-    if (!isFragment(prop)) {
-      errorsList.push(`Prop ${propName} container supplied to ${componentName} should be a React.Fragment.`);
-    }
-
-    let isAnyChildIncorrect = false;
-    React.Children.forEach(prop.props.children, child => {
-      if (AnchorNavigationItem.displayName !== child.type.displayName) {
-        isAnyChildIncorrect = true;
-      }
-    });
-
-    if (isAnyChildIncorrect) {
-      errorsList.push(`Prop ${propName} container supplied to ${componentName} only accepts children of type ${AnchorNavigationItem.displayName}.`);
-    }
-
-    if (errorsList.length) {
-      error = new Error(errorsList.join(" "));
-    }
-
-    return error;
-  }
+  "children": PropTypes.node,
+  "stickyNavigation": PropTypes.node
 };
+AnchorNavigation.displayName = "AnchorNavigation";
 export default AnchorNavigation;

package/esm/components/anchor-navigation/anchor-navigation.style.d.ts

@@ -0,0 +1,4 @@
+declare const StyledAnchorNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledNavigation: import("styled-components").StyledComponent<"ul", any, {}, never>;
+declare const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledAnchorNavigation, StyledNavigation, StyledContent };

package/esm/components/anchor-navigation/anchor-section-divider.component.d.ts

@@ -0,0 +1,4 @@
+declare const AnchorSectionDivider: import("styled-components").StyledComponent<"div", any, {
+    "data-element": string;
+}, "data-element">;
+export default AnchorSectionDivider;

package/esm/components/anchor-navigation/{anchor-section-divider/anchor-section-divider.style.js → anchor-section-divider.component.js}

@@ -1,8 +1,9 @@
 import styled from "styled-components";
-const StyledAnchorDivider = styled.div.attrs({
+const AnchorSectionDivider = styled.div.attrs({
   "data-element": "anchor-navigation-divider"
 })`
   background-color: var(--colorsActionMinor200);
   height: 1px;
 `;
-export default StyledAnchorDivider;
+AnchorSectionDivider.displayName = "AnchorSectionDivider";
+export default AnchorSectionDivider;

package/esm/components/anchor-navigation/index.d.ts

@@ -1,3 +1,5 @@
-export { default as AnchorNavigation } from "./anchor-navigation";
-export { default as AnchorNavigationItem } from "./anchor-navigation-item/anchor-navigation-item";
-export { default as AnchorSectionDivider } from "./anchor-section-divider/anchor-section-divider";
+export { default as AnchorNavigation } from "./anchor-navigation.component";
+export { default as AnchorNavigationItem } from "./anchor-navigation-item/anchor-navigation-item.component";
+export { default as AnchorSectionDivider } from "./anchor-section-divider.component";
+export type { AnchorNavigationProps } from "./anchor-navigation.component";
+export type { AnchorNavigationItemProps } from "./anchor-navigation-item/anchor-navigation-item.component";

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

@@ -1,3 +1,3 @@
 export { default as AnchorNavigation } from "./anchor-navigation.component";
 export { default as AnchorNavigationItem } from "./anchor-navigation-item/anchor-navigation-item.component";
-export { default as AnchorSectionDivider } from "./anchor-section-divider/anchor-section-divider.style";
+export { default as AnchorSectionDivider } from "./anchor-section-divider.component";

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

@@ -65,6 +65,16 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
     disabled
   }, ev) => {
     if (!disabled) {
+      var _inputElement$current;
+
+      const {
+        id,
+        name
+      } = inputElement === null || inputElement === void 0 ? void 0 : (_inputElement$current = inputElement.current) === null || _inputElement$current === void 0 ? void 0 : _inputElement$current.firstChild;
+      ev.target = { ...ev.target,
+        id,
+        name
+      };
       onDayClick(date, ev);
     }
   };
@@ -101,7 +111,6 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
       }, weekdaysShort[weekday]);
     },
     navbarElement: /*#__PURE__*/React.createElement(Navbar, null),
-    enableOutsideDays: true,
     fixedWeeks: true,
     initialMonth: selectedDays || undefined,
     disabledDays: getDisabledDays(minDate, maxDate),

package/esm/components/date/__internal__/weekday/weekday.style.js

@@ -6,7 +6,7 @@ const StyledWeekday = styled.div`
     height: var(--sizing500);
     min-width: var(--sizing500);
     font-weight: 800;
-    color: var(--colorsActionMinor400);
+    color: var(--colorsActionMinor500);
     text-transform: uppercase;
     font-size: 12px;
     //font: var(--typographyDatePickerCalendarDayM) font assets to be updated part of FE-4975

package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.js

@@ -124,4 +124,5 @@ FlatTableCell.propTypes = {
   /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: PropTypes.string
 };
+FlatTableCell.displayName = "FlatTableCell";
 export default FlatTableCell;

package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js

@@ -91,4 +91,5 @@ FlatTableCheckbox.propTypes = {
    */
   reportCellWidth: PropTypes.func
 };
+FlatTableCheckbox.displayName = "FlatTableCheckbox";
 export default FlatTableCheckbox;

package/esm/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -87,4 +87,5 @@ FlatTableHeader.propTypes = {
 FlatTableHeader.defaultProps = {
   align: "left"
 };
+FlatTableHeader.displayName = "FlatTableHeader";
 export default FlatTableHeader;

package/esm/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import Event from "../../../__internal__/utils/helpers/events";
 import StyledFlatTableRow from "./flat-table-row.style";
@@ -37,8 +37,8 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   const firstColumnExpandable = expandableArea === "firstColumn";
   const [stickyCellWidths, setStickyCellWidths] = useState([]);
   const [leftPositions, setLeftPositions] = useState([]);
-  const childrenArray = React.Children.toArray(children);
-  const rowHeaderIndex = childrenArray.findIndex(child => child.type === FlatTableRowHeader);
+  const childrenArray = useMemo(() => React.Children.toArray(children), [children]);
+  const rowHeaderIndex = useMemo(() => childrenArray.findIndex(child => child.type.displayName === FlatTableRowHeader.displayName), [childrenArray]);
   const themeContext = useContext(FlatTableThemeContext);
   const reportCellWidth = useCallback((width, index) => {
     const copiedArray = stickyCellWidths;

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -85,4 +85,5 @@ FlatTableRowHeader.propTypes = {
   /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: PropTypes.string
 };
+FlatTableRowHeader.displayName = "FlatTableRowHeader";
 export default FlatTableRowHeader;

package/esm/components/help/help.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledHelp;
+declare const StyledHelp: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/menu/__internal__/spec-helper/index.js

@@ -2,8 +2,7 @@ import { act } from "react-dom/test-utils";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
 const events = {
   space: {
-    key: "Space",
-    which: 32,
+    key: " ",
     preventDefault: jest.fn()
   }
 };

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -145,7 +145,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
         nextIndex = numberOfChildren - 1;
       }
 
-      if (Events.isAlphabetKey(event) || Events.isNumberKey(event)) {
+      if (event.key.length === 1) {
         event.stopPropagation();
 
         if (characterTimer.current) {

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -283,6 +283,9 @@ MultiActionButton.propTypes = {
   "color": PropTypes.string,
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
+  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__emotion_styles": PropTypes.any.isRequired
+  }), PropTypes.string, PropTypes.bool]),
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.string.isRequired
   }),

package/esm/components/numeral-date/numeral-date.component.js

@@ -100,7 +100,7 @@ const NumeralDate = ({
   });
 
   const onKeyPress = ev => {
-    const isValidKey = Events.isNumberKey(ev) || Events.isDeletingKey(ev) || Events.isTabKey(ev);
+    const isValidKey = Events.isNumberKey(ev) || Events.isTabKey(ev) || ev.key === "Delete" || ev.key === "Backspace";
 
     if (!isValidKey) {
       ev.preventDefault();

package/esm/components/search/search.component.js

@@ -10,7 +10,6 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import Icon from "../icon";
 import Textbox from "../textbox";
 import Button from "../button";
-import Events from "../../__internal__/utils/helpers/events";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Search = ({
@@ -121,7 +120,7 @@ const Search = ({
   };
 
   const handleKeyDown = ev => {
-    if (Events.isAlphabetKey(ev) || Events.isNumberKey(ev)) {
+    if (ev.key.length === 1) {
       ev.stopPropagation();
     }
 

package/lib/__internal__/input/input.component.js

@@ -238,6 +238,9 @@ Input.propTypes = {
   "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "true"]), _propTypes.default.bool]),
   "contextMenu": _propTypes.default.string,
   "crossOrigin": _propTypes.default.string,
+  "css": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__emotion_styles": _propTypes.default.any.isRequired
+  }), _propTypes.default.string, _propTypes.default.bool]),
   "dangerouslySetInnerHTML": _propTypes.default.shape({
     "__html": _propTypes.default.string.isRequired
   }),

package/lib/__internal__/label/icon-wrapper.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledIconWrapper;

package/lib/__internal__/label/icon-wrapper.style.js

@@ -13,7 +13,7 @@ var _help = _interopRequireDefault(require("../../components/help/help.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const IconWrapperStyle = _styledComponents.default.div`
+const StyledIconWrapper = _styledComponents.default.div`
   display: inline-block;
   margin: 0;
   margin-left: 4px;
@@ -32,5 +32,5 @@ const IconWrapperStyle = _styledComponents.default.div`
     position: static;
   }
 `;
-var _default = IconWrapperStyle;
+var _default = StyledIconWrapper;
 exports.default = _default;

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

@@ -1 +1,2 @@
-export { default } from "./label";
+export { default } from "./label.component";
+export type { LabelProps } from "./label.component";

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { StyledLabelProps, StyledLabelContainerProps } from "./label.style";
+import { ValidationProps } from "../validations";
+import { IconType } from "../../components/icon";
+export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLabelContainerProps {
+    /** Children elements */
+    children?: React.ReactNode;
+    /** A message that the Help component will display */
+    help?: React.ReactNode;
+    /** Icon type */
+    helpIcon?: IconType;
+    /** Overrides the default tabindex of the Help component */
+    helpTabIndex?: string;
+    /** A string that represents the ID of another form element */
+    htmlFor?: string;
+    /** The unique id of the label element */
+    labelId?: string;
+    /** The unique id of the Help component tooltip, used for accessibility */
+    tooltipId?: string;
+    /** Whether to show the validation icon */
+    useValidationIcon?: boolean;
+    /** Id of the validation icon */
+    validationIconId?: string;
+}
+export declare const Label: ({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element>;
+export default _default;