@carbon/react
Version:
React components for the Carbon Design System
71 lines (69 loc) • 3.05 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_keys = require("../../internal/keyboard/keys.js");
const require_match = require("../../internal/keyboard/match.js");
const require_events = require("../../tools/events.js");
const require_mergeRefs = require("../../tools/mergeRefs.js");
const require_utils = require("../Search/utils.js");
const require_index = require("../Search/index.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/ExpandableSearch/ExpandableSearch.tsx
/**
* Copyright IBM Corp. 2021, 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.
*/
const ExpandableSearch = (0, react.forwardRef)((props, forwardedRef) => {
const { onBlur, onChange, onExpand, onKeyDown, defaultValue, isExpanded, ...rest } = props;
const [expanded, setExpanded] = (0, react.useState)(isExpanded || false);
const [hasContent, setHasContent] = (0, react.useState)(require_utils.isSearchValuePresent(defaultValue));
const searchRef = (0, react.useRef)(null);
const prefix = require_usePrefix.usePrefix();
function handleBlur(evt) {
const relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains(`${prefix}--search-close`);
if (expanded && !relatedTargetIsAllowed && !hasContent && !isExpanded) setExpanded(false);
}
(0, react.useEffect)(() => {
setExpanded(!!isExpanded);
}, [isExpanded]);
function handleChange(evt) {
setHasContent(evt.target.value !== "");
}
function handleExpand() {
setExpanded(true);
searchRef.current?.focus?.();
}
function handleKeyDown(evt) {
if (expanded && require_match.match(evt, require_keys.Escape)) {
evt.stopPropagation();
if (!evt.target?.value && !isExpanded) setExpanded(false);
}
}
const classes = (0, classnames.default)(`${prefix}--search--expandable`, { [`${prefix}--search--expanded`]: expanded }, rest.className);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
...rest,
defaultValue,
isExpanded: expanded,
ref: require_mergeRefs.mergeRefs(searchRef, forwardedRef),
className: classes,
onBlur: require_events.composeEventHandlers([onBlur, handleBlur]),
onChange: require_events.composeEventHandlers([onChange, handleChange]),
onExpand: require_events.composeEventHandlers([onExpand, handleExpand]),
onKeyDown: require_events.composeEventHandlers([onKeyDown, handleKeyDown])
});
});
ExpandableSearch.propTypes = require_index.default.propTypes;
ExpandableSearch.displayName = "ExpandableSearch";
//#endregion
exports.default = ExpandableSearch;