@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
130 lines (129 loc) • 4.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const ListItem_styles = require("./ListItem.styles.cjs");
const ListContext = require("../ListContext/ListContext.cjs");
const Focus = require("../../Focus/Focus.cjs");
const HvListItem = React.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
} = uikitReactUtils.useDefaultProps("HvListItem", props);
const { classes, cx } = ListItem_styles.useClasses(classesProp);
const {
topContainerRef,
condensed: condensedContext,
disableGutters: disableGuttersContext,
interactive: interactiveContext,
selectable: selectableContext
} = React.useContext(ListContext.default);
const condensed = condensedProp ?? condensedContext;
const disableGutters = disableGuttersProp ?? disableGuttersContext;
const interactive = interactiveProp ?? interactiveContext;
const selectable = selectableProp ?? selectableContext;
const handleClick = React.useCallback(
(evt) => {
if (disabled) return;
onClick?.(evt);
},
[disabled, onClick]
);
const clonedStartAdornment = React.useMemo(() => {
if (!React.isValidElement(startAdornment)) return startAdornment;
return React.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 = React.useMemo(() => {
if (!React.isValidElement(endAdornment)) return endAdornment;
return React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
Focus.HvFocus,
{
rootRef: topContainerRef,
selected,
disabledClass: disabled || void 0,
strategy: role === "option" ? "listbox" : "menu",
classes: { focus: classes.focus },
configuration: {
tabIndex
},
children: listItem
}
) : listItem;
});
exports.listItemClasses = ListItem_styles.staticClasses;
exports.HvListItem = HvListItem;