@yamada-ui/breadcrumb
Version:
Yamada UI breadcrumb component
310 lines (308 loc) • 11 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
Breadcrumb: () => Breadcrumb,
BreadcrumbEllipsis: () => BreadcrumbEllipsis,
BreadcrumbItem: () => BreadcrumbItem,
BreadcrumbLink: () => BreadcrumbLink,
BreadcrumbSeparator: () => BreadcrumbSeparator
});
module.exports = __toCommonJS(index_exports);
// src/breadcrumb.tsx
var import_core = require("@yamada-ui/core");
var import_icon = require("@yamada-ui/icon");
var import_use_value = require("@yamada-ui/use-value");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var [BreadcrumbProvider, useBreadcrumb] = (0, import_utils.createContext)({
name: "BreadcrumbContext",
errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in "<Breadcrumb />" `
});
var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Breadcrumb", props);
const {
className,
children,
ellipsis,
endBoundaries: _endBoundaries,
gap = "fallback(2, 0.5rem)",
items = [],
separator = "/",
startBoundaries: _startBoundaries,
listProps,
separatorProps,
...rest
} = (0, import_core.omitThemeProps)(mergedProps);
let startBoundaries = (0, import_use_value.useValue)(_startBoundaries);
let endBoundaries = (0, import_use_value.useValue)(_endBoundaries);
if (startBoundaries === 0) startBoundaries = 1;
if (endBoundaries === 0) endBoundaries = 1;
if (startBoundaries) endBoundaries != null ? endBoundaries : endBoundaries = 1;
if (endBoundaries) startBoundaries != null ? startBoundaries : startBoundaries = 1;
const hasBoundaries = (0, import_utils.isNumber)(startBoundaries) && (0, import_utils.isNumber)(endBoundaries);
const exceed = hasBoundaries && startBoundaries + endBoundaries < items.length;
const css = {
alignItems: "center",
display: "flex",
...styles.container
};
const validChildren = (0, import_utils.getValidChildren)(children);
const hasChildren = validChildren.length;
const customEllipsis = (0, import_react.useCallback)(
(providedItems) => {
if (!ellipsis) return null;
const resolvedItems = providedItems != null ? providedItems : items.slice(startBoundaries, items.length - endBoundaries);
return (0, import_utils.runIfFunc)(ellipsis, { items: resolvedItems });
},
[ellipsis, endBoundaries, items, startBoundaries]
);
const cloneChildren = (0, import_react.useMemo)(() => {
if (hasChildren) {
return validChildren.map(
(child, index) => (0, import_react.cloneElement)(child, {
gap,
lastChild: validChildren.length === index + 1,
separator
})
);
} else {
let hiddenEllipsis = [];
return items.map((item, index) => {
var _a, _b, _c;
const {
name,
isCurrentPage,
currentPage = isCurrentPage,
isEllipsisPage,
ellipsisPage = isEllipsisPage,
containerProps,
...rest2
} = item;
const lastChild = items.length === index + 1;
const props2 = {
currentPage,
gap,
separator,
...containerProps
};
if (!hasBoundaries && ellipsisPage) {
hiddenEllipsis.push(item);
return lastChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, lastChild: true, children: (_a = customEllipsis([item])) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {}) }, index) : null;
}
if (hasBoundaries && exceed) {
const lastIndex = items.length - index - 1;
if (startBoundaries <= index && endBoundaries <= lastIndex) {
if (startBoundaries === index) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, children: (_b = customEllipsis()) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {}) }, index);
} else {
return null;
}
}
}
if (hiddenEllipsis.length) {
const resolvedEllipsis = (_c = customEllipsis(hiddenEllipsis)) != null ? _c : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {});
hiddenEllipsis = [];
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, children: resolvedEllipsis }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, lastChild, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbLink, { ...rest2, children: name }) })
] }, index);
} else {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, lastChild, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbLink, { ...rest2, children: name }) }, index);
}
});
}
}, [
hasChildren,
validChildren,
separator,
gap,
items,
hasBoundaries,
exceed,
startBoundaries,
endBoundaries,
customEllipsis
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbProvider, { value: { styles, separatorProps }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.nav,
{
ref,
className: (0, import_utils.cx)("ui-breadcrumb", className),
"aria-label": "Breadcrumb",
__css: styles.container,
...rest,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.ol, { className: "ui-breadcrumb__list", ...listProps, __css: css, children: cloneChildren })
}
) });
});
Breadcrumb.displayName = "Breadcrumb";
Breadcrumb.__ui__ = "Breadcrumb";
var BreadcrumbItem = (0, import_core.forwardRef)(
({
className,
children,
isCurrentPage,
currentPage = isCurrentPage,
gap,
isLastChild,
lastChild = isLastChild,
separator,
separatorProps,
...rest
}, ref) => {
const { styles, separatorProps: groupSeparatorProps } = useBreadcrumb();
const validChildren = (0, import_utils.getValidChildren)(children);
const cloneChildren = validChildren.map((child) => {
if (child.type === BreadcrumbLink) {
return (0, import_react.cloneElement)(child, {
currentPage
});
}
if (child.type === BreadcrumbSeparator) {
return (0, import_react.cloneElement)(child, {
children: child.props.children || separator,
gap,
...groupSeparatorProps,
...separatorProps
});
}
return child;
});
const css = {
alignItems: "center",
display: "inline-flex",
...styles.item
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_core.ui.li,
{
ref,
className: (0, import_utils.cx)("ui-breadcrumb__item", className),
__css: css,
...rest,
children: [
cloneChildren,
!lastChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
BreadcrumbSeparator,
{
gap,
...groupSeparatorProps,
...separatorProps,
children: separator
}
) : null
]
}
);
}
);
BreadcrumbItem.displayName = "BreadcrumbItem";
BreadcrumbItem.__ui__ = "BreadcrumbItem";
var BreadcrumbLink = (0, import_core.forwardRef)(
({
href,
className,
children,
isCurrentPage,
currentPage = isCurrentPage,
...rest
}, ref) => {
const { styles } = useBreadcrumb();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.a,
{
ref,
as: !currentPage ? "a" : "span",
href: !currentPage ? href : void 0,
className: (0, import_utils.cx)("ui-breadcrumb__link", className),
"aria-current": currentPage ? "page" : void 0,
__css: styles.link,
...rest,
children
}
);
}
);
BreadcrumbLink.displayName = "BreadcrumbLink";
BreadcrumbLink.__ui__ = "BreadcrumbLink";
var BreadcrumbSeparator = (0, import_core.forwardRef)(
({ children, gap: mx, ...rest }, ref) => {
const { styles } = useBreadcrumb();
const css = {
mx,
...styles.separator
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.span,
{
ref,
className: "ui-breadcrumb__item__separator",
__css: css,
...rest,
children
}
);
}
);
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
BreadcrumbSeparator.__ui__ = "BreadcrumbSeparator";
var BreadcrumbEllipsis = (0, import_core.forwardRef)(
({ className, children, ...rest }, ref) => {
const { styles } = useBreadcrumb();
const css = {
...styles.ellipsis
};
return children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_icon.Icon,
{
ref,
className: (0, import_utils.cx)("ui-breadcrumb__item__ellipsis", className),
"aria-label": "ellipsis",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5",
viewBox: "0 0 36 24",
xmlns: "http://www.w3.org/2000/svg",
__css: css,
...rest,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "12", fill: "currentColor", r: "2" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", fill: "currentColor", r: "2" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "30", cy: "12", fill: "currentColor", r: "2" })
]
}
);
}
);
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
BreadcrumbEllipsis.__ui__ = "BreadcrumbEllipsis";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator
});
//# sourceMappingURL=index.js.map