@yamada-ui/breadcrumb 1.3.13-next-20241005220055 → 1.3.13-next-20241008193728
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/breadcrumb.d.mts +20 -20
- package/dist/breadcrumb.d.ts +20 -20
- package/dist/breadcrumb.js +26 -26
- package/dist/breadcrumb.js.map +1 -1
- package/dist/breadcrumb.mjs +1 -1
- package/dist/{chunk-K3D3RBYU.mjs → chunk-CIXCLOTL.mjs} +30 -30
- package/dist/chunk-CIXCLOTL.mjs.map +1 -0
- package/dist/index.js +26 -26
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +5 -5
- package/dist/chunk-K3D3RBYU.mjs.map +0 -1
package/dist/breadcrumb.d.mts
CHANGED
@@ -1,48 +1,48 @@
|
|
1
1
|
import * as _yamada_ui_core from '@yamada-ui/core';
|
2
|
-
import { HTMLUIProps, ThemeProps,
|
2
|
+
import { HTMLUIProps, ThemeProps, Token, CSSUIProps, CSSUIObject } from '@yamada-ui/core';
|
3
3
|
import { IconProps } from '@yamada-ui/icon';
|
4
|
-
import { ReactNode } from 'react';
|
4
|
+
import { ReactNode, ReactElement } from 'react';
|
5
5
|
|
6
6
|
interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {
|
7
7
|
name?: ReactNode;
|
8
|
-
containerProps?: Omit<BreadcrumbItemProps, "isLastChild">;
|
9
8
|
isEllipsisPage?: boolean;
|
9
|
+
containerProps?: Omit<BreadcrumbItemProps, "isLastChild">;
|
10
10
|
}
|
11
11
|
interface BreadcrumbOptions {
|
12
12
|
/**
|
13
|
-
* The
|
14
|
-
|
15
|
-
|
13
|
+
* The icon to be used in the ellipsis.
|
14
|
+
*/
|
15
|
+
ellipsis?: ((props: {
|
16
|
+
items: BreadcrumbGenerateItem[];
|
17
|
+
}) => ReactNode) | ReactNode;
|
18
|
+
/**
|
19
|
+
* Number of elements visible on the end(right) edges.
|
16
20
|
*/
|
17
|
-
|
21
|
+
endBoundaries?: Token<number>;
|
18
22
|
/**
|
19
23
|
* The left and right margin applied to the separator.
|
20
24
|
*
|
21
25
|
* @default '2'
|
22
26
|
*/
|
23
27
|
gap?: CSSUIProps["mx"];
|
24
|
-
/**
|
25
|
-
* Props for ol element.
|
26
|
-
*/
|
27
|
-
listProps?: HTMLUIProps<"ol">;
|
28
28
|
/**
|
29
29
|
* If provided, generate breadcrumb items based on items.
|
30
30
|
*/
|
31
31
|
items?: BreadcrumbGenerateItem[];
|
32
32
|
/**
|
33
|
-
*
|
33
|
+
* The visual separator between each breadcrumb item.
|
34
|
+
*
|
35
|
+
* @default '/'
|
34
36
|
*/
|
35
|
-
|
37
|
+
separator?: ReactElement | string;
|
36
38
|
/**
|
37
|
-
* Number of elements visible on the
|
39
|
+
* Number of elements visible on the start(left) edges.
|
38
40
|
*/
|
39
|
-
|
41
|
+
startBoundaries?: Token<number>;
|
40
42
|
/**
|
41
|
-
*
|
43
|
+
* Props for ol element.
|
42
44
|
*/
|
43
|
-
|
44
|
-
items: BreadcrumbGenerateItem[];
|
45
|
-
}) => ReactNode);
|
45
|
+
listProps?: HTMLUIProps<"ol">;
|
46
46
|
}
|
47
47
|
interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"Breadcrumb">, BreadcrumbOptions {
|
48
48
|
}
|
@@ -52,7 +52,7 @@ interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"B
|
|
52
52
|
* @see Docs https://yamada-ui.com/components/navigation/breadcrumb
|
53
53
|
*/
|
54
54
|
declare const Breadcrumb: _yamada_ui_core.Component<"nav", BreadcrumbProps>;
|
55
|
-
interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "
|
55
|
+
interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "gap" | "separator"> {
|
56
56
|
/**
|
57
57
|
* If `true`, change to span element.
|
58
58
|
*
|
package/dist/breadcrumb.d.ts
CHANGED
@@ -1,48 +1,48 @@
|
|
1
1
|
import * as _yamada_ui_core from '@yamada-ui/core';
|
2
|
-
import { HTMLUIProps, ThemeProps,
|
2
|
+
import { HTMLUIProps, ThemeProps, Token, CSSUIProps, CSSUIObject } from '@yamada-ui/core';
|
3
3
|
import { IconProps } from '@yamada-ui/icon';
|
4
|
-
import { ReactNode } from 'react';
|
4
|
+
import { ReactNode, ReactElement } from 'react';
|
5
5
|
|
6
6
|
interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {
|
7
7
|
name?: ReactNode;
|
8
|
-
containerProps?: Omit<BreadcrumbItemProps, "isLastChild">;
|
9
8
|
isEllipsisPage?: boolean;
|
9
|
+
containerProps?: Omit<BreadcrumbItemProps, "isLastChild">;
|
10
10
|
}
|
11
11
|
interface BreadcrumbOptions {
|
12
12
|
/**
|
13
|
-
* The
|
14
|
-
|
15
|
-
|
13
|
+
* The icon to be used in the ellipsis.
|
14
|
+
*/
|
15
|
+
ellipsis?: ((props: {
|
16
|
+
items: BreadcrumbGenerateItem[];
|
17
|
+
}) => ReactNode) | ReactNode;
|
18
|
+
/**
|
19
|
+
* Number of elements visible on the end(right) edges.
|
16
20
|
*/
|
17
|
-
|
21
|
+
endBoundaries?: Token<number>;
|
18
22
|
/**
|
19
23
|
* The left and right margin applied to the separator.
|
20
24
|
*
|
21
25
|
* @default '2'
|
22
26
|
*/
|
23
27
|
gap?: CSSUIProps["mx"];
|
24
|
-
/**
|
25
|
-
* Props for ol element.
|
26
|
-
*/
|
27
|
-
listProps?: HTMLUIProps<"ol">;
|
28
28
|
/**
|
29
29
|
* If provided, generate breadcrumb items based on items.
|
30
30
|
*/
|
31
31
|
items?: BreadcrumbGenerateItem[];
|
32
32
|
/**
|
33
|
-
*
|
33
|
+
* The visual separator between each breadcrumb item.
|
34
|
+
*
|
35
|
+
* @default '/'
|
34
36
|
*/
|
35
|
-
|
37
|
+
separator?: ReactElement | string;
|
36
38
|
/**
|
37
|
-
* Number of elements visible on the
|
39
|
+
* Number of elements visible on the start(left) edges.
|
38
40
|
*/
|
39
|
-
|
41
|
+
startBoundaries?: Token<number>;
|
40
42
|
/**
|
41
|
-
*
|
43
|
+
* Props for ol element.
|
42
44
|
*/
|
43
|
-
|
44
|
-
items: BreadcrumbGenerateItem[];
|
45
|
-
}) => ReactNode);
|
45
|
+
listProps?: HTMLUIProps<"ol">;
|
46
46
|
}
|
47
47
|
interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"Breadcrumb">, BreadcrumbOptions {
|
48
48
|
}
|
@@ -52,7 +52,7 @@ interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"B
|
|
52
52
|
* @see Docs https://yamada-ui.com/components/navigation/breadcrumb
|
53
53
|
*/
|
54
54
|
declare const Breadcrumb: _yamada_ui_core.Component<"nav", BreadcrumbProps>;
|
55
|
-
interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "
|
55
|
+
interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "gap" | "separator"> {
|
56
56
|
/**
|
57
57
|
* If `true`, change to span element.
|
58
58
|
*
|
package/dist/breadcrumb.js
CHANGED
@@ -43,13 +43,13 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
|
|
43
43
|
const {
|
44
44
|
className,
|
45
45
|
children,
|
46
|
-
|
46
|
+
ellipsis,
|
47
|
+
endBoundaries: _endBoundaries,
|
47
48
|
gap = "fallback(2, 0.5rem)",
|
48
|
-
listProps,
|
49
49
|
items = [],
|
50
|
+
separator = "/",
|
50
51
|
startBoundaries: _startBoundaries,
|
51
|
-
|
52
|
-
ellipsis,
|
52
|
+
listProps,
|
53
53
|
...rest
|
54
54
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
55
55
|
let startBoundaries = (0, import_use_value.useValue)(_startBoundaries);
|
@@ -61,8 +61,8 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
|
|
61
61
|
const hasBoundaries = (0, import_utils.isNumber)(startBoundaries) && (0, import_utils.isNumber)(endBoundaries);
|
62
62
|
const isExceed = hasBoundaries && startBoundaries + endBoundaries < items.length;
|
63
63
|
const css = {
|
64
|
-
display: "flex",
|
65
64
|
alignItems: "center",
|
65
|
+
display: "flex",
|
66
66
|
...styles.container
|
67
67
|
};
|
68
68
|
const validChildren = (0, import_utils.getValidChildren)(children);
|
@@ -79,21 +79,21 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
|
|
79
79
|
if (hasChildren) {
|
80
80
|
return validChildren.map(
|
81
81
|
(child, index) => (0, import_react.cloneElement)(child, {
|
82
|
-
separator,
|
83
82
|
gap,
|
84
|
-
isLastChild: validChildren.length === index + 1
|
83
|
+
isLastChild: validChildren.length === index + 1,
|
84
|
+
separator
|
85
85
|
})
|
86
86
|
);
|
87
87
|
} else {
|
88
88
|
let hiddenEllipsis = [];
|
89
89
|
return items.map((item, index) => {
|
90
90
|
var _a, _b, _c;
|
91
|
-
const {
|
91
|
+
const { name, isCurrentPage, isEllipsisPage, containerProps, ...rest2 } = item;
|
92
92
|
const isLastChild = items.length === index + 1;
|
93
93
|
const props2 = {
|
94
|
-
separator,
|
95
94
|
gap,
|
96
95
|
isCurrentPage,
|
96
|
+
separator,
|
97
97
|
...containerProps
|
98
98
|
};
|
99
99
|
if (!hasBoundaries && isEllipsisPage) {
|
@@ -139,8 +139,8 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
|
|
139
139
|
{
|
140
140
|
ref,
|
141
141
|
className: (0, import_utils.cx)("ui-breadcrumb", className),
|
142
|
-
__css: styles.container,
|
143
142
|
"aria-label": "Breadcrumb",
|
143
|
+
__css: styles.container,
|
144
144
|
...rest,
|
145
145
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.ol, { className: "ui-breadcrumb__list", ...listProps, __css: css, children: cloneChildren })
|
146
146
|
}
|
@@ -152,10 +152,10 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
|
|
152
152
|
({
|
153
153
|
className,
|
154
154
|
children,
|
155
|
-
|
155
|
+
gap,
|
156
156
|
isCurrentPage,
|
157
157
|
isLastChild,
|
158
|
-
|
158
|
+
separator,
|
159
159
|
...rest
|
160
160
|
}, ref) => {
|
161
161
|
const styles = useBreadcrumb();
|
@@ -168,15 +168,15 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
|
|
168
168
|
}
|
169
169
|
if (child.type === BreadcrumbSeparator) {
|
170
170
|
return (0, import_react.cloneElement)(child, {
|
171
|
-
|
172
|
-
|
171
|
+
children: child.props.children || separator,
|
172
|
+
gap
|
173
173
|
});
|
174
174
|
}
|
175
175
|
return child;
|
176
176
|
});
|
177
177
|
const css = {
|
178
|
-
display: "inline-flex",
|
179
178
|
alignItems: "center",
|
179
|
+
display: "inline-flex",
|
180
180
|
...styles.item
|
181
181
|
};
|
182
182
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
@@ -197,7 +197,7 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
|
|
197
197
|
BreadcrumbItem.displayName = "BreadcrumbItem";
|
198
198
|
BreadcrumbItem.__ui__ = "BreadcrumbItem";
|
199
199
|
var BreadcrumbLink = (0, import_core.forwardRef)(
|
200
|
-
({ className, children, isCurrentPage,
|
200
|
+
({ href, className, children, isCurrentPage, ...rest }, ref) => {
|
201
201
|
const styles = useBreadcrumb();
|
202
202
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
203
203
|
import_core.ui.a,
|
@@ -205,8 +205,8 @@ var BreadcrumbLink = (0, import_core.forwardRef)(
|
|
205
205
|
ref,
|
206
206
|
as: !isCurrentPage ? "a" : "span",
|
207
207
|
href: !isCurrentPage ? href : void 0,
|
208
|
-
"aria-current": isCurrentPage ? "page" : void 0,
|
209
208
|
className: (0, import_utils.cx)("ui-breadcrumb__link", className),
|
209
|
+
"aria-current": isCurrentPage ? "page" : void 0,
|
210
210
|
__css: styles.link,
|
211
211
|
...rest,
|
212
212
|
children
|
@@ -238,7 +238,7 @@ var BreadcrumbSeparator = (0, import_core.forwardRef)(
|
|
238
238
|
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
239
239
|
BreadcrumbSeparator.__ui__ = "BreadcrumbSeparator";
|
240
240
|
var BreadcrumbEllipsis = (0, import_core.forwardRef)(
|
241
|
-
({
|
241
|
+
({ className, children, ...rest }, ref) => {
|
242
242
|
const styles = useBreadcrumb();
|
243
243
|
const css = {
|
244
244
|
...styles.ellipsis
|
@@ -247,20 +247,20 @@ var BreadcrumbEllipsis = (0, import_core.forwardRef)(
|
|
247
247
|
import_icon.Icon,
|
248
248
|
{
|
249
249
|
ref,
|
250
|
-
"aria-label": "ellipsis",
|
251
250
|
className: (0, import_utils.cx)("ui-breadcrumb__item__ellipsis", className),
|
252
|
-
|
253
|
-
xmlns: "http://www.w3.org/2000/svg",
|
254
|
-
viewBox: "0 0 36 24",
|
251
|
+
"aria-label": "ellipsis",
|
255
252
|
stroke: "currentColor",
|
256
|
-
strokeWidth: "1.5",
|
257
253
|
strokeLinecap: "round",
|
258
254
|
strokeLinejoin: "round",
|
255
|
+
strokeWidth: "1.5",
|
256
|
+
viewBox: "0 0 36 24",
|
257
|
+
xmlns: "http://www.w3.org/2000/svg",
|
258
|
+
__css: css,
|
259
259
|
...rest,
|
260
260
|
children: [
|
261
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "12",
|
262
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12",
|
263
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "30", cy: "12",
|
261
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "12", fill: "currentColor", r: "2" }),
|
262
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", fill: "currentColor", r: "2" }),
|
263
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "30", cy: "12", fill: "currentColor", r: "2" })
|
264
264
|
]
|
265
265
|
}
|
266
266
|
);
|
package/dist/breadcrumb.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n CSSUIProps,\n Token,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n createContext,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, cloneElement, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<{\n [key: string]: CSSUIObject\n}>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n isEllipsisPage?: boolean\n}\n\ninterface BreadcrumbOptions {\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: string | JSX.Element\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ReactNode\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n}\n\nexport interface BreadcrumbProps\n extends Omit<HTMLUIProps<\"nav\">, \"gap\">,\n ThemeProps<\"Breadcrumb\">,\n BreadcrumbOptions {}\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n separator = \"/\",\n gap = \"fallback(2, 0.5rem)\",\n listProps,\n items = [],\n startBoundaries: _startBoundaries,\n endBoundaries: _endBoundaries,\n ellipsis,\n ...rest\n } = omitThemeProps(mergedProps)\n let startBoundaries = useValue(_startBoundaries)\n let endBoundaries = useValue(_endBoundaries)\n\n if (startBoundaries === 0) startBoundaries = 1\n if (endBoundaries === 0) endBoundaries = 1\n\n if (startBoundaries) endBoundaries ??= 1\n if (endBoundaries) startBoundaries ??= 1\n\n const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n const isExceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n display: \"flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n const hasChildren = validChildren.length\n\n const customEllipsis = useCallback(\n (providedItems?: BreadcrumbGenerateItem[]) => {\n if (!ellipsis) return null\n\n const resolvedItems =\n providedItems ??\n items.slice(startBoundaries!, items.length - endBoundaries!)\n\n return runIfFunc(ellipsis, { items: resolvedItems })\n },\n [ellipsis, endBoundaries, items, startBoundaries],\n )\n\n const cloneChildren = useMemo(() => {\n if (hasChildren) {\n return validChildren.map((child, index) =>\n cloneElement(child, {\n separator,\n gap,\n isLastChild: validChildren.length === index + 1,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest } =\n item\n const isLastChild = items.length === index + 1\n const props: BreadcrumbItemProps = {\n separator,\n gap,\n isCurrentPage,\n ...containerProps,\n }\n\n if (!hasBoundaries && isEllipsisPage) {\n hiddenEllipsis.push(item)\n\n return isLastChild ? (\n <BreadcrumbItem key={index} {...props} isLastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && isExceed) {\n const lastIndex = items.length - index - 1\n\n if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n if (startBoundaries === index) {\n return (\n <BreadcrumbItem key={index} {...props}>\n {customEllipsis() ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n )\n } else {\n return null\n }\n }\n }\n\n if (hiddenEllipsis.length) {\n const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n <BreadcrumbEllipsis />\n )\n\n hiddenEllipsis = []\n\n return (\n <Fragment key={index}>\n <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n <BreadcrumbItem {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n )\n }\n })\n }\n }, [\n hasChildren,\n validChildren,\n separator,\n gap,\n items,\n hasBoundaries,\n isExceed,\n startBoundaries,\n endBoundaries,\n customEllipsis,\n ])\n\n return (\n <BreadcrumbProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-breadcrumb\", className)}\n __css={styles.container}\n aria-label=\"Breadcrumb\"\n {...rest}\n >\n <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n {cloneChildren}\n </ui.ol>\n </ui.nav>\n </BreadcrumbProvider>\n )\n})\n\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"separator\" | \"gap\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n isLastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n separator,\n isCurrentPage,\n isLastChild,\n gap,\n ...rest\n },\n ref,\n ) => {\n const styles = useBreadcrumb()\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type === BreadcrumbLink) {\n return cloneElement(child, {\n isCurrentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n gap,\n children: child.props.children || separator,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.item,\n }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-breadcrumb__item\", className)}\n __css={css}\n {...rest}\n >\n {cloneChildren}\n\n {!isLastChild ? (\n <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ className, children, isCurrentPage, href, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n return (\n <ui.a\n ref={ref}\n as={!isCurrentPage ? \"a\" : \"span\"}\n href={!isCurrentPage ? href : undefined}\n aria-current={isCurrentPage ? \"page\" : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\n BreadcrumbSeparatorOptions {}\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n ({ children, gap: mx, ...rest }, ref) => {\n const styles = useBreadcrumb()\n const css: CSSUIObject = {\n mx,\n ...styles.separator,\n }\n\n return (\n <ui.span\n ref={ref}\n className=\"ui-breadcrumb__item__separator\"\n __css={css}\n {...rest}\n >\n {children}\n </ui.span>\n )\n },\n)\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ children, className, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n const css: CSSUIObject = {\n ...styles.ellipsis,\n }\n\n return (\n children ?? (\n <Icon\n ref={ref}\n aria-label=\"ellipsis\"\n className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n __css={css}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 36 24\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n <circle cx=\"30\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}
|
1
|
+
{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { ReactElement, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement, Fragment, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<{\n [key: string]: CSSUIObject | undefined\n}>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n isEllipsisPage?: boolean\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n}\n\ninterface BreadcrumbOptions {\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n | ReactNode\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: ReactElement | string\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n}\n\nexport interface BreadcrumbProps\n extends Omit<HTMLUIProps<\"nav\">, \"gap\">,\n ThemeProps<\"Breadcrumb\">,\n BreadcrumbOptions {}\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n ellipsis,\n endBoundaries: _endBoundaries,\n gap = \"fallback(2, 0.5rem)\",\n items = [],\n separator = \"/\",\n startBoundaries: _startBoundaries,\n listProps,\n ...rest\n } = omitThemeProps(mergedProps)\n let startBoundaries = useValue(_startBoundaries)\n let endBoundaries = useValue(_endBoundaries)\n\n if (startBoundaries === 0) startBoundaries = 1\n if (endBoundaries === 0) endBoundaries = 1\n\n if (startBoundaries) endBoundaries ??= 1\n if (endBoundaries) startBoundaries ??= 1\n\n const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n const isExceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n const hasChildren = validChildren.length\n\n const customEllipsis = useCallback(\n (providedItems?: BreadcrumbGenerateItem[]) => {\n if (!ellipsis) return null\n\n const resolvedItems =\n providedItems ??\n items.slice(startBoundaries!, items.length - endBoundaries!)\n\n return runIfFunc(ellipsis, { items: resolvedItems })\n },\n [ellipsis, endBoundaries, items, startBoundaries],\n )\n\n const cloneChildren = useMemo(() => {\n if (hasChildren) {\n return validChildren.map((child, index) =>\n cloneElement(child, {\n gap,\n isLastChild: validChildren.length === index + 1,\n separator,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n const { name, isCurrentPage, isEllipsisPage, containerProps, ...rest } =\n item\n const isLastChild = items.length === index + 1\n const props: BreadcrumbItemProps = {\n gap,\n isCurrentPage,\n separator,\n ...containerProps,\n }\n\n if (!hasBoundaries && isEllipsisPage) {\n hiddenEllipsis.push(item)\n\n return isLastChild ? (\n <BreadcrumbItem key={index} {...props} isLastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && isExceed) {\n const lastIndex = items.length - index - 1\n\n if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n if (startBoundaries === index) {\n return (\n <BreadcrumbItem key={index} {...props}>\n {customEllipsis() ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n )\n } else {\n return null\n }\n }\n }\n\n if (hiddenEllipsis.length) {\n const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n <BreadcrumbEllipsis />\n )\n\n hiddenEllipsis = []\n\n return (\n <Fragment key={index}>\n <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n <BreadcrumbItem {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n )\n }\n })\n }\n }, [\n hasChildren,\n validChildren,\n separator,\n gap,\n items,\n hasBoundaries,\n isExceed,\n startBoundaries,\n endBoundaries,\n customEllipsis,\n ])\n\n return (\n <BreadcrumbProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-breadcrumb\", className)}\n aria-label=\"Breadcrumb\"\n __css={styles.container}\n {...rest}\n >\n <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n {cloneChildren}\n </ui.ol>\n </ui.nav>\n </BreadcrumbProvider>\n )\n})\n\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"gap\" | \"separator\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n isLastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n gap,\n isCurrentPage,\n isLastChild,\n separator,\n ...rest\n },\n ref,\n ) => {\n const styles = useBreadcrumb()\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type === BreadcrumbLink) {\n return cloneElement(child, {\n isCurrentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n children: child.props.children || separator,\n gap,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n ...styles.item,\n }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-breadcrumb__item\", className)}\n __css={css}\n {...rest}\n >\n {cloneChildren}\n\n {!isLastChild ? (\n <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ href, className, children, isCurrentPage, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n return (\n <ui.a\n ref={ref}\n as={!isCurrentPage ? \"a\" : \"span\"}\n href={!isCurrentPage ? href : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n aria-current={isCurrentPage ? \"page\" : undefined}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\n BreadcrumbSeparatorOptions {}\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n ({ children, gap: mx, ...rest }, ref) => {\n const styles = useBreadcrumb()\n const css: CSSUIObject = {\n mx,\n ...styles.separator,\n }\n\n return (\n <ui.span\n ref={ref}\n className=\"ui-breadcrumb__item__separator\"\n __css={css}\n {...rest}\n >\n {children}\n </ui.span>\n )\n },\n)\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ className, children, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n const css: CSSUIObject = {\n ...styles.ellipsis,\n }\n\n return (\n children ?? (\n <Icon\n ref={ref}\n className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n aria-label=\"ellipsis\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n viewBox=\"0 0 36 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n __css={css}\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"20\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"30\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}
|
package/dist/breadcrumb.mjs
CHANGED
@@ -2,21 +2,21 @@
|
|
2
2
|
|
3
3
|
// src/breadcrumb.tsx
|
4
4
|
import {
|
5
|
-
ui,
|
6
5
|
forwardRef,
|
7
6
|
omitThemeProps,
|
7
|
+
ui,
|
8
8
|
useComponentMultiStyle
|
9
9
|
} from "@yamada-ui/core";
|
10
10
|
import { Icon } from "@yamada-ui/icon";
|
11
11
|
import { useValue } from "@yamada-ui/use-value";
|
12
12
|
import {
|
13
|
-
cx,
|
14
13
|
createContext,
|
14
|
+
cx,
|
15
15
|
getValidChildren,
|
16
16
|
isNumber,
|
17
17
|
runIfFunc
|
18
18
|
} from "@yamada-ui/utils";
|
19
|
-
import {
|
19
|
+
import { cloneElement, Fragment, useCallback, useMemo } from "react";
|
20
20
|
import { jsx, jsxs } from "react/jsx-runtime";
|
21
21
|
var [BreadcrumbProvider, useBreadcrumb] = createContext({
|
22
22
|
name: "BreadcrumbContext",
|
@@ -27,13 +27,13 @@ var Breadcrumb = forwardRef((props, ref) => {
|
|
27
27
|
const {
|
28
28
|
className,
|
29
29
|
children,
|
30
|
-
|
30
|
+
ellipsis,
|
31
|
+
endBoundaries: _endBoundaries,
|
31
32
|
gap = "fallback(2, 0.5rem)",
|
32
|
-
listProps,
|
33
33
|
items = [],
|
34
|
+
separator = "/",
|
34
35
|
startBoundaries: _startBoundaries,
|
35
|
-
|
36
|
-
ellipsis,
|
36
|
+
listProps,
|
37
37
|
...rest
|
38
38
|
} = omitThemeProps(mergedProps);
|
39
39
|
let startBoundaries = useValue(_startBoundaries);
|
@@ -45,8 +45,8 @@ var Breadcrumb = forwardRef((props, ref) => {
|
|
45
45
|
const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries);
|
46
46
|
const isExceed = hasBoundaries && startBoundaries + endBoundaries < items.length;
|
47
47
|
const css = {
|
48
|
-
display: "flex",
|
49
48
|
alignItems: "center",
|
49
|
+
display: "flex",
|
50
50
|
...styles.container
|
51
51
|
};
|
52
52
|
const validChildren = getValidChildren(children);
|
@@ -63,21 +63,21 @@ var Breadcrumb = forwardRef((props, ref) => {
|
|
63
63
|
if (hasChildren) {
|
64
64
|
return validChildren.map(
|
65
65
|
(child, index) => cloneElement(child, {
|
66
|
-
separator,
|
67
66
|
gap,
|
68
|
-
isLastChild: validChildren.length === index + 1
|
67
|
+
isLastChild: validChildren.length === index + 1,
|
68
|
+
separator
|
69
69
|
})
|
70
70
|
);
|
71
71
|
} else {
|
72
72
|
let hiddenEllipsis = [];
|
73
73
|
return items.map((item, index) => {
|
74
74
|
var _a, _b, _c;
|
75
|
-
const {
|
75
|
+
const { name, isCurrentPage, isEllipsisPage, containerProps, ...rest2 } = item;
|
76
76
|
const isLastChild = items.length === index + 1;
|
77
77
|
const props2 = {
|
78
|
-
separator,
|
79
78
|
gap,
|
80
79
|
isCurrentPage,
|
80
|
+
separator,
|
81
81
|
...containerProps
|
82
82
|
};
|
83
83
|
if (!hasBoundaries && isEllipsisPage) {
|
@@ -123,8 +123,8 @@ var Breadcrumb = forwardRef((props, ref) => {
|
|
123
123
|
{
|
124
124
|
ref,
|
125
125
|
className: cx("ui-breadcrumb", className),
|
126
|
-
__css: styles.container,
|
127
126
|
"aria-label": "Breadcrumb",
|
127
|
+
__css: styles.container,
|
128
128
|
...rest,
|
129
129
|
children: /* @__PURE__ */ jsx(ui.ol, { className: "ui-breadcrumb__list", ...listProps, __css: css, children: cloneChildren })
|
130
130
|
}
|
@@ -136,10 +136,10 @@ var BreadcrumbItem = forwardRef(
|
|
136
136
|
({
|
137
137
|
className,
|
138
138
|
children,
|
139
|
-
|
139
|
+
gap,
|
140
140
|
isCurrentPage,
|
141
141
|
isLastChild,
|
142
|
-
|
142
|
+
separator,
|
143
143
|
...rest
|
144
144
|
}, ref) => {
|
145
145
|
const styles = useBreadcrumb();
|
@@ -152,15 +152,15 @@ var BreadcrumbItem = forwardRef(
|
|
152
152
|
}
|
153
153
|
if (child.type === BreadcrumbSeparator) {
|
154
154
|
return cloneElement(child, {
|
155
|
-
|
156
|
-
|
155
|
+
children: child.props.children || separator,
|
156
|
+
gap
|
157
157
|
});
|
158
158
|
}
|
159
159
|
return child;
|
160
160
|
});
|
161
161
|
const css = {
|
162
|
-
display: "inline-flex",
|
163
162
|
alignItems: "center",
|
163
|
+
display: "inline-flex",
|
164
164
|
...styles.item
|
165
165
|
};
|
166
166
|
return /* @__PURE__ */ jsxs(
|
@@ -181,7 +181,7 @@ var BreadcrumbItem = forwardRef(
|
|
181
181
|
BreadcrumbItem.displayName = "BreadcrumbItem";
|
182
182
|
BreadcrumbItem.__ui__ = "BreadcrumbItem";
|
183
183
|
var BreadcrumbLink = forwardRef(
|
184
|
-
({ className, children, isCurrentPage,
|
184
|
+
({ href, className, children, isCurrentPage, ...rest }, ref) => {
|
185
185
|
const styles = useBreadcrumb();
|
186
186
|
return /* @__PURE__ */ jsx(
|
187
187
|
ui.a,
|
@@ -189,8 +189,8 @@ var BreadcrumbLink = forwardRef(
|
|
189
189
|
ref,
|
190
190
|
as: !isCurrentPage ? "a" : "span",
|
191
191
|
href: !isCurrentPage ? href : void 0,
|
192
|
-
"aria-current": isCurrentPage ? "page" : void 0,
|
193
192
|
className: cx("ui-breadcrumb__link", className),
|
193
|
+
"aria-current": isCurrentPage ? "page" : void 0,
|
194
194
|
__css: styles.link,
|
195
195
|
...rest,
|
196
196
|
children
|
@@ -222,7 +222,7 @@ var BreadcrumbSeparator = forwardRef(
|
|
222
222
|
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
223
223
|
BreadcrumbSeparator.__ui__ = "BreadcrumbSeparator";
|
224
224
|
var BreadcrumbEllipsis = forwardRef(
|
225
|
-
({
|
225
|
+
({ className, children, ...rest }, ref) => {
|
226
226
|
const styles = useBreadcrumb();
|
227
227
|
const css = {
|
228
228
|
...styles.ellipsis
|
@@ -231,20 +231,20 @@ var BreadcrumbEllipsis = forwardRef(
|
|
231
231
|
Icon,
|
232
232
|
{
|
233
233
|
ref,
|
234
|
-
"aria-label": "ellipsis",
|
235
234
|
className: cx("ui-breadcrumb__item__ellipsis", className),
|
236
|
-
|
237
|
-
xmlns: "http://www.w3.org/2000/svg",
|
238
|
-
viewBox: "0 0 36 24",
|
235
|
+
"aria-label": "ellipsis",
|
239
236
|
stroke: "currentColor",
|
240
|
-
strokeWidth: "1.5",
|
241
237
|
strokeLinecap: "round",
|
242
238
|
strokeLinejoin: "round",
|
239
|
+
strokeWidth: "1.5",
|
240
|
+
viewBox: "0 0 36 24",
|
241
|
+
xmlns: "http://www.w3.org/2000/svg",
|
242
|
+
__css: css,
|
243
243
|
...rest,
|
244
244
|
children: [
|
245
|
-
/* @__PURE__ */ jsx("circle", { cx: "10", cy: "12",
|
246
|
-
/* @__PURE__ */ jsx("circle", { cx: "20", cy: "12",
|
247
|
-
/* @__PURE__ */ jsx("circle", { cx: "30", cy: "12",
|
245
|
+
/* @__PURE__ */ jsx("circle", { cx: "10", cy: "12", fill: "currentColor", r: "2" }),
|
246
|
+
/* @__PURE__ */ jsx("circle", { cx: "20", cy: "12", fill: "currentColor", r: "2" }),
|
247
|
+
/* @__PURE__ */ jsx("circle", { cx: "30", cy: "12", fill: "currentColor", r: "2" })
|
248
248
|
]
|
249
249
|
}
|
250
250
|
);
|
@@ -260,4 +260,4 @@ export {
|
|
260
260
|
BreadcrumbSeparator,
|
261
261
|
BreadcrumbEllipsis
|
262
262
|
};
|
263
|
-
//# sourceMappingURL=chunk-
|
263
|
+
//# sourceMappingURL=chunk-CIXCLOTL.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { ReactElement, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement, Fragment, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<{\n [key: string]: CSSUIObject | undefined\n}>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n isEllipsisPage?: boolean\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n}\n\ninterface BreadcrumbOptions {\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n | ReactNode\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: ReactElement | string\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n}\n\nexport interface BreadcrumbProps\n extends Omit<HTMLUIProps<\"nav\">, \"gap\">,\n ThemeProps<\"Breadcrumb\">,\n BreadcrumbOptions {}\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n ellipsis,\n endBoundaries: _endBoundaries,\n gap = \"fallback(2, 0.5rem)\",\n items = [],\n separator = \"/\",\n startBoundaries: _startBoundaries,\n listProps,\n ...rest\n } = omitThemeProps(mergedProps)\n let startBoundaries = useValue(_startBoundaries)\n let endBoundaries = useValue(_endBoundaries)\n\n if (startBoundaries === 0) startBoundaries = 1\n if (endBoundaries === 0) endBoundaries = 1\n\n if (startBoundaries) endBoundaries ??= 1\n if (endBoundaries) startBoundaries ??= 1\n\n const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n const isExceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n const hasChildren = validChildren.length\n\n const customEllipsis = useCallback(\n (providedItems?: BreadcrumbGenerateItem[]) => {\n if (!ellipsis) return null\n\n const resolvedItems =\n providedItems ??\n items.slice(startBoundaries!, items.length - endBoundaries!)\n\n return runIfFunc(ellipsis, { items: resolvedItems })\n },\n [ellipsis, endBoundaries, items, startBoundaries],\n )\n\n const cloneChildren = useMemo(() => {\n if (hasChildren) {\n return validChildren.map((child, index) =>\n cloneElement(child, {\n gap,\n isLastChild: validChildren.length === index + 1,\n separator,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n const { name, isCurrentPage, isEllipsisPage, containerProps, ...rest } =\n item\n const isLastChild = items.length === index + 1\n const props: BreadcrumbItemProps = {\n gap,\n isCurrentPage,\n separator,\n ...containerProps,\n }\n\n if (!hasBoundaries && isEllipsisPage) {\n hiddenEllipsis.push(item)\n\n return isLastChild ? (\n <BreadcrumbItem key={index} {...props} isLastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && isExceed) {\n const lastIndex = items.length - index - 1\n\n if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n if (startBoundaries === index) {\n return (\n <BreadcrumbItem key={index} {...props}>\n {customEllipsis() ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n )\n } else {\n return null\n }\n }\n }\n\n if (hiddenEllipsis.length) {\n const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n <BreadcrumbEllipsis />\n )\n\n hiddenEllipsis = []\n\n return (\n <Fragment key={index}>\n <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n <BreadcrumbItem {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n )\n }\n })\n }\n }, [\n hasChildren,\n validChildren,\n separator,\n gap,\n items,\n hasBoundaries,\n isExceed,\n startBoundaries,\n endBoundaries,\n customEllipsis,\n ])\n\n return (\n <BreadcrumbProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-breadcrumb\", className)}\n aria-label=\"Breadcrumb\"\n __css={styles.container}\n {...rest}\n >\n <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n {cloneChildren}\n </ui.ol>\n </ui.nav>\n </BreadcrumbProvider>\n )\n})\n\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"gap\" | \"separator\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n isLastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n gap,\n isCurrentPage,\n isLastChild,\n separator,\n ...rest\n },\n ref,\n ) => {\n const styles = useBreadcrumb()\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type === BreadcrumbLink) {\n return cloneElement(child, {\n isCurrentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n children: child.props.children || separator,\n gap,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n ...styles.item,\n }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-breadcrumb__item\", className)}\n __css={css}\n {...rest}\n >\n {cloneChildren}\n\n {!isLastChild ? (\n <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ href, className, children, isCurrentPage, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n return (\n <ui.a\n ref={ref}\n as={!isCurrentPage ? \"a\" : \"span\"}\n href={!isCurrentPage ? href : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n aria-current={isCurrentPage ? \"page\" : undefined}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\n BreadcrumbSeparatorOptions {}\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n ({ children, gap: mx, ...rest }, ref) => {\n const styles = useBreadcrumb()\n const css: CSSUIObject = {\n mx,\n ...styles.separator,\n }\n\n return (\n <ui.span\n ref={ref}\n className=\"ui-breadcrumb__item__separator\"\n __css={css}\n {...rest}\n >\n {children}\n </ui.span>\n )\n },\n)\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ className, children, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n const css: CSSUIObject = {\n ...styles.ellipsis,\n }\n\n return (\n children ?? (\n <Icon\n ref={ref}\n className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n aria-label=\"ellipsis\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n viewBox=\"0 0 36 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n __css={css}\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"20\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"30\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}
|
package/dist/index.js
CHANGED
@@ -45,13 +45,13 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
|
|
45
45
|
const {
|
46
46
|
className,
|
47
47
|
children,
|
48
|
-
|
48
|
+
ellipsis,
|
49
|
+
endBoundaries: _endBoundaries,
|
49
50
|
gap = "fallback(2, 0.5rem)",
|
50
|
-
listProps,
|
51
51
|
items = [],
|
52
|
+
separator = "/",
|
52
53
|
startBoundaries: _startBoundaries,
|
53
|
-
|
54
|
-
ellipsis,
|
54
|
+
listProps,
|
55
55
|
...rest
|
56
56
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
57
57
|
let startBoundaries = (0, import_use_value.useValue)(_startBoundaries);
|
@@ -63,8 +63,8 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
|
|
63
63
|
const hasBoundaries = (0, import_utils.isNumber)(startBoundaries) && (0, import_utils.isNumber)(endBoundaries);
|
64
64
|
const isExceed = hasBoundaries && startBoundaries + endBoundaries < items.length;
|
65
65
|
const css = {
|
66
|
-
display: "flex",
|
67
66
|
alignItems: "center",
|
67
|
+
display: "flex",
|
68
68
|
...styles.container
|
69
69
|
};
|
70
70
|
const validChildren = (0, import_utils.getValidChildren)(children);
|
@@ -81,21 +81,21 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
|
|
81
81
|
if (hasChildren) {
|
82
82
|
return validChildren.map(
|
83
83
|
(child, index) => (0, import_react.cloneElement)(child, {
|
84
|
-
separator,
|
85
84
|
gap,
|
86
|
-
isLastChild: validChildren.length === index + 1
|
85
|
+
isLastChild: validChildren.length === index + 1,
|
86
|
+
separator
|
87
87
|
})
|
88
88
|
);
|
89
89
|
} else {
|
90
90
|
let hiddenEllipsis = [];
|
91
91
|
return items.map((item, index) => {
|
92
92
|
var _a, _b, _c;
|
93
|
-
const {
|
93
|
+
const { name, isCurrentPage, isEllipsisPage, containerProps, ...rest2 } = item;
|
94
94
|
const isLastChild = items.length === index + 1;
|
95
95
|
const props2 = {
|
96
|
-
separator,
|
97
96
|
gap,
|
98
97
|
isCurrentPage,
|
98
|
+
separator,
|
99
99
|
...containerProps
|
100
100
|
};
|
101
101
|
if (!hasBoundaries && isEllipsisPage) {
|
@@ -141,8 +141,8 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
|
|
141
141
|
{
|
142
142
|
ref,
|
143
143
|
className: (0, import_utils.cx)("ui-breadcrumb", className),
|
144
|
-
__css: styles.container,
|
145
144
|
"aria-label": "Breadcrumb",
|
145
|
+
__css: styles.container,
|
146
146
|
...rest,
|
147
147
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.ol, { className: "ui-breadcrumb__list", ...listProps, __css: css, children: cloneChildren })
|
148
148
|
}
|
@@ -154,10 +154,10 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
|
|
154
154
|
({
|
155
155
|
className,
|
156
156
|
children,
|
157
|
-
|
157
|
+
gap,
|
158
158
|
isCurrentPage,
|
159
159
|
isLastChild,
|
160
|
-
|
160
|
+
separator,
|
161
161
|
...rest
|
162
162
|
}, ref) => {
|
163
163
|
const styles = useBreadcrumb();
|
@@ -170,15 +170,15 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
|
|
170
170
|
}
|
171
171
|
if (child.type === BreadcrumbSeparator) {
|
172
172
|
return (0, import_react.cloneElement)(child, {
|
173
|
-
|
174
|
-
|
173
|
+
children: child.props.children || separator,
|
174
|
+
gap
|
175
175
|
});
|
176
176
|
}
|
177
177
|
return child;
|
178
178
|
});
|
179
179
|
const css = {
|
180
|
-
display: "inline-flex",
|
181
180
|
alignItems: "center",
|
181
|
+
display: "inline-flex",
|
182
182
|
...styles.item
|
183
183
|
};
|
184
184
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
@@ -199,7 +199,7 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
|
|
199
199
|
BreadcrumbItem.displayName = "BreadcrumbItem";
|
200
200
|
BreadcrumbItem.__ui__ = "BreadcrumbItem";
|
201
201
|
var BreadcrumbLink = (0, import_core.forwardRef)(
|
202
|
-
({ className, children, isCurrentPage,
|
202
|
+
({ href, className, children, isCurrentPage, ...rest }, ref) => {
|
203
203
|
const styles = useBreadcrumb();
|
204
204
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
205
205
|
import_core.ui.a,
|
@@ -207,8 +207,8 @@ var BreadcrumbLink = (0, import_core.forwardRef)(
|
|
207
207
|
ref,
|
208
208
|
as: !isCurrentPage ? "a" : "span",
|
209
209
|
href: !isCurrentPage ? href : void 0,
|
210
|
-
"aria-current": isCurrentPage ? "page" : void 0,
|
211
210
|
className: (0, import_utils.cx)("ui-breadcrumb__link", className),
|
211
|
+
"aria-current": isCurrentPage ? "page" : void 0,
|
212
212
|
__css: styles.link,
|
213
213
|
...rest,
|
214
214
|
children
|
@@ -240,7 +240,7 @@ var BreadcrumbSeparator = (0, import_core.forwardRef)(
|
|
240
240
|
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
241
241
|
BreadcrumbSeparator.__ui__ = "BreadcrumbSeparator";
|
242
242
|
var BreadcrumbEllipsis = (0, import_core.forwardRef)(
|
243
|
-
({
|
243
|
+
({ className, children, ...rest }, ref) => {
|
244
244
|
const styles = useBreadcrumb();
|
245
245
|
const css = {
|
246
246
|
...styles.ellipsis
|
@@ -249,20 +249,20 @@ var BreadcrumbEllipsis = (0, import_core.forwardRef)(
|
|
249
249
|
import_icon.Icon,
|
250
250
|
{
|
251
251
|
ref,
|
252
|
-
"aria-label": "ellipsis",
|
253
252
|
className: (0, import_utils.cx)("ui-breadcrumb__item__ellipsis", className),
|
254
|
-
|
255
|
-
xmlns: "http://www.w3.org/2000/svg",
|
256
|
-
viewBox: "0 0 36 24",
|
253
|
+
"aria-label": "ellipsis",
|
257
254
|
stroke: "currentColor",
|
258
|
-
strokeWidth: "1.5",
|
259
255
|
strokeLinecap: "round",
|
260
256
|
strokeLinejoin: "round",
|
257
|
+
strokeWidth: "1.5",
|
258
|
+
viewBox: "0 0 36 24",
|
259
|
+
xmlns: "http://www.w3.org/2000/svg",
|
260
|
+
__css: css,
|
261
261
|
...rest,
|
262
262
|
children: [
|
263
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "12",
|
264
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12",
|
265
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "30", cy: "12",
|
263
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "12", fill: "currentColor", r: "2" }),
|
264
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", fill: "currentColor", r: "2" }),
|
265
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "30", cy: "12", fill: "currentColor", r: "2" })
|
266
266
|
]
|
267
267
|
}
|
268
268
|
);
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/breadcrumb.tsx"],"sourcesContent":["export {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n} from \"./breadcrumb\"\nexport type {\n BreadcrumbProps,\n BreadcrumbItemProps,\n BreadcrumbLinkProps,\n BreadcrumbSeparatorProps,\n BreadcrumbEllipsisProps,\n BreadcrumbGenerateItem,\n} from \"./breadcrumb\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n CSSUIProps,\n Token,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n createContext,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, cloneElement, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<{\n [key: string]: CSSUIObject\n}>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n isEllipsisPage?: boolean\n}\n\ninterface BreadcrumbOptions {\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: string | JSX.Element\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ReactNode\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n}\n\nexport interface BreadcrumbProps\n extends Omit<HTMLUIProps<\"nav\">, \"gap\">,\n ThemeProps<\"Breadcrumb\">,\n BreadcrumbOptions {}\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n separator = \"/\",\n gap = \"fallback(2, 0.5rem)\",\n listProps,\n items = [],\n startBoundaries: _startBoundaries,\n endBoundaries: _endBoundaries,\n ellipsis,\n ...rest\n } = omitThemeProps(mergedProps)\n let startBoundaries = useValue(_startBoundaries)\n let endBoundaries = useValue(_endBoundaries)\n\n if (startBoundaries === 0) startBoundaries = 1\n if (endBoundaries === 0) endBoundaries = 1\n\n if (startBoundaries) endBoundaries ??= 1\n if (endBoundaries) startBoundaries ??= 1\n\n const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n const isExceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n display: \"flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n const hasChildren = validChildren.length\n\n const customEllipsis = useCallback(\n (providedItems?: BreadcrumbGenerateItem[]) => {\n if (!ellipsis) return null\n\n const resolvedItems =\n providedItems ??\n items.slice(startBoundaries!, items.length - endBoundaries!)\n\n return runIfFunc(ellipsis, { items: resolvedItems })\n },\n [ellipsis, endBoundaries, items, startBoundaries],\n )\n\n const cloneChildren = useMemo(() => {\n if (hasChildren) {\n return validChildren.map((child, index) =>\n cloneElement(child, {\n separator,\n gap,\n isLastChild: validChildren.length === index + 1,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest } =\n item\n const isLastChild = items.length === index + 1\n const props: BreadcrumbItemProps = {\n separator,\n gap,\n isCurrentPage,\n ...containerProps,\n }\n\n if (!hasBoundaries && isEllipsisPage) {\n hiddenEllipsis.push(item)\n\n return isLastChild ? (\n <BreadcrumbItem key={index} {...props} isLastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && isExceed) {\n const lastIndex = items.length - index - 1\n\n if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n if (startBoundaries === index) {\n return (\n <BreadcrumbItem key={index} {...props}>\n {customEllipsis() ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n )\n } else {\n return null\n }\n }\n }\n\n if (hiddenEllipsis.length) {\n const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n <BreadcrumbEllipsis />\n )\n\n hiddenEllipsis = []\n\n return (\n <Fragment key={index}>\n <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n <BreadcrumbItem {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n )\n }\n })\n }\n }, [\n hasChildren,\n validChildren,\n separator,\n gap,\n items,\n hasBoundaries,\n isExceed,\n startBoundaries,\n endBoundaries,\n customEllipsis,\n ])\n\n return (\n <BreadcrumbProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-breadcrumb\", className)}\n __css={styles.container}\n aria-label=\"Breadcrumb\"\n {...rest}\n >\n <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n {cloneChildren}\n </ui.ol>\n </ui.nav>\n </BreadcrumbProvider>\n )\n})\n\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"separator\" | \"gap\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n isLastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n separator,\n isCurrentPage,\n isLastChild,\n gap,\n ...rest\n },\n ref,\n ) => {\n const styles = useBreadcrumb()\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type === BreadcrumbLink) {\n return cloneElement(child, {\n isCurrentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n gap,\n children: child.props.children || separator,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.item,\n }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-breadcrumb__item\", className)}\n __css={css}\n {...rest}\n >\n {cloneChildren}\n\n {!isLastChild ? (\n <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ className, children, isCurrentPage, href, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n return (\n <ui.a\n ref={ref}\n as={!isCurrentPage ? \"a\" : \"span\"}\n href={!isCurrentPage ? href : undefined}\n aria-current={isCurrentPage ? \"page\" : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\n BreadcrumbSeparatorOptions {}\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n ({ children, gap: mx, ...rest }, ref) => {\n const styles = useBreadcrumb()\n const css: CSSUIObject = {\n mx,\n ...styles.separator,\n }\n\n return (\n <ui.span\n ref={ref}\n className=\"ui-breadcrumb__item__separator\"\n __css={css}\n {...rest}\n >\n {children}\n </ui.span>\n )\n },\n)\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ children, className, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n const css: CSSUIObject = {\n ...styles.ellipsis,\n }\n\n return (\n children ?? (\n <Icon\n ref={ref}\n aria-label=\"ellipsis\"\n className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n __css={css}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 36 24\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n <circle cx=\"30\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOA,kBAKO;AACP,kBAAqB;AAErB,uBAAyB;AACzB,mBAMO;AAEP,mBAA6D;AA4IpB;AA1IzC,IAAM,CAAC,oBAAoB,aAAa,QAAI,4BAEzC;AAAA,EACD,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAuDM,IAAM,iBAAa,wBAAmC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,cAAc,KAAK;AAExE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN;AAAA,IACA,QAAQ,CAAC;AAAA,IACT,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,MAAI,sBAAkB,2BAAS,gBAAgB;AAC/C,MAAI,oBAAgB,2BAAS,cAAc;AAE3C,MAAI,oBAAoB,EAAG,mBAAkB;AAC7C,MAAI,kBAAkB,EAAG,iBAAgB;AAEzC,MAAI,gBAAiB,yDAAkB;AACvC,MAAI,cAAe,+DAAoB;AAEvC,QAAM,oBAAgB,uBAAS,eAAe,SAAK,uBAAS,aAAa;AACzE,QAAM,WACJ,iBAAiB,kBAAmB,gBAAiB,MAAM;AAE7D,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAG,OAAO;AAAA,EACZ;AAEA,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,cAAc,cAAc;AAElC,QAAM,qBAAiB;AAAA,IACrB,CAAC,kBAA6C;AAC5C,UAAI,CAAC,SAAU,QAAO;AAEtB,YAAM,gBACJ,wCACA,MAAM,MAAM,iBAAkB,MAAM,SAAS,aAAc;AAE7D,iBAAO,wBAAU,UAAU,EAAE,OAAO,cAAc,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,UAAU,eAAe,OAAO,eAAe;AAAA,EAClD;AAEA,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,aAAa;AACf,aAAO,cAAc;AAAA,QAAI,CAAC,OAAO,cAC/B,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA,aAAa,cAAc,WAAW,QAAQ;AAAA,QAChD,CAAC;AAAA,MACH;AAAA,IACF,OAAO;AACL,UAAI,iBAA2C,CAAC;AAEhD,aAAO,MAAM,IAAI,CAAC,MAAM,UAAU;AApJxC;AAqJQ,cAAM,EAAE,gBAAgB,MAAM,eAAe,gBAAgB,GAAGA,MAAK,IACnE;AACF,cAAM,cAAc,MAAM,WAAW,QAAQ;AAC7C,cAAMC,SAA6B;AAAA,UACjC;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACL;AAEA,YAAI,CAAC,iBAAiB,gBAAgB;AACpC,yBAAe,KAAK,IAAI;AAExB,iBAAO,cACL,4CAAC,kBAA4B,GAAGA,QAAO,aAAW,MAC/C,+BAAe,CAAC,IAAI,CAAC,MAArB,YAA0B,4CAAC,sBAAmB,KAD5B,KAErB,IACE;AAAA,QACN;AAEA,YAAI,iBAAiB,UAAU;AAC7B,gBAAM,YAAY,MAAM,SAAS,QAAQ;AAEzC,cAAI,mBAAoB,SAAS,iBAAkB,WAAW;AAC5D,gBAAI,oBAAoB,OAAO;AAC7B,qBACE,4CAAC,kBAA4B,GAAGA,QAC7B,+BAAe,MAAf,YAAoB,4CAAC,sBAAmB,KADtB,KAErB;AAAA,YAEJ,OAAO;AACL,qBAAO;AAAA,YACT;AAAA,UACF;AAAA,QACF;AAEA,YAAI,eAAe,QAAQ;AACzB,gBAAM,oBAAmB,oBAAe,cAAc,MAA7B,YACvB,4CAAC,sBAAmB;AAGtB,2BAAiB,CAAC;AAElB,iBACE,6CAAC,yBACC;AAAA,wDAAC,kBAAgB,GAAGA,QAAQ,4BAAiB;AAAA,YAE7C,4CAAC,kBAAgB,GAAGA,QAAO,aACzB,sDAAC,kBAAgB,GAAGD,OAAO,gBAAK,GAClC;AAAA,eALa,KAMf;AAAA,QAEJ,OAAO;AACL,iBACE,4CAAC,kBAA4B,GAAGC,QAAO,aACrC,sDAAC,kBAAgB,GAAGD,OAAO,gBAAK,KADb,KAErB;AAAA,QAEJ;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,4CAAC,sBAAmB,OAAO,QACzB;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,iBAAiB,SAAS;AAAA,MACxC,OAAO,OAAO;AAAA,MACd,cAAW;AAAA,MACV,GAAG;AAAA,MAEJ,sDAAC,eAAG,IAAH,EAAM,WAAU,uBAAuB,GAAG,WAAW,OAAO,KAC1D,yBACH;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,WAAW,cAAc;AACzB,WAAW,SAAS;AAsBb,IAAM,qBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,SAAS,cAAc;AAE7B,UAAM,oBAAgB,+BAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc,IAAI,CAAC,UAAU;AACjD,UAAI,MAAM,SAAS,gBAAgB;AACjC,mBAAO,2BAAa,OAAO;AAAA,UACzB;AAAA,QACF,CAAC;AAAA,MACH;AAEA,UAAI,MAAM,SAAS,qBAAqB;AACtC,mBAAO,2BAAa,OAAO;AAAA,UACzB;AAAA,UACA,UAAU,MAAM,MAAM,YAAY;AAAA,QACpC,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,UAEA,CAAC,cACA,4CAAC,uBAAoB,KAAW,qBAAU,IACxC;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAejB,IAAM,qBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,eAAe,MAAM,GAAG,KAAK,GAAG,QAAQ;AAC9D,UAAM,SAAS,cAAc;AAE7B,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,CAAC,gBAAgB,MAAM;AAAA,QAC3B,MAAM,CAAC,gBAAgB,OAAO;AAAA,QAC9B,gBAAc,gBAAgB,SAAS;AAAA,QACvC,eAAW,iBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO,OAAO;AAAA,QACb,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAajB,IAAM,0BAAsB;AAAA,EACjC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,KAAK,GAAG,QAAQ;AACvC,UAAM,SAAS,cAAc;AAC7B,UAAM,MAAmB;AAAA,MACvB;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,SAAS;AAQtB,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AACzC,UAAM,SAAS,cAAc;AAE7B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,8BACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAW;AAAA,QACX,eAAW,iBAAG,iCAAiC,SAAS;AAAA,QACxD,OAAO;AAAA,QACP,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACd,GAAG;AAAA,QAEJ;AAAA,sDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA;AAAA;AAAA,IACpD;AAAA,EAGN;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":["rest","props"]}
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/breadcrumb.tsx"],"sourcesContent":["export {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbSeparator,\n} from \"./breadcrumb\"\nexport type {\n BreadcrumbEllipsisProps,\n BreadcrumbGenerateItem,\n BreadcrumbItemProps,\n BreadcrumbLinkProps,\n BreadcrumbProps,\n BreadcrumbSeparatorProps,\n} from \"./breadcrumb\"\n","import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { ReactElement, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement, Fragment, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<{\n [key: string]: CSSUIObject | undefined\n}>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n isEllipsisPage?: boolean\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n}\n\ninterface BreadcrumbOptions {\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n | ReactNode\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: ReactElement | string\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n}\n\nexport interface BreadcrumbProps\n extends Omit<HTMLUIProps<\"nav\">, \"gap\">,\n ThemeProps<\"Breadcrumb\">,\n BreadcrumbOptions {}\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n ellipsis,\n endBoundaries: _endBoundaries,\n gap = \"fallback(2, 0.5rem)\",\n items = [],\n separator = \"/\",\n startBoundaries: _startBoundaries,\n listProps,\n ...rest\n } = omitThemeProps(mergedProps)\n let startBoundaries = useValue(_startBoundaries)\n let endBoundaries = useValue(_endBoundaries)\n\n if (startBoundaries === 0) startBoundaries = 1\n if (endBoundaries === 0) endBoundaries = 1\n\n if (startBoundaries) endBoundaries ??= 1\n if (endBoundaries) startBoundaries ??= 1\n\n const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n const isExceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n const hasChildren = validChildren.length\n\n const customEllipsis = useCallback(\n (providedItems?: BreadcrumbGenerateItem[]) => {\n if (!ellipsis) return null\n\n const resolvedItems =\n providedItems ??\n items.slice(startBoundaries!, items.length - endBoundaries!)\n\n return runIfFunc(ellipsis, { items: resolvedItems })\n },\n [ellipsis, endBoundaries, items, startBoundaries],\n )\n\n const cloneChildren = useMemo(() => {\n if (hasChildren) {\n return validChildren.map((child, index) =>\n cloneElement(child, {\n gap,\n isLastChild: validChildren.length === index + 1,\n separator,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n const { name, isCurrentPage, isEllipsisPage, containerProps, ...rest } =\n item\n const isLastChild = items.length === index + 1\n const props: BreadcrumbItemProps = {\n gap,\n isCurrentPage,\n separator,\n ...containerProps,\n }\n\n if (!hasBoundaries && isEllipsisPage) {\n hiddenEllipsis.push(item)\n\n return isLastChild ? (\n <BreadcrumbItem key={index} {...props} isLastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && isExceed) {\n const lastIndex = items.length - index - 1\n\n if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n if (startBoundaries === index) {\n return (\n <BreadcrumbItem key={index} {...props}>\n {customEllipsis() ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n )\n } else {\n return null\n }\n }\n }\n\n if (hiddenEllipsis.length) {\n const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n <BreadcrumbEllipsis />\n )\n\n hiddenEllipsis = []\n\n return (\n <Fragment key={index}>\n <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n <BreadcrumbItem {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n )\n }\n })\n }\n }, [\n hasChildren,\n validChildren,\n separator,\n gap,\n items,\n hasBoundaries,\n isExceed,\n startBoundaries,\n endBoundaries,\n customEllipsis,\n ])\n\n return (\n <BreadcrumbProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-breadcrumb\", className)}\n aria-label=\"Breadcrumb\"\n __css={styles.container}\n {...rest}\n >\n <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n {cloneChildren}\n </ui.ol>\n </ui.nav>\n </BreadcrumbProvider>\n )\n})\n\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"gap\" | \"separator\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n isLastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n gap,\n isCurrentPage,\n isLastChild,\n separator,\n ...rest\n },\n ref,\n ) => {\n const styles = useBreadcrumb()\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type === BreadcrumbLink) {\n return cloneElement(child, {\n isCurrentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n children: child.props.children || separator,\n gap,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n ...styles.item,\n }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-breadcrumb__item\", className)}\n __css={css}\n {...rest}\n >\n {cloneChildren}\n\n {!isLastChild ? (\n <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ href, className, children, isCurrentPage, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n return (\n <ui.a\n ref={ref}\n as={!isCurrentPage ? \"a\" : \"span\"}\n href={!isCurrentPage ? href : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n aria-current={isCurrentPage ? \"page\" : undefined}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\n BreadcrumbSeparatorOptions {}\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n ({ children, gap: mx, ...rest }, ref) => {\n const styles = useBreadcrumb()\n const css: CSSUIObject = {\n mx,\n ...styles.separator,\n }\n\n return (\n <ui.span\n ref={ref}\n className=\"ui-breadcrumb__item__separator\"\n __css={css}\n {...rest}\n >\n {children}\n </ui.span>\n )\n },\n)\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ className, children, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n const css: CSSUIObject = {\n ...styles.ellipsis,\n }\n\n return (\n children ?? (\n <Icon\n ref={ref}\n className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n aria-label=\"ellipsis\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n viewBox=\"0 0 36 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n __css={css}\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"20\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"30\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@yamada-ui/breadcrumb",
|
3
|
-
"version": "1.3.13-next-
|
3
|
+
"version": "1.3.13-next-20241008193728",
|
4
4
|
"description": "Yamada UI breadcrumb component",
|
5
5
|
"keywords": [
|
6
6
|
"yamada",
|
@@ -36,10 +36,10 @@
|
|
36
36
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
|
-
"@yamada-ui/core": "1.15.2-next-
|
40
|
-
"@yamada-ui/icon": "1.1.8-next-
|
41
|
-
"@yamada-ui/use-value": "1.1.27-next-
|
42
|
-
"@yamada-ui/utils": "1.5.
|
39
|
+
"@yamada-ui/core": "1.15.2-next-20241008193728",
|
40
|
+
"@yamada-ui/icon": "1.1.8-next-20241008193728",
|
41
|
+
"@yamada-ui/use-value": "1.1.27-next-20241008193728",
|
42
|
+
"@yamada-ui/utils": "1.5.3-next-20241008193728"
|
43
43
|
},
|
44
44
|
"devDependencies": {
|
45
45
|
"clean-package": "2.2.0",
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n CSSUIProps,\n Token,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n cx,\n createContext,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, cloneElement, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<{\n [key: string]: CSSUIObject\n}>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n isEllipsisPage?: boolean\n}\n\ninterface BreadcrumbOptions {\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: string | JSX.Element\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ReactNode\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n}\n\nexport interface BreadcrumbProps\n extends Omit<HTMLUIProps<\"nav\">, \"gap\">,\n ThemeProps<\"Breadcrumb\">,\n BreadcrumbOptions {}\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n separator = \"/\",\n gap = \"fallback(2, 0.5rem)\",\n listProps,\n items = [],\n startBoundaries: _startBoundaries,\n endBoundaries: _endBoundaries,\n ellipsis,\n ...rest\n } = omitThemeProps(mergedProps)\n let startBoundaries = useValue(_startBoundaries)\n let endBoundaries = useValue(_endBoundaries)\n\n if (startBoundaries === 0) startBoundaries = 1\n if (endBoundaries === 0) endBoundaries = 1\n\n if (startBoundaries) endBoundaries ??= 1\n if (endBoundaries) startBoundaries ??= 1\n\n const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n const isExceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n display: \"flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n const hasChildren = validChildren.length\n\n const customEllipsis = useCallback(\n (providedItems?: BreadcrumbGenerateItem[]) => {\n if (!ellipsis) return null\n\n const resolvedItems =\n providedItems ??\n items.slice(startBoundaries!, items.length - endBoundaries!)\n\n return runIfFunc(ellipsis, { items: resolvedItems })\n },\n [ellipsis, endBoundaries, items, startBoundaries],\n )\n\n const cloneChildren = useMemo(() => {\n if (hasChildren) {\n return validChildren.map((child, index) =>\n cloneElement(child, {\n separator,\n gap,\n isLastChild: validChildren.length === index + 1,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest } =\n item\n const isLastChild = items.length === index + 1\n const props: BreadcrumbItemProps = {\n separator,\n gap,\n isCurrentPage,\n ...containerProps,\n }\n\n if (!hasBoundaries && isEllipsisPage) {\n hiddenEllipsis.push(item)\n\n return isLastChild ? (\n <BreadcrumbItem key={index} {...props} isLastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && isExceed) {\n const lastIndex = items.length - index - 1\n\n if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n if (startBoundaries === index) {\n return (\n <BreadcrumbItem key={index} {...props}>\n {customEllipsis() ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n )\n } else {\n return null\n }\n }\n }\n\n if (hiddenEllipsis.length) {\n const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n <BreadcrumbEllipsis />\n )\n\n hiddenEllipsis = []\n\n return (\n <Fragment key={index}>\n <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n <BreadcrumbItem {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n )\n }\n })\n }\n }, [\n hasChildren,\n validChildren,\n separator,\n gap,\n items,\n hasBoundaries,\n isExceed,\n startBoundaries,\n endBoundaries,\n customEllipsis,\n ])\n\n return (\n <BreadcrumbProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-breadcrumb\", className)}\n __css={styles.container}\n aria-label=\"Breadcrumb\"\n {...rest}\n >\n <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n {cloneChildren}\n </ui.ol>\n </ui.nav>\n </BreadcrumbProvider>\n )\n})\n\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"separator\" | \"gap\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n isLastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n separator,\n isCurrentPage,\n isLastChild,\n gap,\n ...rest\n },\n ref,\n ) => {\n const styles = useBreadcrumb()\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type === BreadcrumbLink) {\n return cloneElement(child, {\n isCurrentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n gap,\n children: child.props.children || separator,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.item,\n }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-breadcrumb__item\", className)}\n __css={css}\n {...rest}\n >\n {cloneChildren}\n\n {!isLastChild ? (\n <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ className, children, isCurrentPage, href, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n return (\n <ui.a\n ref={ref}\n as={!isCurrentPage ? \"a\" : \"span\"}\n href={!isCurrentPage ? href : undefined}\n aria-current={isCurrentPage ? \"page\" : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\n BreadcrumbSeparatorOptions {}\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n ({ children, gap: mx, ...rest }, ref) => {\n const styles = useBreadcrumb()\n const css: CSSUIObject = {\n mx,\n ...styles.separator,\n }\n\n return (\n <ui.span\n ref={ref}\n className=\"ui-breadcrumb__item__separator\"\n __css={css}\n {...rest}\n >\n {children}\n </ui.span>\n )\n },\n)\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ children, className, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n const css: CSSUIObject = {\n ...styles.ellipsis,\n }\n\n return (\n children ?? (\n <Icon\n ref={ref}\n aria-label=\"ellipsis\"\n className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n __css={css}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 36 24\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n <circle cx=\"30\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}
|