@octopusdeploy/design-system-components/dist/src/components/Input/SearchInput.js

The design systems component library.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchInput = SearchInput;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = __importDefault(require("react"));
const utils_1 = require("../../utils");
const Button_1 = require("../Button");
function SearchInput({ value, placeholder, onChange, autoFocus, accessibleName, fullWidth, onKeyDown, onFocus, onBlur, "aria-activedescendant": ariaActiveDescendant, "aria-controls": ariaControls, "aria-autocomplete": ariaAutoComplete, }) {
    const inputRef = react_1.default.useRef(null);
    const handleChange = (event) => {
        onChange(event.target.value);
    };
    const handleClear = () => {
        onChange("");
        inputRef.current?.focus();
    };
    const handleKeyDown = (event) => {
        onKeyDown?.(event);
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(inputContainerStyles, { [inputFullWidthContainerStyles]: fullWidth }), children: [(0, jsx_runtime_1.jsx)("span", { className: searchIconContainerStyles, children: (0, jsx_runtime_1.jsx)(design_system_icons_1.MagnifyingGlassIcon, { size: 20 }) }), (0, jsx_runtime_1.jsx)("input", { role: "searchbox", ref: inputRef, className: inputStyles, placeholder: placeholder, value: value, onChange: handleChange, autoFocus: autoFocus, onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, "aria-label": accessibleName, "aria-activedescendant": ariaActiveDescendant, "aria-controls": ariaControls, "aria-autocomplete": ariaAutoComplete }), value && (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "ghost", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.XmarkIcon, { size: 20 }), onClick: handleClear, accessibleName: `Clear ${accessibleName}` })] }));
}
const inputHorizontalPadding = design_system_tokens_1.space[12];
const inputContainerStyles = (0, css_1.css)({
    position: "relative",
    display: "flex",
    font: design_system_tokens_1.text.body.regular.medium,
    height: "2.25rem",
    width: "19rem",
    boxSizing: "border-box",
    background: "transparent",
    outline: "transparent 2px solid",
    outlineOffset: `-${design_system_tokens_1.borderWidth["1"]}`,
    border: `solid ${design_system_tokens_1.borderWidth["1"]} ${design_system_tokens_1.themeTokens.color.border.bold}`,
    borderRadius: design_system_tokens_1.borderRadius.small,
    color: design_system_tokens_1.themeTokens.color.text.primary,
    ":hover": {
        borderColor: design_system_tokens_1.themeTokens.color.border.tertiary,
    },
    ":focus-visible, :focus-within": {
        outlineColor: design_system_tokens_1.themeTokens.color.border.selected,
        outlineWidth: design_system_tokens_1.borderWidth[2],
    },
});
const inputFullWidthContainerStyles = (0, css_1.css)({
    width: "100%",
});
const inputStyles = (0, css_1.css)({
    ...utils_1.resetStyles.input,
    flex: 1,
    width: "100%",
    // Padding needs to account for icons on the side e.g. the search icon
    paddingLeft: `calc(${inputHorizontalPadding} * 2 + 1em)`,
    paddingRight: `calc(${inputHorizontalPadding} * 2 + 1em)`,
    "&::placeholder": {
        color: design_system_tokens_1.themeTokens.color.text.tertiary,
        opacity: 1,
    },
});
const searchIconContainerStyles = (0, css_1.css)({
    display: "flex",
    alignItems: "center",
    pointerEvents: "none",
    position: "absolute",
    transitionProperty: "color",
    transitionDuration: "0.2s",
    top: 0,
    bottom: 0,
    left: inputHorizontalPadding,
    color: design_system_tokens_1.themeTokens.color.icon.secondary,
});