@hitachivantara/uikit-react-core/dist/esm/ListContainer/ListItem/ListItem.js

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, useContext, useCallback, useMemo, isValidElement, cloneElement } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useClasses } from "./ListItem.styles.js";
import { staticClasses } from "./ListItem.styles.js";
import ListContext from "../ListContext/ListContext.js";
import { HvFocus } from "../../Focus/Focus.js";
const HvListItem = forwardRef(function HvListItem2(props, ref) {
  const {
    classes: classesProp,
    className,
    role,
    value,
    selected,
    disabled,
    selectable: selectableProp,
    interactive: interactiveProp,
    condensed: condensedProp,
    disableGutters: disableGuttersProp,
    startAdornment,
    endAdornment,
    onClick,
    children,
    tabIndex,
    ...others
  } = useDefaultProps("HvListItem", props);
  const { classes, cx } = useClasses(classesProp);
  const {
    topContainerRef,
    condensed: condensedContext,
    disableGutters: disableGuttersContext,
    interactive: interactiveContext,
    selectable: selectableContext
  } = useContext(ListContext);
  const condensed = condensedProp ?? condensedContext;
  const disableGutters = disableGuttersProp ?? disableGuttersContext;
  const interactive = interactiveProp ?? interactiveContext;
  const selectable = selectableProp ?? selectableContext;
  const handleClick = useCallback(
    (evt) => {
      if (disabled) return;
      onClick?.(evt);
    },
    [disabled, onClick]
  );
  const clonedStartAdornment = useMemo(() => {
    if (!isValidElement(startAdornment)) return startAdornment;
    return cloneElement(startAdornment, {
      className: cx(classes.startAdornment, startAdornment.props.className, {
        // TODO: remove 👇 props below
        [classes.disabled]: disabled
      }),
      checked: !!selected,
      disabled,
      onChange: handleClick
    });
  }, [
    cx,
    classes?.startAdornment,
    classes?.disabled,
    disabled,
    handleClick,
    selected,
    startAdornment
  ]);
  const clonedEndAdornment = useMemo(() => {
    if (!isValidElement(endAdornment)) return endAdornment;
    return cloneElement(endAdornment, {
      className: cx(classes.endAdornment, endAdornment.props.className, {
        [classes.disabled]: disabled
      })
    });
  }, [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]);
  const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
    "aria-disabled": disabled || void 0,
    "aria-selected": selected
  } : {};
  const listItem = (
    // For later: this should only have an onClick event if interactive and has the appropriate role.
    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
    /* @__PURE__ */ jsxs(
      "li",
      {
        ref,
        role,
        value,
        className: cx(
          classes.root,
          {
            [classes.gutters]: !disableGutters,
            [classes.condensed]: condensed,
            [classes.interactive]: interactive || selectable,
            [classes.selected]: selected || props["aria-selected"],
            [classes.disabled]: disabled || props["aria-disabled"],
            [classes.withStartAdornment]: startAdornment != null,
            [classes.withEndAdornment]: endAdornment != null
          },
          className
        ),
        tabIndex: interactive ? void 0 : tabIndex,
        onClick: handleClick,
        ...roleOptionAriaProps,
        ...others,
        children: [
          clonedStartAdornment,
          children,
          clonedEndAdornment
        ]
      }
    )
  );
  return interactive ? /* @__PURE__ */ jsx(
    HvFocus,
    {
      rootRef: topContainerRef,
      selected,
      disabledClass: disabled || void 0,
      strategy: role === "option" ? "listbox" : "menu",
      classes: { focus: classes.focus },
      configuration: {
        tabIndex
      },
      children: listItem
    }
  ) : listItem;
});
export {
  HvListItem,
  staticClasses as listItemClasses
};