@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

package/_internal/List-54237e0e.js

@@ -1,793 +0,0 @@
-import React__default, { useState, useEffect, useMemo, Children, isValidElement, cloneElement, useRef } from 'react';
-import { f as forwardRef, c as classNames } from './forwardRef-15f62847.js';
-import get from 'lodash/get';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { m as mergeRefs } from './mergeRefs-f0d7d6ea.js';
-import isEmpty from 'lodash/isEmpty';
-import { onEnterPressed, onButtonPressed } from '@lumx/core/js/utils';
-import { u as useDisableStateProps } from './useDisableStateProps-69e16b7c.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Size } from '@lumx/core/js/constants';
-import { i as isComponent } from './isComponent-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 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;
-
-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.
- */
-
-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;
-  })();
-}
-
-if (process.env.NODE_ENV === 'production') {
-  reactIs.exports = reactIs_production_min;
-} else {
-  reactIs.exports = reactIs_development;
-}
-
-/**
- * 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 (reactIs.exports.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 };
-//# sourceMappingURL=List-54237e0e.js.map