braid-design-system/dist/lib/components/private/Field/ClearField.mjs

Themeable design system for the SEEK Group

import { jsx } from "react/jsx-runtime";
import { useCallback } from "react";
import { Box } from "../../Box/Box.mjs";
import { FieldButtonIcon } from "../FieldButtonIcon/FieldButtonIcon.mjs";
import { IconClear } from "../../icons/IconClear/IconClear.mjs";
const ClearField = ({
  hide = false,
  onClear,
  label = "Clear",
  inputRef
}) => {
  const clearHandler = useCallback(
    (event) => {
      if (typeof onClear !== "function" || event.button !== 0) {
        return;
      }
      onClear();
      if (inputRef && typeof inputRef === "object" && inputRef.current) {
        inputRef.current.focus();
      }
    },
    [onClear, inputRef]
  );
  return /* @__PURE__ */ jsx(
    Box,
    {
      component: "span",
      height: "touchable",
      width: "touchable",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "fast",
      pointerEvents: hide ? "none" : void 0,
      opacity: hide ? 0 : void 0,
      children: /* @__PURE__ */ jsx(
        FieldButtonIcon,
        {
          label,
          icon: /* @__PURE__ */ jsx(IconClear, {}),
          onMouseDown: clearHandler
        }
      )
    }
  );
};
export {
  ClearField
};