<commit_before>import React from "react";
import StyledPill, {
  StyledPillProps,
} from "./pill.style";
import Icon from "../icon";
import tagComponent from "../../__internal__/utils/helpers/tags/tags";
import IconButton from "../icon-button";

export interface PillProps extends StyledPillProps {
  /** The content to display inside of the pill.  */
  children: string;
  /** Change the color of a status pill. */
  colorVariant?: "neutral" | "negative" | "positive" | "warning";
  /** Identifier used for testing purposes, applied to the root element of the component. */
  "data-element"?: string;
  /** Identifier used for testing purposes, applied to the root element of the component. */
  "data-role"?: string;
  /** Fills the pill background with colour. When fill is false only the border is coloured. */
  fill?: boolean;
  /** Callback function for when the pill is clicked. */
  onClick?: React.MouseEventHandler<HTMLSpanElement>;
  /** Callback function for when the remove icon is clicked. */
  onDelete?: React.MouseEventHandler<HTMLButtonElement>;
  /** Sets the type of pill in use. */
  pillRole?: "tag" | "status";
}

const renderCloseIcon = (
  onDelete: React.MouseEventHandler<HTMLButtonElement>
) => (
  <IconButton onAction={onDelete} data-element="close" aria-label="close">
    <Icon type="cross" />
  </IconButton>
);

export const Pill = ({
  wrapText,
  borderColor,
  colorVariant = "neutral",
  children,
  fill = false,
  maxWidth,
  onClick,
  onDelete,
  pillRole = "tag",
  size = "M",
  ...rest
}: PillProps) => (
  <StyledPill
    inFill={fill}
    colorVariant={colorVariant}
    isDeletable={!!onDelete}
    pillRole={pillRole}
    size={size}
    borderColor={borderColor}
    onClick={onClick}
    {...tagComponent("pill", rest)}
    maxWidth={maxWidth}
    wrapText={wrapText}
    {...rest}
  >
    {children}
    {onDelete && renderCloseIcon(onDelete)}
  </StyledPill>
);

export default Pill;<commit_msg>fix(pill): fix event handlers types<commit_after>import React from "react";
import StyledPill, { StyledPillProps } from "./pill.style";
import Icon from "../icon";
import tagComponent from "../../__internal__/utils/helpers/tags/tags";
import IconButton from "../icon-button";

export interface PillProps extends StyledPillProps {
  /** The content to display inside of the pill.  */
  children: string;
  /** Change the color of a status pill. */
  colorVariant?: "neutral" | "negative" | "positive" | "warning";
  /** Identifier used for testing purposes, applied to the root element of the component. */
  "data-element"?: string;
  /** Identifier used for testing purposes, applied to the root element of the component. */
  "data-role"?: string;
  /** Fills the pill background with colour. When fill is false only the border is coloured. */
  fill?: boolean;
  /** Callback function for when the pill is clicked. */
  onClick?: (ev: React.MouseEvent<HTMLSpanElement>) => void;
  /** Callback function for when the remove icon is clicked. */
  onDelete?: (
    ev:
      | React.KeyboardEvent<HTMLButtonElement>
      | React.MouseEvent<HTMLButtonElement>
  ) => void;
  /** Sets the type of pill in use. */
  pillRole?: "tag" | "status";
}

export const Pill = ({
  wrapText,
  borderColor,
  colorVariant = "neutral",
  children,
  fill = false,
  maxWidth,
  onClick,
  onDelete,
  pillRole = "tag",
  size = "M",
  ...rest
}: PillProps) => (
  <StyledPill
    inFill={fill}
    colorVariant={colorVariant}
    isDeletable={!!onDelete}
    pillRole={pillRole}
    size={size}
    borderColor={borderColor}
    onClick={onClick}
    {...tagComponent("pill", rest)}
    maxWidth={maxWidth}
    wrapText={wrapText}
    {...rest}
  >
    {children}
    {onDelete && (
      <IconButton onAction={onDelete} data-element="close" aria-label="close">
        <Icon type="cross" />
      </IconButton>
    )}
  </StyledPill>
);

export default Pill;
{'fraction_non_alphanumeric': 0.14091375770020534, 'fraction_numerical': 0.0, 'mean_word_length': 3.541958041958042, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 24, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2350897', 'n_tokens_mistral': 1202, 'n_tokens_neox': 1192, 'n_words': 355}