@knocklabs/react 0.1.8 → 0.2.0

package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationCell.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ContentBlock, FeedItem } from \"@knocklabs/client\";\nimport { Avatar } from \"./Avatar\";\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport {\n  useKnockFeed,\n  useTranslations,\n  formatTimestamp,\n  renderNodeOrFallback,\n} from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n  item: FeedItem;\n  onItemClick?: (item: FeedItem) => void;\n  avatar?: ReactNode;\n  children?: ReactNode;\n  archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n  [name: string]: ContentBlock;\n};\n\nexport const NotificationCell = React.forwardRef<\n  HTMLDivElement,\n  NotificationCellProps\n>(({ item, onItemClick, avatar, children, archiveButton }, ref) => {\n  const { feedClient, colorMode } = useKnockFeed();\n  const { locale } = useTranslations();\n\n  const blocksByName: BlockByName = useMemo(() => {\n    return item.blocks.reduce((acc, block) => {\n      return { ...acc, [block.name]: block };\n    }, {});\n  }, [item]);\n\n  const actionUrl = blocksByName.action_url && blocksByName.action_url.rendered;\n\n  const onClick = React.useCallback(() => {\n    // Mark as interacted + read once we click the item\n    feedClient.markAsInteracted(item);\n\n    if (onItemClick) return onItemClick(item);\n\n    // Delay when we navigate, until we've actually issued our API call.\n    setTimeout(() => {\n      if (actionUrl && actionUrl !== \"\") {\n        window.location.assign(actionUrl);\n      }\n    }, 200);\n  }, [item]);\n\n  const onKeyDown = React.useCallback(\n    (ev: React.KeyboardEvent<HTMLDivElement>) => {\n      switch (ev.key) {\n        case \"Enter\": {\n          ev.stopPropagation();\n          onClick();\n          break;\n        }\n        default:\n          break;\n      }\n    },\n    [onClick],\n  );\n\n  const actor = item.actors[0];\n\n  return (\n    <div\n      ref={ref}\n      className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      tabIndex={0}\n    >\n      <div className=\"rnf-notification-cell__inner\">\n        {!item.read_at && <div className=\"rnf-notification-cell__unread-dot\" />}\n\n        {renderNodeOrFallback(\n          avatar,\n          actor && \"name\" in actor && actor.name && (\n            <Avatar name={actor.name} src={actor.avatar} />\n          ),\n        )}\n\n        <div className=\"rnf-notification-cell__content-outer\">\n          {blocksByName.body && (\n            <div\n              className=\"rnf-notification-cell__content\"\n              dangerouslySetInnerHTML={{ __html: blocksByName.body.rendered }}\n            />\n          )}\n\n          {children && (\n            <div className=\"rnf-notification-cell__child-content\">\n              {children}\n            </div>\n          )}\n\n          <span className=\"rnf-notification-cell__timestamp\">\n            {formatTimestamp(item.inserted_at, { locale })}\n          </span>\n        </div>\n\n        {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n      </div>\n    </div>\n  );\n});\n"],"names":["NotificationCell","React","item","onItemClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","acc","block","actionUrl","onClick","onKeyDown","ev","actor","jsx","jsxs","renderNodeOrFallback","Avatar","formatTimestamp","ArchiveButton"],"mappings":";;;;;;AAyBa,MAAAA,IAAmBC,EAAM,WAGpC,CAAC,EAAE,MAAAC,GAAM,aAAAC,GAAa,QAAAC,GAAQ,UAAAC,GAAU,eAAAC,EAAc,GAAGC,MAAQ;AACjE,QAAM,EAAE,YAAAC,GAAY,WAAAC,EAAU,IAAIC,EAAa,GACzC,EAAE,QAAAC,MAAWC,KAEbC,IAA4BC,EAAQ,MACjCZ,EAAK,OAAO,OAAO,CAACa,GAAKC,OACvB,EAAE,GAAGD,GAAK,CAACC,EAAM,IAAI,GAAGA,EAAM,IACpC,CAAE,CAAA,GACJ,CAACd,CAAI,CAAC,GAEHe,IAAYJ,EAAa,cAAcA,EAAa,WAAW,UAE/DK,IAAUjB,EAAM,YAAY,MAAM;AAIlC,QAFJO,EAAW,iBAAiBN,CAAI,GAE5BC;AAAa,aAAOA,EAAYD,CAAI;AAGxC,eAAW,MAAM;AACX,MAAAe,KAAaA,MAAc,MACtB,OAAA,SAAS,OAAOA,CAAS;AAAA,OAEjC,GAAG;AAAA,EAAA,GACL,CAACf,CAAI,CAAC,GAEHiB,IAAYlB,EAAM;AAAA,IACtB,CAACmB,MAA4C;AAC3C,cAAQA,EAAG,KAAK;AAAA,QACd,KAAK,SAAS;AACZ,UAAAA,EAAG,gBAAgB,GACXF;AACR;AAAA,QACF;AAAA,MAGF;AAAA,IACF;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJG,IAAQnB,EAAK,OAAO,CAAC;AAGzB,SAAA,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAf;AAAA,MACA,WAAW,gDAAgDE,CAAS;AAAA,MACpE,SAAAS;AAAA,MACA,WAAAC;AAAA,MACA,UAAU;AAAA,MAEV,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,gCACZ,UAAA;AAAA,QAAA,CAACrB,EAAK,WAAY,gBAAAoB,EAAA,OAAA,EAAI,WAAU,qCAAoC;AAAA,QAEpEE;AAAA,UACCpB;AAAA,UACAiB,KAAS,UAAUA,KAASA,EAAM,QAChC,gBAAAC,EAACG,GAAO,EAAA,MAAMJ,EAAM,MAAM,KAAKA,EAAM,OAAQ,CAAA;AAAA,QAEjD;AAAA,QAEA,gBAAAE,EAAC,OAAI,EAAA,WAAU,wCACZ,UAAA;AAAA,UAAAV,EAAa,QACZ,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,yBAAyB,EAAE,QAAQT,EAAa,KAAK,SAAS;AAAA,YAAA;AAAA,UAChE;AAAA,UAGDR,KACC,gBAAAiB,EAAC,OAAI,EAAA,WAAU,wCACZ,UAAAjB,GACH;AAAA,UAGF,gBAAAiB,EAAC,QAAK,EAAA,WAAU,oCACb,UAAAI,EAAgBxB,EAAK,aAAa,EAAE,QAAAS,EAAO,CAAC,EAC/C,CAAA;AAAA,QAAA,GACF;AAAA,QAECa,EAAqBlB,GAAgB,gBAAAgB,EAAAK,GAAA,EAAc,MAAAzB,EAAY,CAAA,CAAE;AAAA,MAAA,GACpE;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dropdown.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { ChevronDown } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: any) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n  children,\n  value,\n  onChange,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n      <select value={value} onChange={onChange}>\n        {children}\n      </select>\n      <ChevronDown />\n    </div>\n  );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","jsxs","jsx","ChevronDown"],"mappings":";;;;AAWO,MAAMA,IAAuD,CAAC;AAAA,EACnE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAA,EAAE,WAAAC,MAAcC;AAEtB,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAW,8BAA8BF,CAAS,IACrD,UAAA;AAAA,IAAC,gBAAAG,EAAA,UAAA,EAAO,OAAAL,GAAc,UAAAC,GACnB,UAAAF,EACH,CAAA;AAAA,sBACCO,GAAY,EAAA;AAAA,EACf,EAAA,CAAA;AAEJ;"}

