@vkontakte/vkui 8.1.2 → 8.2.0

package/dist/cssm/hooks/useFocusTrap/useFocusTrap.js

@@ -46,6 +46,7 @@ export const useFocusTrap = (ref, { mount = true, disabled = false, autoFocus =
     const prevFocusableRef = useRef([]);
     const createFocusFn = (getFocusElement)=>{
         return ()=>{
+            // eslint-disable-next-line react-hooks/refs
             const node = getFocusElement(ref.current);
             if (node) {
                 node.focus({
@@ -100,6 +101,7 @@ export const useFocusTrap = (ref, { mount = true, disabled = false, autoFocus =
     useMutationObserver(ref, ()=>ref.current && onMutateParentHandler(ref.current));
     const createGuardFocusHandler = (focusFn, focusFromOutside)=>{
         return (event)=>{
+            // eslint-disable-next-line react-hooks/refs
             if (!mount || disabled || !ref.current) {
                 return;
             }

package/dist/cssm/hooks/useFocusTrap/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useRef } from 'react';\nimport { arraysEquals } from '../../helpers/array';\nimport { FOCUSABLE_ELEMENTS_LIST } from '../../lib/accessibility';\nimport { getWindow } from '../../lib/dom';\nimport { useMutationObserver } from '../useMutationObserver';\nimport { useStableCallback } from '../useStableCallback';\nimport { FocusGuard } from './FocusGuard';\nimport { useAutoFocus } from './useAutoFocus';\nimport { useRestoreFocus } from './useRestoreFocus';\n\nconst FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();\n\nconst collectFocusable = (root: HTMLElement): HTMLElement[] => {\n  const newFocusableElements =\n    // eslint-disable-next-line no-restricted-properties\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n  const nodes = Array.from(newFocusableElements).filter((node) => {\n    // Исключаем гарды из списка фокусируемых элементов\n    if (node.hasAttribute('data-focus-guard')) {\n      return false;\n    }\n\n    const { display, visibility } = getComputedStyle(node);\n    const isHidden = display === 'none' || visibility === 'hidden';\n    const isDisabled = (node as HTMLButtonElement).disabled ?? false;\n\n    return !isHidden && !isDisabled;\n  });\n\n  if (nodes.length === 0) {\n    nodes.push(root);\n  }\n\n  return nodes;\n};\n\nconst getFirstFocusable = (root: HTMLElement | null): HTMLElement | null => {\n  if (!root) {\n    return null;\n  }\n\n  const nodes = collectFocusable(root);\n  return nodes[0] || null;\n};\n\nconst getLastFocusable = (root: HTMLElement | null): HTMLElement | null => {\n  if (!root) {\n    return null;\n  }\n\n  const nodes = collectFocusable(root);\n  return nodes[nodes.length - 1] || null;\n};\n\nexport type UseFocusTrapProps = {\n  /**\n   * Форсированное отключение захвата фокуса\n   *\n   * @default false\n   */\n  disabled?: boolean | undefined;\n  /**\n   * Управление поведением автофокуса при появлении всплывающего окна.\n   * При прокидывании `true` фокус будет установлен на первый элемент.\n   * При прокидывании `root` фокус будет установлен в корень.\n   * @default true\n   */\n  autoFocus?: boolean | 'root' | undefined;\n  /**\n   * Управление поведением возврата фокуса при закрытии всплывающего окна.\n   * @default true\n   */\n  restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;\n  /**\n   * Время в миллисекундах после которого срабатывает автофокус при появлении всплывающего окна.\n   * @default 0\n   */\n  autoFocusDelay?: number | undefined;\n  /**\n   * @default true\n   */\n  mount?: boolean | undefined;\n};\n\nexport const useFocusTrap = (\n  ref: React.RefObject<HTMLElement | null>,\n  {\n    mount = true,\n    disabled = false,\n    autoFocus = true,\n    restoreFocus = true,\n    autoFocusDelay = 0,\n  }: UseFocusTrapProps,\n) => {\n  const prevFocusableRef = useRef<HTMLElement[]>([]);\n\n  const createFocusFn = (getFocusElement: (root: HTMLElement | null) => HTMLElement | null) => {\n    return () => {\n      const node = getFocusElement(ref.current);\n      if (node) {\n        node.focus({ preventScroll: true });\n      } else if (ref.current) {\n        ref.current.focus();\n      }\n    };\n  };\n\n  const focusFirst = useStableCallback(createFocusFn(getFirstFocusable));\n\n  const focusLast = useStableCallback(createFocusFn(getLastFocusable));\n\n  useRestoreFocus({\n    restoreFocus,\n    autoFocusDelay,\n    mount,\n    ref,\n  });\n\n  useAutoFocus(ref, {\n    autoFocus,\n    disabled,\n    mount,\n    autoFocusDelay,\n    focusFirst,\n  });\n\n  const onMutateParentHandler = useStableCallback((parentNode: HTMLElement) => {\n    if (disabled || !autoFocus || !mount) {\n      return;\n    }\n\n    const doc = getWindow(parentNode)?.document;\n    if (!doc) {\n      return;\n    }\n\n    const activeElement = doc.activeElement as HTMLElement;\n    const focusableNodes = collectFocusable(parentNode);\n\n    if (arraysEquals(focusableNodes, prevFocusableRef.current)) {\n      return;\n    }\n\n    if (focusableNodes.length === 0) {\n      prevFocusableRef.current = [];\n      return;\n    }\n\n    const currentElementIndex = Math.max(\n      activeElement ? focusableNodes.indexOf(activeElement) : -1,\n      0,\n    );\n\n    const nodeToFocus = focusableNodes[currentElementIndex];\n    if (nodeToFocus) {\n      nodeToFocus.focus({ preventScroll: true });\n    }\n\n    prevFocusableRef.current = focusableNodes;\n  });\n\n  useMutationObserver(ref, () => ref.current && onMutateParentHandler(ref.current));\n\n  const createGuardFocusHandler = (focusFn: () => void, focusFromOutside: () => void) => {\n    return (event: React.FocusEvent<HTMLSpanElement>) => {\n      if (!mount || disabled || !ref.current) {\n        return;\n      }\n\n      // Проверяем, был ли предыдущий активный элемент внутри root\n      // Если нет, значит фокус пришёл извне, и нужно использовать focusFromOutside\n      const relatedTarget = event.relatedTarget as HTMLElement | null;\n\n      if (relatedTarget === null || (relatedTarget && !ref.current.contains(relatedTarget))) {\n        focusFromOutside();\n        return;\n      }\n\n      focusFn();\n    };\n  };\n\n  const onBeforeGuardFocus = useStableCallback(createGuardFocusHandler(focusLast, focusFirst));\n  const onAfterGuardFocus = useStableCallback(createGuardFocusHandler(focusFirst, focusLast));\n\n  const shouldRenderGuards = mount && !disabled;\n\n  return {\n    beforeGuard: shouldRenderGuards && <FocusGuard onFocus={onBeforeGuardFocus} />,\n    afterGuard: shouldRenderGuards && <FocusGuard onFocus={onAfterGuardFocus} />,\n  };\n};\n"],"names":["useRef","arraysEquals","FOCUSABLE_ELEMENTS_LIST","getWindow","useMutationObserver","useStableCallback","FocusGuard","useAutoFocus","useRestoreFocus","FOCUSABLE_ELEMENTS","join","collectFocusable","root","newFocusableElements","querySelectorAll","nodes","Array","from","filter","node","hasAttribute","display","visibility","getComputedStyle","isHidden","isDisabled","disabled","length","push","getFirstFocusable","getLastFocusable","useFocusTrap","ref","mount","autoFocus","restoreFocus","autoFocusDelay","prevFocusableRef","createFocusFn","getFocusElement","current","focus","preventScroll","focusFirst","focusLast","onMutateParentHandler","parentNode","doc","document","activeElement","focusableNodes","currentElementIndex","Math","max","indexOf","nodeToFocus","createGuardFocusHandler","focusFn","focusFromOutside","event","relatedTarget","contains","onBeforeGuardFocus","onAfterGuardFocus","shouldRenderGuards","beforeGuard","onFocus","afterGuard"],"mappings":"AAAA;;AAGA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,YAAY,QAAQ,yBAAsB;AACnD,SAASC,uBAAuB,QAAQ,6BAA0B;AAClE,SAASC,SAAS,QAAQ,mBAAgB;AAC1C,SAASC,mBAAmB,QAAQ,4BAAyB;AAC7D,SAASC,iBAAiB,QAAQ,0BAAuB;AACzD,SAASC,UAAU,QAAQ,kBAAe;AAC1C,SAASC,YAAY,QAAQ,oBAAiB;AAC9C,SAASC,eAAe,QAAQ,uBAAoB;AAEpD,MAAMC,qBAAqBP,wBAAwBQ,IAAI;AAEvD,MAAMC,mBAAmB,CAACC;IACxB,MAAMC,uBACJ,oDAAoD;IACpDD,KAAKE,gBAAgB,CAAcL;IACrC,MAAMM,QAAQC,MAAMC,IAAI,CAACJ,sBAAsBK,MAAM,CAAC,CAACC;QACrD,mDAAmD;QACnD,IAAIA,KAAKC,YAAY,CAAC,qBAAqB;YACzC,OAAO;QACT;QAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,iBAAiBJ;QACjD,MAAMK,WAAWH,YAAY,UAAUC,eAAe;QACtD,MAAMG,aAAa,AAACN,KAA2BO,QAAQ,IAAI;QAE3D,OAAO,CAACF,YAAY,CAACC;IACvB;IAEA,IAAIV,MAAMY,MAAM,KAAK,GAAG;QACtBZ,MAAMa,IAAI,CAAChB;IACb;IAEA,OAAOG;AACT;AAEA,MAAMc,oBAAoB,CAACjB;IACzB,IAAI,CAACA,MAAM;QACT,OAAO;IACT;IAEA,MAAMG,QAAQJ,iBAAiBC;IAC/B,OAAOG,KAAK,CAAC,EAAE,IAAI;AACrB;AAEA,MAAMe,mBAAmB,CAAClB;IACxB,IAAI,CAACA,MAAM;QACT,OAAO;IACT;IAEA,MAAMG,QAAQJ,iBAAiBC;IAC/B,OAAOG,KAAK,CAACA,MAAMY,MAAM,GAAG,EAAE,IAAI;AACpC;AAgCA,OAAO,MAAMI,eAAe,CAC1BC,KACA,EACEC,QAAQ,IAAI,EACZP,WAAW,KAAK,EAChBQ,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,iBAAiB,CAAC,EACA;IAEpB,MAAMC,mBAAmBrC,OAAsB,EAAE;IAEjD,MAAMsC,gBAAgB,CAACC;QACrB,OAAO;YACL,MAAMpB,OAAOoB,gBAAgBP,IAAIQ,OAAO;YACxC,IAAIrB,MAAM;gBACRA,KAAKsB,KAAK,CAAC;oBAAEC,eAAe;gBAAK;YACnC,OAAO,IAAIV,IAAIQ,OAAO,EAAE;gBACtBR,IAAIQ,OAAO,CAACC,KAAK;YACnB;QACF;IACF;IAEA,MAAME,aAAatC,kBAAkBiC,cAAcT;IAEnD,MAAMe,YAAYvC,kBAAkBiC,cAAcR;IAElDtB,gBAAgB;QACd2B;QACAC;QACAH;QACAD;IACF;IAEAzB,aAAayB,KAAK;QAChBE;QACAR;QACAO;QACAG;QACAO;IACF;IAEA,MAAME,wBAAwBxC,kBAAkB,CAACyC;QAC/C,IAAIpB,YAAY,CAACQ,aAAa,CAACD,OAAO;YACpC;QACF;QAEA,MAAMc,MAAM5C,UAAU2C,aAAaE;QACnC,IAAI,CAACD,KAAK;YACR;QACF;QAEA,MAAME,gBAAgBF,IAAIE,aAAa;QACvC,MAAMC,iBAAiBvC,iBAAiBmC;QAExC,IAAI7C,aAAaiD,gBAAgBb,iBAAiBG,OAAO,GAAG;YAC1D;QACF;QAEA,IAAIU,eAAevB,MAAM,KAAK,GAAG;YAC/BU,iBAAiBG,OAAO,GAAG,EAAE;YAC7B;QACF;QAEA,MAAMW,sBAAsBC,KAAKC,GAAG,CAClCJ,gBAAgBC,eAAeI,OAAO,CAACL,iBAAiB,CAAC,GACzD;QAGF,MAAMM,cAAcL,cAAc,CAACC,oBAAoB;QACvD,IAAII,aAAa;YACfA,YAAYd,KAAK,CAAC;gBAAEC,eAAe;YAAK;QAC1C;QAEAL,iBAAiBG,OAAO,GAAGU;IAC7B;IAEA9C,oBAAoB4B,KAAK,IAAMA,IAAIQ,OAAO,IAAIK,sBAAsBb,IAAIQ,OAAO;IAE/E,MAAMgB,0BAA0B,CAACC,SAAqBC;QACpD,OAAO,CAACC;YACN,IAAI,CAAC1B,SAASP,YAAY,CAACM,IAAIQ,OAAO,EAAE;gBACtC;YACF;YAEA,4DAA4D;YAC5D,6EAA6E;YAC7E,MAAMoB,gBAAgBD,MAAMC,aAAa;YAEzC,IAAIA,kBAAkB,QAASA,iBAAiB,CAAC5B,IAAIQ,OAAO,CAACqB,QAAQ,CAACD,gBAAiB;gBACrFF;gBACA;YACF;YAEAD;QACF;IACF;IAEA,MAAMK,qBAAqBzD,kBAAkBmD,wBAAwBZ,WAAWD;IAChF,MAAMoB,oBAAoB1D,kBAAkBmD,wBAAwBb,YAAYC;IAEhF,MAAMoB,qBAAqB/B,SAAS,CAACP;IAErC,OAAO;QACLuC,aAAaD,oCAAsB,KAAC1D;YAAW4D,SAASJ;;QACxDK,YAAYH,oCAAsB,KAAC1D;YAAW4D,SAASH;;IACzD;AACF,EAAE"}
+{"version":3,"sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useRef } from 'react';\nimport { arraysEquals } from '../../helpers/array';\nimport { FOCUSABLE_ELEMENTS_LIST } from '../../lib/accessibility';\nimport { getWindow } from '../../lib/dom';\nimport { useMutationObserver } from '../useMutationObserver';\nimport { useStableCallback } from '../useStableCallback';\nimport { FocusGuard } from './FocusGuard';\nimport { useAutoFocus } from './useAutoFocus';\nimport { useRestoreFocus } from './useRestoreFocus';\n\nconst FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();\n\nconst collectFocusable = (root: HTMLElement): HTMLElement[] => {\n  const newFocusableElements =\n    // eslint-disable-next-line no-restricted-properties\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n  const nodes = Array.from(newFocusableElements).filter((node) => {\n    // Исключаем гарды из списка фокусируемых элементов\n    if (node.hasAttribute('data-focus-guard')) {\n      return false;\n    }\n\n    const { display, visibility } = getComputedStyle(node);\n    const isHidden = display === 'none' || visibility === 'hidden';\n    const isDisabled = (node as HTMLButtonElement).disabled ?? false;\n\n    return !isHidden && !isDisabled;\n  });\n\n  if (nodes.length === 0) {\n    nodes.push(root);\n  }\n\n  return nodes;\n};\n\nconst getFirstFocusable = (root: HTMLElement | null): HTMLElement | null => {\n  if (!root) {\n    return null;\n  }\n\n  const nodes = collectFocusable(root);\n  return nodes[0] || null;\n};\n\nconst getLastFocusable = (root: HTMLElement | null): HTMLElement | null => {\n  if (!root) {\n    return null;\n  }\n\n  const nodes = collectFocusable(root);\n  return nodes[nodes.length - 1] || null;\n};\n\nexport type UseFocusTrapProps = {\n  /**\n   * Форсированное отключение захвата фокуса\n   *\n   * @default false\n   */\n  disabled?: boolean | undefined;\n  /**\n   * Управление поведением автофокуса при появлении всплывающего окна.\n   * При прокидывании `true` фокус будет установлен на первый элемент.\n   * При прокидывании `root` фокус будет установлен в корень.\n   * @default true\n   */\n  autoFocus?: boolean | 'root' | undefined;\n  /**\n   * Управление поведением возврата фокуса при закрытии всплывающего окна.\n   * @default true\n   */\n  restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;\n  /**\n   * Время в миллисекундах после которого срабатывает автофокус при появлении всплывающего окна.\n   * @default 0\n   */\n  autoFocusDelay?: number | undefined;\n  /**\n   * @default true\n   */\n  mount?: boolean | undefined;\n};\n\nexport const useFocusTrap = (\n  ref: React.RefObject<HTMLElement | null>,\n  {\n    mount = true,\n    disabled = false,\n    autoFocus = true,\n    restoreFocus = true,\n    autoFocusDelay = 0,\n  }: UseFocusTrapProps,\n) => {\n  const prevFocusableRef = useRef<HTMLElement[]>([]);\n\n  const createFocusFn = (getFocusElement: (root: HTMLElement | null) => HTMLElement | null) => {\n    return () => {\n      // eslint-disable-next-line react-hooks/refs\n      const node = getFocusElement(ref.current);\n      if (node) {\n        node.focus({ preventScroll: true });\n      } else if (ref.current) {\n        ref.current.focus();\n      }\n    };\n  };\n\n  const focusFirst = useStableCallback(createFocusFn(getFirstFocusable));\n\n  const focusLast = useStableCallback(createFocusFn(getLastFocusable));\n\n  useRestoreFocus({\n    restoreFocus,\n    autoFocusDelay,\n    mount,\n    ref,\n  });\n\n  useAutoFocus(ref, {\n    autoFocus,\n    disabled,\n    mount,\n    autoFocusDelay,\n    focusFirst,\n  });\n\n  const onMutateParentHandler = useStableCallback((parentNode: HTMLElement) => {\n    if (disabled || !autoFocus || !mount) {\n      return;\n    }\n\n    const doc = getWindow(parentNode)?.document;\n    if (!doc) {\n      return;\n    }\n\n    const activeElement = doc.activeElement as HTMLElement;\n    const focusableNodes = collectFocusable(parentNode);\n\n    if (arraysEquals(focusableNodes, prevFocusableRef.current)) {\n      return;\n    }\n\n    if (focusableNodes.length === 0) {\n      prevFocusableRef.current = [];\n      return;\n    }\n\n    const currentElementIndex = Math.max(\n      activeElement ? focusableNodes.indexOf(activeElement) : -1,\n      0,\n    );\n\n    const nodeToFocus = focusableNodes[currentElementIndex];\n    if (nodeToFocus) {\n      nodeToFocus.focus({ preventScroll: true });\n    }\n\n    prevFocusableRef.current = focusableNodes;\n  });\n\n  useMutationObserver(ref, () => ref.current && onMutateParentHandler(ref.current));\n\n  const createGuardFocusHandler = (focusFn: () => void, focusFromOutside: () => void) => {\n    return (event: React.FocusEvent<HTMLSpanElement>) => {\n      // eslint-disable-next-line react-hooks/refs\n      if (!mount || disabled || !ref.current) {\n        return;\n      }\n\n      // Проверяем, был ли предыдущий активный элемент внутри root\n      // Если нет, значит фокус пришёл извне, и нужно использовать focusFromOutside\n      const relatedTarget = event.relatedTarget as HTMLElement | null;\n\n      if (relatedTarget === null || (relatedTarget && !ref.current.contains(relatedTarget))) {\n        focusFromOutside();\n        return;\n      }\n\n      focusFn();\n    };\n  };\n\n  const onBeforeGuardFocus = useStableCallback(createGuardFocusHandler(focusLast, focusFirst));\n  const onAfterGuardFocus = useStableCallback(createGuardFocusHandler(focusFirst, focusLast));\n\n  const shouldRenderGuards = mount && !disabled;\n\n  return {\n    beforeGuard: shouldRenderGuards && <FocusGuard onFocus={onBeforeGuardFocus} />,\n    afterGuard: shouldRenderGuards && <FocusGuard onFocus={onAfterGuardFocus} />,\n  };\n};\n"],"names":["useRef","arraysEquals","FOCUSABLE_ELEMENTS_LIST","getWindow","useMutationObserver","useStableCallback","FocusGuard","useAutoFocus","useRestoreFocus","FOCUSABLE_ELEMENTS","join","collectFocusable","root","newFocusableElements","querySelectorAll","nodes","Array","from","filter","node","hasAttribute","display","visibility","getComputedStyle","isHidden","isDisabled","disabled","length","push","getFirstFocusable","getLastFocusable","useFocusTrap","ref","mount","autoFocus","restoreFocus","autoFocusDelay","prevFocusableRef","createFocusFn","getFocusElement","current","focus","preventScroll","focusFirst","focusLast","onMutateParentHandler","parentNode","doc","document","activeElement","focusableNodes","currentElementIndex","Math","max","indexOf","nodeToFocus","createGuardFocusHandler","focusFn","focusFromOutside","event","relatedTarget","contains","onBeforeGuardFocus","onAfterGuardFocus","shouldRenderGuards","beforeGuard","onFocus","afterGuard"],"mappings":"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"}

package/dist/cssm/hooks/useFocusVisible.js

@@ -1,5 +1,5 @@
-import { useCallback, useContext, useState } from "react";
-import { AppRootContext } from "../components/AppRoot/AppRootContext.js";
+import { useCallback, useState } from "react";
+import { useKeyboardInputTracker } from "./useKeyboardInputTracker.js";
 /**
  * Определяет фокус элемента, когда его наличие необходимо обозначить визуально.
  *
@@ -8,23 +8,18 @@ import { AppRootContext } from "../components/AppRoot/AppRootContext.js";
  *
  * @since 7.2.0
  */ export function useFocusVisible() {
-    const [isFocused, setIsFocused] = useState(false);
-    // FIXME: Избавиться от чека контекста, так как без AppRoot не работает фокус
-    const withKeyboardInputCheck = true;
-    const { keyboardInput } = useContext(AppRootContext);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const keyboardInputRef = useKeyboardInputTracker();
     const onFocus = useCallback((event)=>{
         event.stopPropagation();
-        setIsFocused(true);
+        setFocusVisible(Boolean(keyboardInputRef.current));
     }, [
-        setIsFocused
+        keyboardInputRef
     ]);
     const onBlur = useCallback((event)=>{
         event.stopPropagation();
-        setIsFocused(false);
-    }, [
-        setIsFocused
-    ]);
-    const focusVisible = withKeyboardInputCheck ? keyboardInput && isFocused : isFocused;
+        setFocusVisible(false);
+    }, []);
     return {
         focusVisible,
         onFocus,

package/dist/cssm/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useFocusVisible.ts"],"sourcesContent":["import { type FocusEvent, useCallback, useContext, useState } from 'react';\nimport { AppRootContext } from '../components/AppRoot/AppRootContext';\n\n/**\n * Определяет фокус элемента, когда его наличие необходимо обозначить визуально.\n *\n * Этот хук полезен для обозначения фокуса, когда для навигации используется\n * клавиатура\n *\n * @since 7.2.0\n */\nexport function useFocusVisible(): {\n  focusVisible: boolean;\n  onFocus: (event: FocusEvent<HTMLElement>) => void;\n  onBlur: (event: FocusEvent<HTMLElement>) => void;\n} {\n  const [isFocused, setIsFocused] = useState(false);\n\n  // FIXME: Избавиться от чека контекста, так как без AppRoot не работает фокус\n  const withKeyboardInputCheck = true;\n  const { keyboardInput } = useContext(AppRootContext);\n\n  const onFocus = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setIsFocused(true);\n    },\n    [setIsFocused],\n  );\n\n  const onBlur = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setIsFocused(false);\n    },\n    [setIsFocused],\n  );\n\n  const focusVisible = withKeyboardInputCheck ? keyboardInput && isFocused : isFocused;\n\n  return {\n    focusVisible,\n    onFocus,\n    onBlur,\n  };\n}\n"],"names":["useCallback","useContext","useState","AppRootContext","useFocusVisible","isFocused","setIsFocused","withKeyboardInputCheck","keyboardInput","onFocus","event","stopPropagation","onBlur","focusVisible"],"mappings":"AAAA,SAA0BA,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAC3E,SAASC,cAAc,QAAQ,0CAAuC;AAEtE;;;;;;;CAOC,GACD,OAAO,SAASC;IAKd,MAAM,CAACC,WAAWC,aAAa,GAAGJ,SAAS;IAE3C,6EAA6E;IAC7E,MAAMK,yBAAyB;IAC/B,MAAM,EAAEC,aAAa,EAAE,GAAGP,WAAWE;IAErC,MAAMM,UAAUT,YACd,CAACU;QACCA,MAAMC,eAAe;QACrBL,aAAa;IACf,GACA;QAACA;KAAa;IAGhB,MAAMM,SAASZ,YACb,CAACU;QACCA,MAAMC,eAAe;QACrBL,aAAa;IACf,GACA;QAACA;KAAa;IAGhB,MAAMO,eAAeN,yBAAyBC,iBAAiBH,YAAYA;IAE3E,OAAO;QACLQ;QACAJ;QACAG;IACF;AACF"}
+{"version":3,"sources":["../../../src/hooks/useFocusVisible.ts"],"sourcesContent":["import { type FocusEvent, useCallback, useState } from 'react';\nimport { useKeyboardInputTracker } from './useKeyboardInputTracker';\n\n/**\n * Определяет фокус элемента, когда его наличие необходимо обозначить визуально.\n *\n * Этот хук полезен для обозначения фокуса, когда для навигации используется\n * клавиатура\n *\n * @since 7.2.0\n */\nexport function useFocusVisible(): {\n  focusVisible: boolean;\n  onFocus: (event: FocusEvent<HTMLElement>) => void;\n  onBlur: (event: FocusEvent<HTMLElement>) => void;\n} {\n  const [focusVisible, setFocusVisible] = useState(false);\n  const keyboardInputRef = useKeyboardInputTracker();\n\n  const onFocus = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setFocusVisible(Boolean(keyboardInputRef.current));\n    },\n    [keyboardInputRef],\n  );\n\n  const onBlur = useCallback((event: FocusEvent<HTMLElement>) => {\n    event.stopPropagation();\n    setFocusVisible(false);\n  }, []);\n\n  return {\n    focusVisible,\n    onFocus,\n    onBlur,\n  };\n}\n"],"names":["useCallback","useState","useKeyboardInputTracker","useFocusVisible","focusVisible","setFocusVisible","keyboardInputRef","onFocus","event","stopPropagation","Boolean","current","onBlur"],"mappings":"AAAA,SAA0BA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAC/D,SAASC,uBAAuB,QAAQ,+BAA4B;AAEpE;;;;;;;CAOC,GACD,OAAO,SAASC;IAKd,MAAM,CAACC,cAAcC,gBAAgB,GAAGJ,SAAS;IACjD,MAAMK,mBAAmBJ;IAEzB,MAAMK,UAAUP,YACd,CAACQ;QACCA,MAAMC,eAAe;QACrBJ,gBAAgBK,QAAQJ,iBAAiBK,OAAO;IAClD,GACA;QAACL;KAAiB;IAGpB,MAAMM,SAASZ,YAAY,CAACQ;QAC1BA,MAAMC,eAAe;QACrBJ,gBAAgB;IAClB,GAAG,EAAE;IAEL,OAAO;QACLD;QACAG;QACAK;IACF;AACF"}

package/dist/cssm/hooks/useFocusWithin.js

@@ -1,14 +1,13 @@
 import * as React from "react";
-import { useDOM } from "../lib/dom.js";
 import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
 const isFocusWithin = (ref, document)=>ref.contains(document.activeElement);
 export function useFocusWithin(ref) {
-    const { document } = useDOM();
     const [focusWithin, setFocusWithin] = React.useState(false);
     useIsomorphicLayoutEffect(function handleAutoFocus() {
-        /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */ if (!document) {
+        /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */ if (!ref.current) {
             return;
         }
+        const document = ref.current.ownerDocument;
         const handleFocusOrBlurEvents = ()=>{
             if (ref.current) {
                 setFocusWithin(isFocusWithin(ref.current, document));
@@ -30,7 +29,9 @@ export function useFocusWithin(ref) {
                 capture: true
             });
         };
-    }, []);
+    }, [
+        ref
+    ]);
     return focusWithin;
 }
 

package/dist/cssm/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useFocusWithin.ts"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nconst isFocusWithin = <T extends Element>(ref: T, document: Document) =>\n  ref.contains(document.activeElement);\n\nexport function useFocusWithin(ref: React.RefObject<HTMLElement | null>): boolean {\n  const { document } = useDOM();\n  const [focusWithin, setFocusWithin] = React.useState<boolean>(false);\n\n  useIsomorphicLayoutEffect(function handleAutoFocus() {\n    /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */\n    if (!document) {\n      return;\n    }\n\n    const handleFocusOrBlurEvents = () => {\n      if (ref.current) {\n        setFocusWithin(isFocusWithin(ref.current, document));\n      }\n    };\n\n    // Вызываем в начале, чтобы проверить autoFocus\n    void handleFocusOrBlurEvents();\n\n    document.addEventListener('focus', handleFocusOrBlurEvents, { capture: true });\n    document.addEventListener('blur', handleFocusOrBlurEvents, { capture: true });\n    return () => {\n      document.removeEventListener('focus', handleFocusOrBlurEvents, { capture: true });\n      document.removeEventListener('blur', handleFocusOrBlurEvents, { capture: true });\n    };\n  }, []);\n\n  return focusWithin;\n}\n"],"names":["React","useDOM","useIsomorphicLayoutEffect","isFocusWithin","ref","document","contains","activeElement","useFocusWithin","focusWithin","setFocusWithin","useState","handleAutoFocus","handleFocusOrBlurEvents","current","addEventListener","capture","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,MAAMC,gBAAgB,CAAoBC,KAAQC,WAChDD,IAAIE,QAAQ,CAACD,SAASE,aAAa;AAErC,OAAO,SAASC,eAAeJ,GAAwC;IACrE,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;IACrB,MAAM,CAACQ,aAAaC,eAAe,GAAGV,MAAMW,QAAQ,CAAU;IAE9DT,0BAA0B,SAASU;QACjC,oIAAoI,GACpI,IAAI,CAACP,UAAU;YACb;QACF;QAEA,MAAMQ,0BAA0B;YAC9B,IAAIT,IAAIU,OAAO,EAAE;gBACfJ,eAAeP,cAAcC,IAAIU,OAAO,EAAET;YAC5C;QACF;QAEA,+CAA+C;QAC/C,KAAKQ;QAELR,SAASU,gBAAgB,CAAC,SAASF,yBAAyB;YAAEG,SAAS;QAAK;QAC5EX,SAASU,gBAAgB,CAAC,QAAQF,yBAAyB;YAAEG,SAAS;QAAK;QAC3E,OAAO;YACLX,SAASY,mBAAmB,CAAC,SAASJ,yBAAyB;gBAAEG,SAAS;YAAK;YAC/EX,SAASY,mBAAmB,CAAC,QAAQJ,yBAAyB;gBAAEG,SAAS;YAAK;QAChF;IACF,GAAG,EAAE;IAEL,OAAOP;AACT"}
+{"version":3,"sources":["../../../src/hooks/useFocusWithin.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nconst isFocusWithin = <T extends Element>(ref: T, document: Document) =>\n  ref.contains(document.activeElement);\n\nexport function useFocusWithin(ref: React.RefObject<HTMLElement | null>): boolean {\n  const [focusWithin, setFocusWithin] = React.useState<boolean>(false);\n\n  useIsomorphicLayoutEffect(\n    function handleAutoFocus() {\n      /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */\n      if (!ref.current) {\n        return;\n      }\n\n      const document = ref.current.ownerDocument;\n\n      const handleFocusOrBlurEvents = () => {\n        if (ref.current) {\n          setFocusWithin(isFocusWithin(ref.current, document));\n        }\n      };\n\n      // Вызываем в начале, чтобы проверить autoFocus\n      void handleFocusOrBlurEvents();\n\n      document.addEventListener('focus', handleFocusOrBlurEvents, { capture: true });\n      document.addEventListener('blur', handleFocusOrBlurEvents, { capture: true });\n      return () => {\n        document.removeEventListener('focus', handleFocusOrBlurEvents, { capture: true });\n        document.removeEventListener('blur', handleFocusOrBlurEvents, { capture: true });\n      };\n    },\n    [ref],\n  );\n\n  return focusWithin;\n}\n"],"names":["React","useIsomorphicLayoutEffect","isFocusWithin","ref","document","contains","activeElement","useFocusWithin","focusWithin","setFocusWithin","useState","handleAutoFocus","current","ownerDocument","handleFocusOrBlurEvents","addEventListener","capture","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,MAAMC,gBAAgB,CAAoBC,KAAQC,WAChDD,IAAIE,QAAQ,CAACD,SAASE,aAAa;AAErC,OAAO,SAASC,eAAeJ,GAAwC;IACrE,MAAM,CAACK,aAAaC,eAAe,GAAGT,MAAMU,QAAQ,CAAU;IAE9DT,0BACE,SAASU;QACP,oIAAoI,GACpI,IAAI,CAACR,IAAIS,OAAO,EAAE;YAChB;QACF;QAEA,MAAMR,WAAWD,IAAIS,OAAO,CAACC,aAAa;QAE1C,MAAMC,0BAA0B;YAC9B,IAAIX,IAAIS,OAAO,EAAE;gBACfH,eAAeP,cAAcC,IAAIS,OAAO,EAAER;YAC5C;QACF;QAEA,+CAA+C;QAC/C,KAAKU;QAELV,SAASW,gBAAgB,CAAC,SAASD,yBAAyB;YAAEE,SAAS;QAAK;QAC5EZ,SAASW,gBAAgB,CAAC,QAAQD,yBAAyB;YAAEE,SAAS;QAAK;QAC3E,OAAO;YACLZ,SAASa,mBAAmB,CAAC,SAASH,yBAAyB;gBAAEE,SAAS;YAAK;YAC/EZ,SAASa,mBAAmB,CAAC,QAAQH,yBAAyB;gBAAEE,SAAS;YAAK;QAChF;IACF,GACA;QAACb;KAAI;IAGP,OAAOK;AACT"}

package/dist/cssm/hooks/useGlobalEscKeyDown.js

@@ -1,23 +1,13 @@
-import { useRef } from "react";
 import { Keys, pressedKey } from "../lib/accessibility.js";
 import { useDOM } from "../lib/dom.js";
 import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
-const EVENT_OPTIONS = {
-    passive: true,
-    capture: true
-};
 /**
  * Завязывается на document.
  *
  * @private
- */ export const useGlobalEscKeyDown = (init, callback, optionsProp)=>{
+ */ export const useGlobalEscKeyDown = (init, callback, optionsProp = {})=>{
     const { document } = useDOM();
-    const options = useRef(optionsProp || EVENT_OPTIONS);
-    useIsomorphicLayoutEffect(()=>{
-        options.current = optionsProp || EVENT_OPTIONS;
-    }, [
-        options
-    ]);
+    const { capture = true, passive = true, once = false, signal } = optionsProp;
     useIsomorphicLayoutEffect(()=>{
         if (!document || !init || !callback) {
             return;
@@ -27,14 +17,26 @@ const EVENT_OPTIONS = {
                 callback(event);
             }
         };
-        document.addEventListener('keydown', handleKeyDown, options.current);
+        const options = {
+            capture,
+            passive,
+            once,
+            ...signal !== undefined ? {
+                signal
+            } : {}
+        };
+        document.addEventListener('keydown', handleKeyDown, options);
         return ()=>{
-            document.removeEventListener('keydown', handleKeyDown, options.current);
+            document.removeEventListener('keydown', handleKeyDown, options);
         };
     }, [
         init,
         document,
-        callback
+        callback,
+        capture,
+        passive,
+        once,
+        signal
     ]);
 };
 

package/dist/cssm/hooks/useGlobalEscKeyDown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useGlobalEscKeyDown.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { Keys, pressedKey } from '../lib/accessibility';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nconst EVENT_OPTIONS = {\n  passive: true,\n  capture: true,\n};\n\n/**\n * Завязывается на document.\n *\n * @private\n */\nexport const useGlobalEscKeyDown = (\n  init: boolean,\n  callback?: ((event: KeyboardEvent) => void) | undefined,\n  optionsProp?: AddEventListenerOptions | undefined,\n): void => {\n  const { document } = useDOM();\n\n  const options = useRef<AddEventListenerOptions>(optionsProp || EVENT_OPTIONS);\n\n  useIsomorphicLayoutEffect(() => {\n    options.current = optionsProp || EVENT_OPTIONS;\n  }, [options]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!document || !init || !callback) {\n      return;\n    }\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (pressedKey(event) === Keys.ESCAPE) {\n        callback(event);\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown, options.current);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown, options.current);\n    };\n  }, [init, document, callback]);\n};\n"],"names":["useRef","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","EVENT_OPTIONS","passive","capture","useGlobalEscKeyDown","init","callback","optionsProp","document","options","current","handleKeyDown","event","ESCAPE","addEventListener","removeEventListener"],"mappings":"AAAA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,IAAI,EAAEC,UAAU,QAAQ,0BAAuB;AACxD,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,MAAMC,gBAAgB;IACpBC,SAAS;IACTC,SAAS;AACX;AAEA;;;;CAIC,GACD,OAAO,MAAMC,sBAAsB,CACjCC,MACAC,UACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGT;IAErB,MAAMU,UAAUb,OAAgCW,eAAeN;IAE/DD,0BAA0B;QACxBS,QAAQC,OAAO,GAAGH,eAAeN;IACnC,GAAG;QAACQ;KAAQ;IAEZT,0BAA0B;QACxB,IAAI,CAACQ,YAAY,CAACH,QAAQ,CAACC,UAAU;YACnC;QACF;QACA,MAAMK,gBAAgB,CAACC;YACrB,IAAId,WAAWc,WAAWf,KAAKgB,MAAM,EAAE;gBACrCP,SAASM;YACX;QACF;QACAJ,SAASM,gBAAgB,CAAC,WAAWH,eAAeF,QAAQC,OAAO;QACnE,OAAO;YACLF,SAASO,mBAAmB,CAAC,WAAWJ,eAAeF,QAAQC,OAAO;QACxE;IACF,GAAG;QAACL;QAAMG;QAAUF;KAAS;AAC/B,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useGlobalEscKeyDown.ts"],"sourcesContent":["import { Keys, pressedKey } from '../lib/accessibility';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\n/**\n * Завязывается на document.\n *\n * @private\n */\nexport const useGlobalEscKeyDown = (\n  init: boolean,\n  callback?: ((event: KeyboardEvent) => void) | undefined,\n  optionsProp: AddEventListenerOptions | undefined = {},\n): void => {\n  const { document } = useDOM();\n\n  const { capture = true, passive = true, once = false, signal } = optionsProp;\n\n  useIsomorphicLayoutEffect(() => {\n    if (!document || !init || !callback) {\n      return;\n    }\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (pressedKey(event) === Keys.ESCAPE) {\n        callback(event);\n      }\n    };\n    const options: AddEventListenerOptions = {\n      capture,\n      passive,\n      once,\n      ...(signal !== undefined ? { signal } : {}),\n    };\n\n    document.addEventListener('keydown', handleKeyDown, options);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown, options);\n    };\n  }, [init, document, callback, capture, passive, once, signal]);\n};\n"],"names":["Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","useGlobalEscKeyDown","init","callback","optionsProp","document","capture","passive","once","signal","handleKeyDown","event","ESCAPE","options","undefined","addEventListener","removeEventListener"],"mappings":"AAAA,SAASA,IAAI,EAAEC,UAAU,QAAQ,0BAAuB;AACxD,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E;;;;CAIC,GACD,OAAO,MAAMC,sBAAsB,CACjCC,MACAC,UACAC,cAAmD,CAAC,CAAC;IAErD,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAErB,MAAM,EAAEO,UAAU,IAAI,EAAEC,UAAU,IAAI,EAAEC,OAAO,KAAK,EAAEC,MAAM,EAAE,GAAGL;IAEjEJ,0BAA0B;QACxB,IAAI,CAACK,YAAY,CAACH,QAAQ,CAACC,UAAU;YACnC;QACF;QACA,MAAMO,gBAAgB,CAACC;YACrB,IAAIb,WAAWa,WAAWd,KAAKe,MAAM,EAAE;gBACrCT,SAASQ;YACX;QACF;QACA,MAAME,UAAmC;YACvCP;YACAC;YACAC;YACA,GAAIC,WAAWK,YAAY;gBAAEL;YAAO,IAAI,CAAC,CAAC;QAC5C;QAEAJ,SAASU,gBAAgB,CAAC,WAAWL,eAAeG;QACpD,OAAO;YACLR,SAASW,mBAAmB,CAAC,WAAWN,eAAeG;QACzD;IACF,GAAG;QAACX;QAAMG;QAAUF;QAAUG;QAASC;QAASC;QAAMC;KAAO;AAC/D,EAAE"}

package/dist/cssm/hooks/useGlobalOnClickOutside.js

@@ -1,7 +1,9 @@
 import { isElement, useDOM } from "../lib/dom.js";
 import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
+import { useStableCallback } from "./useStableCallback.js";
 export const useGlobalOnEventOutside = (event, callback, ...refs)=>{
     const { document } = useDOM();
+    const stableCallback = useStableCallback(callback);
     useIsomorphicLayoutEffect(()=>{
         const someRefNotNull = refs.some((ref)=>ref && ref.current !== null);
         if (!document || !someRefNotNull) {
@@ -11,7 +13,7 @@ export const useGlobalOnEventOutside = (event, callback, ...refs)=>{
             const targetEl = event.target;
             const someRefHasTargetEl = isElement(targetEl) && refs.some((ref)=>ref && ref.current && ref.current.contains(targetEl));
             if (!someRefHasTargetEl) {
-                callback(event);
+                stableCallback(event);
             }
         };
         document.addEventListener(event, handleClick, {
@@ -21,9 +23,11 @@ export const useGlobalOnEventOutside = (event, callback, ...refs)=>{
         return ()=>{
             document.removeEventListener(event, handleClick, true);
         };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         document,
-        callback,
+        stableCallback,
+        event,
         ...refs
     ]);
 };

package/dist/cssm/hooks/useGlobalOnClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useGlobalOnClickOutside.ts"],"sourcesContent":["import type * as React from 'react';\nimport { isElement, useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport const useGlobalOnEventOutside = <\n  T extends React.RefObject<ElementType | null> | undefined | null,\n  ElementType extends Element = Element,\n>(\n  event: Extract<keyof DocumentEventMap, 'click' | 'mousedown'>,\n  callback: (event: MouseEvent) => void,\n  ...refs: T[]\n): void => {\n  const { document } = useDOM();\n  useIsomorphicLayoutEffect(() => {\n    const someRefNotNull = refs.some((ref) => ref && ref.current !== null);\n    if (!document || !someRefNotNull) {\n      return;\n    }\n    const handleClick = (event: MouseEvent) => {\n      const targetEl = event.target;\n      const someRefHasTargetEl =\n        isElement(targetEl) &&\n        refs.some((ref) => ref && ref.current && ref.current.contains(targetEl));\n      if (!someRefHasTargetEl) {\n        callback(event);\n      }\n    };\n    document.addEventListener(event, handleClick, {\n      passive: true,\n      capture: true,\n    });\n    return () => {\n      document.removeEventListener(event, handleClick, true);\n    };\n  }, [document, callback, ...refs]);\n};\n\n/**\n * Завязывается на document.\n *\n * @private\n */\nexport const useGlobalOnClickOutside = <\n  T extends React.RefObject<ElementType | null> | undefined | null,\n  ElementType extends Element = Element,\n>(\n  callback: (event: MouseEvent) => void,\n  ...refs: T[]\n): void => {\n  useGlobalOnEventOutside('click', callback, ...refs);\n};\n"],"names":["isElement","useDOM","useIsomorphicLayoutEffect","useGlobalOnEventOutside","event","callback","refs","document","someRefNotNull","some","ref","current","handleClick","targetEl","target","someRefHasTargetEl","contains","addEventListener","passive","capture","removeEventListener","useGlobalOnClickOutside"],"mappings":"AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,gBAAa;AAC/C,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,OAAO,MAAMC,0BAA0B,CAIrCC,OACAC,UACA,GAAGC;IAEH,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IACrBC,0BAA0B;QACxB,MAAMM,iBAAiBF,KAAKG,IAAI,CAAC,CAACC,MAAQA,OAAOA,IAAIC,OAAO,KAAK;QACjE,IAAI,CAACJ,YAAY,CAACC,gBAAgB;YAChC;QACF;QACA,MAAMI,cAAc,CAACR;YACnB,MAAMS,WAAWT,MAAMU,MAAM;YAC7B,MAAMC,qBACJf,UAAUa,aACVP,KAAKG,IAAI,CAAC,CAACC,MAAQA,OAAOA,IAAIC,OAAO,IAAID,IAAIC,OAAO,CAACK,QAAQ,CAACH;YAChE,IAAI,CAACE,oBAAoB;gBACvBV,SAASD;YACX;QACF;QACAG,SAASU,gBAAgB,CAACb,OAAOQ,aAAa;YAC5CM,SAAS;YACTC,SAAS;QACX;QACA,OAAO;YACLZ,SAASa,mBAAmB,CAAChB,OAAOQ,aAAa;QACnD;IACF,GAAG;QAACL;QAAUF;WAAaC;KAAK;AAClC,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAMe,0BAA0B,CAIrChB,UACA,GAAGC;IAEHH,wBAAwB,SAASE,aAAaC;AAChD,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useGlobalOnClickOutside.ts"],"sourcesContent":["import type * as React from 'react';\nimport { isElement, useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\nimport { useStableCallback } from './useStableCallback';\n\nexport const useGlobalOnEventOutside = <\n  T extends React.RefObject<ElementType | null> | undefined | null,\n  ElementType extends Element = Element,\n>(\n  event: Extract<keyof DocumentEventMap, 'click' | 'mousedown'>,\n  callback: (event: MouseEvent) => void,\n  ...refs: T[]\n): void => {\n  const { document } = useDOM();\n  const stableCallback = useStableCallback(callback);\n  useIsomorphicLayoutEffect(() => {\n    const someRefNotNull = refs.some((ref) => ref && ref.current !== null);\n    if (!document || !someRefNotNull) {\n      return;\n    }\n    const handleClick = (event: MouseEvent) => {\n      const targetEl = event.target;\n      const someRefHasTargetEl =\n        isElement(targetEl) &&\n        refs.some((ref) => ref && ref.current && ref.current.contains(targetEl));\n      if (!someRefHasTargetEl) {\n        stableCallback(event);\n      }\n    };\n    document.addEventListener(event, handleClick, {\n      passive: true,\n      capture: true,\n    });\n    return () => {\n      document.removeEventListener(event, handleClick, true);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [document, stableCallback, event, ...refs]);\n};\n\n/**\n * Завязывается на document.\n *\n * @private\n */\nexport const useGlobalOnClickOutside = <\n  T extends React.RefObject<ElementType | null> | undefined | null,\n  ElementType extends Element = Element,\n>(\n  callback: (event: MouseEvent) => void,\n  ...refs: T[]\n): void => {\n  useGlobalOnEventOutside('click', callback, ...refs);\n};\n"],"names":["isElement","useDOM","useIsomorphicLayoutEffect","useStableCallback","useGlobalOnEventOutside","event","callback","refs","document","stableCallback","someRefNotNull","some","ref","current","handleClick","targetEl","target","someRefHasTargetEl","contains","addEventListener","passive","capture","removeEventListener","useGlobalOnClickOutside"],"mappings":"AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,gBAAa;AAC/C,SAASC,yBAAyB,QAAQ,sCAAmC;AAC7E,SAASC,iBAAiB,QAAQ,yBAAsB;AAExD,OAAO,MAAMC,0BAA0B,CAIrCC,OACAC,UACA,GAAGC;IAEH,MAAM,EAAEC,QAAQ,EAAE,GAAGP;IACrB,MAAMQ,iBAAiBN,kBAAkBG;IACzCJ,0BAA0B;QACxB,MAAMQ,iBAAiBH,KAAKI,IAAI,CAAC,CAACC,MAAQA,OAAOA,IAAIC,OAAO,KAAK;QACjE,IAAI,CAACL,YAAY,CAACE,gBAAgB;YAChC;QACF;QACA,MAAMI,cAAc,CAACT;YACnB,MAAMU,WAAWV,MAAMW,MAAM;YAC7B,MAAMC,qBACJjB,UAAUe,aACVR,KAAKI,IAAI,CAAC,CAACC,MAAQA,OAAOA,IAAIC,OAAO,IAAID,IAAIC,OAAO,CAACK,QAAQ,CAACH;YAChE,IAAI,CAACE,oBAAoB;gBACvBR,eAAeJ;YACjB;QACF;QACAG,SAASW,gBAAgB,CAACd,OAAOS,aAAa;YAC5CM,SAAS;YACTC,SAAS;QACX;QACA,OAAO;YACLb,SAASc,mBAAmB,CAACjB,OAAOS,aAAa;QACnD;IACA,uDAAuD;IACzD,GAAG;QAACN;QAAUC;QAAgBJ;WAAUE;KAAK;AAC/C,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAMgB,0BAA0B,CAIrCjB,UACA,GAAGC;IAEHH,wBAAwB,SAASE,aAAaC;AAChD,EAAE"}

package/dist/cssm/hooks/useKeyboardInputTracker.js

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { isKeyboardFocusingStarted } from "../lib/accessibility.js";
 import { useDOM } from "../lib/dom.js";
 import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
@@ -8,52 +7,60 @@ const EVENT_OPTIONS = {
     passive: true,
     capture: true
 };
-/**
- * Чтобы оптимизировать рендер, сохраняем в ref.
- *
- * В контекст можно передать через getter, подробнее в примере ниже.
- *
- * ```tsx
- * const keyboardInputTrackerRef = useKeyboardInputTracker();
- * <SomeContext.Provider value={{
- *  get keyboardInput() {
- *    return keyboardInputTrackerRef.current;
- *  }
- * }}>
- *  {children}
- * </SomeContext.Provider>
- * ```
- *
- * @private
- */ export function useKeyboardInputTracker() {
+let keyboardInputState = false;
+let mountedTrackers = 0;
+let detachListeners = null;
+const keyboardFocusingStartedRef = {
+    get current () {
+        return keyboardInputState;
+    }
+};
+const setKeyboardInputState = (nextValue)=>{
+    if (keyboardInputState !== nextValue) {
+        keyboardInputState = nextValue;
+    }
+};
+const attachKeyboardInputListeners = (document)=>{
+    const handleKeydown = (event)=>{
+        if (isKeyboardFocusingStarted(event)) {
+            setKeyboardInputState(true);
+        }
+    };
+    const handleCustomEnableKeyboardEvent = ()=>{
+        setKeyboardInputState(true);
+    };
+    const handleCustomDisableKeyboardEvent = ()=>{
+        setKeyboardInputState(false);
+    };
+    document.addEventListener('keydown', handleKeydown, EVENT_OPTIONS);
+    document.addEventListener(ENABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomEnableKeyboardEvent, EVENT_OPTIONS);
+    document.addEventListener(DISABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+    document.addEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+    document.addEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+    return ()=>{
+        document.removeEventListener('keydown', handleKeydown, EVENT_OPTIONS);
+        document.removeEventListener(ENABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomEnableKeyboardEvent, EVENT_OPTIONS);
+        document.removeEventListener(DISABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+        document.removeEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+        document.removeEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+    };
+};
+export function useKeyboardInputTracker() {
     const { document } = useDOM();
-    const keyboardFocusingStartedRef = React.useRef(false);
     useIsomorphicLayoutEffect(()=>{
         /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */ if (!document) {
             return;
         }
-        const handleKeydown = (event)=>{
-            if (isKeyboardFocusingStarted(event)) {
-                keyboardFocusingStartedRef.current = true;
-            }
-        };
-        const handleCustomEnableKeyboardEvent = ()=>{
-            keyboardFocusingStartedRef.current = true;
-        };
-        const handleCustomDisableKeyboardEvent = ()=>{
-            keyboardFocusingStartedRef.current = false;
-        };
-        document.addEventListener('keydown', handleKeydown, EVENT_OPTIONS);
-        document.addEventListener(ENABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomEnableKeyboardEvent, EVENT_OPTIONS);
-        document.addEventListener(DISABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
-        document.addEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
-        document.addEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+        mountedTrackers += 1;
+        if (!detachListeners) {
+            detachListeners = attachKeyboardInputListeners(document);
+        }
         return ()=>{
-            document.removeEventListener('keydown', handleKeydown, EVENT_OPTIONS);
-            document.removeEventListener(ENABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomEnableKeyboardEvent, EVENT_OPTIONS);
-            document.removeEventListener(DISABLE_KEYBOARD_INPUT_EVENT_NAME, handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
-            document.removeEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
-            document.removeEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+            mountedTrackers -= 1;
+            if (mountedTrackers === 0 && detachListeners) {
+                detachListeners();
+                detachListeners = null;
+            }
         };
     }, [
         document

package/dist/cssm/hooks/useKeyboardInputTracker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useKeyboardInputTracker.ts"],"sourcesContent":["import * as React from 'react';\nimport { isKeyboardFocusingStarted } from '../lib/accessibility';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport const ENABLE_KEYBOARD_INPUT_EVENT_NAME = 'enableKeyboardInput';\nexport const DISABLE_KEYBOARD_INPUT_EVENT_NAME = 'disableKeyboardInput';\n\nconst EVENT_OPTIONS = {\n  passive: true,\n  capture: true,\n};\n\n/**\n * Чтобы оптимизировать рендер, сохраняем в ref.\n *\n * В контекст можно передать через getter, подробнее в примере ниже.\n *\n * ```tsx\n * const keyboardInputTrackerRef = useKeyboardInputTracker();\n * <SomeContext.Provider value={{\n *  get keyboardInput() {\n *    return keyboardInputTrackerRef.current;\n *  }\n * }}>\n *  {children}\n * </SomeContext.Provider>\n * ```\n *\n * @private\n */\nexport function useKeyboardInputTracker(): React.RefObject<boolean> {\n  const { document } = useDOM();\n  const keyboardFocusingStartedRef = React.useRef(false);\n\n  useIsomorphicLayoutEffect(() => {\n    /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */\n    if (!document) {\n      return;\n    }\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (isKeyboardFocusingStarted(event)) {\n        keyboardFocusingStartedRef.current = true;\n      }\n    };\n\n    const handleCustomEnableKeyboardEvent = () => {\n      keyboardFocusingStartedRef.current = true;\n    };\n\n    const handleCustomDisableKeyboardEvent = () => {\n      keyboardFocusingStartedRef.current = false;\n    };\n\n    document.addEventListener('keydown', handleKeydown, EVENT_OPTIONS);\n    document.addEventListener(\n      ENABLE_KEYBOARD_INPUT_EVENT_NAME,\n      handleCustomEnableKeyboardEvent,\n      EVENT_OPTIONS,\n    );\n    document.addEventListener(\n      DISABLE_KEYBOARD_INPUT_EVENT_NAME,\n      handleCustomDisableKeyboardEvent,\n      EVENT_OPTIONS,\n    );\n    document.addEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n    document.addEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeydown, EVENT_OPTIONS);\n      document.removeEventListener(\n        ENABLE_KEYBOARD_INPUT_EVENT_NAME,\n        handleCustomEnableKeyboardEvent,\n        EVENT_OPTIONS,\n      );\n      document.removeEventListener(\n        DISABLE_KEYBOARD_INPUT_EVENT_NAME,\n        handleCustomDisableKeyboardEvent,\n        EVENT_OPTIONS,\n      );\n      document.removeEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n      document.removeEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n    };\n  }, [document]);\n\n  return keyboardFocusingStartedRef;\n}\n"],"names":["React","isKeyboardFocusingStarted","useDOM","useIsomorphicLayoutEffect","ENABLE_KEYBOARD_INPUT_EVENT_NAME","DISABLE_KEYBOARD_INPUT_EVENT_NAME","EVENT_OPTIONS","passive","capture","useKeyboardInputTracker","document","keyboardFocusingStartedRef","useRef","handleKeydown","event","current","handleCustomEnableKeyboardEvent","handleCustomDisableKeyboardEvent","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,0BAAuB;AACjE,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,OAAO,MAAMC,mCAAmC,sBAAsB;AACtE,OAAO,MAAMC,oCAAoC,uBAAuB;AAExE,MAAMC,gBAAgB;IACpBC,SAAS;IACTC,SAAS;AACX;AAEA;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,QAAQ,EAAE,GAAGR;IACrB,MAAMS,6BAA6BX,MAAMY,MAAM,CAAC;IAEhDT,0BAA0B;QACxB,oIAAoI,GACpI,IAAI,CAACO,UAAU;YACb;QACF;QAEA,MAAMG,gBAAgB,CAACC;YACrB,IAAIb,0BAA0Ba,QAAQ;gBACpCH,2BAA2BI,OAAO,GAAG;YACvC;QACF;QAEA,MAAMC,kCAAkC;YACtCL,2BAA2BI,OAAO,GAAG;QACvC;QAEA,MAAME,mCAAmC;YACvCN,2BAA2BI,OAAO,GAAG;QACvC;QAEAL,SAASQ,gBAAgB,CAAC,WAAWL,eAAeP;QACpDI,SAASQ,gBAAgB,CACvBd,kCACAY,iCACAV;QAEFI,SAASQ,gBAAgB,CACvBb,mCACAY,kCACAX;QAEFI,SAASQ,gBAAgB,CAAC,aAAaD,kCAAkCX;QACzEI,SAASQ,gBAAgB,CAAC,cAAcD,kCAAkCX;QAE1E,OAAO;YACLI,SAASS,mBAAmB,CAAC,WAAWN,eAAeP;YACvDI,SAASS,mBAAmB,CAC1Bf,kCACAY,iCACAV;YAEFI,SAASS,mBAAmB,CAC1Bd,mCACAY,kCACAX;YAEFI,SAASS,mBAAmB,CAAC,aAAaF,kCAAkCX;YAC5EI,SAASS,mBAAmB,CAAC,cAAcF,kCAAkCX;QAC/E;IACF,GAAG;QAACI;KAAS;IAEb,OAAOC;AACT"}
+{"version":3,"sources":["../../../src/hooks/useKeyboardInputTracker.ts"],"sourcesContent":["import type * as React from 'react';\nimport { isKeyboardFocusingStarted } from '../lib/accessibility';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport const ENABLE_KEYBOARD_INPUT_EVENT_NAME = 'enableKeyboardInput';\nexport const DISABLE_KEYBOARD_INPUT_EVENT_NAME = 'disableKeyboardInput';\n\nconst EVENT_OPTIONS = {\n  passive: true,\n  capture: true,\n};\n\nlet keyboardInputState = false;\nlet mountedTrackers = 0;\nlet detachListeners: null | (() => void) = null;\n\nconst keyboardFocusingStartedRef: React.RefObject<boolean> = {\n  get current() {\n    return keyboardInputState;\n  },\n};\n\nconst setKeyboardInputState = (nextValue: boolean) => {\n  if (keyboardInputState !== nextValue) {\n    keyboardInputState = nextValue;\n  }\n};\n\nconst attachKeyboardInputListeners = (document: Document) => {\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (isKeyboardFocusingStarted(event)) {\n      setKeyboardInputState(true);\n    }\n  };\n\n  const handleCustomEnableKeyboardEvent = () => {\n    setKeyboardInputState(true);\n  };\n\n  const handleCustomDisableKeyboardEvent = () => {\n    setKeyboardInputState(false);\n  };\n\n  document.addEventListener('keydown', handleKeydown, EVENT_OPTIONS);\n  document.addEventListener(\n    ENABLE_KEYBOARD_INPUT_EVENT_NAME,\n    handleCustomEnableKeyboardEvent,\n    EVENT_OPTIONS,\n  );\n  document.addEventListener(\n    DISABLE_KEYBOARD_INPUT_EVENT_NAME,\n    handleCustomDisableKeyboardEvent,\n    EVENT_OPTIONS,\n  );\n  document.addEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n  document.addEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n\n  return () => {\n    document.removeEventListener('keydown', handleKeydown, EVENT_OPTIONS);\n    document.removeEventListener(\n      ENABLE_KEYBOARD_INPUT_EVENT_NAME,\n      handleCustomEnableKeyboardEvent,\n      EVENT_OPTIONS,\n    );\n    document.removeEventListener(\n      DISABLE_KEYBOARD_INPUT_EVENT_NAME,\n      handleCustomDisableKeyboardEvent,\n      EVENT_OPTIONS,\n    );\n    document.removeEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n    document.removeEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);\n  };\n};\n\nexport function useKeyboardInputTracker(): React.RefObject<boolean> {\n  const { document } = useDOM();\n\n  useIsomorphicLayoutEffect(() => {\n    /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */\n    if (!document) {\n      return;\n    }\n\n    mountedTrackers += 1;\n\n    if (!detachListeners) {\n      detachListeners = attachKeyboardInputListeners(document);\n    }\n\n    return () => {\n      mountedTrackers -= 1;\n      if (mountedTrackers === 0 && detachListeners) {\n        detachListeners();\n        detachListeners = null;\n      }\n    };\n  }, [document]);\n\n  return keyboardFocusingStartedRef;\n}\n"],"names":["isKeyboardFocusingStarted","useDOM","useIsomorphicLayoutEffect","ENABLE_KEYBOARD_INPUT_EVENT_NAME","DISABLE_KEYBOARD_INPUT_EVENT_NAME","EVENT_OPTIONS","passive","capture","keyboardInputState","mountedTrackers","detachListeners","keyboardFocusingStartedRef","current","setKeyboardInputState","nextValue","attachKeyboardInputListeners","document","handleKeydown","event","handleCustomEnableKeyboardEvent","handleCustomDisableKeyboardEvent","addEventListener","removeEventListener","useKeyboardInputTracker"],"mappings":"AACA,SAASA,yBAAyB,QAAQ,0BAAuB;AACjE,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,OAAO,MAAMC,mCAAmC,sBAAsB;AACtE,OAAO,MAAMC,oCAAoC,uBAAuB;AAExE,MAAMC,gBAAgB;IACpBC,SAAS;IACTC,SAAS;AACX;AAEA,IAAIC,qBAAqB;AACzB,IAAIC,kBAAkB;AACtB,IAAIC,kBAAuC;AAE3C,MAAMC,6BAAuD;IAC3D,IAAIC,WAAU;QACZ,OAAOJ;IACT;AACF;AAEA,MAAMK,wBAAwB,CAACC;IAC7B,IAAIN,uBAAuBM,WAAW;QACpCN,qBAAqBM;IACvB;AACF;AAEA,MAAMC,+BAA+B,CAACC;IACpC,MAAMC,gBAAgB,CAACC;QACrB,IAAIlB,0BAA0BkB,QAAQ;YACpCL,sBAAsB;QACxB;IACF;IAEA,MAAMM,kCAAkC;QACtCN,sBAAsB;IACxB;IAEA,MAAMO,mCAAmC;QACvCP,sBAAsB;IACxB;IAEAG,SAASK,gBAAgB,CAAC,WAAWJ,eAAeZ;IACpDW,SAASK,gBAAgB,CACvBlB,kCACAgB,iCACAd;IAEFW,SAASK,gBAAgB,CACvBjB,mCACAgB,kCACAf;IAEFW,SAASK,gBAAgB,CAAC,aAAaD,kCAAkCf;IACzEW,SAASK,gBAAgB,CAAC,cAAcD,kCAAkCf;IAE1E,OAAO;QACLW,SAASM,mBAAmB,CAAC,WAAWL,eAAeZ;QACvDW,SAASM,mBAAmB,CAC1BnB,kCACAgB,iCACAd;QAEFW,SAASM,mBAAmB,CAC1BlB,mCACAgB,kCACAf;QAEFW,SAASM,mBAAmB,CAAC,aAAaF,kCAAkCf;QAC5EW,SAASM,mBAAmB,CAAC,cAAcF,kCAAkCf;IAC/E;AACF;AAEA,OAAO,SAASkB;IACd,MAAM,EAAEP,QAAQ,EAAE,GAAGf;IAErBC,0BAA0B;QACxB,oIAAoI,GACpI,IAAI,CAACc,UAAU;YACb;QACF;QAEAP,mBAAmB;QAEnB,IAAI,CAACC,iBAAiB;YACpBA,kBAAkBK,6BAA6BC;QACjD;QAEA,OAAO;YACLP,mBAAmB;YACnB,IAAIA,oBAAoB,KAAKC,iBAAiB;gBAC5CA;gBACAA,kBAAkB;YACpB;QACF;IACF,GAAG;QAACM;KAAS;IAEb,OAAOL;AACT"}

package/dist/cssm/hooks/useLatestRef.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
+export function useLatestRef(value) {
+    const ref = React.useRef(value);
+    useIsomorphicLayoutEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref;
+}
+
+//# sourceMappingURL=useLatestRef.js.map

package/dist/cssm/hooks/useLatestRef.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useLatestRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\nexport function useLatestRef<T>(value: T): React.RefObject<T> {\n  const ref = React.useRef(value);\n\n  useIsomorphicLayoutEffect(() => {\n    ref.current = value;\n  }, [value]);\n\n  return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useLatestRef","value","ref","useRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAmC;AAE7E,OAAO,SAASC,aAAgBC,KAAQ;IACtC,MAAMC,MAAMJ,MAAMK,MAAM,CAACF;IAEzBF,0BAA0B;QACxBG,IAAIE,OAAO,GAAGH;IAChB,GAAG;QAACA;KAAM;IAEV,OAAOC;AACT"}

package/dist/cssm/hooks/useLocale.js

@@ -1,7 +1,7 @@
-import { useConfigProvider } from "../components/ConfigProvider/ConfigProviderContext.js";
+import * as React from "react";
+import { LocaleContext } from "../components/ConfigProvider/ConfigProviderSubContexts.js";
 export function useLocale() {
-    const { locale } = useConfigProvider();
-    return locale;
+    return React.useContext(LocaleContext);
 }
 
 //# sourceMappingURL=useLocale.js.map

package/dist/cssm/hooks/useLocale.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useLocale.ts"],"sourcesContent":["import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';\n\nexport function useLocale(): string {\n  const { locale } = useConfigProvider();\n\n  return locale;\n}\n"],"names":["useConfigProvider","useLocale","locale"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,wDAAqD;AAEvF,OAAO,SAASC;IACd,MAAM,EAAEC,MAAM,EAAE,GAAGF;IAEnB,OAAOE;AACT"}
+{"version":3,"sources":["../../../src/hooks/useLocale.ts"],"sourcesContent":["import * as React from 'react';\nimport { LocaleContext } from '../components/ConfigProvider/ConfigProviderSubContexts';\n\nexport function useLocale(): string {\n  return React.useContext(LocaleContext);\n}\n"],"names":["React","LocaleContext","useLocale","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,4DAAyD;AAEvF,OAAO,SAASC;IACd,OAAOF,MAAMG,UAAU,CAACF;AAC1B"}

package/dist/cssm/hooks/useMediaQueryMatch.js

@@ -16,6 +16,7 @@ export function useMediaQueryMatches(media, { disable } = {}) {
         match.addEventListener('change', handleMediaQueryChange);
         return ()=>match.removeEventListener('change', handleMediaQueryChange);
     }, [
+        disable,
         media,
         window
     ]);

package/dist/cssm/hooks/useMediaQueryMatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useMediaQueryMatch.ts"],"sourcesContent":["/* eslint-disable no-restricted-properties */\nimport * as React from 'react';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\ntype Options = {\n  disable?: boolean | undefined;\n};\n\nexport function useMediaQueryMatches(\n  media: string,\n  { disable }: Options = {},\n): boolean | undefined {\n  const { window } = useDOM();\n\n  const [matches, setMatches] = React.useState<boolean | undefined>(undefined);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!window || disable) {\n      return;\n    }\n    const match = window.matchMedia(media);\n    setMatches(match.matches);\n    /* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно  */\n    const handleMediaQueryChange = (event: MediaQueryListEvent) => {\n      /* istanbul ignore next */\n      setMatches(event.matches);\n    };\n    match.addEventListener('change', handleMediaQueryChange);\n    return () => match.removeEventListener('change', handleMediaQueryChange);\n  }, [media, window]);\n\n  return matches;\n}\n"],"names":["React","useDOM","useIsomorphicLayoutEffect","useMediaQueryMatches","media","disable","window","matches","setMatches","useState","undefined","match","matchMedia","handleMediaQueryChange","event","addEventListener","removeEventListener"],"mappings":"AAAA,2CAA2C,GAC3C,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAM7E,OAAO,SAASC,qBACdC,KAAa,EACb,EAAEC,OAAO,EAAW,GAAG,CAAC,CAAC;IAEzB,MAAM,EAAEC,MAAM,EAAE,GAAGL;IAEnB,MAAM,CAACM,SAASC,WAAW,GAAGR,MAAMS,QAAQ,CAAsBC;IAElER,0BAA0B;QACxB,IAAI,CAACI,UAAUD,SAAS;YACtB;QACF;QACA,MAAMM,QAAQL,OAAOM,UAAU,CAACR;QAChCI,WAAWG,MAAMJ,OAAO;QACxB,gFAAgF,GAChF,MAAMM,yBAAyB,CAACC;YAC9B,wBAAwB,GACxBN,WAAWM,MAAMP,OAAO;QAC1B;QACAI,MAAMI,gBAAgB,CAAC,UAAUF;QACjC,OAAO,IAAMF,MAAMK,mBAAmB,CAAC,UAAUH;IACnD,GAAG;QAACT;QAAOE;KAAO;IAElB,OAAOC;AACT"}
+{"version":3,"sources":["../../../src/hooks/useMediaQueryMatch.ts"],"sourcesContent":["/* eslint-disable no-restricted-properties */\nimport * as React from 'react';\nimport { useDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\ntype Options = {\n  disable?: boolean | undefined;\n};\n\nexport function useMediaQueryMatches(\n  media: string,\n  { disable }: Options = {},\n): boolean | undefined {\n  const { window } = useDOM();\n\n  const [matches, setMatches] = React.useState<boolean | undefined>(undefined);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!window || disable) {\n      return;\n    }\n    const match = window.matchMedia(media);\n    setMatches(match.matches);\n    /* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно  */\n    const handleMediaQueryChange = (event: MediaQueryListEvent) => {\n      /* istanbul ignore next */\n      setMatches(event.matches);\n    };\n    match.addEventListener('change', handleMediaQueryChange);\n    return () => match.removeEventListener('change', handleMediaQueryChange);\n  }, [disable, media, window]);\n\n  return matches;\n}\n"],"names":["React","useDOM","useIsomorphicLayoutEffect","useMediaQueryMatches","media","disable","window","matches","setMatches","useState","undefined","match","matchMedia","handleMediaQueryChange","event","addEventListener","removeEventListener"],"mappings":"AAAA,2CAA2C,GAC3C,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,yBAAyB,QAAQ,sCAAmC;AAM7E,OAAO,SAASC,qBACdC,KAAa,EACb,EAAEC,OAAO,EAAW,GAAG,CAAC,CAAC;IAEzB,MAAM,EAAEC,MAAM,EAAE,GAAGL;IAEnB,MAAM,CAACM,SAASC,WAAW,GAAGR,MAAMS,QAAQ,CAAsBC;IAElER,0BAA0B;QACxB,IAAI,CAACI,UAAUD,SAAS;YACtB;QACF;QACA,MAAMM,QAAQL,OAAOM,UAAU,CAACR;QAChCI,WAAWG,MAAMJ,OAAO;QACxB,gFAAgF,GAChF,MAAMM,yBAAyB,CAACC;YAC9B,wBAAwB,GACxBN,WAAWM,MAAMP,OAAO;QAC1B;QACAI,MAAMI,gBAAgB,CAAC,UAAUF;QACjC,OAAO,IAAMF,MAAMK,mBAAmB,CAAC,UAAUH;IACnD,GAAG;QAACR;QAASD;QAAOE;KAAO;IAE3B,OAAOC;AACT"}

package/dist/cssm/hooks/useMutationObserver.js

@@ -1,17 +1,17 @@
 import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
 import { useStableCallback } from "./useStableCallback.js";
-export const DEFAULT_MUTATION_OBSERVER_OPTIONS = {
+const DEFAULT_MUTATION_OBSERVER_OPTIONS = {
     subtree: true,
     childList: true
 };
-export const useMutationObserver = (ref, callback, options = DEFAULT_MUTATION_OBSERVER_OPTIONS)=>{
+export const useMutationObserver = (ref, callback)=>{
     const stableCallback = useStableCallback(callback);
     useIsomorphicLayoutEffect(()=>{
         if (!ref || !ref.current) {
             return;
         }
         const observer = new MutationObserver(stableCallback);
-        observer.observe(ref.current, options);
+        observer.observe(ref.current, DEFAULT_MUTATION_OBSERVER_OPTIONS);
         return ()=>observer.disconnect();
     }, [
         ref,

package/dist/cssm/hooks/useMutationObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useMutationObserver.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\nimport { useStableCallback } from './useStableCallback';\n\nexport const DEFAULT_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {\n  subtree: true,\n  childList: true,\n};\n\nexport const useMutationObserver = (\n  ref: React.RefObject<HTMLElement | null> | null,\n  callback: () => void,\n  options: MutationObserverInit = DEFAULT_MUTATION_OBSERVER_OPTIONS,\n): void => {\n  const stableCallback = useStableCallback(callback);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref || !ref.current) {\n      return;\n    }\n    const observer = new MutationObserver(stableCallback);\n    observer.observe(ref.current, options);\n    return () => observer.disconnect();\n  }, [ref, stableCallback]);\n};\n"],"names":["useIsomorphicLayoutEffect","useStableCallback","DEFAULT_MUTATION_OBSERVER_OPTIONS","subtree","childList","useMutationObserver","ref","callback","options","stableCallback","current","observer","MutationObserver","observe","disconnect"],"mappings":"AACA,SAASA,yBAAyB,QAAQ,sCAAmC;AAC7E,SAASC,iBAAiB,QAAQ,yBAAsB;AAExD,OAAO,MAAMC,oCAA0D;IACrEC,SAAS;IACTC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,sBAAsB,CACjCC,KACAC,UACAC,UAAgCN,iCAAiC;IAEjE,MAAMO,iBAAiBR,kBAAkBM;IAEzCP,0BAA0B;QACxB,IAAI,CAACM,OAAO,CAACA,IAAII,OAAO,EAAE;YACxB;QACF;QACA,MAAMC,WAAW,IAAIC,iBAAiBH;QACtCE,SAASE,OAAO,CAACP,IAAII,OAAO,EAAEF;QAC9B,OAAO,IAAMG,SAASG,UAAU;IAClC,GAAG;QAACR;QAAKG;KAAe;AAC1B,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useMutationObserver.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\nimport { useStableCallback } from './useStableCallback';\n\nconst DEFAULT_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {\n  subtree: true,\n  childList: true,\n};\n\nexport const useMutationObserver = (\n  ref: React.RefObject<HTMLElement | null> | null,\n  callback: () => void,\n): void => {\n  const stableCallback = useStableCallback(callback);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref || !ref.current) {\n      return;\n    }\n    const observer = new MutationObserver(stableCallback);\n    observer.observe(ref.current, DEFAULT_MUTATION_OBSERVER_OPTIONS);\n    return () => observer.disconnect();\n  }, [ref, stableCallback]);\n};\n"],"names":["useIsomorphicLayoutEffect","useStableCallback","DEFAULT_MUTATION_OBSERVER_OPTIONS","subtree","childList","useMutationObserver","ref","callback","stableCallback","current","observer","MutationObserver","observe","disconnect"],"mappings":"AACA,SAASA,yBAAyB,QAAQ,sCAAmC;AAC7E,SAASC,iBAAiB,QAAQ,yBAAsB;AAExD,MAAMC,oCAA0D;IAC9DC,SAAS;IACTC,WAAW;AACb;AAEA,OAAO,MAAMC,sBAAsB,CACjCC,KACAC;IAEA,MAAMC,iBAAiBP,kBAAkBM;IAEzCP,0BAA0B;QACxB,IAAI,CAACM,OAAO,CAACA,IAAIG,OAAO,EAAE;YACxB;QACF;QACA,MAAMC,WAAW,IAAIC,iBAAiBH;QACtCE,SAASE,OAAO,CAACN,IAAIG,OAAO,EAAEP;QAC9B,OAAO,IAAMQ,SAASG,UAAU;IAClC,GAAG;QAACP;QAAKE;KAAe;AAC1B,EAAE"}

package/dist/cssm/hooks/usePlatform.js

@@ -1,7 +1,7 @@
-import { useConfigProvider } from "../components/ConfigProvider/ConfigProviderContext.js";
+import * as React from "react";
+import { PlatformContext } from "../components/ConfigProvider/ConfigProviderSubContexts.js";
 export function usePlatform() {
-    const { platform } = useConfigProvider();
-    return platform;
+    return React.useContext(PlatformContext);
 }
 
 //# sourceMappingURL=usePlatform.js.map

package/dist/cssm/hooks/usePlatform.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/usePlatform.ts"],"sourcesContent":["import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';\nimport type { PlatformType } from '../lib/platform';\n\nexport function usePlatform(): PlatformType {\n  const { platform } = useConfigProvider();\n\n  return platform;\n}\n"],"names":["useConfigProvider","usePlatform","platform"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,wDAAqD;AAGvF,OAAO,SAASC;IACd,MAAM,EAAEC,QAAQ,EAAE,GAAGF;IAErB,OAAOE;AACT"}
+{"version":3,"sources":["../../../src/hooks/usePlatform.ts"],"sourcesContent":["import * as React from 'react';\nimport { PlatformContext } from '../components/ConfigProvider/ConfigProviderSubContexts';\nimport type { PlatformType } from '../lib/platform';\n\nexport function usePlatform(): PlatformType {\n  return React.useContext(PlatformContext);\n}\n"],"names":["React","PlatformContext","usePlatform","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,4DAAyD;AAGzF,OAAO,SAASC;IACd,OAAOF,MAAMG,UAAU,CAACF;AAC1B"}

package/dist/cssm/hooks/useResizeObserver.js

@@ -1,17 +1,16 @@
 import { useEffect } from "react";
-import { useDOM } from "../lib/dom.js";
+import { isWindow } from "../lib/dom.js";
 import { isRefObject } from "../lib/isRefObject.js";
 import { useStableCallback } from "./useStableCallback.js";
 /**
  * Хук вызывает переданный коллбэк при изменении размеров элемента.
  */ export function useResizeObserver(ref, callback) {
     const stableCallback = useStableCallback(callback);
-    const { window } = useDOM();
     useEffect(function addResizeObserverHandler() {
-        if (!ref || !window) {
+        if (!ref) {
             return;
         }
-        if (ref === window) {
+        if (isWindow(ref)) {
             const onResize = ()=>stableCallback(ref);
             ref.addEventListener('resize', onResize);
             return ()=>ref.removeEventListener('resize', onResize);
@@ -27,8 +26,7 @@ import { useStableCallback } from "./useStableCallback.js";
         return ()=>observer.disconnect();
     }, [
         ref,
-        stableCallback,
-        window
+        stableCallback
     ]);
 }
 

package/dist/cssm/hooks/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type * as React from 'react';\nimport { useDOM } from '../lib/dom';\nimport { isRefObject } from '../lib/isRefObject';\nimport { useStableCallback } from './useStableCallback';\n\n/**\n * Хук вызывает переданный коллбэк при изменении размеров элемента.\n */\nexport function useResizeObserver(\n  ref: React.RefObject<HTMLElement | null> | Window | null | undefined,\n  callback: (element: HTMLElement | Window) => void,\n): void {\n  const stableCallback = useStableCallback(callback);\n  const { window } = useDOM();\n\n  useEffect(\n    function addResizeObserverHandler() {\n      if (!ref || !window) {\n        return;\n      }\n\n      if (ref === window) {\n        const onResize = () => stableCallback(ref);\n        ref.addEventListener('resize', onResize);\n        return () => ref.removeEventListener('resize', onResize);\n      }\n\n      /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n      if (!isRefObject(ref) || !ref.current) {\n        return;\n      }\n      const element = ref.current;\n\n      const observeFn = () => stableCallback(element);\n\n      // eslint-disable-next-line compat/compat\n      const observer: ResizeObserver = new ResizeObserver(observeFn);\n      observer.observe(element);\n\n      return () => observer.disconnect();\n    },\n    [ref, stableCallback, window],\n  );\n}\n"],"names":["useEffect","useDOM","isRefObject","useStableCallback","useResizeObserver","ref","callback","stableCallback","window","addResizeObserverHandler","onResize","addEventListener","removeEventListener","current","element","observeFn","observer","ResizeObserver","observe","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAElC,SAASC,MAAM,QAAQ,gBAAa;AACpC,SAASC,WAAW,QAAQ,wBAAqB;AACjD,SAASC,iBAAiB,QAAQ,yBAAsB;AAExD;;CAEC,GACD,OAAO,SAASC,kBACdC,GAAoE,EACpEC,QAAiD;IAEjD,MAAMC,iBAAiBJ,kBAAkBG;IACzC,MAAM,EAAEE,MAAM,EAAE,GAAGP;IAEnBD,UACE,SAASS;QACP,IAAI,CAACJ,OAAO,CAACG,QAAQ;YACnB;QACF;QAEA,IAAIH,QAAQG,QAAQ;YAClB,MAAME,WAAW,IAAMH,eAAeF;YACtCA,IAAIM,gBAAgB,CAAC,UAAUD;YAC/B,OAAO,IAAML,IAAIO,mBAAmB,CAAC,UAAUF;QACjD;QAEA,6EAA6E,GAC7E,IAAI,CAACR,YAAYG,QAAQ,CAACA,IAAIQ,OAAO,EAAE;YACrC;QACF;QACA,MAAMC,UAAUT,IAAIQ,OAAO;QAE3B,MAAME,YAAY,IAAMR,eAAeO;QAEvC,yCAAyC;QACzC,MAAME,WAA2B,IAAIC,eAAeF;QACpDC,SAASE,OAAO,CAACJ;QAEjB,OAAO,IAAME,SAASG,UAAU;IAClC,GACA;QAACd;QAAKE;QAAgBC;KAAO;AAEjC"}
+{"version":3,"sources":["../../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type * as React from 'react';\nimport { isWindow } from '../lib/dom';\nimport { isRefObject } from '../lib/isRefObject';\nimport { useStableCallback } from './useStableCallback';\n\n/**\n * Хук вызывает переданный коллбэк при изменении размеров элемента.\n */\nexport function useResizeObserver(\n  ref: React.RefObject<HTMLElement | null> | Window | null | undefined,\n  callback: (element: HTMLElement | Window) => void,\n): void {\n  const stableCallback = useStableCallback(callback);\n\n  useEffect(\n    function addResizeObserverHandler() {\n      if (!ref) {\n        return;\n      }\n\n      if (isWindow(ref)) {\n        const onResize = () => stableCallback(ref);\n        ref.addEventListener('resize', onResize);\n        return () => ref.removeEventListener('resize', onResize);\n      }\n\n      /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n      if (!isRefObject(ref) || !ref.current) {\n        return;\n      }\n      const element = ref.current;\n\n      const observeFn = () => stableCallback(element);\n\n      // eslint-disable-next-line compat/compat\n      const observer: ResizeObserver = new ResizeObserver(observeFn);\n      observer.observe(element);\n\n      return () => observer.disconnect();\n    },\n    [ref, stableCallback],\n  );\n}\n"],"names":["useEffect","isWindow","isRefObject","useStableCallback","useResizeObserver","ref","callback","stableCallback","addResizeObserverHandler","onResize","addEventListener","removeEventListener","current","element","observeFn","observer","ResizeObserver","observe","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAElC,SAASC,QAAQ,QAAQ,gBAAa;AACtC,SAASC,WAAW,QAAQ,wBAAqB;AACjD,SAASC,iBAAiB,QAAQ,yBAAsB;AAExD;;CAEC,GACD,OAAO,SAASC,kBACdC,GAAoE,EACpEC,QAAiD;IAEjD,MAAMC,iBAAiBJ,kBAAkBG;IAEzCN,UACE,SAASQ;QACP,IAAI,CAACH,KAAK;YACR;QACF;QAEA,IAAIJ,SAASI,MAAM;YACjB,MAAMI,WAAW,IAAMF,eAAeF;YACtCA,IAAIK,gBAAgB,CAAC,UAAUD;YAC/B,OAAO,IAAMJ,IAAIM,mBAAmB,CAAC,UAAUF;QACjD;QAEA,6EAA6E,GAC7E,IAAI,CAACP,YAAYG,QAAQ,CAACA,IAAIO,OAAO,EAAE;YACrC;QACF;QACA,MAAMC,UAAUR,IAAIO,OAAO;QAE3B,MAAME,YAAY,IAAMP,eAAeM;QAEvC,yCAAyC;QACzC,MAAME,WAA2B,IAAIC,eAAeF;QACpDC,SAASE,OAAO,CAACJ;QAEjB,OAAO,IAAME,SAASG,UAAU;IAClC,GACA;QAACb;QAAKE;KAAe;AAEzB"}