@lumx/react 3.19.1-alpha.1 → 3.19.1-alpha.11

package/index.js

@@ -390,7 +390,7 @@ function getBasicClass({
   return `${prefix}--${kebabCase(type)}-${value}`;
 }
 
-const _excluded$1t = ["prefix"];
+const _excluded$1u = ["prefix"];
 
 /**
  * Enhance isEmpty method to also works with numbers.
@@ -420,7 +420,7 @@ function handleBasicClasses(_ref) {
   let {
       prefix
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1t);
+    props = _objectWithoutProperties(_ref, _excluded$1u);
   const otherClasses = {};
   if (!isEmpty(props)) {
     Object.keys(props).forEach(prop => {
@@ -499,7 +499,7 @@ function useId() {
  */
 const forwardRef = React__default.forwardRef;
 
-const _excluded$1s = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
+const _excluded$1t = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
   _excluded2$3 = ["label", "onClick"],
   _excluded3 = ["label", "onClick"];
 /**
@@ -563,7 +563,7 @@ const AlertDialog = forwardRef((props, ref) => {
       dialogProps,
       children
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1t);
   const cancelButtonRef = React__default.useRef(null);
   const confirmationButtonRef = React__default.useRef(null);
   const {
@@ -690,7 +690,7 @@ function useTheme() {
   return React__default.useContext(ThemeContext);
 }
 
-const _excluded$1r = ["disabled", "isDisabled", "aria-disabled", "onClick", "onChange"];
+const _excluded$1s = ["disabled", "isDisabled", "aria-disabled", "onClick", "onChange"];
 /**
  * Resolve disabled state from props.
  * (handles `disabled`, `isDisabled` and `aria-disabled`)
@@ -705,7 +705,7 @@ function useDisableStateProps(props) {
       onClick,
       onChange
     } = props,
-    otherProps = _objectWithoutProperties(props, _excluded$1r);
+    otherProps = _objectWithoutProperties(props, _excluded$1s);
   const disabledStateContext = useDisabledStateContext();
   const disabledStateProps = {
     disabled: (disabledStateContext === null || disabledStateContext === void 0 ? void 0 : disabledStateContext.state) === 'disabled' || isDisabled,
@@ -723,7 +723,7 @@ function useDisableStateProps(props) {
   };
 }
 
-const _excluded$1q = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps", "focusAnchorOnClose"];
+const _excluded$1r = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps", "focusAnchorOnClose"];
 
 /**
  * Defines the props of the component.
@@ -797,7 +797,7 @@ const Autocomplete = forwardRef((props, ref) => {
       textFieldProps = {},
       focusAnchorOnClose
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1q);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1r);
   const inputAnchorRef = useRef(null);
   const textFieldRef = useRef(null);
   useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
@@ -845,7 +845,7 @@ Autocomplete.displayName = COMPONENT_NAME$1m;
 Autocomplete.className = CLASSNAME$1j;
 Autocomplete.defaultProps = DEFAULT_PROPS$12;
 
-const _excluded$1p = ["anchorToInput", "children", "chipsAlignment", "className", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClear", "onClose", "onFocus", "onInfiniteScroll", "onKeyDown", "placeholder", "placement", "selectedChipRender", "shouldFocusOnClose", "theme", "type", "value", "values"];
+const _excluded$1q = ["anchorToInput", "children", "chipsAlignment", "className", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClear", "onClose", "onFocus", "onInfiniteScroll", "onKeyDown", "placeholder", "placement", "selectedChipRender", "shouldFocusOnClose", "theme", "type", "value", "values"];
 
 /**
  * Defines the props of the component.
@@ -934,7 +934,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
       value,
       values = DEFAULT_PROPS$11.values
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1p);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1q);
   return /*#__PURE__*/React__default.createElement(Autocomplete, _extends({
     ref: ref
   }, forwardedProps, {
@@ -975,7 +975,7 @@ AutocompleteMultiple.displayName = COMPONENT_NAME$1l;
 AutocompleteMultiple.className = CLASSNAME$1i;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$11;
 
-const _excluded$1o = ["actions", "alt", "badge", "className", "image", "linkProps", "linkAs", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"];
+const _excluded$1p = ["actions", "alt", "badge", "className", "image", "linkProps", "linkAs", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"];
 
 /**
  * Avatar sizes.
@@ -1025,7 +1025,7 @@ const Avatar = forwardRef((props, ref) => {
       theme = defaultTheme,
       thumbnailProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1056,7 +1056,7 @@ Avatar.displayName = COMPONENT_NAME$1k;
 Avatar.className = CLASSNAME$1h;
 Avatar.defaultProps = DEFAULT_PROPS$10;
 
-const _excluded$1n = ["children", "className", "color"];
+const _excluded$1o = ["children", "className", "color"];
 
 /**
  * Defines the props of the component.
@@ -1092,7 +1092,7 @@ const Badge = forwardRef((props, ref) => {
       className,
       color = DEFAULT_PROPS$$.color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1106,7 +1106,7 @@ Badge.displayName = COMPONENT_NAME$1j;
 Badge.className = CLASSNAME$1g;
 Badge.defaultProps = DEFAULT_PROPS$$;
 
-const _excluded$1m = ["badge", "children", "className"];
+const _excluded$1n = ["badge", "children", "className"];
 /**
  * Component display name.
  */
@@ -1122,7 +1122,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1178,7 +1178,7 @@ const VISUALLY_HIDDEN = 'visually-hidden';
 /** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
 const forwardRefPolymorphic = React__default.forwardRef;
 
-const _excluded$1l = ["children", "onClick", "disabled", "isDisabled", "aria-disabled", "as"];
+const _excluded$1m = ["children", "onClick", "disabled", "isDisabled", "aria-disabled", "as"];
 /**
  * Render clickable element (link, button or custom element)
  * (also does some basic disabled state handling)
@@ -1192,7 +1192,7 @@ const RawClickable = forwardRefPolymorphic((props, ref) => {
       'aria-disabled': ariaDisabled,
       as
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1m);
   const isAnyDisabled = isDisabled || ariaDisabled === 'true' || ariaDisabled === true;
   const Component = as;
   let clickableProps;
@@ -1208,7 +1208,7 @@ const RawClickable = forwardRefPolymorphic((props, ref) => {
   }
   return /*#__PURE__*/React__default.createElement(Component, _extends({
     ref: ref,
-    "aria-disabled": isAnyDisabled
+    "aria-disabled": isAnyDisabled || undefined
   }, forwardedProps, clickableProps, {
     onClick: event => {
       if (isAnyDisabled) {
@@ -1221,7 +1221,7 @@ const RawClickable = forwardRefPolymorphic((props, ref) => {
   }), children);
 });
 
-const _excluded$1k = ["aria-label", "children", "className", "color", "emphasis", "hasBackground", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "size", "theme", "variant", "fullWidth"];
+const _excluded$1l = ["aria-label", "children", "className", "color", "emphasis", "hasBackground", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "size", "theme", "variant", "fullWidth"];
 
 /**
  * Button size definition.
@@ -1292,7 +1292,7 @@ const ButtonRoot = forwardRef((props, ref) => {
       variant,
       fullWidth
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1k);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1l);
   const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
   if (hasBackground) {
     return renderButtonWrapper(_objectSpread2(_objectSpread2({}, props), {}, {
@@ -1327,7 +1327,7 @@ const ButtonRoot = forwardRef((props, ref) => {
 ButtonRoot.displayName = COMPONENT_NAME$1h;
 ButtonRoot.defaultProps = {};
 
-const _excluded$1j = ["children", "className", "emphasis", "leftIcon", "rightIcon", "size", "theme"];
+const _excluded$1k = ["children", "className", "emphasis", "leftIcon", "rightIcon", "size", "theme"];
 
 /**
  * Button emphasis definition.
@@ -1375,7 +1375,7 @@ const Button = forwardRef((props, ref) => {
       size = DEFAULT_PROPS$_.size,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1k);
   const buttonClassName = classNames(className, getBasicClass({
     prefix: CLASSNAME$1e,
     type: 'hasLeftIcon',
@@ -1414,7 +1414,7 @@ Button.displayName = COMPONENT_NAME$1g;
 Button.className = CLASSNAME$1e;
 Button.defaultProps = DEFAULT_PROPS$_;
 
-const _excluded$1i = ["emphasis", "image", "icon", "label", "size", "theme", "tooltipProps", "hideTooltip"];
+const _excluded$1j = ["emphasis", "image", "icon", "label", "size", "theme", "tooltipProps", "hideTooltip"];
 /**
  * Component display name.
  */
@@ -1452,7 +1452,7 @@ const IconButton = forwardRef((props, ref) => {
       tooltipProps,
       hideTooltip
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
   return /*#__PURE__*/React__default.createElement(Tooltip, _extends({
     label: hideTooltip ? '' : label
   }, tooltipProps), /*#__PURE__*/React__default.createElement(ButtonRoot, _extends({
@@ -1478,7 +1478,7 @@ IconButton.displayName = COMPONENT_NAME$1f;
 IconButton.className = CLASSNAME$1d;
 IconButton.defaultProps = DEFAULT_PROPS$Z;
 
-const _excluded$1h = ["children", "className"];
+const _excluded$1i = ["children", "className"];
 
 /**
  * Defines the props of the component
@@ -1511,7 +1511,7 @@ const ButtonGroup = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1522,7 +1522,7 @@ ButtonGroup.displayName = COMPONENT_NAME$1e;
 ButtonGroup.className = CLASSNAME$1c;
 ButtonGroup.defaultProps = DEFAULT_PROPS$Y;
 
-const _excluded$1g = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
+const _excluded$1h = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
 /**
  * Intermediate state of checkbox.
  */
@@ -1575,7 +1575,7 @@ const Checkbox = forwardRef((props, ref) => {
       value,
       inputProps = {}
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1g);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1h);
   const localInputRef = React__default.useRef(null);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
@@ -1685,6 +1685,21 @@ function onEscapePressed(handler) {
   };
 }
 
+/**
+ * Handle button key pressed (Enter + Space).
+ *
+ * @param  handler The handler to call.
+ * @return The decorated function.
+ */
+function onButtonPressed(handler) {
+  return evt => {
+    if (evt.key !== 'Enter' && evt.key !== ' ') {
+      return;
+    }
+    handler(evt);
+  };
+}
+
 /**
  * Checks whether or not the browser support passive events.
  * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js
@@ -1766,7 +1781,7 @@ function detectHorizontalSwipe(touchSurface, handleSwipe) {
   };
 }
 
-const _excluded$1f = ["after", "before", "children", "className", "color", "isClickable", "isHighlighted", "isSelected", "onAfterClick", "onBeforeClick", "onClick", "size", "theme", "href", "onKeyDown"];
+const _excluded$1g = ["after", "before", "children", "className", "color", "isClickable", "isHighlighted", "isSelected", "onAfterClick", "onBeforeClick", "onClick", "size", "theme", "href", "onKeyDown"];
 
 /**
  * Chip sizes.
@@ -1824,7 +1839,7 @@ const Chip = forwardRef((props, ref) => {
       href,
       onKeyDown
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1f);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1g);
   const hasAfterClick = isFunction(onAfterClick);
   const hasBeforeClick = isFunction(onBeforeClick);
   const hasOnClick = isFunction(props.onClick);
@@ -1941,7 +1956,7 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
   };
 };
 
-const _excluded$1e = ["align", "children", "className"];
+const _excluded$1f = ["align", "children", "className"];
 
 /**
  * Defines the props of the component.
@@ -1975,7 +1990,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1989,7 +2004,7 @@ const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
 
-const _excluded$1d = ["actions", "avatarProps", "children", "className", "date", "fullDate", "hasActions", "headerActions", "isOpen", "isRelevant", "name", "onClick", "onMouseEnter", "onMouseLeave", "text", "theme", "variant"];
+const _excluded$1e = ["actions", "avatarProps", "children", "className", "date", "fullDate", "hasActions", "headerActions", "isOpen", "isRelevant", "name", "onClick", "onMouseEnter", "onMouseLeave", "text", "theme", "variant"];
 /**
  * Comment block variants.
  */
@@ -2047,7 +2062,7 @@ const CommentBlock = forwardRef((props, ref) => {
       theme = defaultTheme,
       variant = DEFAULT_PROPS$U.variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
@@ -2535,7 +2550,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
 DatePickerControlled.displayName = COMPONENT_NAME$18;
 DatePickerControlled.className = CLASSNAME$17;
 
-const _excluded$1c = ["defaultMonth", "locale", "value", "onChange"];
+const _excluded$1d = ["defaultMonth", "locale", "value", "onChange"];
 /**
  * DatePicker component.
  *
@@ -2550,7 +2565,7 @@ const DatePicker = forwardRef((props, ref) => {
       value,
       onChange
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
   let referenceDate = value || defaultMonth || new Date();
   if (!isDateValid(referenceDate)) {
     // eslint-disable-next-line no-console
@@ -2587,7 +2602,7 @@ const useBooleanState = defaultValue => {
   return [booleanValue, setToFalse, setToTrue, toggleBoolean];
 };
 
-const _excluded$1b = ["defaultMonth", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
+const _excluded$1c = ["defaultMonth", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
 
 /**
  * Defines the props of the component.
@@ -2621,7 +2636,7 @@ const DatePickerField = forwardRef((props, ref) => {
       previousButtonProps,
       value
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1b);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1c);
   const anchorRef = useRef(null);
   const [isOpen, close,, toggleOpen] = useBooleanState(false);
   const handleKeyboardNav = useCallback(evt => {
@@ -3166,7 +3181,7 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
   return isVisible || isComponentVisible;
 };
 
-const _excluded$1a = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange", "disableBodyScroll", "preventCloseOnClick", "preventCloseOnEscape"];
+const _excluded$1b = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange", "disableBodyScroll", "preventCloseOnClick", "preventCloseOnEscape"];
 
 /**
  * Defines the props of the component.
@@ -3228,7 +3243,7 @@ const Dialog = forwardRef((props, ref) => {
       preventCloseOnClick,
       preventCloseOnEscape
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const previousOpen = React__default.useRef(isOpen);
@@ -3344,7 +3359,7 @@ Dialog.displayName = COMPONENT_NAME$16;
 Dialog.className = CLASSNAME$16;
 Dialog.defaultProps = DEFAULT_PROPS$T;
 
-const _excluded$19 = ["className", "theme"];
+const _excluded$1a = ["className", "theme"];
 
 /**
  * Defines the props of the component.
@@ -3378,7 +3393,7 @@ const Divider = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$19);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
   return /*#__PURE__*/React__default.createElement("hr", _extends({
     ref: ref
   }, forwardedProps, {
@@ -3392,7 +3407,7 @@ Divider.displayName = COMPONENT_NAME$15;
 Divider.className = CLASSNAME$15;
 Divider.defaultProps = DEFAULT_PROPS$S;
 
-const _excluded$18 = ["className", "theme"];
+const _excluded$19 = ["className", "theme"];
 
 /**
  * Defines the props of the component.
@@ -3421,7 +3436,7 @@ const DragHandle = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$18);
+    forwardedProps = _objectWithoutProperties(props, _excluded$19);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -3602,6 +3617,24 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
   };
 };
 
+const _excluded$18 = ["linkAs"];
+/**
+ * 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 = (_ref, ...children) => {
+  let {
+      linkAs
+    } = _ref,
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$18);
+  return /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
+};
+
 const _excluded$17 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
 
 /**
@@ -3663,6 +3696,12 @@ const ListItem = forwardRef((props, ref) => {
       size = DEFAULT_PROPS$R.size
     } = otherProps,
     forwardedProps = _objectWithoutProperties(otherProps, _excluded$17);
+  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__*/React__default.createElement(React__default.Fragment, null, before && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$13}__before`
   }, before), /*#__PURE__*/React__default.createElement("div", {
@@ -3680,21 +3719,24 @@ const ListItem = forwardRef((props, ref) => {
   }), isClickable({
     linkProps,
     onItemSelected
-  }) ?
-  /*#__PURE__*/
-  /* Clickable list item */
-  React__default.createElement(RawClickable, _extends({
-    as: linkAs || (linkProps.href ? 'a' : 'button')
-  }, linkProps, disabledStateProps, {
+  }) ? (/* Clickable list item */
+  renderLink(_objectSpread2(_objectSpread2({
+    linkAs,
+    tabIndex: !disabledStateProps.disabled ? 0 : undefined,
+    role,
+    'aria-disabled': isAnyDisabled
+  }, linkProps), {}, {
+    href: isAnyDisabled ? undefined : linkProps.href,
     className: classNames(handleBasicClasses({
       prefix: `${CLASSNAME$13}__link`,
       isHighlighted,
       isSelected,
       isDisabled: isAnyDisabled
     })),
-    onClick: onItemSelected,
+    onClick: isAnyDisabled ? undefined : onItemSelected,
+    onKeyDown: isAnyDisabled ? undefined : onKeyDown,
     ref: linkRef
-  }), content) :
+  }), content)) :
   /*#__PURE__*/
   /* Non clickable list item */
   React__default.createElement("div", {
@@ -13697,8 +13739,8 @@ const Thumbnail = forwardRef((props, ref) => {
     // Remove the image on custom fallback.
     imageErrorStyle.display = 'none';
   }
-  const isLink = (linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs;
-  const isClickable = !isAnyDisabled && (isLink || forwardedProps.onClick);
+  const isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
+  const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
   const Wrapper = isClickable ? RawClickable : 'div';
   const wrapperProps = _objectSpread2({}, forwardedProps);
   if (isClickable) {
@@ -13707,8 +13749,9 @@ const Thumbnail = forwardRef((props, ref) => {
     }, disabledStateProps);
     if (isLink) {
       Object.assign(wrapperProps, linkProps);
+    } else {
+      wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
-    wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
   }
 
   // If we have a loading placeholder image that is really loaded (complete)