@carbon/react
Version:
React components for the Carbon Design System
112 lines (110 loc) • 4.19 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 { useId } from "../../internal/useId.js";
import { noopFn } from "../../internal/noopFn.js";
import Search_default from "../Search/index.js";
import classNames from "classnames";
import { useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { jsx } from "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 = 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 } = useRef(expandedProp !== void 0);
const [expandedState, setExpandedState] = useState(Boolean(defaultExpanded || defaultValue));
const expanded = controlled ? expandedProp : expandedState;
const [value, setValue] = useState(defaultValue || "");
const uniqueId = useId("table-toolbar-search");
const [focusTarget, setFocusTarget] = useState(null);
const prefix = usePrefix();
useEffect(() => {
if (focusTarget) {
focusTarget.current?.querySelector?.("input")?.focus();
setFocusTarget(null);
}
}, [focusTarget]);
useEffect(() => {
if (defaultValue) onChangeProp?.("", defaultValue);
}, []);
const searchClasses = classNames(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__ */ jsx(Search_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: PropTypes.node,
className: PropTypes.string,
defaultExpanded: PropTypes.bool,
defaultValue: PropTypes.string,
disabled: PropTypes.bool,
expanded: PropTypes.bool,
id: PropTypes.string,
labelText: PropTypes.string,
onBlur: PropTypes.func,
onChange: PropTypes.func,
onClear: PropTypes.func,
onExpand: PropTypes.func,
onFocus: PropTypes.func,
persistent: PropTypes.bool,
placeholder: PropTypes.string,
searchContainerClass: PropTypes.string,
size: PropTypes.oneOf([
"sm",
"md",
"lg"
]),
tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
translateWithId: PropTypes.func
};
//#endregion
export { TableToolbarSearch as default };