carbon-react 107.1.3 → 107.1.6

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;

package/lib/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/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.js

@@ -13,7 +13,6 @@ var _anchorNavigationItem = _interopRequireDefault(require("./anchor-navigation-
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable react/no-unused-prop-types */
 const AnchorNavigationItem = /*#__PURE__*/_react.default.forwardRef(({
   children,
   onKeyDown,
@@ -33,26 +32,20 @@ const AnchorNavigationItem = /*#__PURE__*/_react.default.forwardRef(({
 }, children)));
 
 AnchorNavigationItem.propTypes = {
-  children: _propTypes.default.node,
-
-  /** OnKeyDown handler */
-  onKeyDown: _propTypes.default.func,
-
-  /** onClick handler */
-  onClick: _propTypes.default.func,
-
-  /** href to be passed to the anchor element, can be linked with id passed to the scrollable section */
-  href: _propTypes.default.string,
-
-  /** tabIndex passed to the anchor element */
-  tabIndex: _propTypes.default.number,
-
-  /** Indicates if component is selected */
-  isSelected: _propTypes.default.bool,
-
-  /** Reference to the section html element meant to be shown   */
-  target: _propTypes.default.shape({
-    current: _propTypes.default.instanceOf(Element)
+  "children": _propTypes.default.node,
+  "href": _propTypes.default.string,
+  "isSelected": _propTypes.default.bool,
+  "onClick": _propTypes.default.func,
+  "onKeyDown": _propTypes.default.func,
+  "tabIndex": _propTypes.default.number,
+  "target": _propTypes.default.shape({
+    "current": _propTypes.default.oneOfType([_propTypes.default.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/lib/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/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -5,16 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 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; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const StyledNavigationItem = _styledComponents.default.li`
   width: 100%;
 
@@ -46,8 +42,5 @@ const StyledNavigationItem = _styledComponents.default.li`
       `}
   }
 `;
-StyledNavigationItem.propTypes = {
-  isSelected: _propTypes.default.bool
-};
 var _default = StyledNavigationItem;
 exports.default = _default;

package/lib/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/lib/components/anchor-navigation/anchor-navigation.component.js

@@ -9,10 +9,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _throttle = _interopRequireDefault(require("lodash/throttle"));
-
 var _reactIs = require("react-is");
 
+var _invariant = _interopRequireDefault(require("invariant"));
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _anchorNavigation = require("./anchor-navigation.style");
@@ -32,45 +34,57 @@ const AnchorNavigation = ({
   children,
   stickyNavigation
 }) => {
+  (0, _invariant.default)((0, _reactIs.isFragment)(stickyNavigation), "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.");
+  const hasCorrectItemStructure = (0, _react.useMemo)(() => {
+    const incorrectChild = _react.default.Children.toArray(stickyNavigation.props.children).find(child => {
+      return ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== _anchorNavigationItem.default.displayName;
+    });
+
+    return !incorrectChild;
+  }, [stickyNavigation]);
+  (0, _invariant.default)(hasCorrectItemStructure, `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${_anchorNavigationItem.default.displayName}\``);
   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__*/_react.default.createRef()));
-  const contentRef = (0, _react.useRef)();
-  const navigationRef = (0, _react.useRef)();
+  }, () => /*#__PURE__*/(0, _react.createRef)()));
+  const contentRef = (0, _react.useRef)(null);
+  const navigationRef = (0, _react.useRef)(null);
   const isUserScroll = (0, _react.useRef)(true);
   const isUserScrollTimer = (0, _react.useRef)();
   const setSelectedAnchorBasedOnScroll = (0, _react.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 = (0, _react.useCallback)((0, _throttle.default)(() => {
+  const scrollHandler = (0, _react.useMemo)(() => (0, _throttle.default)(() => {
     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]);
   (0, _react.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);
 
@@ -81,46 +95,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 (_events.default.isUpKey(event)) {
-      focusNavItem(event, index - 1);
+      focusNavItem(index - 1);
     } else if (_events.default.isDownKey(event)) {
-      focusNavItem(event, index + 1);
+      focusNavItem(index + 1);
     } else if (_events.default.isEnterKey(event) || _events.default.isSpaceKey(event)) {
-      handleClick(event, index);
+      scrollToSection(index);
     }
   };
 
@@ -133,45 +146,16 @@ const AnchorNavigation = ({
   }, _react.default.Children.map(stickyNavigation.props.children, (child, index) => /*#__PURE__*/_react.default.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.default.createElement(_anchorNavigation.StyledContent, null, children));
 };
 
 AnchorNavigation.propTypes = {
-  children: _propTypes.default.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 (!(0, _reactIs.isFragment)(prop)) {
-      errorsList.push(`Prop ${propName} container supplied to ${componentName} should be a React.Fragment.`);
-    }
-
-    let isAnyChildIncorrect = false;
-
-    _react.default.Children.forEach(prop.props.children, child => {
-      if (_anchorNavigationItem.default.displayName !== child.type.displayName) {
-        isAnyChildIncorrect = true;
-      }
-    });
-
-    if (isAnyChildIncorrect) {
-      errorsList.push(`Prop ${propName} container supplied to ${componentName} only accepts children of type ${_anchorNavigationItem.default.displayName}.`);
-    }
-
-    if (errorsList.length) {
-      error = new Error(errorsList.join(" "));
-    }
-
-    return error;
-  }
+  "children": _propTypes.default.node,
+  "stickyNavigation": _propTypes.default.node
 };
+AnchorNavigation.displayName = "AnchorNavigation";
 var _default = AnchorNavigation;
 exports.default = _default;

package/lib/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 };