@wordpress/components
Version:
UI components for WordPress.
110 lines (109 loc) • 3.44 kB
JavaScript
// packages/components/src/search-control/index.tsx
import clsx from "clsx";
import { useInstanceId, useMergeRefs } from "@wordpress/compose";
import { __ } from "@wordpress/i18n";
import { search, closeSmall } from "@wordpress/icons";
import { forwardRef, useMemo, useRef } from "@wordpress/element";
import deprecated from "@wordpress/deprecated";
import Button from "../button";
import { InputControlPrefixWrapper } from "../input-control/input-prefix-wrapper";
import { InputControlSuffixWrapper } from "../input-control/input-suffix-wrapper";
import { ContextSystemProvider } from "../context";
import { StyledInputControl, StyledIcon } from "./styles";
import { jsx as _jsx } from "react/jsx-runtime";
function SuffixItem({
searchRef,
value,
onChange,
onClose
}) {
if (!onClose && !value) {
return null;
}
if (onClose) {
deprecated("`onClose` prop in wp.components.SearchControl", {
since: "6.8"
});
}
const onReset = () => {
onChange("");
searchRef.current?.focus();
};
return /* @__PURE__ */ _jsx(InputControlSuffixWrapper, {
variant: "control",
children: /* @__PURE__ */ _jsx(Button, {
size: "small",
icon: closeSmall,
label: onClose ? __("Close search") : __("Reset search"),
onClick: onClose !== null && onClose !== void 0 ? onClose : onReset
})
});
}
function UnforwardedSearchControl({
__nextHasNoMarginBottom = false,
className,
onChange,
value,
label = __("Search"),
placeholder = __("Search"),
hideLabelFromVision = true,
onClose,
size = "default",
...restProps
}, forwardedRef) {
const {
disabled,
...filteredRestProps
} = restProps;
const searchRef = useRef(null);
const instanceId = useInstanceId(SearchControl, "components-search-control");
const contextValue = useMemo(() => ({
BaseControl: {
// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
// to provide backwards compatible margin for SearchControl.
// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
_overrides: {
__nextHasNoMarginBottom
},
__associatedWPComponentName: "SearchControl"
}
}), [__nextHasNoMarginBottom]);
return /* @__PURE__ */ _jsx(ContextSystemProvider, {
value: contextValue,
children: /* @__PURE__ */ _jsx(StyledInputControl, {
__next40pxDefaultSize: true,
id: instanceId,
hideLabelFromVision,
label,
ref: useMergeRefs([searchRef, forwardedRef]),
type: "search",
size,
className: clsx("components-search-control", className),
onChange: (nextValue) => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ""),
autoComplete: "off",
placeholder,
value: value !== null && value !== void 0 ? value : "",
prefix: /* @__PURE__ */ _jsx(InputControlPrefixWrapper, {
variant: "icon",
children: /* @__PURE__ */ _jsx(StyledIcon, {
icon: search,
fill: "currentColor"
})
}),
suffix: /* @__PURE__ */ _jsx(SuffixItem, {
searchRef,
value,
onChange,
onClose
}),
...filteredRestProps
})
});
}
var SearchControl = forwardRef(UnforwardedSearchControl);
var search_control_default = SearchControl;
export {
SearchControl,
search_control_default as default
};
//# sourceMappingURL=index.js.map