@pega/cosmos-react-core 4.0.0-dev.16.1 → 4.0.0-dev.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAK9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAUtE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,eAAO,MAAM,iBAAiB;sBAAkC,OAAO;SA0BtE,CAAC;AAyBF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwHnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { rgba } from 'polished';
|
|
5
|
-
import { useConsolidatedRef, useDirection } from '../../hooks';
|
|
5
|
+
import { useElement, useConsolidatedRef, useDirection } from '../../hooks';
|
|
6
6
|
import { defaultThemeProp } from '../../theme';
|
|
7
|
-
import {
|
|
7
|
+
import { debounce, tryCatch } from '../../utils';
|
|
8
8
|
import Button, { StyledButton } from '../Button';
|
|
9
9
|
import Flex from '../Flex';
|
|
10
10
|
import Link, { StyledLink } from '../Link';
|
|
@@ -22,6 +22,8 @@ const StyledSeparator = styled(Icon)(({ theme }) => {
|
|
|
22
22
|
});
|
|
23
23
|
export const StyledBreadcrumbs = styled.div(({ theme, oneItemRemaining }) => css `
|
|
24
24
|
white-space: nowrap;
|
|
25
|
+
overflow: visible;
|
|
26
|
+
visibility: hidden;
|
|
25
27
|
|
|
26
28
|
${StyledIcon} {
|
|
27
29
|
width: 1em;
|
|
@@ -38,12 +40,8 @@ export const StyledBreadcrumbs = styled.div(({ theme, oneItemRemaining }) => css
|
|
|
38
40
|
${oneItemRemaining &&
|
|
39
41
|
css `
|
|
40
42
|
& > :last-child {
|
|
43
|
+
text-overflow: ellipsis;
|
|
41
44
|
overflow: hidden;
|
|
42
|
-
|
|
43
|
-
& > span {
|
|
44
|
-
text-overflow: ellipsis;
|
|
45
|
-
overflow: hidden;
|
|
46
|
-
}
|
|
47
45
|
}
|
|
48
46
|
`}
|
|
49
47
|
`);
|
|
@@ -63,110 +61,61 @@ StyledEllipsizedButton.defaultProps = defaultThemeProp;
|
|
|
63
61
|
const StyledEllipsizedText = styled(Text)(getEllipsisStyles);
|
|
64
62
|
StyledEllipsizedText.defaultProps = defaultThemeProp;
|
|
65
63
|
const Breadcrumbs = forwardRef(({ path, ...restProps }, ref) => {
|
|
66
|
-
const [
|
|
67
|
-
const
|
|
68
|
-
const
|
|
69
|
-
const
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
const priorEdge = reversedTrailingEdgeStack[i];
|
|
77
|
-
const shouldRender = ltr ? priorEdge < containerEdge : priorEdge > containerEdge;
|
|
78
|
-
if (shouldRender) {
|
|
79
|
-
priorTrailingEdgeStack.current.pop();
|
|
80
|
-
nextDisplayCount += 1;
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
break;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
return nextDisplayCount;
|
|
87
|
-
};
|
|
88
|
-
const evalItemRemoval = ({ pathChildren, availableSpace, containerEdge }) => {
|
|
89
|
-
let nextDisplayCount = displayCount;
|
|
90
|
-
let hasAvailableSpace = availableSpace;
|
|
91
|
-
let lastChildIndex = pathChildren.length - 1;
|
|
92
|
-
do {
|
|
93
|
-
const itemTrailingEdge = getEdge({
|
|
94
|
-
el: pathChildren[lastChildIndex],
|
|
95
|
-
side: 'trailing',
|
|
96
|
-
ltr
|
|
64
|
+
const [breadcrumbsEl, setBreadcrumbsEl] = useElement();
|
|
65
|
+
const [numMenuItems, setNumMenuItems] = useState(0);
|
|
66
|
+
const minInlineWidth = useRef(0);
|
|
67
|
+
const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);
|
|
68
|
+
const debouncedResize = debounce((entries) => {
|
|
69
|
+
if (entries[0].contentRect.width > minInlineWidth.current) {
|
|
70
|
+
setNumMenuItems(curr => {
|
|
71
|
+
if (curr === 0)
|
|
72
|
+
return curr;
|
|
73
|
+
return curr - 1;
|
|
97
74
|
});
|
|
98
|
-
hasAvailableSpace = Math.floor(ltr ? containerEdge - itemTrailingEdge : itemTrailingEdge - containerEdge);
|
|
99
|
-
if (hasAvailableSpace < 0) {
|
|
100
|
-
priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];
|
|
101
|
-
nextDisplayCount -= 1;
|
|
102
|
-
lastChildIndex -= 1;
|
|
103
|
-
}
|
|
104
|
-
} while (hasAvailableSpace < 0 && lastChildIndex > -1);
|
|
105
|
-
return nextDisplayCount;
|
|
106
|
-
};
|
|
107
|
-
const evaluateBreadcrumbDisplay = () => {
|
|
108
|
-
const containerEl = containerRef.current;
|
|
109
|
-
if (!containerEl ||
|
|
110
|
-
!breadcrumbPathRef.current?.children ||
|
|
111
|
-
breadcrumbPathRef.current?.children.length < 1)
|
|
112
|
-
return;
|
|
113
|
-
const pathChildren = Array.from(breadcrumbPathRef.current?.children);
|
|
114
|
-
const lastChild = pathChildren[pathChildren.length - 1];
|
|
115
|
-
const containerEdge = getEdge({
|
|
116
|
-
el: containerEl,
|
|
117
|
-
side: 'trailing',
|
|
118
|
-
ltr
|
|
119
|
-
});
|
|
120
|
-
const testEdge = getEdge({ el: lastChild, side: 'trailing', ltr });
|
|
121
|
-
const availableSpace = Math.floor(ltr ? containerEdge - testEdge : testEdge - containerEdge);
|
|
122
|
-
if (availableSpace === priorAvailableSpace.current)
|
|
123
|
-
return;
|
|
124
|
-
priorAvailableSpace.current = availableSpace;
|
|
125
|
-
let nextDisplayCount = displayCount;
|
|
126
|
-
if (availableSpace >= 0 && displayCount !== path.length) {
|
|
127
|
-
nextDisplayCount = evalItemAddition({ containerEdge });
|
|
128
75
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
76
|
+
}, 100);
|
|
77
|
+
const resizeObserver = new ResizeObserver(debouncedResize);
|
|
78
|
+
const intersectionObserver = new IntersectionObserver(entries => {
|
|
79
|
+
if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {
|
|
80
|
+
if (entries[0].rootBounds)
|
|
81
|
+
minInlineWidth.current = entries[0].rootBounds.width + 1;
|
|
82
|
+
setNumMenuItems(curr => {
|
|
83
|
+
if (curr === path.length - 1)
|
|
84
|
+
return curr;
|
|
85
|
+
return curr + 1;
|
|
134
86
|
});
|
|
135
87
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
useEffect(() => {
|
|
140
|
-
evaluateBreadcrumbDisplay();
|
|
141
|
-
}, []);
|
|
142
|
-
// Overflow resize observer
|
|
88
|
+
else if (breadcrumbsEl)
|
|
89
|
+
breadcrumbsEl.style.visibility = 'visible';
|
|
90
|
+
}, { root: breadcrumbsEl, threshold: 1 });
|
|
143
91
|
useEffect(() => {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
resizeObserver.observe(
|
|
92
|
+
if (breadcrumbsEl && breadcrumbsEl.lastChild) {
|
|
93
|
+
intersectionObserver.observe(breadcrumbsEl.lastChild);
|
|
94
|
+
resizeObserver.observe(breadcrumbsEl);
|
|
95
|
+
return () => {
|
|
96
|
+
intersectionObserver.disconnect();
|
|
97
|
+
resizeObserver.disconnect();
|
|
98
|
+
};
|
|
147
99
|
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
return Comp;
|
|
168
|
-
return (_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [Comp, _jsx(StyledSeparator, { name: `caret-${end}` })] }, id));
|
|
169
|
-
}) })] }));
|
|
100
|
+
}, [breadcrumbsEl, numMenuItems]);
|
|
101
|
+
const { end } = useDirection();
|
|
102
|
+
return (_jsxs(Flex, { ...restProps, container: { gap: 0.5, alignItems: 'center' }, as: StyledBreadcrumbs, oneItemRemaining: numMenuItems === path.length - 1, ref: breadcrumbRef, children: [numMenuItems > 0 && (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Links', iconOnly: true, variant: 'link', icon: 'folder-hierarchy-solid', menu: { items: path.slice(0, numMenuItems).reverse() } }), _jsx(StyledSeparator, { name: `caret-${end}` })] })), path.slice(numMenuItems).map((crumb, index) => {
|
|
103
|
+
const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;
|
|
104
|
+
let Comp;
|
|
105
|
+
if (href)
|
|
106
|
+
Comp = (_jsxs(Link, { href: href, as: primary.length > 60 ? StyledEllipsizedLink : undefined, onClick: (e) => {
|
|
107
|
+
onClick?.(id, e);
|
|
108
|
+
}, ...restCrumbProps, children: [visual, " ", primary] }, id));
|
|
109
|
+
else if (onClick)
|
|
110
|
+
Comp = (_jsxs(Button, { variant: 'link', as: primary.length > 60 ? StyledEllipsizedButton : undefined, onClick: (e) => {
|
|
111
|
+
onClick(id, e);
|
|
112
|
+
}, ...restCrumbProps, children: [visual, " ", primary] }, id));
|
|
113
|
+
else
|
|
114
|
+
Comp = (_jsxs(Text, { as: primary.length > 60 ? StyledEllipsizedText : undefined, ...restCrumbProps, children: [visual, " ", primary] }, id));
|
|
115
|
+
if (index === path.slice(numMenuItems).length - 1)
|
|
116
|
+
return Comp;
|
|
117
|
+
return (_jsxs(Fragment, { children: [Comp, _jsx(StyledSeparator, { name: `caret-${end}` })] }, id));
|
|
118
|
+
})] }));
|
|
170
119
|
});
|
|
171
120
|
export default Breadcrumbs;
|
|
172
121
|
//# sourceMappingURL=Breadcrumbs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useRef,\n useState,\n MouseEvent\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { getEdge, tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Flex from '../Flex';\nimport Link, { StyledLink } from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text, { StyledText } from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps, NoChildrenProp {\n /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. */\n path: MenuItemProps[];\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledSeparator: typeof Icon = styled(Icon)(({ theme }) => {\n const color = tryCatch(() =>\n rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n );\n\n return css`\n color: ${color};\n `;\n});\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n ({ theme, oneItemRemaining }) => css`\n white-space: nowrap;\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n }\n\n ${StyledLink},\n ${StyledButton},\n ${StyledText} {\n max-width: ${theme.base['content-width'].md};\n }\n\n ${oneItemRemaining &&\n css`\n & > :last-child {\n overflow: hidden;\n\n & > span {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n }\n `}\n `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst getEllipsisStyles = ({ theme }: { theme: DefaultTheme }) => {\n return css`\n min-width: ${theme.base['content-width'].xs};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `;\n};\n\nconst StyledEllipsizedLink = styled(Link)(getEllipsisStyles);\n\nStyledEllipsizedLink.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedButton = styled(Button)(getEllipsisStyles);\n\nStyledEllipsizedButton.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedText = styled(Text)(getEllipsisStyles);\n\nStyledEllipsizedText.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n const [displayCount, setDisplayCount] = useState(path.length);\n\n const containerRef = useConsolidatedRef(ref);\n const breadcrumbPathRef = useRef<HTMLDivElement>(null);\n const priorTrailingEdgeStack = useRef<number[]>([]);\n const priorAvailableSpace = useRef<number | null>(null);\n\n const { end, ltr } = useDirection();\n\n const evalItemAddition = ({ containerEdge }: { containerEdge: number }): number => {\n let nextDisplayCount = displayCount;\n\n const reversedTrailingEdgeStack = [...priorTrailingEdgeStack.current].reverse();\n for (let i = 0; i < reversedTrailingEdgeStack.length; i += 1) {\n const priorEdge = reversedTrailingEdgeStack[i];\n\n const shouldRender = ltr ? priorEdge < containerEdge : priorEdge > containerEdge;\n\n if (shouldRender) {\n priorTrailingEdgeStack.current.pop();\n nextDisplayCount += 1;\n } else {\n break;\n }\n }\n\n return nextDisplayCount;\n };\n\n const evalItemRemoval = ({\n pathChildren,\n availableSpace,\n containerEdge\n }: {\n pathChildren: Element[];\n availableSpace: number;\n containerEdge: number;\n }): number => {\n let nextDisplayCount = displayCount;\n let hasAvailableSpace = availableSpace;\n let lastChildIndex = pathChildren.length - 1;\n\n do {\n const itemTrailingEdge = getEdge({\n el: pathChildren[lastChildIndex],\n side: 'trailing',\n ltr\n });\n hasAvailableSpace = Math.floor(\n ltr ? containerEdge - itemTrailingEdge : itemTrailingEdge - containerEdge\n );\n\n if (hasAvailableSpace < 0) {\n priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];\n\n nextDisplayCount -= 1;\n lastChildIndex -= 1;\n }\n } while (hasAvailableSpace < 0 && lastChildIndex > -1);\n\n return nextDisplayCount;\n };\n\n const evaluateBreadcrumbDisplay = () => {\n const containerEl = containerRef.current;\n if (\n !containerEl ||\n !breadcrumbPathRef.current?.children ||\n breadcrumbPathRef.current?.children.length < 1\n )\n return;\n\n const pathChildren = Array.from(breadcrumbPathRef.current?.children);\n const lastChild = pathChildren[pathChildren.length - 1];\n\n const containerEdge = getEdge({\n el: containerEl,\n side: 'trailing',\n ltr\n });\n const testEdge = getEdge({ el: lastChild, side: 'trailing', ltr });\n\n const availableSpace = Math.floor(ltr ? containerEdge - testEdge : testEdge - containerEdge);\n if (availableSpace === priorAvailableSpace.current) return;\n\n priorAvailableSpace.current = availableSpace;\n let nextDisplayCount = displayCount;\n\n if (availableSpace >= 0 && displayCount !== path.length) {\n nextDisplayCount = evalItemAddition({ containerEdge });\n } else if (pathChildren && availableSpace < 0 && displayCount > 1) {\n nextDisplayCount = evalItemRemoval({\n pathChildren,\n availableSpace,\n containerEdge\n });\n }\n\n setDisplayCount(nextDisplayCount);\n };\n\n // Initial display evaluation\n useEffect(() => {\n evaluateBreadcrumbDisplay();\n }, []);\n\n // Overflow resize observer\n useEffect(() => {\n const resizeObserver = new ResizeObserver(evaluateBreadcrumbDisplay);\n\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [evaluateBreadcrumbDisplay]);\n\n const numMenuItems = path.length - displayCount;\n\n return (\n <Flex\n {...restProps}\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledBreadcrumbs}\n oneItemRemaining={displayCount === 1}\n ref={containerRef}\n >\n {numMenuItems > 0 && (\n <>\n <MenuButton\n text='Links'\n iconOnly\n variant='link'\n icon='folder-hierarchy-solid'\n menu={{ items: path.slice(0, numMenuItems).reverse() }}\n />\n <StyledSeparator name={`caret-${end}`} />\n </>\n )}\n <Flex container={{ gap: 0.5, alignItems: 'center' }} ref={breadcrumbPathRef}>\n {path.slice(numMenuItems).map((crumb, index) => {\n const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;\n let Comp;\n if (href)\n Comp = (\n <Link\n key={id}\n href={href}\n as={primary.length > 60 ? StyledEllipsizedLink : undefined}\n onClick={(e: MouseEvent<HTMLAnchorElement>) => {\n onClick?.(id, e);\n }}\n {...restCrumbProps}\n >\n {visual} {primary}\n </Link>\n );\n else if (onClick)\n Comp = (\n <Button\n key={id}\n variant='link'\n as={primary.length > 60 ? StyledEllipsizedButton : undefined}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onClick(id, e);\n }}\n {...restCrumbProps}\n >\n {visual} {primary}\n </Button>\n );\n else\n Comp = (\n <Text\n key={id}\n as={primary.length > 60 ? StyledEllipsizedText : undefined}\n {...restCrumbProps}\n >\n {visual} {primary}\n </Text>\n );\n\n if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n return (\n <Flex container={{ gap: 0.5, alignItems: 'center' }} key={id}>\n {Comp}\n <StyledSeparator name={`caret-${end}`} />\n </Flex>\n );\n })}\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default Breadcrumbs;\n"]}
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n Fragment,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useRef,\n useState,\n MouseEvent\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { useElement, useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { debounce, tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Flex from '../Flex';\nimport Link, { StyledLink } from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text, { StyledText } from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps, NoChildrenProp {\n /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. */\n path: MenuItemProps[];\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledSeparator: typeof Icon = styled(Icon)(({ theme }) => {\n const color = tryCatch(() =>\n rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n );\n\n return css`\n color: ${color};\n `;\n});\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n ({ theme, oneItemRemaining }) => css`\n white-space: nowrap;\n overflow: visible;\n visibility: hidden;\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n }\n\n ${StyledLink},\n ${StyledButton},\n ${StyledText} {\n max-width: ${theme.base['content-width'].md};\n }\n\n ${oneItemRemaining &&\n css`\n & > :last-child {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n `}\n `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst getEllipsisStyles = ({ theme }: { theme: DefaultTheme }) => {\n return css`\n min-width: ${theme.base['content-width'].xs};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `;\n};\n\nconst StyledEllipsizedLink = styled(Link)(getEllipsisStyles);\n\nStyledEllipsizedLink.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedButton = styled(Button)(getEllipsisStyles);\n\nStyledEllipsizedButton.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedText = styled(Text)(getEllipsisStyles);\n\nStyledEllipsizedText.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n const [numMenuItems, setNumMenuItems] = useState(0);\n const minInlineWidth = useRef(0);\n\n const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minInlineWidth.current) {\n setNumMenuItems(curr => {\n if (curr === 0) return curr;\n return curr - 1;\n });\n }\n }, 100);\n\n const resizeObserver = new ResizeObserver(debouncedResize);\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n setNumMenuItems(curr => {\n if (curr === path.length - 1) return curr;\n return curr + 1;\n });\n } else if (breadcrumbsEl) breadcrumbsEl.style.visibility = 'visible';\n },\n { root: breadcrumbsEl, threshold: 1 }\n );\n\n useEffect(() => {\n if (breadcrumbsEl && breadcrumbsEl.lastChild) {\n intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n resizeObserver.observe(breadcrumbsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [breadcrumbsEl, numMenuItems]);\n\n const { end } = useDirection();\n\n return (\n <Flex\n {...restProps}\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledBreadcrumbs}\n oneItemRemaining={numMenuItems === path.length - 1}\n ref={breadcrumbRef}\n >\n {numMenuItems > 0 && (\n <>\n <MenuButton\n text='Links'\n iconOnly\n variant='link'\n icon='folder-hierarchy-solid'\n menu={{ items: path.slice(0, numMenuItems).reverse() }}\n />\n <StyledSeparator name={`caret-${end}`} />\n </>\n )}\n {path.slice(numMenuItems).map((crumb, index) => {\n const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;\n let Comp;\n if (href)\n Comp = (\n <Link\n key={id}\n href={href}\n as={primary.length > 60 ? StyledEllipsizedLink : undefined}\n onClick={(e: MouseEvent<HTMLAnchorElement>) => {\n onClick?.(id, e);\n }}\n {...restCrumbProps}\n >\n {visual} {primary}\n </Link>\n );\n else if (onClick)\n Comp = (\n <Button\n key={id}\n variant='link'\n as={primary.length > 60 ? StyledEllipsizedButton : undefined}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onClick(id, e);\n }}\n {...restCrumbProps}\n >\n {visual} {primary}\n </Button>\n );\n else\n Comp = (\n <Text\n key={id}\n as={primary.length > 60 ? StyledEllipsizedText : undefined}\n {...restCrumbProps}\n >\n {visual} {primary}\n </Text>\n );\n\n if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n return (\n <Fragment key={id}>\n {Comp}\n <StyledSeparator name={`caret-${end}`} />\n </Fragment>\n );\n })}\n </Flex>\n );\n }\n);\n\nexport default Breadcrumbs;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "4.0.0-dev.16.
|
|
3
|
+
"version": "4.0.0-dev.16.2",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|