@planningcenter/topbar 8.3.0 → 8.3.1

package/CHANGELOG.md

@@ -0,0 +1,210 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [8.3.1] - 2022-08-31
+
+### Fixed
+
+- Fix an overflow issue when there were enough linked orgs for the menu to hit the bottom of the browser on mobile
+
+### Security
+
+- Bumped `moment-timezone` from 0.5.34 to 0.5.35
+
+## [8.3.0] - 2022-08-16
+
+### Added
+
+- Add `topbar` and `app-switcher` convenience data attributes for targeting with Pendo
+
+### Changed
+
+- Add `?return` param to the Login profile path URL, to reduce our dependence on referers
+
+### Security
+
+- Bumped `async` from 2.6.3 to 2.6.4
+- Bumped `terser` from 4.8.0 to 4.8.1
+- Bumped `moment` from 2.29.2 to 2.29.4
+
+## [8.2.2] - 2022-06-28
+
+### Changed
+
+- VoiceOver support for Notifications
+
+## [8.2.1] - 2022-06-15
+
+### Changed
+
+- Disable dropdown menu and hide caret icon when no custom routes are provided.
+
+## [8.2.0] - 2022-05-23
+
+### Added
+
+- Make whether Jolt sends its logs to console configurable (`enableJoltLogging` prop) and default to `false`
+
+### Changed
+
+- Add more info regarding troubleshooting `yalc` issues to the README
+- Send a `fetchAuthTokenFn` to `jolt-client` instead of `authToken`. Over time, the auth token can get stale. Sending a function instead of a value allows the client to refresh itself when required.
+- Instead of fetching the WSS URLs for authorization from an api endpoint, hard-code them instead. After the change adding `fetchAuthTokenFn`, this change reduces required API calls by 1.
+
+### Fixed
+
+- fix: hook into `pco-page-expired` to `disconnect` jolt instance when session is changed
+
+## [8.1.1] - 2022-04-11
+
+### Changed
+
+- fix: don't send a `timeZone` key to `@churchcenter/datetime-fmt` if it doesn't have a value
+
+## [8.1.0] - 2022-04-11
+
+### Changed
+
+- Removed references to Resources
+- Transition away from branded Accounts symbols
+- Fix padding in account switcher
+- Update styles for account switcher on mobile
+- Fix dark mode text styles in notifications inbox
+- Fix notification date timezone not displaying in the org's time zone
+
+## [8.0.1] - 2022-03-29
+
+### Changed
+
+- Correct the capitalization of "Check-Ins" in order to set the correct color for notifications
+- Bring back the `notifications` prop for topbars so that if notifications are not enabled, it will render the `notifications` prop instead
+
+## [8.0.0] - 2022-03-24
+
+### Added
+
+- Notification bell, indicator, and dropdown that displays the current user's read and unread notifications.
+- Subscribe to push notifications via Jolt after initial load. Whenever a push event is received, a GET request is sent to the notifications API endpoint to retrieve the details of the new notification.
+- Set up prettier and eslint and allow them to have their way on the code
+- Control the admin notifications inbox with the flipper flag of `TOPBAR_notifications_enabled` in People. Disable for a specific app by setting `window.notificationsDisabled = true`.
+- Control the Login info section with the flipper flag of `TOPBAR_mfa_enabled` in People.
+- Show an indicator for whether MFA is configured for the current profile
+- Add `props.linkToProfile` to `SharedTopbarProps` (so it's available to small and not small)
+
+### Changed
+
+- No-op `AppsProvider`'s `fetch` and `remove` functions that are passed along with `apps` to the `render` function prop. Since we will always have fresh data now, there is no need to have these functions run.
+- The information required to render the topbar is now contained in a single API request from people (`/me/topbar`). This includes the list of apps to render in the app switcher and enabled features inside the topbar. This is a change specifically to the app switcher, so changes had to be made in terms of the expected shape of the response from the server in order to render the app switcher. The `AppsProvider` `mapApps` function has been updated accordingly.
+
+### Removed
+
+- `mapResourcesToCalendar` is removed as an export of `AppsProvider`. The apps array we receive from the API no longer returns Resources. Use `mapApps` instead (or, better still, don't pass anything to `formatter` and let us use the default).
+- `MediumTopbar`. Only one app (API) was using it and it wasn't worth attempting to keep feature parity with the other two topbars.
+
+## [7.2.1] - 2021-12-09
+
+### Fixed
+
+- Bug z-stacking Safari bug that caused expanded `smalltopbar` items to show up behind elements [#46](https://github.com/ministrycentered/topbar/pull/46)
+- Bug causing user settings to be hidden on mobile when Home wasn't enabled for the user [#47](https://github.com/ministrycentered/topbar/pull/47)
+
+## [7.2.0] - 2021-12-02
+
+### Changed
+
+- New look and feel for the app switcher ([#40](https://github.com/ministrycentered/topbar/pull/40), [#42](https://github.com/ministrycentered/topbar/pull/42)).
+  The switcher now displays Home at the top with some visual separation and Accounts (as "account") at the bottom—also with visual separation.
+
+## [7.1.3] - 2021-11-16
+
+### Fixed
+
+- Corrected the sorting of app names in mobile topbar as well [#36](https://github.com/ministrycentered/topbar/pull/36)
+
+## [7.1.2] - 2021-11-11
+
+### Fixed
+
+- Corrected the corrected sorting of app names in app switcher [#33](https://github.com/ministrycentered/topbar/pull/33)
+
+## [7.1.1] - 2021-11-10
+
+### Fixed
+
+- Corrected sorting of app names in app switcher [#32](https://github.com/ministrycentered/topbar/pull/32)
+
+## [7.1.0] - 2021-11-08
+
+### Added
+
+- Add Home to the app switcher dropdown
+
+## [7.0.0] - 2021-10-01
+
+- Add CSRF support to login ([#46](https://github.com/planningcenter/design/pull/46) @danielma)
+  - [First implementation in Accounts](https://github.com/ministrycentered/accounts/pull/1877/files)
+  - [Second implementation in Giving](https://github.com/ministrycentered/giving/pull/4482/files)
+- Update devDependencies pins
+  - `microbundle`: `^0.12.4` => `^0.13.0`
+  - `webpack`: `^4.46.0` => `^5.13.0`
+  - `webpack-cli`: `^3.3.13` => `^4.3.1`
+  - `ts-loader`: `^7.0.5` => `^8.0.14`
+  - `typescript`: `^3.9.7` => `^4.1.3`
+  - `react`: `^16.14.0` => `^17.0.1`
+  - `react-dom`: `^16.14.0` => `^17.0.1`
+  - `@types/react`: `^16.14.2` => `^17.0.0`
+  - `@types/react-dom`: `^16.9.10` => `^17.0.0`
+- Unlock modern builds by removing `--format cjs` flag for improved bundling app-side
+- Add `referer` query parameter to `AppSwitch` urls: [Accounts PR](https://github.com/ministrycentered/accounts/pull/1910)
+- Add the ability to override the topbar’s link colors via props in `NotSmallTopbar` [#122](https://github.com/planningcenter/design/pull/122)
+- Add `ProductAnnouncement` component
+  - Additional top-level exports:
+    - `ProductAnnouncementStyleProvider`
+    - `StyledProductAnnouncement`
+    - `StyledProductAnnouncementDimissButton`
+- `Topbar_ProductAnnouncement` parent selector for styling content
+- Fix Announcement topbars to be 14px font-size and 48px absolute height
+
+## 6.0.0
+
+- [BREAKING] modify `/logout` urls to target Login, a2ec71d
+
+## 5.0.0
+
+- [BREAKING] replace Registrations icon
+- Add `mapRegistrationsToExpiredRegistrations` to control them
+
+## 4.11.0
+
+- Add `AppsProvider#formatter` and `mapApps`/`mapResourcesToCalendar` formatters to provide a AppsMenu control mechanism to product teams
+- Add `.codes` support for `pco-box`
+
+## 4.9.0
+
+- Add support for "Calendar" app
+
+## [Previous entries]
+
+Versions entries to this changelog weren't tracked very well and were presented in a less organized style (more like a README or upgrade guide). If you are interested in that, you can read about the changes in [README-pre-4.9.0].
+
+[8.3.1]: https://github.com/ministrycentered/topbar/compare/v8.3.0...v8.3.1
+[8.3.0]: https://github.com/ministrycentered/topbar/compare/v8.2.2...v8.3.0
+[8.2.2]: https://github.com/ministrycentered/topbar/compare/v8.2.1...v8.2.2
+[8.2.1]: https://github.com/ministrycentered/topbar/compare/v8.2.0...v8.2.1
+[8.2.0]: https://github.com/ministrycentered/topbar/compare/v8.1.1...v8.2.0
+[8.1.1]: https://github.com/ministrycentered/topbar/compare/v8.1.0...v8.1.1
+[8.1.0]: https://github.com/ministrycentered/topbar/compare/v8.0.1...v8.1.0
+[8.0.1]: https://github.com/ministrycentered/topbar/compare/v8.0.0...v8.0.1
+[8.0.0]: https://github.com/ministrycentered/topbar/compare/v7.2.1...v8.0.0
+[7.2.1]: https://github.com/ministrycentered/topbar/compare/v7.2.0...v7.2.1
+[7.2.0]: https://github.com/ministrycentered/topbar/compare/v7.1.3...v7.2.0
+[7.1.3]: https://github.com/ministrycentered/topbar/compare/v7.1.2...v7.1.3
+[7.1.2]: https://github.com/ministrycentered/topbar/compare/v7.1.1...v7.1.2
+[7.1.1]: https://github.com/ministrycentered/topbar/compare/v7.1.0...v7.1.1
+[7.1.0]: https://github.com/ministrycentered/topbar/compare/v7.0.0...v7.1.0
+[7.0.0]: https://github.com/ministrycentered/topbar/compare/@planningcenter/topbar@6.0.6..v7.0.0
+[previous entries]: CHANGELOG-pre-4.9.0.md

package/dist/modules/api_request.d.ts

@@ -1,10 +1,5 @@
-import { Environment } from "@planningcenter/url";
 declare global {
     interface Window {
-        railsEnv?: Environment;
-        currentPerson?: {
-            id: number;
-        };
         Rails?: {
             csrfToken: () => string;
         };

package/dist/modules/components/NotificationsMenuBlankState.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const NotificationsMenuBlankState: ({
+  description,
+  style,
+  title,
+  ...props
+}: {
+  description: string
+  style?: object
+  title?: string
+}) => JSX.Element
+export default NotificationsMenuBlankState

package/dist/modules/components/apps_menu.d.ts

@@ -1,13 +1,9 @@
 /// <reference types="react" />
 import * as PCO_URL from "@planningcenter/url";
+import { App } from "../interfaces";
 declare const AppsMenu: ({ appName, apps, env, toggle, visible, }: {
     appName: string;
-    apps: {
-        attributes: {
-            name: string;
-            url: string;
-        };
-    }[];
+    apps: App[];
     env: PCO_URL.Environment;
     toggle: any;
     visible: boolean;

package/dist/modules/components/conditional_wrap.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-declare const ConditionalWrap: ({ children, condition, wrap, ...props }: {
+declare const ConditionalWrap: ({ children, condition, wrap, }: {
     children: React.ReactNode;
     condition?: boolean;
     wrap: any;

package/dist/modules/components/notifications_inbox.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import * as PCO_URL from "@planningcenter/url"
+import { Notification } from "../interfaces"
+declare const NotificationsInbox: ({
+  env,
+  render,
+  userId,
+}: {
+  env: PCO_URL.Environment
+  render: (props: {
+    handleMarkAllAsRead: () => any
+    handleToggleRead: (notification: Notification) => any
+    read: Notification[]
+    unread: Notification[]
+  }) => JSX.Element
+  userId: string
+}) => JSX.Element
+export default NotificationsInbox

package/dist/modules/components/notifications_menu.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-import * as PCO_URL from "@planningcenter/url";
 import { Notification } from "../interfaces";
-declare const NotificationsMenu: ({ env, handleMarkAllAsRead, handleMarkAsRead, handleToggleRead, hasError, isLoading, mobile, notifications: { read, unread }, toggle, visible, }: {
-    env: PCO_URL.Environment;
+declare const NotificationsMenu: ({ handleMarkAllAsRead, handleMarkAsRead, handleToggleRead, hasError, isLoading, mobile, notifications: { read, unread }, toggle, visible, }: {
     handleMarkAllAsRead: () => any;
     handleMarkAsRead: (notification: Notification) => any;
     handleToggleRead: (notification: Notification) => any;

package/dist/modules/components/notifications_menu_blank_state.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const NotificationsMenuBlankState: ({ dark, description, style, title, ...props }: {
+declare const NotificationsMenuBlankState: ({ dark, description, style, title, }: {
     dark?: boolean;
     description: string;
     style?: object;

package/dist/modules/dummy_data.d.ts

@@ -0,0 +1,3 @@
+import { Notification } from "./interfaces"
+export declare const DUMMY_DATA_UNREAD: Notification[]
+export declare const DUMMY_DATA_READ: Notification[]

package/dist/modules/formatters.d.ts

@@ -1,15 +1,3 @@
-export interface App {
-    attributes: {
-        name: string;
-        url: string;
-    };
-}
-export interface ConnectedPerson {
-    id: number;
-    attributes: {
-        name: string;
-        organization_name: string;
-    };
-}
+import { App, ConnectedPerson } from "./interfaces";
 export declare const appsMenuFormatter: (apps: App[]) => App[];
 export declare const connectedPeopleMenuFormatter: (connectedPeople: ConnectedPerson[]) => ConnectedPerson[];

package/dist/modules/hooks/use_local_storage.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare function useLocalStorage(
+  key: string,
+  initialValue: any
+): {
+  storedValue: any
+  setStoredValue: import("react").Dispatch<any>
+  dropKey: () => void
+}
+export default useLocalStorage

package/dist/modules/hooks/use_notifications.d.ts

@@ -1,6 +1,7 @@
 import * as PCO_URL from "@planningcenter/url";
 import { Notification } from "../interfaces";
-declare const useNotifications: ({ env, userId, }: {
+declare const useNotifications: ({ disabled, env, userId, }: {
+    disabled?: boolean;
     env: PCO_URL.Environment;
     userId: string;
 }) => {

package/dist/modules/hooks/use_topbar_api.d.ts

@@ -0,0 +1,8 @@
+import * as PCO_URL from "@planningcenter/url";
+import { Fetch } from "../api_request";
+import { TopbarAPIResponse } from "../interfaces";
+declare const useTopbarAPI: ({ configuredFetch, env, }: {
+    configuredFetch: Fetch;
+    env: PCO_URL.Environment;
+}) => TopbarAPIResponse;
+export default useTopbarAPI;

package/dist/modules/medium_topbar.d.ts

@@ -1,42 +1,46 @@
-/// <reference types="react" />
+import * as React from "react";
 import * as PCO_URL from "@planningcenter/url";
-declare const Topbar: {
-    (props: {
-        apps: {
-            attributes: {
-                name: string;
-                url: string;
-            };
-        }[];
-        env: PCO_URL.Environment;
-        appName: string;
-        routes: any;
-        colors: any;
-        userAvatarPath: string;
-        userId: string;
-        userName: string;
-        orgName: string;
-        connectedPeople: any;
-        search?: any;
-        style?: any;
-        showOrgName?: boolean;
-        notifications?: any;
-        requestAppsFetch: any;
-        requestConnectedPeopleFetch: any;
-        requestUnlinkConnectedPeople: any;
-        requestSwitchConnectedPerson: any;
-        requestClearAppsCache: any;
-        requestClearConnectedPeopleCache: any;
-        linkToProfile?: boolean;
-    }): JSX.Element;
-    defaultProps: {
+export declare class Topbar extends React.Component<{
+    apps: {
+        attributes: {
+            name: string;
+            url: string;
+        };
+    }[];
+    env: PCO_URL.Environment;
+    appName: string;
+    routes: any;
+    colors: any;
+    userAvatarPath: string;
+    userId: string;
+    userName: string;
+    orgName: string;
+    connectedPeople: any;
+    search?: any;
+    style?: any;
+    showOrgName?: boolean;
+    notifications?: any;
+    requestAppsFetch: any;
+    requestConnectedPeopleFetch: any;
+    requestUnlinkConnectedPeople: any;
+    requestSwitchConnectedPerson: any;
+    requestClearAppsCache: any;
+    requestClearConnectedPeopleCache: any;
+    linkToProfile?: boolean;
+}, {
+    appsMenuVisible: boolean;
+    routesMenuVisible: boolean;
+    userMenuVisible: boolean;
+}> {
+    constructor(props: any);
+    static defaultProps: {
         currentRouteComponent: (props: any) => JSX.Element;
     };
-};
-declare const Route: ({ active, style, name, ...props }: {
+    render(): JSX.Element;
+}
+export declare const Route: ({ active, style, name, ...props }: {
     [x: string]: any;
     active: any;
     style: any;
     name?: string;
 }) => JSX.Element;
-export { Route, Topbar };

package/dist/modules/not_small_topbar.d.ts

@@ -1,48 +1,91 @@
 import * as React from "react";
 import * as PCO_URL from "@planningcenter/url";
-declare const Topbar: {
-    (props: {
-        apps: {
-            attributes: {
-                name: string;
-                url: string;
-            };
-        }[];
-        activeRoute: string;
-        env: PCO_URL.Environment;
-        appName: string;
-        routes: any;
-        colors: any;
-        userAvatarPath: string;
-        userId: string;
-        userName: string;
-        orgName: string;
-        connectedPeople: any;
-        search?: any;
-        style?: any;
-        showOrgName?: boolean;
-        requestAppsFetch: any;
-        requestConnectedPeopleFetch: any;
-        requestUnlinkConnectedPeople: any;
-        requestSwitchConnectedPerson: any;
-        requestClearAppsCache: any;
-        requestClearConnectedPeopleCache: any;
-        useDummyNotifications?: boolean;
-        linkToProfile?: boolean;
-        onLinkToProfileClick?: () => any;
-    }): JSX.Element;
-    defaultProps: {
+export declare class AppsButton extends React.Component<{
+    appName: string;
+    colors: any;
+    expanded: boolean;
+    style?: object;
+    onClick: any;
+    displayIconOnly?: boolean;
+}, {
+    entered: boolean;
+    down: boolean;
+}> {
+    constructor(props: any);
+    static defaultProps: {
+        displayIconOnly: boolean;
+    };
+    render(): JSX.Element;
+}
+export declare class Hoverable extends React.Component<{
+    component?: any;
+    style?: object;
+    hover?: any;
+    active?: any;
+    type?: string;
+    onClick?: any;
+}, {
+    entered: boolean;
+    down: boolean;
+}> {
+    constructor(props: any);
+    render(): JSX.Element;
+}
+export declare class Topbar extends React.Component<{
+    apps: {
+        attributes: {
+            name: string;
+            url: string;
+        };
+    }[];
+    activeRoute: string;
+    env: PCO_URL.Environment;
+    appName: string;
+    routes: any;
+    colors: any;
+    userAvatarPath: string;
+    userId: string;
+    userName: string;
+    orgName: string;
+    connectedPeople: any;
+    search?: any;
+    style?: any;
+    showOrgName?: boolean;
+    notifications?: any;
+    requestAppsFetch: any;
+    requestConnectedPeopleFetch: any;
+    requestUnlinkConnectedPeople: any;
+    requestSwitchConnectedPerson: any;
+    requestClearAppsCache: any;
+    requestClearConnectedPeopleCache: any;
+    linkToProfile?: boolean;
+    onLinkToProfileClick?: () => any;
+}, {
+    appsMenuVisible: boolean;
+    userMenuVisible: boolean;
+    routesVisible: boolean;
+}> {
+    static defaultProps: {
+        notifications: () => any;
         search: () => any;
         linkToProfile: boolean;
         showOrgName: boolean;
-        useDummyNotifications: boolean;
     };
-};
-declare const Route: ({ active, colors, style, ...nativeProps }: {
+    constructor(props: any);
+    hideRoutes(): void;
+    showRoutes(): void;
+    getTextColor(): any;
+    render(): JSX.Element;
+}
+export declare class Route extends React.Component<{
     active: boolean;
-    children: React.ReactNode;
     colors: any;
-    href?: string;
     style?: object;
-}) => JSX.Element;
-export { Topbar, Route };
+    href?: string;
+}, {
+    entered: boolean;
+    down: boolean;
+}> {
+    constructor(props: any);
+    render(): JSX.Element;
+}

package/dist/modules/small_topbar.d.ts

@@ -1,45 +1,48 @@
-/// <reference types="react" />
+import * as React from "react";
 import * as PCO_URL from "@planningcenter/url";
-declare const Topbar: {
-    (props: {
-        apps: {
-            attributes: {
-                name: string;
-                url: string;
-            };
-        }[];
-        env: PCO_URL.Environment;
-        appName: string;
-        routes: any;
-        colors: any;
-        userAvatarPath: string;
-        userId: string;
-        userName: string;
-        orgName: string;
-        connectedPeople: {
-            id: number;
-            attributes: {
-                name: string;
-                organization_name: string;
-            };
-        }[];
-        style?: any;
-        currentRouteComponent?: any;
-        requestAppsFetch: any;
-        requestConnectedPeopleFetch: any;
-        requestUnlinkConnectedPeople: any;
-        requestSwitchConnectedPerson: any;
-        requestClearAppsCache: any;
-        requestClearConnectedPeopleCache: any;
-        useDummyNotifications?: boolean;
-        notifications?: any;
-    }): JSX.Element;
-    defaultProps: {
+export declare class Topbar extends React.Component<{
+    apps: {
+        attributes: {
+            name: string;
+            url: string;
+        };
+    }[];
+    env: PCO_URL.Environment;
+    appName: string;
+    routes: any;
+    colors: any;
+    userAvatarPath: string;
+    userId: string;
+    userName: string;
+    orgName: string;
+    connectedPeople: {
+        id: number;
+        attributes: {
+            name: string;
+            organization_name: string;
+        };
+    }[];
+    style?: any;
+    currentRouteComponent?: any;
+    requestAppsFetch: any;
+    requestConnectedPeopleFetch: any;
+    requestUnlinkConnectedPeople: any;
+    requestSwitchConnectedPerson: any;
+    requestClearAppsCache: any;
+    requestClearConnectedPeopleCache: any;
+    notifications?: any;
+}, {
+    routesMenuVisible: boolean;
+    userMenuVisible: boolean;
+}> {
+    constructor(props: any);
+    static defaultProps: {
         currentRouteComponent: (props: any) => JSX.Element;
     };
-};
-declare const Route: ({ active, ...props }: {
+    componentDidUpdate(): "" | "hidden";
+    render(): JSX.Element;
+}
+export declare const Route: ({ active, ...props }: {
     [x: string]: any;
     active: any;
 }) => JSX.Element;
-export { Route, Topbar };