package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MarkAsRead.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n  onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n  const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const unreadItems = useFeedStore((state) =>\n    state.items.filter((item) => !item.read_at),\n  );\n\n  const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n  const onClickHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      feedClient.markAllAsRead();\n      if (onClick) onClick(e, unreadItems);\n    },\n    [feedClient, unreadItems, onClick],\n  );\n\n  return (\n    <button\n      className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n      disabled={unreadCount === 0}\n      onClick={onClickHandler}\n      type=\"button\"\n    >\n      {t(\"markAllAsRead\")}\n      <CheckmarkCircle />\n    </button>\n  );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","item","unreadCount","onClickHandler","React","jsxs","CheckmarkCircle"],"mappings":";;;;;AAWO,MAAMA,IAAwC,CAAC,EAAE,SAAAC,QAAc;AACpE,QAAM,EAAE,cAAAC,GAAc,YAAAC,GAAY,WAAAC,MAAcC,EAAa,GACvD,EAAE,GAAAC,MAAMC,KAERC,IAAcN;AAAA,IAAa,CAACO,MAChCA,EAAM,MAAM,OAAO,CAACC,MAAS,CAACA,EAAK,OAAO;AAAA,EAAA,GAGtCC,IAAcT,EAAa,CAACO,MAAUA,EAAM,SAAS,YAAY,GAEjEG,IAAiBC,EAAM;AAAA,IAC3B,CAAC,MAAwB;AACvB,MAAAV,EAAW,cAAc,GACrBF,KAASA,EAAQ,GAAGO,CAAW;AAAA,IACrC;AAAA,IACA,CAACL,GAAYK,GAAaP,CAAO;AAAA,EAAA;AAIjC,SAAA,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8CAA8CV,CAAS;AAAA,MAClE,UAAUO,MAAgB;AAAA,MAC1B,SAASC;AAAA,MACT,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAN,EAAE,eAAe;AAAA,0BACjBS,GAAgB,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvB;"}

