@accessible/modal - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/cjs/index.d.ts

@@ -28,3 +28,3 @@ import React from 'react'
   closedStyle?: React.CSSProperties
-  children: JSX.Element | React.ReactElement
+  children: React.ReactElement
 }
@@ -31,0 +31,0 @@ export declare const Dialog: React.FC<DialogProps>

dist/cjs/index.js

@@ -94,80 +94,76 @@ 'use strict'
 
-const Dialog = _react.default.forwardRef(
-  (
-    {
-      closeOnEscape = true,
-      portal,
-      openClass = 'modal--open',
-      closedClass,
-      openStyle,
-      closedStyle,
-      children,
-    },
-    userRef
-  ) => {
-    const {id, isOpen, close, dialogRef} = useModal()
-    const ref = (0, _mergedRef.default)(dialogRef, userRef) // handles closing the modal when the ESC key is pressed
+const Dialog = ({
+  closeOnEscape = true,
+  portal,
+  openClass = 'modal--open',
+  closedClass,
+  openStyle,
+  closedStyle,
+  children,
+}) => {
+  const {id, isOpen, close, dialogRef} = useModal() // @ts-ignore
 
-    function _ref2(event) {
-      return parseInt(event.code) === 27 && close()
+  const ref = (0, _mergedRef.default)(children.ref, dialogRef) // handles closing the modal when the ESC key is pressed
+
+  function _ref2(event) {
+    return parseInt(event.code) === 27 && close()
+  }
+
+  ;(0, _passiveLayoutEffect.default)(() => {
+    const current =
+      dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current
+
+    function _ref() {
+      const tabbableEls = (0, _tabbable.default)(current)
+      if (tabbableEls.length > 0) tabbableEls[0].focus()
     }
 
-    ;(0, _passiveLayoutEffect.default)(() => {
-      const current =
-        dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current
+    if (current && isOpen) {
+      // Focuses on the first focusable element
+      const doFocus = _ref
+      ;(0, _raf.default)(doFocus)
+      current.addEventListener('transitionend', doFocus) // Closes the modal when escape is pressed
 
-      function _ref() {
-        const tabbableEls = (0, _tabbable.default)(current)
-        if (tabbableEls.length > 0) tabbableEls[0].focus()
+      function _ref3() {
+        return current.removeEventListener('transitionend', doFocus)
       }
 
-      if (current && isOpen) {
-        // Focuses on the first focusable element
-        const doFocus = _ref
-        ;(0, _raf.default)(doFocus)
-        current.addEventListener('transitionend', doFocus) // Closes the modal when escape is pressed
-
-        function _ref3() {
-          return current.removeEventListener('transitionend', doFocus)
+      if (closeOnEscape) {
+        const callback = _ref2
+        current.addEventListener('keyup', callback)
+        return () => {
+          current.removeEventListener('keyup', callback)
+          current.removeEventListener('transitionend', doFocus)
         }
-
-        if (closeOnEscape) {
-          const callback = _ref2
-          current.addEventListener('keyup', callback)
-          return () => {
-            current.removeEventListener('keyup', callback)
-            current.removeEventListener('transitionend', doFocus)
-          }
-        } else {
-          return _ref3
-        }
+      } else {
+        return _ref3
       }
+    }
 
-      return
-    }, [dialogRef.current, isOpen, close, closeOnEscape])
-    return portalize(
-      cloneElement(children, {
-        id,
-        role: 'dialog',
-        'aria-modal': 'false',
-        'aria-hidden': String(!isOpen),
-        className:
-          (0, _clsx.default)(
-            children.props.className,
-            isOpen ? openClass : closedClass
-          ) || void 0,
-        style: _extends(
-          {
-            visibility: isOpen ? 'visible' : 'hidden',
-          },
-          defaultStyles,
-          children.props.style,
-          isOpen ? openStyle : closedStyle
-        ),
-        ref,
-      }),
-      portal
-    )
-  }
-)
+    return
+  }, [dialogRef.current, isOpen, close, closeOnEscape])
+  return portalize(
+    cloneElement(children, {
+      id,
+      role: 'dialog',
+      'aria-modal': 'false',
+      'aria-hidden': String(!isOpen),
+      className:
+        (0, _clsx.default)(
+          children.props.className,
+          isOpen ? openClass : closedClass
+        ) || void 0,
+      style: _extends(
+        {
+          visibility: isOpen ? 'visible' : 'hidden',
+        },
+        defaultStyles,
+        children.props.style,
+        isOpen ? openStyle : closedStyle
+      ),
+      ref,
+    }),
+    portal
+  )
+}
 
@@ -187,6 +183,3 @@ exports.Dialog = Dialog
   closedStyle: _propTypes.default.any,
-  children: _propTypes.default.oneOfType([
-    _propTypes.default.element,
-    _propTypes.default.element,
-  ]).isRequired,
+  children: _propTypes.default.element.isRequired,
 }
@@ -225,56 +218,57 @@
 
-const Trigger = _react.default.forwardRef(
-  ({openClass, closedClass, openStyle, closedStyle, children}, userRef) => {
-    const {isOpen, id, toggle, triggerRef} = useModal()
-    const ref = (0, _mergedRef.default)(triggerRef, userRef)
-    const seen = useRef(false)
-    const onClick = useCallback(
-      e => {
-        var _children$props$onCli2, _children$props2
+const Trigger = ({
+  openClass,
+  closedClass,
+  openStyle,
+  closedStyle,
+  children,
+}) => {
+  const {isOpen, id, toggle, triggerRef} = useModal() // @ts-ignore
 
-        toggle()
-        ;(_children$props$onCli2 = (_children$props2 = children.props)
-          .onClick) === null || _children$props$onCli2 === void 0
-          ? void 0
-          : _children$props$onCli2.call(_children$props2, e)
-      },
-      [toggle, children.props.onClick]
-    ) // returns the focus to the opener when the modal box closes if focus is
-    // not an event that triggers opening the modal
+  const ref = (0, _mergedRef.default)(children.ref, triggerRef)
+  const seen = useRef(false)
+  const onClick = useCallback(
+    e => {
+      var _children$props$onCli2, _children$props2
 
-    function _ref4() {
-      var _triggerRef$current
-
-      return (_triggerRef$current = triggerRef.current) === null ||
-        _triggerRef$current === void 0
+      toggle()
+      ;(_children$props$onCli2 = (_children$props2 = children.props)
+        .onClick) === null || _children$props$onCli2 === void 0
         ? void 0
-        : _triggerRef$current.focus()
-    }
+        : _children$props$onCli2.call(_children$props2, e)
+    },
+    [toggle, children.props.onClick]
+  ) // returns the focus to the opener when the modal box closes if focus is
+  // not an event that triggers opening the modal
 
-    ;(0, _passiveLayoutEffect.default)(() => {
-      if (!isOpen) {
-        if (seen.current) (0, _raf.default)(_ref4)
-        seen.current = true
-      }
-    }, [isOpen])
-    return cloneElement(children, {
-      'aria-controls': id,
-      'aria-haspopup': 'dialog',
-      'aria-expanded': String(isOpen),
-      className:
-        (0, _clsx.default)(
-          children.props.className,
-          isOpen ? openClass : closedClass
-        ) || void 0,
-      style: _extends(
-        {},
-        children.props.style,
-        isOpen ? openStyle : closedStyle
-      ),
-      onClick,
-      ref,
-    })
+  function _ref4() {
+    var _triggerRef$current
+
+    return (_triggerRef$current = triggerRef.current) === null ||
+      _triggerRef$current === void 0
+      ? void 0
+      : _triggerRef$current.focus()
   }
-)
 
+  ;(0, _passiveLayoutEffect.default)(() => {
+    if (!isOpen) {
+      if (seen.current) (0, _raf.default)(_ref4)
+      seen.current = true
+    }
+  }, [isOpen])
+  return cloneElement(children, {
+    'aria-controls': id,
+    'aria-haspopup': 'dialog',
+    'aria-expanded': String(isOpen),
+    className:
+      (0, _clsx.default)(
+        children.props.className,
+        isOpen ? openClass : closedClass
+      ) || void 0,
+    style: _extends({}, children.props.style, isOpen ? openStyle : closedStyle),
+    onClick,
+    ref,
+  })
+}
+
 exports.Trigger = Trigger
@@ -281,0 +275,0 @@ Trigger.propTypes = {

dist/es/index.d.ts

@@ -28,3 +28,3 @@ import React from 'react'
   closedStyle?: React.CSSProperties
-  children: JSX.Element | React.ReactElement
+  children: React.ReactElement
 }
@@ -31,0 +31,0 @@ export declare const Dialog: React.FC<DialogProps>

dist/es/index.js

@@ -49,78 +49,74 @@ import _pt from 'prop-types'
 }
-export const Dialog = React.forwardRef(
-  (
-    {
-      closeOnEscape = true,
-      portal,
-      openClass = 'modal--open',
-      closedClass,
-      openStyle,
-      closedStyle,
-      children,
-    },
-    userRef
-  ) => {
-    const {id, isOpen, close, dialogRef} = useModal()
-    const ref = useMergedRef(dialogRef, userRef) // handles closing the modal when the ESC key is pressed
+export const Dialog = ({
+  closeOnEscape = true,
+  portal,
+  openClass = 'modal--open',
+  closedClass,
+  openStyle,
+  closedStyle,
+  children,
+}) => {
+  const {id, isOpen, close, dialogRef} = useModal() // @ts-ignore
 
-    function _ref2(event) {
-      return parseInt(event.code) === 27 && close()
+  const ref = useMergedRef(children.ref, dialogRef) // handles closing the modal when the ESC key is pressed
+
+  function _ref2(event) {
+    return parseInt(event.code) === 27 && close()
+  }
+
+  useLayoutEffect(() => {
+    const current =
+      dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current
+
+    function _ref() {
+      const tabbableEls = tabbable(current)
+      if (tabbableEls.length > 0) tabbableEls[0].focus()
     }
 
-    useLayoutEffect(() => {
-      const current =
-        dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current
+    if (current && isOpen) {
+      // Focuses on the first focusable element
+      const doFocus = _ref
+      raf(doFocus)
+      current.addEventListener('transitionend', doFocus) // Closes the modal when escape is pressed
 
-      function _ref() {
-        const tabbableEls = tabbable(current)
-        if (tabbableEls.length > 0) tabbableEls[0].focus()
+      function _ref3() {
+        return current.removeEventListener('transitionend', doFocus)
       }
 
-      if (current && isOpen) {
-        // Focuses on the first focusable element
-        const doFocus = _ref
-        raf(doFocus)
-        current.addEventListener('transitionend', doFocus) // Closes the modal when escape is pressed
-
-        function _ref3() {
-          return current.removeEventListener('transitionend', doFocus)
+      if (closeOnEscape) {
+        const callback = _ref2
+        current.addEventListener('keyup', callback)
+        return () => {
+          current.removeEventListener('keyup', callback)
+          current.removeEventListener('transitionend', doFocus)
         }
-
-        if (closeOnEscape) {
-          const callback = _ref2
-          current.addEventListener('keyup', callback)
-          return () => {
-            current.removeEventListener('keyup', callback)
-            current.removeEventListener('transitionend', doFocus)
-          }
-        } else {
-          return _ref3
-        }
+      } else {
+        return _ref3
       }
+    }
 
-      return
-    }, [dialogRef.current, isOpen, close, closeOnEscape])
-    return portalize(
-      cloneElement(children, {
-        id,
-        role: 'dialog',
-        'aria-modal': 'false',
-        'aria-hidden': String(!isOpen),
-        className:
-          clsx(children.props.className, isOpen ? openClass : closedClass) ||
-          void 0,
-        style: Object.assign(
-          {
-            visibility: isOpen ? 'visible' : 'hidden',
-          },
-          defaultStyles,
-          children.props.style,
-          isOpen ? openStyle : closedStyle
-        ),
-        ref,
-      }),
-      portal
-    )
-  }
-)
+    return
+  }, [dialogRef.current, isOpen, close, closeOnEscape])
+  return portalize(
+    cloneElement(children, {
+      id,
+      role: 'dialog',
+      'aria-modal': 'false',
+      'aria-hidden': String(!isOpen),
+      className:
+        clsx(children.props.className, isOpen ? openClass : closedClass) ||
+        void 0,
+      style: Object.assign(
+        {
+          visibility: isOpen ? 'visible' : 'hidden',
+        },
+        defaultStyles,
+        children.props.style,
+        isOpen ? openStyle : closedStyle
+      ),
+      ref,
+    }),
+    portal
+  )
+}
 Dialog.propTypes = {
@@ -133,3 +129,3 @@ portal: _pt.oneOfType([_pt.bool, _pt.oneOf([null]), _pt.string, _pt.any]),
   closedStyle: _pt.any,
-  children: _pt.oneOfType([_pt.element, _pt.element]).isRequired,
+  children: _pt.element.isRequired,
 }
@@ -161,53 +157,58 @@ export const Close = ({children}) => {
 }
-export const Trigger = React.forwardRef(
-  ({openClass, closedClass, openStyle, closedStyle, children}, userRef) => {
-    const {isOpen, id, toggle, triggerRef} = useModal()
-    const ref = useMergedRef(triggerRef, userRef)
-    const seen = useRef(false)
-    const onClick = useCallback(
-      e => {
-        var _children$props$onCli2, _children$props2
+export const Trigger = ({
+  openClass,
+  closedClass,
+  openStyle,
+  closedStyle,
+  children,
+}) => {
+  const {isOpen, id, toggle, triggerRef} = useModal() // @ts-ignore
 
-        toggle()
-        ;(_children$props$onCli2 = (_children$props2 = children.props)
-          .onClick) === null || _children$props$onCli2 === void 0
-          ? void 0
-          : _children$props$onCli2.call(_children$props2, e)
-      },
-      [toggle, children.props.onClick]
-    ) // returns the focus to the opener when the modal box closes if focus is
-    // not an event that triggers opening the modal
+  const ref = useMergedRef(children.ref, triggerRef)
+  const seen = useRef(false)
+  const onClick = useCallback(
+    e => {
+      var _children$props$onCli2, _children$props2
 
-    function _ref4() {
-      var _triggerRef$current
-
-      return (_triggerRef$current = triggerRef.current) === null ||
-        _triggerRef$current === void 0
+      toggle()
+      ;(_children$props$onCli2 = (_children$props2 = children.props)
+        .onClick) === null || _children$props$onCli2 === void 0
         ? void 0
-        : _triggerRef$current.focus()
-    }
+        : _children$props$onCli2.call(_children$props2, e)
+    },
+    [toggle, children.props.onClick]
+  ) // returns the focus to the opener when the modal box closes if focus is
+  // not an event that triggers opening the modal
 
-    useLayoutEffect(() => {
-      if (!isOpen) {
-        if (seen.current) raf(_ref4)
-        seen.current = true
-      }
-    }, [isOpen])
-    return cloneElement(children, {
-      'aria-controls': id,
-      'aria-haspopup': 'dialog',
-      'aria-expanded': String(isOpen),
-      className:
-        clsx(children.props.className, isOpen ? openClass : closedClass) ||
-        void 0,
-      style: Object.assign(
-        {},
-        children.props.style,
-        isOpen ? openStyle : closedStyle
-      ),
-      onClick,
-      ref,
-    })
+  function _ref4() {
+    var _triggerRef$current
+
+    return (_triggerRef$current = triggerRef.current) === null ||
+      _triggerRef$current === void 0
+      ? void 0
+      : _triggerRef$current.focus()
   }
-)
+
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      if (seen.current) raf(_ref4)
+      seen.current = true
+    }
+  }, [isOpen])
+  return cloneElement(children, {
+    'aria-controls': id,
+    'aria-haspopup': 'dialog',
+    'aria-expanded': String(isOpen),
+    className:
+      clsx(children.props.className, isOpen ? openClass : closedClass) ||
+      void 0,
+    style: Object.assign(
+      {},
+      children.props.style,
+      isOpen ? openStyle : closedStyle
+    ),
+    onClick,
+    ref,
+  })
+}
 Trigger.propTypes = {
@@ -214,0 +215,0 @@ openClass: _pt.string,

package.json

 {
   "name": "@accessible/modal",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "homepage": "https://github.com/accessible-ui/modal#readme",
@@ -5,0 +5,0 @@ "repository": "github:accessible-ui/modal",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

42698

decreased by-1.57%

Lines of code

636

decreased by-1.4%

No dependency changes