@chakra-ui/clickable - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

CHANGELOG.md

 # Change Log
 
+## 1.2.1
+
+### Patch Changes
+
+- [#5075](https://github.com/chakra-ui/chakra-ui/pull/5075)
+  [`b28142946`](https://github.com/chakra-ui/chakra-ui/commit/b281429462a099b7fd7f9352e837cd28d1a2da0e)
+  Thanks [@cschroeter](https://github.com/cschroeter)! - Update babel config to
+  transpile soruces for older browsers. This fixes issues with CRA and
+  Storybook.
+- Updated dependencies
+  [[`b28142946`](https://github.com/chakra-ui/chakra-ui/commit/b281429462a099b7fd7f9352e837cd28d1a2da0e)]:
+  - @chakra-ui/react-utils@1.2.1
+  - @chakra-ui/utils@1.9.1
+
 ## 1.2.0
@@ -4,0 +18,0 @@

dist/chakra-ui-clickable.cjs.dev.js

@@ -29,34 +29,69 @@ 'use strict';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function useEventListeners() {
-  const listeners = React__namespace.useRef(new Map());
-  const currentListeners = listeners.current;
-  const add = React__namespace.useCallback((el, type, listener, options) => {
+  var listeners = React__namespace.useRef(new Map());
+  var currentListeners = listeners.current;
+  var add = React__namespace.useCallback(function (el, type, listener, options) {
     listeners.current.set(listener, {
-      type,
-      el,
-      options
+      type: type,
+      el: el,
+      options: options
     });
     el.addEventListener(type, listener, options);
   }, []);
-  const remove = React__namespace.useCallback((el, type, listener, options) => {
+  var remove = React__namespace.useCallback(function (el, type, listener, options) {
     el.removeEventListener(type, listener, options);
-    listeners.current.delete(listener);
+    listeners.current["delete"](listener);
   }, []);
-  React__namespace.useEffect(() => () => {
-    currentListeners.forEach((value, key) => {
-      remove(value.el, value.type, key, value.options);
-    });
+  React__namespace.useEffect(function () {
+    return function () {
+      currentListeners.forEach(function (value, key) {
+        remove(value.el, value.type, key, value.options);
+      });
+    };
   }, [remove, currentListeners]);
   return {
-    add,
-    remove
+    add: add,
+    remove: remove
   };
 }
 
+var _excluded = ["ref", "isDisabled", "isFocusable", "clickOnEnter", "clickOnSpace", "onMouseDown", "onMouseUp", "onClick", "onKeyDown", "onKeyUp", "tabIndex", "onMouseOver", "onMouseLeave"];
+
 function isValidElement(event) {
-  const element = event.target;
-  const {
-    tagName,
-    isContentEditable
-  } = element;
+  var element = event.target;
+  var tagName = element.tagName,
+      isContentEditable = element.isContentEditable;
   return tagName !== "INPUT" && tagName !== "TEXTAREA" && isContentEditable !== true;
@@ -72,19 +107,24 @@ }
 
-function useClickable(props = {}) {
-  const {
-    ref: htmlRef,
-    isDisabled,
-    isFocusable,
-    clickOnEnter = true,
-    clickOnSpace = true,
-    onMouseDown,
-    onMouseUp,
-    onClick,
-    onKeyDown,
-    onKeyUp,
-    tabIndex: tabIndexProp,
-    onMouseOver,
-    onMouseLeave,
-    ...htmlProps
-  } = props;
+function useClickable(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      htmlRef = _props.ref,
+      isDisabled = _props.isDisabled,
+      isFocusable = _props.isFocusable,
+      _props$clickOnEnter = _props.clickOnEnter,
+      clickOnEnter = _props$clickOnEnter === void 0 ? true : _props$clickOnEnter,
+      _props$clickOnSpace = _props.clickOnSpace,
+      clickOnSpace = _props$clickOnSpace === void 0 ? true : _props$clickOnSpace,
+      onMouseDown = _props.onMouseDown,
+      onMouseUp = _props.onMouseUp,
+      onClick = _props.onClick,
+      onKeyDown = _props.onKeyDown,
+      onKeyUp = _props.onKeyUp,
+      tabIndexProp = _props.tabIndex,
+      onMouseOver = _props.onMouseOver,
+      onMouseLeave = _props.onMouseLeave,
+      htmlProps = _objectWithoutPropertiesLoose(_props, _excluded);
   /**
@@ -94,3 +134,6 @@ * We'll use this to track if the element is a button element
 
-  const [isButton, setIsButton] = React__namespace.useState(true);
+
+  var _React$useState = React__namespace.useState(true),
+      isButton = _React$useState[0],
+      setIsButton = _React$useState[1];
   /**
@@ -101,4 +144,8 @@ * For custom button implementation, we'll use this to track when
 
-  const [isPressed, setIsPressed] = React__namespace.useState(false);
-  const listeners = useEventListeners();
+
+  var _React$useState2 = React__namespace.useState(false),
+      isPressed = _React$useState2[0],
+      setIsPressed = _React$useState2[1];
+
+  var listeners = useEventListeners();
   /**
@@ -108,3 +155,3 @@ * The ref callback that fires as soon as the dom node is ready
 
-  const refCallback = node => {
+  var refCallback = function refCallback(node) {
     if (!node) return;
@@ -117,5 +164,5 @@
 
-  const tabIndex = isButton ? tabIndexProp : tabIndexProp || 0;
-  const trulyDisabled = isDisabled && !isFocusable;
-  const handleClick = React__namespace.useCallback(event => {
+  var tabIndex = isButton ? tabIndexProp : tabIndexProp || 0;
+  var trulyDisabled = isDisabled && !isFocusable;
+  var handleClick = React__namespace.useCallback(function (event) {
     if (isDisabled) {
@@ -127,7 +174,7 @@ event.stopPropagation();
 
-    const self = event.currentTarget;
+    var self = event.currentTarget;
     self.focus();
-    onClick?.(event);
+    onClick == null ? void 0 : onClick(event);
   }, [isDisabled, onClick]);
-  const onDocumentKeyUp = React__namespace.useCallback(e => {
+  var onDocumentKeyUp = React__namespace.useCallback(function (e) {
     if (isPressed && isValidElement(e)) {
@@ -141,4 +188,4 @@ e.preventDefault();
   }, [isPressed, listeners]);
-  const handleKeyDown = React__namespace.useCallback(event => {
-    onKeyDown?.(event);
+  var handleKeyDown = React__namespace.useCallback(function (event) {
+    onKeyDown == null ? void 0 : onKeyDown(event);
 
@@ -150,4 +197,4 @@ if (isDisabled || event.defaultPrevented || event.metaKey) {
     if (!isValidElement(event.nativeEvent) || isButton) return;
-    const shouldClickOnEnter = clickOnEnter && event.key === "Enter";
-    const shouldClickOnSpace = clickOnSpace && event.key === " ";
+    var shouldClickOnEnter = clickOnEnter && event.key === "Enter";
+    var shouldClickOnSpace = clickOnSpace && event.key === " ";
 
@@ -161,3 +208,3 @@ if (shouldClickOnSpace) {
       event.preventDefault();
-      const self = event.currentTarget;
+      var self = event.currentTarget;
       self.click();
@@ -168,7 +215,7 @@ }
   }, [isDisabled, isButton, onKeyDown, clickOnEnter, clickOnSpace, listeners, onDocumentKeyUp]);
-  const handleKeyUp = React__namespace.useCallback(event => {
-    onKeyUp?.(event);
+  var handleKeyUp = React__namespace.useCallback(function (event) {
+    onKeyUp == null ? void 0 : onKeyUp(event);
     if (isDisabled || event.defaultPrevented || event.metaKey) return;
     if (!isValidElement(event.nativeEvent) || isButton) return;
-    const shouldClickOnSpace = clickOnSpace && event.key === " ";
+    var shouldClickOnSpace = clickOnSpace && event.key === " ";
 
@@ -178,7 +225,7 @@ if (shouldClickOnSpace) {
       setIsPressed(false);
-      const self = event.currentTarget;
+      var self = event.currentTarget;
       self.click();
     }
   }, [clickOnSpace, isButton, isDisabled, onKeyUp]);
-  const onDocumentMouseUp = React__namespace.useCallback(event => {
+  var onDocumentMouseUp = React__namespace.useCallback(function (event) {
     if (event.button !== 0) return;
@@ -188,3 +235,3 @@ setIsPressed(false);
   }, [listeners]);
-  const handleMouseDown = React__namespace.useCallback(event => {
+  var handleMouseDown = React__namespace.useCallback(function (event) {
     if (utils.isRightClick(event)) return;
@@ -202,3 +249,3 @@
 
-    const target = event.currentTarget;
+    var target = event.currentTarget;
     target.focus({
@@ -208,5 +255,5 @@ preventScroll: true
     listeners.add(document, "mouseup", onDocumentMouseUp, false);
-    onMouseDown?.(event);
+    onMouseDown == null ? void 0 : onMouseDown(event);
   }, [isDisabled, isButton, onMouseDown, listeners, onDocumentMouseUp]);
-  const handleMouseUp = React__namespace.useCallback(event => {
+  var handleMouseUp = React__namespace.useCallback(function (event) {
     if (utils.isRightClick(event)) return;
@@ -218,5 +265,5 @@
 
-    onMouseUp?.(event);
+    onMouseUp == null ? void 0 : onMouseUp(event);
   }, [onMouseUp, isButton]);
-  const handleMouseOver = React__namespace.useCallback(event => {
+  var handleMouseOver = React__namespace.useCallback(function (event) {
     if (isDisabled) {
@@ -227,5 +274,5 @@ event.preventDefault();
 
-    onMouseOver?.(event);
+    onMouseOver == null ? void 0 : onMouseOver(event);
   }, [isDisabled, onMouseOver]);
-  const handleMouseLeave = React__namespace.useCallback(event => {
+  var handleMouseLeave = React__namespace.useCallback(function (event) {
     if (isPressed) {
@@ -236,9 +283,9 @@ event.preventDefault();
 
-    onMouseLeave?.(event);
+    onMouseLeave == null ? void 0 : onMouseLeave(event);
   }, [isPressed, onMouseLeave]);
-  const ref = reactUtils.mergeRefs(htmlRef, refCallback);
+  var ref = reactUtils.mergeRefs(htmlRef, refCallback);
 
   if (isButton) {
-    return { ...htmlProps,
-      ref,
+    return _extends({}, htmlProps, {
+      ref: ref,
       type: "button",
@@ -248,13 +295,13 @@ "aria-disabled": trulyDisabled ? undefined : isDisabled,
       onClick: handleClick,
-      onMouseDown,
-      onMouseUp,
-      onKeyUp,
-      onKeyDown,
-      onMouseOver,
-      onMouseLeave
-    };
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onKeyUp: onKeyUp,
+      onKeyDown: onKeyDown,
+      onMouseOver: onMouseOver,
+      onMouseLeave: onMouseLeave
+    });
   }
 
-  return { ...htmlProps,
-    ref,
+  return _extends({}, htmlProps, {
+    ref: ref,
     role: "button",
@@ -271,5 +318,5 @@ "data-active": utils.dataAttr(isPressed),
     onMouseLeave: handleMouseLeave
-  };
+  });
 }
 
 exports.useClickable = useClickable;

dist/chakra-ui-clickable.cjs.prod.js

@@ -29,34 +29,69 @@ 'use strict';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function useEventListeners() {
-  const listeners = React__namespace.useRef(new Map());
-  const currentListeners = listeners.current;
-  const add = React__namespace.useCallback((el, type, listener, options) => {
+  var listeners = React__namespace.useRef(new Map());
+  var currentListeners = listeners.current;
+  var add = React__namespace.useCallback(function (el, type, listener, options) {
     listeners.current.set(listener, {
-      type,
-      el,
-      options
+      type: type,
+      el: el,
+      options: options
     });
     el.addEventListener(type, listener, options);
   }, []);
-  const remove = React__namespace.useCallback((el, type, listener, options) => {
+  var remove = React__namespace.useCallback(function (el, type, listener, options) {
     el.removeEventListener(type, listener, options);
-    listeners.current.delete(listener);
+    listeners.current["delete"](listener);
   }, []);
-  React__namespace.useEffect(() => () => {
-    currentListeners.forEach((value, key) => {
-      remove(value.el, value.type, key, value.options);
-    });
+  React__namespace.useEffect(function () {
+    return function () {
+      currentListeners.forEach(function (value, key) {
+        remove(value.el, value.type, key, value.options);
+      });
+    };
   }, [remove, currentListeners]);
   return {
-    add,
-    remove
+    add: add,
+    remove: remove
   };
 }
 
+var _excluded = ["ref", "isDisabled", "isFocusable", "clickOnEnter", "clickOnSpace", "onMouseDown", "onMouseUp", "onClick", "onKeyDown", "onKeyUp", "tabIndex", "onMouseOver", "onMouseLeave"];
+
 function isValidElement(event) {
-  const element = event.target;
-  const {
-    tagName,
-    isContentEditable
-  } = element;
+  var element = event.target;
+  var tagName = element.tagName,
+      isContentEditable = element.isContentEditable;
   return tagName !== "INPUT" && tagName !== "TEXTAREA" && isContentEditable !== true;
@@ -72,19 +107,24 @@ }
 
-function useClickable(props = {}) {
-  const {
-    ref: htmlRef,
-    isDisabled,
-    isFocusable,
-    clickOnEnter = true,
-    clickOnSpace = true,
-    onMouseDown,
-    onMouseUp,
-    onClick,
-    onKeyDown,
-    onKeyUp,
-    tabIndex: tabIndexProp,
-    onMouseOver,
-    onMouseLeave,
-    ...htmlProps
-  } = props;
+function useClickable(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      htmlRef = _props.ref,
+      isDisabled = _props.isDisabled,
+      isFocusable = _props.isFocusable,
+      _props$clickOnEnter = _props.clickOnEnter,
+      clickOnEnter = _props$clickOnEnter === void 0 ? true : _props$clickOnEnter,
+      _props$clickOnSpace = _props.clickOnSpace,
+      clickOnSpace = _props$clickOnSpace === void 0 ? true : _props$clickOnSpace,
+      onMouseDown = _props.onMouseDown,
+      onMouseUp = _props.onMouseUp,
+      onClick = _props.onClick,
+      onKeyDown = _props.onKeyDown,
+      onKeyUp = _props.onKeyUp,
+      tabIndexProp = _props.tabIndex,
+      onMouseOver = _props.onMouseOver,
+      onMouseLeave = _props.onMouseLeave,
+      htmlProps = _objectWithoutPropertiesLoose(_props, _excluded);
   /**
@@ -94,3 +134,6 @@ * We'll use this to track if the element is a button element
 
-  const [isButton, setIsButton] = React__namespace.useState(true);
+
+  var _React$useState = React__namespace.useState(true),
+      isButton = _React$useState[0],
+      setIsButton = _React$useState[1];
   /**
@@ -101,4 +144,8 @@ * For custom button implementation, we'll use this to track when
 
-  const [isPressed, setIsPressed] = React__namespace.useState(false);
-  const listeners = useEventListeners();
+
+  var _React$useState2 = React__namespace.useState(false),
+      isPressed = _React$useState2[0],
+      setIsPressed = _React$useState2[1];
+
+  var listeners = useEventListeners();
   /**
@@ -108,3 +155,3 @@ * The ref callback that fires as soon as the dom node is ready
 
-  const refCallback = node => {
+  var refCallback = function refCallback(node) {
     if (!node) return;
@@ -117,5 +164,5 @@
 
-  const tabIndex = isButton ? tabIndexProp : tabIndexProp || 0;
-  const trulyDisabled = isDisabled && !isFocusable;
-  const handleClick = React__namespace.useCallback(event => {
+  var tabIndex = isButton ? tabIndexProp : tabIndexProp || 0;
+  var trulyDisabled = isDisabled && !isFocusable;
+  var handleClick = React__namespace.useCallback(function (event) {
     if (isDisabled) {
@@ -127,7 +174,7 @@ event.stopPropagation();
 
-    const self = event.currentTarget;
+    var self = event.currentTarget;
     self.focus();
-    onClick?.(event);
+    onClick == null ? void 0 : onClick(event);
   }, [isDisabled, onClick]);
-  const onDocumentKeyUp = React__namespace.useCallback(e => {
+  var onDocumentKeyUp = React__namespace.useCallback(function (e) {
     if (isPressed && isValidElement(e)) {
@@ -141,4 +188,4 @@ e.preventDefault();
   }, [isPressed, listeners]);
-  const handleKeyDown = React__namespace.useCallback(event => {
-    onKeyDown?.(event);
+  var handleKeyDown = React__namespace.useCallback(function (event) {
+    onKeyDown == null ? void 0 : onKeyDown(event);
 
@@ -150,4 +197,4 @@ if (isDisabled || event.defaultPrevented || event.metaKey) {
     if (!isValidElement(event.nativeEvent) || isButton) return;
-    const shouldClickOnEnter = clickOnEnter && event.key === "Enter";
-    const shouldClickOnSpace = clickOnSpace && event.key === " ";
+    var shouldClickOnEnter = clickOnEnter && event.key === "Enter";
+    var shouldClickOnSpace = clickOnSpace && event.key === " ";
 
@@ -161,3 +208,3 @@ if (shouldClickOnSpace) {
       event.preventDefault();
-      const self = event.currentTarget;
+      var self = event.currentTarget;
       self.click();
@@ -168,7 +215,7 @@ }
   }, [isDisabled, isButton, onKeyDown, clickOnEnter, clickOnSpace, listeners, onDocumentKeyUp]);
-  const handleKeyUp = React__namespace.useCallback(event => {
-    onKeyUp?.(event);
+  var handleKeyUp = React__namespace.useCallback(function (event) {
+    onKeyUp == null ? void 0 : onKeyUp(event);
     if (isDisabled || event.defaultPrevented || event.metaKey) return;
     if (!isValidElement(event.nativeEvent) || isButton) return;
-    const shouldClickOnSpace = clickOnSpace && event.key === " ";
+    var shouldClickOnSpace = clickOnSpace && event.key === " ";
 
@@ -178,7 +225,7 @@ if (shouldClickOnSpace) {
       setIsPressed(false);
-      const self = event.currentTarget;
+      var self = event.currentTarget;
       self.click();
     }
   }, [clickOnSpace, isButton, isDisabled, onKeyUp]);
-  const onDocumentMouseUp = React__namespace.useCallback(event => {
+  var onDocumentMouseUp = React__namespace.useCallback(function (event) {
     if (event.button !== 0) return;
@@ -188,3 +235,3 @@ setIsPressed(false);
   }, [listeners]);
-  const handleMouseDown = React__namespace.useCallback(event => {
+  var handleMouseDown = React__namespace.useCallback(function (event) {
     if (utils.isRightClick(event)) return;
@@ -202,3 +249,3 @@
 
-    const target = event.currentTarget;
+    var target = event.currentTarget;
     target.focus({
@@ -208,5 +255,5 @@ preventScroll: true
     listeners.add(document, "mouseup", onDocumentMouseUp, false);
-    onMouseDown?.(event);
+    onMouseDown == null ? void 0 : onMouseDown(event);
   }, [isDisabled, isButton, onMouseDown, listeners, onDocumentMouseUp]);
-  const handleMouseUp = React__namespace.useCallback(event => {
+  var handleMouseUp = React__namespace.useCallback(function (event) {
     if (utils.isRightClick(event)) return;
@@ -218,5 +265,5 @@
 
-    onMouseUp?.(event);
+    onMouseUp == null ? void 0 : onMouseUp(event);
   }, [onMouseUp, isButton]);
-  const handleMouseOver = React__namespace.useCallback(event => {
+  var handleMouseOver = React__namespace.useCallback(function (event) {
     if (isDisabled) {
@@ -227,5 +274,5 @@ event.preventDefault();
 
-    onMouseOver?.(event);
+    onMouseOver == null ? void 0 : onMouseOver(event);
   }, [isDisabled, onMouseOver]);
-  const handleMouseLeave = React__namespace.useCallback(event => {
+  var handleMouseLeave = React__namespace.useCallback(function (event) {
     if (isPressed) {
@@ -236,9 +283,9 @@ event.preventDefault();
 
-    onMouseLeave?.(event);
+    onMouseLeave == null ? void 0 : onMouseLeave(event);
   }, [isPressed, onMouseLeave]);
-  const ref = reactUtils.mergeRefs(htmlRef, refCallback);
+  var ref = reactUtils.mergeRefs(htmlRef, refCallback);
 
   if (isButton) {
-    return { ...htmlProps,
-      ref,
+    return _extends({}, htmlProps, {
+      ref: ref,
       type: "button",
@@ -248,13 +295,13 @@ "aria-disabled": trulyDisabled ? undefined : isDisabled,
       onClick: handleClick,
-      onMouseDown,
-      onMouseUp,
-      onKeyUp,
-      onKeyDown,
-      onMouseOver,
-      onMouseLeave
-    };
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onKeyUp: onKeyUp,
+      onKeyDown: onKeyDown,
+      onMouseOver: onMouseOver,
+      onMouseLeave: onMouseLeave
+    });
   }
 
-  return { ...htmlProps,
-    ref,
+  return _extends({}, htmlProps, {
+    ref: ref,
     role: "button",
@@ -271,5 +318,5 @@ "data-active": utils.dataAttr(isPressed),
     onMouseLeave: handleMouseLeave
-  };
+  });
 }
 
 exports.useClickable = useClickable;

dist/chakra-ui-clickable.esm.js

@@ -5,34 +5,69 @@ import { isRightClick, dataAttr } from '@chakra-ui/utils';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function useEventListeners() {
-  const listeners = React.useRef(new Map());
-  const currentListeners = listeners.current;
-  const add = React.useCallback((el, type, listener, options) => {
+  var listeners = React.useRef(new Map());
+  var currentListeners = listeners.current;
+  var add = React.useCallback(function (el, type, listener, options) {
     listeners.current.set(listener, {
-      type,
-      el,
-      options
+      type: type,
+      el: el,
+      options: options
     });
     el.addEventListener(type, listener, options);
   }, []);
-  const remove = React.useCallback((el, type, listener, options) => {
+  var remove = React.useCallback(function (el, type, listener, options) {
     el.removeEventListener(type, listener, options);
-    listeners.current.delete(listener);
+    listeners.current["delete"](listener);
   }, []);
-  React.useEffect(() => () => {
-    currentListeners.forEach((value, key) => {
-      remove(value.el, value.type, key, value.options);
-    });
+  React.useEffect(function () {
+    return function () {
+      currentListeners.forEach(function (value, key) {
+        remove(value.el, value.type, key, value.options);
+      });
+    };
   }, [remove, currentListeners]);
   return {
-    add,
-    remove
+    add: add,
+    remove: remove
   };
 }
 
+var _excluded = ["ref", "isDisabled", "isFocusable", "clickOnEnter", "clickOnSpace", "onMouseDown", "onMouseUp", "onClick", "onKeyDown", "onKeyUp", "tabIndex", "onMouseOver", "onMouseLeave"];
+
 function isValidElement(event) {
-  const element = event.target;
-  const {
-    tagName,
-    isContentEditable
-  } = element;
+  var element = event.target;
+  var tagName = element.tagName,
+      isContentEditable = element.isContentEditable;
   return tagName !== "INPUT" && tagName !== "TEXTAREA" && isContentEditable !== true;
@@ -48,19 +83,24 @@ }
 
-function useClickable(props = {}) {
-  const {
-    ref: htmlRef,
-    isDisabled,
-    isFocusable,
-    clickOnEnter = true,
-    clickOnSpace = true,
-    onMouseDown,
-    onMouseUp,
-    onClick,
-    onKeyDown,
-    onKeyUp,
-    tabIndex: tabIndexProp,
-    onMouseOver,
-    onMouseLeave,
-    ...htmlProps
-  } = props;
+function useClickable(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      htmlRef = _props.ref,
+      isDisabled = _props.isDisabled,
+      isFocusable = _props.isFocusable,
+      _props$clickOnEnter = _props.clickOnEnter,
+      clickOnEnter = _props$clickOnEnter === void 0 ? true : _props$clickOnEnter,
+      _props$clickOnSpace = _props.clickOnSpace,
+      clickOnSpace = _props$clickOnSpace === void 0 ? true : _props$clickOnSpace,
+      onMouseDown = _props.onMouseDown,
+      onMouseUp = _props.onMouseUp,
+      onClick = _props.onClick,
+      onKeyDown = _props.onKeyDown,
+      onKeyUp = _props.onKeyUp,
+      tabIndexProp = _props.tabIndex,
+      onMouseOver = _props.onMouseOver,
+      onMouseLeave = _props.onMouseLeave,
+      htmlProps = _objectWithoutPropertiesLoose(_props, _excluded);
   /**
@@ -70,3 +110,6 @@ * We'll use this to track if the element is a button element
 
-  const [isButton, setIsButton] = React.useState(true);
+
+  var _React$useState = React.useState(true),
+      isButton = _React$useState[0],
+      setIsButton = _React$useState[1];
   /**
@@ -77,4 +120,8 @@ * For custom button implementation, we'll use this to track when
 
-  const [isPressed, setIsPressed] = React.useState(false);
-  const listeners = useEventListeners();
+
+  var _React$useState2 = React.useState(false),
+      isPressed = _React$useState2[0],
+      setIsPressed = _React$useState2[1];
+
+  var listeners = useEventListeners();
   /**
@@ -84,3 +131,3 @@ * The ref callback that fires as soon as the dom node is ready
 
-  const refCallback = node => {
+  var refCallback = function refCallback(node) {
     if (!node) return;
@@ -93,5 +140,5 @@
 
-  const tabIndex = isButton ? tabIndexProp : tabIndexProp || 0;
-  const trulyDisabled = isDisabled && !isFocusable;
-  const handleClick = React.useCallback(event => {
+  var tabIndex = isButton ? tabIndexProp : tabIndexProp || 0;
+  var trulyDisabled = isDisabled && !isFocusable;
+  var handleClick = React.useCallback(function (event) {
     if (isDisabled) {
@@ -103,7 +150,7 @@ event.stopPropagation();
 
-    const self = event.currentTarget;
+    var self = event.currentTarget;
     self.focus();
-    onClick?.(event);
+    onClick == null ? void 0 : onClick(event);
   }, [isDisabled, onClick]);
-  const onDocumentKeyUp = React.useCallback(e => {
+  var onDocumentKeyUp = React.useCallback(function (e) {
     if (isPressed && isValidElement(e)) {
@@ -117,4 +164,4 @@ e.preventDefault();
   }, [isPressed, listeners]);
-  const handleKeyDown = React.useCallback(event => {
-    onKeyDown?.(event);
+  var handleKeyDown = React.useCallback(function (event) {
+    onKeyDown == null ? void 0 : onKeyDown(event);
 
@@ -126,4 +173,4 @@ if (isDisabled || event.defaultPrevented || event.metaKey) {
     if (!isValidElement(event.nativeEvent) || isButton) return;
-    const shouldClickOnEnter = clickOnEnter && event.key === "Enter";
-    const shouldClickOnSpace = clickOnSpace && event.key === " ";
+    var shouldClickOnEnter = clickOnEnter && event.key === "Enter";
+    var shouldClickOnSpace = clickOnSpace && event.key === " ";
 
@@ -137,3 +184,3 @@ if (shouldClickOnSpace) {
       event.preventDefault();
-      const self = event.currentTarget;
+      var self = event.currentTarget;
       self.click();
@@ -144,7 +191,7 @@ }
   }, [isDisabled, isButton, onKeyDown, clickOnEnter, clickOnSpace, listeners, onDocumentKeyUp]);
-  const handleKeyUp = React.useCallback(event => {
-    onKeyUp?.(event);
+  var handleKeyUp = React.useCallback(function (event) {
+    onKeyUp == null ? void 0 : onKeyUp(event);
     if (isDisabled || event.defaultPrevented || event.metaKey) return;
     if (!isValidElement(event.nativeEvent) || isButton) return;
-    const shouldClickOnSpace = clickOnSpace && event.key === " ";
+    var shouldClickOnSpace = clickOnSpace && event.key === " ";
 
@@ -154,7 +201,7 @@ if (shouldClickOnSpace) {
       setIsPressed(false);
-      const self = event.currentTarget;
+      var self = event.currentTarget;
       self.click();
     }
   }, [clickOnSpace, isButton, isDisabled, onKeyUp]);
-  const onDocumentMouseUp = React.useCallback(event => {
+  var onDocumentMouseUp = React.useCallback(function (event) {
     if (event.button !== 0) return;
@@ -164,3 +211,3 @@ setIsPressed(false);
   }, [listeners]);
-  const handleMouseDown = React.useCallback(event => {
+  var handleMouseDown = React.useCallback(function (event) {
     if (isRightClick(event)) return;
@@ -178,3 +225,3 @@
 
-    const target = event.currentTarget;
+    var target = event.currentTarget;
     target.focus({
@@ -184,5 +231,5 @@ preventScroll: true
     listeners.add(document, "mouseup", onDocumentMouseUp, false);
-    onMouseDown?.(event);
+    onMouseDown == null ? void 0 : onMouseDown(event);
   }, [isDisabled, isButton, onMouseDown, listeners, onDocumentMouseUp]);
-  const handleMouseUp = React.useCallback(event => {
+  var handleMouseUp = React.useCallback(function (event) {
     if (isRightClick(event)) return;
@@ -194,5 +241,5 @@
 
-    onMouseUp?.(event);
+    onMouseUp == null ? void 0 : onMouseUp(event);
   }, [onMouseUp, isButton]);
-  const handleMouseOver = React.useCallback(event => {
+  var handleMouseOver = React.useCallback(function (event) {
     if (isDisabled) {
@@ -203,5 +250,5 @@ event.preventDefault();
 
-    onMouseOver?.(event);
+    onMouseOver == null ? void 0 : onMouseOver(event);
   }, [isDisabled, onMouseOver]);
-  const handleMouseLeave = React.useCallback(event => {
+  var handleMouseLeave = React.useCallback(function (event) {
     if (isPressed) {
@@ -212,9 +259,9 @@ event.preventDefault();
 
-    onMouseLeave?.(event);
+    onMouseLeave == null ? void 0 : onMouseLeave(event);
   }, [isPressed, onMouseLeave]);
-  const ref = mergeRefs(htmlRef, refCallback);
+  var ref = mergeRefs(htmlRef, refCallback);
 
   if (isButton) {
-    return { ...htmlProps,
-      ref,
+    return _extends({}, htmlProps, {
+      ref: ref,
       type: "button",
@@ -224,13 +271,13 @@ "aria-disabled": trulyDisabled ? undefined : isDisabled,
       onClick: handleClick,
-      onMouseDown,
-      onMouseUp,
-      onKeyUp,
-      onKeyDown,
-      onMouseOver,
-      onMouseLeave
-    };
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onKeyUp: onKeyUp,
+      onKeyDown: onKeyDown,
+      onMouseOver: onMouseOver,
+      onMouseLeave: onMouseLeave
+    });
   }
 
-  return { ...htmlProps,
-    ref,
+  return _extends({}, htmlProps, {
+    ref: ref,
     role: "button",
@@ -247,5 +294,5 @@ "data-active": dataAttr(isPressed),
     onMouseLeave: handleMouseLeave
-  };
+  });
 }
 
 export { useClickable };

dist/declarations/src/index.d.ts

 export * from "./use-clickable";
+//# sourceMappingURL=index.d.ts.map

dist/declarations/src/use-clickable.d.ts

@@ -552,1 +552,2 @@ import * as React from "react";
 export declare type UseClickableReturn = ReturnType<typeof useClickable>;
+//# sourceMappingURL=use-clickable.d.ts.map

dist/declarations/src/use-event-listeners.d.ts

@@ -9,1 +9,2 @@ interface EventListeners {
 export {};
+//# sourceMappingURL=use-event-listeners.d.ts.map

package.json

 {
   "name": "@chakra-ui/clickable",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React hook and component that implements native button interactions",
@@ -20,3 +20,4 @@ "keywords": [
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
@@ -35,4 +36,4 @@ "publishConfig": {
   "dependencies": {
-    "@chakra-ui/react-utils": "1.2.0",
-    "@chakra-ui/utils": "1.9.0"
+    "@chakra-ui/react-utils": "1.2.1",
+    "@chakra-ui/utils": "1.9.1"
   },
@@ -39,0 +40,0 @@ "peerDependencies": {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

85988

increased by25.72%

Number of package files

17

increased by54.55%

Lines of code

1612

increased by32.24%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@chakra-ui/react-utils@1.2.1(transitive)

• + Added@chakra-ui/utils@1.9.1(transitive)

• - Removed@chakra-ui/react-utils@1.2.0(transitive)

• - Removed@chakra-ui/utils@1.9.0(transitive)

• Updated@chakra-ui/react-utils@1.2.1

• Updated@chakra-ui/utils@1.9.1