@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
83 lines (82 loc) • 3.33 kB
JavaScript
import ListContext from "../ListContext/ListContext.js";
import { HvFocus } from "../../Focus/Focus.js";
import { useClasses } from "./ListItem.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { cloneElement, forwardRef, isValidElement, useCallback, useContext, useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/ListContainer/ListItem/ListItem.tsx
/**
* Implements the listitem pattern, akin to the `<li>` element.
* Should be composed within a `<HvListContainer>` component.
*/
var HvListItem = forwardRef(function HvListItem(props, ref) {
const { classes: classesProp, className, role, value, selected, disabled, selectable: selectableProp, interactive: interactiveProp, condensed: condensedProp, disableGutters: disableGuttersProp, separator, 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) });
}, [
cx,
classes?.startAdornment,
startAdornment
]);
const clonedEndAdornment = useMemo(() => {
if (!isValidElement(endAdornment)) return endAdornment;
return cloneElement(endAdornment, { className: cx(classes.endAdornment, endAdornment.props.className) });
}, [
cx,
classes?.endAdornment,
endAdornment
]);
const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
"aria-disabled": disabled || void 0,
"aria-selected": selected
} : {};
const listItem = /* @__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"]
}, className),
tabIndex: interactive ? void 0 : tabIndex,
onClick: handleClick,
...roleOptionAriaProps,
...others,
children: [
clonedStartAdornment,
children,
clonedEndAdornment
]
});
const item = 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;
if (separator) return /* @__PURE__ */ jsxs(Fragment$1, { children: [item, /* @__PURE__ */ jsx("li", {
role: "separator",
className: classes.separator,
"aria-hidden": "true"
})] });
return item;
});
//#endregion
export { HvListItem };