{"version":3,"file":"Breadcrumb.cjs","names":[],"sources":["../../../src/components/Breadcrumb/Breadcrumb.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 React, {\n  type HTMLProps,\n  type JSX,\n  type MouseEventHandler,\n  type KeyboardEvent,\n} from \"react\";\nimport { IconButton } from \"../Button\";\nimport Chevron from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-left\";\nimport styles from \"./Breadcrumb.module.css\";\nimport { Link } from \"../Link/Link.tsx\";\nimport classNames from \"classnames\";\n\ninterface BreadcrumbProps extends HTMLProps<HTMLElement> {\n  /**\n   * The label for the back button.\n   */\n  backLabel: string;\n  /**\n   * The click handler for the back button.\n   */\n  onBackClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The pages to display in the breadcrumb.\n   * All the pages except the last one are displayed as links.\n   */\n  pages: string[];\n  /**\n   * The click handler for a page.\n   * @param page - The page that was clicked.\n   * @param index - The index of the page that was clicked.\n   */\n  onPageClick: (page: string, index: number) => void;\n}\n\n/**\n * A breadcrumb component.\n */\nexport function Breadcrumb({\n  backLabel,\n  onBackClick,\n  pages,\n  onPageClick,\n  className,\n  ...props\n}: BreadcrumbProps): JSX.Element {\n  return (\n    <nav className={classNames(styles.breadcrumb, className)} {...props}>\n      <IconButton\n        kind=\"secondary\"\n        size=\"28px\"\n        aria-label={backLabel}\n        onClick={onBackClick}\n      >\n        <Chevron />\n      </IconButton>\n      <ol className={styles.pages}>\n        {pages.map((page, index) => (\n          <Page\n            key={index}\n            page={page}\n            isLastPage={index === pages.length - 1}\n            onClick={() => onPageClick(page, index)}\n          />\n        ))}\n      </ol>\n    </nav>\n  );\n}\n\ninterface PageProps {\n  /**\n   * The page to display.\n   */\n  page: string;\n  /**\n   * Whether this is the last page in the breadcrumb.\n   */\n  isLastPage: boolean;\n  /**\n   * The click handler for the page, ignore for last page.\n   */\n  onClick: () => void;\n}\n\n/**\n * A breadcrumb page.\n * If not the last page, the page is displayed in a link.\n */\nfunction Page({ page, isLastPage, onClick }: PageProps): JSX.Element {\n  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    if (event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <li>\n      {isLastPage ? (\n        <span className={styles[\"last-page\"]} aria-current=\"page\">\n          {page}\n        </span>\n      ) : (\n        <Link\n          size=\"sm\"\n          role=\"button\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          tabIndex={0}\n        >\n          {page}\n        </Link>\n      )}\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4CA,SAAgB,WAAW,EACzB,WACA,aACA,OACA,aACA,WACA,GAAG,SAC4B;AAC/B,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,WAAA,SAAsB,0BAAA,QAAO,YAAY,UAAU;EAAE,GAAI;YAA9D,CACE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;GACE,MAAK;GACL,MAAK;GACL,cAAY;GACZ,SAAS;aAET,iBAAA,GAAA,kBAAA,KAAC,gEAAA,SAAD,EAAW,CAAA;GACA,CAAA,EACb,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAI,WAAW,0BAAA,QAAO;aACnB,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAC,MAAD;IAEQ;IACN,YAAY,UAAU,MAAM,SAAS;IACrC,eAAe,YAAY,MAAM,MAAM;IACvC,EAJK,MAIL,CACF;GACC,CAAA,CACD;;;;;;;AAuBV,SAAS,KAAK,EAAE,MAAM,YAAY,WAAmC;CACnE,MAAM,aAAa,UAA4C;AAC7D,MAAI,MAAM,QAAQ,IAChB,UAAS;;AAIb,QACE,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAA,UACG,aACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,WAAW,0BAAA,QAAO;EAAc,gBAAa;YAChD;EACI,CAAA,GAEP,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;EACE,MAAK;EACL,MAAK;EACI;EACE;EACX,UAAU;YAET;EACI,CAAA,EAEN,CAAA"}