@stack-spot/portal-layout 2.0.0 → 2.1.0

package/dist/components/NotificationCenter/styled.js

@@ -0,0 +1,74 @@
+import { theme } from '@stack-spot/portal-theme';
+import { styled } from 'styled-components';
+import { Backdrop } from '../Backdrop.js';
+export const NotificationBox = styled.div `
+  .notification-button {
+    border: none;
+    background: transparent;
+    margin: 0 40px;
+    position: relative;
+
+    &.loading {
+      cursor: progress;
+      opacity: 0.5;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: ${theme.color.danger['500']};
+      transform: scale(0);
+      transition: transform ease-in 0.3s;
+    }
+
+    &.unread:before {
+      transform: scale(1);
+    }
+  }
+`;
+export const StyledBackdrop = styled(Backdrop) `
+  position: absolute;
+  top: calc(var(--header-height) + 10px);
+  right: 60px;
+  box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
+
+  .notification-panel {
+    width: 368px;
+    padding: 16px;
+    border-radius: 4px;
+    background-color: ${theme.color.light[300]};
+    border: 1px solid ${theme.color.light[400]};
+  }
+
+  .filter-list {
+    list-style: none;
+    margin: 16px 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .filter-btn {
+      &:focus {
+        border-color: transparent;
+      }
+      &[aria-pressed="true"] {
+        border-color: ${theme.color.primary[500]};
+      }
+    }
+  }
+
+  .see-all {
+    margin-top: 8px;
+    width: 100%;
+  }
+
+  .error-feedback {
+    flex-direction: column;
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/dist/components/NotificationCenter/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/NotificationCenter/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;0BAoBf,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;;;;;CASlD,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;6BAIjB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY;;;;;;wBAMpC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;wBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;wBAetB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;;;;;;;;;CAa/C,CAAA"}

package/dist/components/NotificationCenter/tour.d.ts

@@ -0,0 +1,2 @@
+export declare const useNotificationsTourStep: () => void;
+//# sourceMappingURL=tour.d.ts.map

package/dist/components/NotificationCenter/tour.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationCenter/tour.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB,YAcpC,CAAA"}

package/dist/components/NotificationCenter/tour.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from '@citric/core';
+import { useTour } from '../tour/index.js';
+import { useNotificationsDictionary } from './dictionary.js';
+export const useNotificationsTourStep = () => {
+    const t = useNotificationsDictionary();
+    const { addStep } = useTour();
+    addStep({
+        content: _jsx(Box, { px: 5, py: 3, children: _jsx(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: t.tour }) }),
+        selector: '.notificationsTour',
+        title: t.notifications,
+        position: 'bottom',
+    });
+};
+//# sourceMappingURL=tour.js.map

package/dist/components/NotificationCenter/tour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.js","sourceRoot":"","sources":["../../../src/components/NotificationCenter/tour.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAA;AAEzD,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,MAAM,CAAC,GAAG,0BAA0B,EAAE,CAAA;IACtC,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAAA;IAE7B,OAAO,CAAC;QACN,OAAO,EAAE,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YACxB,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,YAC7D,CAAC,CAAC,IAAI,GACF,GACH;QACN,QAAQ,EAAE,oBAAoB;QAC9B,KAAK,EAAE,CAAC,CAAC,aAAa;QACtB,QAAQ,EAAE,QAAQ;KACZ,CAAC,CAAA;AACX,CAAC,CAAA"}

package/dist/components/NotificationCenter/types.d.ts

@@ -0,0 +1,21 @@
+import { NotificationListProps } from '@stack-spot/portal-components/Notifications';
+export type NotificationFilter = 'ALL' | 'UNREAD' | 'HIGH' | 'MEDIUM' | 'LOW';
+export interface NotificationPanelProps extends Omit<NotificationListProps, 'compact' | 'onCommit'> {
+    filter: NotificationFilter;
+    loading: boolean;
+    error: any;
+    onFilter: (filter: NotificationFilter) => Promise<void>;
+    visible: boolean;
+    onClose: () => void;
+}
+export interface NotificationPanelHeaderProps {
+    filter: NotificationFilter;
+    onChangeFilter: (value: NotificationFilter) => Promise<void>;
+    onClose: () => void;
+}
+export interface FilterButtonProps {
+    value: NotificationFilter;
+    current: NotificationFilter;
+    onChangeFilter: (value: NotificationFilter) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/NotificationCenter/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationCenter/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAEnF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;AAE7E,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,UAAU,CAAC;IACjG,MAAM,EAAE,kBAAkB,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,kBAAkB,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,OAAO,EAAE,kBAAkB,CAAC;IAC5B,cAAc,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACrD"}

package/dist/components/NotificationCenter/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/NotificationCenter/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/NotificationCenter/types.ts"],"names":[],"mappings":""}

package/dist/components/NotificationCenter/utils.d.ts

@@ -0,0 +1,5 @@
+import { LoadNotificationsFilters } from '@stack-spot/portal-components/Notifications';
+import { NotificationFilter } from './types.js';
+export declare function getFiltersFromName(filterName: NotificationFilter): LoadNotificationsFilters;
+export declare function getNameFromFilters(filters: LoadNotificationsFilters): NotificationFilter;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/NotificationCenter/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationCenter/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAA;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAI5C,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,kBAAkB,GAAG,wBAAwB,CAQ3F;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,wBAAwB,GAAG,kBAAkB,CAIxF"}

package/dist/components/NotificationCenter/utils.js

@@ -0,0 +1,18 @@
+const empty = { committed: undefined, context: undefined, criticality: undefined, search: undefined };
+export function getFiltersFromName(filterName) {
+    switch (filterName) {
+        case 'ALL': return empty;
+        case 'HIGH': return { ...empty, criticality: 'HIGH' };
+        case 'LOW': return { ...empty, criticality: 'LOW' };
+        case 'MEDIUM': return { ...empty, criticality: 'MEDIUM' };
+        case 'UNREAD': return { ...empty, committed: false };
+    }
+}
+export function getNameFromFilters(filters) {
+    if (filters.committed === false)
+        return 'UNREAD';
+    if (filters.criticality)
+        return filters.criticality;
+    return 'ALL';
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/NotificationCenter/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/NotificationCenter/utils.ts"],"names":[],"mappings":"AAGA,MAAM,KAAK,GAA6B,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAA;AAE/H,MAAM,UAAU,kBAAkB,CAAC,UAA8B;IAC/D,QAAQ,UAAU,EAAE,CAAC;QACnB,KAAK,KAAK,CAAC,CAAC,OAAO,KAAK,CAAA;QACxB,KAAK,MAAM,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,CAAA;QACrD,KAAK,KAAK,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAA;QACnD,KAAK,QAAQ,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAA;QACzD,KAAK,QAAQ,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAA;IACtD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,OAAiC;IAClE,IAAI,OAAO,CAAC,SAAS,KAAK,KAAK;QAAE,OAAO,QAAQ,CAAA;IAChD,IAAI,OAAO,CAAC,WAAW;QAAE,OAAO,OAAO,CAAC,WAAW,CAAA;IACnD,OAAO,KAAK,CAAA;AACd,CAAC"}

package/dist/components/error/ErrorBoundary.d.ts

@@ -30,6 +30,9 @@ export declare class ErrorBoundary extends Component<Props, State> {
         } | undefined;
         body?: import("react").ReactNode;
         image?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        direction?: "column" | "row" | undefined;
+        style?: import("react").CSSProperties | undefined;
+        className?: string | undefined;
         hasError: boolean;
     };
     componentDidCatch(error: any, errorInfo: any): void;

package/dist/components/error/ErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/error/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAiB,MAAM,qCAAqC,CAAA;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,UAAU,KAAM,SAAQ,gBAAgB;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC5C,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG;;;;;;;;;;;;;;;IAI1C,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IAM5C,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC;IAI7C,MAAM;CAKP"}
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/error/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAiB,MAAM,qCAAqC,CAAA;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,UAAU,KAAM,SAAQ,gBAAgB;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC5C,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG;;;;;;;;;;;;;;;;;;IAI1C,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IAM5C,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC;IAI7C,MAAM;CAKP"}

package/dist/components/error/SilentErrorBoundary.d.ts

@@ -31,6 +31,9 @@ export declare class SilentErrorBoundary extends Component<Props, State> {
         } | undefined;
         body?: import("react").ReactNode;
         image?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        direction?: "column" | "row" | undefined;
+        style?: import("react").CSSProperties | undefined;
+        className?: string | undefined;
         hasError: boolean;
     };
     componentDidCatch(error: any, errorInfo: any): void;

package/dist/components/error/SilentErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SilentErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/error/SilentErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AAEtE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,UAAU,KAAM,SAAQ,gBAAgB;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;GASG;AACH,qBAAa,mBAAoB,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAClD,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG;;;;;;;;;;;;;;;IAI1C,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IAM5C,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC;IAI7C,MAAM;CAoBP"}
+{"version":3,"file":"SilentErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/error/SilentErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AAEtE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,UAAU,KAAM,SAAQ,gBAAgB;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;GASG;AACH,qBAAa,mBAAoB,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAClD,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG;;;;;;;;;;;;;;;;;;IAI1C,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IAM5C,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC;IAI7C,MAAM;CAoBP"}

package/dist/index.d.ts

@@ -1,15 +1,15 @@
-export { Layout, RawLayout } from './Layout.js';
-export { overlay } from './LayoutOverlayManager.js';
 export { Dialog } from './components/Dialog.js';
 export { Header, HeaderProps } from './components/Header.js';
-export { OverlayContent } from './components/OverlayContent.js';
-export { PortalSwitcher } from './components/PortalSwitcher.js';
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent.js';
 export { MenuSections } from './components/menu/MenuSections.js';
 export * from './components/menu/types.js';
+export { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent.js';
+export { PortalSwitcher } from './components/PortalSwitcher.js';
 export * from './components/tour/index.js';
 export * from './components/types.js';
 export * from './elements.js';
 export * from './errors.js';
+export { Layout, RawLayout } from './Layout.js';
+export { overlay } from './LayoutOverlayManager.js';
 export * from './utils.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,cAAc,SAAS,CAAA"}

package/dist/index.js

@@ -1,15 +1,15 @@
-export { Layout, RawLayout } from './Layout.js';
-export { overlay } from './LayoutOverlayManager.js';
 export { Dialog } from './components/Dialog.js';
 export { Header } from './components/Header.js';
-export { OverlayContent } from './components/OverlayContent.js';
-export { PortalSwitcher } from './components/PortalSwitcher.js';
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent.js';
 export { MenuSections } from './components/menu/MenuSections.js';
 export * from './components/menu/types.js';
+export { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent.js';
+export { PortalSwitcher } from './components/PortalSwitcher.js';
 export * from './components/tour/index.js';
 export * from './components/types.js';
 export * from './elements.js';
 export * from './errors.js';
+export { Layout, RawLayout } from './Layout.js';
+export { overlay } from './LayoutOverlayManager.js';
 export * from './utils.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,cAAc,SAAS,CAAA"}

package/dist/layout.css

@@ -27,7 +27,7 @@ body {
   display: flex;
   flex-direction: column;
   flex: 1;
-  background: var(--light-400);
+  background: var(--light-300);
   font: var(--font);
   color: var(--light-contrastText);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,7 +15,7 @@
     "@citric/ui": "^5.7.2 || ^6.0.0",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.0.0",
-    "@stack-spot/portal-components": "^2.0.0",
+    "@stack-spot/portal-components": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.10"

package/readme.md

@@ -1,6 +1,7 @@
 # Layout
 Implements the general layout for a Stackspot web application.
 
+
 ## Components
 - Header: a top bar with a logo and a user menu.
 - Menu (sections): a left vertical bar with every section in the application.
@@ -58,6 +59,7 @@ const MyApp = () => {
 }
 ```
 
