@pedidopago/ui 1.0.6

package/dist/index.js

@@ -0,0 +1,375 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Alert: true,
+  Avatar: true,
+  Badge: true,
+  Button: true,
+  Card: true,
+  Checkbox: true,
+  ColorPicker: true,
+  DatePicker: true,
+  Dialog: true,
+  Dropzone: true,
+  Flex: true,
+  Grid: true,
+  Icon: true,
+  IconItem: true,
+  Input: true,
+  Label: true,
+  List: true,
+  Menu: true,
+  Modal: true,
+  Pagination: true,
+  Progress: true,
+  Radio: true,
+  Rating: true,
+  Select: true,
+  Slider: true,
+  Spinner: true,
+  Switch: true,
+  Table: true,
+  Tag: true,
+  TextArea: true,
+  Thumbnail: true,
+  Toast: true,
+  Tooltip: true,
+  Typography: true,
+  useToast: true,
+  ToastProvider: true
+};
+Object.defineProperty(exports, "Alert", {
+  enumerable: true,
+  get: function get() {
+    return _Alert.default;
+  }
+});
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar.default;
+  }
+});
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function get() {
+    return _Badge.default;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function get() {
+    return _Card.Card;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _CheckboxInput.default;
+  }
+});
+Object.defineProperty(exports, "ColorPicker", {
+  enumerable: true,
+  get: function get() {
+    return _ColorPicker.default;
+  }
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function get() {
+    return _DatePicker.default;
+  }
+});
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function get() {
+    return _Dialog.Dialog;
+  }
+});
+Object.defineProperty(exports, "Dropzone", {
+  enumerable: true,
+  get: function get() {
+    return _Dropzone.default;
+  }
+});
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function get() {
+    return _Flex.default;
+  }
+});
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function get() {
+    return _Grid.default;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function get() {
+    return _Icon.default;
+  }
+});
+Object.defineProperty(exports, "IconItem", {
+  enumerable: true,
+  get: function get() {
+    return _IconItem.default;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input.default;
+  }
+});
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function get() {
+    return _Label.default;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function get() {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function get() {
+    return _Menu.default;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.Modal;
+  }
+});
+Object.defineProperty(exports, "Pagination", {
+  enumerable: true,
+  get: function get() {
+    return _Pagination.Pagination;
+  }
+});
+Object.defineProperty(exports, "Progress", {
+  enumerable: true,
+  get: function get() {
+    return _Progress.default;
+  }
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function get() {
+    return _RadioInput.default;
+  }
+});
+Object.defineProperty(exports, "Rating", {
+  enumerable: true,
+  get: function get() {
+    return _Rating.default;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _SelectInput.default;
+  }
+});
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function get() {
+    return _Slider.default;
+  }
+});
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function get() {
+    return _Spinner.default;
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function get() {
+    return _Switch.default;
+  }
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _Table.Table;
+  }
+});
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.default;
+  }
+});
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function get() {
+    return _TextAreaInput.default;
+  }
+});
+Object.defineProperty(exports, "Thumbnail", {
+  enumerable: true,
+  get: function get() {
+    return _Thumbnail.Thumbnail;
+  }
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function get() {
+    return _Toast.default;
+  }
+});
+Object.defineProperty(exports, "ToastProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ToastProvider.default;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function get() {
+    return _Tooltip.default;
+  }
+});
+Object.defineProperty(exports, "Typography", {
+  enumerable: true,
+  get: function get() {
+    return _Typography.default;
+  }
+});
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function get() {
+    return _useToast.default;
+  }
+});
+
+var _Alert = _interopRequireDefault(require("./components/Alert"));
+
+var _Avatar = _interopRequireDefault(require("./components/Avatar"));
+
+var _Badge = _interopRequireDefault(require("./components/Badge"));
+
+var _Button = _interopRequireDefault(require("./components/Button"));
+
+var _Card = require("./components/Card");
+
+var _CheckboxInput = _interopRequireDefault(require("./components/CheckboxInput"));
+
+var _ColorPicker = _interopRequireDefault(require("./components/ColorPicker"));
+
+var _DatePicker = _interopRequireDefault(require("./components/DatePicker"));
+
+var _Dialog = require("./components/Dialog");
+
+var _Dropzone = _interopRequireDefault(require("./components/Dropzone"));
+
+var _Flex = _interopRequireDefault(require("./components/Flex"));
+
+var _Grid = _interopRequireDefault(require("./components/Grid"));
+
+var _Icon = _interopRequireDefault(require("./components/Icon"));
+
+var _IconItem = _interopRequireDefault(require("./components/IconItem"));
+
+var _Input = _interopRequireDefault(require("./components/Input"));
+
+var _Label = _interopRequireDefault(require("./components/Label"));
+
+var _List = _interopRequireDefault(require("./components/List"));
+
+var _Menu = _interopRequireDefault(require("./components/Menu"));
+
+var _Modal = require("./components/Modal");
+
+var _Pagination = require("./components/Pagination");
+
+var _Progress = _interopRequireDefault(require("./components/Progress"));
+
+var _RadioInput = _interopRequireDefault(require("./components/RadioInput"));
+
+var _Rating = _interopRequireDefault(require("./components/Rating"));
+
+var _SelectInput = _interopRequireDefault(require("./components/SelectInput"));
+
+var _Slider = _interopRequireDefault(require("./components/Slider"));
+
+var _Spinner = _interopRequireDefault(require("./components/Spinner"));
+
+var _Switch = _interopRequireDefault(require("./components/Switch"));
+
+var _Table = require("./components/Table");
+
+var _Tabs = require("./components/Tabs");
+
+Object.keys(_Tabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Tabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tabs[key];
+    }
+  });
+});
+
+var _Tag = _interopRequireDefault(require("./components/Tag"));
+
+var _TextAreaInput = _interopRequireDefault(require("./components/TextAreaInput"));
+
+var _Thumbnail = require("./components/Thumbnail");
+
+var _Timeline = require("./components/Timeline");
+
+Object.keys(_Timeline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Timeline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Timeline[key];
+    }
+  });
+});
+
+var _Toast = _interopRequireDefault(require("./components/Toast"));
+
+var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
+
+var _Typography = _interopRequireDefault(require("./components/Typography"));
+
+var _useToast = _interopRequireDefault(require("./components/Toast/hooks/useToast"));
+
+var _ToastProvider = _interopRequireDefault(require("./components/Toast/contexts/ToastProvider"));
+
+var _theme = require("./shared/theme");
+
+Object.keys(_theme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _theme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _theme[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/react-app-env.d.js

@@ -0,0 +1,2 @@
+/// <reference types="react-scripts" />
+"use strict";

package/dist/shared/components/FocusLock/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface FocusLockProps {
+    isLocked: boolean;
+    children: ReactNode;
+}
+declare const FocusLock: ({ isLocked, children, ...otherProps }: FocusLockProps) => JSX.Element;
+export default FocusLock;
+//# sourceMappingURL=index.d.ts.map

package/dist/shared/components/FocusLock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/shared/components/FocusLock/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErD,UAAU,cAAc;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD,QAAA,MAAM,SAAS,0CAAkD,cAAc,gBAkE9E,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/shared/components/FocusLock/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _excluded = ["isLocked", "children"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 FocusLock = function FocusLock(_ref) {
+  var _ref$isLocked = _ref.isLocked,
+      isLocked = _ref$isLocked === void 0 ? true : _ref$isLocked,
+      children = _ref.children,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  var rootNode = (0, _react.useRef)(null); // const focusableItems = useRef([]);
+
+  var focusableItems = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var updateFocusableItems = function updateFocusableItems() {
+      if (rootNode !== null && rootNode !== void 0 && rootNode.current) {
+        focusableItems.current = rootNode.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), video');
+      }
+    };
+
+    var observer = new MutationObserver(function () {
+      updateFocusableItems();
+    });
+    updateFocusableItems();
+
+    if (rootNode !== null && rootNode !== void 0 && rootNode.current) {
+      observer.observe(rootNode.current, {
+        childList: true
+      });
+    }
+
+    return function () {
+      observer.disconnect();
+    };
+  }, [rootNode]);
+  (0, _react.useEffect)(function () {
+    var handleKeyPress = function handleKeyPress(event) {
+      if (!focusableItems.current) return;
+      var key = event.key,
+          shiftKey = event.shiftKey;
+      var _focusableItems$curre = focusableItems.current,
+          length = _focusableItems$curre.length,
+          firstItem = _focusableItems$curre[0],
+          lastItem = _focusableItems$curre[length - 1];
+
+      if (isLocked && key === 'Tab') {
+        // If only one item then prevent tabbing when locked
+        if (length === 1) {
+          event.preventDefault();
+          return;
+        } // If focused on last item then focus on first item when tab is pressed
+
+
+        if (!shiftKey && document.activeElement === lastItem) {
+          event.preventDefault();
+          firstItem.focus();
+          return;
+        } // If focused on first item then focus on last item when shift + tab is pressed
+
+
+        if (shiftKey && document.activeElement === firstItem) {
+          event.preventDefault();
+          lastItem.focus();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyPress);
+    return function () {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [isLocked, focusableItems]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, otherProps, {
+    ref: rootNode
+  }), children);
+};
+
+var _default = FocusLock;
+exports.default = _default;

package/dist/shared/global.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PoppinsFont = void 0;
+var PoppinsFont = 'https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;700&display=swap';
+exports.PoppinsFont = PoppinsFont;

package/dist/shared/hooks/breakpoints.d.ts

@@ -0,0 +1,9 @@
+export declare const breakpoints: {
+    mobile: number;
+    tablet: number;
+    'monitor-small': number;
+    'monitor-wide': number;
+    'monitor-ultra': number;
+};
+export declare type BreakpointsTypes = 'mobile' | 'tablet' | 'monitor-small' | 'monitor-wide' | 'monitor-ultra' | number;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/shared/hooks/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/breakpoints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAEF,oBAAY,gBAAgB,GACxB,QAAQ,GACR,QAAQ,GACR,eAAe,GACf,cAAc,GACd,eAAe,GACf,MAAM,CAAC"}

package/dist/shared/hooks/breakpoints.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.breakpoints = void 0;
+var breakpoints = {
+  mobile: 425,
+  tablet: 768,
+  'monitor-small': 1024,
+  'monitor-wide': 1440,
+  'monitor-ultra': 2560
+};
+exports.breakpoints = breakpoints;

package/dist/shared/hooks/useBreakpoint.d.ts

@@ -0,0 +1,9 @@
+import { BreakpointsTypes } from './breakpoints';
+/**
+ * Checks if the screen width matches the breakpoint in a certain direction everytime the screen resizes.
+ * @param breakpoint The target breakpoint to compare. Can use one of the specified breakpoints or a custom one passing a number.
+ * @param direction The direction to compare. "Down" will return true if the screen width is shorter than the breakpoint. "Up" will return true if it's larger.
+ * @returns If the screen width matches the breakpoint in a certain direction.
+ */
+export declare function useBreakpoint(breakpoint: BreakpointsTypes, direction?: 'up' | 'down'): boolean;
+//# sourceMappingURL=useBreakpoint.d.ts.map

package/dist/shared/hooks/useBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useBreakpoint.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,UAAU,EAAE,gBAAgB,EAAE,SAAS,GAAE,IAAI,GAAG,MAAe,WA4B5F"}

package/dist/shared/hooks/useBreakpoint.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBreakpoint = useBreakpoint;
+
+var _react = require("react");
+
+var _breakpoints = require("./breakpoints");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * Checks if the screen width matches the breakpoint in a certain direction everytime the screen resizes.
+ * @param breakpoint The target breakpoint to compare. Can use one of the specified breakpoints or a custom one passing a number.
+ * @param direction The direction to compare. "Down" will return true if the screen width is shorter than the breakpoint. "Up" will return true if it's larger.
+ * @returns If the screen width matches the breakpoint in a certain direction.
+ */
+function useBreakpoint(breakpoint) {
+  var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'down';
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      match = _useState2[0],
+      setMatch = _useState2[1];
+
+  var onWindowResize = (0, _react.useCallback)(function () {
+    var point = typeof breakpoint === 'number' ? breakpoint : _breakpoints.breakpoints[breakpoint];
+
+    switch (direction) {
+      case 'up':
+        setMatch(window.innerWidth >= point);
+        break;
+
+      case 'down':
+        setMatch(window.innerWidth <= point);
+        break;
+
+      default:
+        throw new Error("\"".concat(direction, "\" is not a valid breakpoint direction."));
+    }
+  }, [breakpoint, direction]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('resize', onWindowResize);
+    return function () {
+      window.removeEventListener('resize', onWindowResize);
+    };
+  }, [onWindowResize]);
+  return match;
+}

package/dist/shared/hooks/useKeyPress.d.ts

@@ -0,0 +1,2 @@
+export declare function useKeyPress(key: string, action: () => void): void;
+//# sourceMappingURL=useKeyPress.d.ts.map

package/dist/shared/hooks/useKeyPress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyPress.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useKeyPress.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,IAAI,QAW1D"}

package/dist/shared/hooks/useKeyPress.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useKeyPress = useKeyPress;
+
+var _react = require("react");
+
+function useKeyPress(key, action) {
+  (0, _react.useEffect)(function () {
+    var handlePress = function handlePress(event) {
+      if (event.key === key) action();
+    };
+
+    window.addEventListener('keydown', handlePress);
+    return function () {
+      window.removeEventListener('keydown', handlePress);
+    };
+  }, [action, key]);
+}

package/dist/shared/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+export declare const useOnClickOutside: (ref: RefObject<HTMLDivElement>, closeMenu: () => void) => void;
+//# sourceMappingURL=useOnClickOutside.d.ts.map

package/dist/shared/hooks/useOnClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,eAAO,MAAM,iBAAiB,QAAS,UAAU,cAAc,CAAC,aAAa,MAAM,IAAI,SActF,CAAC"}

package/dist/shared/hooks/useOnClickOutside.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnClickOutside = void 0;
+
+var _react = require("react");
+
+var useOnClickOutside = function useOnClickOutside(ref, closeMenu) {
+  (0, _react.useEffect)(function () {
+    var listener = function listener(event) {
+      if (ref.current && event.target && ref.current.contains(event.target)) {
+        return;
+      }
+
+      closeMenu();
+    };
+
+    document.addEventListener('mousedown', listener);
+    return function () {
+      document.removeEventListener('mousedown', listener);
+    };
+  }, [ref, closeMenu]);
+};
+
+exports.useOnClickOutside = useOnClickOutside;