@pega/cosmos-react-core 8.7.4 → 8.8.1

package/lib/hooks/useItemIntersection.d.ts

@@ -5,8 +5,9 @@ import type { RefObject } from 'react';
  * @param offset  Index of the list item which needs to be observed.
  * @param cb Callback that needs to be fired on intersect
  * @param itemSelector Selector used to get the node list of items
+ * @param boundingRef Ref to use as the bounding root for querying items, needed if component may be rendered in ShadowDOM.
  * @returns void.
  */
-declare const useItemIntersection: (containerRef: RefObject<HTMLElement>, offset: number, cb: () => void, itemSelector: string) => void;
+declare const useItemIntersection: (containerRef: RefObject<HTMLElement>, offset: number, cb: () => void, itemSelector: string, boundingRef?: RefObject<HTMLElement>) => void;
 export default useItemIntersection;
 //# sourceMappingURL=useItemIntersection.d.ts.map

package/lib/hooks/useItemIntersection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useItemIntersection.d.ts","sourceRoot":"","sources":["../../src/hooks/useItemIntersection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;GAOG;AAEH,QAAA,MAAM,mBAAmB,GACvB,cAAc,SAAS,CAAC,WAAW,CAAC,EACpC,QAAQ,MAAM,EACd,IAAI,MAAM,IAAI,EACd,cAAc,MAAM,SA6BrB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"useItemIntersection.d.ts","sourceRoot":"","sources":["../../src/hooks/useItemIntersection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;;GAQG;AAEH,QAAA,MAAM,mBAAmB,GACvB,cAAc,SAAS,CAAC,WAAW,CAAC,EACpC,QAAQ,MAAM,EACd,IAAI,MAAM,IAAI,EACd,cAAc,MAAM,EACpB,cAAc,SAAS,CAAC,WAAW,CAAC,SAmCrC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/hooks/useItemIntersection.js

@@ -1,19 +1,23 @@
 import { useEffect } from 'react';
+import { isInstance } from '../utils';
 /**
  * @example useItemIntersection(listRef,offset,() => { do_some_thing; });
  * @param containerRef The ref of the List.
  * @param offset  Index of the list item which needs to be observed.
  * @param cb Callback that needs to be fired on intersect
  * @param itemSelector Selector used to get the node list of items
+ * @param boundingRef Ref to use as the bounding root for querying items, needed if component may be rendered in ShadowDOM.
  * @returns void.
  */
-const useItemIntersection = (containerRef, offset, cb, itemSelector) => {
+const useItemIntersection = (containerRef, offset, cb, itemSelector, boundingRef) => {
     useEffect(() => {
-        if (!containerRef.current)
-            return;
         let item = null;
         if (offset > 0) {
-            const items = containerRef.current.querySelectorAll(itemSelector);
+            const elementToQuery = containerRef?.current ?? boundingRef?.current?.getRootNode() ?? document;
+            if (!isInstance(elementToQuery, HTMLElement, SVGElement, Document, ShadowRoot)) {
+                return;
+            }
+            const items = elementToQuery.querySelectorAll(itemSelector);
             if (items.length > offset) {
                 item = items[offset];
             }
@@ -24,14 +28,14 @@ const useItemIntersection = (containerRef, offset, cb, itemSelector) => {
                     cb();
                 }
             }, {
-                root: containerRef.current
+                root: containerRef.current ?? null
             });
             intersectionObserver.observe(item);
             return () => {
                 intersectionObserver.disconnect();
             };
         }
-    }, [cb, containerRef.current, offset]);
+    }, [cb, offset]);
 };
 export default useItemIntersection;
 //# sourceMappingURL=useItemIntersection.js.map