package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationFeed.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, isRequestInFlight, NetworkStatus } from \"@knocklabs/client\";\nimport React, {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport {\n  useKnockFeed,\n  useFeedSettings,\n  ColorMode,\n  FilterStatus,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport { NotificationCell } from \"../NotificationCell\";\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\n\nimport \"./styles.css\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\n\nexport type OnNotificationClick = (item: FeedItem) => void;\nexport type RenderItem = ({ item }: RenderItemProps) => ReactNode;\nexport type RenderItemProps = {\n  item: FeedItem;\n  onItemClick?: OnNotificationClick;\n};\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactElement<any>;\n  renderItem?: RenderItem;\n  renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n  onNotificationClick?: OnNotificationClick;\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n  initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n  <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n  <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n  <div className=\"rnf-notification-feed__spinner-container\">\n    <Spinner\n      thickness={3}\n      size=\"16px\"\n      color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n    />\n  </div>\n);\n\nconst poweredByKnockUrl =\n  \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n  EmptyComponent = <EmptyFeed />,\n  renderItem = defaultRenderItem,\n  onNotificationClick,\n  onMarkAllAsReadClick,\n  initialFilterStatus = FilterStatus.All,\n  header,\n  renderHeader = defaultRenderHeader,\n}) => {\n  const [status, setStatus] = useState(initialFilterStatus);\n  const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n  const { settings } = useFeedSettings(feedClient);\n  const { t } = useTranslations();\n\n  const { pageInfo, items, networkStatus } = useFeedStore();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setStatus(initialFilterStatus);\n  }, [initialFilterStatus]);\n\n  useEffect(() => {\n    // When the feed client changes, or the status changes issue a re-fetch\n    feedClient.fetch({ status });\n  }, [feedClient, status]);\n\n  const noItems = items.length === 0;\n  const requestInFlight = isRequestInFlight(networkStatus);\n\n  // Handle fetching more once we reach the bottom of the list\n  const onBottomCallback = useCallback(() => {\n    if (!requestInFlight && pageInfo.after) {\n      feedClient.fetchNextPage();\n    }\n  }, [requestInFlight, pageInfo, feedClient]);\n\n  // Once we scroll to the bottom of the view we want to automatically fetch\n  // more items for the feed and bring them into the list\n  useOnBottomScroll({\n    ref: containerRef,\n    callback: onBottomCallback,\n    offset: 70,\n  });\n\n  return (\n    <div\n      className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n    >\n      {header ||\n        renderHeader({\n          setFilterStatus: setStatus,\n          filterStatus: status,\n          onMarkAllAsReadClick,\n        })}\n\n      <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n        {networkStatus === NetworkStatus.loading && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        <div className=\"rnf-notification-feed__feed-items-container\">\n          {networkStatus !== NetworkStatus.loading &&\n            items.map((item: FeedItem) =>\n              renderItem({ item, onItemClick: onNotificationClick }),\n            )}\n        </div>\n\n        {networkStatus === NetworkStatus.fetchMore && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        {!requestInFlight && noItems && EmptyComponent}\n      </div>\n\n      {settings?.features.branding_required && (\n        <div className=\"rnf-notification-feed__knock-branding\">\n          <a href={poweredByKnockUrl} target=\"_blank\">\n            {t(\"poweredBy\")}\n          </a>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["defaultRenderItem","props","jsx","NotificationCell","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","noItems","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","useOnBottomScroll","jsxs","NetworkStatus","item"],"mappings":";;;;;;;;;;;AA+CA,MAAMA,IAAoB,CAACC,MACzB,gBAAAC,EAACC,KAAsC,GAAGF,EAAA,GAAnBA,EAAM,KAAK,EAAe,GAG7CG,IAAsB,CAACH,MAC1B,gBAAAC,EAAAG,GAAA,EAAwB,GAAGJ,EAAO,CAAA,GAG/BK,IAAiB,CAAC,EAAE,WAAAC,EAAA,MACvB,gBAAAL,EAAA,OAAA,EAAI,WAAU,4CACb,UAAA,gBAAAA;AAAA,EAACM;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,IACX,MAAK;AAAA,IACL,OAAOD,MAAc,SAAS,8BAA8B;AAAA,EAAA;AAC9D,EACF,CAAA,GAGIE,IACJ,sGAEWC,KAAoD,CAAC;AAAA,EAChE,gBAAAC,sBAAkBC,GAAU,EAAA;AAAA,EAC5B,YAAAC,IAAab;AAAA,EACb,qBAAAc;AAAA,EACA,sBAAAC;AAAA,EACA,qBAAAC,IAAsBC,EAAa;AAAA,EACnC,QAAAC;AAAA,EACA,cAAAC,IAAef;AACjB,MAAM;AACJ,QAAM,CAACgB,GAAQC,CAAS,IAAIC,EAASN,CAAmB,GAClD,EAAE,YAAAO,GAAY,cAAAC,GAAc,WAAAjB,MAAckB,EAAa,GACvD,EAAE,UAAAC,EAAA,IAAaC,EAAgBJ,CAAU,GACzC,EAAE,GAAAK,MAAMC,KAER,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,MAAkBR,EAAa,GAClDS,IAAeC,EAAuB,IAAI;AAEhD,EAAAC,EAAU,MAAM;AACd,IAAAd,EAAUL,CAAmB;AAAA,EAAA,GAC5B,CAACA,CAAmB,CAAC,GAExBmB,EAAU,MAAM;AAEH,IAAAZ,EAAA,MAAM,EAAE,QAAAH,EAAA,CAAQ;AAAA,EAAA,GAC1B,CAACG,GAAYH,CAAM,CAAC;AAEjB,QAAAgB,IAAUL,EAAM,WAAW,GAC3BM,IAAkBC,EAAkBN,CAAa,GAGjDO,IAAmBC,EAAY,MAAM;AACrC,IAAA,CAACH,KAAmBP,EAAS,SAC/BP,EAAW,cAAc;AAAA,EAE1B,GAAA,CAACc,GAAiBP,GAAUP,CAAU,CAAC;AAIxB,SAAAkB,EAAA;AAAA,IAChB,KAAKR;AAAA,IACL,UAAUM;AAAA,IACV,QAAQ;AAAA,EAAA,CACT,GAGC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gDAAgDnC,CAAS;AAAA,MAEnE,UAAA;AAAA,QAAAW,KACCC,EAAa;AAAA,UACX,iBAAiBE;AAAA,UACjB,cAAcD;AAAA,UACd,sBAAAL;AAAA,QAAA,CACD;AAAA,QAEF,gBAAA2B,EAAA,OAAA,EAAI,WAAU,oCAAmC,KAAKT,GACpD,UAAA;AAAA,UAAAD,MAAkBW,EAAc,WAC9B,gBAAAzC,EAAAI,GAAA,EAAe,WAAAC,GAAsB;AAAA,4BAGvC,OAAI,EAAA,WAAU,+CACZ,UAAkByB,MAAAW,EAAc,WAC/BZ,EAAM;AAAA,YAAI,CAACa,MACT/B,EAAW,EAAE,MAAA+B,GAAM,aAAa9B,GAAqB;AAAA,UAAA,GAE3D;AAAA,UAECkB,MAAkBW,EAAc,aAC/B,gBAAAzC,EAACI,KAAe,WAAAC,GAAsB;AAAA,UAGvC,CAAC8B,KAAmBD,KAAWzB;AAAA,QAAA,GAClC;AAAA,SAECe,KAAA,gBAAAA,EAAU,SAAS,sBACjB,gBAAAxB,EAAA,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAA,EAAC,KAAE,EAAA,MAAMO,GAAmB,QAAO,UAChC,UAAEmB,EAAA,WAAW,EAChB,CAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationFeedHeader.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import React, { SetStateAction } from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\n\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n  filterStatus: FilterStatus;\n  setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n  FilterStatus.All,\n  FilterStatus.Unread,\n  FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n  onMarkAllAsReadClick,\n  filterStatus,\n  setFilterStatus,\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <header className=\"rnf-notification-feed__header\">\n      <div className=\"rnf-notification-feed__selector\">\n        <span className=\"rnf-notification-feed__type\">\n          {t(\"notifications\")}\n        </span>\n        <Dropdown\n          value={filterStatus}\n          onChange={(e) => setFilterStatus(e.target.value)}\n        >\n          {OrderedFilterStatuses.map((filterStatus) => (\n            <option key={filterStatus} value={filterStatus}>\n              {t(filterStatus)}\n            </option>\n          ))}\n        </Dropdown>\n      </div>\n      <MarkAsRead onClick={onMarkAllAsReadClick} />\n    </header>\n  );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","jsxs","jsx","Dropdown","MarkAsRead"],"mappings":";;;;AAaA,MAAMA,IAAwB;AAAA,EAC5BC,EAAa;AAAA,EACbA,EAAa;AAAA,EACbA,EAAa;AACf,GAEaC,IAAgE,CAAC;AAAA,EAC5E,sBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACE,QAAA,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,UAAO,EAAA,WAAU,iCAChB,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAK,EAAA,WAAU,+BACb,UAAAH,EAAE,eAAe,GACpB;AAAA,MACA,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAON;AAAA,UACP,UAAU,CAAC,MAAMC,EAAgB,EAAE,OAAO,KAAK;AAAA,UAE9C,UAAsBL,EAAA,IAAI,CAACI,MACzB,gBAAAK,EAAA,UAAA,EAA0B,OAAOL,GAC/B,UAAEA,EAAAA,CAAY,EADJA,GAAAA,CAEb,CACD;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GACF;AAAA,IACA,gBAAAK,EAACE,GAAW,EAAA,SAASR,EAAsB,CAAA;AAAA,EAC7C,EAAA,CAAA;AAEJ;"}

