@pega/cosmos-react-core 7.0.0-build.7.0 → 7.0.0-build.7.1
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,5 +1,5 @@
|
|
|
1
1
|
export interface ScrollStickOptions {
|
|
2
|
-
elements: string | HTMLElement[]
|
|
2
|
+
elements: string | HTMLElement[] | Set<HTMLElement>;
|
|
3
3
|
scrollContainer?: Stickers['scrollContainer'];
|
|
4
4
|
offset?: number;
|
|
5
5
|
}
|
|
@@ -11,13 +11,13 @@ interface Sticker {
|
|
|
11
11
|
isStuck: boolean;
|
|
12
12
|
priorStickHeight: number;
|
|
13
13
|
}
|
|
14
|
-
type ElementsOption =
|
|
14
|
+
type ElementsOption = ScrollStickOptions['elements'];
|
|
15
15
|
declare class Stickers {
|
|
16
16
|
#private;
|
|
17
17
|
scrollContainer: HTMLElement | Window;
|
|
18
18
|
offset: number;
|
|
19
19
|
constructor({ elements, scrollContainer, offset }: ScrollStickOptions);
|
|
20
|
-
setStickers(elements: ElementsOption): Sticker
|
|
20
|
+
setStickers(elements: ElementsOption): Set<Sticker>;
|
|
21
21
|
addHandlers(): void;
|
|
22
22
|
rmHandlers(): void;
|
|
23
23
|
snapshotItemRects(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollStick.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollStick.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,GAAG,WAAW,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"useScrollStick.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollStick.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,GAAG,WAAW,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,CAAC;IACpD,eAAe,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,OAAO;IACf,OAAO,EAAE,WAAW,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,KAAK,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAMrD,cAAM,QAAQ;;IACZ,eAAe,EAAE,WAAW,GAAG,MAAM,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;gBAiBH,EAAE,QAAQ,EAAE,eAAwB,EAAE,MAAU,EAAE,EAAE,kBAAkB;IAgClF,WAAW,CAAC,QAAQ,EAAE,cAAc;IAkBpC,WAAW;IAUX,UAAU;IAMV,iBAAiB;IASjB,QAAQ;IAoDR,QAAQ;IAUR,UAAU;IAMV,iBAAiB;IASjB,oBAAoB;IAgBpB,gBAAgB,CAAC,OAAO,EAAE,OAAO;IAQjC,YAAY;IA0BZ,QAAQ,CAAC,OAAO,EAAE,OAAO;IASzB,WAAW,CAAC,OAAO,EAAE,OAAO;IAQ5B,WAAW,CAAC,OAAO,EAAE,OAAO;IAW5B,OAAO;CAIR;AAED;;;;GAIG;AACH,QAAA,MAAM,cAAc,aAAc,kBAAkB,KAAG,IAatD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -43,18 +43,19 @@ class Stickers {
|
|
|
43
43
|
this.#stickers = this.setStickers(elements);
|
|
44
44
|
this.snapshotItemRects();
|
|
45
45
|
this.addHandlers();
|
|
46
|
+
this.testForStick();
|
|
46
47
|
}
|
|
47
48
|
setStickers(elements) {
|
|
48
|
-
this.#stickers = (typeof elements === 'string'
|
|
49
|
-
?
|
|
50
|
-
: elements).map(element => ({
|
|
49
|
+
this.#stickers = new Set((typeof elements === 'string'
|
|
50
|
+
? [...document.querySelectorAll(elements)]
|
|
51
|
+
: [...elements]).map(element => ({
|
|
51
52
|
element,
|
|
52
53
|
isStuck: false,
|
|
53
54
|
top: NaN,
|
|
54
55
|
bottom: NaN,
|
|
55
56
|
height: NaN,
|
|
56
57
|
priorStickHeight: NaN
|
|
57
|
-
}));
|
|
58
|
+
})));
|
|
58
59
|
return this.#stickers;
|
|
59
60
|
}
|
|
60
61
|
addHandlers() {
|
|
@@ -222,7 +223,7 @@ const useScrollStick = (options) => {
|
|
|
222
223
|
instance.current?.cleanup();
|
|
223
224
|
instance.current = undefined;
|
|
224
225
|
};
|
|
225
|
-
}, [options]);
|
|
226
|
+
}, [options?.scrollContainer, options?.offset, ...(options?.elements ?? [])]);
|
|
226
227
|
};
|
|
227
228
|
export default useScrollStick;
|
|
228
229
|
//# sourceMappingURL=useScrollStick.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollStick.js","sourceRoot":"","sources":["../../src/hooks/useScrollStick.ts"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useLayoutEffect } from 'react';\n\nexport interface ScrollStickOptions {\n elements: string | HTMLElement[];\n scrollContainer?: Stickers['scrollContainer'];\n offset?: number;\n}\n\ninterface Sticker {\n element: HTMLElement;\n top: number;\n bottom: number;\n height: number;\n isStuck: boolean;\n priorStickHeight: number;\n}\n\ntype ElementsOption = string | HTMLElement[];\n\nconst onBeforeunload = () => {\n window.scrollTo(0, 0);\n};\n\nclass Stickers {\n scrollContainer: HTMLElement | Window;\n offset: number;\n #scrollDebounce: number;\n #resizeDebounce: number;\n #isWindowScroll: boolean;\n #scrollIntervalStart: number;\n #scrollIntervalChange: number;\n #scrollDirection: number;\n #priorScrollY: number;\n #resizeTimeout: number;\n #scrollEndTimeout: number;\n #isScrolling: boolean;\n #vpHeightSnapshot: number;\n #sfHeightSnapshot: number;\n #stickers: Sticker[];\n #scrollHandler: () => void;\n #resizeHandler: () => void;\n\n constructor({ elements, scrollContainer = window, offset = 0 }: ScrollStickOptions) {\n this.scrollContainer = scrollContainer;\n this.offset = offset;\n\n this.#scrollDebounce = 100;\n this.#resizeDebounce = 300;\n this.#resizeTimeout = NaN;\n this.#scrollEndTimeout = NaN;\n this.#priorScrollY = NaN;\n this.#isScrolling = false;\n this.#vpHeightSnapshot = NaN;\n this.#sfHeightSnapshot = NaN;\n this.#scrollHandler = () => {};\n this.#resizeHandler = () => {};\n\n this.#isWindowScroll = this.scrollContainer === window;\n\n // Only gets reset after scroll stop timeout fires\n this.#scrollIntervalStart = this.getScrollY();\n\n // Used to determine scroll change within debounced scroll handler\n this.#scrollIntervalChange = 0;\n\n // Used to determine scroll direction by +1(page down) -1(page up)\n this.#scrollDirection = 0;\n\n this.#stickers = this.setStickers(elements);\n this.snapshotItemRects();\n this.addHandlers();\n }\n\n setStickers(elements: ElementsOption) {\n this.#stickers = (\n typeof elements === 'string'\n ? Array.from(document.querySelectorAll<HTMLElement>(elements))\n : elements\n ).map(element => ({\n element,\n isStuck: false,\n top: NaN,\n bottom: NaN,\n height: NaN,\n priorStickHeight: NaN\n }));\n\n return this.#stickers;\n }\n\n addHandlers() {\n this.rmHandlers();\n this.#scrollHandler = this.onScroll.bind(this);\n this.#resizeHandler = this.onResize.bind(this);\n this.scrollContainer.addEventListener('scroll', this.#scrollHandler);\n window.addEventListener('resize', this.#resizeHandler);\n // Not sure we need this. Maybe when DOM was persisted...\n window.addEventListener('beforeunload', onBeforeunload);\n }\n\n rmHandlers() {\n this.scrollContainer.removeEventListener('scroll', this.#scrollHandler);\n window.removeEventListener('resize', this.#resizeHandler);\n window.removeEventListener('beforeunload', onBeforeunload);\n }\n\n snapshotItemRects() {\n this.#stickers.forEach(sticker => {\n const rect = sticker.element.getBoundingClientRect();\n sticker.top = rect.top;\n sticker.bottom = rect.bottom;\n sticker.height = rect.height;\n });\n }\n\n onScroll() {\n clearTimeout(this.#scrollEndTimeout);\n\n const currentScrollY = this.getScrollY();\n\n this.#priorScrollY = !Number.isNaN(this.#priorScrollY)\n ? this.#priorScrollY\n : this.#scrollIntervalStart;\n\n // Diff between priorScrollY and new currentScrollY to determine direction\n this.#scrollDirection = currentScrollY - this.#priorScrollY > 0 ? 1 : -1;\n\n // How much scroll changed + or - within the debounce interval\n this.#scrollIntervalChange = currentScrollY - this.#scrollIntervalStart;\n\n // Update old to new for next scroll event\n this.#priorScrollY = currentScrollY;\n\n // When scrolling has stopped\n this.#scrollEndTimeout = window.setTimeout(() => {\n // Reset for next scroll starting point\n this.#scrollIntervalStart = this.#priorScrollY;\n\n // Reset until next scroll\n this.#vpHeightSnapshot = NaN;\n this.#sfHeightSnapshot = NaN;\n\n this.#isScrolling = false;\n }, this.#scrollDebounce);\n\n // Additional scroll calls always have to test for stick state change\n if (this.#isScrolling) {\n this.testForStick();\n return;\n }\n\n // Only reaches here on first call and we note as in a scrolling state\n this.#isScrolling = true;\n\n // grab the current rect points for stickers to test against while scrolling\n this.snapshotItemRects();\n\n /**\n * Get once and cache until scroll settles\n * Unlikely to change and avoids additional reflows on scroll\n */\n this.#vpHeightSnapshot = this.getViewportHeight();\n this.#sfHeightSnapshot = this.getScrollFrameHeight();\n\n this.testForStick();\n }\n\n onResize() {\n clearTimeout(this.#resizeTimeout);\n this.#resizeTimeout = window.setTimeout(() => {\n this.snapshotItemRects();\n this.#stickers.forEach(sticker => {\n if (sticker.isStuck) this.addStick(sticker);\n });\n }, this.#resizeDebounce);\n }\n\n getScrollY() {\n return this.#isWindowScroll\n ? (this.scrollContainer as Window).scrollY\n : (this.scrollContainer as HTMLElement).scrollTop;\n }\n\n getViewportHeight() {\n // If we have a height snapshot use it since this has likely been called on scroll\n if (!Number.isNaN(this.#vpHeightSnapshot)) {\n return this.#vpHeightSnapshot;\n }\n\n return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n }\n\n getScrollFrameHeight() {\n // If we have a height snapshot use it since this has likely been called on scroll\n if (!Number.isNaN(this.#sfHeightSnapshot)) {\n return this.#sfHeightSnapshot;\n }\n\n const viewportHeight = this.getViewportHeight();\n let sfh = viewportHeight;\n\n if (!this.#isWindowScroll) {\n sfh = viewportHeight - (this.scrollContainer as HTMLElement).getBoundingClientRect().top;\n }\n\n return sfh;\n }\n\n testBottomInView(sticker: Sticker) {\n const vph = this.getViewportHeight();\n const sfh = this.getScrollFrameHeight();\n const sic = this.#scrollIntervalChange;\n\n return sfh + sic + (vph - sfh) >= sticker.bottom + this.offset;\n }\n\n testForStick() {\n // Don't do anything if scrolling up\n if (this.#scrollDirection === -1) return;\n\n this.#stickers.forEach(sticker => {\n const bottomIsInView = this.testBottomInView(sticker);\n const hasHeightChange =\n !Number.isNaN(sticker.priorStickHeight) && sticker.height !== sticker.priorStickHeight;\n\n if (bottomIsInView) {\n if (!sticker.isStuck || hasHeightChange) {\n window.requestAnimationFrame(() => this.addStick(sticker));\n }\n } else if (sticker.isStuck && hasHeightChange) {\n const marginTop = this.getScrollY() + sticker.top - this.offset;\n\n window.requestAnimationFrame(() => {\n this.removeStick(sticker);\n sticker.element.style.marginTop = `${marginTop}px`;\n });\n }\n });\n\n return this;\n }\n\n addStick(sticker: Sticker) {\n sticker.element.style.position = 'sticky';\n sticker.element.style.marginTop = '';\n sticker.element.style.top = `${this.getStickTop(sticker)}px`;\n sticker.priorStickHeight = sticker.height;\n sticker.isStuck = true;\n return this;\n }\n\n removeStick(sticker: Sticker) {\n sticker.element.style.position = '';\n sticker.element.style.marginTop = '';\n sticker.element.style.top = '';\n sticker.isStuck = false;\n return this;\n }\n\n getStickTop(sticker: Sticker) {\n const spHeight = this.getScrollFrameHeight();\n let offset = this.offset;\n\n if (sticker.height + this.offset > spHeight) {\n offset = spHeight - sticker.height - offset;\n }\n\n return offset;\n }\n\n cleanup() {\n this.rmHandlers();\n this.#stickers.forEach(this.removeStick);\n }\n}\n\n/**\n * @example useScrollStick({ elements: [myColumnElements] | '.my-columns', offset: 20 });\n * @param options An object to set the sticky elements, the scroll container and an stuck offset in pixels.\n * @returns void.\n */\nconst useScrollStick = (options?: ScrollStickOptions): void => {\n const instance = useRef<Stickers>();\n\n useLayoutEffect(() => {\n if (options?.elements) {\n instance.current = new Stickers(options);\n }\n\n return () => {\n instance.current?.cleanup();\n instance.current = undefined;\n };\n }, [options]);\n};\n\nexport default useScrollStick;\n"]}
|
|
1
|
+
{"version":3,"file":"useScrollStick.js","sourceRoot":"","sources":["../../src/hooks/useScrollStick.ts"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useLayoutEffect } from 'react';\n\nexport interface ScrollStickOptions {\n elements: string | HTMLElement[] | Set<HTMLElement>;\n scrollContainer?: Stickers['scrollContainer'];\n offset?: number;\n}\n\ninterface Sticker {\n element: HTMLElement;\n top: number;\n bottom: number;\n height: number;\n isStuck: boolean;\n priorStickHeight: number;\n}\n\ntype ElementsOption = ScrollStickOptions['elements'];\n\nconst onBeforeunload = () => {\n window.scrollTo(0, 0);\n};\n\nclass Stickers {\n scrollContainer: HTMLElement | Window;\n offset: number;\n #scrollDebounce: number;\n #resizeDebounce: number;\n #isWindowScroll: boolean;\n #scrollIntervalStart: number;\n #scrollIntervalChange: number;\n #scrollDirection: number;\n #priorScrollY: number;\n #resizeTimeout: number;\n #scrollEndTimeout: number;\n #isScrolling: boolean;\n #vpHeightSnapshot: number;\n #sfHeightSnapshot: number;\n #stickers: Set<Sticker>;\n #scrollHandler: () => void;\n #resizeHandler: () => void;\n\n constructor({ elements, scrollContainer = window, offset = 0 }: ScrollStickOptions) {\n this.scrollContainer = scrollContainer;\n this.offset = offset;\n\n this.#scrollDebounce = 100;\n this.#resizeDebounce = 300;\n this.#resizeTimeout = NaN;\n this.#scrollEndTimeout = NaN;\n this.#priorScrollY = NaN;\n this.#isScrolling = false;\n this.#vpHeightSnapshot = NaN;\n this.#sfHeightSnapshot = NaN;\n this.#scrollHandler = () => {};\n this.#resizeHandler = () => {};\n\n this.#isWindowScroll = this.scrollContainer === window;\n\n // Only gets reset after scroll stop timeout fires\n this.#scrollIntervalStart = this.getScrollY();\n\n // Used to determine scroll change within debounced scroll handler\n this.#scrollIntervalChange = 0;\n\n // Used to determine scroll direction by +1(page down) -1(page up)\n this.#scrollDirection = 0;\n\n this.#stickers = this.setStickers(elements);\n this.snapshotItemRects();\n this.addHandlers();\n this.testForStick();\n }\n\n setStickers(elements: ElementsOption) {\n this.#stickers = new Set(\n (typeof elements === 'string'\n ? [...document.querySelectorAll<HTMLElement>(elements)]\n : [...elements]\n ).map(element => ({\n element,\n isStuck: false,\n top: NaN,\n bottom: NaN,\n height: NaN,\n priorStickHeight: NaN\n }))\n );\n\n return this.#stickers;\n }\n\n addHandlers() {\n this.rmHandlers();\n this.#scrollHandler = this.onScroll.bind(this);\n this.#resizeHandler = this.onResize.bind(this);\n this.scrollContainer.addEventListener('scroll', this.#scrollHandler);\n window.addEventListener('resize', this.#resizeHandler);\n // Not sure we need this. Maybe when DOM was persisted...\n window.addEventListener('beforeunload', onBeforeunload);\n }\n\n rmHandlers() {\n this.scrollContainer.removeEventListener('scroll', this.#scrollHandler);\n window.removeEventListener('resize', this.#resizeHandler);\n window.removeEventListener('beforeunload', onBeforeunload);\n }\n\n snapshotItemRects() {\n this.#stickers.forEach(sticker => {\n const rect = sticker.element.getBoundingClientRect();\n sticker.top = rect.top;\n sticker.bottom = rect.bottom;\n sticker.height = rect.height;\n });\n }\n\n onScroll() {\n clearTimeout(this.#scrollEndTimeout);\n\n const currentScrollY = this.getScrollY();\n\n this.#priorScrollY = !Number.isNaN(this.#priorScrollY)\n ? this.#priorScrollY\n : this.#scrollIntervalStart;\n\n // Diff between priorScrollY and new currentScrollY to determine direction\n this.#scrollDirection = currentScrollY - this.#priorScrollY > 0 ? 1 : -1;\n\n // How much scroll changed + or - within the debounce interval\n this.#scrollIntervalChange = currentScrollY - this.#scrollIntervalStart;\n\n // Update old to new for next scroll event\n this.#priorScrollY = currentScrollY;\n\n // When scrolling has stopped\n this.#scrollEndTimeout = window.setTimeout(() => {\n // Reset for next scroll starting point\n this.#scrollIntervalStart = this.#priorScrollY;\n\n // Reset until next scroll\n this.#vpHeightSnapshot = NaN;\n this.#sfHeightSnapshot = NaN;\n\n this.#isScrolling = false;\n }, this.#scrollDebounce);\n\n // Additional scroll calls always have to test for stick state change\n if (this.#isScrolling) {\n this.testForStick();\n return;\n }\n\n // Only reaches here on first call and we note as in a scrolling state\n this.#isScrolling = true;\n\n // grab the current rect points for stickers to test against while scrolling\n this.snapshotItemRects();\n\n /**\n * Get once and cache until scroll settles\n * Unlikely to change and avoids additional reflows on scroll\n */\n this.#vpHeightSnapshot = this.getViewportHeight();\n this.#sfHeightSnapshot = this.getScrollFrameHeight();\n\n this.testForStick();\n }\n\n onResize() {\n clearTimeout(this.#resizeTimeout);\n this.#resizeTimeout = window.setTimeout(() => {\n this.snapshotItemRects();\n this.#stickers.forEach(sticker => {\n if (sticker.isStuck) this.addStick(sticker);\n });\n }, this.#resizeDebounce);\n }\n\n getScrollY() {\n return this.#isWindowScroll\n ? (this.scrollContainer as Window).scrollY\n : (this.scrollContainer as HTMLElement).scrollTop;\n }\n\n getViewportHeight() {\n // If we have a height snapshot use it since this has likely been called on scroll\n if (!Number.isNaN(this.#vpHeightSnapshot)) {\n return this.#vpHeightSnapshot;\n }\n\n return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n }\n\n getScrollFrameHeight() {\n // If we have a height snapshot use it since this has likely been called on scroll\n if (!Number.isNaN(this.#sfHeightSnapshot)) {\n return this.#sfHeightSnapshot;\n }\n\n const viewportHeight = this.getViewportHeight();\n let sfh = viewportHeight;\n\n if (!this.#isWindowScroll) {\n sfh = viewportHeight - (this.scrollContainer as HTMLElement).getBoundingClientRect().top;\n }\n\n return sfh;\n }\n\n testBottomInView(sticker: Sticker) {\n const vph = this.getViewportHeight();\n const sfh = this.getScrollFrameHeight();\n const sic = this.#scrollIntervalChange;\n\n return sfh + sic + (vph - sfh) >= sticker.bottom + this.offset;\n }\n\n testForStick() {\n // Don't do anything if scrolling up\n if (this.#scrollDirection === -1) return;\n\n this.#stickers.forEach(sticker => {\n const bottomIsInView = this.testBottomInView(sticker);\n const hasHeightChange =\n !Number.isNaN(sticker.priorStickHeight) && sticker.height !== sticker.priorStickHeight;\n\n if (bottomIsInView) {\n if (!sticker.isStuck || hasHeightChange) {\n window.requestAnimationFrame(() => this.addStick(sticker));\n }\n } else if (sticker.isStuck && hasHeightChange) {\n const marginTop = this.getScrollY() + sticker.top - this.offset;\n\n window.requestAnimationFrame(() => {\n this.removeStick(sticker);\n sticker.element.style.marginTop = `${marginTop}px`;\n });\n }\n });\n\n return this;\n }\n\n addStick(sticker: Sticker) {\n sticker.element.style.position = 'sticky';\n sticker.element.style.marginTop = '';\n sticker.element.style.top = `${this.getStickTop(sticker)}px`;\n sticker.priorStickHeight = sticker.height;\n sticker.isStuck = true;\n return this;\n }\n\n removeStick(sticker: Sticker) {\n sticker.element.style.position = '';\n sticker.element.style.marginTop = '';\n sticker.element.style.top = '';\n sticker.isStuck = false;\n return this;\n }\n\n getStickTop(sticker: Sticker) {\n const spHeight = this.getScrollFrameHeight();\n let offset = this.offset;\n\n if (sticker.height + this.offset > spHeight) {\n offset = spHeight - sticker.height - offset;\n }\n\n return offset;\n }\n\n cleanup() {\n this.rmHandlers();\n this.#stickers.forEach(this.removeStick);\n }\n}\n\n/**\n * @example useScrollStick({ elements: [myColumnElements] | '.my-columns', offset: 20 });\n * @param options An object to set the sticky elements, the scroll container and an stuck offset in pixels.\n * @returns void.\n */\nconst useScrollStick = (options?: ScrollStickOptions): void => {\n const instance = useRef<Stickers>();\n\n useLayoutEffect(() => {\n if (options?.elements) {\n instance.current = new Stickers(options);\n }\n\n return () => {\n instance.current?.cleanup();\n instance.current = undefined;\n };\n }, [options?.scrollContainer, options?.offset, ...(options?.elements ?? [])]);\n};\n\nexport default useScrollStick;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "7.0.0-build.7.
|
|
3
|
+
"version": "7.0.0-build.7.1",
|
|
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
|
"repository": {
|
|
6
6
|
"type": "git",
|