@carbon/ibm-products
Version:
Carbon for IBM Products
165 lines (163 loc) • 6.4 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 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 { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { Button, MultiSelect, Search } from "@carbon/react";
//#region src/components/SearchBar/SearchBar.tsx
/**
* Copyright IBM Corp. 2024, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const blockClass = `${pkg.prefix}--search-bar`;
const componentName = "SearchBar";
const defaults = {
onSubmit: () => {},
onChange: () => {},
scopes: [],
selectedScopes: [],
hideScopesLabel: true
};
const SearchBar = React.forwardRef(({ className, clearButtonLabelText, hideScopesLabel = defaults.hideScopesLabel, labelText, onChange = defaults.onChange, onSubmit = defaults.onSubmit, placeholderText, scopes = [], scopesTypeLabel, scopeToString, selectedScopes = [], sortItems, submitLabel, translateWithId, value, ...rest }, ref) => {
const [text, setText] = useState(value || "");
const [_selectedScopes, setSelectedScopes] = useState(selectedScopes || []);
const [isInputDirty, setIsInputDirty] = useState(false);
useEffect(() => {
if (!text || !text.length) setIsInputDirty(false);
else setIsInputDirty(true);
}, [text]);
/**
* Handler for form submit that calls onSubmit prop.
* @param {Event} event Submit event generated.
*/
const handleSubmit = (event) => {
event.preventDefault();
const eventObject = { value: text };
if (scopes.length > 0) eventObject.selectedScopes = _selectedScopes;
onSubmit(eventObject);
};
/**
* Handler for when scope selection changes that calls onChangeProp.
* @param {{selectedItems: Array<any>}} {selectedItems} Object containing array of selected items.
*/
const handleSearchScopeChange = ({ selectedItems }) => {
setSelectedScopes(selectedItems);
onChange({
selectedScopes: selectedItems,
value: text
});
};
/**
* Handler for search input changes that calls onChange prop.
* @param {KeyboardEvent} event Event object from input change.
*/
const handleInputChange = (event) => {
const { value } = event.target;
const eventObject = { value };
if (scopes.length > 0) eventObject.selectedScopes = selectedScopes;
setText(value);
onChange(eventObject);
};
const multiSelectProps = {
initialSelectedItems: selectedScopes,
items: scopes,
itemToString: scopeToString,
label: scopesTypeLabel,
sortItems,
translateWithId
};
return /* @__PURE__ */ React.createElement("form", {
...rest,
ref,
...getDevtoolsProps(componentName),
className: (0, import_classnames.default)(blockClass, className, { [`${blockClass}--hide-scopes-label`]: hideScopesLabel }),
onSubmit: handleSubmit
}, scopes?.length ? /* @__PURE__ */ React.createElement(MultiSelect, {
...multiSelectProps,
id: `${blockClass}__multi-select`,
className: `${blockClass}__scopes`,
onChange: handleSearchScopeChange,
size: "lg"
}) : null, /* @__PURE__ */ React.createElement(Search, {
className: `${blockClass}__input`,
closeButtonLabelText: clearButtonLabelText,
labelText,
name: "search-input",
onChange: handleInputChange,
placeholder: placeholderText,
value: text,
size: "lg"
}), /* @__PURE__ */ React.createElement(Button, {
name: "search-submit",
kind: "primary",
type: "submit",
className: `${blockClass}__submit`,
disabled: !isInputDirty
}, submitLabel));
});
SearchBar.displayName = componentName;
const conditionalScopePropValidator = (props, propName, componentName, ...rest) => {
if (props.scopes && props.scopes.length > 0 && !props[propName]) return /* @__PURE__ */ new Error(`Required \`${propName}\` when \`scopes\` prop type is supplied to \`${componentName}\`. Validation failed.`);
/**@ts-ignore */
return PropTypes.string(props, propName, componentName, ...rest);
};
const deprecatedProps = {
/**
* **Deprecated**
*
* Provide accessible label text for the scopes MultiSelect.
*/
titleText: PropTypes.string };
SearchBar.propTypes = {
/** @type {string} Optional additional class name. */
className: PropTypes.string,
/** @type {string} The label text for the search text input. */
clearButtonLabelText: PropTypes.string.isRequired,
/**
* Whether or not the scopes MultiSelect label is visually hidden.
*/
hideScopesLabel: PropTypes.bool,
/** @type {string} The label text for the search text input. */
labelText: PropTypes.string.isRequired,
/** @type {Function} Function handler for when the user changes their query search. */
onChange: PropTypes.func,
/** @type {Function} Function handler for when the user submits a search. */
onSubmit: PropTypes.func,
/** @type {string} Placeholder text to be displayed in the search input. */
placeholderText: PropTypes.string.isRequired,
/** @type {Function} Function to get the text for each scope to display in dropdown. */
scopeToString: PropTypes.func,
/** @type {Array<any>} Array of allowed search scopes. */
/**@ts-ignore */
scopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
/** @type {string} The name text for the search scope type. */
scopesTypeLabel: conditionalScopePropValidator,
/** @type {Array<any> Array of initially selected search scopes. */
/**@ts-ignore */
selectedScopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
/**
* Optional custom sorting algorithm for an array of scope items.
* By default, scope items are sorted in ascending alphabetical order,
* with "selected" items moved to the start of the scope items array.
*/
sortItems: PropTypes.func,
/** @type {string} The label text for the search submit button. */
submitLabel: PropTypes.string.isRequired,
/** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
translateWithId: PropTypes.func,
/** @type {string} Search query value. */
value: PropTypes.string,
...deprecatedProps
};
//#endregion
export { SearchBar };