@lumx/react 4.5.0 → 4.5.2-alpha.0

package/index.js

@@ -7,7 +7,7 @@ import { mdiAlert } from '@lumx/icons/esm/alert.js';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
 import { mdiInformation } from '@lumx/icons/esm/information.js';
-import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
+import { classNames, onEnterPressed, onEscapePressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import last from 'lodash/last.js';
 import pull from 'lodash/pull.js';
@@ -4042,6 +4042,148 @@ const skipRender = (predicate, Component) => {
   return Wrapper;
 };
 
+/**
+ * Different possible placements for the popover.
+ */
+const Placement = {
+  AUTO: 'auto',
+  AUTO_END: 'auto-end',
+  AUTO_START: 'auto-start',
+  TOP: 'top',
+  TOP_END: 'top-end',
+  TOP_START: 'top-start',
+  RIGHT: 'right',
+  RIGHT_END: 'right-end',
+  RIGHT_START: 'right-start',
+  BOTTOM: 'bottom',
+  BOTTOM_END: 'bottom-end',
+  BOTTOM_START: 'bottom-start',
+  LEFT: 'left',
+  LEFT_END: 'left-end',
+  LEFT_START: 'left-start'
+};
+
+/**
+ * Offset of the popover.
+ */
+
+/**
+ * Popover elevation index.
+ */
+
+/**
+ * Popover fit anchor width options.
+ */
+const FitAnchorWidth = {
+  MIN_WIDTH: 'minWidth'};
+/**
+ * Arrow size (in pixel).
+ */
+const ARROW_SIZE$1 = 14;
+
+/**
+ * Popover default z-index
+ */
+const POPOVER_ZINDEX = 9999;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$Y = 'Popover';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$Z = 'lumx-popover';
+const {
+  block: block$Q,
+  element: element$E
+} = bem(CLASSNAME$Z);
+
+/**
+ * Component default props (used by framework wrappers).
+ */
+const DEFAULT_PROPS$U = {
+  elevation: 3,
+  placement: Placement.AUTO,
+  focusAnchorOnClose: true,
+  usePortal: true,
+  zIndex: POPOVER_ZINDEX
+};
+
+/**
+ * Popover core UI component.
+ *
+ * Framework-specific components (Portal, ClickAwayProvider, ThemeProvider) are passed
+ * as a second argument by the React/Vue wrappers.
+ */
+const Popover$1 = (props, {
+  Portal,
+  ClickAwayProvider,
+  ThemeProvider
+}) => {
+  const {
+    as: asTag = 'div',
+    children,
+    className,
+    elevation = DEFAULT_PROPS$U.elevation,
+    hasArrow,
+    isOpen,
+    position,
+    popoverStyle,
+    arrowStyle,
+    theme,
+    // Framework-specific
+    ref,
+    arrowRef,
+    usePortal = DEFAULT_PROPS$U.usePortal,
+    clickAwayCallback,
+    clickAwayRefs,
+    unmountSentinel,
+    // Forwarded props
+    ...forwardedProps
+  } = props;
+
+  // Cast to `any` to avoid "union type too complex" error when using a dynamic tag name in JSX.
+  // This is safe because `asTag` is always a valid HTML element tag (e.g. 'div').
+  const Component = asTag;
+  const adjustedElevation = Math.min(elevation || 0, 5);
+  if (!isOpen) return null;
+  return /*#__PURE__*/jsx(Portal, {
+    enabled: usePortal,
+    children: /*#__PURE__*/jsxs(Component, {
+      ...forwardedProps,
+      ref: ref,
+      className: classnames(className, block$Q({
+        [`theme-${theme}`]: Boolean(theme),
+        [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
+        [`position-${position}`]: Boolean(position)
+      })),
+      style: popoverStyle,
+      "data-popper-placement": position,
+      children: [unmountSentinel, /*#__PURE__*/jsxs(ClickAwayProvider, {
+        callback: clickAwayCallback,
+        childrenRefs: clickAwayRefs,
+        children: [hasArrow && /*#__PURE__*/jsx("div", {
+          ref: arrowRef,
+          className: element$E('arrow'),
+          style: arrowStyle,
+          children: /*#__PURE__*/jsx("svg", {
+            viewBox: "0 0 14 14",
+            "aria-hidden": true,
+            children: /*#__PURE__*/jsx("path", {
+              d: "M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z"
+            })
+          })
+        }), /*#__PURE__*/jsx(ThemeProvider, {
+          value: theme,
+          children: children
+        })]
+      })]
+    })
+  });
+};
+
 /**
  * Helper component using useLayoutEffect to trigger a callback on before unmount.
  *
@@ -4461,7 +4603,7 @@ const computePosition$1 = async (reference, floating, config) => {
  * appears centered to the reference element.
  * @see https://floating-ui.com/docs/arrow
  */
-const arrow$3 = options => ({
+const arrow$1 = options => ({
   name: 'arrow',
   options,
   async fn(state) {
@@ -4553,7 +4695,7 @@ function getPlacementList(alignment, autoAlignment, allowedPlacements) {
  * preferred placement. Alternative to `flip`.
  * @see https://floating-ui.com/docs/autoPlacement
  */
-const autoPlacement$2 = function (options) {
+const autoPlacement$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -4647,7 +4789,7 @@ const autoPlacement$2 = function (options) {
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip$2 = function (options) {
+const flip$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -4864,7 +5006,7 @@ const offset$2 = function (options) {
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift$2 = function (options) {
+const shift$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -4944,7 +5086,7 @@ const shift$2 = function (options) {
  * width of the reference element.
  * @see https://floating-ui.com/docs/size
  */
-const size$2 = function (options) {
+const size$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -5869,14 +6011,14 @@ const offset$1 = offset$2;
  * preferred placement. Alternative to `flip`.
  * @see https://floating-ui.com/docs/autoPlacement
  */
-const autoPlacement$1 = autoPlacement$2;
+const autoPlacement = autoPlacement$1;
 
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift$1 = shift$2;
+const shift = shift$1;
 
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
@@ -5884,7 +6026,7 @@ const shift$1 = shift$2;
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip$1 = flip$2;
+const flip = flip$1;
 
 /**
  * Provides data that allows you to change the size of the floating element —
@@ -5892,14 +6034,14 @@ const flip$1 = flip$2;
  * width of the reference element.
  * @see https://floating-ui.com/docs/size
  */
-const size$1 = size$2;
+const size = size$1;
 
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
  * @see https://floating-ui.com/docs/arrow
  */
-const arrow$2 = arrow$3;
+const arrow = arrow$1;
 
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
@@ -6156,44 +6298,6 @@ function useFloating(options) {
   }), [data, update, refs, elements, floatingStyles]);
 }
 
-/**
- * Provides data to position an inner element of the floating element so that it
- * appears centered to the reference element.
- * This wraps the core `arrow` middleware to allow React refs as the element.
- * @see https://floating-ui.com/docs/arrow
- */
-const arrow$1 = options => {
-  function isRef(value) {
-    return {}.hasOwnProperty.call(value, 'current');
-  }
-  return {
-    name: 'arrow',
-    options,
-    fn(state) {
-      const {
-        element,
-        padding
-      } = typeof options === 'function' ? options(state) : options;
-      if (element && isRef(element)) {
-        if (element.current != null) {
-          return arrow$2({
-            element: element.current,
-            padding
-          }).fn(state);
-        }
-        return {};
-      }
-      if (element) {
-        return arrow$2({
-          element,
-          padding
-        }).fn(state);
-      }
-      return {};
-    }
-  };
-};
-
 /**
  * Modifies the placement by translating the floating element along the
  * specified axes.
@@ -6206,104 +6310,11 @@ const offset = (options, deps) => ({
   options: [options, deps]
 });
 
-/**
- * Optimizes the visibility of the floating element by shifting it in order to
- * keep it in view when it will overflow the clipping boundary.
- * @see https://floating-ui.com/docs/shift
- */
-const shift = (options, deps) => ({
-  ...shift$1(options),
-  options: [options, deps]
-});
+/* eslint-disable no-param-reassign */
 
 /**
- * Optimizes the visibility of the floating element by flipping the `placement`
- * in order to keep it in view when the preferred placement(s) will overflow the
- * clipping boundary. Alternative to `autoPlacement`.
- * @see https://floating-ui.com/docs/flip
- */
-const flip = (options, deps) => ({
-  ...flip$1(options),
-  options: [options, deps]
-});
-
-/**
- * Provides data that allows you to change the size of the floating element —
- * for instance, prevent it from overflowing the clipping boundary or match the
- * width of the reference element.
- * @see https://floating-ui.com/docs/size
- */
-const size = (options, deps) => ({
-  ...size$1(options),
-  options: [options, deps]
-});
-
-/**
- * Optimizes the visibility of the floating element by choosing the placement
- * that has the most space available automatically, without needing to specify a
- * preferred placement. Alternative to `flip`.
- * @see https://floating-ui.com/docs/autoPlacement
- */
-const autoPlacement = (options, deps) => ({
-  ...autoPlacement$1(options),
-  options: [options, deps]
-});
-
-/**
- * Provides data to position an inner element of the floating element so that it
- * appears centered to the reference element.
- * This wraps the core `arrow` middleware to allow React refs as the element.
- * @see https://floating-ui.com/docs/arrow
+ * Parse a Popover placement into floating-ui placement or auto-placement config.
  */
-const arrow = (options, deps) => ({
-  ...arrow$1(options),
-  options: [options, deps]
-});
-
-/**
- * Different possible placements for the popover.
- */
-const Placement = {
-  AUTO: 'auto',
-  AUTO_END: 'auto-end',
-  AUTO_START: 'auto-start',
-  TOP: 'top',
-  TOP_END: 'top-end',
-  TOP_START: 'top-start',
-  RIGHT: 'right',
-  RIGHT_END: 'right-end',
-  RIGHT_START: 'right-start',
-  BOTTOM: 'bottom',
-  BOTTOM_END: 'bottom-end',
-  BOTTOM_START: 'bottom-start',
-  LEFT: 'left',
-  LEFT_END: 'left-end',
-  LEFT_START: 'left-start'
-};
-
-/**
- * Offset of the popover.
- */
-
-/**
- * Popover elevation index.
- */
-
-/**
- * Popover fit anchor width options.
- */
-const FitAnchorWidth = {
-  MIN_WIDTH: 'minWidth'};
-/**
- * Arrow size (in pixel).
- */
-const ARROW_SIZE$1 = 14;
-
-/**
- * Popover default z-index
- */
-const POPOVER_ZINDEX = 9999;
-
 function parseAutoPlacement(placement) {
   if (placement === 'auto') return {
     isAuto: true
@@ -6321,13 +6332,111 @@ function parseAutoPlacement(placement) {
     isAuto: false
   };
 }
+
+/**
+ * Parse the fitToAnchorWidth option into the CSS property name to apply.
+ */
 function parseFitWidth(fitToAnchorWidth) {
   if (!fitToAnchorWidth) return undefined;
   if (typeof fitToAnchorWidth === 'string') return fitToAnchorWidth;
   return FitAnchorWidth.MIN_WIDTH;
 }
+/**
+ * Build the floating-ui middleware array for popover positioning.
+ *
+ * Middleware order: offset → flip/autoPlacement → shift → size → arrow
+ */
+function buildPopoverMiddleware(options) {
+  const {
+    offset,
+    hasArrow,
+    fitWidth,
+    fitWithinViewportHeight,
+    boundary,
+    parsedPlacement,
+    arrowElement
+  } = options;
+  const middlewares = [];
+
+  // Offset middleware
+  const awayOffset = (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE$1 : 0);
+  const alongOffset = offset?.along ?? 0;
+  middlewares.push(offset$1({
+    mainAxis: awayOffset,
+    crossAxis: alongOffset
+  }));
+
+  // Positioning middlewares
+  if (parsedPlacement.isAuto) {
+    middlewares.push(autoPlacement({
+      ...(boundary ? {
+        boundary
+      } : {}),
+      alignment: parsedPlacement.autoAlignment
+    }));
+  } else {
+    middlewares.push(flip(boundary ? {
+      boundary
+    } : {}));
+    middlewares.push(shift(boundary ? {
+      boundary
+    } : {}));
+  }
+
+  // Size middleware
+  if (fitWidth || fitWithinViewportHeight) {
+    middlewares.push(size({
+      ...(boundary ? {
+        boundary
+      } : {}),
+      apply({
+        availableHeight,
+        rects,
+        elements
+      }) {
+        if (fitWidth) {
+          Object.assign(elements.floating.style, {
+            [fitWidth]: `${rects.reference.width}px`
+          });
+        }
+        if (fitWithinViewportHeight) {
+          elements.floating.style.maxHeight = `${Math.max(0, availableHeight - ARROW_SIZE$1)}px`;
+        }
+      }
+    }));
+  }
+
+  // Arrow middleware
+  if (hasArrow && arrowElement) {
+    middlewares.push(arrow({
+      element: arrowElement,
+      padding: ARROW_SIZE$1 / 2
+    }));
+  }
+  return middlewares;
+}
+
+/**
+ * Compute arrow CSS styles from floating-ui middleware data.
+ */
+function computeArrowStyles(arrowData) {
+  if (!arrowData) return undefined;
+  return {
+    left: arrowData.x != null ? `${arrowData.x}px` : '',
+    top: arrowData.y != null ? `${arrowData.y}px` : ''
+  };
+}
+
+/**
+ * Get the floating-ui placement from the parsed placement config.
+ * Returns undefined for auto-placement (floating-ui handles it via autoPlacement middleware).
+ */
+function getFloatingPlacement(parsedPlacement) {
+  return parsedPlacement.isAuto ? undefined : parsedPlacement.floatingPlacement;
+}
+
 function usePopoverStyle({
-  offset: offset$1,
+  offset,
   hasArrow,
   fitToAnchorWidth,
   fitWithinViewportHeight,
@@ -6339,76 +6448,18 @@ function usePopoverStyle({
 }) {
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
-  const {
-    floatingPlacement,
-    isAuto,
-    autoAlignment
-  } = parseAutoPlacement(placement);
+  const parsedPlacement = parseAutoPlacement(placement);
   const fitWidth = parseFitWidth(fitToAnchorWidth);
   const boundary = boundaryRef?.current ?? undefined;
-
-  // Build middleware array (order matters: offset → flip/autoPlacement → shift → size → arrow)
-  const middleware = useMemo(() => {
-    const mw = [];
-
-    // Offset middleware
-    const awayOffset = (offset$1?.away ?? 0) + (hasArrow ? ARROW_SIZE$1 : 0);
-    const alongOffset = offset$1?.along ?? 0;
-    mw.push(offset({
-      mainAxis: awayOffset,
-      crossAxis: alongOffset
-    }));
-
-    // Positioning middlewares
-    if (isAuto) {
-      mw.push(autoPlacement({
-        ...(boundary ? {
-          boundary
-        } : {}),
-        alignment: autoAlignment
-      }));
-    } else {
-      mw.push(flip(boundary ? {
-        boundary
-      } : {}));
-      mw.push(shift(boundary ? {
-        boundary
-      } : {}));
-    }
-
-    // Size middleware
-    if (fitWidth || fitWithinViewportHeight) {
-      mw.push(size({
-        ...(boundary ? {
-          boundary
-        } : {}),
-        apply({
-          availableHeight,
-          rects,
-          elements
-        }) {
-          if (fitWidth) {
-            Object.assign(elements.floating.style, {
-              [fitWidth]: `${rects.reference.width}px`
-            });
-          }
-          if (fitWithinViewportHeight) {
-            // eslint-disable-next-line no-param-reassign
-            elements.floating.style.maxHeight = `${Math.max(0, availableHeight - ARROW_SIZE$1)}px`;
-          }
-        }
-      }));
-    }
-
-    // Arrow middleware
-    if (hasArrow && arrowElement) {
-      mw.push(arrow({
-        element: arrowElement,
-        padding: ARROW_SIZE$1 / 2
-      }));
-    }
-    return mw;
-  }, [offset$1?.away, offset$1?.along, hasArrow, isAuto, autoAlignment, boundary, fitWidth, fitWithinViewportHeight, arrowElement]);
+  const middleware = useMemo(() => buildPopoverMiddleware({
+    offset,
+    hasArrow,
+    fitWidth,
+    fitWithinViewportHeight,
+    boundary,
+    parsedPlacement,
+    arrowElement
+  }), [offset, hasArrow, fitWidth, fitWithinViewportHeight, boundary, parsedPlacement, arrowElement]);
   const anchorElement = anchorRef.current;
   const {
     floatingStyles,
@@ -6416,7 +6467,7 @@ function usePopoverStyle({
     isPositioned,
     middlewareData
   } = useFloating({
-    placement: floatingPlacement,
+    placement: getFloatingPlacement(parsedPlacement),
     // Disable autoUpdate and element refs in non-browser environments (e.g. jsdom) to avoid
     // flushSync act() warnings from @floating-ui/react-dom (positioning is not meaningful in jsdom anyway).
     ...(IS_BROWSER$1 ? {
@@ -6431,14 +6482,7 @@ function usePopoverStyle({
   const position = resolvedPlacement ?? placement;
 
   // Compute arrow styles from middleware data
-  const arrowStyles = useMemo(() => {
-    const arrowData = middlewareData.arrow;
-    if (!arrowData) return undefined;
-    return {
-      left: arrowData.x != null ? `${arrowData.x}px` : '',
-      top: arrowData.y != null ? `${arrowData.y}px` : ''
-    };
-  }, [middlewareData.arrow]);
+  const arrowStyles = useMemo(() => computeArrowStyles(middlewareData.arrow), [middlewareData.arrow]);
 
   // Merge floating styles with user-provided styles and zIndex
   const popoverStyle = useMemo(() => {
@@ -6462,35 +6506,16 @@ function usePopoverStyle({
 }
 
 /**
- * Component display name.
- */
-const COMPONENT_NAME$Y = 'Popover';
-
-/**
- * Component default class name and class prefix.
+ * Defines the props of the component.
+ * Extends core PopoverProps, overriding ref-typed props with React-specific `RefObject` types
+ * and replacing `handleClose` with the React-idiomatic `onClose` callback.
  */
-const CLASSNAME$Z = 'lumx-popover';
-const {
-  block: block$Q,
-  element: element$E
-} = classNames.bem(CLASSNAME$Z);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$U = {
-  elevation: 3,
-  placement: Placement.AUTO,
-  focusAnchorOnClose: true,
-  usePortal: true,
-  zIndex: POPOVER_ZINDEX
-};
 
 // Inner component (must be wrapped before export)
 const _InnerPopover = forwardRef((props, ref) => {
   const {
     anchorRef,
-    as: Component = 'div',
+    as,
     children,
     className,
     closeOnClickAway,
@@ -6547,40 +6572,29 @@ const _InnerPopover = forwardRef((props, ref) => {
   useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement?.current);
   const clickAwayRefs = useRef([popoverRef, anchorRef]);
   const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
-  const adjustedElevation = Math.min(elevation || 0, 5);
-  return isOpen ? /*#__PURE__*/jsx(Portal, {
-    enabled: usePortal,
-    children: /*#__PURE__*/jsxs(Component, {
-      ...forwardedProps,
-      ref: mergedRefs,
-      className: classNames.join(className, block$Q({
-        [`theme-${theme}`]: Boolean(theme),
-        [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
-        [`position-${position}`]: Boolean(position)
-      })),
-      style: styles.popover,
-      "data-popper-placement": position,
-      children: [unmountSentinel, /*#__PURE__*/jsxs(ClickAwayProvider, {
-        callback: closeOnClickAway && onClose,
-        childrenRefs: clickAwayRefs,
-        children: [hasArrow && /*#__PURE__*/jsx("div", {
-          ref: setArrowElement,
-          className: element$E('arrow'),
-          style: styles.arrow,
-          children: /*#__PURE__*/jsx("svg", {
-            viewBox: "0 0 14 14",
-            "aria-hidden": true,
-            children: /*#__PURE__*/jsx("path", {
-              d: "M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z"
-            })
-          })
-        }), /*#__PURE__*/jsx(ThemeProvider, {
-          value: theme,
-          children: children
-        })]
-      })]
-    })
-  }) : null;
+  return Popover$1({
+    ...forwardedProps,
+    as: as,
+    children,
+    className,
+    elevation,
+    hasArrow,
+    isOpen,
+    position,
+    popoverStyle: styles.popover,
+    arrowStyle: styles.arrow,
+    theme,
+    ref: mergedRefs,
+    arrowRef: setArrowElement,
+    usePortal,
+    clickAwayCallback: closeOnClickAway && onClose,
+    clickAwayRefs,
+    unmountSentinel
+  }, {
+    Portal,
+    ClickAwayProvider,
+    ThemeProvider
+  });
 });
 _InnerPopover.displayName = COMPONENT_NAME$Y;
 
@@ -9018,20 +9032,6 @@ LinkPreview.displayName = COMPONENT_NAME$I;
 LinkPreview.className = CLASSNAME$J;
 LinkPreview.defaultProps = DEFAULT_PROPS$I;
 
-/**
- * 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.
  */
@@ -9058,10 +9058,11 @@ const DEFAULT_PROPS$H = {
  * @return `true` if the list item is clickable; `false` otherwise.
  */
 function isClickable({
+  linkAs,
   linkProps,
   onItemSelected
 }) {
-  return !isEmpty(linkProps?.href) || !!onItemSelected;
+  return !!linkAs || !isEmpty(linkProps?.href) || !!onItemSelected;
 }
 
 /**
@@ -9091,23 +9092,10 @@ const ListItem = forwardRef((props, ref) => {
     size = DEFAULT_PROPS$H.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: element$s('before'),
-      children: before
-    }), /*#__PURE__*/jsx("div", {
-      className: element$s('content'),
-      children: children
-    }), after && /*#__PURE__*/jsx("div", {
-      className: element$s('after'),
-      children: after
-    })]
+  const clickable = isClickable({
+    linkAs,
+    linkProps,
+    onItemSelected
   });
   return /*#__PURE__*/jsx("li", {
     ref: ref,
@@ -9115,31 +9103,29 @@ const ListItem = forwardRef((props, ref) => {
     className: classNames.join(className, block$C({
       [`size-${size}`]: Boolean(size)
     })),
-    children: isClickable({
-      linkProps,
-      onItemSelected
-    }) ? (/* Clickable list item */
-    renderLink({
-      linkAs,
-      tabIndex: !disabledStateProps.disabled ? 0 : undefined,
-      role,
-      'aria-disabled': isAnyDisabled,
+    children: RawClickable({
+      as: clickable ? linkAs || (linkProps.href ? 'a' : 'button') : 'div',
+      ...disabledStateProps,
       ...linkProps,
-      href: isAnyDisabled ? undefined : linkProps.href,
-      className: classNames.join(element$s('link', {
+      className: classNames.join(element$s(clickable ? 'link' : 'wrapper', {
         'is-highlighted': isHighlighted,
         'is-selected': isSelected,
         'is-disabled': isAnyDisabled
       })),
-      onClick: isAnyDisabled ? undefined : onItemSelected,
-      onKeyDown: isAnyDisabled ? undefined : onKeyDown,
-      ref: linkRef
-    }, content)) :
-    /*#__PURE__*/
-    /* Non clickable list item */
-    jsx("div", {
-      className: element$s('wrapper'),
-      children: content
+      handleClick: onItemSelected,
+      ref: linkRef,
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [before && /*#__PURE__*/jsx("div", {
+          className: element$s('before'),
+          children: before
+        }), /*#__PURE__*/jsx("div", {
+          className: element$s('content'),
+          children: children
+        }), after && /*#__PURE__*/jsx("div", {
+          className: element$s('after'),
+          children: after
+        })]
+      })
     })
   });
 });