@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
180 lines (179 loc) • 7.64 kB
JavaScript
;
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)));
});