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

Themeable design system for the SEEK Group

"use strict";
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
const lib_components_private_FieldButtonIcon_FieldButtonIcon_cjs = require("../FieldButtonIcon/FieldButtonIcon.cjs");
const lib_components_icons_IconClear_IconClear_cjs = require("../../icons/IconClear/IconClear.cjs");
const ClearField = ({
  hide = false,
  onClear,
  label = "Clear",
  inputRef
}) => {
  const clearHandler = react.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__ */ jsxRuntime.jsx(
    lib_components_Box_Box_cjs.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__ */ jsxRuntime.jsx(
        lib_components_private_FieldButtonIcon_FieldButtonIcon_cjs.FieldButtonIcon,
        {
          label,
          icon: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, {}),
          onMouseDown: clearHandler
        }
      )
    }
  );
};
exports.ClearField = ClearField;