UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

180 lines (179 loc) 7.64 kB
"use strict"; var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { if (k2 === undefined) k2 = k; var desc = Object.getOwnPropertyDescriptor(m, k); if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { desc = { enumerable: true, get: function() { return m[k]; } }; } Object.defineProperty(o, k2, desc); }) : (function(o, m, k, k2) { if (k2 === undefined) k2 = k; o[k2] = m[k]; })); var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { Object.defineProperty(o, "default", { enumerable: true, value: v }); }) : function(o, v) { o["default"] = v; }); var __importStar = (this && this.__importStar) || function (mod) { if (mod && mod.__esModule) return mod; var result = {}; if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); __setModuleDefault(result, mod); return result; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.Breadcrumbs = void 0; const React = __importStar(require("react")); const common_1 = require("@workday/canvas-kit-react/common"); const menu_1 = require("@workday/canvas-kit-react/menu"); const useBreadcrumbsModel_1 = require("./hooks/useBreadcrumbsModel"); const BreadcrumbsList_1 = require("./BreadcrumbsList"); const BreadcrumbsOverflowButton_1 = require("./BreadcrumbsOverflowButton"); const BreadcrumbsItem_1 = require("./BreadcrumbsItem"); const BreadcrumbsLink_1 = require("./BreadcrumbsLink"); const BreadcrumbsCurrentItem_1 = require("./BreadcrumbsCurrentItem"); const BreadcrumbsMenu_1 = require("./BreadcrumbsMenu"); /** * `Breadcrumbs` is a container component that is responsible for creating a * {@link BreadcrumbsModel} and sharing it with its subcomponents using React context. It also * renders `nav` element, and `aria-label` attribute must be provided for this element. * * ```tsx * <Breadcrumbs aria-label="Breadcrumbs"> * <Breadcrumbs.List> * <Breadcrumbs.Item> * <Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link> * <Breadcrumbs.Item> * <Breadcrumbs.Item> * <Breadcrumbs.Link href="/docs/components">Components</Breadcrumbs.Link> * <Breadcrumbs.Item> * <Breadcrumbs.CurrentItem> * <Breadcrumbs.Link href="/docs/components/breadcrumbs">Breadcrumbs</Breadcrumbs.Link> * <Breadcrumbs.CurrentItem> * <Breadcrumbs.List> * </Breadcrumbs> * ``` * * You may pass {@link BreadcrumbsModelConfig} directly to the `Breadcrumbs` component. * * ```tsx * <Breadcrumbs items={[]} aria-label="Breadcrumbs"> * {Child components} * </Breadcrumbs> * ``` * * Alternatively, you may pass in a model using the hoisted model pattern. * * ```tsx * const model = useBreadcrumbsModel({ * items: [], * }); * * <Breadcrumbs model={model} aria-label="Breadcrumbs"> * {Child components} * </Breadcrumbs>; * ``` * * Note that if you pass in a `model` configured with {@link useBreadcrumbsModel}, configuration * props passed to `Breadcrumbs` will be ignored. `aria-label` attribute must be provided for `nav` * element. */ exports.Breadcrumbs = (0, common_1.createContainer)('nav')({ displayName: 'Breadcrumbs', modelHook: useBreadcrumbsModel_1.useBreadcrumbsModel, subComponents: { /** * `Breadcrumbs.List` is a `Flex` component rendered as a `<ul>` element. It is a container for * `Breadcrumbs.Item` subcomponents. It also renders overflow button if `overflowButton` prop * has been passed; * * ```tsx * // without overflow * <Breadcrumbs.List>{Breadcrumbs.Items}</Breadcrumbs.List> * ``` * * ```tsx * // with overflow * <Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}> * {Breadcrumbs.Items} * </Breadcrumbs.List> * ``` * * `Breadcrumbs.List` accepts a `overflowButton` prop allowing to pass specific overflow button. * Breadcrumbs.List with overflow behavior should contain `overflowButton` component with * `aria-label` to render overflow button. */ List: BreadcrumbsList_1.BreadcrumbsList, /** * `Breadcrumbs.Item` is a {@link Flex} component rendered as an `<li>` element. It is a * container for the `Breadcrumbs.Link` subcomponent which provides correct overflow behavior * across all items. * * List items in {@link BreadcrumbsList Breadcrumbs.List}. By default, this item is truncated * with a tooltip at `350px`, but that can be customized with the `maxWidth` prop. * * ```tsx * <Breadcrumbs.Item maxWidth={200}> * <Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link> * </Breadcrumbs.Item> * ``` */ Item: BreadcrumbsItem_1.BreadcrumbsItem, /** * `Breadcrumbs.Link` is a styled `<a>` element that also renders a tooltip if the text is * truncated. The built-in truncation and tooltip functionality provides an easy-to-use, * accessible feature for managing the length of link text. The `maxWidth` is set to `350px` by * default and can be adjusted as needed. Note that tooltips will only render when text is * truncated */ Link: BreadcrumbsLink_1.BreadcrumbsLink, /** * The last element in the list of `Breadcrumbs.Item`s. By default, this item is truncated with * a tooltip at `350px`, But that can be customized with the `maxWidth` prop. * * ```tsx * <Breadcrumbs.CurrentItem maxWidth={200}> * Current Item Text * </Breadcrumbs.CurrentItem> * ``` */ CurrentItem: BreadcrumbsCurrentItem_1.BreadcrumbsCurrentItem, /** * The toggle button for the Breadcrumbs Menu. This button is rendered in the * {@link BreadcrumbsList Breadcrumbs.List} when `overflowButtonProps` passed and becomes * visible when the list overflows. `overflowButtonProps must contain at least `aria-label`. If * you need to pass other props to it, you can do so by adding it to `overflowButtonProps` * passed to the List. * * ```tsx * <Breadcrumbs.List * overflowButtonProps={{ * 'aria-label': 'More links', * onClick={handleOverflowButtonClick} * }} * > * ``` */ OverflowButton: BreadcrumbsOverflowButton_1.BreadcrumbsOverflowButton, /** * The `Breadcrumbs.Menu` uses the {@link Menu} component under the hood. The overflow menu for * Breadcrumbs. If there isn't enough room to render all links, it will automatically overflow * items into this menu. * * ```tsx * <Breadcrumbs.Menu.Popper> * <Breadcrumbs.Menu.Card> * <Breadcrumbs.Menu.List> * {(item: MyActionItem) => <Breadcrumbs.Menu.Item>{item.text}</Breadcrumbs.Menu.Item>} * </Breadcrumbs.Menu.List> * </Breadcrumbs.Menu.Card> * </Breadcrumbs.Menu.Popper> * ``` */ Menu: BreadcrumbsMenu_1.BreadcrumbsMenu, }, })(({ children, ...elemProps }, _, model) => { return (React.createElement(menu_1.Menu, { model: model.menu }, React.createElement("nav", { role: "navigation", ...elemProps }, children))); });