@pega/cosmos-react-core 7.14.0 → 7.14.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 +1 @@
1
- {"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC;;;;GAIG;AACH,QAAA,MAAM,cAAc,8GAEU,OAAO,kCAAkC,IAAI,kBACxE,OA4IF,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC;;;;GAIG;AACH,QAAA,MAAM,cAAc,8GAEU,OAAO,kCAAkC,IAAI,kBACxE,OA8IF,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -41,7 +41,9 @@ const useFocusWithin = (els, onFocusChange) => {
41
41
  const handlerAbortController = new AbortController();
42
42
  const handler = (fe) => {
43
43
  if (!elements.some(el => {
44
- return el?.contains(fe.target);
44
+ return fe.composedPath().some(target => {
45
+ return target instanceof Node && el.contains(target);
46
+ });
45
47
  })) {
46
48
  setFocus(false);
47
49
  onFocusChange?.(false, focusedElRef.current);
@@ -1 +1 @@
1
- {"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nimport { getAllPopovers, hasProp, normalizeTargets } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\nconst getElements = <T extends HTMLElement = HTMLElement>(\n els: (T | null | RefObject<T | null>)[]\n) =>\n normalizeTargets(els)\n .flatMap(el => [el, ...getAllPopovers(el)])\n .filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n els: (T | null | RefObject<T | null>)[],\n onFocusChange?: (isFocused: boolean, element: T | Element | null) => void\n): boolean => {\n const [hasFocus, setFocus] = useState(false);\n const focusedElRef = useRef<T | Element | null>(null);\n const { portalTarget } = useConfiguration();\n\n const handlerAbortControllerRef = useRef<AbortController>();\n useEffect(() => {\n return () => {\n handlerAbortControllerRef.current?.abort();\n };\n }, []);\n\n const onBlur = useCallback(\n (e: FocusEvent | Event) => {\n if (!hasFocus) return;\n\n const relatedTarget = hasProp(e, 'relatedTarget') ? e.relatedTarget : null;\n\n // Gather observed elements along with their popovers to probe for element which gains focus.\n const elements = normalizeTargets(els).flatMap(el => [el, ...getAllPopovers(el)]);\n\n if (relatedTarget instanceof Node) {\n // changing focus to another relevant child doesn't count\n const focusedEl = elements.find(el => el?.contains(relatedTarget));\n if (focusedEl) {\n // ... just update the currently focused item\n focusedElRef.current = focusedEl;\n return;\n }\n }\n\n // Code below is similar to the useOuterEvent hook, but single-shot only and need to be attached\n // after blur event only. Due to various order of events between browsers and OSes, we need to\n // postpone calling 'onBlur' callback until next element gets focus or on outer click to check\n // if the relevant element contains the target element, which means the focus is retained.\n const handlerAbortController = new AbortController();\n const handler = (fe: Event | FocusEvent | MouseEvent) => {\n if (\n !elements.some(el => {\n return el?.contains(fe.target as Node);\n })\n ) {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n }\n handlerAbortController.abort();\n };\n\n // For keyboard and SR navigation - wait for 'focusin'.\n // attach to root node of the first element is enough, since all should share the same root\n (elements[0] ?? portalTarget)\n ?.getRootNode({ composed: false })\n .addEventListener('focusin', handler, {\n once: true,\n signal: handlerAbortController.signal\n });\n\n // For mouse and touch navigation - wait for 'mouseup'.\n // The chosen event need to occur before 'click' to allow the given callback code finish before\n // 'click' handlers.\n // attach to root node of the first element is enough, since all should share the same root\n (elements[0] ?? portalTarget)\n ?.getRootNode({ composed: true })\n .addEventListener('mouseup', handler, {\n once: true,\n signal: handlerAbortController.signal\n });\n\n // For parent window we do not need to verify element placement in DOM.\n const parentWindowHandler = () => {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n handlerAbortController.abort();\n };\n\n try {\n // When in iframe, we need to listen to parent window events as well.\n window.parent?.document.addEventListener('focusin', parentWindowHandler, {\n once: true,\n signal: handlerAbortController.signal\n });\n window.parent?.document.addEventListener('mouseup', parentWindowHandler, {\n once: true,\n signal: handlerAbortController.signal\n });\n } catch {\n // IFrame parent document is not accessible when cross-origin.\n // Don't attach handlers in that case.\n }\n\n handlerAbortControllerRef.current = handlerAbortController;\n },\n [hasFocus, onFocusChange, els]\n );\n\n const onFocus = useCallback(\n (e: Event | FocusEvent) => {\n if (!hasFocus) {\n setFocus(true);\n const targetEl = e.currentTarget as T;\n onFocusChange?.(true, targetEl);\n focusedElRef.current = targetEl;\n }\n },\n [hasFocus, onFocusChange]\n );\n\n useEffect(() => {\n const elements = getElements(els);\n\n // Programmatically trigger focus callback on initial render to handle autoFocus\n elements.forEach(el => {\n if (el?.contains(document.activeElement)) {\n onFocus(new FocusEvent('focusin', { relatedTarget: document.activeElement }));\n }\n });\n }, []);\n\n useEffect(() => {\n const elements = normalizeTargets(els);\n\n elements.forEach(el => {\n el?.addEventListener('focusin', onFocus);\n el?.addEventListener('popover:focusin', onFocus);\n el?.addEventListener('focusout', onBlur);\n el?.addEventListener('popover:focusout', onBlur);\n });\n return () => {\n elements.forEach(el => {\n el?.removeEventListener('focusin', onFocus);\n el?.removeEventListener('popover:focusin', onFocus);\n el?.removeEventListener('focusout', onBlur);\n el?.removeEventListener('popover:focusout', onBlur);\n });\n };\n }, [els, onFocus, onBlur]);\n\n return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
1
+ {"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nimport { getAllPopovers, hasProp, normalizeTargets } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\nconst getElements = <T extends HTMLElement = HTMLElement>(\n els: (T | null | RefObject<T | null>)[]\n) =>\n normalizeTargets(els)\n .flatMap(el => [el, ...getAllPopovers(el)])\n .filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n els: (T | null | RefObject<T | null>)[],\n onFocusChange?: (isFocused: boolean, element: T | Element | null) => void\n): boolean => {\n const [hasFocus, setFocus] = useState(false);\n const focusedElRef = useRef<T | Element | null>(null);\n const { portalTarget } = useConfiguration();\n\n const handlerAbortControllerRef = useRef<AbortController>();\n useEffect(() => {\n return () => {\n handlerAbortControllerRef.current?.abort();\n };\n }, []);\n\n const onBlur = useCallback(\n (e: FocusEvent | Event) => {\n if (!hasFocus) return;\n\n const relatedTarget = hasProp(e, 'relatedTarget') ? e.relatedTarget : null;\n\n // Gather observed elements along with their popovers to probe for element which gains focus.\n const elements = normalizeTargets(els).flatMap(el => [el, ...getAllPopovers(el)]);\n\n if (relatedTarget instanceof Node) {\n // changing focus to another relevant child doesn't count\n const focusedEl = elements.find(el => el?.contains(relatedTarget));\n if (focusedEl) {\n // ... just update the currently focused item\n focusedElRef.current = focusedEl;\n return;\n }\n }\n\n // Code below is similar to the useOuterEvent hook, but single-shot only and need to be attached\n // after blur event only. Due to various order of events between browsers and OSes, we need to\n // postpone calling 'onBlur' callback until next element gets focus or on outer click to check\n // if the relevant element contains the target element, which means the focus is retained.\n const handlerAbortController = new AbortController();\n const handler = (fe: Event | FocusEvent | MouseEvent) => {\n if (\n !elements.some(el => {\n return fe.composedPath().some(target => {\n return target instanceof Node && el.contains(target);\n });\n })\n ) {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n }\n handlerAbortController.abort();\n };\n\n // For keyboard and SR navigation - wait for 'focusin'.\n // attach to root node of the first element is enough, since all should share the same root\n (elements[0] ?? portalTarget)\n ?.getRootNode({ composed: false })\n .addEventListener('focusin', handler, {\n once: true,\n signal: handlerAbortController.signal\n });\n\n // For mouse and touch navigation - wait for 'mouseup'.\n // The chosen event need to occur before 'click' to allow the given callback code finish before\n // 'click' handlers.\n // attach to root node of the first element is enough, since all should share the same root\n (elements[0] ?? portalTarget)\n ?.getRootNode({ composed: true })\n .addEventListener('mouseup', handler, {\n once: true,\n signal: handlerAbortController.signal\n });\n\n // For parent window we do not need to verify element placement in DOM.\n const parentWindowHandler = () => {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n handlerAbortController.abort();\n };\n\n try {\n // When in iframe, we need to listen to parent window events as well.\n window.parent?.document.addEventListener('focusin', parentWindowHandler, {\n once: true,\n signal: handlerAbortController.signal\n });\n window.parent?.document.addEventListener('mouseup', parentWindowHandler, {\n once: true,\n signal: handlerAbortController.signal\n });\n } catch {\n // IFrame parent document is not accessible when cross-origin.\n // Don't attach handlers in that case.\n }\n\n handlerAbortControllerRef.current = handlerAbortController;\n },\n [hasFocus, onFocusChange, els]\n );\n\n const onFocus = useCallback(\n (e: Event | FocusEvent) => {\n if (!hasFocus) {\n setFocus(true);\n const targetEl = e.currentTarget as T;\n onFocusChange?.(true, targetEl);\n focusedElRef.current = targetEl;\n }\n },\n [hasFocus, onFocusChange]\n );\n\n useEffect(() => {\n const elements = getElements(els);\n\n // Programmatically trigger focus callback on initial render to handle autoFocus\n elements.forEach(el => {\n if (el?.contains(document.activeElement)) {\n onFocus(new FocusEvent('focusin', { relatedTarget: document.activeElement }));\n }\n });\n }, []);\n\n useEffect(() => {\n const elements = normalizeTargets(els);\n\n elements.forEach(el => {\n el?.addEventListener('focusin', onFocus);\n el?.addEventListener('popover:focusin', onFocus);\n el?.addEventListener('focusout', onBlur);\n el?.addEventListener('popover:focusout', onBlur);\n });\n return () => {\n elements.forEach(el => {\n el?.removeEventListener('focusin', onFocus);\n el?.removeEventListener('popover:focusin', onFocus);\n el?.removeEventListener('focusout', onBlur);\n el?.removeEventListener('popover:focusout', onBlur);\n });\n };\n }, [els, onFocus, onBlur]);\n\n return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-core",
3
- "version": "7.14.0",
3
+ "version": "7.14.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",