Merge pull request #343 from denisx/feat/name-imports

feat: refactor: use name imports;

src/AutoFocusInside.js

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import * as constants from 'focus-lock/constants';
+import { FOCUS_AUTO } from 'focus-lock/constants';
 import { inlineProp } from './util';
 
 const AutoFocusInside = ({ disabled = false, children, className = undefined }) => (
-  <div {...inlineProp(constants.FOCUS_AUTO, !disabled)} className={className}>
+  <div {...inlineProp(FOCUS_AUTO, !disabled)} className={className}>
     {children}
   </div>
 );

src/Combination.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
 import FocusLockUI from './Lock';
 import FocusTrap from './Trap';
 
@@ -11,7 +11,7 @@ const RequireSideCar = (props) => {
 };
 */
 
-const FocusLockCombination = React.forwardRef(function FocusLockUICombination(props, ref) {
+const FocusLockCombination = forwardRef(function FocusLockUICombination(props, ref) {
   return (
     <FocusLockUI
       sideCar={FocusTrap}

src/FocusGuard.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 export const hiddenGuard = {
@@ -12,11 +12,11 @@ export const hiddenGuard = {
 };
 
 const InFocusGuard = ({ children = null }) => (
-  <React.Fragment>
+  <Fragment>
     <div key="guard-first" data-focus-guard data-focus-auto-guard style={hiddenGuard} />
     {children}
     {children && <div key="guard-last" data-focus-guard data-focus-auto-guard style={hiddenGuard} />}
-  </React.Fragment>
+  </Fragment>
 );
 
 InFocusGuard.propTypes = {

src/FreeFocusInside.js

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import * as constants from 'focus-lock/constants';
+import { FOCUS_ALLOW } from 'focus-lock/constants';
 import { inlineProp } from './util';
 
 const FreeFocusInside = ({ children, className }) => (
-  <div {...inlineProp(constants.FOCUS_ALLOW, true)} className={className}>
+  <div {...inlineProp(FOCUS_ALLOW, true)} className={className}>
     {children}
   </div>
 );

src/Lock.js

@@ -1,8 +1,10 @@
-import * as React from 'react';
+import React, {
+  forwardRef, useRef, useState, useCallback, useEffect, useMemo, Fragment,
+} from 'react';
 import {
   node, bool, string, any, arrayOf, oneOfType, object, func,
 } from 'prop-types';
-import * as constants from 'focus-lock/constants';
+import { FOCUS_DISABLED, FOCUS_GROUP } from 'focus-lock/constants';
 import { useMergeRefs } from 'use-callback-ref';
 
 import { hiddenGuard } from './FocusGuard';
@@ -13,13 +15,13 @@ import { focusScope } from './scope';
 
 const emptyArray = [];
 
-const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
-  const [realObserved, setObserved] = React.useState();
-  const observed = React.useRef();
-  const isActive = React.useRef(false);
-  const originalFocusedElement = React.useRef(null);
+const FocusLock = forwardRef(function FocusLockUI(props, parentRef) {
+  const [realObserved, setObserved] = useState();
+  const observed = useRef();
+  const isActive = useRef(false);
+  const originalFocusedElement = useRef(null);
 
-  const [, update] = React.useState({});
+  const [, update] = useState({});
 
   const {
     children,
@@ -45,11 +47,11 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
     onDeactivation: onDeactivationCallback,
   } = props;
 
-  const [id] = React.useState({});
+  const [id] = useState({});
 
   // SIDE EFFECT CALLBACKS
 
-  const onActivation = React.useCallback(({ captureFocusRestore }) => {
+  const onActivation = useCallback(({ captureFocusRestore }) => {
     if (!originalFocusedElement.current) {
       const activeElement = document?.activeElement;
       originalFocusedElement.current = activeElement;
@@ -66,15 +68,15 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
     update();
   }, [onActivationCallback]);
 
-  const onDeactivation = React.useCallback(() => {
+  const onDeactivation = useCallback(() => {
     isActive.current = false;
     if (onDeactivationCallback) {
       onDeactivationCallback(observed.current);
     }
     update();
   }, [onDeactivationCallback]);
 
-  const returnFocus = React.useCallback((allowDefer) => {
+  const returnFocus = useCallback((allowDefer) => {
     const { current: focusRestore } = originalFocusedElement;
     if (focusRestore) {
       const returnFocusTo = (typeof focusRestore === 'function' ? focusRestore() : focusRestore) || document.body;
@@ -96,7 +98,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
 
   // MEDIUM CALLBACKS
 
-  const onFocus = React.useCallback((event) => {
+  const onFocus = useCallback((event) => {
     if (isActive.current) {
       mediumFocus.useMedium(event);
     }
@@ -107,7 +109,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
   // REF PROPAGATION
   // not using real refs due to race conditions
 
-  const setObserveNode = React.useCallback((newObserved) => {
+  const setObserveNode = useCallback((newObserved) => {
     if (observed.current !== newObserved) {
       observed.current = newObserved;
       setObserved(newObserved);
@@ -120,7 +122,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
       console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default');
     }
 
-    React.useEffect(() => {
+    useEffect(() => {
       // report incorrect integration - https://github.com/theKashey/react-focus-lock/issues/123
       if (!observed.current && typeof Container !== 'string') {
         // eslint-disable-next-line no-console
@@ -130,8 +132,8 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
   }
 
   const lockProps = {
-    [constants.FOCUS_DISABLED]: disabled && 'disabled',
-    [constants.FOCUS_GROUP]: group,
+    [FOCUS_DISABLED]: disabled && 'disabled',
+    [FOCUS_GROUP]: group,
     ...containerProps,
   };
 
@@ -140,15 +142,15 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
 
   const mergedRef = useMergeRefs([parentRef, setObserveNode]);
 
-  const focusScopeValue = React.useMemo(() => ({
+  const focusScopeValue = useMemo(() => ({
     observed,
     shards,
     enabled: !disabled,
     active: isActive.current,
   }), [disabled, isActive.current, shards, realObserved]);
 
   return (
-    <React.Fragment>
+    <Fragment>
       {hasLeadingGuards && [
         // nearest focus guard
         <div key="guard-first" data-focus-guard tabIndex={disabled ? -1 : 0} style={hiddenGuard} />,
@@ -191,7 +193,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
         hasTailingGuards
         && <div data-focus-guard tabIndex={disabled ? -1 : 0} style={hiddenGuard} />
       }
-    </React.Fragment>
+    </Fragment>
   );
 });
 

src/MoveFocusInside.js

@@ -1,11 +1,11 @@
-import * as React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import * as constants from 'focus-lock/constants';
+import { FOCUS_AUTO } from 'focus-lock/constants';
 import { inlineProp } from './util';
 import { mediumEffect } from './medium';
 
 export const useFocusInside = (observedRef) => {
-  React.useEffect(() => {
+  useEffect(() => {
     let enabled = true;
     mediumEffect.useMedium((car) => {
       const observed = observedRef && observedRef.current;
@@ -22,12 +22,12 @@ export const useFocusInside = (observedRef) => {
 };
 
 function MoveFocusInside({ disabled: isDisabled = false, className, children }) {
-  const ref = React.useRef(null);
+  const ref = useRef(null);
   useFocusInside(isDisabled ? undefined : ref);
 
   return (
     <div
-      {...inlineProp(constants.FOCUS_AUTO, !isDisabled)}
+      {...inlineProp(FOCUS_AUTO, !isDisabled)}
       ref={ref}
       className={className}
     >

src/Trap.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-mixed-operators */
-import * as React from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import withSideEffect from 'react-clientside-effect';
 import {

src/UI.d.ts

@@ -1,41 +1,41 @@
-import * as React from 'react';
+import { FC, Component, RefObject, FocusEventHandler } from 'react';
 import {ReactFocusLockProps, AutoFocusProps, FreeFocusProps, InFocusGuardProps} from "./interfaces.js";
 
 /**
  * Traps Focus inside a Lock
  */
-declare const ReactFocusLock: React.FC<ReactFocusLockProps & { sideCar: React.FC<any> }>;
+declare const ReactFocusLock: FC<ReactFocusLockProps & { sideCar: FC<any> }>;
 
 export default ReactFocusLock;
 
 /**
  * Autofocus on children on Lock activation
  */
-export class AutoFocusInside extends React.Component<AutoFocusProps> {
+export class AutoFocusInside extends Component<AutoFocusProps> {
 }
 
 /**
  * Autofocus on children
  */
-export class MoveFocusInside extends React.Component<AutoFocusProps> {
+export class MoveFocusInside extends Component<AutoFocusProps> {
 }
 
 /**
  * Allow free focus inside on children
  */
-export class FreeFocusInside extends React.Component<FreeFocusProps> {
+export class FreeFocusInside extends Component<FreeFocusProps> {
 }
 
 /**
  * Secures the focus around the node
  */
-export class InFocusGuard extends React.Component<InFocusGuardProps> {
+export class InFocusGuard extends Component<InFocusGuardProps> {
 }
 
 /**
  * Moves focus inside a given node
  */
-export function useFocusInside(node: React.RefObject<HTMLElement>): void;
+export function useFocusInside(node: RefObject<HTMLElement>): void;
 
 export type FocusOptions = {
     /**
@@ -112,10 +112,10 @@ export function useFocusState<T extends Element>(callbacks?: FocusCallbacks ):{
     /**
      * focus handled. SHALL be passed to the node down
      */
-    onFocus: React.FocusEventHandler<T>;
+    onFocus: FocusEventHandler<T>;
     /**
      * reference to the node
      * only required to capture current status of the node
      */
-    ref: React.RefObject<T>;
-}
+    ref: RefObject<T>;
+}

src/clientSideEffect.js

@@ -1,6 +1,6 @@
-/* eslint-disable */
+/* eslint-disable no-unused-vars, no-console */
 
-import * as React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 // NOT USED
 
@@ -31,14 +31,14 @@ function withSideEffect(reducePropsToState, handleStateChangeOnClient) {
     }
 
     const SideEffect = (props) => {
-      const lastProps = React.useRef(props);
+      const lastProps = useRef(props);
 
-      React.useEffect(() => {
+      useEffect(() => {
         lastProps.current = props;
       });
 
       // handle mounted instances
-      React.useEffect(() => {
+      useEffect(() => {
         console.log('ins added');
         mountedInstances.push(lastProps);
 
@@ -50,7 +50,7 @@ function withSideEffect(reducePropsToState, handleStateChangeOnClient) {
       }, []);
 
       // notify updates
-      // React.useEffect(emitChange, [props.disabled]);
+      // useEffect(emitChange, [props.disabled]);
 
       return <WrappedComponent {...props} />;
     };

src/index.d.ts

@@ -1,42 +1,42 @@
-import * as React from 'react';
+import { FC, Component, RefObject, FocusEventHandler } from 'react';
 import {ReactFocusLockProps, AutoFocusProps, FreeFocusProps, InFocusGuardProps} from "./interfaces.js";
 
 export {ReactFocusLockProps};
 /**
  * Traps Focus inside a Lock
  */
-declare const ReactFocusLock: React.FC<ReactFocusLockProps>;
+declare const ReactFocusLock: FC<ReactFocusLockProps>;
 
 export default ReactFocusLock;
 
 /**
  * Autofocus on children on Lock activation
  */
-export class AutoFocusInside extends React.Component<AutoFocusProps> {
+export class AutoFocusInside extends Component<AutoFocusProps> {
 }
 
 /**
  * Autofocus on children
  */
-export class MoveFocusInside extends React.Component<AutoFocusProps> {
+export class MoveFocusInside extends Component<AutoFocusProps> {
 }
 
 /**
  * Allow free focus inside on children
  */
-export class FreeFocusInside extends React.Component<FreeFocusProps> {
+export class FreeFocusInside extends Component<FreeFocusProps> {
 }
 
 /**
  * Secures the focus around the node
  */
-export class InFocusGuard extends React.Component<InFocusGuardProps> {
+export class InFocusGuard extends Component<InFocusGuardProps> {
 }
 
 /**
  * Moves focus inside a given node
  */
-export function useFocusInside(node: React.RefObject<HTMLElement>): void;
+export function useFocusInside(node: RefObject<HTMLElement>): void;
 
 export type FocusOptions = {
     /**
@@ -113,10 +113,10 @@ export function useFocusState<T extends Element>(callbacks?: FocusCallbacks ):{
     /**
      * focus handled. SHALL be passed to the node down
      */
-    onFocus: React.FocusEventHandler<T>;
+    onFocus: FocusEventHandler<T>;
     /**
      * reference to the node
      * only required to capture current status of the node
      */
-    ref: React.RefObject<T>;
-}
+    ref: RefObject<T>;
+}