{"version":3,"file":"NavBar.cjs","names":[],"sources":["../../../src/components/Nav/NavBar.tsx"],"sourcesContent":["// Copyright 2025 New Vector Ltd.\n// Copyright 2023 The Matrix.org Foundation C.I.C.\n//\n// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n// Please see LICENSE files in the repository root for full details.\n\nimport React from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavBarProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n\n  /**\n   * Require a label for navigation landmarks\n   */\n  \"aria-label\": string;\n\n  /**\n   * Accessibility role that defaults to navigation.\n   *\n   * If you pass tablist you must also pass `aria-controls` as prop to your NavItem and must\n   * ensure that the conditions stated in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   * are met.\n   */\n  role?: \"navigation\" | \"tablist\";\n};\n\n/**\n * A navigation bar component\n */\nexport const NavBar = ({\n  children,\n  className,\n  role,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: React.PropsWithChildren<NavBarProps>) => {\n  const classes = classNames(className, styles[\"nav-bar\"]);\n  /**\n   * We sometimes want to use this NavBar for tabs.\n   * This is done by passing `role=tablist` to this component.\n   * By default, this component is used as a navigation bar.\n   *\n   * Depending on this role, a different set of accessibility\n   * attributes need to be applied to the nav/ul element.\n   */\n  const a11yAttributesForNav =\n    role !== \"tablist\"\n      ? /**\n         * If role isn't tablist, default to navigation.\n         */\n        { role: \"navigation\", \"aria-label\": ariaLabel }\n      : /**\n         * If role is tablist, give nav presentation role to remove\n         * any semantic meaning.\n         */\n        { role: \"presentation\" };\n\n  /**\n   * When used as tabs, the tablist role must be applied to ul.\n   * When used as navigation, no special accessibility attribute\n   * is needed for the ul element.\n   */\n  const a11yAttributesForUl =\n    role === \"tablist\" ? { role: \"tablist\", \"aria-label\": ariaLabel } : {};\n\n  return (\n    <nav {...a11yAttributesForNav} {...rest} className={classes}>\n      <ul {...a11yAttributesForUl} className={styles[\"nav-bar-items\"]}>\n        {children}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmCA,IAAa,UAAU,EACrB,UACA,WACA,MACA,cAAc,WACd,GAAG,WACuC;CAC1C,MAAM,WAAA,GAAA,WAAA,SAAqB,WAAW,mBAAA,QAAO,WAAW;;;;;;;;;CASxD,MAAM,uBACJ,SAAS,YAIL;EAAE,MAAM;EAAc,cAAc;EAAW,GAK/C,EAAE,MAAM,gBAAgB;;;;;;CAO9B,MAAM,sBACJ,SAAS,YAAY;EAAE,MAAM;EAAW,cAAc;EAAW,GAAG,EAAE;AAExE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAsB,GAAI;EAAM,WAAW;YAClD,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAI,GAAI;GAAqB,WAAW,mBAAA,QAAO;GAC5C;GACE,CAAA;EACD,CAAA"}