refactor: refactor hooks useEventBroker and useLayer (#1060)

src/components/Modal/Modal.tsx

@@ -7,9 +7,10 @@ import {Portal} from '../Portal';
 import type {DOMProps, QAProps} from '../types';
 import {FocusTrap} from '../utils/FocusTrap';
 import {block} from '../utils/cn';
+import type {LayerCloseReason} from '../utils/layer-manager';
+import {useLayer} from '../utils/layer-manager';
+import type {LayerExtendableProps} from '../utils/layer-manager/LayerManager';
 import {getCSSTransitionClassNames} from '../utils/transition';
-import {useLayer} from '../utils/useLayer';
-import type {LayerCloseReason, LayerExtendableProps} from '../utils/useLayer';
 import {useRestoreFocus} from '../utils/useRestoreFocus';
 
 import './Modal.scss';

src/components/Popup/Popup.tsx

@@ -7,9 +7,9 @@ import {Portal} from '../Portal';
 import type {DOMProps, QAProps} from '../types';
 import {FocusTrap, useParentFocusTrap} from '../utils/FocusTrap';
 import {block} from '../utils/cn';
+import {useLayer} from '../utils/layer-manager';
+import type {LayerExtendableProps} from '../utils/layer-manager/LayerManager';
 import {getCSSTransitionClassNames} from '../utils/transition';
-import {useLayer} from '../utils/useLayer';
-import type {LayerExtendableProps} from '../utils/useLayer';
 import {usePopper} from '../utils/usePopper';
 import type {PopperAnchorRef, PopperPlacement, PopperProps} from '../utils/usePopper';
 import {useRestoreFocus} from '../utils/useRestoreFocus';

src/components/index.ts

@@ -51,10 +51,8 @@ export * from './utils/class-transform';
 export * from './utils/event-broker';
 export {getComponentName} from './utils/getComponentName';
 export * from './utils/withEventBrokerDomHandlers';
-export * from './utils/useEventBroker';
-export * from './utils/useLayer';
+export * from './utils/layer-manager';
 export {Lang, configure} from './utils/configure';
 export {useOnFocusOutside} from './utils/useOnFocusOutside';
 export * from './utils/interactions';
 export * from './utils/xpath';
-export {getLayersCount} from './utils/LayerManager';

src/components/utils/event-broker.ts → src/components/utils/event-broker/EventBroker.ts

@@ -1,6 +1,5 @@
-import type {QAProps} from '../types';
-
-import {NAMESPACE} from './cn';
+import type {QAProps} from '../../types';
+import {NAMESPACE} from '../cn';
 
 export interface EventBrokerData<T = unknown> extends QAProps {
     componentId: string;

src/components/utils/event-broker/index.ts

@@ -0,0 +1,3 @@
+export {eventBroker} from './EventBroker';
+export {useEventBroker} from './useEventBroker';
+export type {EventBrokerSubscription, EventBrokerData} from './EventBroker';

src/components/utils/useEventBroker.ts → src/components/utils/event-broker/useEventBroker.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {eventBroker} from './event-broker';
-import type {EventBrokerSubscription} from './event-broker';
+import {eventBroker} from './EventBroker';
+import type {EventBrokerSubscription} from './EventBroker';
 
 export function useEventBroker(subscription: EventBrokerSubscription, broker = eventBroker) {
     React.useEffect(() => {

src/components/utils/LayerManager.ts → src/components/utils/layer-manager/LayerManager.ts

@@ -1,8 +1,7 @@
 import type {VirtualElement} from '@popperjs/core';
 
-import {KeyCode} from '../../constants';
-
-import {eventBroker} from './event-broker';
+import {KeyCode} from '../../../constants';
+import {eventBroker} from '../event-broker';
 
 export type LayerCloseReason = 'outsideClick' | 'escapeKeyDown';
 
@@ -16,9 +15,7 @@ export interface LayerExtendableProps {
     type?: string;
 }
 
-export type ContentElement =
-    | Element
-    | (VirtualElement & {contains?: (other: Node | null) => boolean});
+type ContentElement = Element | (VirtualElement & {contains?: (other: Node | null) => boolean});
 
 export interface LayerConfig extends LayerExtendableProps {
     contentRefs?: Array<React.RefObject<ContentElement> | undefined>;

src/components/utils/layer-manager/index.ts

@@ -0,0 +1,4 @@
+export {layerManager, getLayersCount} from './LayerManager';
+export type {LayerConfig, LayerCloseReason} from './LayerManager';
+export {useLayer} from './useLayer';
+export type {LayerProps} from './useLayer';

src/components/utils/withEventBrokerDomHandlers.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {eventBroker} from './event-broker';
 import type {EventBrokerData} from './event-broker';
+import {eventBroker} from './event-broker';
 import {getComponentName} from './getComponentName';
 
 type SupportedEvents = 'onClick' | 'onClickCapture';