import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { forwardRef, useState, useId, useRef, useEffect } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { t as textFieldStyles } from './TextField.module-MRVo1X9H.js';
import { S as SvgClose } from './close-DZj38AEh.js';
import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
import { I as Icon } from './Icon-BMMbp40n.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
import { useTrackingId } from './useTrackingId.js';
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';

import './SearchField.css';const SvgSearch = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }));

const clear = "_clear_14btk_5";
const input = "_input_14btk_1";
const styles = {
	"input-wrapper": "_input-wrapper_14btk_1",
	clear: clear,
	input: input,
	"input--has-value": "_input--has-value_14btk_21"
};

const SearchField$1 = forwardRef(
  function SearchField2(props, ref) {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      className,
      size,
      onChange,
      onClear,
      id: idProp,
      disabled,
      style,
      value,
      placeholder = "Search...",
      autoComplete = "off",
      ...rest
    } = componentProps;
    const [hasValue, setHasValue] = useState(
      rest.defaultValue || value ? true : false
    );
    const placeholderUid = useId();
    const inputRef = useRef(null);
    const styleCombined = { ...style, ...layoutStyles };
    const handleOnChange = (e) => {
      if (e.target.value) {
        setHasValue(true);
      } else {
        setHasValue(false);
      }
      onChange?.(e);
    };
    useEffect(() => {
      if (typeof value === "undefined") return;
      if (value === "" || !value) {
        setHasValue(false);
      } else {
        setHasValue(true);
      }
    }, [value]);
    const handleClear = () => {
      if (!inputRef.current) return;
      if (disabled || rest.readOnly) return;
      onClear?.();
      if (value) {
        inputRef.current.focus();
        return;
      }
      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype,
        "value"
      )?.set;
      nativeInputValueSetter?.call(inputRef.current, "");
      inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
      setHasValue(false);
      inputRef.current.focus();
    };
    const handleClearKeyDown = (e) => {
      if (e.code === "Enter" || e.code === "Space") {
        e.preventDefault();
        handleClear();
      } else if (e.code === "ArrowLeft") {
        e.preventDefault();
        inputRef.current?.focus();
      }
    };
    const handleInputKeyDown = (e) => {
      if (e.code === "ArrowRight" && hasValue) {
        const input = e.currentTarget;
        if (input.selectionStart === input.value.length) {
          e.preventDefault();
          const clearButton = input.parentElement?.querySelector(
            '[role="button"]'
          );
          clearButton?.focus();
        }
      }
    };
    const data = {
      value: props.value,
      defaultValue: props.defaultValue,
      disabled: props.disabled,
      readOnly: props.readOnly,
      size: props.size
    };
    const trackingId = useTrackingId({
      name: "SearchField",
      data,
      hasOverride: !!props["data-tracking-id"]
    });
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: cx(
          textFieldStyles["textfield"],
          styles["searchfield"],
          className
        ),
        "data-anv": "SearchField",
        style: styleCombined,
        children: [
          /* @__PURE__ */ jsxs(
            "div",
            {
              className: cx(
                textFieldStyles["input-wrapper"],
                styles["input-wrapper"],
                {
                  [textFieldStyles["xsmall"]]: size === "xsmall",
                  [textFieldStyles["small"]]: size === "small",
                  [textFieldStyles["large"]]: size === "large"
                }
              ),
              role: "presentation",
              onClick: () => inputRef.current?.focus(),
              children: [
                /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: textFieldStyles["prefix"], children: /* @__PURE__ */ jsx(Icon, { "aria-label": "search", svg: SvgSearch }) }),
                /* @__PURE__ */ jsx(
                  "input",
                  {
                    className: cx(textFieldStyles["input"], styles["input"], {
                      [styles["input--has-value"]]: hasValue
                    }),
                    ref: useMergeRefs([ref, inputRef]),
                    onChange: handleOnChange,
                    onKeyDown: handleInputKeyDown,
                    placeholder,
                    value,
                    type: "search",
                    autoComplete,
                    disabled,
                    "aria-labelledby": placeholderUid,
                    "data-tracking-id": trackingId,
                    ...rest
                  }
                ),
                /* @__PURE__ */ jsx(
                  Icon,
                  {
                    "aria-label": "Clear search",
                    svg: SvgClose,
                    role: "button",
                    onClick: handleClear,
                    onKeyDown: handleClearKeyDown,
                    tabIndex: -1,
                    className: styles["clear"],
                    "aria-disabled": disabled,
                    style: {
                      visibility: hasValue ? "visible" : "hidden"
                    }
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ jsx(SrOnly, { id: placeholderUid, children: placeholder })
        ]
      }
    );
  }
);

const SearchField = forwardRef(
  (props, ref) => {
    return /* @__PURE__ */ jsx(SearchField$1, { ref, ...props });
  }
);
SearchField.displayName = "SearchField";

export { SearchField as S, SvgSearch as a, SearchField$1 as b };
//# sourceMappingURL=SearchField-CsRGYZx3.js.map
