@lumx/react 3.20.1-alpha.35 → 3.20.1-alpha.36

package/_internal/0ea95af1.js

@@ -0,0 +1,819 @@
+import React__default, { useState, useEffect, useMemo, Children, isValidElement, cloneElement, useRef } from 'react';
+import classNames from 'classnames';
+import get from 'lodash/get';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { m as mergeRefs } from './f0d7d6ea.js';
+import { f as forwardRef } from './8bce732e.js';
+import isEmpty from 'lodash/isEmpty';
+import { onEnterPressed, onButtonPressed } from '@lumx/core/js/utils';
+import { useDisableStateProps } from './utils/disabled/index-075b99c3.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Size } from '@lumx/core/js/constants';
+import { i as isComponent } from './78df9309.js';
+
+const INITIAL_INDEX$1 = -1;
+
+/**
+ * This custom hook provides the necessary set of functions and values to properly navigate
+ * a list using the keyboard.
+ *
+ * @param  items                    the list of items that will be navigated using the keyboard.
+ * @param  ref                      A reference to the element that is controlling the navigation.
+ * @param  onListItemSelected       callback to be executed when the ENTER key is pressed on an item.
+ * @param  onListItemNavigated      callback to be executed when the Arrow keys are pressed.
+ * @param  onEnterPressed           callback to be executed when the ENTER key is pressed.
+ * @param  onBackspacePressed       callback to be executed when the BACKSPACE key is pressed.
+ * @param  keepFocusAfterSelection  determines whether after selecting an item, the focus should be maintained on the current target or not.
+ * @param  initialIndex             where should the navigation start from. it defaults to `-1`, so the first item navigated is the item on position `0`.
+ * @param  preventTabOnEnteredValue determines whether upon TAB, if there is a value entered, the event is prevented or not.
+ * @return useKeyboardListNavigation helpers.
+ */
+const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNavigated, onEnterPressed, onBackspacePressed, keepFocusAfterSelection = false, initialIndex = INITIAL_INDEX$1, preventTabOnEnteredValue = true) => {
+  const [activeItemIndex, setActiveItemIndex] = useState(initialIndex);
+
+  /**
+   * This function calculates the next index in the list to be highlighted
+   * @param key - key code pressed
+   * @return next active index
+   */
+  const calculateActiveIndex = key => {
+    switch (key) {
+      case 'ArrowDown':
+        return activeItemIndex + 1 < items.length ? activeItemIndex + 1 : 0;
+      case 'ArrowUp':
+        return activeItemIndex - 1 >= 0 ? activeItemIndex - 1 : items.length - 1;
+      default:
+        return initialIndex;
+    }
+  };
+
+  /**
+   * Resets the active index to the initial state
+   */
+  const resetActiveIndex = () => {
+    setActiveItemIndex(initialIndex);
+  };
+
+  /**
+   * Prevents the default event and stops the propagation of said event
+   * @param evt - key pressed event
+   */
+  const preventDefaultAndStopPropagation = evt => {
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+
+  /**
+   * Handles navigation with the arrows using the keyboard
+   * @param evt - key pressed event
+   */
+  const onArrowPressed = evt => {
+    const {
+      key
+    } = evt;
+    const nextActiveIndex = calculateActiveIndex(key);
+    setActiveItemIndex(nextActiveIndex);
+    preventDefaultAndStopPropagation(evt);
+    if (onListItemNavigated) {
+      const selectedItem = items[nextActiveIndex];
+      onListItemNavigated(selectedItem);
+    }
+  };
+
+  /**
+   * Handles the event when the backspace key is pressed
+   * @param evt - key pressed event
+   */
+  const onBackspaceKeyPressed = evt => {
+    if (onBackspacePressed) {
+      onBackspacePressed(evt);
+    }
+  };
+
+  /**
+   * Handles when the ENTER key is pressed
+   * @param evt - key pressed event
+   */
+  const onEnterKeyPressed = evt => {
+    if (!onListItemSelected) {
+      return;
+    }
+    preventDefaultAndStopPropagation(evt);
+    if (!keepFocusAfterSelection) {
+      evt.currentTarget.blur();
+    }
+    const selectedItem = items[activeItemIndex];
+    if (selectedItem) {
+      onListItemSelected(selectedItem);
+      resetActiveIndex();
+    } else if (activeItemIndex === initialIndex && onEnterPressed) {
+      const value = get(evt, 'target.value');
+      onEnterPressed(value);
+      resetActiveIndex();
+    }
+  };
+
+  /**
+   * Handles when the TAB key is pressed
+   * @param evt - key pressed event
+   */
+  const onTabKeyPressed = evt => {
+    const value = get(evt, 'target.value');
+    if (preventTabOnEnteredValue && value && value.length > 0) {
+      preventDefaultAndStopPropagation(evt);
+    }
+  };
+
+  /**
+   * In order to make it easier in the future to add new events depending on the key
+   * a map was created to add these handlers. In the future, if there is another event
+   * that we need to manage depending on a specific key, we just need to add the key code
+   * here, and as a value, the handler for said key.
+   */
+  const eventsForKeyPressed = {
+    ArrowDown: onArrowPressed,
+    Tab: onTabKeyPressed,
+    ArrowUp: onArrowPressed,
+    Enter: onEnterKeyPressed,
+    Backspace: onBackspaceKeyPressed
+  };
+
+  /**
+   * Calculates the next active item index depending on the key pressed.
+   * If the key pressed was ENTER, the function executes the callback `onListItemSelected`
+   * and resets the active index, since an item was selected.
+   * @param evt - key pressed or key down event
+   */
+  const onKeyboardNavigation = evt => {
+    const {
+      key
+    } = evt;
+    const handler = eventsForKeyPressed[key];
+    if (handler) {
+      handler(evt);
+    }
+  };
+  useEffect(() => {
+    const {
+      current: currentElement
+    } = ref;
+    if (!currentElement) {
+      return undefined;
+    }
+    currentElement.addEventListener('focus', resetActiveIndex);
+    currentElement.addEventListener('keydown', onKeyboardNavigation);
+    return () => {
+      currentElement.removeEventListener('focus', resetActiveIndex);
+      currentElement.removeEventListener('keydown', onKeyboardNavigation);
+    };
+  });
+  return {
+    activeItemIndex,
+    onKeyboardNavigation,
+    resetActiveIndex,
+    setActiveItemIndex
+  };
+};
+
+/**
+ * Render link with default <a> HTML component or a custom one provided by `linkAs`.
+ *
+ * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.
+ *
+ * @param linkAs    Custom link component.
+ * @param children  Link children.
+ * @return          A link.
+ */
+const renderLink = ({
+  linkAs,
+  ...forwardedProps
+}, ...children) => /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'ListItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$1 = {
+  size: Size.regular
+};
+
+/**
+ * Check if the list item is clickable.
+ * @return `true` if the list item is clickable; `false` otherwise.
+ */
+function isClickable({
+  linkProps,
+  onItemSelected
+}) {
+  return !isEmpty(linkProps?.href) || !!onItemSelected;
+}
+
+/**
+ * ListItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListItem = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    after,
+    before,
+    children,
+    className,
+    isHighlighted,
+    isSelected,
+    linkAs,
+    linkProps = {},
+    linkRef,
+    onItemSelected,
+    size = DEFAULT_PROPS$1.size,
+    ...forwardedProps
+  } = otherProps;
+  const role = linkAs || linkProps.href ? 'link' : 'button';
+  const onKeyDown = useMemo(() => {
+    if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
+    if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected);
+    return undefined;
+  }, [role, onItemSelected]);
+  const content = /*#__PURE__*/jsxs(Fragment, {
+    children: [before && /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$1}__before`,
+      children: before
+    }), /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$1}__content`,
+      children: children
+    }), after && /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$1}__after`,
+      children: after
+    })]
+  });
+  return /*#__PURE__*/jsx("li", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$1,
+      size
+    })),
+    children: isClickable({
+      linkProps,
+      onItemSelected
+    }) ? (/* Clickable list item */
+    renderLink({
+      linkAs,
+      tabIndex: !disabledStateProps.disabled ? 0 : undefined,
+      role,
+      'aria-disabled': isAnyDisabled,
+      ...linkProps,
+      href: isAnyDisabled ? undefined : linkProps.href,
+      className: classNames(handleBasicClasses({
+        prefix: `${CLASSNAME$1}__link`,
+        isHighlighted,
+        isSelected,
+        isDisabled: isAnyDisabled
+      })),
+      onClick: isAnyDisabled ? undefined : onItemSelected,
+      onKeyDown: isAnyDisabled ? undefined : onKeyDown,
+      ref: linkRef
+    }, content)) :
+    /*#__PURE__*/
+    /* Non clickable list item */
+    jsx("div", {
+      className: `${CLASSNAME$1}__wrapper`,
+      children: content
+    })
+  });
+});
+ListItem.displayName = COMPONENT_NAME$1;
+ListItem.className = CLASSNAME$1;
+ListItem.defaultProps = DEFAULT_PROPS$1;
+
+var reactIs = {exports: {}};
+
+var reactIs_production_min = {};
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_production_min;
+
+function requireReactIs_production_min () {
+	if (hasRequiredReactIs_production_min) return reactIs_production_min;
+	hasRequiredReactIs_production_min = 1;
+var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
+	function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}reactIs_production_min.ContextConsumer=h;reactIs_production_min.ContextProvider=g;reactIs_production_min.Element=b;reactIs_production_min.ForwardRef=l;reactIs_production_min.Fragment=d;reactIs_production_min.Lazy=q;reactIs_production_min.Memo=p;reactIs_production_min.Portal=c;reactIs_production_min.Profiler=f;reactIs_production_min.StrictMode=e;reactIs_production_min.Suspense=m;
+	reactIs_production_min.SuspenseList=n;reactIs_production_min.isAsyncMode=function(){return !1};reactIs_production_min.isConcurrentMode=function(){return !1};reactIs_production_min.isContextConsumer=function(a){return v(a)===h};reactIs_production_min.isContextProvider=function(a){return v(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return v(a)===l};reactIs_production_min.isFragment=function(a){return v(a)===d};reactIs_production_min.isLazy=function(a){return v(a)===q};reactIs_production_min.isMemo=function(a){return v(a)===p};
+	reactIs_production_min.isPortal=function(a){return v(a)===c};reactIs_production_min.isProfiler=function(a){return v(a)===f};reactIs_production_min.isStrictMode=function(a){return v(a)===e};reactIs_production_min.isSuspense=function(a){return v(a)===m};reactIs_production_min.isSuspenseList=function(a){return v(a)===n};
+	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};reactIs_production_min.typeOf=v;
+	return reactIs_production_min;
+}
+
+var reactIs_development = {};
+
+/**
+ * @license React
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_development;
+
+function requireReactIs_development () {
+	if (hasRequiredReactIs_development) return reactIs_development;
+	hasRequiredReactIs_development = 1;
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	// ATTENTION
+	// When adding new symbols to this file,
+	// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+	// The Symbol used to tag the ReactElement-like types.
+	var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+	var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+	var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+	var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+	var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+	var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+	var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+	var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+	var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+	var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+	var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+	var REACT_MEMO_TYPE = Symbol.for('react.memo');
+	var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+	var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+
+	// -----------------------------------------------------------------------------
+
+	var enableScopeAPI = false; // Experimental Create Event Handle API.
+	var enableCacheElement = false;
+	var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+	var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+	// stuff. Intended to enable React core members to more easily debug scheduling
+	// issues in DEV builds.
+
+	var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+	var REACT_MODULE_REFERENCE;
+
+	{
+	  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+	}
+
+	function isValidElementType(type) {
+	  if (typeof type === 'string' || typeof type === 'function') {
+	    return true;
+	  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+	  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
+	    return true;
+	  }
+
+	  if (typeof type === 'object' && type !== null) {
+	    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+	    // types supported by any Flight configuration anywhere since
+	    // we don't know which Flight build this will end up being used
+	    // with.
+	    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+	      return true;
+	    }
+	  }
+
+	  return false;
+	}
+
+	function typeOf(object) {
+	  if (typeof object === 'object' && object !== null) {
+	    var $$typeof = object.$$typeof;
+
+	    switch ($$typeof) {
+	      case REACT_ELEMENT_TYPE:
+	        var type = object.type;
+
+	        switch (type) {
+	          case REACT_FRAGMENT_TYPE:
+	          case REACT_PROFILER_TYPE:
+	          case REACT_STRICT_MODE_TYPE:
+	          case REACT_SUSPENSE_TYPE:
+	          case REACT_SUSPENSE_LIST_TYPE:
+	            return type;
+
+	          default:
+	            var $$typeofType = type && type.$$typeof;
+
+	            switch ($$typeofType) {
+	              case REACT_SERVER_CONTEXT_TYPE:
+	              case REACT_CONTEXT_TYPE:
+	              case REACT_FORWARD_REF_TYPE:
+	              case REACT_LAZY_TYPE:
+	              case REACT_MEMO_TYPE:
+	              case REACT_PROVIDER_TYPE:
+	                return $$typeofType;
+
+	              default:
+	                return $$typeof;
+	            }
+
+	        }
+
+	      case REACT_PORTAL_TYPE:
+	        return $$typeof;
+	    }
+	  }
+
+	  return undefined;
+	}
+	var ContextConsumer = REACT_CONTEXT_TYPE;
+	var ContextProvider = REACT_PROVIDER_TYPE;
+	var Element = REACT_ELEMENT_TYPE;
+	var ForwardRef = REACT_FORWARD_REF_TYPE;
+	var Fragment = REACT_FRAGMENT_TYPE;
+	var Lazy = REACT_LAZY_TYPE;
+	var Memo = REACT_MEMO_TYPE;
+	var Portal = REACT_PORTAL_TYPE;
+	var Profiler = REACT_PROFILER_TYPE;
+	var StrictMode = REACT_STRICT_MODE_TYPE;
+	var Suspense = REACT_SUSPENSE_TYPE;
+	var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+	var hasWarnedAboutDeprecatedIsAsyncMode = false;
+	var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
+
+	function isAsyncMode(object) {
+	  {
+	    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+	      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+	      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+	    }
+	  }
+
+	  return false;
+	}
+	function isConcurrentMode(object) {
+	  {
+	    if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
+	      hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
+
+	      console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+	    }
+	  }
+
+	  return false;
+	}
+	function isContextConsumer(object) {
+	  return typeOf(object) === REACT_CONTEXT_TYPE;
+	}
+	function isContextProvider(object) {
+	  return typeOf(object) === REACT_PROVIDER_TYPE;
+	}
+	function isElement(object) {
+	  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+	}
+	function isForwardRef(object) {
+	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	}
+	function isFragment(object) {
+	  return typeOf(object) === REACT_FRAGMENT_TYPE;
+	}
+	function isLazy(object) {
+	  return typeOf(object) === REACT_LAZY_TYPE;
+	}
+	function isMemo(object) {
+	  return typeOf(object) === REACT_MEMO_TYPE;
+	}
+	function isPortal(object) {
+	  return typeOf(object) === REACT_PORTAL_TYPE;
+	}
+	function isProfiler(object) {
+	  return typeOf(object) === REACT_PROFILER_TYPE;
+	}
+	function isStrictMode(object) {
+	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	}
+	function isSuspense(object) {
+	  return typeOf(object) === REACT_SUSPENSE_TYPE;
+	}
+	function isSuspenseList(object) {
+	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+	}
+
+	reactIs_development.ContextConsumer = ContextConsumer;
+	reactIs_development.ContextProvider = ContextProvider;
+	reactIs_development.Element = Element;
+	reactIs_development.ForwardRef = ForwardRef;
+	reactIs_development.Fragment = Fragment;
+	reactIs_development.Lazy = Lazy;
+	reactIs_development.Memo = Memo;
+	reactIs_development.Portal = Portal;
+	reactIs_development.Profiler = Profiler;
+	reactIs_development.StrictMode = StrictMode;
+	reactIs_development.Suspense = Suspense;
+	reactIs_development.SuspenseList = SuspenseList;
+	reactIs_development.isAsyncMode = isAsyncMode;
+	reactIs_development.isConcurrentMode = isConcurrentMode;
+	reactIs_development.isContextConsumer = isContextConsumer;
+	reactIs_development.isContextProvider = isContextProvider;
+	reactIs_development.isElement = isElement;
+	reactIs_development.isForwardRef = isForwardRef;
+	reactIs_development.isFragment = isFragment;
+	reactIs_development.isLazy = isLazy;
+	reactIs_development.isMemo = isMemo;
+	reactIs_development.isPortal = isPortal;
+	reactIs_development.isProfiler = isProfiler;
+	reactIs_development.isStrictMode = isStrictMode;
+	reactIs_development.isSuspense = isSuspense;
+	reactIs_development.isSuspenseList = isSuspenseList;
+	reactIs_development.isValidElementType = isValidElementType;
+	reactIs_development.typeOf = typeOf;
+	  })();
+	}
+	return reactIs_development;
+}
+
+var hasRequiredReactIs;
+
+function requireReactIs () {
+	if (hasRequiredReactIs) return reactIs.exports;
+	hasRequiredReactIs = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  reactIs.exports = requireReactIs_production_min();
+	} else {
+	  reactIs.exports = requireReactIs_development();
+	}
+	return reactIs.exports;
+}
+
+var reactIsExports = requireReactIs();
+
+/**
+ * Flatten list of react nodes removing fragments and adding keys.
+ * based on: https://github.com/grrowl/react-keyed-flatten-children/blob/5d421644a449765ddd62b659946196b4b5d7b135/index.ts
+ *
+ * @param  children React nodes to flatten.
+ * @return Flattened react nodes.
+ * @deprecated This function was used to develop keyboard navigation in the List component,
+ *    but we will replace this with a better method that does not require to hack the children inspection
+ *
+ * TODO: remove List keyboard navigation once we have provided alternative component (Menu, Combobox, etc.),
+ *       remove this function and then remove react-is from the dependencies
+ */
+function flattenChildren(children) {
+  function recur(nodes, keys = []) {
+    return Children.toArray(nodes).reduce((acc, node, index) => {
+      const nodeKeys = keys.concat(get(node, 'key') ?? index);
+      if (reactIsExports.isFragment(node)) {
+        acc.push(...recur(node.props.children, nodeKeys));
+      } else if (/*#__PURE__*/isValidElement(node)) {
+        acc.push(/*#__PURE__*/cloneElement(node, {
+          key: nodeKeys.join('.')
+        }));
+      } else if (typeof node === 'string' || typeof node === 'number') {
+        acc.push(node);
+      }
+      return acc;
+    }, []);
+  }
+  return recur(children);
+}
+
+const INITIAL_INDEX = -1;
+function onKeyboardFocus(props, handler) {
+  let isMouseDown = false;
+  return {
+    onFocus(evt) {
+      props.onFocus?.(evt);
+      if (!isMouseDown) {
+        handler(evt);
+      }
+    },
+    onMouseDown(evt) {
+      props.onMouseDown?.(evt);
+      isMouseDown = true;
+    },
+    onMouseUp(evt) {
+      props.onMouseUp?.(evt);
+      isMouseDown = false;
+    }
+  };
+}
+const isNavigableItem = node => {
+  return isComponent('ListItem')(node) && isClickable(node.props) && !node.props.isDisabled;
+};
+
+/**
+ * This custom hook detects clickable list item in a list and make them navigable with the keyboard.
+ *
+ * @param  options See {@link Options}
+ * @return See {@link Output}
+ */
+const useInteractiveList = options => {
+  const {
+    ref,
+    onListItemSelected,
+    onListItemNavigated
+  } = options;
+  const items = useMemo(() => flattenChildren(options.items), [options.items]);
+  const [activeItemIndex, setActiveItemIndex] = useState(INITIAL_INDEX);
+
+  // Attach listeners to the list.
+  useEffect(() => {
+    const {
+      current: listElement
+    } = ref;
+    if (!listElement) {
+      return undefined;
+    }
+
+    /**
+     * This function calculates the next index in the list to be active
+     * @param  index current index
+     * @param  code  key code pressed
+     * @return next index
+     */
+    const getNextIndex = (index, key) => {
+      switch (key) {
+        case 'ArrowDown':
+          return index + 1 < items.length ? index + 1 : 0;
+        case 'ArrowUp':
+          return index - 1 >= 0 ? index - 1 : items.length - 1;
+        default:
+          return INITIAL_INDEX;
+      }
+    };
+
+    /**
+     * Resets the active index to the initial state
+     */
+    const resetActiveIndex = () => {
+      setActiveItemIndex(INITIAL_INDEX);
+    };
+
+    /**
+     * Handles navigation with the arrows using the keyboard
+     * @param evt Key event
+     */
+    const onArrowPressed = evt => {
+      const {
+        key
+      } = evt;
+      if (key !== 'ArrowUp' && key !== 'ArrowDown') {
+        return;
+      }
+      let nextIndex = activeItemIndex;
+      let iterations = 0;
+
+      // Move to next navigable item.
+      do {
+        nextIndex = getNextIndex(nextIndex, key);
+        iterations += 1;
+      } while (nextIndex !== INITIAL_INDEX && nextIndex !== activeItemIndex && !isNavigableItem(items[nextIndex]) && iterations < items.length);
+      setActiveItemIndex(nextIndex);
+      evt.preventDefault();
+      evt.stopPropagation();
+      onListItemNavigated?.(nextIndex, get(items, [nextIndex, 'key']));
+    };
+
+    /**
+     * Reset active list item index when focusing outside the list.
+     * @param evt Focus out event
+     */
+    const onFocusOut = evt => {
+      if (!evt.relatedTarget || !listElement.contains(evt.relatedTarget)) {
+        resetActiveIndex();
+      }
+    };
+    listElement.addEventListener('focusout', onFocusOut);
+    listElement.addEventListener('keydown', onArrowPressed);
+    return () => {
+      listElement.removeEventListener('focusout', onFocusOut);
+      listElement.removeEventListener('keydown', onArrowPressed);
+    };
+  }, [ref, activeItemIndex, items, onListItemNavigated]);
+  return useMemo(() => {
+    let hasClickableItem = false;
+    const transformedItems = items.map((item, index) => {
+      // Ignore if list not clickable or item is not a simple list item.
+      if (!isNavigableItem(item)) {
+        return item;
+      }
+      hasClickableItem = true;
+      const isHighlighted = index === activeItemIndex;
+
+      // Clone list item: inject ref, add tab index and active state.
+      return /*#__PURE__*/cloneElement(item, {
+        ...item.props,
+        isHighlighted: item.props.isHighlighted ?? isHighlighted,
+        linkRef: mergeRefs(item.props.linkRef, element => {
+          if (isHighlighted) {
+            element?.focus();
+          }
+        }),
+        onItemSelected(evt) {
+          item.props.onItemSelected?.();
+          onListItemSelected?.(index, item.key, evt);
+        },
+        ...onKeyboardFocus(item.props, () => {
+          setActiveItemIndex(index);
+        })
+      });
+    });
+    return {
+      items: transformedItems,
+      hasClickableItem
+    };
+  }, [items, activeItemIndex, onListItemSelected]);
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'List';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  tabIndex: -1
+};
+
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+/**
+ * List component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InternalList = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    isClickable,
+    itemPadding,
+    onListItemSelected,
+    tabIndex = DEFAULT_PROPS.tabIndex,
+    ...forwardedProps
+  } = props;
+  const listElementRef = useRef(null);
+  const {
+    items,
+    hasClickableItem
+  } = useInteractiveList({
+    items: children,
+    ref: listElementRef,
+    onListItemSelected
+  });
+  const clickable = hasClickableItem || isClickable;
+  return /*#__PURE__*/jsx("ul", {
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      itemPadding: itemPadding ?? (clickable ? Size.big : undefined)
+    })),
+    tabIndex: tabIndex,
+    ref: mergeRefs(ref, listElementRef),
+    children: items
+  });
+});
+InternalList.displayName = COMPONENT_NAME;
+InternalList.className = CLASSNAME;
+InternalList.defaultProps = DEFAULT_PROPS;
+const List = Object.assign(InternalList, {
+  useKeyboardListNavigation
+});
+
+export { List as L, ListItem as a, isClickable as i };