@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

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

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM5E;;;;GAIG;AACH,QAAA,MAAM,cAAc,sGAEU,OAAO,wBAAwB,IAAI,kBAC9D,OA8EF,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM5E;;;;GAIG;AACH,QAAA,MAAM,cAAc,8GAEU,OAAO,wBAAwB,IAAI,kBAC9D,OA0FF,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/hooks/useFocusWithin.js

@@ -9,61 +9,66 @@ import useOuterEvent from './useOuterEvent';
 const useFocusWithin = (els, onFocusChange) => {
     const [hasFocus, setFocus] = useState(false);
     const focusedElRef = useRef(null);
+    const blurTimerRef = useRef();
     const elsRef = useRef(els);
     elsRef.current = els;
-    const onBlur = useCallback((e) => {
+    const onBlur = useCallback(({ relatedTarget }) => {
         if (!hasFocus)
             return;
         const elements = normalizeElements(elsRef.current);
-        // changing focus to another relevant child doesn't count
-        const focusedEl = elements.find(el => el === null || el === void 0 ? void 0 : el.contains(e.relatedTarget));
-        if (focusedEl) {
-            // ... just update the currently focused item
-            focusedElRef.current = focusedEl;
-            return;
+        if (relatedTarget instanceof Node) {
+            // changing focus to another relevant child doesn't count
+            const focusedEl = elements.find(el => el?.contains(relatedTarget));
+            if (focusedEl) {
+                // ... just update the currently focused item
+                focusedElRef.current = focusedEl;
+                return;
+            }
         }
-        const timerId = setTimeout(() => {
+        clearTimeout(blurTimerRef.current);
+        blurTimerRef.current = setTimeout(() => {
             if (!elements.some(el => {
-                return el === null || el === void 0 ? void 0 : el.contains(document.activeElement);
+                return el?.contains(document.activeElement);
             })) {
                 setFocus(false);
-                onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false, focusedElRef.current);
+                onFocusChange?.(false, focusedElRef.current);
                 focusedElRef.current = null;
             }
         });
-        return () => {
-            if (timerId)
-                clearTimeout(timerId);
-        };
     }, [hasFocus, onFocusChange]);
-    const onFocus = useCallback((e) => {
+    const onFocus = useCallback(({ currentTarget }) => {
+        clearTimeout(blurTimerRef.current);
         if (!hasFocus) {
             setFocus(true);
-            const targetEl = e.currentTarget;
-            onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true, targetEl);
+            const targetEl = currentTarget;
+            onFocusChange?.(true, targetEl);
             focusedElRef.current = targetEl;
         }
     }, [hasFocus, onFocusChange]);
     useOuterEvent('mouseup', els, useCallback(() => {
         if (hasFocus) {
             setFocus(false);
-            onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false, focusedElRef.current);
+            onFocusChange?.(false, focusedElRef.current);
             focusedElRef.current = null;
         }
     }, [onFocusChange, hasFocus]));
     useEffect(() => {
         const elements = normalizeElements(els);
-        elements.forEach((el) => {
-            el === null || el === void 0 ? void 0 : el.addEventListener('focusin', onFocus);
-            el === null || el === void 0 ? void 0 : el.addEventListener('focusout', onBlur);
+        elements.forEach(el => {
+            el?.addEventListener('focusin', onFocus);
+            el?.addEventListener('focusout', onBlur);
         });
         return () => {
-            elements.forEach((el) => {
-                el === null || el === void 0 ? void 0 : el.removeEventListener('focusin', onFocus);
-                el === null || el === void 0 ? void 0 : el.removeEventListener('focusout', onBlur);
+            elements.forEach(el => {
+                el?.removeEventListener('focusin', onFocus);
+                el?.removeEventListener('focusout', onBlur);
             });
         };
     }, [els, onFocus, onBlur]);
+    // Clear timeout when component un-mounts.
+    useEffect(() => () => {
+        clearTimeout(blurTimerRef.current);
+    }, []);
     return hasFocus;
 };
 export default useFocusWithin;

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C;;;;GAIG;AACH,MAAM,cAAc,GAAG,CACrB,GAAuC,EACvC,aAA+D,EACtD,EAAE;IACX,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IAE5C,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,CAAC,OAAO,GAAG,GAAG,CAAC;IAErB,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,CAAQ,EAAE,EAAE;QACX,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACnD,yDAAyD;QACzD,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,QAAQ,CAAE,CAAgB,CAAC,aAAqB,CAAC,CAAC,CAAC;QAC7F,IAAI,SAAS,EAAE;YACb,6CAA6C;YAC7C,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;YACjC,OAAO;SACR;QACD,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,IACE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;gBAClB,OAAO,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;YAC9C,CAAC,CAAC,EACF;gBACA,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAChB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;gBAC7C,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;aAC7B;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,IAAI,OAAO;gBAAE,YAAY,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,aAAa,CAAC,CAC1B,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,CAAQ,EAAE,EAAE;QACX,IAAI,CAAC,QAAQ,EAAE;YACb,QAAQ,CAAC,IAAI,CAAC,CAAC;YACf,MAAM,QAAQ,GAAI,CAAgB,CAAC,aAAkB,CAAC;YACtD,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,IAAI,EAAE,QAAQ,CAAC,CAAC;YAChC,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC;SACjC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,aAAa,CAAC,CAC1B,CAAC;IAEF,aAAa,CACX,SAAS,EACT,GAAG,EACH,WAAW,CAAC,GAAG,EAAE;QACf,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;YAC7C,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAC9B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC;QAExC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAY,EAAE,EAAE;YAChC,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YACzC,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAY,EAAE,EAAE;gBAChC,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;gBAC5C,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,mBAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC9C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAE3B,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { useState, useEffect, RefObject, useCallback, useRef } from 'react';\n\nimport { normalizeElements } from '../utils';\n\nimport useOuterEvent from './useOuterEvent';\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 Element = Element>(\n  els: (T | null | RefObject<T | null>)[],\n  onFocusChange?: (isFocused: boolean, element: T | null) => void\n): boolean => {\n  const [hasFocus, setFocus] = useState(false);\n  const focusedElRef = useRef<T | null>(null);\n\n  const elsRef = useRef(els);\n  elsRef.current = els;\n\n  const onBlur = useCallback(\n    (e: Event) => {\n      if (!hasFocus) return;\n\n      const elements = normalizeElements(elsRef.current);\n      // changing focus to another relevant child doesn't count\n      const focusedEl = elements.find(el => el?.contains((e as FocusEvent).relatedTarget as Node));\n      if (focusedEl) {\n        // ... just update the currently focused item\n        focusedElRef.current = focusedEl;\n        return;\n      }\n      const timerId = setTimeout(() => {\n        if (\n          !elements.some(el => {\n            return el?.contains(document.activeElement);\n          })\n        ) {\n          setFocus(false);\n          onFocusChange?.(false, focusedElRef.current);\n          focusedElRef.current = null;\n        }\n      });\n\n      return () => {\n        if (timerId) clearTimeout(timerId);\n      };\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  const onFocus = useCallback(\n    (e: Event) => {\n      if (!hasFocus) {\n        setFocus(true);\n        const targetEl = (e as FocusEvent).currentTarget as T;\n        onFocusChange?.(true, targetEl);\n        focusedElRef.current = targetEl;\n      }\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  useOuterEvent(\n    'mouseup',\n    els,\n    useCallback(() => {\n      if (hasFocus) {\n        setFocus(false);\n        onFocusChange?.(false, focusedElRef.current);\n        focusedElRef.current = null;\n      }\n    }, [onFocusChange, hasFocus])\n  );\n\n  useEffect(() => {\n    const elements = normalizeElements(els);\n\n    elements.forEach((el: T | null) => {\n      el?.addEventListener('focusin', onFocus);\n      el?.addEventListener('focusout', onBlur);\n    });\n    return () => {\n      elements.forEach((el: T | null) => {\n        el?.removeEventListener('focusin', onFocus);\n        el?.removeEventListener('focusout', onBlur);\n      });\n    };\n  }, [els, onFocus, onBlur]);\n\n  return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
+{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject, useCallback, useRef } from 'react';\n\nimport { normalizeElements } from '../utils';\n\nimport useOuterEvent from './useOuterEvent';\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 | null) => void\n): boolean => {\n  const [hasFocus, setFocus] = useState(false);\n  const focusedElRef = useRef<T | null>(null);\n  const blurTimerRef = useRef<number>();\n\n  const elsRef = useRef(els);\n  elsRef.current = els;\n\n  const onBlur = useCallback(\n    ({ relatedTarget }: FocusEvent) => {\n      if (!hasFocus) return;\n\n      const elements = normalizeElements(elsRef.current);\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      clearTimeout(blurTimerRef.current);\n      blurTimerRef.current = setTimeout(() => {\n        if (\n          !elements.some(el => {\n            return el?.contains(document.activeElement);\n          })\n        ) {\n          setFocus(false);\n          onFocusChange?.(false, focusedElRef.current);\n          focusedElRef.current = null;\n        }\n      });\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  const onFocus = useCallback(\n    ({ currentTarget }: FocusEvent) => {\n      clearTimeout(blurTimerRef.current);\n\n      if (!hasFocus) {\n        setFocus(true);\n        const targetEl = currentTarget as T;\n        onFocusChange?.(true, targetEl);\n        focusedElRef.current = targetEl;\n      }\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  useOuterEvent(\n    'mouseup',\n    els,\n    useCallback(() => {\n      if (hasFocus) {\n        setFocus(false);\n        onFocusChange?.(false, focusedElRef.current);\n        focusedElRef.current = null;\n      }\n    }, [onFocusChange, hasFocus])\n  );\n\n  useEffect(() => {\n    const elements = normalizeElements(els);\n\n    elements.forEach(el => {\n      el?.addEventListener('focusin', onFocus);\n      el?.addEventListener('focusout', onBlur);\n    });\n    return () => {\n      elements.forEach(el => {\n        el?.removeEventListener('focusin', onFocus);\n        el?.removeEventListener('focusout', onBlur);\n      });\n    };\n  }, [els, onFocus, onBlur]);\n\n  // Clear timeout when component un-mounts.\n  useEffect(\n    () => () => {\n      clearTimeout(blurTimerRef.current);\n    },\n    []\n  );\n\n  return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}