@yamada-ui/breadcrumb 1.3.11-dev-20240915031944 → 1.3.11-dev-20240917033401
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/breadcrumb.d.mts +23 -17
- package/dist/breadcrumb.d.ts +23 -17
- package/dist/breadcrumb.js +1 -1
- package/dist/breadcrumb.js.map +1 -1
- package/dist/breadcrumb.mjs +1 -1
- package/dist/{chunk-OCOIJNO5.mjs → chunk-YV2UQKWR.mjs} +3 -3
- package/dist/chunk-YV2UQKWR.mjs.map +1 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +5 -5
- package/dist/chunk-OCOIJNO5.mjs.map +0 -1
package/dist/breadcrumb.d.mts
CHANGED
@@ -3,12 +3,12 @@ import { HTMLUIProps, ThemeProps, CSSUIProps, Token, CSSUIObject } from '@yamada
|
|
3
3
|
import { IconProps } from '@yamada-ui/icon';
|
4
4
|
import { ReactNode } from 'react';
|
5
5
|
|
6
|
-
|
6
|
+
interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {
|
7
7
|
name?: ReactNode;
|
8
8
|
containerProps?: Omit<BreadcrumbItemProps, "isLastChild">;
|
9
9
|
isEllipsisPage?: boolean;
|
10
|
-
}
|
11
|
-
|
10
|
+
}
|
11
|
+
interface BreadcrumbOptions {
|
12
12
|
/**
|
13
13
|
* The visual separator between each breadcrumb item.
|
14
14
|
*
|
@@ -43,15 +43,16 @@ type BreadcrumbOptions = {
|
|
43
43
|
ellipsis?: ReactNode | ((props: {
|
44
44
|
items: BreadcrumbGenerateItem[];
|
45
45
|
}) => ReactNode);
|
46
|
-
}
|
47
|
-
|
46
|
+
}
|
47
|
+
interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"Breadcrumb">, BreadcrumbOptions {
|
48
|
+
}
|
48
49
|
/**
|
49
50
|
* `Breadcrumb` is a component that helps users understand the hierarchy of a website.
|
50
51
|
*
|
51
52
|
* @see Docs https://yamada-ui.com/components/navigation/breadcrumb
|
52
53
|
*/
|
53
54
|
declare const Breadcrumb: _yamada_ui_core.Component<"nav", BreadcrumbProps>;
|
54
|
-
|
55
|
+
interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "separator" | "gap"> {
|
55
56
|
/**
|
56
57
|
* If `true`, change to span element.
|
57
58
|
*
|
@@ -64,29 +65,34 @@ type BreadcrumbItemOptions = Pick<BreadcrumbProps, "separator" | "gap"> & {
|
|
64
65
|
* @default false
|
65
66
|
*/
|
66
67
|
isLastChild?: boolean;
|
67
|
-
}
|
68
|
-
|
69
|
-
|
70
|
-
|
68
|
+
}
|
69
|
+
interface BreadcrumbItemProps extends Omit<HTMLUIProps<"li">, "gap">, BreadcrumbItemOptions {
|
70
|
+
}
|
71
|
+
declare const BreadcrumbItem: _yamada_ui_core.Component<"li", BreadcrumbItemProps>;
|
72
|
+
interface BreadcrumbLinkOptions {
|
71
73
|
/**
|
72
74
|
* If `true`, change to span element.
|
73
75
|
*
|
74
76
|
* @default false
|
75
77
|
*/
|
76
78
|
isCurrentPage?: boolean;
|
77
|
-
}
|
78
|
-
|
79
|
+
}
|
80
|
+
interface BreadcrumbLinkProps extends HTMLUIProps<"a">, BreadcrumbLinkOptions {
|
81
|
+
}
|
79
82
|
declare const BreadcrumbLink: _yamada_ui_core.Component<"a", BreadcrumbLinkProps>;
|
80
|
-
|
83
|
+
interface BreadcrumbSeparatorOptions {
|
81
84
|
/**
|
82
85
|
* The CSS `margin-inline-start`, and `margin-inline-end` property.
|
83
86
|
*/
|
84
87
|
gap?: CSSUIObject["mx"];
|
85
|
-
}
|
86
|
-
|
88
|
+
}
|
89
|
+
interface BreadcrumbSeparatorProps extends Omit<HTMLUIProps<"span">, "gap">, BreadcrumbSeparatorOptions {
|
90
|
+
}
|
87
91
|
declare const BreadcrumbSeparator: _yamada_ui_core.Component<"span", BreadcrumbSeparatorProps>;
|
88
|
-
|
89
|
-
|
92
|
+
interface BreadcrumbEllipsisOptions {
|
93
|
+
}
|
94
|
+
interface BreadcrumbEllipsisProps extends IconProps, BreadcrumbEllipsisOptions {
|
95
|
+
}
|
90
96
|
declare const BreadcrumbEllipsis: _yamada_ui_core.Component<"span", BreadcrumbEllipsisProps>;
|
91
97
|
|
92
98
|
export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, type BreadcrumbGenerateItem, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };
|
package/dist/breadcrumb.d.ts
CHANGED
@@ -3,12 +3,12 @@ import { HTMLUIProps, ThemeProps, CSSUIProps, Token, CSSUIObject } from '@yamada
|
|
3
3
|
import { IconProps } from '@yamada-ui/icon';
|
4
4
|
import { ReactNode } from 'react';
|
5
5
|
|
6
|
-
|
6
|
+
interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {
|
7
7
|
name?: ReactNode;
|
8
8
|
containerProps?: Omit<BreadcrumbItemProps, "isLastChild">;
|
9
9
|
isEllipsisPage?: boolean;
|
10
|
-
}
|
11
|
-
|
10
|
+
}
|
11
|
+
interface BreadcrumbOptions {
|
12
12
|
/**
|
13
13
|
* The visual separator between each breadcrumb item.
|
14
14
|
*
|
@@ -43,15 +43,16 @@ type BreadcrumbOptions = {
|
|
43
43
|
ellipsis?: ReactNode | ((props: {
|
44
44
|
items: BreadcrumbGenerateItem[];
|
45
45
|
}) => ReactNode);
|
46
|
-
}
|
47
|
-
|
46
|
+
}
|
47
|
+
interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"Breadcrumb">, BreadcrumbOptions {
|
48
|
+
}
|
48
49
|
/**
|
49
50
|
* `Breadcrumb` is a component that helps users understand the hierarchy of a website.
|
50
51
|
*
|
51
52
|
* @see Docs https://yamada-ui.com/components/navigation/breadcrumb
|
52
53
|
*/
|
53
54
|
declare const Breadcrumb: _yamada_ui_core.Component<"nav", BreadcrumbProps>;
|
54
|
-
|
55
|
+
interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "separator" | "gap"> {
|
55
56
|
/**
|
56
57
|
* If `true`, change to span element.
|
57
58
|
*
|
@@ -64,29 +65,34 @@ type BreadcrumbItemOptions = Pick<BreadcrumbProps, "separator" | "gap"> & {
|
|
64
65
|
* @default false
|
65
66
|
*/
|
66
67
|
isLastChild?: boolean;
|
67
|
-
}
|
68
|
-
|
69
|
-
|
70
|
-
|
68
|
+
}
|
69
|
+
interface BreadcrumbItemProps extends Omit<HTMLUIProps<"li">, "gap">, BreadcrumbItemOptions {
|
70
|
+
}
|
71
|
+
declare const BreadcrumbItem: _yamada_ui_core.Component<"li", BreadcrumbItemProps>;
|
72
|
+
interface BreadcrumbLinkOptions {
|
71
73
|
/**
|
72
74
|
* If `true`, change to span element.
|
73
75
|
*
|
74
76
|
* @default false
|
75
77
|
*/
|
76
78
|
isCurrentPage?: boolean;
|
77
|
-
}
|
78
|
-
|
79
|
+
}
|
80
|
+
interface BreadcrumbLinkProps extends HTMLUIProps<"a">, BreadcrumbLinkOptions {
|
81
|
+
}
|
79
82
|
declare const BreadcrumbLink: _yamada_ui_core.Component<"a", BreadcrumbLinkProps>;
|
80
|
-
|
83
|
+
interface BreadcrumbSeparatorOptions {
|
81
84
|
/**
|
82
85
|
* The CSS `margin-inline-start`, and `margin-inline-end` property.
|
83
86
|
*/
|
84
87
|
gap?: CSSUIObject["mx"];
|
85
|
-
}
|
86
|
-
|
88
|
+
}
|
89
|
+
interface BreadcrumbSeparatorProps extends Omit<HTMLUIProps<"span">, "gap">, BreadcrumbSeparatorOptions {
|
90
|
+
}
|
87
91
|
declare const BreadcrumbSeparator: _yamada_ui_core.Component<"span", BreadcrumbSeparatorProps>;
|
88
|
-
|
89
|
-
|
92
|
+
interface BreadcrumbEllipsisOptions {
|
93
|
+
}
|
94
|
+
interface BreadcrumbEllipsisProps extends IconProps, BreadcrumbEllipsisOptions {
|
95
|
+
}
|
90
96
|
declare const BreadcrumbEllipsis: _yamada_ui_core.Component<"span", BreadcrumbEllipsisProps>;
|
91
97
|
|
92
98
|
export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, type BreadcrumbGenerateItem, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };
|
package/dist/breadcrumb.js
CHANGED
@@ -39,7 +39,7 @@ var [BreadcrumbProvider, useBreadcrumb] = (0, import_utils.createContext)({
|
|
39
39
|
errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in "<Breadcrumb />" `
|
40
40
|
});
|
41
41
|
var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
|
42
|
-
const [styles, mergedProps] = (0, import_core.
|
42
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Breadcrumb", props);
|
43
43
|
const {
|
44
44
|
className,
|
45
45
|
children,
|
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 useMultiComponentStyle,\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 Record<string, CSSUIObject>\n>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport type BreadcrumbGenerateItem = BreadcrumbLinkProps & {\n name?: ReactNode\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n isEllipsisPage?: boolean\n}\n\ntype 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 type BreadcrumbProps = 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] = useMultiComponentStyle(\"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\ntype BreadcrumbItemOptions = 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 type BreadcrumbItemProps = HTMLUIProps<\"li\"> & BreadcrumbItemOptions\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemOptions, \"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\ntype BreadcrumbLinkOptions = {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n}\n\nexport type BreadcrumbLinkProps = HTMLUIProps<\"a\"> & 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)\n\ntype BreadcrumbSeparatorOptions = {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport type BreadcrumbSeparatorProps = HTMLUIProps<\"span\"> &\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\ntype BreadcrumbEllipsisOptions = {}\n\nexport type BreadcrumbEllipsisProps = IconProps & 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"],"mappings":"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","names":["rest","props"]}
|
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\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\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)\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\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"],"mappings":"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","names":["rest","props"]}
|
package/dist/breadcrumb.mjs
CHANGED
@@ -5,7 +5,7 @@ import {
|
|
5
5
|
ui,
|
6
6
|
forwardRef,
|
7
7
|
omitThemeProps,
|
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";
|
@@ -23,7 +23,7 @@ var [BreadcrumbProvider, useBreadcrumb] = createContext({
|
|
23
23
|
errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in "<Breadcrumb />" `
|
24
24
|
});
|
25
25
|
var Breadcrumb = forwardRef((props, ref) => {
|
26
|
-
const [styles, mergedProps] =
|
26
|
+
const [styles, mergedProps] = useComponentMultiStyle("Breadcrumb", props);
|
27
27
|
const {
|
28
28
|
className,
|
29
29
|
children,
|
@@ -250,4 +250,4 @@ export {
|
|
250
250
|
BreadcrumbSeparator,
|
251
251
|
BreadcrumbEllipsis
|
252
252
|
};
|
253
|
-
//# sourceMappingURL=chunk-
|
253
|
+
//# sourceMappingURL=chunk-YV2UQKWR.mjs.map
|
@@ -0,0 +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\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\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)\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\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"],"mappings":"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","names":["rest","props"]}
|
package/dist/index.js
CHANGED
@@ -41,7 +41,7 @@ var [BreadcrumbProvider, useBreadcrumb] = (0, import_utils.createContext)({
|
|
41
41
|
errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in "<Breadcrumb />" `
|
42
42
|
});
|
43
43
|
var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
|
44
|
-
const [styles, mergedProps] = (0, import_core.
|
44
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Breadcrumb", props);
|
45
45
|
const {
|
46
46
|
className,
|
47
47
|
children,
|
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 useMultiComponentStyle,\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 Record<string, CSSUIObject>\n>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport type BreadcrumbGenerateItem = BreadcrumbLinkProps & {\n name?: ReactNode\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n isEllipsisPage?: boolean\n}\n\ntype 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 type BreadcrumbProps = 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] = useMultiComponentStyle(\"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\ntype BreadcrumbItemOptions = 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 type BreadcrumbItemProps = HTMLUIProps<\"li\"> & BreadcrumbItemOptions\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemOptions, \"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\ntype BreadcrumbLinkOptions = {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n}\n\nexport type BreadcrumbLinkProps = HTMLUIProps<\"a\"> & 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)\n\ntype BreadcrumbSeparatorOptions = {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport type BreadcrumbSeparatorProps = HTMLUIProps<\"span\"> &\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\ntype BreadcrumbEllipsisOptions = {}\n\nexport type BreadcrumbEllipsisProps = IconProps & 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"],"mappings":"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","names":["rest","props"]}
|
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\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\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)\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\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"],"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.11-dev-
|
3
|
+
"version": "1.3.11-dev-20240917033401",
|
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.14.1-dev-
|
40
|
-
"@yamada-ui/icon": "1.1.6-dev-
|
41
|
-
"@yamada-ui/use-value": "1.1.25-dev-
|
42
|
-
"@yamada-ui/utils": "1.5.
|
39
|
+
"@yamada-ui/core": "1.14.1-dev-20240917033401",
|
40
|
+
"@yamada-ui/icon": "1.1.6-dev-20240917033401",
|
41
|
+
"@yamada-ui/use-value": "1.1.25-dev-20240917033401",
|
42
|
+
"@yamada-ui/utils": "1.5.1-dev-20240917033401"
|
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 useMultiComponentStyle,\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 Record<string, CSSUIObject>\n>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport type BreadcrumbGenerateItem = BreadcrumbLinkProps & {\n name?: ReactNode\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n isEllipsisPage?: boolean\n}\n\ntype 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 type BreadcrumbProps = 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] = useMultiComponentStyle(\"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\ntype BreadcrumbItemOptions = 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 type BreadcrumbItemProps = HTMLUIProps<\"li\"> & BreadcrumbItemOptions\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemOptions, \"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\ntype BreadcrumbLinkOptions = {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n isCurrentPage?: boolean\n}\n\nexport type BreadcrumbLinkProps = HTMLUIProps<\"a\"> & 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)\n\ntype BreadcrumbSeparatorOptions = {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport type BreadcrumbSeparatorProps = HTMLUIProps<\"span\"> &\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\ntype BreadcrumbEllipsisOptions = {}\n\nexport type BreadcrumbEllipsisProps = IconProps & 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"],"mappings":";;;AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AAErB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,UAAU,cAAc,aAAa,eAAe;AA2IpB,cA6B7B,YA7B6B;AAzIzC,IAAM,CAAC,oBAAoB,aAAa,IAAI,cAE1C;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAsDM,IAAM,aAAa,WAAmC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,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,IAAI,eAAe,WAAW;AAC9B,MAAI,kBAAkB,SAAS,gBAAgB;AAC/C,MAAI,gBAAgB,SAAS,cAAc;AAE3C,MAAI,oBAAoB,EAAG,mBAAkB;AAC7C,MAAI,kBAAkB,EAAG,iBAAgB;AAEzC,MAAI,gBAAiB,yDAAkB;AACvC,MAAI,cAAe,+DAAoB;AAEvC,QAAM,gBAAgB,SAAS,eAAe,KAAK,SAAS,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,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,cAAc,cAAc;AAElC,QAAM,iBAAiB;AAAA,IACrB,CAAC,kBAA6C;AAC5C,UAAI,CAAC,SAAU,QAAO;AAEtB,YAAM,gBACJ,wCACA,MAAM,MAAM,iBAAkB,MAAM,SAAS,aAAc;AAE7D,aAAO,UAAU,UAAU,EAAE,OAAO,cAAc,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,UAAU,eAAe,OAAO,eAAe;AAAA,EAClD;AAEA,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,aAAa;AACf,aAAO,cAAc;AAAA,QAAI,CAAC,OAAO,UAC/B,aAAa,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;AAnJxC;AAoJQ,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,oBAAC,kBAA4B,GAAGA,QAAO,aAAW,MAC/C,+BAAe,CAAC,IAAI,CAAC,MAArB,YAA0B,oBAAC,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,oBAAC,kBAA4B,GAAGA,QAC7B,+BAAe,MAAf,YAAoB,oBAAC,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,oBAAC,sBAAmB;AAGtB,2BAAiB,CAAC;AAElB,iBACE,qBAAC,YACC;AAAA,gCAAC,kBAAgB,GAAGA,QAAQ,4BAAiB;AAAA,YAE7C,oBAAC,kBAAgB,GAAGA,QAAO,aACzB,8BAAC,kBAAgB,GAAGD,OAAO,gBAAK,GAClC;AAAA,eALa,KAMf;AAAA,QAEJ,OAAO;AACL,iBACE,oBAAC,kBAA4B,GAAGC,QAAO,aACrC,8BAAC,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,oBAAC,sBAAmB,OAAO,QACzB;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACxC,OAAO,OAAO;AAAA,MACd,cAAW;AAAA,MACV,GAAG;AAAA,MAEJ,8BAAC,GAAG,IAAH,EAAM,WAAU,uBAAuB,GAAG,WAAW,OAAO,KAC1D,yBACH;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAmBM,IAAM,iBAAiB;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,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc,IAAI,CAAC,UAAU;AACjD,UAAI,MAAM,SAAS,gBAAgB;AACjC,eAAO,aAAa,OAAO;AAAA,UACzB;AAAA,QACF,CAAC;AAAA,MACH;AAEA,UAAI,MAAM,SAAS,qBAAqB;AACtC,eAAO,aAAa,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,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,UAEA,CAAC,cACA,oBAAC,uBAAoB,KAAW,qBAAU,IACxC;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAaO,IAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,eAAe,MAAM,GAAG,KAAK,GAAG,QAAQ;AAC9D,UAAM,SAAS,cAAc;AAE7B,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,CAAC,gBAAgB,MAAM;AAAA,QAC3B,MAAM,CAAC,gBAAgB,OAAO;AAAA,QAC9B,gBAAc,gBAAgB,SAAS;AAAA,QACvC,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO,OAAO;AAAA,QACb,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAYO,IAAM,sBAAsB;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,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAMO,IAAM,qBAAqB;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,WAAW,GAAG,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,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA;AAAA;AAAA,IACpD;AAAA,EAGN;AACF;","names":["rest","props"]}
|