{"version":3,"file":"Toast.cjs","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 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 classnames from \"classnames\";\nimport React, {\n  forwardRef,\n  type ComponentType,\n  type MouseEventHandler,\n  type PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toast.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport { IconButton } from \"../Button\";\nimport CloseIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\ntype ToastProps = {\n  className?: string;\n  /**\n   * An icon to display within the button.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n  /**\n   * Whether to show the action button. If true, an action button will be shown on the right side of the toast.\n   */\n  onClose?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to show on the close button. This is only used if `onClose` is provided.\n   */\n  tooltip?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  {\n    children,\n    className,\n    Icon,\n    onClose,\n    tooltip,\n    ...props\n  }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const hasCloseButton = Boolean(onClose);\n\n  const classes = classnames(styles[\"toast-container\"], className, {\n    [styles[\"has-close\"]]: hasCloseButton,\n  });\n\n  return (\n    <Text\n      {...props}\n      as=\"div\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      ref={ref}\n    >\n      <div className={styles.content}>\n        {Icon && (\n          <Icon\n            className={styles.icon}\n            width={20}\n            height={20}\n            aria-hidden={true}\n          />\n        )}\n        {children}\n      </div>\n      {hasCloseButton && (\n        <IconButton\n          size=\"24px\"\n          kind=\"secondary\"\n          noBackground={true}\n          tooltip={tooltip}\n          tooltipPlacement=\"right\"\n          className={styles.close}\n          onClick={onClose}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </Text>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAmCA,IAAa,SAAA,GAAA,MAAA,YAA+C,SAAS,MACnE,EACE,UACA,WACA,MACA,SACA,SACA,GAAG,SAEL,KACA;CACA,MAAM,iBAAiB,QAAQ,QAAQ;CAEvC,MAAM,WAAA,GAAA,WAAA,SAAqB,qBAAA,QAAO,oBAAoB,WAAW,GAC9D,qBAAA,QAAO,eAAe,gBACxB,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAC,aAAA,MAAD;EACE,GAAI;EACJ,IAAG;EACH,MAAK;EACL,QAAO;EACP,WAAW;EACN;YANP,CAQE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAW,qBAAA,QAAO;aAAvB,CACG,QACC,iBAAA,GAAA,kBAAA,KAAC,MAAD;IACE,WAAW,qBAAA,QAAO;IAClB,OAAO;IACP,QAAQ;IACR,eAAa;IACb,CAAA,EAEH,SACG;MACL,kBACC,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;GACE,MAAK;GACL,MAAK;GACL,cAAc;GACL;GACT,kBAAiB;GACjB,WAAW,qBAAA,QAAO;GAClB,SAAS;aAET,iBAAA,GAAA,kBAAA,KAAC,yDAAA,SAAD,EAAa,CAAA;GACF,CAAA,CAEV;;EAET"}