{"version":3,"file":"IconButton.cjs","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * The placement of the tooltip, if `tooltip` is provided.\n   */\n  tooltipPlacement?: React.ComponentProps<typeof Tooltip>[\"placement\"];\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    tooltipPlacement,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? (\n    <Tooltip label={tooltip} placement={tooltipPlacement}>\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AA+DA,IAAa,cAAA,GAAA,MAAA,YAGX,SAAS,WACT,EACE,OAAO,WACP,UACA,WACA,WACA,OAAO,QACP,OACA,UACA,aACA,SACA,kBACA,eAAe,OACf,GAAG,SAEL,KACA;CAMA,MAAM,SACJ,iBAAA,GAAA,kBAAA,KAAC,uBAAA,gBAAD;EACE,IAAG;EACE;EACL,YAAA,GAAA,WAAA,SATuB,0BAAA,QAAO,gBAAgB,WAAW;IAC1D,0BAAA,QAAO,cAAc;IACrB,0BAAA,QAAO,mBAAmB;GAC5B,CAAC;EAOE,OACE;GACE,0BAA0B;GAC1B,GAAG;GACJ;EAEO;EACV,GAAI;EACJ,kBAAgB;EAChB,aAAW;YAEX,iBAAA,GAAA,kBAAA,KAAC,sBAAA,eAAD;GACa;GACX,QAAQ,WAAW,mCAAmC,KAAA;aAErD,MAAA,QAAM,SAAS,KAAK,SAAS;GAChB,CAAA;EACD,CAAA;AAGnB,QAAO,UACL,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;EAAS,OAAO;EAAS,WAAW;YACjC;EACO,CAAA,GAEV;EAEF"}