@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
84 lines (80 loc) • 3.66 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_chevron_right_icon = require('../icon/icons/chevron-right-icon.cjs');
const require_ellipsis_icon = require('../icon/icons/ellipsis-icon.cjs');
const require_breadcrumb_style = require('./breadcrumb.style.cjs');
const require_use_breadcrumb = require('./use-breadcrumb.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/breadcrumb/breadcrumb.tsx
const { ComponentContext, PropsContext: BreadcrumbPropsContext, useComponentContext, usePropsContext: useBreadcrumbPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("breadcrumb", require_breadcrumb_style.breadcrumbStyle);
/**
* `Breadcrumb` is a component that helps users understand the hierarchy of a website.
*
* @see https://yamada-ui.com/docs/components/breadcrumb
*/
const BreadcrumbRoot = withProvider(({ endBoundaries, gap, separator, startBoundaries, itemProps, listProps, separatorProps,...rest }) => {
const { children, getEllipsisProps, getLinkProps, getListProps, getRootProps } = require_use_breadcrumb.useBreadcrumb({
ellipsis: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbEllipsis, {}),
endBoundaries,
link: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbLink, {}),
startBoundaries,
...rest
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
value: (0, react.useMemo)(() => ({
getEllipsisProps,
getLinkProps
}), [getEllipsisProps, getLinkProps]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.nav, {
...getRootProps(),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbList, {
...getListProps({
gap,
...listProps
}),
children: children.map((child, index) => {
const last = index === children.length - 1;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbItem, {
...itemProps,
children: child
}), !last ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbSeparator, {
...separatorProps,
children: separator
}) : null] }, index);
})
})
})
});
}, "root")();
const BreadcrumbList = withContext("ol", "list")();
const BreadcrumbItem = withContext("li", "item")();
const BreadcrumbSeparator = withContext(BreadcrumbItem, "separator")(({ children,...rest }) => ({
children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_right_icon.ChevronRightIcon, {}),
...rest
}));
const BreadcrumbLink = withContext("a", "link")(void 0, ({ currentPage,...rest }) => {
const { getLinkProps } = useComponentContext();
return {
as: !currentPage ? "a" : "span",
...getLinkProps({
currentPage,
...rest
})
};
});
const BreadcrumbEllipsis = withContext(require_ellipsis_icon.EllipsisIcon, "ellipsis")(void 0, (props) => {
const { getEllipsisProps } = useComponentContext();
return { ...getEllipsisProps(props) };
});
//#endregion
exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
exports.BreadcrumbLink = BreadcrumbLink;
exports.BreadcrumbPropsContext = BreadcrumbPropsContext;
exports.BreadcrumbRoot = BreadcrumbRoot;
exports.useBreadcrumbPropsContext = useBreadcrumbPropsContext;
//# sourceMappingURL=breadcrumb.cjs.map