+
 The Header and Menu in a layout are highly customizable. Check the code documentation for more details!
 
 ## Modal and right panel pitfalls

package/src/LayoutOverlayManager.tsx

@@ -71,24 +71,53 @@ class LayoutOverlayManager {
    */
   private lastActiveElement: Element | null = null
 
+  private closeCustomBackdrops(elements: NodeListOf<Element>) {
+    // this is the easiest way to close each custom backdrop by calling their respective "onClose" callbacks. This is a hidden button
+    // that exists in every <Backdrop> component.
+    elements.forEach(element => (element.querySelector('[data-custom-backdrop-close]') as HTMLElement)?.click?.())
+  }
+
+  private onClickBackdrop(event: MouseEvent) {
+    if (this.isModalOpen()) !this.elements?.modal?.contains?.(event.target as Node) && this.closeModal()
+    else if (this.isRightPanelOpen()) !this.elements?.rightPanel?.contains?.(event.target as Node) && this.closeRightPanel()
+    else {
+      const customBackdrops = this.getAllVisibleCustomBackdrops()
+      if (customBackdrops.length) {
+        let isClickInside = false
+        customBackdrops.forEach((element) => {
+          if (element.contains(event.target as Node)) isClickInside = true
+        })
+        if (!isClickInside) this.closeCustomBackdrops(customBackdrops)
+      } else {
+        this.setMainContentInteractivity(true)
+      }
+    }
+  }
+
+  private onPressKeyInBackdrop(event: KeyboardEvent) {
+    if (event.key !== 'Escape') return
+    if (this.isModalOpen()) this.closeModal()
+    if (this.isRightPanelOpen()) this.closeRightPanel()
+    else {
+      const customBackdrops = this.getAllVisibleCustomBackdrops()
+      if (customBackdrops.length) this.closeCustomBackdrops(customBackdrops)
+      else this.setMainContentInteractivity(true)
+    }
+    event.preventDefault()
+  }
+
   private setupElements() {
     this.elements = getLayoutElements()
-    this.elements.backdrop?.addEventListener('mousedown', (event) => {
-      if (this.isModalOpen()) !this.elements?.modal?.contains?.(event.target as Node) && this.closeModal()
-      else if (this.isRightPanelOpen()) !this.elements?.rightPanel?.contains?.(event.target as Node) && this.closeRightPanel()
-      else this.setMainContentInteractivity(true)
-    })
-    this.elements.backdrop?.addEventListener('keydown', (event) => {
-      if (event.key !== 'Escape') return
-      if (this.isModalOpen()) this.closeModal()
-      if (this.isRightPanelOpen()) this.closeRightPanel()
-      else this.setMainContentInteractivity(true)
-      event.preventDefault()
-    })
+    this.elements.backdrop?.addEventListener('mousedown', (event) => this.onClickBackdrop(event))
+    this.elements.backdrop?.addEventListener('keydown', (event) => this.onPressKeyInBackdrop(event))
     this.setInteractivity(this.elements?.modal, false)
     this.setInteractivity(this.elements?.rightPanel, false)
     this.setInteractivity(this.elements?.bottomDialog, false)
   }
+
+  private getAllVisibleCustomBackdrops() {
+    return document.querySelectorAll('[data-custom-backdrop-visibility=true]')
+  }
   
   /**
    * Setup the overlay layout elements.
@@ -130,9 +159,9 @@ class LayoutOverlayManager {
     this.elements?.backdrop?.setAttribute('class', interactive ? '' : 'visible')
   }
 
-  private showOverlay(element: HTMLElement | null | undefined, extraClasses: string[] = [], blockMainContent = true) {
+  private showOverlay(element: HTMLElement | null | undefined, extraClasses: string[] = [], blockMainContent = true, manageClasses = true) {
     this.lastActiveElement = document.activeElement
-    element?.classList.add('visible', ...extraClasses)
+    if (manageClasses) element?.classList.add('visible', ...extraClasses)
     this.setInteractivity(element, true)
     if (blockMainContent) this.setMainContentInteractivity(false)
     setTimeout(() => focusFirstChild(
@@ -141,12 +170,36 @@ class LayoutOverlayManager {
     ), 50)
   }
 
-  private hideOverlay(element: HTMLElement | null | undefined) {
-    element?.setAttribute('class', '')
+  private hideOverlay(element: HTMLElement | null | undefined, manageClasses = true) {
+    if (manageClasses) element?.setAttribute('class', '')
     this.setInteractivity(element, false)
     this.setMainContentInteractivity(true)
   }
 
+  /**
+   * Shows the backdrop. The element passed as parameter must be a child of backdrop. Some accessibility features will be attached to
+   * the element.
+   * 
+   * Consider using the component <Backdrop> from this library instead of calling this function directly.
+   * @param element the element to show inside the backdrop. It must already be a child of the backdrop.
+   */
+  showBackdrop(element?: HTMLElement | null) {
+    this.showOverlay(element, [], true, false)
+  }
+
+  /**
+   * Closes the backdrop. The element passed as parameter must be a child of backdrop. Some accessibility features will be run on the
+   * element.
+   * 
+   * Consider using the component <Backdrop> from this library instead of calling this function directly.
+   * @param element the element showing inside the backdrop. It must be a child of the backdrop.
+   */
+  closeBackdrop(element?: HTMLElement | null) {
+    this.hideOverlay(element, false)
+    const lastActiveElement = this.lastActiveElement as HTMLElement | null
+    lastActiveElement?.focus?.()
+  }
+
   /**
    * @returns true if the modal is currently opened. False otherwise.
    */

package/src/components/Backdrop.tsx

@@ -0,0 +1,32 @@
+import { useLayoutEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { getLayoutElements } from '../elements'
+import { overlay } from '../LayoutOverlayManager'
+
+export interface BackdropProps {
+  children: React.ReactNode,
+  visible: boolean,
+  onClose: () => void,
+  style?: React.CSSProperties,
+  className?: string,
+}
+
+export const Backdrop = ({ children, visible = false, onClose, className, style }: BackdropProps) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (visible) overlay.showBackdrop(ref.current)
+    else overlay.closeBackdrop(ref.current)
+  }, [visible])
+
+  const backdropContent = (
+    <div ref={ref} data-custom-backdrop-visibility={visible} className={className} style={style}>
+      {children}
+      {/* This button allows the OverlayManager to programmatically close any custom backdrop by calling their respective onClose prop. */}
+      <button data-custom-backdrop-close onClick={onClose} style={{ display: 'none' }}>Close</button>
+    </div>
+  )
+  
+  const backdrop = getLayoutElements().backdrop
+  return backdrop ? createPortal(backdropContent, backdrop) : null
+}

