@autoguru/overdrive 4.3.3 → 4.3.4

package/dist/components/Modal/Modal.js

@@ -1,86 +1,142 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["onRequestClose", "isOpen"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import { warning } from '@autoguru/utilities';
 import * as React from 'react';
 import { useEffect, useReducer } from 'react';
 import FocusLock from 'react-focus-lock';
-import { useEventCallback } from '../../utils';
-import { Box } from '../Box';
-import { Portal } from '../Portal';
-import * as styles from './Modal.css';
+import { useEventCallback } from "../../utils/index.js";
+import { Box } from "../Box/index.js";
+import { Portal } from "../Portal/index.js";
+import * as styles from "./Modal.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 const reducer = (prevState, action) => {
-    switch (action) {
-        case 'OPEN_MODAL': {
-            switch (prevState) {
-                case 'INITIAL':
-                case 'CLOSING':
-                case 'CLOSED': {
-                    return 'OPENING';
-                }
-                default:
-                    return prevState;
+  switch (action) {
+    case 'OPEN_MODAL':
+      {
+        switch (prevState) {
+          case 'INITIAL':
+          case 'CLOSING':
+          case 'CLOSED':
+            {
+              return 'OPENING';
             }
+
+          default:
+            return prevState;
         }
-        case 'CLOSE_MODAL': {
-            switch (prevState) {
-                case 'OPEN':
-                case 'OPENING': {
-                    return 'CLOSING';
-                }
-                default:
-                    return prevState;
+      }
+
+    case 'CLOSE_MODAL':
+      {
+        switch (prevState) {
+          case 'OPEN':
+          case 'OPENING':
+            {
+              return 'CLOSING';
             }
+
+          default:
+            return prevState;
         }
-        case 'ANIMATION_COMPLETE': {
-            switch (prevState) {
-                case 'CLOSING': {
-                    return 'CLOSED';
-                }
-                case 'OPENING': {
-                    return 'OPEN';
-                }
-                default:
-                    return prevState;
+      }
+
+    case 'ANIMATION_COMPLETE':
+      {
+        switch (prevState) {
+          case 'CLOSING':
+            {
+              return 'CLOSED';
             }
-        }
-        default:
+
+          case 'OPENING':
+            {
+              return 'OPEN';
+            }
+
+          default:
             return prevState;
-    }
-};
-export const Modal = ({ isOpen, hideBackdrop = false, onRequestClose, children, }) => {
-    const [state, dispatch] = useReducer(reducer, 'INITIAL');
-    const handleBackdropClick = useEventCallback((event) => {
-        if (event.target !== event.currentTarget)
-            return;
-        if (typeof onRequestClose === 'function')
-            onRequestClose('backdrop');
-    });
-    useEffect(() => {
-        dispatch(isOpen ? 'OPEN_MODAL' : 'CLOSE_MODAL');
-    }, [isOpen]);
-    useEffect(() => {
-        if (state === 'CLOSING') {
-            const timer = setTimeout(() => {
-                dispatch('ANIMATION_COMPLETE');
-            }, 300);
-            return () => clearTimeout(timer);
         }
-        return undefined;
-    }, [state]);
-    return (React.createElement(Portal, null, state === 'OPENING' || state === 'OPEN' || state === 'CLOSING' ? (React.createElement(FocusLock, { returnFocus: true, autoFocus: false, onActivation: () => {
-            dispatch('ANIMATION_COMPLETE');
-        } },
-        React.createElement(Box, { "aria-hidden": "true", position: "fixed", pointerEvents: state === 'CLOSING' ? 'none' : undefined, opacity: state === 'OPEN' ? undefined : 0, className: [
-                styles.backdrop.root,
-                styles.transition,
-                hideBackdrop && styles.backdrop.invisible,
-            ], onClick: handleBackdropClick }),
-        React.createElement(Box, { role: "presentation", position: "fixed", overflow: "hidden", opacity: state === 'OPEN' ? undefined : 0, className: [
-                styles.root,
-                styles.transition,
-                state === 'OPENING' && styles.entry,
-            ] }, children))) : null));
+      }
+
+    default:
+      return prevState;
+  }
 };
-export const withModal = (WrappedComponent) => ({ onRequestClose, isOpen, ...rest }) => {
-    warning(false, 'Using withModal is now an anti-pattern. Use <Modal /> instead');
-    return (React.createElement(Modal, { isOpen: isOpen, onRequestClose: onRequestClose },
-        React.createElement(WrappedComponent, { isOpen: isOpen, onRequestClose: onRequestClose, ...rest })));
+
+export const Modal = _ref => {
+  let {
+    isOpen,
+    hideBackdrop = false,
+    onRequestClose,
+    children
+  } = _ref;
+  const [state, dispatch] = useReducer(reducer, 'INITIAL');
+  const handleBackdropClick = useEventCallback(event => {
+    if (event.target !== event.currentTarget) return;
+    if (typeof onRequestClose === 'function') onRequestClose('backdrop');
+  });
+  useEffect(() => {
+    dispatch(isOpen ? 'OPEN_MODAL' : 'CLOSE_MODAL');
+  }, [isOpen]);
+  useEffect(() => {
+    if (state === 'CLOSING') {
+      const timer = setTimeout(() => {
+        dispatch('ANIMATION_COMPLETE');
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+
+    return undefined;
+  }, [state]);
+  return _jsx(Portal, {
+    children: state === 'OPENING' || state === 'OPEN' || state === 'CLOSING' ? _jsxs(FocusLock, {
+      returnFocus: true,
+      autoFocus: false,
+      onActivation: () => {
+        dispatch('ANIMATION_COMPLETE');
+      },
+      children: [_jsx(Box, {
+        "aria-hidden": "true",
+        position: "fixed",
+        pointerEvents: state === 'CLOSING' ? 'none' : undefined,
+        opacity: state === 'OPEN' ? undefined : 0,
+        className: [styles.backdrop.root, styles.transition, hideBackdrop && styles.backdrop.invisible],
+        onClick: handleBackdropClick
+      }), _jsx(Box, {
+        role: "presentation",
+        position: "fixed",
+        overflow: "hidden",
+        opacity: state === 'OPEN' ? undefined : 0,
+        className: [styles.root, styles.transition, state === 'OPENING' && styles.entry],
+        children: children
+      })]
+    }) : null
+  });
 };
+export const withModal = WrappedComponent => _ref2 => {
+  let {
+    onRequestClose,
+    isOpen
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  process.env.NODE_ENV !== "production" ? warning(false, 'Using withModal is now an anti-pattern. Use <Modal /> instead') : void 0;
+  return _jsx(Modal, {
+    isOpen: isOpen,
+    onRequestClose: onRequestClose,
+    children: _jsx(WrappedComponent, _objectSpread({
+      isOpen: isOpen,
+      onRequestClose: onRequestClose
+    }, rest))
+  });
+};

package/dist/components/Modal/index.js

@@ -1 +1,3 @@
-export { withModal, Modal } from './Modal';
+"use strict";
+
+export { withModal, Modal } from "./Modal.js";

package/dist/components/NumberBubble/NumberBubble.css.js

@@ -1,6 +1,14 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/NumberBubble/NumberBubble.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
 export const bubbleText = style({
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-});
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+}, "bubbleText");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/NumberBubble/NumberBubble.js

@@ -1,28 +1,56 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["value", "textColour", "rawNumbers"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import clsx from 'clsx';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { toPrettyBigNumber } from '../../utils/number';
-import { Box, useBoxStyles } from '../Box';
-import { Text } from '../Text';
-import * as styles from './NumberBubble.css';
+import { toPrettyBigNumber } from "../../utils/number.js";
+import { Box, useBoxStyles } from "../Box/index.js";
+import { Text } from "../Text/index.js";
+import * as styles from "./NumberBubble.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const valuePaddingMap = {
-    SMALL: '2',
-    MEDIUM: '3',
-    LARGE: '4',
-    X_LARGE: '5',
-};
-export const NumberBubble = ({ value, textColour = 'white', rawNumbers = false, ...boxProps }) => {
-    const size = useMemo(() => {
-        if (value > 9 && value < 100)
-            return 'MEDIUM';
-        if (value > 99 && value < 9999)
-            return 'LARGE';
-        if (value >= 9999)
-            return 'LARGE';
-        return 'SMALL';
-    }, [value]);
-    return (React.createElement(Box, { borderRadius: "full", backgroundColour: "gray900", display: "inlineBlock", position: "relative", padding: valuePaddingMap[size], ...boxProps },
-        React.createElement(Text, { size: "2", strong: true, className: clsx(styles.bubbleText, useBoxStyles({
-                position: 'absolute',
-            })), colour: textColour }, rawNumbers ? value : toPrettyBigNumber(value))));
+  SMALL: '2',
+  MEDIUM: '3',
+  LARGE: '4',
+  X_LARGE: '5'
 };
+export const NumberBubble = _ref => {
+  let {
+    value,
+    textColour = 'white',
+    rawNumbers = false
+  } = _ref,
+      boxProps = _objectWithoutProperties(_ref, _excluded);
+
+  const size = useMemo(() => {
+    if (value > 9 && value < 100) return 'MEDIUM';
+    if (value > 99 && value < 9999) return 'LARGE';
+    if (value >= 9999) return 'LARGE';
+    return 'SMALL';
+  }, [value]);
+  return _jsx(Box, _objectSpread(_objectSpread({
+    borderRadius: "full",
+    backgroundColour: "gray900",
+    display: "inlineBlock",
+    position: "relative",
+    padding: valuePaddingMap[size]
+  }, boxProps), {}, {
+    children: _jsx(Text, {
+      size: "2",
+      strong: true,
+      className: clsx(styles.bubbleText, useBoxStyles({
+        position: 'absolute'
+      })),
+      colour: textColour,
+      children: rawNumbers ? value : toPrettyBigNumber(value)
+    })
+  }));
+};

package/dist/components/NumberBubble/index.js

@@ -1 +1,3 @@
-export { NumberBubble } from './NumberBubble';
+"use strict";
+
+export { NumberBubble } from "./NumberBubble.js";

package/dist/components/NumberInput/NumberInput.js

@@ -1,34 +1,71 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["ref"],
+      _excluded2 = ["field", "eventHandlers", "validation", "isLoading", "suffixed", "prefixed", "preventMouseWheel"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import * as React from 'react';
 import { useCallback, useEffect, useRef } from 'react';
-import { Box } from '../Box';
-import { withEnhancedInput } from '../private/InputBase';
+import { Box } from "../Box/index.js";
+import { withEnhancedInput } from "../private/InputBase/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const isEdge = typeof navigator !== 'undefined' && /edge/i.test(navigator.userAgent);
 const type = isEdge ? 'text' : 'number';
-export const NumberInput = withEnhancedInput(({ field: { ref, ...incomingFieldProps }, eventHandlers, validation, isLoading, suffixed, prefixed, preventMouseWheel = false, ...rest }) => {
-    const inputRef = useRef(ref?.current);
-    const preventWheel = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    }, []);
-    useEffect(() => {
-        let mouseWheelListener;
-        let onWheelListener;
-        let wheelListener;
-        if (preventMouseWheel && inputRef?.current) {
-            mouseWheelListener = inputRef.current.addEventListener('mousewheel', preventWheel, { passive: false });
-            onWheelListener = inputRef.current.addEventListener('onwheel', preventWheel, { passive: false });
-            wheelListener = inputRef.current.addEventListener('wheel', preventWheel, { passive: false });
-        }
-        return () => {
-            if (mouseWheelListener)
-                inputRef.current.removeEventListener('mousewheel', mouseWheelListener);
-            if (onWheelListener)
-                inputRef.current.removeEventListener('onwheel', onWheelListener);
-            if (wheelListener)
-                inputRef.current.removeEventListener('wheel', wheelListener);
-        };
-    }, [preventMouseWheel, inputRef.current]);
-    return (React.createElement(Box, { is: "input", ref: inputRef, ...eventHandlers, ...incomingFieldProps, ...rest, autoComplete: "off", type: type }));
+export const NumberInput = withEnhancedInput(_ref => {
+  let {
+    field: {
+      ref
+    },
+    eventHandlers,
+    validation,
+    isLoading,
+    suffixed,
+    prefixed,
+    preventMouseWheel = false
+  } = _ref,
+      incomingFieldProps = _objectWithoutProperties(_ref.field, _excluded),
+      rest = _objectWithoutProperties(_ref, _excluded2);
+
+  const inputRef = useRef(ref === null || ref === void 0 ? void 0 : ref.current);
+  const preventWheel = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  useEffect(() => {
+    let mouseWheelListener;
+    let onWheelListener;
+    let wheelListener;
+
+    if (preventMouseWheel && inputRef !== null && inputRef !== void 0 && inputRef.current) {
+      mouseWheelListener = inputRef.current.addEventListener('mousewheel', preventWheel, {
+        passive: false
+      });
+      onWheelListener = inputRef.current.addEventListener('onwheel', preventWheel, {
+        passive: false
+      });
+      wheelListener = inputRef.current.addEventListener('wheel', preventWheel, {
+        passive: false
+      });
+    }
+
+    return () => {
+      if (mouseWheelListener) inputRef.current.removeEventListener('mousewheel', mouseWheelListener);
+      if (onWheelListener) inputRef.current.removeEventListener('onwheel', onWheelListener);
+      if (wheelListener) inputRef.current.removeEventListener('wheel', wheelListener);
+    };
+  }, [preventMouseWheel, inputRef.current]);
+  return _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    is: "input",
+    ref: inputRef
+  }, eventHandlers), incomingFieldProps), rest), {}, {
+    autoComplete: "off",
+    type: type
+  }));
 }, {
-    primitiveType: type,
-});
+  primitiveType: type
+});

package/dist/components/NumberInput/index.js

@@ -1 +1,3 @@
-export { NumberInput } from './NumberInput';
+"use strict";
+
+export { NumberInput } from "./NumberInput.js";

package/dist/components/OrderedList/OrderedList.css.js

@@ -1,10 +1,18 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/OrderedList/OrderedList.css.ts", "@autoguru/overdrive");
+
 import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
+import { vars } from "../../themes/base/vars.css.js";
 export const root = styleVariants({
-    default: {
-        listStyle: 'outside lower-roman',
-    },
-    firstOccurrence: {
-        paddingLeft: `calc(${vars.space['6']} * 2)`,
-    },
-});
+  default: {
+    listStyle: 'outside lower-roman'
+  },
+  firstOccurrence: {
+    paddingLeft: "calc(".concat(vars.space['6'], " * 2)")
+  }
+}, "root");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/OrderedList/OrderedList.js

