@carbon/react
Version:
React components for the Carbon Design System
91 lines (89 loc) • 3.17 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { usePrefix } from "../../internal/usePrefix.js";
import { deprecate } from "../../prop-types/deprecate.js";
import { ListBoxSizePropType, ListBoxTypePropType } from "./ListBoxPropTypes.js";
import { FormContext } from "../FluidForm/FormContext.js";
import classNames from "classnames";
import { forwardRef, useContext } from "react";
import PropTypes from "prop-types";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/ListBox/ListBox.tsx
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const handleOnKeyDown = (event) => {
if (event.keyCode === 27) event.stopPropagation();
};
const handleClick = (event) => {
event.preventDefault();
event.stopPropagation();
};
/**
* `ListBox` is a generic container component that handles creating the
* container class name in response to certain props.
*/
const ListBox = forwardRef((props, ref) => {
const { children, className: containerClassName, disabled = false, type = "default", size, invalid, invalidText, invalidTextId, warn, warnText, warnTextId, light, isOpen, ...rest } = props;
const prefix = usePrefix();
const { isFluid } = useContext(FormContext);
const showWarning = !invalid && warn;
const className = classNames({
...containerClassName && { [containerClassName]: true },
[`${prefix}--list-box`]: true,
[`${prefix}--list-box--${size}`]: size,
[`${prefix}--list-box--inline`]: type === "inline",
[`${prefix}--list-box--disabled`]: disabled,
[`${prefix}--list-box--light`]: light,
[`${prefix}--list-box--expanded`]: isOpen,
[`${prefix}--list-box--invalid`]: invalid,
[`${prefix}--list-box--warning`]: showWarning
});
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("div", {
...rest,
className,
ref,
onKeyDown: handleOnKeyDown,
onClick: handleClick,
"data-invalid": invalid || void 0,
children
}),
isFluid && /* @__PURE__ */ jsx("hr", { className: `${prefix}--list-box__divider` }),
invalid ? /* @__PURE__ */ jsx("div", {
className: `${prefix}--form-requirement`,
id: invalidTextId,
children: invalidText
}) : null,
showWarning ? /* @__PURE__ */ jsx("div", {
className: `${prefix}--form-requirement`,
id: warnTextId,
children: warnText
}) : null
] });
});
ListBox.displayName = "ListBox";
ListBox.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
disabled: PropTypes.bool,
invalid: PropTypes.bool,
invalidText: PropTypes.node,
invalidTextId: PropTypes.string,
isOpen: PropTypes.bool,
light: deprecate(PropTypes.bool, "The `light` prop for `ListBox` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
size: ListBoxSizePropType,
type: ListBoxTypePropType,
warn: PropTypes.bool,
warnText: PropTypes.string,
warnTextId: PropTypes.string
};
//#endregion
export { ListBox as default };