package/dist/esm/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationFeedContainer.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  return <div className=\"rnf-feed-provider\">{children}</div>;\n};\n"],"names":["NotificationFeedContainer","children","jsx"],"mappings":";;AAGO,MAAMA,IAAyD,CAAC;AAAA,EACrE,UAAAC;AACF,MACU,gBAAAC,EAAA,OAAA,EAAI,WAAU,qBAAqB,UAAAD,EAAS,CAAA;"}

package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationFeedPopover.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\n\nimport \"./styles.css\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Feed, FeedStoreState } from \"@knocklabs/client\";\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>;\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 { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n    closeOnClickOutside,\n  });\n\n  const { styles, attributes } = usePopper(\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  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]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        ...styles.popper,\n        visibility: isVisible ? \"visible\" : \"hidden\",\n      }}\n      ref={popperRef}\n      {...attributes.popper}\n      role=\"dialog\"\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","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","colorMode","useFeedStore","useKnockFeed","popperRef","useComponentVisible","styles","attributes","usePopper","useEffect","jsx","NotificationFeed"],"mappings":";;;;;;;;;AAeA,MAAMA,IAAgB,CAAC,EAAE,OAAAC,GAAO,YAAAC,QAAgC;AAC1D,EAAAD,EAAM,SAAS,eAAe,KAChCC,EAAW,cAAc;AAE7B,GAWaC,IAET,CAAC;AAAA,EACH,WAAAC;AAAA,EACA,QAAAC,IAASL;AAAA,EACT,SAAAM;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,YAAAT,GAAY,cAAAU,MAAiBC,EAAa,GACvDZ,IAAQW,KAER,EAAE,KAAKE,EAAA,IAAcC,EAAoBX,GAAWE,GAAS;AAAA,IACjE,qBAAAE;AAAA,EAAA,CACD,GAEK,EAAE,QAAAQ,GAAQ,YAAAC,EAAA,IAAeC;AAAA,IAC7BX,EAAU;AAAA,IACVO,EAAU;AAAA,IACV;AAAA,MACE,UAAU;AAAA,MACV,WAAAL;AAAA,MACA,WAAW;AAAA,QACT;AAAA,UACE,MAAM;AAAA,UACN,SAAS;AAAA,YACP,QAAQ,CAAC,GAAG,CAAC;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGF,SAAAU,EAAU,MAAM;AAGd,IAAIf,KAAaC,KACRA,EAAA,EAAE,OAAAJ,GAAO,YAAAC,EAAA,CAAY;AAAA,EAC9B,GACC,CAACE,CAAS,CAAC,GAGZ,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gEAAgET,CAAS;AAAA,MACpF,OAAO;AAAA,QACL,GAAGK,EAAO;AAAA,QACV,YAAYZ,IAAY,YAAY;AAAA,MACtC;AAAA,MACA,KAAKU;AAAA,MACJ,GAAGG,EAAW;AAAA,MACf,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAA,gBAAAG,EAAC,SAAI,WAAU,wCACb,4BAACC,GAAkB,EAAA,GAAGX,GAAW,EACnC,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationIconButton.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import React, { SyntheticEvent } from \"react\";\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n  // What value should we use to drive the badge count?\n  badgeCountType?: BadgeCountType;\n  onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n  HTMLButtonElement,\n  NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <button\n      className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n      role=\"button\"\n      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon />\n      <UnseenBadge badgeCountType={badgeCountType} />\n    </button>\n  );\n});\n"],"names":["NotificationIconButton","React","onClick","badgeCountType","ref","colorMode","useKnockFeed","jsxs","jsx","BellIcon","UnseenBadge"],"mappings":";;;;;;AAaa,MAAAA,IAAyBC,EAAM,WAG1C,CAAC,EAAE,SAAAC,GAAS,gBAAAC,KAAkBC,MAAQ;AAChC,QAAA,EAAE,WAAAC,MAAcC;AAGpB,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8DAA8DF,CAAS;AAAA,MAClF,MAAK;AAAA,MACL,cAAW;AAAA,MACX,KAAAD;AAAA,MACA,SAAAF;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM,EAACC,GAAS,EAAA;AAAA,QACV,gBAAAD,EAACE,KAAY,gBAAAP,GAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnD,CAAC;"}

