@carbon/react
Version:
React components for the Carbon Design System
116 lines (114 loc) • 4.77 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_useId = require("../../internal/useId.js");
const require_noopFn = require("../../internal/noopFn.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 prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/DataTable/TableToolbarSearch.tsx
/**
* 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 translationIds = {
"carbon.table.toolbar.search.label": "carbon.table.toolbar.search.label",
"carbon.table.toolbar.search.placeholder": "carbon.table.toolbar.search.placeholder"
};
const defaultTranslations = {
[translationIds["carbon.table.toolbar.search.label"]]: "Filter table",
[translationIds["carbon.table.toolbar.search.placeholder"]]: "Filter table"
};
const defaultTranslateWithId = (messageId) => {
return defaultTranslations[messageId];
};
const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChangeProp, onClear = require_noopFn.noopFn, translateWithId: t = defaultTranslateWithId, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent = false, id, onBlur, onFocus, size = "lg", tabIndex = "0", ...rest }) => {
const { current: controlled } = (0, react.useRef)(expandedProp !== void 0);
const [expandedState, setExpandedState] = (0, react.useState)(Boolean(defaultExpanded || defaultValue));
const expanded = controlled ? expandedProp : expandedState;
const [value, setValue] = (0, react.useState)(defaultValue || "");
const uniqueId = require_useId.useId("table-toolbar-search");
const [focusTarget, setFocusTarget] = (0, react.useState)(null);
const prefix = require_usePrefix.usePrefix();
(0, react.useEffect)(() => {
if (focusTarget) {
focusTarget.current?.querySelector?.("input")?.focus();
setFocusTarget(null);
}
}, [focusTarget]);
(0, react.useEffect)(() => {
if (defaultValue) onChangeProp?.("", defaultValue);
}, []);
const searchClasses = (0, classnames.default)(className, searchContainerClass, {
[`${prefix}--toolbar-search-container-active`]: expanded,
[`${prefix}--toolbar-search-container-disabled`]: disabled,
[`${prefix}--toolbar-search-container-expandable`]: !persistent,
[`${prefix}--toolbar-search-container-persistent`]: persistent
});
const handleExpand = (event, value = !expanded) => {
if (!disabled) {
if (!controlled && !persistent) setExpandedState(value);
if (onExpand) onExpand(event, value);
}
};
const onChange = (e) => {
setValue(e.target.value);
if (onChangeProp) onChangeProp(e, e.target.value);
};
const handleOnFocus = (event) => handleExpand(event, true);
const handleOnBlur = (event) => !value && handleExpand(event, false);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
disabled,
className: searchClasses,
value,
id: typeof id !== "undefined" ? id : uniqueId,
labelText: labelText || t("carbon.table.toolbar.search.label"),
placeholder: placeholder || t("carbon.table.toolbar.search.placeholder"),
onChange,
onClear,
onFocus: onFocus ? (event) => onFocus(event, handleExpand) : handleOnFocus,
onBlur: onBlur ? (event) => onBlur(event, handleExpand) : handleOnBlur,
size,
tabIndex,
...rest
});
};
TableToolbarSearch.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
defaultExpanded: prop_types.default.bool,
defaultValue: prop_types.default.string,
disabled: prop_types.default.bool,
expanded: prop_types.default.bool,
id: prop_types.default.string,
labelText: prop_types.default.string,
onBlur: prop_types.default.func,
onChange: prop_types.default.func,
onClear: prop_types.default.func,
onExpand: prop_types.default.func,
onFocus: prop_types.default.func,
persistent: prop_types.default.bool,
placeholder: prop_types.default.string,
searchContainerClass: prop_types.default.string,
size: prop_types.default.oneOf([
"sm",
"md",
"lg"
]),
tabIndex: prop_types.default.oneOfType([prop_types.default.number, prop_types.default.string]),
translateWithId: prop_types.default.func
};
//#endregion
exports.default = TableToolbarSearch;