@os-design/use-click-outside 1.0.21 → 1.0.23

package/dist/cjs/index.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 var _useEvent = _interopRequireDefault(require("@os-design/use-event"));
 var _react = require("react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var useClickOutside = function useClickOutside(target, listener) {
   var listenerRef = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
@@ -23,6 +23,5 @@ var useClickOutside = function useClickOutside(target, listener) {
   (0, _useEvent["default"])(document, 'mousedown', clickListener);
   (0, _useEvent["default"])(document, 'touchstart', clickListener);
 };
-var _default = useClickOutside;
-exports["default"] = _default;
+var _default = exports["default"] = useClickOutside;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_useEvent","_interopRequireDefault","require","_react","obj","__esModule","_typeof","Symbol","iterator","constructor","prototype","useClickOutside","target","listener","listenerRef","useRef","useEffect","current","clickListener","useCallback","event","element","Element","contains","useEvent","document","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport { RefObject, useCallback, useEffect, useRef } from 'react';\n\nconst useClickOutside = (\n  target: Element | RefObject<Element>,\n  listener: EventListener\n): void => {\n  const listenerRef = useRef<EventListener>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  const clickListener = useCallback(\n    (event) => {\n      if (typeof target !== 'object' || target === null) return;\n      const element = target instanceof Element ? target : target.current;\n      if (element === null || !element.contains) return;\n      if (!listenerRef.current || element.contains(event.target)) return;\n      listenerRef.current(event);\n    },\n    [target]\n  );\n\n  useEvent(document, 'mousedown', clickListener);\n  useEvent(document, 'touchstart', clickListener);\n};\n\nexport default useClickOutside;\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAkE,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,QAAAF,GAAA,sCAAAE,OAAA,wBAAAC,MAAA,uBAAAA,MAAA,CAAAC,QAAA,aAAAJ,GAAA,kBAAAA,GAAA,gBAAAA,GAAA,WAAAA,GAAA,yBAAAG,MAAA,IAAAH,GAAA,CAAAK,WAAA,KAAAF,MAAA,IAAAH,GAAA,KAAAG,MAAA,CAAAG,SAAA,qBAAAN,GAAA,KAAAE,OAAA,CAAAF,GAAA;AAElE,IAAMO,eAAe,GAAG,SAAlBA,eAAeA,CACnBC,MAAoC,EACpCC,QAAuB,EACd;EACT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAgB,CAAC;EAE3C,IAAAC,gBAAS,EAAC,YAAM;IACdF,WAAW,CAACG,OAAO,GAAGJ,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAMK,aAAa,GAAG,IAAAC,kBAAW,EAC/B,UAACC,KAAK,EAAK;IACT,IAAId,OAAA,CAAOM,MAAM,MAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;IACnD,IAAMS,OAAO,GAAGT,MAAM,YAAYU,OAAO,GAAGV,MAAM,GAAGA,MAAM,CAACK,OAAO;IACnE,IAAII,OAAO,KAAK,IAAI,IAAI,CAACA,OAAO,CAACE,QAAQ,EAAE;IAC3C,IAAI,CAACT,WAAW,CAACG,OAAO,IAAII,OAAO,CAACE,QAAQ,CAACH,KAAK,CAACR,MAAM,CAAC,EAAE;IAC5DE,WAAW,CAACG,OAAO,CAACG,KAAK,CAAC;EAC5B,CAAC,EACD,CAACR,MAAM,CACT,CAAC;EAED,IAAAY,oBAAQ,EAACC,QAAQ,EAAE,WAAW,EAAEP,aAAa,CAAC;EAC9C,IAAAM,oBAAQ,EAACC,QAAQ,EAAE,YAAY,EAAEP,aAAa,CAAC;AACjD,CAAC;AAAC,IAAAQ,QAAA,GAEaf,eAAe;AAAAgB,OAAA,cAAAD,QAAA"}
+{"version":3,"file":"index.js","names":["_useEvent","_interopRequireDefault","require","_react","obj","__esModule","_typeof","o","Symbol","iterator","constructor","prototype","useClickOutside","target","listener","listenerRef","useRef","useEffect","current","clickListener","useCallback","event","element","Element","contains","useEvent","document","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport { RefObject, useCallback, useEffect, useRef } from 'react';\n\nconst useClickOutside = (\n  target: Element | RefObject<Element>,\n  listener: EventListener\n): void => {\n  const listenerRef = useRef<EventListener>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  const clickListener = useCallback(\n    (event) => {\n      if (typeof target !== 'object' || target === null) return;\n      const element = target instanceof Element ? target : target.current;\n      if (element === null || !element.contains) return;\n      if (!listenerRef.current || element.contains(event.target)) return;\n      listenerRef.current(event);\n    },\n    [target]\n  );\n\n  useEvent(document, 'mousedown', clickListener);\n  useEvent(document, 'touchstart', clickListener);\n};\n\nexport default useClickOutside;\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAkE,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,QAAAC,CAAA,sCAAAD,OAAA,wBAAAE,MAAA,uBAAAA,MAAA,CAAAC,QAAA,aAAAF,CAAA,kBAAAA,CAAA,gBAAAA,CAAA,WAAAA,CAAA,yBAAAC,MAAA,IAAAD,CAAA,CAAAG,WAAA,KAAAF,MAAA,IAAAD,CAAA,KAAAC,MAAA,CAAAG,SAAA,qBAAAJ,CAAA,KAAAD,OAAA,CAAAC,CAAA;AAElE,IAAMK,eAAe,GAAG,SAAlBA,eAAeA,CACnBC,MAAoC,EACpCC,QAAuB,EACd;EACT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAgB,CAAC;EAE3C,IAAAC,gBAAS,EAAC,YAAM;IACdF,WAAW,CAACG,OAAO,GAAGJ,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAMK,aAAa,GAAG,IAAAC,kBAAW,EAC/B,UAACC,KAAK,EAAK;IACT,IAAIf,OAAA,CAAOO,MAAM,MAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;IACnD,IAAMS,OAAO,GAAGT,MAAM,YAAYU,OAAO,GAAGV,MAAM,GAAGA,MAAM,CAACK,OAAO;IACnE,IAAII,OAAO,KAAK,IAAI,IAAI,CAACA,OAAO,CAACE,QAAQ,EAAE;IAC3C,IAAI,CAACT,WAAW,CAACG,OAAO,IAAII,OAAO,CAACE,QAAQ,CAACH,KAAK,CAACR,MAAM,CAAC,EAAE;IAC5DE,WAAW,CAACG,OAAO,CAACG,KAAK,CAAC;EAC5B,CAAC,EACD,CAACR,MAAM,CACT,CAAC;EAED,IAAAY,oBAAQ,EAACC,QAAQ,EAAE,WAAW,EAAEP,aAAa,CAAC;EAC9C,IAAAM,oBAAQ,EAACC,QAAQ,EAAE,YAAY,EAAEP,aAAa,CAAC;AACjD,CAAC;AAAC,IAAAQ,QAAA,GAAAC,OAAA,cAEahB,eAAe","ignoreList":[]}

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useEvent","useCallback","useEffect","useRef","useClickOutside","target","listener","listenerRef","current","clickListener","event","element","Element","contains","document"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport { RefObject, useCallback, useEffect, useRef } from 'react';\n\nconst useClickOutside = (\n  target: Element | RefObject<Element>,\n  listener: EventListener\n): void => {\n  const listenerRef = useRef<EventListener>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  const clickListener = useCallback(\n    (event) => {\n      if (typeof target !== 'object' || target === null) return;\n      const element = target instanceof Element ? target : target.current;\n      if (element === null || !element.contains) return;\n      if (!listenerRef.current || element.contains(event.target)) return;\n      listenerRef.current(event);\n    },\n    [target]\n  );\n\n  useEvent(document, 'mousedown', clickListener);\n  useEvent(document, 'touchstart', clickListener);\n};\n\nexport default useClickOutside;\n"],"mappings":"AAAA,OAAOA,QAAQ,MAAM,sBAAsB;AAC3C,SAAoBC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEjE,MAAMC,eAAe,GAAGA,CACtBC,MAAoC,EACpCC,QAAuB,KACd;EACT,MAAMC,WAAW,GAAGJ,MAAM,CAAgB,CAAC;EAE3CD,SAAS,CAAC,MAAM;IACdK,WAAW,CAACC,OAAO,GAAGF,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMG,aAAa,GAAGR,WAAW,CAC9BS,KAAK,IAAK;IACT,IAAI,OAAOL,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;IACnD,MAAMM,OAAO,GAAGN,MAAM,YAAYO,OAAO,GAAGP,MAAM,GAAGA,MAAM,CAACG,OAAO;IACnE,IAAIG,OAAO,KAAK,IAAI,IAAI,CAACA,OAAO,CAACE,QAAQ,EAAE;IAC3C,IAAI,CAACN,WAAW,CAACC,OAAO,IAAIG,OAAO,CAACE,QAAQ,CAACH,KAAK,CAACL,MAAM,CAAC,EAAE;IAC5DE,WAAW,CAACC,OAAO,CAACE,KAAK,CAAC;EAC5B,CAAC,EACD,CAACL,MAAM,CACT,CAAC;EAEDL,QAAQ,CAACc,QAAQ,EAAE,WAAW,EAAEL,aAAa,CAAC;EAC9CT,QAAQ,CAACc,QAAQ,EAAE,YAAY,EAAEL,aAAa,CAAC;AACjD,CAAC;AAED,eAAeL,eAAe"}
+{"version":3,"file":"index.js","names":["useEvent","useCallback","useEffect","useRef","useClickOutside","target","listener","listenerRef","current","clickListener","event","element","Element","contains","document"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport { RefObject, useCallback, useEffect, useRef } from 'react';\n\nconst useClickOutside = (\n  target: Element | RefObject<Element>,\n  listener: EventListener\n): void => {\n  const listenerRef = useRef<EventListener>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  const clickListener = useCallback(\n    (event) => {\n      if (typeof target !== 'object' || target === null) return;\n      const element = target instanceof Element ? target : target.current;\n      if (element === null || !element.contains) return;\n      if (!listenerRef.current || element.contains(event.target)) return;\n      listenerRef.current(event);\n    },\n    [target]\n  );\n\n  useEvent(document, 'mousedown', clickListener);\n  useEvent(document, 'touchstart', clickListener);\n};\n\nexport default useClickOutside;\n"],"mappings":"AAAA,OAAOA,QAAQ,MAAM,sBAAsB;AAC3C,SAAoBC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEjE,MAAMC,eAAe,GAAGA,CACtBC,MAAoC,EACpCC,QAAuB,KACd;EACT,MAAMC,WAAW,GAAGJ,MAAM,CAAgB,CAAC;EAE3CD,SAAS,CAAC,MAAM;IACdK,WAAW,CAACC,OAAO,GAAGF,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMG,aAAa,GAAGR,WAAW,CAC9BS,KAAK,IAAK;IACT,IAAI,OAAOL,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;IACnD,MAAMM,OAAO,GAAGN,MAAM,YAAYO,OAAO,GAAGP,MAAM,GAAGA,MAAM,CAACG,OAAO;IACnE,IAAIG,OAAO,KAAK,IAAI,IAAI,CAACA,OAAO,CAACE,QAAQ,EAAE;IAC3C,IAAI,CAACN,WAAW,CAACC,OAAO,IAAIG,OAAO,CAACE,QAAQ,CAACH,KAAK,CAACL,MAAM,CAAC,EAAE;IAC5DE,WAAW,CAACC,OAAO,CAACE,KAAK,CAAC;EAC5B,CAAC,EACD,CAACL,MAAM,CACT,CAAC;EAEDL,QAAQ,CAACc,QAAQ,EAAE,WAAW,EAAEL,aAAa,CAAC;EAC9CT,QAAQ,CAACc,QAAQ,EAAE,YAAY,EAAEL,aAAa,CAAC;AACjD,CAAC;AAED,eAAeL,eAAe","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/use-click-outside",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -30,10 +30,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/use-event": "^1.0.19"
+    "@os-design/use-event": "^1.0.21"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "2605fbf8f46c78800cd4ba6dcb0dd895a893bf96"
+  "gitHead": "6c92e27c799cae9ae9930e734868d8da35c61cb6"
 }

package/src/index.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/blocks';
+import UseClickOutsideExample from './index.example';
+
+<Meta title='Utils/useClickOutside' />
+
+# useClickOutside
+
+Sets the listener that will be called when the click event occurs outside the target element.
+
+## Example of usage
+
+```tsx
+import React, { useCallback, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { useClickOutside } from '@os-design/utils';
+
+const Container = styled.div`
+  background-color: hsl(0, 50%, 50%);
+  width: 10em;
+  height: 10em;
+`;
+
+const UseClickOutsideExample: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>();
+  const [numberOfEvents, setNumberOfEvents] = useState(0);
+
+  const incrementNumberOfEvents = useCallback(() => {
+    setNumberOfEvents(numberOfEvents + 1);
+  }, [numberOfEvents]);
+
+  useClickOutside(containerRef.current, incrementNumberOfEvents);
+
+  return (
+    <>
+      <Container ref={containerRef} />
+      <p>Number of click events: {numberOfEvents}</p>
+    </>
+  );
+};
+
+export default UseClickOutsideExample;
+```
+
+<UseClickOutsideExample />
+
+Try clicking inside the red rectangle and outside it.