@chakra-ui/hooks - npm Package Compare versions

Comparing version 1.7.0 to 1.7.1

CHANGELOG.md

 # Change Log
 
+## 1.7.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.7.0
@@ -4,0 +18,0 @@

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

@@ -37,17 +37,26 @@ 'use strict';
  */
-function useBoolean(initialState = false) {
-  const [value, setValue] = React.useState(initialState);
-  const on = React.useCallback(() => {
+function useBoolean(initialState) {
+  if (initialState === void 0) {
+    initialState = false;
+  }
+
+  var _useState = React.useState(initialState),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var on = React.useCallback(function () {
     setValue(true);
   }, []);
-  const off = React.useCallback(() => {
+  var off = React.useCallback(function () {
     setValue(false);
   }, []);
-  const toggle = React.useCallback(() => {
-    setValue(prev => !prev);
+  var toggle = React.useCallback(function () {
+    setValue(function (prev) {
+      return !prev;
+    });
   }, []);
   return [value, {
-    on,
-    off,
-    toggle
+    on: on,
+    off: off,
+    toggle: toggle
   }];
@@ -67,3 +76,3 @@ }
 
-const useSafeLayoutEffect = utils.isBrowser ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+var useSafeLayoutEffect = utils.isBrowser ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 
@@ -77,11 +86,38 @@ /**
 
-function useCallbackRef(fn, deps = []) {
-  const ref = React__namespace.useRef(fn);
-  useSafeLayoutEffect(() => {
+function useCallbackRef(fn, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  var ref = React__namespace.useRef(fn);
+  useSafeLayoutEffect(function () {
     ref.current = fn;
   }); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  return React__namespace.useCallback((...args) => ref.current?.(...args), deps);
+  return React__namespace.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return ref.current == null ? void 0 : ref.current.apply(ref, args);
+  }, deps);
 }
 
+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;
+}
+
+var _excluded = ["timeout"];
+
 /**
@@ -96,19 +132,27 @@ * React hook to copy content to clipboard
  */
-function useClipboard(text, optionsOrTimeout = {}) {
-  const [hasCopied, setHasCopied] = React.useState(false);
-  const {
-    timeout = 1500,
-    ...copyOptions
-  } = typeof optionsOrTimeout === "number" ? {
+function useClipboard(text, optionsOrTimeout) {
+  if (optionsOrTimeout === void 0) {
+    optionsOrTimeout = {};
+  }
+
+  var _useState = React.useState(false),
+      hasCopied = _useState[0],
+      setHasCopied = _useState[1];
+
+  var _ref = typeof optionsOrTimeout === "number" ? {
     timeout: optionsOrTimeout
-  } : optionsOrTimeout;
-  const onCopy = React.useCallback(() => {
-    const didCopy = copy__default["default"](text, copyOptions);
+  } : optionsOrTimeout,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 1500 : _ref$timeout,
+      copyOptions = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var onCopy = React.useCallback(function () {
+    var didCopy = copy__default["default"](text, copyOptions);
     setHasCopied(didCopy);
   }, [text, copyOptions]);
-  React.useEffect(() => {
-    let timeoutId = null;
+  React.useEffect(function () {
+    var timeoutId = null;
 
     if (hasCopied) {
-      timeoutId = window.setTimeout(() => {
+      timeoutId = window.setTimeout(function () {
         setHasCopied(false);
@@ -118,3 +162,3 @@ }, timeout);
 
-    return () => {
+    return function () {
       if (timeoutId) {
@@ -127,4 +171,4 @@ window.clearTimeout(timeoutId);
     value: text,
-    onCopy,
-    hasCopied
+    onCopy: onCopy,
+    hasCopied: hasCopied
   };
@@ -142,3 +186,3 @@ }
 function useConst(init) {
-  const ref = React.useRef(null);
+  var ref = React.useRef(null);
 
@@ -153,4 +197,4 @@ if (ref.current === null) {
 function useControllableProp(prop, state) {
-  const isControlled = prop !== undefined;
-  const value = isControlled && typeof prop !== "undefined" ? prop : state;
+  var isControlled = prop !== undefined;
+  var value = isControlled && typeof prop !== "undefined" ? prop : state;
   return [isControlled, value];
@@ -164,16 +208,21 @@ }
 function useControllableState(props) {
-  const {
-    value: valueProp,
-    defaultValue,
-    onChange,
-    shouldUpdate = (prev, next) => prev !== next
-  } = props;
-  const onChangeProp = useCallbackRef(onChange);
-  const shouldUpdateProp = useCallbackRef(shouldUpdate);
-  const [valueState, setValue] = React__namespace.useState(defaultValue);
-  const isControlled = valueProp !== undefined;
-  const value = isControlled ? valueProp : valueState;
-  const updateValue = React__namespace.useCallback(next => {
-    const nextValue = utils.runIfFn(next, value);
+  var valueProp = props.value,
+      defaultValue = props.defaultValue,
+      onChange = props.onChange,
+      _props$shouldUpdate = props.shouldUpdate,
+      shouldUpdate = _props$shouldUpdate === void 0 ? function (prev, next) {
+    return prev !== next;
+  } : _props$shouldUpdate;
+  var onChangeProp = useCallbackRef(onChange);
+  var shouldUpdateProp = useCallbackRef(shouldUpdate);
 
+  var _React$useState = React__namespace.useState(defaultValue),
+      valueState = _React$useState[0],
+      setValue = _React$useState[1];
+
+  var isControlled = valueProp !== undefined;
+  var value = isControlled ? valueProp : valueState;
+  var updateValue = React__namespace.useCallback(function (next) {
+    var nextValue = utils.runIfFn(next, value);
+
     if (!shouldUpdateProp(value, nextValue)) {
@@ -200,11 +249,14 @@ return;
 function useDimensions(ref, observe) {
-  const [dimensions, setDimensions] = React__namespace.useState(null);
-  const rafId = React__namespace.useRef();
-  useSafeLayoutEffect(() => {
+  var _React$useState = React__namespace.useState(null),
+      dimensions = _React$useState[0],
+      setDimensions = _React$useState[1];
+
+  var rafId = React__namespace.useRef();
+  useSafeLayoutEffect(function () {
     if (!ref.current) return undefined;
-    const node = ref.current;
+    var node = ref.current;
 
     function measure() {
-      rafId.current = requestAnimationFrame(() => {
-        const boxModel = utils.getBox(node);
+      rafId.current = requestAnimationFrame(function () {
+        var boxModel = utils.getBox(node);
         setDimensions(boxModel);
@@ -221,3 +273,3 @@ });
 
-    return () => {
+    return function () {
       if (observe) {
@@ -236,17 +288,36 @@ window.removeEventListener("resize", measure);
 
+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);
+}
+
 // This implementation is heavily inspired by react-aria's implementation
-const defaultIdContext = {
+var defaultIdContext = {
   prefix: Math.round(Math.random() * 10000000000),
   current: 0
 };
-const IdContext = /*#__PURE__*/React__namespace.createContext(defaultIdContext);
-const IdProvider = /*#__PURE__*/React__namespace.memo(({
-  children
-}) => {
-  const currentContext = React__namespace.useContext(IdContext);
-  const isRoot = currentContext === defaultIdContext;
-  const context = React__namespace.useMemo(() => ({
-    prefix: isRoot ? 0 : ++currentContext.prefix,
-    current: 0
-  }), [isRoot, currentContext]);
+var IdContext = /*#__PURE__*/React__namespace.createContext(defaultIdContext);
+var IdProvider = /*#__PURE__*/React__namespace.memo(function (_ref) {
+  var children = _ref.children;
+  var currentContext = React__namespace.useContext(IdContext);
+  var isRoot = currentContext === defaultIdContext;
+  var context = React__namespace.useMemo(function () {
+    return {
+      prefix: isRoot ? 0 : ++currentContext.prefix,
+      current: 0
+    };
+  }, [isRoot, currentContext]);
   return /*#__PURE__*/React__namespace.createElement(IdContext.Provider, {
@@ -257,4 +328,6 @@ value: context
 function useId(idProp, prefix) {
-  const context = React__namespace.useContext(IdContext);
-  return React__namespace.useMemo(() => idProp || [prefix, context.prefix, ++context.current].filter(Boolean).join("-"), // eslint-disable-next-line react-hooks/exhaustive-deps
+  var context = React__namespace.useContext(IdContext);
+  return React__namespace.useMemo(function () {
+    return idProp || [prefix, context.prefix, ++context.current].filter(Boolean).join("-");
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [idProp, prefix]);
@@ -278,6 +351,12 @@ }
 
-function useIds(idProp, ...prefixes) {
-  const id = useId(idProp);
-  return React__namespace.useMemo(() => {
-    return prefixes.map(prefix => `${prefix}-${id}`);
+function useIds(idProp) {
+  for (var _len = arguments.length, prefixes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    prefixes[_key - 1] = arguments[_key];
+  }
+
+  var id = useId(idProp);
+  return React__namespace.useMemo(function () {
+    return prefixes.map(function (prefix) {
+      return prefix + "-" + id;
+    });
   }, [id, prefixes]);
@@ -296,9 +375,12 @@ }
 function useOptionalPart(partId) {
-  const [id, setId] = React__namespace.useState(null);
-  const ref = React__namespace.useCallback(node => {
+  var _React$useState = React__namespace.useState(null),
+      id = _React$useState[0],
+      setId = _React$useState[1];
+
+  var ref = React__namespace.useCallback(function (node) {
     setId(node ? partId : null);
   }, [partId]);
   return {
-    ref,
-    id,
+    ref: ref,
+    id: id,
     isRendered: Boolean(id)
@@ -308,15 +390,25 @@ };
 
-function useDisclosure(props = {}) {
-  const {
-    onClose: onCloseProp,
-    onOpen: onOpenProp,
-    isOpen: isOpenProp,
-    id: idProp
-  } = props;
-  const onOpenPropCallbackRef = useCallbackRef(onOpenProp);
-  const onClosePropCallbackRef = useCallbackRef(onCloseProp);
-  const [isOpenState, setIsOpen] = React__namespace.useState(props.defaultIsOpen || false);
-  const [isControlled, isOpen] = useControllableProp(isOpenProp, isOpenState);
-  const id = useId(idProp, "disclosure");
-  const onClose = React__namespace.useCallback(() => {
+function useDisclosure(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      onCloseProp = _props.onClose,
+      onOpenProp = _props.onOpen,
+      isOpenProp = _props.isOpen,
+      idProp = _props.id;
+  var onOpenPropCallbackRef = useCallbackRef(onOpenProp);
+  var onClosePropCallbackRef = useCallbackRef(onCloseProp);
+
+  var _React$useState = React__namespace.useState(props.defaultIsOpen || false),
+      isOpenState = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
+  var _useControllableProp = useControllableProp(isOpenProp, isOpenState),
+      isControlled = _useControllableProp[0],
+      isOpen = _useControllableProp[1];
+
+  var id = useId(idProp, "disclosure");
+  var onClose = React__namespace.useCallback(function () {
     if (!isControlled) {
@@ -326,5 +418,5 @@ setIsOpen(false);
 
-    onClosePropCallbackRef?.();
+    onClosePropCallbackRef == null ? void 0 : onClosePropCallbackRef();
   }, [isControlled, onClosePropCallbackRef]);
-  const onOpen = React__namespace.useCallback(() => {
+  var onOpen = React__namespace.useCallback(function () {
     if (!isControlled) {
@@ -334,6 +426,6 @@ setIsOpen(true);
 
-    onOpenPropCallbackRef?.();
+    onOpenPropCallbackRef == null ? void 0 : onOpenPropCallbackRef();
   }, [isControlled, onOpenPropCallbackRef]);
-  const onToggle = React__namespace.useCallback(() => {
-    const action = isOpen ? onClose : onOpen;
+  var onToggle = React__namespace.useCallback(function () {
+    var action = isOpen ? onClose : onOpen;
     action();
@@ -343,15 +435,27 @@ }, [isOpen, onOpen, onClose]);
     isOpen: !!isOpen,
-    onOpen,
-    onClose,
-    onToggle,
-    isControlled,
-    getButtonProps: (props = {}) => ({ ...props,
-      "aria-expanded": "true",
-      "aria-controls": id,
-      onClick: utils.callAllHandlers(props.onClick, onToggle)
-    }),
-    getDisclosureProps: (props = {}) => ({ ...props,
-      hidden: !isOpen,
-      id
-    })
+    onOpen: onOpen,
+    onClose: onClose,
+    onToggle: onToggle,
+    isControlled: isControlled,
+    getButtonProps: function getButtonProps(props) {
+      if (props === void 0) {
+        props = {};
+      }
+
+      return _extends({}, props, {
+        "aria-expanded": "true",
+        "aria-controls": id,
+        onClick: utils.callAllHandlers(props.onClick, onToggle)
+      });
+    },
+    getDisclosureProps: function getDisclosureProps(props) {
+      if (props === void 0) {
+        props = {};
+      }
+
+      return _extends({}, props, {
+        hidden: !isOpen,
+        id: id
+      });
+    }
   };
@@ -370,7 +474,13 @@ }
 function useEventCallback(callback) {
-  const ref = React__namespace.useRef(callback);
-  useSafeLayoutEffect(() => {
+  var ref = React__namespace.useRef(callback);
+  useSafeLayoutEffect(function () {
     ref.current = callback;
   });
-  return React__namespace.useCallback((event, ...args) => ref.current(event, ...args), []);
+  return React__namespace.useCallback(function (event) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    return ref.current.apply(ref, [event].concat(args));
+  }, []);
 }
@@ -389,12 +499,16 @@
 function useEventListener(event, handler, env, options) {
-  const listener = useCallbackRef(handler);
-  React__namespace.useEffect(() => {
-    const node = utils.runIfFn(env) ?? document;
+  var listener = useCallbackRef(handler);
+  React__namespace.useEffect(function () {
+    var _runIfFn;
+
+    var node = (_runIfFn = utils.runIfFn(env)) != null ? _runIfFn : document;
     node.addEventListener(event, listener, options);
-    return () => {
+    return function () {
       node.removeEventListener(event, listener, options);
     };
   }, [event, env, options, listener]);
-  return () => {
-    const node = utils.runIfFn(env) ?? document;
+  return function () {
+    var _runIfFn2;
+
+    var node = (_runIfFn2 = utils.runIfFn(env)) != null ? _runIfFn2 : document;
     node.removeEventListener(event, listener, options);
@@ -405,29 +519,31 @@ };
 function useEventListenerMap() {
-  const listeners = React__namespace.useRef(new Map());
-  const currentListeners = listeners.current;
-  const add = React__namespace.useCallback((el, type, listener, options) => {
-    const pointerEventListener = utils.wrapPointerEventHandler(listener, type === "pointerdown");
+  var listeners = React__namespace.useRef(new Map());
+  var currentListeners = listeners.current;
+  var add = React__namespace.useCallback(function (el, type, listener, options) {
+    var pointerEventListener = utils.wrapPointerEventHandler(listener, type === "pointerdown");
     listeners.current.set(listener, {
       __listener: pointerEventListener,
       type: utils.getPointerEventName(type),
-      el,
-      options
+      el: el,
+      options: options
     });
     el.addEventListener(type, pointerEventListener, options);
   }, []);
-  const remove = React__namespace.useCallback((el, type, listener, options) => {
-    const {
-      __listener: pointerEventListener
-    } = listeners.current.get(listener);
+  var remove = React__namespace.useCallback(function (el, type, listener, options) {
+    var _listeners$current$ge = listeners.current.get(listener),
+        pointerEventListener = _listeners$current$ge.__listener;
+
     el.removeEventListener(type, pointerEventListener, options);
-    listeners.current.delete(pointerEventListener);
+    listeners.current["delete"](pointerEventListener);
   }, []);
-  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
   };
@@ -441,5 +557,5 @@ }
 
-const useUpdateEffect = (effect, deps) => {
-  const mounted = React__namespace.useRef(false);
-  React__namespace.useEffect(() => {
+var useUpdateEffect = function useUpdateEffect(effect, deps) {
+  var mounted = React__namespace.useRef(false);
+  React__namespace.useEffect(function () {
     if (mounted.current) {
@@ -462,8 +578,6 @@ return effect();
 function useFocusEffect(ref, options) {
-  const {
-    shouldFocus,
-    preventScroll
-  } = options;
-  useUpdateEffect(() => {
-    const node = ref.current;
+  var shouldFocus = options.shouldFocus,
+      preventScroll = options.preventScroll;
+  useUpdateEffect(function () {
+    var node = ref.current;
     if (!node || !shouldFocus) return;
@@ -473,3 +587,3 @@
       utils.focus(node, {
-        preventScroll,
+        preventScroll: preventScroll,
         nextTick: true
@@ -482,5 +596,5 @@ });
 function preventReturnFocus(containerRef) {
-  const el = containerRef.current;
+  var el = containerRef.current;
   if (!el) return false;
-  const activeElement = utils.getActiveElement(el);
+  var activeElement = utils.getActiveElement(el);
   if (!activeElement) return false;
@@ -501,9 +615,7 @@ if (utils.contains(el, activeElement)) return false;
 function useFocusOnHide(containerRef, options) {
-  const {
-    shouldFocus: shouldFocusProp,
-    visible,
-    focusRef
-  } = options;
-  const shouldFocus = shouldFocusProp && !visible;
-  useUpdateEffect(() => {
+  var shouldFocusProp = options.shouldFocus,
+      visible = options.visible,
+      focusRef = options.focusRef;
+  var shouldFocus = shouldFocusProp && !visible;
+  useUpdateEffect(function () {
     if (!shouldFocus) return;
@@ -515,3 +627,3 @@
 
-    const el = focusRef?.current || containerRef.current;
+    var el = (focusRef == null ? void 0 : focusRef.current) || containerRef.current;
 
@@ -548,17 +660,17 @@ if (el) {
 function useFocusOnPointerDown(props) {
-  const {
-    ref,
-    elements,
-    enabled
-  } = props;
-  const isSafari = utils.detectBrowser("Safari");
+  var ref = props.ref,
+      elements = props.elements,
+      enabled = props.enabled;
+  var isSafari = utils.detectBrowser("Safari");
 
-  const doc = () => utils.getOwnerDocument(ref.current);
+  var doc = function doc() {
+    return utils.getOwnerDocument(ref.current);
+  };
 
-  usePointerEvent(doc, "pointerdown", event => {
+  usePointerEvent(doc, "pointerdown", function (event) {
     if (!isSafari || !enabled) return;
-    const target = event.target;
-    const els = elements ?? [ref];
-    const isValidTarget = els.some(elementOrRef => {
-      const el = utils.isRefObject(elementOrRef) ? elementOrRef.current : elementOrRef;
+    var target = event.target;
+    var els = elements != null ? elements : [ref];
+    var isValidTarget = els.some(function (elementOrRef) {
+      var el = utils.isRefObject(elementOrRef) ? elementOrRef.current : elementOrRef;
       return utils.contains(el, target);
@@ -574,30 +686,33 @@ });
 
-const defaultOptions = {
+var defaultOptions = {
   preventScroll: true,
   shouldFocus: false
 };
-function useFocusOnShow(target, options = defaultOptions) {
-  const {
-    focusRef,
-    preventScroll,
-    shouldFocus,
-    visible
-  } = options;
-  const element = utils.isRefObject(target) ? target.current : target;
-  const autoFocus = shouldFocus && visible;
-  const onFocus = React.useCallback(() => {
+function useFocusOnShow(target, options) {
+  if (options === void 0) {
+    options = defaultOptions;
+  }
+
+  var _options = options,
+      focusRef = _options.focusRef,
+      preventScroll = _options.preventScroll,
+      shouldFocus = _options.shouldFocus,
+      visible = _options.visible;
+  var element = utils.isRefObject(target) ? target.current : target;
+  var autoFocus = shouldFocus && visible;
+  var onFocus = React.useCallback(function () {
     if (!element || !autoFocus) return;
     if (utils.contains(element, document.activeElement)) return;
 
-    if (focusRef?.current) {
+    if (focusRef != null && focusRef.current) {
       utils.focus(focusRef.current, {
-        preventScroll,
+        preventScroll: preventScroll,
         nextTick: true
       });
     } else {
-      const tabbableEls = utils.getAllFocusable(element);
+      var tabbableEls = utils.getAllFocusable(element);
 
       if (tabbableEls.length > 0) {
         utils.focus(tabbableEls[0], {
-          preventScroll,
+          preventScroll: preventScroll,
           nextTick: true
@@ -608,3 +723,3 @@ });
   }, [autoFocus, preventScroll, element, focusRef]);
-  useUpdateEffect(() => {
+  useUpdateEffect(function () {
     onFocus();
@@ -615,4 +730,12 @@ }, [onFocus]);
 
-function useUnmountEffect(fn, deps = []) {
-  return React__namespace.useEffect(() => () => fn(), // eslint-disable-next-line react-hooks/exhaustive-deps
+function useUnmountEffect(fn, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  return React__namespace.useEffect(function () {
+    return function () {
+      return fn();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
   deps);
@@ -622,8 +745,12 @@ }
 function useForceUpdate() {
-  const unloadingRef = React__namespace.useRef(false);
-  const [count, setCount] = React__namespace.useState(0);
-  useUnmountEffect(() => {
+  var unloadingRef = React__namespace.useRef(false);
+
+  var _React$useState = React__namespace.useState(0),
+      count = _React$useState[0],
+      setCount = _React$useState[1];
+
+  useUnmountEffect(function () {
     unloadingRef.current = true;
   });
-  return React__namespace.useCallback(() => {
+  return React__namespace.useCallback(function () {
     if (!unloadingRef.current) {
@@ -643,7 +770,9 @@ setCount(count + 1);
 function useInterval(callback, delay) {
-  const fn = useCallbackRef(callback);
-  React__namespace.useEffect(() => {
-    let intervalId = null;
+  var fn = useCallbackRef(callback);
+  React__namespace.useEffect(function () {
+    var intervalId = null;
 
-    const tick = () => fn();
+    var tick = function tick() {
+      return fn();
+    };
 
@@ -654,3 +783,3 @@ if (delay !== null) {
 
-    return () => {
+    return function () {
       if (intervalId) {
@@ -671,3 +800,3 @@ window.clearInterval(intervalId);
 function useLatestRef(value) {
-  const ref = React__namespace.useRef(null);
+  var ref = React__namespace.useRef(null);
   ref.current = value;
@@ -690,3 +819,3 @@ return ref;
   } catch (error) {
-    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
+    throw new Error("Cannot assign value '" + value + "' to ref '" + ref + "'");
   }
@@ -707,10 +836,16 @@ }
 
-function useMergeRefs(...refs) {
-  return React__namespace.useMemo(() => {
-    if (refs.every(ref => ref == null)) {
+function useMergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return React__namespace.useMemo(function () {
+    if (refs.every(function (ref) {
+      return ref == null;
+    })) {
       return null;
     }
 
-    return node => {
-      refs.forEach(ref => {
+    return function (node) {
+      refs.forEach(function (ref) {
         if (ref) assignRef(ref, node);
@@ -726,5 +861,9 @@ });
 
-function useMouseDownRef(shouldListen = true) {
-  const mouseDownRef = React__namespace["default"].useRef();
-  useEventListener("mousedown", event => {
+function useMouseDownRef(shouldListen) {
+  if (shouldListen === void 0) {
+    shouldListen = true;
+  }
+
+  var mouseDownRef = React__namespace["default"].useRef();
+  useEventListener("mousedown", function (event) {
     if (shouldListen) {
@@ -742,17 +881,16 @@ mouseDownRef.current = event.target;
 function useOutsideClick(props) {
-  const {
-    ref,
-    handler,
-    enabled = true
-  } = props;
-  const savedHandler = useCallbackRef(handler);
-  const stateRef = React.useRef({
+  var ref = props.ref,
+      handler = props.handler,
+      _props$enabled = props.enabled,
+      enabled = _props$enabled === void 0 ? true : _props$enabled;
+  var savedHandler = useCallbackRef(handler);
+  var stateRef = React.useRef({
     isPointerDown: false,
     ignoreEmulatedMouseEvents: false
   });
-  const state = stateRef.current;
-  React.useEffect(() => {
+  var state = stateRef.current;
+  React.useEffect(function () {
     if (!enabled) return;
 
-    const onPointerDown = e => {
+    var onPointerDown = function onPointerDown(e) {
       if (isValidEvent(e, ref)) {
@@ -763,3 +901,3 @@ state.isPointerDown = true;
 
-    const onMouseUp = event => {
+    var onMouseUp = function onMouseUp(event) {
       if (state.ignoreEmulatedMouseEvents) {
@@ -776,3 +914,3 @@ state.ignoreEmulatedMouseEvents = false;
 
-    const onTouchEnd = event => {
+    var onTouchEnd = function onTouchEnd(event) {
       state.ignoreEmulatedMouseEvents = true;
@@ -786,3 +924,3 @@
 
-    const doc = utils.getOwnerDocument(ref.current);
+    var doc = utils.getOwnerDocument(ref.current);
     doc.addEventListener("mousedown", onPointerDown, true);
@@ -792,3 +930,3 @@ doc.addEventListener("mouseup", onMouseUp, true);
     doc.addEventListener("touchend", onTouchEnd, true);
-    return () => {
+    return function () {
       doc.removeEventListener("mousedown", onPointerDown, true);
@@ -803,25 +941,25 @@ doc.removeEventListener("mouseup", onMouseUp, true);
 function isValidEvent(event, ref) {
-  const target = event.target;
+  var _ref$current;
+
+  var target = event.target;
   if (event.button > 0) return false; // if the event target is no longer in the document
 
   if (target) {
-    const doc = utils.getOwnerDocument(target);
+    var doc = utils.getOwnerDocument(target);
     if (!doc.body.contains(target)) return false;
   }
 
-  return !ref.current?.contains(target);
+  return !((_ref$current = ref.current) != null && _ref$current.contains(target));
 }
 
 function usePanGesture(ref, props) {
-  const {
-    onPan,
-    onPanStart,
-    onPanEnd,
-    onPanSessionStart,
-    onPanSessionEnd,
-    threshold
-  } = props;
-  const hasPanEvents = Boolean(onPan || onPanStart || onPanEnd || onPanSessionStart || onPanSessionEnd);
-  const panSession = React.useRef(null);
-  const handlers = {
+  var onPan = props.onPan,
+      onPanStart = props.onPanStart,
+      onPanEnd = props.onPanEnd,
+      onPanSessionStart = props.onPanSessionStart,
+      onPanSessionEnd = props.onPanSessionEnd,
+      threshold = props.threshold;
+  var hasPanEvents = Boolean(onPan || onPanStart || onPanEnd || onPanSessionStart || onPanSessionEnd);
+  var panSession = React.useRef(null);
+  var handlers = {
     onSessionStart: onPanSessionStart,
@@ -831,11 +969,11 @@ onSessionEnd: onPanSessionEnd,
     onMove: onPan,
-
-    onEnd(event, info) {
+    onEnd: function onEnd(event, info) {
       panSession.current = null;
-      onPanEnd?.(event, info);
+      onPanEnd == null ? void 0 : onPanEnd(event, info);
     }
+  };
+  React.useEffect(function () {
+    var _panSession$current;
 
-  };
-  React.useEffect(() => {
-    panSession.current?.updateHandlers(handlers);
+    (_panSession$current = panSession.current) == null ? void 0 : _panSession$current.updateHandlers(handlers);
   });
@@ -847,5 +985,9 @@
 
-  usePointerEvent(() => ref.current, "pointerdown", hasPanEvents ? onPointerDown : utils.noop);
-  useUnmountEffect(() => {
-    panSession.current?.end();
+  usePointerEvent(function () {
+    return ref.current;
+  }, "pointerdown", hasPanEvents ? onPointerDown : utils.noop);
+  useUnmountEffect(function () {
+    var _panSession$current2;
+
+    (_panSession$current2 = panSession.current) == null ? void 0 : _panSession$current2.end();
     panSession.current = null;
@@ -856,4 +998,4 @@ });
 function usePrevious(value) {
-  const ref = React.useRef();
-  React.useEffect(() => {
+  var ref = React.useRef();
+  React.useEffect(function () {
     ref.current = value;
@@ -870,5 +1012,3 @@ }, [value]);
 function isPrintableCharacter(event) {
-  const {
-    key
-  } = event;
+  var key = event.key;
   return key.length === 1 || key.length > 1 && /[^a-zA-Z0-9]/.test(key);
@@ -881,11 +1021,22 @@ }
  */
-function useShortcut(props = {}) {
-  const {
-    timeout = 300,
-    preventDefault = () => true
-  } = props;
-  const [keys, setKeys] = React__namespace.useState([]);
-  const timeoutRef = React__namespace.useRef();
+function useShortcut(props) {
+  if (props === void 0) {
+    props = {};
+  }
 
-  const flush = () => {
+  var _props = props,
+      _props$timeout = _props.timeout,
+      timeout = _props$timeout === void 0 ? 300 : _props$timeout,
+      _props$preventDefault = _props.preventDefault,
+      preventDefault = _props$preventDefault === void 0 ? function () {
+    return true;
+  } : _props$preventDefault;
+
+  var _React$useState = React__namespace.useState([]),
+      keys = _React$useState[0],
+      setKeys = _React$useState[1];
+
+  var timeoutRef = React__namespace.useRef();
+
+  var flush = function flush() {
     if (timeoutRef.current) {
@@ -897,5 +1048,5 @@ clearTimeout(timeoutRef.current);
 
-  const clearKeysAfterDelay = () => {
+  var clearKeysAfterDelay = function clearKeysAfterDelay() {
     flush();
-    timeoutRef.current = setTimeout(() => {
+    timeoutRef.current = setTimeout(function () {
       setKeys([]);
@@ -906,8 +1057,10 @@ timeoutRef.current = null;
 
-  React__namespace.useEffect(() => flush, []);
+  React__namespace.useEffect(function () {
+    return flush;
+  }, []);
 
   function onKeyDown(fn) {
-    return event => {
+    return function (event) {
       if (event.key === "Backspace") {
-        const keysCopy = [...keys];
+        var keysCopy = [].concat(keys);
         keysCopy.pop();
@@ -919,3 +1072,3 @@ setKeys(keysCopy);
       if (isPrintableCharacter(event)) {
-        const keysCopy = keys.concat(event.key);
+        var _keysCopy = keys.concat(event.key);
 
@@ -927,4 +1080,4 @@ if (preventDefault(event)) {
 
-        setKeys(keysCopy);
-        fn(keysCopy.join(""));
+        setKeys(_keysCopy);
+        fn(_keysCopy.join(""));
         clearKeysAfterDelay();
@@ -946,10 +1099,10 @@ }
 function useTimeout(callback, delay) {
-  const fn = useCallbackRef(callback);
-  React__namespace.useEffect(() => {
+  var fn = useCallbackRef(callback);
+  React__namespace.useEffect(function () {
     if (delay == null) return undefined;
-    let timeoutId = null;
-    timeoutId = window.setTimeout(() => {
+    var timeoutId = null;
+    timeoutId = window.setTimeout(function () {
       fn();
     }, delay);
-    return () => {
+    return function () {
       if (timeoutId) {
@@ -963,10 +1116,8 @@ window.clearTimeout(timeoutId);
 function useWhyDidYouUpdate(name, props) {
-  const previousProps = React__namespace.useRef();
-  React__namespace.useEffect(() => {
+  var previousProps = React__namespace.useRef();
+  React__namespace.useEffect(function () {
     if (previousProps.current) {
-      const allKeys = Object.keys({ ...previousProps.current,
-        ...props
-      });
-      const changesObj = {};
-      allKeys.forEach(key => {
+      var allKeys = Object.keys(_extends({}, previousProps.current, props));
+      var changesObj = {};
+      allKeys.forEach(function (key) {
         if (previousProps.current[key] !== props[key]) {
@@ -973,0 +1124,0 @@ changesObj[key] = {

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

@@ -37,17 +37,26 @@ 'use strict';
  */
-function useBoolean(initialState = false) {
-  const [value, setValue] = React.useState(initialState);
-  const on = React.useCallback(() => {
+function useBoolean(initialState) {
+  if (initialState === void 0) {
+    initialState = false;
+  }
+
+  var _useState = React.useState(initialState),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var on = React.useCallback(function () {
     setValue(true);
   }, []);
-  const off = React.useCallback(() => {
+  var off = React.useCallback(function () {
     setValue(false);
   }, []);
-  const toggle = React.useCallback(() => {
-    setValue(prev => !prev);
+  var toggle = React.useCallback(function () {
+    setValue(function (prev) {
+      return !prev;
+    });
   }, []);
   return [value, {
-    on,
-    off,
-    toggle
+    on: on,
+    off: off,
+    toggle: toggle
   }];
@@ -67,3 +76,3 @@ }
 
-const useSafeLayoutEffect = utils.isBrowser ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+var useSafeLayoutEffect = utils.isBrowser ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 
@@ -77,11 +86,38 @@ /**
 
-function useCallbackRef(fn, deps = []) {
-  const ref = React__namespace.useRef(fn);
-  useSafeLayoutEffect(() => {
+function useCallbackRef(fn, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  var ref = React__namespace.useRef(fn);
+  useSafeLayoutEffect(function () {
     ref.current = fn;
   }); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  return React__namespace.useCallback((...args) => ref.current?.(...args), deps);
+  return React__namespace.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return ref.current == null ? void 0 : ref.current.apply(ref, args);
+  }, deps);
 }
 
+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;
+}
+
+var _excluded = ["timeout"];
+
 /**
@@ -96,19 +132,27 @@ * React hook to copy content to clipboard
  */
-function useClipboard(text, optionsOrTimeout = {}) {
-  const [hasCopied, setHasCopied] = React.useState(false);
-  const {
-    timeout = 1500,
-    ...copyOptions
-  } = typeof optionsOrTimeout === "number" ? {
+function useClipboard(text, optionsOrTimeout) {
+  if (optionsOrTimeout === void 0) {
+    optionsOrTimeout = {};
+  }
+
+  var _useState = React.useState(false),
+      hasCopied = _useState[0],
+      setHasCopied = _useState[1];
+
+  var _ref = typeof optionsOrTimeout === "number" ? {
     timeout: optionsOrTimeout
-  } : optionsOrTimeout;
-  const onCopy = React.useCallback(() => {
-    const didCopy = copy__default["default"](text, copyOptions);
+  } : optionsOrTimeout,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 1500 : _ref$timeout,
+      copyOptions = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var onCopy = React.useCallback(function () {
+    var didCopy = copy__default["default"](text, copyOptions);
     setHasCopied(didCopy);
   }, [text, copyOptions]);
-  React.useEffect(() => {
-    let timeoutId = null;
+  React.useEffect(function () {
+    var timeoutId = null;
 
     if (hasCopied) {
-      timeoutId = window.setTimeout(() => {
+      timeoutId = window.setTimeout(function () {
         setHasCopied(false);
@@ -118,3 +162,3 @@ }, timeout);
 
-    return () => {
+    return function () {
       if (timeoutId) {
@@ -127,4 +171,4 @@ window.clearTimeout(timeoutId);
     value: text,
-    onCopy,
-    hasCopied
+    onCopy: onCopy,
+    hasCopied: hasCopied
   };
@@ -142,3 +186,3 @@ }
 function useConst(init) {
-  const ref = React.useRef(null);
+  var ref = React.useRef(null);
 
@@ -153,4 +197,4 @@ if (ref.current === null) {
 function useControllableProp(prop, state) {
-  const isControlled = prop !== undefined;
-  const value = isControlled && typeof prop !== "undefined" ? prop : state;
+  var isControlled = prop !== undefined;
+  var value = isControlled && typeof prop !== "undefined" ? prop : state;
   return [isControlled, value];
@@ -164,16 +208,21 @@ }
 function useControllableState(props) {
-  const {
-    value: valueProp,
-    defaultValue,
-    onChange,
-    shouldUpdate = (prev, next) => prev !== next
-  } = props;
-  const onChangeProp = useCallbackRef(onChange);
-  const shouldUpdateProp = useCallbackRef(shouldUpdate);
-  const [valueState, setValue] = React__namespace.useState(defaultValue);
-  const isControlled = valueProp !== undefined;
-  const value = isControlled ? valueProp : valueState;
-  const updateValue = React__namespace.useCallback(next => {
-    const nextValue = utils.runIfFn(next, value);
+  var valueProp = props.value,
+      defaultValue = props.defaultValue,
+      onChange = props.onChange,
+      _props$shouldUpdate = props.shouldUpdate,
+      shouldUpdate = _props$shouldUpdate === void 0 ? function (prev, next) {
+    return prev !== next;
+  } : _props$shouldUpdate;
+  var onChangeProp = useCallbackRef(onChange);
+  var shouldUpdateProp = useCallbackRef(shouldUpdate);
 
+  var _React$useState = React__namespace.useState(defaultValue),
+      valueState = _React$useState[0],
+      setValue = _React$useState[1];
+
+  var isControlled = valueProp !== undefined;
+  var value = isControlled ? valueProp : valueState;
+  var updateValue = React__namespace.useCallback(function (next) {
+    var nextValue = utils.runIfFn(next, value);
+
     if (!shouldUpdateProp(value, nextValue)) {
@@ -200,11 +249,14 @@ return;
 function useDimensions(ref, observe) {
-  const [dimensions, setDimensions] = React__namespace.useState(null);
-  const rafId = React__namespace.useRef();
-  useSafeLayoutEffect(() => {
+  var _React$useState = React__namespace.useState(null),
+      dimensions = _React$useState[0],
+      setDimensions = _React$useState[1];
+
+  var rafId = React__namespace.useRef();
+  useSafeLayoutEffect(function () {
     if (!ref.current) return undefined;
-    const node = ref.current;
+    var node = ref.current;
 
     function measure() {
-      rafId.current = requestAnimationFrame(() => {
-        const boxModel = utils.getBox(node);
+      rafId.current = requestAnimationFrame(function () {
+        var boxModel = utils.getBox(node);
         setDimensions(boxModel);
@@ -221,3 +273,3 @@ });
 
-    return () => {
+    return function () {
       if (observe) {
@@ -236,17 +288,36 @@ window.removeEventListener("resize", measure);
 
+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);
+}
+
 // This implementation is heavily inspired by react-aria's implementation
-const defaultIdContext = {
+var defaultIdContext = {
   prefix: Math.round(Math.random() * 10000000000),
   current: 0
 };
-const IdContext = /*#__PURE__*/React__namespace.createContext(defaultIdContext);
-const IdProvider = /*#__PURE__*/React__namespace.memo(({
-  children
-}) => {
-  const currentContext = React__namespace.useContext(IdContext);
-  const isRoot = currentContext === defaultIdContext;
-  const context = React__namespace.useMemo(() => ({
-    prefix: isRoot ? 0 : ++currentContext.prefix,
-    current: 0
-  }), [isRoot, currentContext]);
+var IdContext = /*#__PURE__*/React__namespace.createContext(defaultIdContext);
+var IdProvider = /*#__PURE__*/React__namespace.memo(function (_ref) {
+  var children = _ref.children;
+  var currentContext = React__namespace.useContext(IdContext);
+  var isRoot = currentContext === defaultIdContext;
+  var context = React__namespace.useMemo(function () {
+    return {
+      prefix: isRoot ? 0 : ++currentContext.prefix,
+      current: 0
+    };
+  }, [isRoot, currentContext]);
   return /*#__PURE__*/React__namespace.createElement(IdContext.Provider, {
@@ -257,4 +328,6 @@ value: context
 function useId(idProp, prefix) {
-  const context = React__namespace.useContext(IdContext);
-  return React__namespace.useMemo(() => idProp || [prefix, context.prefix, ++context.current].filter(Boolean).join("-"), // eslint-disable-next-line react-hooks/exhaustive-deps
+  var context = React__namespace.useContext(IdContext);
+  return React__namespace.useMemo(function () {
+    return idProp || [prefix, context.prefix, ++context.current].filter(Boolean).join("-");
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [idProp, prefix]);
@@ -278,6 +351,12 @@ }
 
-function useIds(idProp, ...prefixes) {
-  const id = useId(idProp);
-  return React__namespace.useMemo(() => {
-    return prefixes.map(prefix => `${prefix}-${id}`);
+function useIds(idProp) {
+  for (var _len = arguments.length, prefixes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    prefixes[_key - 1] = arguments[_key];
+  }
+
+  var id = useId(idProp);
+  return React__namespace.useMemo(function () {
+    return prefixes.map(function (prefix) {
+      return prefix + "-" + id;
+    });
   }, [id, prefixes]);
@@ -296,9 +375,12 @@ }
 function useOptionalPart(partId) {
-  const [id, setId] = React__namespace.useState(null);
-  const ref = React__namespace.useCallback(node => {
+  var _React$useState = React__namespace.useState(null),
+      id = _React$useState[0],
+      setId = _React$useState[1];
+
+  var ref = React__namespace.useCallback(function (node) {
     setId(node ? partId : null);
   }, [partId]);
   return {
-    ref,
-    id,
+    ref: ref,
+    id: id,
     isRendered: Boolean(id)
@@ -308,15 +390,25 @@ };
 
-function useDisclosure(props = {}) {
-  const {
-    onClose: onCloseProp,
-    onOpen: onOpenProp,
-    isOpen: isOpenProp,
-    id: idProp
-  } = props;
-  const onOpenPropCallbackRef = useCallbackRef(onOpenProp);
-  const onClosePropCallbackRef = useCallbackRef(onCloseProp);
-  const [isOpenState, setIsOpen] = React__namespace.useState(props.defaultIsOpen || false);
-  const [isControlled, isOpen] = useControllableProp(isOpenProp, isOpenState);
-  const id = useId(idProp, "disclosure");
-  const onClose = React__namespace.useCallback(() => {
+function useDisclosure(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      onCloseProp = _props.onClose,
+      onOpenProp = _props.onOpen,
+      isOpenProp = _props.isOpen,
+      idProp = _props.id;
+  var onOpenPropCallbackRef = useCallbackRef(onOpenProp);
+  var onClosePropCallbackRef = useCallbackRef(onCloseProp);
+
+  var _React$useState = React__namespace.useState(props.defaultIsOpen || false),
+      isOpenState = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
+  var _useControllableProp = useControllableProp(isOpenProp, isOpenState),
+      isControlled = _useControllableProp[0],
+      isOpen = _useControllableProp[1];
+
+  var id = useId(idProp, "disclosure");
+  var onClose = React__namespace.useCallback(function () {
     if (!isControlled) {
@@ -326,5 +418,5 @@ setIsOpen(false);
 
-    onClosePropCallbackRef?.();
+    onClosePropCallbackRef == null ? void 0 : onClosePropCallbackRef();
   }, [isControlled, onClosePropCallbackRef]);
-  const onOpen = React__namespace.useCallback(() => {
+  var onOpen = React__namespace.useCallback(function () {
     if (!isControlled) {
@@ -334,6 +426,6 @@ setIsOpen(true);
 
-    onOpenPropCallbackRef?.();
+    onOpenPropCallbackRef == null ? void 0 : onOpenPropCallbackRef();
   }, [isControlled, onOpenPropCallbackRef]);
-  const onToggle = React__namespace.useCallback(() => {
-    const action = isOpen ? onClose : onOpen;
+  var onToggle = React__namespace.useCallback(function () {
+    var action = isOpen ? onClose : onOpen;
     action();
@@ -343,15 +435,27 @@ }, [isOpen, onOpen, onClose]);
     isOpen: !!isOpen,
-    onOpen,
-    onClose,
-    onToggle,
-    isControlled,
-    getButtonProps: (props = {}) => ({ ...props,
-      "aria-expanded": "true",
-      "aria-controls": id,
-      onClick: utils.callAllHandlers(props.onClick, onToggle)
-    }),
-    getDisclosureProps: (props = {}) => ({ ...props,
-      hidden: !isOpen,
-      id
-    })
+    onOpen: onOpen,
+    onClose: onClose,
+    onToggle: onToggle,
+    isControlled: isControlled,
+    getButtonProps: function getButtonProps(props) {
+      if (props === void 0) {
+        props = {};
+      }
+
+      return _extends({}, props, {
+        "aria-expanded": "true",
+        "aria-controls": id,
+        onClick: utils.callAllHandlers(props.onClick, onToggle)
+      });
+    },
+    getDisclosureProps: function getDisclosureProps(props) {
+      if (props === void 0) {
+        props = {};
+      }
+
+      return _extends({}, props, {
+        hidden: !isOpen,
+        id: id
+      });
+    }
   };
@@ -370,7 +474,13 @@ }
 function useEventCallback(callback) {
-  const ref = React__namespace.useRef(callback);
-  useSafeLayoutEffect(() => {
+  var ref = React__namespace.useRef(callback);
+  useSafeLayoutEffect(function () {
     ref.current = callback;
   });
-  return React__namespace.useCallback((event, ...args) => ref.current(event, ...args), []);
+  return React__namespace.useCallback(function (event) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    return ref.current.apply(ref, [event].concat(args));
+  }, []);
 }
@@ -389,12 +499,16 @@
 function useEventListener(event, handler, env, options) {
-  const listener = useCallbackRef(handler);
-  React__namespace.useEffect(() => {
-    const node = utils.runIfFn(env) ?? document;
+  var listener = useCallbackRef(handler);
+  React__namespace.useEffect(function () {
+    var _runIfFn;
+
+    var node = (_runIfFn = utils.runIfFn(env)) != null ? _runIfFn : document;
     node.addEventListener(event, listener, options);
-    return () => {
+    return function () {
       node.removeEventListener(event, listener, options);
     };
   }, [event, env, options, listener]);
-  return () => {
-    const node = utils.runIfFn(env) ?? document;
+  return function () {
+    var _runIfFn2;
+
+    var node = (_runIfFn2 = utils.runIfFn(env)) != null ? _runIfFn2 : document;
     node.removeEventListener(event, listener, options);
@@ -405,29 +519,31 @@ };
 function useEventListenerMap() {
-  const listeners = React__namespace.useRef(new Map());
-  const currentListeners = listeners.current;
-  const add = React__namespace.useCallback((el, type, listener, options) => {
-    const pointerEventListener = utils.wrapPointerEventHandler(listener, type === "pointerdown");
+  var listeners = React__namespace.useRef(new Map());
+  var currentListeners = listeners.current;
+  var add = React__namespace.useCallback(function (el, type, listener, options) {
+    var pointerEventListener = utils.wrapPointerEventHandler(listener, type === "pointerdown");
     listeners.current.set(listener, {
       __listener: pointerEventListener,
       type: utils.getPointerEventName(type),
-      el,
-      options
+      el: el,
+      options: options
     });
     el.addEventListener(type, pointerEventListener, options);
   }, []);
-  const remove = React__namespace.useCallback((el, type, listener, options) => {
-    const {
-      __listener: pointerEventListener
-    } = listeners.current.get(listener);
+  var remove = React__namespace.useCallback(function (el, type, listener, options) {
+    var _listeners$current$ge = listeners.current.get(listener),
+        pointerEventListener = _listeners$current$ge.__listener;
+
     el.removeEventListener(type, pointerEventListener, options);
-    listeners.current.delete(pointerEventListener);
+    listeners.current["delete"](pointerEventListener);
   }, []);
-  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
   };
@@ -441,5 +557,5 @@ }
 
-const useUpdateEffect = (effect, deps) => {
-  const mounted = React__namespace.useRef(false);
-  React__namespace.useEffect(() => {
+var useUpdateEffect = function useUpdateEffect(effect, deps) {
+  var mounted = React__namespace.useRef(false);
+  React__namespace.useEffect(function () {
     if (mounted.current) {
@@ -462,8 +578,6 @@ return effect();
 function useFocusEffect(ref, options) {
-  const {
-    shouldFocus,
-    preventScroll
-  } = options;
-  useUpdateEffect(() => {
-    const node = ref.current;
+  var shouldFocus = options.shouldFocus,
+      preventScroll = options.preventScroll;
+  useUpdateEffect(function () {
+    var node = ref.current;
     if (!node || !shouldFocus) return;
@@ -473,3 +587,3 @@
       utils.focus(node, {
-        preventScroll,
+        preventScroll: preventScroll,
         nextTick: true
@@ -482,5 +596,5 @@ });
 function preventReturnFocus(containerRef) {
-  const el = containerRef.current;
+  var el = containerRef.current;
   if (!el) return false;
-  const activeElement = utils.getActiveElement(el);
+  var activeElement = utils.getActiveElement(el);
   if (!activeElement) return false;
@@ -501,9 +615,7 @@ if (utils.contains(el, activeElement)) return false;
 function useFocusOnHide(containerRef, options) {
-  const {
-    shouldFocus: shouldFocusProp,
-    visible,
-    focusRef
-  } = options;
-  const shouldFocus = shouldFocusProp && !visible;
-  useUpdateEffect(() => {
+  var shouldFocusProp = options.shouldFocus,
+      visible = options.visible,
+      focusRef = options.focusRef;
+  var shouldFocus = shouldFocusProp && !visible;
+  useUpdateEffect(function () {
     if (!shouldFocus) return;
@@ -515,3 +627,3 @@
 
-    const el = focusRef?.current || containerRef.current;
+    var el = (focusRef == null ? void 0 : focusRef.current) || containerRef.current;
 
@@ -548,17 +660,17 @@ if (el) {
 function useFocusOnPointerDown(props) {
-  const {
-    ref,
-    elements,
-    enabled
-  } = props;
-  const isSafari = utils.detectBrowser("Safari");
+  var ref = props.ref,
+      elements = props.elements,
+      enabled = props.enabled;
+  var isSafari = utils.detectBrowser("Safari");
 
-  const doc = () => utils.getOwnerDocument(ref.current);
+  var doc = function doc() {
+    return utils.getOwnerDocument(ref.current);
+  };
 
-  usePointerEvent(doc, "pointerdown", event => {
+  usePointerEvent(doc, "pointerdown", function (event) {
     if (!isSafari || !enabled) return;
-    const target = event.target;
-    const els = elements ?? [ref];
-    const isValidTarget = els.some(elementOrRef => {
-      const el = utils.isRefObject(elementOrRef) ? elementOrRef.current : elementOrRef;
+    var target = event.target;
+    var els = elements != null ? elements : [ref];
+    var isValidTarget = els.some(function (elementOrRef) {
+      var el = utils.isRefObject(elementOrRef) ? elementOrRef.current : elementOrRef;
       return utils.contains(el, target);
@@ -574,30 +686,33 @@ });
 
-const defaultOptions = {
+var defaultOptions = {
   preventScroll: true,
   shouldFocus: false
 };
-function useFocusOnShow(target, options = defaultOptions) {
-  const {
-    focusRef,
-    preventScroll,
-    shouldFocus,
-    visible
-  } = options;
-  const element = utils.isRefObject(target) ? target.current : target;
-  const autoFocus = shouldFocus && visible;
-  const onFocus = React.useCallback(() => {
+function useFocusOnShow(target, options) {
+  if (options === void 0) {
+    options = defaultOptions;
+  }
+
+  var _options = options,
+      focusRef = _options.focusRef,
+      preventScroll = _options.preventScroll,
+      shouldFocus = _options.shouldFocus,
+      visible = _options.visible;
+  var element = utils.isRefObject(target) ? target.current : target;
+  var autoFocus = shouldFocus && visible;
+  var onFocus = React.useCallback(function () {
     if (!element || !autoFocus) return;
     if (utils.contains(element, document.activeElement)) return;
 
-    if (focusRef?.current) {
+    if (focusRef != null && focusRef.current) {
       utils.focus(focusRef.current, {
-        preventScroll,
+        preventScroll: preventScroll,
         nextTick: true
       });
     } else {
-      const tabbableEls = utils.getAllFocusable(element);
+      var tabbableEls = utils.getAllFocusable(element);
 
       if (tabbableEls.length > 0) {
         utils.focus(tabbableEls[0], {
-          preventScroll,
+          preventScroll: preventScroll,
           nextTick: true
@@ -608,3 +723,3 @@ });
   }, [autoFocus, preventScroll, element, focusRef]);
-  useUpdateEffect(() => {
+  useUpdateEffect(function () {
     onFocus();
@@ -615,4 +730,12 @@ }, [onFocus]);
 
-function useUnmountEffect(fn, deps = []) {
-  return React__namespace.useEffect(() => () => fn(), // eslint-disable-next-line react-hooks/exhaustive-deps
+function useUnmountEffect(fn, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  return React__namespace.useEffect(function () {
+    return function () {
+      return fn();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
   deps);
@@ -622,8 +745,12 @@ }
 function useForceUpdate() {
-  const unloadingRef = React__namespace.useRef(false);
-  const [count, setCount] = React__namespace.useState(0);
-  useUnmountEffect(() => {
+  var unloadingRef = React__namespace.useRef(false);
+
+  var _React$useState = React__namespace.useState(0),
+      count = _React$useState[0],
+      setCount = _React$useState[1];
+
+  useUnmountEffect(function () {
     unloadingRef.current = true;
   });
-  return React__namespace.useCallback(() => {
+  return React__namespace.useCallback(function () {
     if (!unloadingRef.current) {
@@ -643,7 +770,9 @@ setCount(count + 1);
 function useInterval(callback, delay) {
-  const fn = useCallbackRef(callback);
-  React__namespace.useEffect(() => {
-    let intervalId = null;
+  var fn = useCallbackRef(callback);
+  React__namespace.useEffect(function () {
+    var intervalId = null;
 
-    const tick = () => fn();
+    var tick = function tick() {
+      return fn();
+    };
 
@@ -654,3 +783,3 @@ if (delay !== null) {
 
-    return () => {
+    return function () {
       if (intervalId) {
@@ -671,3 +800,3 @@ window.clearInterval(intervalId);
 function useLatestRef(value) {
-  const ref = React__namespace.useRef(null);
+  var ref = React__namespace.useRef(null);
   ref.current = value;
@@ -690,3 +819,3 @@ return ref;
   } catch (error) {
-    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
+    throw new Error("Cannot assign value '" + value + "' to ref '" + ref + "'");
   }
@@ -707,10 +836,16 @@ }
 
-function useMergeRefs(...refs) {
-  return React__namespace.useMemo(() => {
-    if (refs.every(ref => ref == null)) {
+function useMergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return React__namespace.useMemo(function () {
+    if (refs.every(function (ref) {
+      return ref == null;
+    })) {
       return null;
     }
 
-    return node => {
-      refs.forEach(ref => {
+    return function (node) {
+      refs.forEach(function (ref) {
         if (ref) assignRef(ref, node);
@@ -726,5 +861,9 @@ });
 
-function useMouseDownRef(shouldListen = true) {
-  const mouseDownRef = React__namespace["default"].useRef();
-  useEventListener("mousedown", event => {
+function useMouseDownRef(shouldListen) {
+  if (shouldListen === void 0) {
+    shouldListen = true;
+  }
+
+  var mouseDownRef = React__namespace["default"].useRef();
+  useEventListener("mousedown", function (event) {
     if (shouldListen) {
@@ -742,17 +881,16 @@ mouseDownRef.current = event.target;
 function useOutsideClick(props) {
-  const {
-    ref,
-    handler,
-    enabled = true
-  } = props;
-  const savedHandler = useCallbackRef(handler);
-  const stateRef = React.useRef({
+  var ref = props.ref,
+      handler = props.handler,
+      _props$enabled = props.enabled,
+      enabled = _props$enabled === void 0 ? true : _props$enabled;
+  var savedHandler = useCallbackRef(handler);
+  var stateRef = React.useRef({
     isPointerDown: false,
     ignoreEmulatedMouseEvents: false
   });
-  const state = stateRef.current;
-  React.useEffect(() => {
+  var state = stateRef.current;
+  React.useEffect(function () {
     if (!enabled) return;
 
-    const onPointerDown = e => {
+    var onPointerDown = function onPointerDown(e) {
       if (isValidEvent(e, ref)) {
@@ -763,3 +901,3 @@ state.isPointerDown = true;
 
-    const onMouseUp = event => {
+    var onMouseUp = function onMouseUp(event) {
       if (state.ignoreEmulatedMouseEvents) {
@@ -776,3 +914,3 @@ state.ignoreEmulatedMouseEvents = false;
 
-    const onTouchEnd = event => {
+    var onTouchEnd = function onTouchEnd(event) {
       state.ignoreEmulatedMouseEvents = true;
@@ -786,3 +924,3 @@
 
-    const doc = utils.getOwnerDocument(ref.current);
+    var doc = utils.getOwnerDocument(ref.current);
     doc.addEventListener("mousedown", onPointerDown, true);
@@ -792,3 +930,3 @@ doc.addEventListener("mouseup", onMouseUp, true);
     doc.addEventListener("touchend", onTouchEnd, true);
-    return () => {
+    return function () {
       doc.removeEventListener("mousedown", onPointerDown, true);
@@ -803,25 +941,25 @@ doc.removeEventListener("mouseup", onMouseUp, true);
 function isValidEvent(event, ref) {
-  const target = event.target;
+  var _ref$current;
+
+  var target = event.target;
   if (event.button > 0) return false; // if the event target is no longer in the document
 
   if (target) {
-    const doc = utils.getOwnerDocument(target);
+    var doc = utils.getOwnerDocument(target);
     if (!doc.body.contains(target)) return false;
   }
 
-  return !ref.current?.contains(target);
+  return !((_ref$current = ref.current) != null && _ref$current.contains(target));
 }
 
 function usePanGesture(ref, props) {
-  const {
-    onPan,
-    onPanStart,
-    onPanEnd,
-    onPanSessionStart,
-    onPanSessionEnd,
-    threshold
-  } = props;
-  const hasPanEvents = Boolean(onPan || onPanStart || onPanEnd || onPanSessionStart || onPanSessionEnd);
-  const panSession = React.useRef(null);
-  const handlers = {
+  var onPan = props.onPan,
+      onPanStart = props.onPanStart,
+      onPanEnd = props.onPanEnd,
+      onPanSessionStart = props.onPanSessionStart,
+      onPanSessionEnd = props.onPanSessionEnd,
+      threshold = props.threshold;
+  var hasPanEvents = Boolean(onPan || onPanStart || onPanEnd || onPanSessionStart || onPanSessionEnd);
+  var panSession = React.useRef(null);
+  var handlers = {
     onSessionStart: onPanSessionStart,
@@ -831,11 +969,11 @@ onSessionEnd: onPanSessionEnd,
     onMove: onPan,
-
-    onEnd(event, info) {
+    onEnd: function onEnd(event, info) {
       panSession.current = null;
-      onPanEnd?.(event, info);
+      onPanEnd == null ? void 0 : onPanEnd(event, info);
     }
+  };
+  React.useEffect(function () {
+    var _panSession$current;
 
-  };
-  React.useEffect(() => {
-    panSession.current?.updateHandlers(handlers);
+    (_panSession$current = panSession.current) == null ? void 0 : _panSession$current.updateHandlers(handlers);
   });
@@ -847,5 +985,9 @@
 
-  usePointerEvent(() => ref.current, "pointerdown", hasPanEvents ? onPointerDown : utils.noop);
-  useUnmountEffect(() => {
-    panSession.current?.end();
+  usePointerEvent(function () {
+    return ref.current;
+  }, "pointerdown", hasPanEvents ? onPointerDown : utils.noop);
+  useUnmountEffect(function () {
+    var _panSession$current2;
+
+    (_panSession$current2 = panSession.current) == null ? void 0 : _panSession$current2.end();
     panSession.current = null;
@@ -856,4 +998,4 @@ });
 function usePrevious(value) {
-  const ref = React.useRef();
-  React.useEffect(() => {
+  var ref = React.useRef();
+  React.useEffect(function () {
     ref.current = value;
@@ -870,5 +1012,3 @@ }, [value]);
 function isPrintableCharacter(event) {
-  const {
-    key
-  } = event;
+  var key = event.key;
   return key.length === 1 || key.length > 1 && /[^a-zA-Z0-9]/.test(key);
@@ -881,11 +1021,22 @@ }
  */
-function useShortcut(props = {}) {
-  const {
-    timeout = 300,
-    preventDefault = () => true
-  } = props;
-  const [keys, setKeys] = React__namespace.useState([]);
-  const timeoutRef = React__namespace.useRef();
+function useShortcut(props) {
+  if (props === void 0) {
+    props = {};
+  }
 
-  const flush = () => {
+  var _props = props,
+      _props$timeout = _props.timeout,
+      timeout = _props$timeout === void 0 ? 300 : _props$timeout,
+      _props$preventDefault = _props.preventDefault,
+      preventDefault = _props$preventDefault === void 0 ? function () {
+    return true;
+  } : _props$preventDefault;
+
+  var _React$useState = React__namespace.useState([]),
+      keys = _React$useState[0],
+      setKeys = _React$useState[1];
+
+  var timeoutRef = React__namespace.useRef();
+
+  var flush = function flush() {
     if (timeoutRef.current) {
@@ -897,5 +1048,5 @@ clearTimeout(timeoutRef.current);
 
-  const clearKeysAfterDelay = () => {
+  var clearKeysAfterDelay = function clearKeysAfterDelay() {
     flush();
-    timeoutRef.current = setTimeout(() => {
+    timeoutRef.current = setTimeout(function () {
       setKeys([]);
@@ -906,8 +1057,10 @@ timeoutRef.current = null;
 
-  React__namespace.useEffect(() => flush, []);
+  React__namespace.useEffect(function () {
+    return flush;
+  }, []);
 
   function onKeyDown(fn) {
-    return event => {
+    return function (event) {
       if (event.key === "Backspace") {
-        const keysCopy = [...keys];
+        var keysCopy = [].concat(keys);
         keysCopy.pop();
@@ -919,3 +1072,3 @@ setKeys(keysCopy);
       if (isPrintableCharacter(event)) {
-        const keysCopy = keys.concat(event.key);
+        var _keysCopy = keys.concat(event.key);
 
@@ -927,4 +1080,4 @@ if (preventDefault(event)) {
 
-        setKeys(keysCopy);
-        fn(keysCopy.join(""));
+        setKeys(_keysCopy);
+        fn(_keysCopy.join(""));
         clearKeysAfterDelay();
@@ -946,10 +1099,10 @@ }
 function useTimeout(callback, delay) {
-  const fn = useCallbackRef(callback);
-  React__namespace.useEffect(() => {
+  var fn = useCallbackRef(callback);
+  React__namespace.useEffect(function () {
     if (delay == null) return undefined;
-    let timeoutId = null;
-    timeoutId = window.setTimeout(() => {
+    var timeoutId = null;
+    timeoutId = window.setTimeout(function () {
       fn();
     }, delay);
-    return () => {
+    return function () {
       if (timeoutId) {
@@ -963,10 +1116,8 @@ window.clearTimeout(timeoutId);
 function useWhyDidYouUpdate(name, props) {
-  const previousProps = React__namespace.useRef();
-  React__namespace.useEffect(() => {
+  var previousProps = React__namespace.useRef();
+  React__namespace.useEffect(function () {
     if (previousProps.current) {
-      const allKeys = Object.keys({ ...previousProps.current,
-        ...props
-      });
-      const changesObj = {};
-      allKeys.forEach(key => {
+      var allKeys = Object.keys(_extends({}, previousProps.current, props));
+      var changesObj = {};
+      allKeys.forEach(function (key) {
         if (previousProps.current[key] !== props[key]) {
@@ -973,0 +1124,0 @@ changesObj[key] = {

dist/chakra-ui-hooks.esm.js

@@ -11,17 +11,26 @@ import * as React from 'react';
  */
-function useBoolean(initialState = false) {
-  const [value, setValue] = useState(initialState);
-  const on = useCallback(() => {
+function useBoolean(initialState) {
+  if (initialState === void 0) {
+    initialState = false;
+  }
+
+  var _useState = useState(initialState),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var on = useCallback(function () {
     setValue(true);
   }, []);
-  const off = useCallback(() => {
+  var off = useCallback(function () {
     setValue(false);
   }, []);
-  const toggle = useCallback(() => {
-    setValue(prev => !prev);
+  var toggle = useCallback(function () {
+    setValue(function (prev) {
+      return !prev;
+    });
   }, []);
   return [value, {
-    on,
-    off,
-    toggle
+    on: on,
+    off: off,
+    toggle: toggle
   }];
@@ -41,3 +50,3 @@ }
 
-const useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
+var useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
@@ -51,11 +60,38 @@ /**
 
-function useCallbackRef(fn, deps = []) {
-  const ref = React.useRef(fn);
-  useSafeLayoutEffect(() => {
+function useCallbackRef(fn, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  var ref = React.useRef(fn);
+  useSafeLayoutEffect(function () {
     ref.current = fn;
   }); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  return React.useCallback((...args) => ref.current?.(...args), deps);
+  return React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return ref.current == null ? void 0 : ref.current.apply(ref, args);
+  }, deps);
 }
 
+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;
+}
+
+var _excluded = ["timeout"];
+
 /**
@@ -70,19 +106,27 @@ * React hook to copy content to clipboard
  */
-function useClipboard(text, optionsOrTimeout = {}) {
-  const [hasCopied, setHasCopied] = useState(false);
-  const {
-    timeout = 1500,
-    ...copyOptions
-  } = typeof optionsOrTimeout === "number" ? {
+function useClipboard(text, optionsOrTimeout) {
+  if (optionsOrTimeout === void 0) {
+    optionsOrTimeout = {};
+  }
+
+  var _useState = useState(false),
+      hasCopied = _useState[0],
+      setHasCopied = _useState[1];
+
+  var _ref = typeof optionsOrTimeout === "number" ? {
     timeout: optionsOrTimeout
-  } : optionsOrTimeout;
-  const onCopy = useCallback(() => {
-    const didCopy = copy(text, copyOptions);
+  } : optionsOrTimeout,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 1500 : _ref$timeout,
+      copyOptions = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var onCopy = useCallback(function () {
+    var didCopy = copy(text, copyOptions);
     setHasCopied(didCopy);
   }, [text, copyOptions]);
-  useEffect(() => {
-    let timeoutId = null;
+  useEffect(function () {
+    var timeoutId = null;
 
     if (hasCopied) {
-      timeoutId = window.setTimeout(() => {
+      timeoutId = window.setTimeout(function () {
         setHasCopied(false);
@@ -92,3 +136,3 @@ }, timeout);
 
-    return () => {
+    return function () {
       if (timeoutId) {
@@ -101,4 +145,4 @@ window.clearTimeout(timeoutId);
     value: text,
-    onCopy,
-    hasCopied
+    onCopy: onCopy,
+    hasCopied: hasCopied
   };
@@ -116,3 +160,3 @@ }
 function useConst(init) {
-  const ref = useRef(null);
+  var ref = useRef(null);
 
@@ -127,4 +171,4 @@ if (ref.current === null) {
 function useControllableProp(prop, state) {
-  const isControlled = prop !== undefined;
-  const value = isControlled && typeof prop !== "undefined" ? prop : state;
+  var isControlled = prop !== undefined;
+  var value = isControlled && typeof prop !== "undefined" ? prop : state;
   return [isControlled, value];
@@ -138,16 +182,21 @@ }
 function useControllableState(props) {
-  const {
-    value: valueProp,
-    defaultValue,
-    onChange,
-    shouldUpdate = (prev, next) => prev !== next
-  } = props;
-  const onChangeProp = useCallbackRef(onChange);
-  const shouldUpdateProp = useCallbackRef(shouldUpdate);
-  const [valueState, setValue] = React.useState(defaultValue);
-  const isControlled = valueProp !== undefined;
-  const value = isControlled ? valueProp : valueState;
-  const updateValue = React.useCallback(next => {
-    const nextValue = runIfFn(next, value);
+  var valueProp = props.value,
+      defaultValue = props.defaultValue,
+      onChange = props.onChange,
+      _props$shouldUpdate = props.shouldUpdate,
+      shouldUpdate = _props$shouldUpdate === void 0 ? function (prev, next) {
+    return prev !== next;
+  } : _props$shouldUpdate;
+  var onChangeProp = useCallbackRef(onChange);
+  var shouldUpdateProp = useCallbackRef(shouldUpdate);
 
+  var _React$useState = React.useState(defaultValue),
+      valueState = _React$useState[0],
+      setValue = _React$useState[1];
+
+  var isControlled = valueProp !== undefined;
+  var value = isControlled ? valueProp : valueState;
+  var updateValue = React.useCallback(function (next) {
+    var nextValue = runIfFn(next, value);
+
     if (!shouldUpdateProp(value, nextValue)) {
@@ -174,11 +223,14 @@ return;
 function useDimensions(ref, observe) {
-  const [dimensions, setDimensions] = React.useState(null);
-  const rafId = React.useRef();
-  useSafeLayoutEffect(() => {
+  var _React$useState = React.useState(null),
+      dimensions = _React$useState[0],
+      setDimensions = _React$useState[1];
+
+  var rafId = React.useRef();
+  useSafeLayoutEffect(function () {
     if (!ref.current) return undefined;
-    const node = ref.current;
+    var node = ref.current;
 
     function measure() {
-      rafId.current = requestAnimationFrame(() => {
-        const boxModel = getBox(node);
+      rafId.current = requestAnimationFrame(function () {
+        var boxModel = getBox(node);
         setDimensions(boxModel);
@@ -195,3 +247,3 @@ });
 
-    return () => {
+    return function () {
       if (observe) {
@@ -210,17 +262,36 @@ window.removeEventListener("resize", measure);
 
+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);
+}
+
 // This implementation is heavily inspired by react-aria's implementation
-const defaultIdContext = {
+var defaultIdContext = {
   prefix: Math.round(Math.random() * 10000000000),
   current: 0
 };
-const IdContext = /*#__PURE__*/React.createContext(defaultIdContext);
-const IdProvider = /*#__PURE__*/React.memo(({
-  children
-}) => {
-  const currentContext = React.useContext(IdContext);
-  const isRoot = currentContext === defaultIdContext;
-  const context = React.useMemo(() => ({
-    prefix: isRoot ? 0 : ++currentContext.prefix,
-    current: 0
-  }), [isRoot, currentContext]);
+var IdContext = /*#__PURE__*/React.createContext(defaultIdContext);
+var IdProvider = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children;
+  var currentContext = React.useContext(IdContext);
+  var isRoot = currentContext === defaultIdContext;
+  var context = React.useMemo(function () {
+    return {
+      prefix: isRoot ? 0 : ++currentContext.prefix,
+      current: 0
+    };
+  }, [isRoot, currentContext]);
   return /*#__PURE__*/React.createElement(IdContext.Provider, {
@@ -231,4 +302,6 @@ value: context
 function useId(idProp, prefix) {
-  const context = React.useContext(IdContext);
-  return React.useMemo(() => idProp || [prefix, context.prefix, ++context.current].filter(Boolean).join("-"), // eslint-disable-next-line react-hooks/exhaustive-deps
+  var context = React.useContext(IdContext);
+  return React.useMemo(function () {
+    return idProp || [prefix, context.prefix, ++context.current].filter(Boolean).join("-");
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [idProp, prefix]);
@@ -252,6 +325,12 @@ }
 
-function useIds(idProp, ...prefixes) {
-  const id = useId(idProp);
-  return React.useMemo(() => {
-    return prefixes.map(prefix => `${prefix}-${id}`);
+function useIds(idProp) {
+  for (var _len = arguments.length, prefixes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    prefixes[_key - 1] = arguments[_key];
+  }
+
+  var id = useId(idProp);
+  return React.useMemo(function () {
+    return prefixes.map(function (prefix) {
+      return prefix + "-" + id;
+    });
   }, [id, prefixes]);
@@ -270,9 +349,12 @@ }
 function useOptionalPart(partId) {
-  const [id, setId] = React.useState(null);
-  const ref = React.useCallback(node => {
+  var _React$useState = React.useState(null),
+      id = _React$useState[0],
+      setId = _React$useState[1];
+
+  var ref = React.useCallback(function (node) {
     setId(node ? partId : null);
   }, [partId]);
   return {
-    ref,
-    id,
+    ref: ref,
+    id: id,
     isRendered: Boolean(id)
@@ -282,15 +364,25 @@ };
 
-function useDisclosure(props = {}) {
-  const {
-    onClose: onCloseProp,
-    onOpen: onOpenProp,
-    isOpen: isOpenProp,
-    id: idProp
-  } = props;
-  const onOpenPropCallbackRef = useCallbackRef(onOpenProp);
-  const onClosePropCallbackRef = useCallbackRef(onCloseProp);
-  const [isOpenState, setIsOpen] = React.useState(props.defaultIsOpen || false);
-  const [isControlled, isOpen] = useControllableProp(isOpenProp, isOpenState);
-  const id = useId(idProp, "disclosure");
-  const onClose = React.useCallback(() => {
+function useDisclosure(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      onCloseProp = _props.onClose,
+      onOpenProp = _props.onOpen,
+      isOpenProp = _props.isOpen,
+      idProp = _props.id;
+  var onOpenPropCallbackRef = useCallbackRef(onOpenProp);
+  var onClosePropCallbackRef = useCallbackRef(onCloseProp);
+
+  var _React$useState = React.useState(props.defaultIsOpen || false),
+      isOpenState = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
+  var _useControllableProp = useControllableProp(isOpenProp, isOpenState),
+      isControlled = _useControllableProp[0],
+      isOpen = _useControllableProp[1];
+
+  var id = useId(idProp, "disclosure");
+  var onClose = React.useCallback(function () {
     if (!isControlled) {
@@ -300,5 +392,5 @@ setIsOpen(false);
 
-    onClosePropCallbackRef?.();
+    onClosePropCallbackRef == null ? void 0 : onClosePropCallbackRef();
   }, [isControlled, onClosePropCallbackRef]);
-  const onOpen = React.useCallback(() => {
+  var onOpen = React.useCallback(function () {
     if (!isControlled) {
@@ -308,6 +400,6 @@ setIsOpen(true);
 
-    onOpenPropCallbackRef?.();
+    onOpenPropCallbackRef == null ? void 0 : onOpenPropCallbackRef();
   }, [isControlled, onOpenPropCallbackRef]);
-  const onToggle = React.useCallback(() => {
-    const action = isOpen ? onClose : onOpen;
+  var onToggle = React.useCallback(function () {
+    var action = isOpen ? onClose : onOpen;
     action();
@@ -317,15 +409,27 @@ }, [isOpen, onOpen, onClose]);
     isOpen: !!isOpen,
-    onOpen,
-    onClose,
-    onToggle,
-    isControlled,
-    getButtonProps: (props = {}) => ({ ...props,
-      "aria-expanded": "true",
-      "aria-controls": id,
-      onClick: callAllHandlers(props.onClick, onToggle)
-    }),
-    getDisclosureProps: (props = {}) => ({ ...props,
-      hidden: !isOpen,
-      id
-    })
+    onOpen: onOpen,
+    onClose: onClose,
+    onToggle: onToggle,
+    isControlled: isControlled,
+    getButtonProps: function getButtonProps(props) {
+      if (props === void 0) {
+        props = {};
+      }
+
+      return _extends({}, props, {
+        "aria-expanded": "true",
+        "aria-controls": id,
+        onClick: callAllHandlers(props.onClick, onToggle)
+      });
+    },
+    getDisclosureProps: function getDisclosureProps(props) {
+      if (props === void 0) {
+        props = {};
+      }
+
+      return _extends({}, props, {
+        hidden: !isOpen,
+        id: id
+      });
+    }
   };
@@ -344,7 +448,13 @@ }
 function useEventCallback(callback) {
-  const ref = React.useRef(callback);
-  useSafeLayoutEffect(() => {
+  var ref = React.useRef(callback);
+  useSafeLayoutEffect(function () {
     ref.current = callback;
   });
-  return React.useCallback((event, ...args) => ref.current(event, ...args), []);
+  return React.useCallback(function (event) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    return ref.current.apply(ref, [event].concat(args));
+  }, []);
 }
@@ -363,12 +473,16 @@
 function useEventListener(event, handler, env, options) {
-  const listener = useCallbackRef(handler);
-  React.useEffect(() => {
-    const node = runIfFn(env) ?? document;
+  var listener = useCallbackRef(handler);
+  React.useEffect(function () {
+    var _runIfFn;
+
+    var node = (_runIfFn = runIfFn(env)) != null ? _runIfFn : document;
     node.addEventListener(event, listener, options);
-    return () => {
+    return function () {
       node.removeEventListener(event, listener, options);
     };
   }, [event, env, options, listener]);
-  return () => {
-    const node = runIfFn(env) ?? document;
+  return function () {
+    var _runIfFn2;
+
+    var node = (_runIfFn2 = runIfFn(env)) != null ? _runIfFn2 : document;
     node.removeEventListener(event, listener, options);
@@ -379,29 +493,31 @@ };
 function useEventListenerMap() {
-  const listeners = React.useRef(new Map());
-  const currentListeners = listeners.current;
-  const add = React.useCallback((el, type, listener, options) => {
-    const pointerEventListener = wrapPointerEventHandler(listener, type === "pointerdown");
+  var listeners = React.useRef(new Map());
+  var currentListeners = listeners.current;
+  var add = React.useCallback(function (el, type, listener, options) {
+    var pointerEventListener = wrapPointerEventHandler(listener, type === "pointerdown");
     listeners.current.set(listener, {
       __listener: pointerEventListener,
       type: getPointerEventName(type),
-      el,
-      options
+      el: el,
+      options: options
     });
     el.addEventListener(type, pointerEventListener, options);
   }, []);
-  const remove = React.useCallback((el, type, listener, options) => {
-    const {
-      __listener: pointerEventListener
-    } = listeners.current.get(listener);
+  var remove = React.useCallback(function (el, type, listener, options) {
+    var _listeners$current$ge = listeners.current.get(listener),
+        pointerEventListener = _listeners$current$ge.__listener;
+
     el.removeEventListener(type, pointerEventListener, options);
-    listeners.current.delete(pointerEventListener);
+    listeners.current["delete"](pointerEventListener);
   }, []);
-  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
   };
@@ -415,5 +531,5 @@ }
 
-const useUpdateEffect = (effect, deps) => {
-  const mounted = React.useRef(false);
-  React.useEffect(() => {
+var useUpdateEffect = function useUpdateEffect(effect, deps) {
+  var mounted = React.useRef(false);
+  React.useEffect(function () {
     if (mounted.current) {
@@ -436,8 +552,6 @@ return effect();
 function useFocusEffect(ref, options) {
-  const {
-    shouldFocus,
-    preventScroll
-  } = options;
-  useUpdateEffect(() => {
-    const node = ref.current;
+  var shouldFocus = options.shouldFocus,
+      preventScroll = options.preventScroll;
+  useUpdateEffect(function () {
+    var node = ref.current;
     if (!node || !shouldFocus) return;
@@ -447,3 +561,3 @@
       focus(node, {
-        preventScroll,
+        preventScroll: preventScroll,
         nextTick: true
@@ -456,5 +570,5 @@ });
 function preventReturnFocus(containerRef) {
-  const el = containerRef.current;
+  var el = containerRef.current;
   if (!el) return false;
-  const activeElement = getActiveElement(el);
+  var activeElement = getActiveElement(el);
   if (!activeElement) return false;
@@ -475,9 +589,7 @@ if (contains(el, activeElement)) return false;
 function useFocusOnHide(containerRef, options) {
-  const {
-    shouldFocus: shouldFocusProp,
-    visible,
-    focusRef
-  } = options;
-  const shouldFocus = shouldFocusProp && !visible;
-  useUpdateEffect(() => {
+  var shouldFocusProp = options.shouldFocus,
+      visible = options.visible,
+      focusRef = options.focusRef;
+  var shouldFocus = shouldFocusProp && !visible;
+  useUpdateEffect(function () {
     if (!shouldFocus) return;
@@ -489,3 +601,3 @@
 
-    const el = focusRef?.current || containerRef.current;
+    var el = (focusRef == null ? void 0 : focusRef.current) || containerRef.current;
 
@@ -522,17 +634,17 @@ if (el) {
 function useFocusOnPointerDown(props) {
-  const {
-    ref,
-    elements,
-    enabled
-  } = props;
-  const isSafari = detectBrowser("Safari");
+  var ref = props.ref,
+      elements = props.elements,
+      enabled = props.enabled;
+  var isSafari = detectBrowser("Safari");
 
-  const doc = () => getOwnerDocument(ref.current);
+  var doc = function doc() {
+    return getOwnerDocument(ref.current);
+  };
 
-  usePointerEvent(doc, "pointerdown", event => {
+  usePointerEvent(doc, "pointerdown", function (event) {
     if (!isSafari || !enabled) return;
-    const target = event.target;
-    const els = elements ?? [ref];
-    const isValidTarget = els.some(elementOrRef => {
-      const el = isRefObject(elementOrRef) ? elementOrRef.current : elementOrRef;
+    var target = event.target;
+    var els = elements != null ? elements : [ref];
+    var isValidTarget = els.some(function (elementOrRef) {
+      var el = isRefObject(elementOrRef) ? elementOrRef.current : elementOrRef;
       return contains(el, target);
@@ -548,30 +660,33 @@ });
 
-const defaultOptions = {
+var defaultOptions = {
   preventScroll: true,
   shouldFocus: false
 };
-function useFocusOnShow(target, options = defaultOptions) {
-  const {
-    focusRef,
-    preventScroll,
-    shouldFocus,
-    visible
-  } = options;
-  const element = isRefObject(target) ? target.current : target;
-  const autoFocus = shouldFocus && visible;
-  const onFocus = useCallback(() => {
+function useFocusOnShow(target, options) {
+  if (options === void 0) {
+    options = defaultOptions;
+  }
+
+  var _options = options,
+      focusRef = _options.focusRef,
+      preventScroll = _options.preventScroll,
+      shouldFocus = _options.shouldFocus,
+      visible = _options.visible;
+  var element = isRefObject(target) ? target.current : target;
+  var autoFocus = shouldFocus && visible;
+  var onFocus = useCallback(function () {
     if (!element || !autoFocus) return;
     if (contains(element, document.activeElement)) return;
 
-    if (focusRef?.current) {
+    if (focusRef != null && focusRef.current) {
       focus(focusRef.current, {
-        preventScroll,
+        preventScroll: preventScroll,
         nextTick: true
       });
     } else {
-      const tabbableEls = getAllFocusable(element);
+      var tabbableEls = getAllFocusable(element);
 
       if (tabbableEls.length > 0) {
         focus(tabbableEls[0], {
-          preventScroll,
+          preventScroll: preventScroll,
           nextTick: true
@@ -582,3 +697,3 @@ });
   }, [autoFocus, preventScroll, element, focusRef]);
-  useUpdateEffect(() => {
+  useUpdateEffect(function () {
     onFocus();
@@ -589,4 +704,12 @@ }, [onFocus]);
 
-function useUnmountEffect(fn, deps = []) {
-  return React.useEffect(() => () => fn(), // eslint-disable-next-line react-hooks/exhaustive-deps
+function useUnmountEffect(fn, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  return React.useEffect(function () {
+    return function () {
+      return fn();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
   deps);
@@ -596,8 +719,12 @@ }
 function useForceUpdate() {
-  const unloadingRef = React.useRef(false);
-  const [count, setCount] = React.useState(0);
-  useUnmountEffect(() => {
+  var unloadingRef = React.useRef(false);
+
+  var _React$useState = React.useState(0),
+      count = _React$useState[0],
+      setCount = _React$useState[1];
+
+  useUnmountEffect(function () {
     unloadingRef.current = true;
   });
-  return React.useCallback(() => {
+  return React.useCallback(function () {
     if (!unloadingRef.current) {
@@ -617,7 +744,9 @@ setCount(count + 1);
 function useInterval(callback, delay) {
-  const fn = useCallbackRef(callback);
-  React.useEffect(() => {
-    let intervalId = null;
+  var fn = useCallbackRef(callback);
+  React.useEffect(function () {
+    var intervalId = null;
 
-    const tick = () => fn();
+    var tick = function tick() {
+      return fn();
+    };
 
@@ -628,3 +757,3 @@ if (delay !== null) {
 
-    return () => {
+    return function () {
       if (intervalId) {
@@ -645,3 +774,3 @@ window.clearInterval(intervalId);
 function useLatestRef(value) {
-  const ref = React.useRef(null);
+  var ref = React.useRef(null);
   ref.current = value;
@@ -664,3 +793,3 @@ return ref;
   } catch (error) {
-    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
+    throw new Error("Cannot assign value '" + value + "' to ref '" + ref + "'");
   }
@@ -681,10 +810,16 @@ }
 
-function useMergeRefs(...refs) {
-  return React.useMemo(() => {
-    if (refs.every(ref => ref == null)) {
+function useMergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return React.useMemo(function () {
+    if (refs.every(function (ref) {
+      return ref == null;
+    })) {
       return null;
     }
 
-    return node => {
-      refs.forEach(ref => {
+    return function (node) {
+      refs.forEach(function (ref) {
         if (ref) assignRef(ref, node);
@@ -700,5 +835,9 @@ });
 
-function useMouseDownRef(shouldListen = true) {
-  const mouseDownRef = React__default.useRef();
-  useEventListener("mousedown", event => {
+function useMouseDownRef(shouldListen) {
+  if (shouldListen === void 0) {
+    shouldListen = true;
+  }
+
+  var mouseDownRef = React__default.useRef();
+  useEventListener("mousedown", function (event) {
     if (shouldListen) {
@@ -716,17 +855,16 @@ mouseDownRef.current = event.target;
 function useOutsideClick(props) {
-  const {
-    ref,
-    handler,
-    enabled = true
-  } = props;
-  const savedHandler = useCallbackRef(handler);
-  const stateRef = useRef({
+  var ref = props.ref,
+      handler = props.handler,
+      _props$enabled = props.enabled,
+      enabled = _props$enabled === void 0 ? true : _props$enabled;
+  var savedHandler = useCallbackRef(handler);
+  var stateRef = useRef({
     isPointerDown: false,
     ignoreEmulatedMouseEvents: false
   });
-  const state = stateRef.current;
-  useEffect(() => {
+  var state = stateRef.current;
+  useEffect(function () {
     if (!enabled) return;
 
-    const onPointerDown = e => {
+    var onPointerDown = function onPointerDown(e) {
       if (isValidEvent(e, ref)) {
@@ -737,3 +875,3 @@ state.isPointerDown = true;
 
-    const onMouseUp = event => {
+    var onMouseUp = function onMouseUp(event) {
       if (state.ignoreEmulatedMouseEvents) {
@@ -750,3 +888,3 @@ state.ignoreEmulatedMouseEvents = false;
 
-    const onTouchEnd = event => {
+    var onTouchEnd = function onTouchEnd(event) {
       state.ignoreEmulatedMouseEvents = true;
@@ -760,3 +898,3 @@
 
-    const doc = getOwnerDocument(ref.current);
+    var doc = getOwnerDocument(ref.current);
     doc.addEventListener("mousedown", onPointerDown, true);
@@ -766,3 +904,3 @@ doc.addEventListener("mouseup", onMouseUp, true);
     doc.addEventListener("touchend", onTouchEnd, true);
-    return () => {
+    return function () {
       doc.removeEventListener("mousedown", onPointerDown, true);
@@ -777,25 +915,25 @@ doc.removeEventListener("mouseup", onMouseUp, true);
 function isValidEvent(event, ref) {
-  const target = event.target;
+  var _ref$current;
+
+  var target = event.target;
   if (event.button > 0) return false; // if the event target is no longer in the document
 
   if (target) {
-    const doc = getOwnerDocument(target);
+    var doc = getOwnerDocument(target);
     if (!doc.body.contains(target)) return false;
   }
 
-  return !ref.current?.contains(target);
+  return !((_ref$current = ref.current) != null && _ref$current.contains(target));
 }
 
 function usePanGesture(ref, props) {
-  const {
-    onPan,
-    onPanStart,
-    onPanEnd,
-    onPanSessionStart,
-    onPanSessionEnd,
-    threshold
-  } = props;
-  const hasPanEvents = Boolean(onPan || onPanStart || onPanEnd || onPanSessionStart || onPanSessionEnd);
-  const panSession = useRef(null);
-  const handlers = {
+  var onPan = props.onPan,
+      onPanStart = props.onPanStart,
+      onPanEnd = props.onPanEnd,
+      onPanSessionStart = props.onPanSessionStart,
+      onPanSessionEnd = props.onPanSessionEnd,
+      threshold = props.threshold;
+  var hasPanEvents = Boolean(onPan || onPanStart || onPanEnd || onPanSessionStart || onPanSessionEnd);
+  var panSession = useRef(null);
+  var handlers = {
     onSessionStart: onPanSessionStart,
@@ -805,11 +943,11 @@ onSessionEnd: onPanSessionEnd,
     onMove: onPan,
-
-    onEnd(event, info) {
+    onEnd: function onEnd(event, info) {
       panSession.current = null;
-      onPanEnd?.(event, info);
+      onPanEnd == null ? void 0 : onPanEnd(event, info);
     }
+  };
+  useEffect(function () {
+    var _panSession$current;
 
-  };
-  useEffect(() => {
-    panSession.current?.updateHandlers(handlers);
+    (_panSession$current = panSession.current) == null ? void 0 : _panSession$current.updateHandlers(handlers);
   });
@@ -821,5 +959,9 @@
 
-  usePointerEvent(() => ref.current, "pointerdown", hasPanEvents ? onPointerDown : noop);
-  useUnmountEffect(() => {
-    panSession.current?.end();
+  usePointerEvent(function () {
+    return ref.current;
+  }, "pointerdown", hasPanEvents ? onPointerDown : noop);
+  useUnmountEffect(function () {
+    var _panSession$current2;
+
+    (_panSession$current2 = panSession.current) == null ? void 0 : _panSession$current2.end();
     panSession.current = null;
@@ -830,4 +972,4 @@ });
 function usePrevious(value) {
-  const ref = useRef();
-  useEffect(() => {
+  var ref = useRef();
+  useEffect(function () {
     ref.current = value;
@@ -844,5 +986,3 @@ }, [value]);
 function isPrintableCharacter(event) {
-  const {
-    key
-  } = event;
+  var key = event.key;
   return key.length === 1 || key.length > 1 && /[^a-zA-Z0-9]/.test(key);
@@ -855,11 +995,22 @@ }
  */
-function useShortcut(props = {}) {
-  const {
-    timeout = 300,
-    preventDefault = () => true
-  } = props;
-  const [keys, setKeys] = React.useState([]);
-  const timeoutRef = React.useRef();
+function useShortcut(props) {
+  if (props === void 0) {
+    props = {};
+  }
 
-  const flush = () => {
+  var _props = props,
+      _props$timeout = _props.timeout,
+      timeout = _props$timeout === void 0 ? 300 : _props$timeout,
+      _props$preventDefault = _props.preventDefault,
+      preventDefault = _props$preventDefault === void 0 ? function () {
+    return true;
+  } : _props$preventDefault;
+
+  var _React$useState = React.useState([]),
+      keys = _React$useState[0],
+      setKeys = _React$useState[1];
+
+  var timeoutRef = React.useRef();
+
+  var flush = function flush() {
     if (timeoutRef.current) {
@@ -871,5 +1022,5 @@ clearTimeout(timeoutRef.current);
 
-  const clearKeysAfterDelay = () => {
+  var clearKeysAfterDelay = function clearKeysAfterDelay() {
     flush();
-    timeoutRef.current = setTimeout(() => {
+    timeoutRef.current = setTimeout(function () {
       setKeys([]);
@@ -880,8 +1031,10 @@ timeoutRef.current = null;
 
-  React.useEffect(() => flush, []);
+  React.useEffect(function () {
+    return flush;
+  }, []);
 
   function onKeyDown(fn) {
-    return event => {
+    return function (event) {
       if (event.key === "Backspace") {
-        const keysCopy = [...keys];
+        var keysCopy = [].concat(keys);
         keysCopy.pop();
@@ -893,3 +1046,3 @@ setKeys(keysCopy);
       if (isPrintableCharacter(event)) {
-        const keysCopy = keys.concat(event.key);
+        var _keysCopy = keys.concat(event.key);
 
@@ -901,4 +1054,4 @@ if (preventDefault(event)) {
 
-        setKeys(keysCopy);
-        fn(keysCopy.join(""));
+        setKeys(_keysCopy);
+        fn(_keysCopy.join(""));
         clearKeysAfterDelay();
@@ -920,10 +1073,10 @@ }
 function useTimeout(callback, delay) {
-  const fn = useCallbackRef(callback);
-  React.useEffect(() => {
+  var fn = useCallbackRef(callback);
+  React.useEffect(function () {
     if (delay == null) return undefined;
-    let timeoutId = null;
-    timeoutId = window.setTimeout(() => {
+    var timeoutId = null;
+    timeoutId = window.setTimeout(function () {
       fn();
     }, delay);
-    return () => {
+    return function () {
       if (timeoutId) {
@@ -937,10 +1090,8 @@ window.clearTimeout(timeoutId);
 function useWhyDidYouUpdate(name, props) {
-  const previousProps = React.useRef();
-  React.useEffect(() => {
+  var previousProps = React.useRef();
+  React.useEffect(function () {
     if (previousProps.current) {
-      const allKeys = Object.keys({ ...previousProps.current,
-        ...props
-      });
-      const changesObj = {};
-      allKeys.forEach(key => {
+      var allKeys = Object.keys(_extends({}, previousProps.current, props));
+      var changesObj = {};
+      allKeys.forEach(function (key) {
         if (previousProps.current[key] !== props[key]) {
@@ -947,0 +1098,0 @@ changesObj[key] = {

dist/declarations/src/index.d.ts

@@ -31,1 +31,2 @@ export * from "./use-boolean";
 export * from "./use-why-update";
+//# sourceMappingURL=index.d.ts.map

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

@@ -13,1 +13,2 @@ declare type InitialState = boolean | (() => boolean);
 export {};
+//# sourceMappingURL=use-boolean.d.ts.map

dist/declarations/src/use-callback-ref.d.ts

@@ -9,1 +9,2 @@ import * as React from "react";
 export declare function useCallbackRef<T extends (...args: any[]) => any>(fn: T | undefined, deps?: React.DependencyList): T;
+//# sourceMappingURL=use-callback-ref.d.ts.map

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

@@ -25,1 +25,2 @@ export interface UseClipboardOptions {
 };
+//# sourceMappingURL=use-clipboard.d.ts.map

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

@@ -9,1 +9,2 @@ /**
 export declare function useConst<T extends any | (() => any)>(init: T): T;
+//# sourceMappingURL=use-const.d.ts.map

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

@@ -26,1 +26,2 @@ import * as React from "react";
 export declare function useControllableState<T>(props: UseControllableStateProps<T>): [T, React.Dispatch<React.SetStateAction<T>>];
+//# sourceMappingURL=use-controllable.d.ts.map

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

@@ -10,1 +10,2 @@ import * as React from "react";
 export declare function useDimensions(ref: React.RefObject<HTMLElement>, observe?: boolean): BoxModel | null;
+//# sourceMappingURL=use-dimensions.d.ts.map

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

@@ -18,1 +18,2 @@ export interface UseDisclosureProps {
 export declare type UseDisclosureReturn = ReturnType<typeof useDisclosure>;
+//# sourceMappingURL=use-disclosure.d.ts.map

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

@@ -11,1 +11,2 @@ import * as React from "react";
 export declare function useEventCallback<E extends Event | React.SyntheticEvent>(callback: (event: E, ...args: any[]) => void): (event: E, ...args: any[]) => void;
+//# sourceMappingURL=use-event-callback.d.ts.map

dist/declarations/src/use-event-listener-map.d.ts

@@ -10,1 +10,2 @@ import { PointerEventInfo, EventListenerWithPointInfo } from "@chakra-ui/utils";
 export {};
+//# sourceMappingURL=use-event-listener-map.d.ts.map

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

@@ -15,1 +15,2 @@ declare type DocumentOrElement = Document | HTMLElement | null;
 export {};
+//# sourceMappingURL=use-event-listener.d.ts.map

dist/declarations/src/use-focus-effect.d.ts

@@ -13,1 +13,2 @@ import * as React from "react";
 export declare function useFocusEffect<T extends HTMLElement>(ref: React.RefObject<T>, options: UseFocusEffectOptions): void;
+//# sourceMappingURL=use-focus-effect.d.ts.map

dist/declarations/src/use-focus-on-hide.d.ts

@@ -16,1 +16,2 @@ import { FocusableElement } from "@chakra-ui/utils";
 export declare function useFocusOnHide(containerRef: RefObject<HTMLElement>, options: UseFocusOnHideOptions): void;
+//# sourceMappingURL=use-focus-on-hide.d.ts.map

dist/declarations/src/use-focus-on-pointerdown.d.ts

@@ -17,1 +17,2 @@ import { RefObject } from "react";
 export declare function useFocusOnPointerDown(props: UseFocusOnMouseDownProps): void;
+//# sourceMappingURL=use-focus-on-pointerdown.d.ts.map

dist/declarations/src/use-focus-on-show.d.ts

@@ -10,1 +10,2 @@ import { FocusableElement } from "@chakra-ui/utils";
 export declare function useFocusOnShow<T extends HTMLElement>(target: React.RefObject<T> | T, options?: UseFocusOnShowOptions): void;
+//# sourceMappingURL=use-focus-on-show.d.ts.map

dist/declarations/src/use-force-update.d.ts

 export declare function useForceUpdate(): () => void;
+//# sourceMappingURL=use-force-update.d.ts.map

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

@@ -34,1 +34,2 @@ import * as React from "react";
 };
+//# sourceMappingURL=use-id.d.ts.map

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

@@ -8,1 +8,2 @@ /**
 export declare function useInterval(callback: () => void, delay: number | null): void;
+//# sourceMappingURL=use-interval.d.ts.map

dist/declarations/src/use-latest-ref.d.ts

@@ -9,1 +9,2 @@ import * as React from "react";
 export declare function useLatestRef<T>(value: T): React.MutableRefObject<T>;
+//# sourceMappingURL=use-latest-ref.d.ts.map

dist/declarations/src/use-merge-refs.d.ts

@@ -18,1 +18,2 @@ import * as React from "react";
 export {};
+//# sourceMappingURL=use-merge-refs.d.ts.map

dist/declarations/src/use-mouse-down-ref.d.ts

@@ -6,1 +6,2 @@ import React from "react";
 export declare function useMouseDownRef(shouldListen?: boolean): React.RefObject<HTMLElement>;
+//# sourceMappingURL=use-mouse-down-ref.d.ts.map

dist/declarations/src/use-outside-click.d.ts

@@ -21,1 +21,2 @@ import { RefObject } from "react";
 export declare function useOutsideClick(props: UseOutsideClickProps): void;
+//# sourceMappingURL=use-outside-click.d.ts.map

dist/declarations/src/use-pan-gesture.d.ts

@@ -12,1 +12,2 @@ import { PanEventHandler } from "@chakra-ui/utils";
 export declare function usePanGesture(ref: React.RefObject<HTMLElement>, props: UsePanGestureProps): void;
+//# sourceMappingURL=use-pan-gesture.d.ts.map

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

@@ -11,1 +11,2 @@ /**
 export declare function usePointerEvent(env: EventListenerEnv, eventName: string, handler: EventListenerWithPointInfo, options?: AddEventListenerOptions): () => void;
+//# sourceMappingURL=use-pointer-event.d.ts.map

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

 export declare function usePrevious<T>(value: T): T;
+//# sourceMappingURL=use-previous.d.ts.map

dist/declarations/src/use-safe-layout-effect.d.ts

@@ -13,1 +13,2 @@ import * as React from "react";
 export declare const useSafeLayoutEffect: typeof React.useEffect;
+//# sourceMappingURL=use-safe-layout-effect.d.ts.map

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

@@ -11,1 +11,2 @@ import * as React from "react";
 export declare function useShortcut(props?: UseShortcutProps): (fn: (keysSoFar: string) => void) => (event: React.KeyboardEvent) => void;
+//# sourceMappingURL=use-shortcut.d.ts.map

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

@@ -8,1 +8,2 @@ /**
 export declare function useTimeout(callback: (...args: any[]) => void, delay: number | null): void;
+//# sourceMappingURL=use-timeout.d.ts.map

dist/declarations/src/use-unmount-effect.d.ts

 export declare function useUnmountEffect(fn: () => void, deps?: any[]): void;
+//# sourceMappingURL=use-unmount-effect.d.ts.map

dist/declarations/src/use-update-effect.d.ts

@@ -7,1 +7,2 @@ import * as React from "react";
 export declare const useUpdateEffect: typeof React.useEffect;
+//# sourceMappingURL=use-update-effect.d.ts.map

dist/declarations/src/use-why-update.d.ts

 export declare function useWhyDidYouUpdate(name: string, props: any): void;
+//# sourceMappingURL=use-why-update.d.ts.map

package.json

 {
   "name": "@chakra-ui/hooks",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "React hooks for Chakra components",
@@ -19,3 +19,4 @@ "keywords": [
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
@@ -34,4 +35,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",
     "compute-scroll-into-view": "1.0.14",
@@ -38,0 +39,0 @@ "copy-to-clipboard": "3.3.1"

Fixed alerts

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

172351

increased by54.23%

Number of package files

101

increased by158.97%

Lines of code

4292

increased by48.15%

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