@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
77 lines (76 loc) • 2.87 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import classNames from "classnames";
import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
import NavGroup from "./Nav.Group.js";
import NavItem from "./Nav.Item.js";
import useNav from "../../hooks/useNav.js";
import { useNavLocation } from "./NavLocationContext.internal.js";
import useLocale from "../../hooks/useLocale.js";
import Icon from "../Icon/Icon.js";
import bfSpinner from "../../assets/bfSpinner.js";
// todo: for collapsed sidebar, focus input after expanding dropout
/**
* A search input for use inside Nav, expandable in top bar or collapsible sidebar
*/ const NavSearch = /*#__PURE__*/ forwardRef(({ className, onSubmit, loading, itemProps, groupProps, formProps, ...props }, ref)=>{
const { sideCollapsed } = useNav();
const { where } = useNavLocation();
const locale = useLocale();
const searchIcon = /*#__PURE__*/ _jsx(Icon, {
icon: loading ? bfSpinner : faSearch,
spin: loading,
className: classNames({
"bf-input-loading-icon": loading
})
});
const input = /*#__PURE__*/ _jsxs("form", {
noValidate: true,
onSubmit: (e)=>{
e.preventDefault();
onSubmit?.(e);
},
...formProps,
className: classNames(formProps?.className, "bf-input-icon-container", "bf-nav-search-input", {
"bf-input-icon-left": !onSubmit,
"bf-input-icon-right": !!onSubmit
}),
children: [
/*#__PURE__*/ _jsx("input", {
placeholder: locale.search,
"aria-label": locale.search,
...props,
required: true,
className: "bf-input",
ref: ref
}),
onSubmit ? /*#__PURE__*/ _jsx("button", {
type: "submit",
className: "bf-input-icon bf-input-icon-button",
"aria-label": locale.search,
...where === "top" ? {
tabIndex: -1
} : {},
children: searchIcon
}) : /*#__PURE__*/ _jsx("span", {
className: "bf-input-icon",
children: searchIcon
})
]
});
if (where === "side" && sideCollapsed) {
return /*#__PURE__*/ _jsx(NavGroup, {
icon: faSearch,
...groupProps,
className: classNames(groupProps?.className, className, "bf-nav-search-group"),
children: input
});
}
return /*#__PURE__*/ _jsx(NavItem, {
...itemProps,
className: classNames(itemProps?.className, className, "bf-nav-search-item"),
children: input
});
});
NavSearch.displayName = "Nav.Search";
export default NavSearch;