package/lib/hooks/useItemIntersection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useItemIntersection.js","sourceRoot":"","sources":["../../src/hooks/useItemIntersection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC;;;;;;;GAOG;AAEH,MAAM,mBAAmB,GAAG,CAC1B,YAAoC,EACpC,MAAc,EACd,EAAc,EACd,YAAoB,EACpB,EAAE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO;QAClC,IAAI,IAAI,GAAuB,IAAI,CAAC;QACpC,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;YACf,MAAM,KAAK,GAA4B,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;YAE3F,IAAI,KAAK,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC;gBAC1B,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;QACD,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,CAAC,OAAoC,EAAE,EAAE;gBACvC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;oBAC9B,EAAE,EAAE,CAAC;gBACP,CAAC;YACH,CAAC,EACD;gBACE,IAAI,EAAE,YAAY,CAAC,OAAO;aAC3B,CACF,CAAC;YACF,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE;gBACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;YACpC,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\n/**\n * @example useItemIntersection(listRef,offset,() => { do_some_thing; });\n * @param containerRef The ref of the List.\n * @param offset  Index of the list item which needs to be observed.\n * @param cb Callback that needs to be fired on intersect\n * @param itemSelector Selector used to get the node list of items\n * @returns void.\n */\n\nconst useItemIntersection = (\n  containerRef: RefObject<HTMLElement>,\n  offset: number,\n  cb: () => void,\n  itemSelector: string\n) => {\n  useEffect(() => {\n    if (!containerRef.current) return;\n    let item: HTMLElement | null = null;\n    if (offset > 0) {\n      const items: NodeListOf<HTMLElement> = containerRef.current.querySelectorAll(itemSelector);\n\n      if (items.length > offset) {\n        item = items[offset];\n      }\n    }\n    if (item) {\n      const intersectionObserver = new IntersectionObserver(\n        (entries: IntersectionObserverEntry[]) => {\n          if (entries[0].isIntersecting) {\n            cb();\n          }\n        },\n        {\n          root: containerRef.current\n        }\n      );\n      intersectionObserver.observe(item);\n      return () => {\n        intersectionObserver.disconnect();\n      };\n    }\n  }, [cb, containerRef.current, offset]);\n};\n\nexport default useItemIntersection;\n"]}
+{"version":3,"file":"useItemIntersection.js","sourceRoot":"","sources":["../../src/hooks/useItemIntersection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;;;;;GAQG;AAEH,MAAM,mBAAmB,GAAG,CAC1B,YAAoC,EACpC,MAAc,EACd,EAAc,EACd,YAAoB,EACpB,WAAoC,EACpC,EAAE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,GAAuB,IAAI,CAAC;QACpC,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;YACf,MAAM,cAAc,GAClB,YAAY,EAAE,OAAO,IAAI,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,QAAQ,CAAC;YAE3E,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC;gBAC/E,OAAO;YACT,CAAC;YAED,MAAM,KAAK,GAA4B,cAAc,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;YAErF,IAAI,KAAK,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC;gBAC1B,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;QACD,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,CAAC,OAAoC,EAAE,EAAE;gBACvC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;oBAC9B,EAAE,EAAE,CAAC;gBACP,CAAC;YACH,CAAC,EACD;gBACE,IAAI,EAAE,YAAY,CAAC,OAAO,IAAI,IAAI;aACnC,CACF,CAAC;YACF,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE;gBACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;YACpC,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;AACnB,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nimport { isInstance } from '../utils';\n\n/**\n * @example useItemIntersection(listRef,offset,() => { do_some_thing; });\n * @param containerRef The ref of the List.\n * @param offset  Index of the list item which needs to be observed.\n * @param cb Callback that needs to be fired on intersect\n * @param itemSelector Selector used to get the node list of items\n * @param boundingRef Ref to use as the bounding root for querying items, needed if component may be rendered in ShadowDOM.\n * @returns void.\n */\n\nconst useItemIntersection = (\n  containerRef: RefObject<HTMLElement>,\n  offset: number,\n  cb: () => void,\n  itemSelector: string,\n  boundingRef?: RefObject<HTMLElement>\n) => {\n  useEffect(() => {\n    let item: HTMLElement | null = null;\n    if (offset > 0) {\n      const elementToQuery =\n        containerRef?.current ?? boundingRef?.current?.getRootNode() ?? document;\n\n      if (!isInstance(elementToQuery, HTMLElement, SVGElement, Document, ShadowRoot)) {\n        return;\n      }\n\n      const items: NodeListOf<HTMLElement> = elementToQuery.querySelectorAll(itemSelector);\n\n      if (items.length > offset) {\n        item = items[offset];\n      }\n    }\n    if (item) {\n      const intersectionObserver = new IntersectionObserver(\n        (entries: IntersectionObserverEntry[]) => {\n          if (entries[0].isIntersecting) {\n            cb();\n          }\n        },\n        {\n          root: containerRef.current ?? null\n        }\n      );\n      intersectionObserver.observe(item);\n      return () => {\n        intersectionObserver.disconnect();\n      };\n    }\n  }, [cb, offset]);\n};\n\nexport default useItemIntersection;\n"]}