@@ -1,30 +1,64 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
-import { createContext, useContext, } from 'react';
-import { Box } from '../Box';
-import { Stack } from '../Stack';
-import { useTextStyles } from '../Text';
-import * as styles from './OrderedList.css';
-const cycles = [
-    'decimal',
-    'lower-roman',
-    'lower-alpha',
-    'upper-alpha',
-    'lower-roman',
-];
+import { createContext, useContext } from 'react';
+import { Box } from "../Box/index.js";
+import { Stack } from "../Stack/index.js";
+import { useTextStyles } from "../Text/index.js";
+import * as styles from "./OrderedList.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const cycles = ['decimal', 'lower-roman', 'lower-alpha', 'upper-alpha', 'lower-roman'];
 const OrderedListContext = createContext(-1);
-export const OrderedList = ({ children, className = '', type = null, start }) => {
-    const cycle = useContext(OrderedListContext);
-    let myCycle;
-    if (cycle + 1 > cycles.length) {
-        myCycle = type === null ? 0 : cycles.indexOf(type);
-    }
-    else {
-        myCycle = type === null ? cycle + 1 : cycles.indexOf(type);
-    }
-    return (React.createElement(Box, { is: "ol", paddingLeft: "6", marginTop: myCycle > 0 ? '2' : 'none', className: clsx(styles.root.default, useTextStyles({ colour: 'dark' }), { [styles.root.firstOccurrence]: cycle === -1 }, className), style: { listStyleType: cycles[myCycle] }, start: start },
-        React.createElement(OrderedListContext.Provider, { value: myCycle },
-            React.createElement(Stack, { space: "2" }, children))));
+export const OrderedList = _ref => {
+  let {
+    children,
+    className = '',
+    type = null,
+    start
+  } = _ref;
+  const cycle = useContext(OrderedListContext);
+  let myCycle;
+
+  if (cycle + 1 > cycles.length) {
+    myCycle = type === null ? 0 : cycles.indexOf(type);
+  } else {
+    myCycle = type === null ? cycle + 1 : cycles.indexOf(type);
+  }
+
+  return _jsx(Box, {
+    is: "ol",
+    paddingLeft: "6",
+    marginTop: myCycle > 0 ? '2' : 'none',
+    className: clsx(styles.root.default, useTextStyles({
+      colour: 'dark'
+    }), {
+      [styles.root.firstOccurrence]: cycle === -1
+    }, className),
+    style: {
+      listStyleType: cycles[myCycle]
+    },
+    start: start,
+    children: _jsx(OrderedListContext.Provider, {
+      value: myCycle,
+      children: _jsx(Stack, {
+        space: "2",
+        children: children
+      })
+    })
+  });
 };
-const Item = ({ className = '', children }) => (React.createElement(Box, { is: "li", className: className }, children));
-OrderedList.Item = Item;
+
+const Item = _ref2 => {
+  let {
+    className = '',
+    children
+  } = _ref2;
+  return _jsx(Box, {
+    is: "li",
+    className: className,
+    children: children
+  });
+};
+
+OrderedList.Item = Item;

package/dist/components/OrderedList/index.js

@@ -1 +1,3 @@
-export { OrderedList } from './OrderedList';
+"use strict";
+
+export { OrderedList } from "./OrderedList.js";

package/dist/components/OutsideClick/OutsideClick.js

@@ -1,40 +1,45 @@
+"use strict";
+
 import { warning } from '@autoguru/utilities';
-import { Children, cloneElement, useEffect, useRef, } from 'react';
-import { noop } from '../../utils';
+import { Children, cloneElement, useEffect, useRef } from 'react';
+import { noop } from "../../utils/index.js";
 export const useOutsideClick = (refs, onClickAway) => {
-    const callbackRef = useRef(onClickAway);
-    useEffect(() => {
-        callbackRef.current = onClickAway;
-    }, [onClickAway]);
-    useEffect(() => {
-        if (typeof document === 'undefined' ||
-            typeof onClickAway !== 'function')
-            return undefined;
-        return bindEvent(document, 'mouseup', (event) => {
-            const shouldClose = refs
-                .map((item) => item.current)
-                .every((element) => !element?.contains(event.target));
-            if (shouldClose) {
-                callbackRef.current();
-            }
-        });
-    }, [refs]);
-};
-const bindEvent = (node, event, callback) => {
-    node.addEventListener(event, callback, {
-        passive: true,
+  const callbackRef = useRef(onClickAway);
+  useEffect(() => {
+    callbackRef.current = onClickAway;
+  }, [onClickAway]);
+  useEffect(() => {
+    if (typeof document === 'undefined' || typeof onClickAway !== 'function') return undefined;
+    return bindEvent(document, 'mouseup', event => {
+      const shouldClose = refs.map(item => item.current).every(element => !(element !== null && element !== void 0 && element.contains(event.target)));
+
+      if (shouldClose) {
+        callbackRef.current();
+      }
     });
-    return () => {
-        node.removeEventListener(event, callback);
-    };
+  }, [refs]);
 };
-export const OutsideClick = ({ children, onOutsideClick = noop, }) => {
-    const child = Children.only(children);
-    const rootClickRef = useRef(null);
-    const hasRef = Object.prototype.hasOwnProperty.call(child.props, 'ref');
-    warning(!hasRef, 'This component overrides the child ref, use with caution.');
-    useOutsideClick([rootClickRef], onOutsideClick);
-    return cloneElement(child, {
-        ref: rootClickRef,
-    });
+
+const bindEvent = (node, event, callback) => {
+  node.addEventListener(event, callback, {
+    passive: true
+  });
+  return () => {
+    node.removeEventListener(event, callback);
+  };
 };
+
+export const OutsideClick = _ref => {
+  let {
+    children,
+    onOutsideClick = noop
+  } = _ref;
+  const child = Children.only(children);
+  const rootClickRef = useRef(null);
+  const hasRef = Object.prototype.hasOwnProperty.call(child.props, 'ref');
+  process.env.NODE_ENV !== "production" ? warning(!hasRef, 'This component overrides the child ref, use with caution.') : void 0;
+  useOutsideClick([rootClickRef], onOutsideClick);
+  return cloneElement(child, {
+    ref: rootClickRef
+  });
+};

package/dist/components/OutsideClick/index.js

@@ -1 +1,3 @@
-export { useOutsideClick, OutsideClick } from './OutsideClick';
+"use strict";
+
+export { useOutsideClick, OutsideClick } from "./OutsideClick.js";