package/dist/esm/modules/feed/components/UnseenBadge/UnseenBadge.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UnseenBadge.esm.js","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { useKnockFeed, formatBadgeCount } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\nimport { FeedMetadata } from \"@knocklabs/client\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n  badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n  badgeCountType: BadgeCountType,\n  metadata: FeedMetadata,\n) {\n  switch (badgeCountType) {\n    case \"all\":\n      return metadata.total_count;\n    case \"unread\":\n      return metadata.unread_count;\n    case \"unseen\":\n      return metadata.unseen_count;\n  }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n  badgeCountType = \"unseen\",\n}) => {\n  const { useFeedStore } = useKnockFeed();\n  const badgeCountValue = useFeedStore((state) =>\n    selectBadgeCount(badgeCountType, state.metadata),\n  );\n\n  return badgeCountValue !== 0 ? (\n    <div className=\"rnf-unseen-badge\">\n      <span className=\"rnf-unseen-badge__count\">\n        {formatBadgeCount(badgeCountValue)}\n      </span>\n    </div>\n  ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","jsx","formatBadgeCount"],"mappings":";;;AAYA,SAASA,EACPC,GACAC,GACA;AACA,UAAQD,GAAgB;AAAA,IACtB,KAAK;AACH,aAAOC,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,EACpB;AACF;AAEO,MAAMC,IAA0C,CAAC;AAAA,EACtD,gBAAAF,IAAiB;AACnB,MAAM;AACE,QAAA,EAAE,cAAAG,MAAiBC,KACnBC,IAAkBF;AAAA,IAAa,CAACG,MACpCP,EAAiBC,GAAgBM,EAAM,QAAQ;AAAA,EAAA;AAGjD,SAAOD,MAAoB,IACxB,gBAAAE,EAAA,OAAA,EAAI,WAAU,oBACb,UAAA,gBAAAA,EAAC,QAAK,EAAA,WAAU,2BACb,UAAAC,EAAiBH,CAAe,EACnC,CAAA,GACF,IACE;AACN;"}