package/lib/utils/isInstance.d.ts

@@ -1,11 +1,11 @@
 /**
- * This function checks if an object is an instance of a given type.
+ * This function checks if an object is an instance of one of the given types.
  * It works similarly to the `instanceof` operator, but works across frame boundaries.
  *
  * @param obj The object to check.
- * @param type The constructor function or class to check against.
- * @returns True if the object is an instance of the given type, false otherwise.
+ * @param types The constructor functions or classes to check against.
+ * @returns True if the object is an instance of one of the given types, false otherwise.
  */
-declare const isInstance: <T>(obj: unknown, type: new (...args: never[]) => T) => obj is T;
+declare const isInstance: <T extends (abstract new (...args: never[]) => unknown)[]>(obj: unknown, ...types: T) => obj is InstanceType<T[number]>;
 export default isInstance;
 //# sourceMappingURL=isInstance.d.ts.map

package/lib/utils/isInstance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isInstance.d.ts","sourceRoot":"","sources":["../../src/utils/isInstance.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,QAAA,MAAM,UAAU,GAAI,CAAC,EAAE,KAAK,OAAO,EAAE,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAG,GAAG,IAAI,CAiB/E,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"isInstance.d.ts","sourceRoot":"","sources":["../../src/utils/isInstance.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,QAAA,MAAM,UAAU,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,CAAC,EAAE,EAC1E,KAAK,OAAO,EACZ,GAAG,OAAO,CAAC,KACV,GAAG,IAAI,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAgC/B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/utils/isInstance.js

@@ -1,20 +1,32 @@
+const objTargetString = Object.prototype.toString();
 /**
- * This function checks if an object is an instance of a given type.
+ * This function checks if an object is an instance of one of the given types.
  * It works similarly to the `instanceof` operator, but works across frame boundaries.
  *
  * @param obj The object to check.
- * @param type The constructor function or class to check against.
- * @returns True if the object is an instance of the given type, false otherwise.
+ * @param types The constructor functions or classes to check against.
+ * @returns True if the object is an instance of one of the given types, false otherwise.
  */
-const isInstance = (obj, type) => {
-    if (typeof obj !== 'object' || !obj)
+const isInstance = (obj, ...types) => {
+    if (types.length === 0)
         return false;
-    if (obj instanceof type)
+    if (!obj || (typeof obj !== 'object' && typeof obj !== 'function'))
+        return false;
+    if (types.some(type => obj instanceof type))
         return true;
-    const targetString = Object.prototype.toString.call(type.prototype);
+    const targetStrings = new Set(types.flatMap(type => {
+        const str = Object.prototype.toString.call(type.prototype);
+        // If str is '[object Object]', but type.prototype is not Object.prototype bail to avoid false positives.
+        if (str === objTargetString && type.prototype !== Object.prototype) {
+            return [];
+        }
+        return str;
+    }));
+    if (targetStrings.size === 0)
+        return false;
     let current = obj;
     while (current) {
-        if (Object.prototype.toString.call(current) === targetString) {
+        if (targetStrings.has(Object.prototype.toString.call(current))) {
             return true;
         }
         current = Object.getPrototypeOf(current);

package/lib/utils/isInstance.js.map

@@ -1 +1 @@
-{"version":3,"file":"isInstance.js","sourceRoot":"","sources":["../../src/utils/isInstance.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,GAAG,CAAI,GAAY,EAAE,IAAiC,EAAY,EAAE;IAClF,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,CAAC,GAAG;QAAE,OAAO,KAAK,CAAC;IAElD,IAAI,GAAG,YAAY,IAAI;QAAE,OAAO,IAAI,CAAC;IAErC,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEpE,IAAI,OAAO,GAAkB,GAAG,CAAC;IACjC,OAAO,OAAO,EAAE,CAAC;QACf,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,YAAY,EAAE,CAAC;YAC7D,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["/**\n * This function checks if an object is an instance of a given type.\n * It works similarly to the `instanceof` operator, but works across frame boundaries.\n *\n * @param obj The object to check.\n * @param type The constructor function or class to check against.\n * @returns True if the object is an instance of the given type, false otherwise.\n */\nconst isInstance = <T>(obj: unknown, type: new (...args: never[]) => T): obj is T => {\n  if (typeof obj !== 'object' || !obj) return false;\n\n  if (obj instanceof type) return true;\n\n  const targetString = Object.prototype.toString.call(type.prototype);\n\n  let current: object | null = obj;\n  while (current) {\n    if (Object.prototype.toString.call(current) === targetString) {\n      return true;\n    }\n\n    current = Object.getPrototypeOf(current);\n  }\n\n  return false;\n};\n\nexport default isInstance;\n"]}
+{"version":3,"file":"isInstance.js","sourceRoot":"","sources":["../../src/utils/isInstance.ts"],"names":[],"mappings":"AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;AAEpD;;;;;;;GAOG;AACH,MAAM,UAAU,GAAG,CACjB,GAAY,EACZ,GAAG,KAAQ,EACqB,EAAE;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IAErC,IAAI,CAAC,GAAG,IAAI,CAAC,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,UAAU,CAAC;QAAE,OAAO,KAAK,CAAC;IAEjF,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,YAAY,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzD,MAAM,aAAa,GAAG,IAAI,GAAG,CAC3B,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACnB,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE3D,yGAAyG;QACzG,IAAI,GAAG,KAAK,eAAe,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,SAAS,EAAE,CAAC;YACnE,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC,CAAC,CACH,CAAC;IAEF,IAAI,aAAa,CAAC,IAAI,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IAE3C,IAAI,OAAO,GAAkB,GAAG,CAAC;IACjC,OAAO,OAAO,EAAE,CAAC;QACf,IAAI,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC;YAC/D,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["const objTargetString = Object.prototype.toString();\n\n/**\n * This function checks if an object is an instance of one of the given types.\n * It works similarly to the `instanceof` operator, but works across frame boundaries.\n *\n * @param obj The object to check.\n * @param types The constructor functions or classes to check against.\n * @returns True if the object is an instance of one of the given types, false otherwise.\n */\nconst isInstance = <T extends (abstract new (...args: never[]) => unknown)[]>(\n  obj: unknown,\n  ...types: T\n): obj is InstanceType<T[number]> => {\n  if (types.length === 0) return false;\n\n  if (!obj || (typeof obj !== 'object' && typeof obj !== 'function')) return false;\n\n  if (types.some(type => obj instanceof type)) return true;\n\n  const targetStrings = new Set(\n    types.flatMap(type => {\n      const str = Object.prototype.toString.call(type.prototype);\n\n      // If str is '[object Object]', but type.prototype is not Object.prototype bail to avoid false positives.\n      if (str === objTargetString && type.prototype !== Object.prototype) {\n        return [];\n      }\n\n      return str;\n    })\n  );\n\n  if (targetStrings.size === 0) return false;\n\n  let current: object | null = obj;\n  while (current) {\n    if (targetStrings.has(Object.prototype.toString.call(current))) {\n      return true;\n    }\n\n    current = Object.getPrototypeOf(current);\n  }\n\n  return false;\n};\n\nexport default isInstance;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "8.7.4",
+  "version": "8.8.1",
   "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.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",