@knocklabs/react 0.7.19 → 0.7.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/modules/core/hooks/useOnBottomScroll.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map +1 -1
- package/dist/esm/modules/core/hooks/useOnBottomScroll.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs +29 -26
- package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map +1 -1
- package/dist/types/modules/core/hooks/useComponentVisible.d.ts +1 -1
- package/dist/types/modules/core/hooks/useOnBottomScroll.d.ts +1 -1
- package/dist/types/modules/core/hooks/useOnBottomScroll.d.ts.map +1 -1
- package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts.map +1 -1
- package/package.json +8 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.7.21
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 60c383c: fix: prevent popover from reopening when clicking notification icon button
|
|
8
|
+
|
|
9
|
+
## 0.7.20
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies [2a0b3e2]
|
|
14
|
+
- @knocklabs/react-core@0.7.0
|
|
15
|
+
- @knocklabs/client@0.15.0
|
|
16
|
+
|
|
3
17
|
## 0.7.19
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOnBottomScroll.js","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\ntype OnBottomScrollOptions = {\n ref: RefObject<HTMLDivElement |
|
|
1
|
+
{"version":3,"file":"useOnBottomScroll.js","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\ntype OnBottomScrollOptions = {\n ref: RefObject<HTMLDivElement | null>;\n callback: () => void;\n offset?: number;\n};\n\nconst noop = () => {};\n\nfunction useOnBottomScroll(options: OnBottomScrollOptions) {\n const callback = options.callback ?? noop;\n const ref = options.ref;\n const offset = options.offset ?? 0;\n\n const debouncedCallback = useMemo(() => debounce(callback, 200), [callback]);\n\n const handleOnScroll = useCallback(() => {\n if (ref.current) {\n const scrollNode = ref.current;\n const scrollContainerBottomPosition = Math.round(\n scrollNode.scrollTop + scrollNode.clientHeight,\n );\n const scrollPosition = Math.round(scrollNode.scrollHeight - offset);\n\n if (scrollPosition <= scrollContainerBottomPosition) {\n debouncedCallback();\n }\n }\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [debouncedCallback]);\n\n useEffect(() => {\n let element: HTMLElement | undefined;\n if (ref.current) {\n element = ref.current;\n ref.current.addEventListener(\"scroll\", handleOnScroll);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\"scroll\", handleOnScroll);\n }\n };\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","current","scrollNode","scrollContainerBottomPosition","Math","round","scrollTop","clientHeight","scrollHeight","useEffect","element","addEventListener","removeEventListener"],"mappings":"kIASMA,EAAOA,IAAM,CAAC,EAEpB,SAASC,EAAkBC,EAAgC,CACnDC,MAAAA,EAAWD,EAAQC,UAAYH,EAC/BI,EAAMF,EAAQE,IACdC,EAASH,EAAQG,QAAU,EAE3BC,EAAoBC,UAAQ,IAAMC,EAAAA,QAASL,EAAU,GAAG,EAAG,CAACA,CAAQ,CAAC,EAErEM,EAAiBC,EAAAA,YAAY,IAAM,CACvC,GAAIN,EAAIO,QAAS,CACf,MAAMC,EAAaR,EAAIO,QACjBE,EAAgCC,KAAKC,MACzCH,EAAWI,UAAYJ,EAAWK,YACpC,EACuBH,KAAKC,MAAMH,EAAWM,aAAeb,CAAM,GAE5CQ,GACFP,EAAA,CACpB,CACF,EAGC,CAACA,CAAiB,CAAC,EAEtBa,EAAAA,UAAU,IAAM,CACVC,IAAAA,EACJ,OAAIhB,EAAIO,UACNS,EAAUhB,EAAIO,QACVA,EAAAA,QAAQU,iBAAiB,SAAUZ,CAAc,GAGhD,IAAM,CACPW,GACME,EAAAA,oBAAoB,SAAUb,CAAc,CAExD,CAAA,EAGC,CAACA,CAAc,CAAC,CACrB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@knocklabs/react-core"),g=require("@popperjs/core"),a=require("react"),E=require("../../../core/hooks/useComponentVisible.js"),F=require("../NotificationFeed/NotificationFeed.js");require("../NotificationFeed/NotificationFeedHeader.js");;/* empty css */;/* empty css */const N=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=N(a),_=({store:e,feedClient:t})=>{e.metadata.unseen_count>0&&t.markAllAsSeen()},C=({isVisible:e,onOpen:t=_,onClose:l,buttonRef:r,closeOnClickOutside:p=!0,placement:c="bottom-end",...m})=>{const{t:q}=d.useTranslations(),{colorMode:v,feedClient:f,useFeedStore:y}=d.useKnockFeed(),s=y(),{ref:n}=E(e,o=>{var u;o.target instanceof Element&&((u=r.current)!=null&&u.contains(o.target))||l(o)},{closeOnClickOutside:p});return a.useEffect(()=>{e&&t&&t({store:s,feedClient:f})},[e,t,s,f]),a.useEffect(()=>{if(r.current&&n.current){const o=g.createPopper(r.current,n.current,{strategy:"fixed",placement:c,modifiers:[{name:"offset",options:{offset:[0,8]}}]});return()=>{o.destroy()}}},[r,n,c]),i.default.createElement("div",{className:`rnf-notification-feed-popover rnf-notification-feed-popover--${v}`,style:{visibility:e?"visible":"hidden",opacity:e?1:0},ref:n,role:"dialog","aria-label":q("notifications"),tabIndex:-1},i.default.createElement("div",{className:"rnf-notification-feed-popover__inner"},i.default.createElement(F.NotificationFeed,{...m})))};exports.NotificationFeedPopover=C;
|
|
2
2
|
//# sourceMappingURL=NotificationFeedPopover.js.map
|
package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeedPopover.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n store: FeedStoreState;\n feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n if (store.metadata.unseen_count > 0) {\n feedClient.markAllAsSeen();\n }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n isVisible: boolean;\n onOpen?: (arg: OnOpenOptions) => void;\n onClose: (e: Event) => void;\n buttonRef: RefObject<HTMLElement | null>;\n closeOnClickOutside?: boolean;\n placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n NotificationFeedPopoverProps\n> = ({\n isVisible,\n onOpen = defaultOnOpen,\n onClose,\n buttonRef,\n closeOnClickOutside = true,\n placement = \"bottom-end\",\n ...feedProps\n}) => {\n const { t } = useTranslations();\n const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n const store = useFeedStore();\n\n const { ref: popperRef } = useComponentVisible(isVisible
|
|
1
|
+
{"version":3,"file":"NotificationFeedPopover.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n store: FeedStoreState;\n feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n if (store.metadata.unseen_count > 0) {\n feedClient.markAllAsSeen();\n }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n isVisible: boolean;\n onOpen?: (arg: OnOpenOptions) => void;\n onClose: (e: Event) => void;\n buttonRef: RefObject<HTMLElement | null>;\n closeOnClickOutside?: boolean;\n placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n NotificationFeedPopoverProps\n> = ({\n isVisible,\n onOpen = defaultOnOpen,\n onClose,\n buttonRef,\n closeOnClickOutside = true,\n placement = \"bottom-end\",\n ...feedProps\n}) => {\n const { t } = useTranslations();\n const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n const store = useFeedStore();\n\n const { ref: popperRef } = useComponentVisible(\n isVisible,\n (event) => {\n // If the button is clicked, let that onClick handler handle the close\n if (\n event.target instanceof Element &&\n buttonRef.current?.contains(event.target)\n ) {\n return;\n }\n onClose(event);\n },\n {\n closeOnClickOutside,\n },\n );\n\n useEffect(() => {\n // Whenever the feed is opened, we want to invoke the `onOpen` callback\n // function to handle any side effects.\n if (isVisible && onOpen) {\n onOpen({ store, feedClient });\n }\n }, [isVisible, onOpen, store, feedClient]);\n\n useEffect(() => {\n if (buttonRef.current && popperRef.current) {\n const popperInstance = createPopper(\n buttonRef.current,\n popperRef.current,\n {\n strategy: \"fixed\",\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 8],\n },\n },\n ],\n },\n );\n\n // Cleanup\n return () => {\n popperInstance.destroy();\n };\n }\n }, [buttonRef, popperRef, placement]);\n\n return (\n <div\n className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n style={{\n visibility: isVisible ? \"visible\" : \"hidden\",\n opacity: isVisible ? 1 : 0,\n }}\n ref={popperRef}\n role=\"dialog\"\n aria-label={t(\"notifications\")}\n tabIndex={-1}\n >\n <div className=\"rnf-notification-feed-popover__inner\">\n <NotificationFeed {...feedProps} />\n </div>\n </div>\n );\n};\n"],"names":["defaultOnOpen","store","feedClient","metadata","unseen_count","markAllAsSeen","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","t","useTranslations","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","event","target","Element","current","contains","useEffect","popperInstance","createPopper","strategy","modifiers","name","options","offset","destroy","visibility","opacity","React","NotificationFeed"],"mappings":"2dAeMA,EAAgBA,CAAC,CAAEC,MAAAA,EAAOC,WAAAA,CAA0B,IAAM,CAC1DD,EAAME,SAASC,aAAe,GAChCF,EAAWG,cAAc,CAE7B,EAWaC,EAETA,CAAC,CACHC,UAAAA,EACAC,OAAAA,EAASR,EACTS,QAAAA,EACAC,UAAAA,EACAC,oBAAAA,EAAsB,GACtBC,UAAAA,EAAY,aACZ,GAAGC,CACL,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,kBAAgB,EACxB,CAAEC,UAAAA,EAAWd,WAAAA,EAAYe,aAAAA,GAAiBC,eAAa,EACvDjB,EAAQgB,EAAa,EAErB,CAAEE,IAAKC,CAAAA,EAAcC,EACzBd,EACWe,GAAA,OAGPA,EAAMC,kBAAkBC,WACxBd,EAAAA,EAAUe,UAAVf,MAAAA,EAAmBgB,SAASJ,EAAMC,UAIpCd,EAAQa,CAAK,CAAA,EAEf,CACEX,oBAAAA,CAAAA,CAEJ,EAEAgB,OAAAA,EAAAA,UAAU,IAAM,CAGVpB,GAAaC,GACRA,EAAA,CAAEP,MAAAA,EAAOC,WAAAA,CAAAA,CAAY,GAE7B,CAACK,EAAWC,EAAQP,EAAOC,CAAU,CAAC,EAEzCyB,EAAAA,UAAU,IAAM,CACVjB,GAAAA,EAAUe,SAAWL,EAAUK,QAAS,CAC1C,MAAMG,EAAiBC,EAAAA,aACrBnB,EAAUe,QACVL,EAAUK,QACV,CACEK,SAAU,QACVlB,UAAAA,EACAmB,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,CAAC,CAAA,CAEhB,CAAA,CAAA,CAGP,EAGA,MAAO,IAAM,CACXN,EAAeO,QAAQ,CACzB,CAAA,CAED,EAAA,CAACzB,EAAWU,EAAWR,CAAS,CAAC,0BAGjC,MACC,CAAA,UAAW,gEAAgEI,CAAS,GACpF,MAAO,CACLoB,WAAY7B,EAAY,UAAY,SACpC8B,QAAS9B,EAAY,EAAI,CAC3B,EACA,IAAKa,EACL,KAAK,SACL,aAAYN,EAAE,eAAe,EAC7B,SAAU,IAETwB,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,wCACbA,EAAAA,QAAA,cAACC,oBAAiB,GAAI1B,CAAAA,CAAU,CAClC,CACF,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOnBottomScroll.mjs","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\ntype OnBottomScrollOptions = {\n ref: RefObject<HTMLDivElement |
|
|
1
|
+
{"version":3,"file":"useOnBottomScroll.mjs","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\ntype OnBottomScrollOptions = {\n ref: RefObject<HTMLDivElement | null>;\n callback: () => void;\n offset?: number;\n};\n\nconst noop = () => {};\n\nfunction useOnBottomScroll(options: OnBottomScrollOptions) {\n const callback = options.callback ?? noop;\n const ref = options.ref;\n const offset = options.offset ?? 0;\n\n const debouncedCallback = useMemo(() => debounce(callback, 200), [callback]);\n\n const handleOnScroll = useCallback(() => {\n if (ref.current) {\n const scrollNode = ref.current;\n const scrollContainerBottomPosition = Math.round(\n scrollNode.scrollTop + scrollNode.clientHeight,\n );\n const scrollPosition = Math.round(scrollNode.scrollHeight - offset);\n\n if (scrollPosition <= scrollContainerBottomPosition) {\n debouncedCallback();\n }\n }\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [debouncedCallback]);\n\n useEffect(() => {\n let element: HTMLElement | undefined;\n if (ref.current) {\n element = ref.current;\n ref.current.addEventListener(\"scroll\", handleOnScroll);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\"scroll\", handleOnScroll);\n }\n };\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","current","scrollNode","scrollContainerBottomPosition","Math","round","scrollTop","clientHeight","scrollHeight","useEffect","element","addEventListener","removeEventListener"],"mappings":";;AASA,MAAMA,IAAOA,MAAM;AAAC;AAEpB,SAASC,EAAkBC,GAAgC;AACnDC,QAAAA,IAAWD,EAAQC,YAAYH,GAC/BI,IAAMF,EAAQE,KACdC,IAASH,EAAQG,UAAU,GAE3BC,IAAoBC,EAAQ,MAAMC,EAASL,GAAU,GAAG,GAAG,CAACA,CAAQ,CAAC,GAErEM,IAAiBC,EAAY,MAAM;AACvC,QAAIN,EAAIO,SAAS;AACf,YAAMC,IAAaR,EAAIO,SACjBE,IAAgCC,KAAKC,MACzCH,EAAWI,YAAYJ,EAAWK,YACpC;AAGA,MAFuBH,KAAKC,MAAMH,EAAWM,eAAeb,CAAM,KAE5CQ,KACFP,EAAA;AAAA,IACpB;AAAA,EACF,GAGC,CAACA,CAAiB,CAAC;AAEtBa,EAAAA,EAAU,MAAM;AACVC,QAAAA;AACJ,WAAIhB,EAAIO,YACNS,IAAUhB,EAAIO,SACVA,EAAAA,QAAQU,iBAAiB,UAAUZ,CAAc,IAGhD,MAAM;AACX,MAAIW,KACME,EAAAA,oBAAoB,UAAUb,CAAc;AAAA,IAExD;AAAA,EAAA,GAGC,CAACA,CAAc,CAAC;AACrB;"}
|
package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { useTranslations as
|
|
2
|
-
import { createPopper as
|
|
3
|
-
import
|
|
1
|
+
import { useTranslations as E, useKnockFeed as _ } from "@knocklabs/react-core";
|
|
2
|
+
import { createPopper as g } from "@popperjs/core";
|
|
3
|
+
import i, { useEffect as p } from "react";
|
|
4
4
|
import F from "../../../core/hooks/useComponentVisible.mjs";
|
|
5
5
|
import { NotificationFeed as N } from "../NotificationFeed/NotificationFeed.mjs";
|
|
6
6
|
import "../NotificationFeed/NotificationFeedHeader.mjs";
|
|
@@ -11,36 +11,39 @@ const x = ({
|
|
|
11
11
|
feedClient: t
|
|
12
12
|
}) => {
|
|
13
13
|
e.metadata.unseen_count > 0 && t.markAllAsSeen();
|
|
14
|
-
},
|
|
14
|
+
}, M = ({
|
|
15
15
|
isVisible: e,
|
|
16
16
|
onOpen: t = x,
|
|
17
|
-
onClose:
|
|
17
|
+
onClose: m,
|
|
18
18
|
buttonRef: r,
|
|
19
|
-
closeOnClickOutside:
|
|
20
|
-
placement:
|
|
21
|
-
...
|
|
19
|
+
closeOnClickOutside: d = !0,
|
|
20
|
+
placement: a = "bottom-end",
|
|
21
|
+
...l
|
|
22
22
|
}) => {
|
|
23
23
|
const {
|
|
24
|
-
t:
|
|
25
|
-
} =
|
|
26
|
-
colorMode:
|
|
24
|
+
t: u
|
|
25
|
+
} = E(), {
|
|
26
|
+
colorMode: v,
|
|
27
27
|
feedClient: f,
|
|
28
|
-
useFeedStore:
|
|
29
|
-
} = _(),
|
|
30
|
-
ref:
|
|
31
|
-
} = F(e,
|
|
32
|
-
|
|
28
|
+
useFeedStore: y
|
|
29
|
+
} = _(), c = y(), {
|
|
30
|
+
ref: n
|
|
31
|
+
} = F(e, (o) => {
|
|
32
|
+
var s;
|
|
33
|
+
o.target instanceof Element && ((s = r.current) != null && s.contains(o.target)) || m(o);
|
|
34
|
+
}, {
|
|
35
|
+
closeOnClickOutside: d
|
|
33
36
|
});
|
|
34
|
-
return
|
|
37
|
+
return p(() => {
|
|
35
38
|
e && t && t({
|
|
36
|
-
store:
|
|
39
|
+
store: c,
|
|
37
40
|
feedClient: f
|
|
38
41
|
});
|
|
39
|
-
}, [e, t,
|
|
40
|
-
if (r.current &&
|
|
41
|
-
const
|
|
42
|
+
}, [e, t, c, f]), p(() => {
|
|
43
|
+
if (r.current && n.current) {
|
|
44
|
+
const o = g(r.current, n.current, {
|
|
42
45
|
strategy: "fixed",
|
|
43
|
-
placement:
|
|
46
|
+
placement: a,
|
|
44
47
|
modifiers: [{
|
|
45
48
|
name: "offset",
|
|
46
49
|
options: {
|
|
@@ -49,15 +52,15 @@ const x = ({
|
|
|
49
52
|
}]
|
|
50
53
|
});
|
|
51
54
|
return () => {
|
|
52
|
-
|
|
55
|
+
o.destroy();
|
|
53
56
|
};
|
|
54
57
|
}
|
|
55
|
-
}, [r,
|
|
58
|
+
}, [r, n, a]), /* @__PURE__ */ i.createElement("div", { className: `rnf-notification-feed-popover rnf-notification-feed-popover--${v}`, style: {
|
|
56
59
|
visibility: e ? "visible" : "hidden",
|
|
57
60
|
opacity: e ? 1 : 0
|
|
58
|
-
}, ref:
|
|
61
|
+
}, ref: n, role: "dialog", "aria-label": u("notifications"), tabIndex: -1 }, /* @__PURE__ */ i.createElement("div", { className: "rnf-notification-feed-popover__inner" }, /* @__PURE__ */ i.createElement(N, { ...l })));
|
|
59
62
|
};
|
|
60
63
|
export {
|
|
61
|
-
|
|
64
|
+
M as NotificationFeedPopover
|
|
62
65
|
};
|
|
63
66
|
//# sourceMappingURL=NotificationFeedPopover.mjs.map
|
package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n store: FeedStoreState;\n feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n if (store.metadata.unseen_count > 0) {\n feedClient.markAllAsSeen();\n }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n isVisible: boolean;\n onOpen?: (arg: OnOpenOptions) => void;\n onClose: (e: Event) => void;\n buttonRef: RefObject<HTMLElement | null>;\n closeOnClickOutside?: boolean;\n placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n NotificationFeedPopoverProps\n> = ({\n isVisible,\n onOpen = defaultOnOpen,\n onClose,\n buttonRef,\n closeOnClickOutside = true,\n placement = \"bottom-end\",\n ...feedProps\n}) => {\n const { t } = useTranslations();\n const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n const store = useFeedStore();\n\n const { ref: popperRef } = useComponentVisible(isVisible
|
|
1
|
+
{"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n store: FeedStoreState;\n feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n if (store.metadata.unseen_count > 0) {\n feedClient.markAllAsSeen();\n }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n isVisible: boolean;\n onOpen?: (arg: OnOpenOptions) => void;\n onClose: (e: Event) => void;\n buttonRef: RefObject<HTMLElement | null>;\n closeOnClickOutside?: boolean;\n placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n NotificationFeedPopoverProps\n> = ({\n isVisible,\n onOpen = defaultOnOpen,\n onClose,\n buttonRef,\n closeOnClickOutside = true,\n placement = \"bottom-end\",\n ...feedProps\n}) => {\n const { t } = useTranslations();\n const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n const store = useFeedStore();\n\n const { ref: popperRef } = useComponentVisible(\n isVisible,\n (event) => {\n // If the button is clicked, let that onClick handler handle the close\n if (\n event.target instanceof Element &&\n buttonRef.current?.contains(event.target)\n ) {\n return;\n }\n onClose(event);\n },\n {\n closeOnClickOutside,\n },\n );\n\n useEffect(() => {\n // Whenever the feed is opened, we want to invoke the `onOpen` callback\n // function to handle any side effects.\n if (isVisible && onOpen) {\n onOpen({ store, feedClient });\n }\n }, [isVisible, onOpen, store, feedClient]);\n\n useEffect(() => {\n if (buttonRef.current && popperRef.current) {\n const popperInstance = createPopper(\n buttonRef.current,\n popperRef.current,\n {\n strategy: \"fixed\",\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 8],\n },\n },\n ],\n },\n );\n\n // Cleanup\n return () => {\n popperInstance.destroy();\n };\n }\n }, [buttonRef, popperRef, placement]);\n\n return (\n <div\n className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n style={{\n visibility: isVisible ? \"visible\" : \"hidden\",\n opacity: isVisible ? 1 : 0,\n }}\n ref={popperRef}\n role=\"dialog\"\n aria-label={t(\"notifications\")}\n tabIndex={-1}\n >\n <div className=\"rnf-notification-feed-popover__inner\">\n <NotificationFeed {...feedProps} />\n </div>\n </div>\n );\n};\n"],"names":["defaultOnOpen","store","feedClient","metadata","unseen_count","markAllAsSeen","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","t","useTranslations","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","event","target","Element","current","contains","useEffect","popperInstance","createPopper","strategy","modifiers","name","options","offset","destroy","visibility","opacity","React","NotificationFeed"],"mappings":";;;;;;;;AAeA,MAAMA,IAAgBA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,YAAAA;AAA0B,MAAM;AAC1DD,EAAAA,EAAME,SAASC,eAAe,KAChCF,EAAWG,cAAc;AAE7B,GAWaC,IAETA,CAAC;AAAA,EACHC,WAAAA;AAAAA,EACAC,QAAAA,IAASR;AAAAA,EACTS,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,qBAAAA,IAAsB;AAAA,EACtBC,WAAAA,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GACxB;AAAA,IAAEC,WAAAA;AAAAA,IAAWd,YAAAA;AAAAA,IAAYe,cAAAA;AAAAA,MAAiBC,EAAa,GACvDjB,IAAQgB,EAAa,GAErB;AAAA,IAAEE,KAAKC;AAAAA,EAAAA,IAAcC,EACzBd,GACCe,CAAUA,MAAA;;AAGPA,IAAAA,EAAMC,kBAAkBC,aACxBd,IAAAA,EAAUe,YAAVf,QAAAA,EAAmBgB,SAASJ,EAAMC,YAIpCd,EAAQa,CAAK;AAAA,EAAA,GAEf;AAAA,IACEX,qBAAAA;AAAAA,EAAAA,CAEJ;AAEAgB,SAAAA,EAAU,MAAM;AAGd,IAAIpB,KAAaC,KACRA,EAAA;AAAA,MAAEP,OAAAA;AAAAA,MAAOC,YAAAA;AAAAA,IAAAA,CAAY;AAAA,KAE7B,CAACK,GAAWC,GAAQP,GAAOC,CAAU,CAAC,GAEzCyB,EAAU,MAAM;AACVjB,QAAAA,EAAUe,WAAWL,EAAUK,SAAS;AAC1C,YAAMG,IAAiBC,EACrBnB,EAAUe,SACVL,EAAUK,SACV;AAAA,QACEK,UAAU;AAAA,QACVlB,WAAAA;AAAAA,QACAmB,WAAW,CACT;AAAA,UACEC,MAAM;AAAA,UACNC,SAAS;AAAA,YACPC,QAAQ,CAAC,GAAG,CAAC;AAAA,UAAA;AAAA,QAEhB,CAAA;AAAA,MAAA,CAGP;AAGA,aAAO,MAAM;AACXN,QAAAA,EAAeO,QAAQ;AAAA,MACzB;AAAA,IAAA;AAAA,EAED,GAAA,CAACzB,GAAWU,GAAWR,CAAS,CAAC,mCAGjC,OACC,EAAA,WAAW,gEAAgEI,CAAS,IACpF,OAAO;AAAA,IACLoB,YAAY7B,IAAY,YAAY;AAAA,IACpC8B,SAAS9B,IAAY,IAAI;AAAA,EAC3B,GACA,KAAKa,GACL,MAAK,UACL,cAAYN,EAAE,eAAe,GAC7B,UAAU,MAETwB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,0CACbA,gBAAAA,EAAA,cAACC,KAAiB,GAAI1B,EAAAA,CAAU,CAClC,CACF;AAEJ;"}
|
|
@@ -2,7 +2,7 @@ type Options = {
|
|
|
2
2
|
closeOnClickOutside: boolean;
|
|
3
3
|
};
|
|
4
4
|
export default function useComponentVisible(isVisible: boolean, onClose: (event: Event) => void, options: Options): {
|
|
5
|
-
ref: import('react').RefObject<HTMLDivElement>;
|
|
5
|
+
ref: import('react').RefObject<HTMLDivElement | null>;
|
|
6
6
|
};
|
|
7
7
|
export {};
|
|
8
8
|
//# sourceMappingURL=useComponentVisible.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOnBottomScroll.d.ts","sourceRoot":"","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAEnE,KAAK,qBAAqB,GAAG;IAC3B,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,
|
|
1
|
+
{"version":3,"file":"useOnBottomScroll.d.ts","sourceRoot":"","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAEnE,KAAK,qBAAqB,GAAG;IAC3B,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAIF,iBAAS,iBAAiB,CAAC,OAAO,EAAE,qBAAqB,QAsCxD;AAED,eAAe,iBAAiB,CAAC"}
|
package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeedPopover.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAgB,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAoB,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAQF,MAAM,WAAW,4BAA6B,SAAQ,qBAAqB;IACzE,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,4BAA4B,
|
|
1
|
+
{"version":3,"file":"NotificationFeedPopover.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAgB,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAoB,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAQF,MAAM,WAAW,4BAA6B,SAAQ,qBAAqB;IACzE,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,4BAA4B,CAkF7B,CAAC"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@knocklabs/react",
|
|
3
3
|
"description": "A set of React components to build notification experiences powered by Knock",
|
|
4
4
|
"author": "@knocklabs",
|
|
5
|
-
"version": "0.7.
|
|
5
|
+
"version": "0.7.21",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/cjs/index.js",
|
|
8
8
|
"module": "dist/esm/index.mjs",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"react-dom": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@knocklabs/client": "^0.
|
|
54
|
-
"@knocklabs/react-core": "^0.
|
|
53
|
+
"@knocklabs/client": "^0.15.0",
|
|
54
|
+
"@knocklabs/react-core": "^0.7.0",
|
|
55
55
|
"@popperjs/core": "^2.11.8",
|
|
56
56
|
"@radix-ui/react-dialog": "^1.1.14",
|
|
57
57
|
"@telegraph/combobox": "^0.0.89",
|
|
@@ -64,12 +64,13 @@
|
|
|
64
64
|
"lucide-react": "^0.525.0"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
|
+
"@codecov/vite-plugin": "^1.9.1",
|
|
67
68
|
"@testing-library/dom": "^10.4.0",
|
|
68
69
|
"@testing-library/react": "^16.3.0",
|
|
69
70
|
"@types/eslint-plugin-jsx-a11y": "^6",
|
|
70
71
|
"@types/lodash.debounce": "^4.0.9",
|
|
71
|
-
"@types/react": "^
|
|
72
|
-
"@types/react-dom": "^
|
|
72
|
+
"@types/react": "^19.1.8",
|
|
73
|
+
"@types/react-dom": "^19.1.6",
|
|
73
74
|
"@typescript-eslint/eslint-plugin": "^8.32.0",
|
|
74
75
|
"@typescript-eslint/parser": "^8.32.1",
|
|
75
76
|
"@vitejs/plugin-react": "^4.5.1",
|
|
@@ -79,8 +80,8 @@
|
|
|
79
80
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
80
81
|
"eslint-plugin-react-refresh": "^0.4.14",
|
|
81
82
|
"jsdom": "^26.1.0",
|
|
82
|
-
"react": "^
|
|
83
|
-
"react-dom": "^
|
|
83
|
+
"react": "^19.0.0",
|
|
84
|
+
"react-dom": "^19.0.0",
|
|
84
85
|
"rimraf": "^6.0.1",
|
|
85
86
|
"rollup-plugin-execute": "^1.1.1",
|
|
86
87
|
"rollup-preserve-directives": "^1.1.3",
|