package/src/components/Header.tsx

@@ -3,6 +3,7 @@ import { SelectionListProps } from '@stack-spot/portal-components/SelectionList'
 import { useAnchorTag } from '@stack-spot/portal-components/anchor'
 import { Logo } from '@stack-spot/portal-components/svg'
 import { ReactNode } from 'react'
+import { NotificationCenter } from './NotificationCenter'
 import { PortalSwitcher, PortalSwitcherProps } from './PortalSwitcher'
 import { UserMenu } from './UserMenu'
 
@@ -39,13 +40,17 @@ export interface HeaderProps {
    * A custom React Node to show at the right (end) of the header.
    */
   right?: ReactNode,
+  /**
+   * Whether or not to show the notification center.
+   */
+  showNotificationCenter?: boolean,
 }
 
 /**
  * The page header.
  * @param props the React props for the header {@link HeaderProps}.
  */
-export const Header = ({ logo, logoHref, center, right, userName, email, options, portalSwitch }: HeaderProps) => {
+export const Header = ({ logo, logoHref, center, right, userName, email, options, portalSwitch, showNotificationCenter }: HeaderProps) => {
   const Link = useAnchorTag()
 
   return (
@@ -56,6 +61,7 @@ export const Header = ({ logo, logoHref, center, right, userName, email, options
       }
       <Flex flex={1}>{center}</Flex>
       {right}
+      {showNotificationCenter && <NotificationCenter />}
       {userName && <UserMenu userName={userName} email={email} options={options} />}
     </>
   )

package/src/components/NotificationCenter/NotificationPanel.tsx

@@ -0,0 +1,35 @@
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { ErrorFeedback } from '@stack-spot/portal-components/error'
+import { NotificationList, useNotificationController } from '@stack-spot/portal-components/Notifications'
+import { ScrollView } from '@stack-spot/portal-components/ScrollView'
+import { NotificationPanelHeader } from './NotificationPanelHeader'
+import { NotificationPanelFooter } from './NotificationsPanelFooter'
+import { StyledBackdrop } from './styled'
+import { NotificationPanelProps } from './types'
+
+export const NotificationPanel = ({ filter, onFilter, loading, error, visible, onClose, ...props }: NotificationPanelProps) => {
+  const controller = useNotificationController()
+  return (
+    <StyledBackdrop visible={visible} onClose={onClose}>
+      <AnimatedHeight
+        className="notification-panel"
+        visible={visible}
+        header={<NotificationPanelHeader filter={filter} onChangeFilter={onFilter} onClose={onClose} />}
+        footer={<NotificationPanelFooter onClose={onClose} />}
+      >
+        <ScrollView direction="vertical" style={{ maxHeight: 'calc(100vh - 300px)' }}>
+          {error ? <ErrorFeedback code={error.code} direction="column" /> : <NotificationList
+            {...props}
+            compact
+            loading={loading}
+            onCommit={id => controller.markAsCommitted(id)}
+            onClickAction={(id) => {
+              onClose()
+              controller.config.onClickAction?.(id)
+            }}
+          />}
+        </ScrollView>
+      </AnimatedHeight>
+    </StyledBackdrop>
+  )
+}

package/src/components/NotificationCenter/NotificationPanelHeader.tsx

@@ -0,0 +1,53 @@
+import { Button, Flex, IconBox, Text } from '@citric/core'
+import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { CLOSE_OVERLAY_ID } from '../OverlayContent'
+import { useNotificationsDictionary } from './dictionary'
+import { FilterButtonProps, NotificationPanelHeaderProps } from './types'
+
+const FilterButton = ({ current, onChangeFilter, value }: FilterButtonProps) => {
+  const t = useNotificationsDictionary()
+  const active = current === value
+
+  return (
+    <Button
+      appearance="text"
+      role="button"
+      aria-label={t[`${value}.ariaLabel`]}
+      aria-pressed={active}
+      onClick={() => onChangeFilter(value)}
+      className="filter-btn"
+    >
+      <Flex flexDirection="row" style={{ gap: '8px' }} alignItems="center">
+        <Text colorScheme="inverse" appearance="microtext1">
+          {t[`${value}.label`]}
+        </Text>
+      </Flex>
+    </Button>
+  )
+}
+
+export const NotificationPanelHeader = ({ filter, onChangeFilter, onClose }: NotificationPanelHeaderProps) => {
+  const t = useNotificationsDictionary()
+  return (
+    <Flex flexDirection="column">
+      <Flex justifyContent="space-between">
+        <Text appearance="h4">
+          {t.notifications}
+        </Text>
+        <IconButton id={CLOSE_OVERLAY_ID} aria-label={t.close} onClick={onClose}>
+          <IconBox size="xs">
+            <TimesMini />
+          </IconBox>
+        </IconButton>
+      </Flex>
+      <ul className="filter-list">
+        <li><FilterButton current={filter} onChangeFilter={onChangeFilter} value="ALL" /></li>
+        <li><FilterButton current={filter} onChangeFilter={onChangeFilter} value="UNREAD" /></li>
+        <li><FilterButton current={filter} onChangeFilter={onChangeFilter} value="HIGH" /></li>
+        <li><FilterButton current={filter} onChangeFilter={onChangeFilter} value="MEDIUM" /></li>
+        <li><FilterButton current={filter} onChangeFilter={onChangeFilter} value="LOW" /></li>
+      </ul>
+    </Flex>
+  )
+}

package/src/components/NotificationCenter/NotificationsPanelFooter.tsx

@@ -0,0 +1,25 @@
+import { Button, Text } from '@citric/core'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { useNotificationController } from '@stack-spot/portal-components/Notifications'
+import { useNotificationsDictionary } from './dictionary'
+
+export const NotificationPanelFooter = ({ onClose }: { onClose: () => void }) => {
+  const t = useNotificationsDictionary()
+  const controller = useNotificationController()
+  const Link = useAnchorTag()
+  return (
+    <Button
+      as={Link}
+      onClick={onClose}
+      size="sm"
+      colorScheme="inverse"
+      appearance="text"
+      className="see-all"
+      href={controller.config.notificationsPath}
+    >
+      <Text appearance="microtext1">
+        {t.seeAll}
+      </Text>
+    </Button>
+  )
+}