@stack-spot/portal-components 1.3.1-rc → 1.3.3-rc

package/dist/components/AsyncContent.d.ts

@@ -34,6 +34,13 @@ interface Props {
     */
     errorDetails: ErrorProps;
 }
+/**
+ * Renders a component that provides user feedback on async requests.
+ * It renders either a loading component, an error component (which is received as prop)
+ * or the received children props.
+ *
+ * @param options the props for rendering the component: {@link Props}.
+ */
 export declare const AsyncContent: ({ loading, error, autofocus, children, errorDetails }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};
 //# sourceMappingURL=AsyncContent.d.ts.map

package/dist/components/AsyncContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAEpE,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,cAAc,EAAG,KAAK,CAAC,EAAE,CAAC;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAC1C;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC;AAED,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;MAEE;IACF,YAAY,EAAE,UAAU,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,0DAA2D,KAAK,iIA8BxF,CAAA"}
+{"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAEpE,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,cAAc,EAAG,KAAK,CAAC,EAAE,CAAC;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAC1C;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC;AAED,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;MAEE;IACF,YAAY,EAAE,UAAU,CAAC;CAC1B;AAED;;;;;;GAMG;AAEH,eAAO,MAAM,YAAY,0DAA2D,KAAK,iIA8BxF,CAAA"}

package/dist/components/AsyncContent.js

@@ -2,6 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from '@citric/core';
 import { LoadingCircular } from '@citric/ui';
 import { useEffect, useLayoutEffect } from 'react';
+/**
+ * Renders a component that provides user feedback on async requests.
+ * It renders either a loading component, an error component (which is received as prop)
+ * or the received children props.
+ *
+ * @param options the props for rendering the component: {@link Props}.
+ */
 export const AsyncContent = ({ loading, error, autofocus, children, errorDetails }) => {
     const ErrorComponent = errorDetails.errorComponent;
     useEffect(() => {

package/dist/components/AsyncContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAqCpE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAS,EAAE,EAAE;IAC3F,MAAM,cAAc,GAAG,YAAY,CAAC,cAAc,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;YAC/B,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,oBAAiB,SAAS,YAC7G,KAAC,eAAe,KAAG,GACd,CACR,CAAA;IACH,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IACzC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}
+{"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAqCpE;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAS,EAAE,EAAE;IAC3F,MAAM,cAAc,GAAG,YAAY,CAAC,cAAc,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;YAC/B,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,oBAAiB,SAAS,YAC7G,KAAC,eAAe,KAAG,GACd,CACR,CAAA;IACH,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IACzC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/dist/components/InfiniteScroll.d.ts

@@ -1,3 +1,11 @@
 import { Props as ReactInfiniteScrollProps } from 'react-infinite-scroll-component';
+/**
+ * Renders a component that provides infinite scroll.
+ *
+ * The component wraps around the ReactInfiniteScroll component.
+ * It provides a loading indicator using citric loading circular and custom styles.
+ *
+ * By default, it adds the scrollable target as page and overflow hidden.
+ */
 export declare const InfiniteScroll: ({ style, children, scrollableTarget, ...props }: Omit<ReactInfiniteScrollProps, 'loader'>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=InfiniteScroll.d.ts.map

package/dist/components/InfiniteScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteScroll.tsx"],"names":[],"mappings":"AACA,OAA4B,EAAE,KAAK,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAA;AAExG,eAAO,MAAM,cAAc,oDAAqD,KAAK,wBAAwB,EAAE,QAAQ,CAAC,4CASvH,CAAA"}
+{"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteScroll.tsx"],"names":[],"mappings":"AACA,OAA4B,EAAE,KAAK,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAA;AAExG;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,oDAAqD,KAAK,wBAAwB,EAAE,QAAQ,CAAC,4CASvH,CAAA"}

package/dist/components/InfiniteScroll.js

@@ -1,5 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LoadingCircular } from '@citric/ui';
 import ReactInfiniteScroll from 'react-infinite-scroll-component';
+/**
+ * Renders a component that provides infinite scroll.
+ *
+ * The component wraps around the ReactInfiniteScroll component.
+ * It provides a loading indicator using citric loading circular and custom styles.
+ *
+ * By default, it adds the scrollable target as page and overflow hidden.
+ */
 export const InfiniteScroll = ({ style, children, scrollableTarget, ...props }) => (_jsx(ReactInfiniteScroll, { loader: _jsx(LoadingCircular, {}), scrollableTarget: scrollableTarget || 'page', style: { overflow: 'hidden', ...style }, ...props, children: children }));
 //# sourceMappingURL=InfiniteScroll.js.map

package/dist/components/InfiniteScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfiniteScroll.js","sourceRoot":"","sources":["../../src/components/InfiniteScroll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,mBAA0D,MAAM,iCAAiC,CAAA;AAExG,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAA4C,EAAE,EAAE,CAAC,CAC3H,KAAC,mBAAmB,IAClB,MAAM,EAAE,KAAC,eAAe,KAAG,EAC3B,gBAAgB,EAAE,gBAAgB,IAAI,MAAM,EAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KACnC,KAAK,YAER,QAAQ,GACW,CACvB,CAAA"}
+{"version":3,"file":"InfiniteScroll.js","sourceRoot":"","sources":["../../src/components/InfiniteScroll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,mBAA0D,MAAM,iCAAiC,CAAA;AAExG;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAA4C,EAAE,EAAE,CAAC,CAC3H,KAAC,mBAAmB,IAClB,MAAM,EAAE,KAAC,eAAe,KAAG,EAC3B,gBAAgB,EAAE,gBAAgB,IAAI,MAAM,EAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KACnC,KAAK,YAER,QAAQ,GACW,CACvB,CAAA"}

package/dist/components/Notifications/NotificationComponent.d.ts

@@ -5,7 +5,7 @@ interface Props {
     hasUnreadNotification?: boolean;
 }
 interface Props {
-    onMarkAsRead: (notificationId: string, type: 'callToAction' | 'icon') => void;
+    onMarkAsReadUnread: (notificationId: string, read: boolean, type: 'callToAction' | 'icon') => void;
     notifications?: StackspotNotification[];
     isLoading: boolean;
     error?: any;
@@ -19,6 +19,6 @@ interface Props {
     placeholderComponent: ReactElement;
     isSummary: boolean;
 }
-export declare const NotificationComponent: ({ hasUnreadNotification, onMarkAsRead, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationComponent: ({ hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=NotificationComponent.d.ts.map

package/dist/components/Notifications/NotificationComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationComponent.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAA;AAE9C,OAAO,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK1D,OAAO,EAAoB,uBAAuB,EAAE,qBAAqB,EAAc,MAAM,SAAS,CAAA;AAEtG,UAAU,KAAK;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAkHD,UAAU,KAAK;IACb,YAAY,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;IAC9E,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,YAAY,EAAE,CAAC,WAAW,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC9D,oBAAoB,EAAE,YAAY,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB,uNAK/B,KAAK,4CAkFP,CAAA"}
+{"version":3,"file":"NotificationComponent.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK1D,OAAO,EAAoB,uBAAuB,EAAE,qBAAqB,EAAc,MAAM,SAAS,CAAA;AAEtG,UAAU,KAAK;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAkHD,UAAU,KAAK;IACb,kBAAkB,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;IACnG,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,YAAY,EAAE,CAAC,WAAW,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC9D,oBAAoB,EAAE,YAAY,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB,6NAK/B,KAAK,4CAqFP,CAAA"}

package/dist/components/Notifications/NotificationComponent.js

@@ -5,6 +5,7 @@ import { listToClass, theme } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { useState } from 'react';
 import styled from 'styled-components';
+import { IconButton } from '@citric/ui';
 import { AsyncContent } from '../AsyncContent.js';
 import { InfiniteScroll } from '../InfiniteScroll.js';
 import { ScrollView } from '../ScrollView.js';
@@ -18,7 +19,7 @@ const NotificationsComponent = styled(Flex) `
   z-index: 1;
   visibility: hidden;
   position: absolute;
-  top: calc(var(--header-height) - 2px);
+  top: calc(var(--header-height) + 4px);
   right: -270%;
   width: 400px;
 
@@ -41,7 +42,7 @@ const NotificationsComponent = styled(Flex) `
   &::after {
     content: '';
     position: absolute;
-    border-width: 10px;
+    border-width: 8px 32px;
     border-style: solid;
     border-color: transparent;
     bottom: 100%;
@@ -65,16 +66,16 @@ const NotificationsFilter = ({ type, onChangeFilterType }) => {
     const t = useTranslate(dictionary);
     return (_jsxs(Flex, { alignItems: "center", sx: { gap: '4px' }, my: "5", children: [_jsx(Button, { "aria-pressed": !type, appearance: "text", role: "button", "aria-label": t.filterAll, onClick: () => onChangeFilterType(), sx: { borderColor: !type ? 'primary' : 'transparent' }, children: _jsx(Text, { colorScheme: "inverse", appearance: "microtext1", children: t.all }) }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterUnread, label: t.unread, enumType: UnreadType.Unread }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterHigh, label: t.high, enumType: NotificationType.High }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterMedium, label: t.medium, enumType: NotificationType.Medium }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterLow, label: t.low, enumType: NotificationType.Low })] }));
 };
-export const NotificationComponent = ({ hasUnreadNotification, onMarkAsRead, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary = false, }) => {
+export const NotificationComponent = ({ hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary = false, }) => {
     const t = useTranslate(dictionary);
     const [visible, setVisible] = useState(false);
     const updateType = (updatedType) => {
         onUpdateType(updatedType);
     };
-    return (_jsxs(Flex, { sx: { position: 'relative' }, children: [_jsx(IconBox, { size: "md", sx: { cursor: 'pointer' }, onClick: () => {
+    return (_jsxs(Flex, { sx: { position: 'relative' }, children: [_jsx(IconButton, { "aria-label": t.openNotifications, onClick: () => {
                     onClickViewNotifications();
                     setVisible(true);
-                }, className: "notificationsTour", children: _jsx(Bell, {}) }), hasUnreadNotification && _jsx(Box, { sx: { position: 'absolute', right: '2px' }, children: _jsx(StatusCircle, { status: 'danger' }) }), _jsx(NotificationsComponent, { className: listToClass(['selection-list', visible ? 'visible' : undefined]), "$scroll": true, "aria-hidden": !visible, children: _jsxs(Flex, { className: "content", p: 5, flexDirection: "column", justifyContent: "space-between", children: [_jsxs(Flex, { children: [_jsxs(Flex, { justifyContent: "space-between", w: "100%", children: [_jsx(Text, { appearance: "h4", children: t.notifications }), _jsx(IconBox, { appearance: "circle", onClick: () => setVisible(false), sx: { border: `1px solid ${theme.color.light[500]}`, cursor: 'pointer' }, children: _jsx(TimesMini, {}) })] }), _jsx(NotificationsFilter, { type: type, onChangeFilterType: updateType }), _jsx(AsyncContent, { error: error, errorDetails: errorDetails, loading: isLoading, children: notifications?.length ? _jsx(StyledBox, { children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: '630px' }, children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", children: notifications?.map((item) => (_jsx(NotificationItem, { notification: item, isSummary: isSummary, onClickMarkRead: (type) => onMarkAsRead(item.id, type) }, item.id))) }) }) }) })
+                }, sx: { border: 'none', bg: 'transparent' }, children: _jsx(IconBox, { size: "md", className: "notificationsTour", children: _jsx(Bell, {}) }) }), hasUnreadNotification && _jsx(Box, { sx: { position: 'absolute', right: '2px' }, "aria-label": t.hasUnread, children: _jsx(StatusCircle, { status: 'danger' }) }), _jsx(NotificationsComponent, { className: listToClass(['selection-list', visible ? 'visible' : undefined]), "$scroll": true, "aria-hidden": !visible, children: _jsxs(Flex, { className: "content", p: 5, flexDirection: "column", justifyContent: "space-between", children: [_jsxs(Flex, { w: "100%", children: [_jsxs(Flex, { justifyContent: "space-between", w: "100%", children: [_jsx(Text, { appearance: "h4", children: t.notifications }), _jsx(IconButton, { onClick: () => setVisible(false), "aria-label": t.close, children: _jsx(IconBox, { size: "xs", children: _jsx(TimesMini, {}) }) })] }), _jsx(NotificationsFilter, { type: type, onChangeFilterType: updateType }), _jsx(AsyncContent, { error: error, errorDetails: errorDetails, loading: isLoading, children: notifications?.length ? _jsx(StyledBox, { children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: '630px' }, children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", children: notifications?.map((item) => (_jsx(NotificationItem, { notification: item, isSummary: isSummary, onClickMarkReadUnread: (read, type) => onMarkAsReadUnread(item.id, read, type) }, item.id))) }) }) }) })
                                         :
                                             _jsx(_Fragment, { children: placeholderComponent }) })] }), _jsx(Flex, { w: "100%", pt: 3, children: _jsx(Button, { size: "sm", sx: { width: '100%' }, colorScheme: "inverse", appearance: "text", onClick: () => {
                                     setVisible(false);
@@ -95,6 +96,9 @@ const dictionary = {
         medium: 'Medium',
         low: 'Low',
         seeAll: 'See all notifications',
+        openNotifications: 'View notifications',
+        hasUnread: 'Has Unread notifications',
+        close: 'Close',
     },
     pt: {
         notifications: 'Notificações',
@@ -109,6 +113,9 @@ const dictionary = {
         medium: 'Médio',
         low: 'Baixo',
         seeAll: 'Ver todas as notificações',
+        openNotifications: 'Visualizar notificações',
+        hasUnread: 'Existem notificações não lidas',
+        close: 'Fechar',
     },
 };
 //# sourceMappingURL=NotificationComponent.js.map

package/dist/components/Notifications/NotificationComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationComponent.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotificationComponent.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"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"}

package/dist/components/Notifications/NotificationItem.d.ts

@@ -4,8 +4,8 @@ interface Props {
     isSummary: boolean;
 }
 interface NotificationItemProps extends Props {
-    onClickMarkRead: (type: 'callToAction' | 'icon') => void;
+    onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void;
 }
-export declare const NotificationItem: ({ notification, isSummary, onClickMarkRead }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationItem: ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=NotificationItem.d.ts.map

package/dist/components/Notifications/NotificationItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAe/C,UAAU,KAAK;IACb,YAAY,EAAE,qBAAqB,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;CACpB;AA8ED,UAAU,qBAAsB,SAAQ,KAAK;IAC3C,eAAe,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,gBAAgB,iDAAkD,qBAAqB,4CAQnG,CAAA"}
+{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAe/C,UAAU,KAAK;IACb,YAAY,EAAE,qBAAqB,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;CACpB;AAgGD,UAAU,qBAAsB,SAAQ,KAAK;IAC3C,qBAAqB,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;CAC/E;AAED,eAAO,MAAM,gBAAgB,uDAAwD,qBAAqB,4CAQzG,CAAA"}

package/dist/components/Notifications/NotificationItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Flex, IconBox, Text } from '@citric/core';
 import { Envelope, EnvelopeOpen } from '@citric/icons';
-import { theme } from '@stack-spot/portal-theme';
+import { IconButton, Tooltip } from '@citric/ui';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { differenceInDays, parseISO } from 'date-fns';
 import { useAnchorTag } from '../../context/anchor.js';
@@ -18,9 +18,19 @@ const statusToColor = {
     MEDIUM: 'warning.500',
     HIGH: 'danger.500',
 };
-const NotificationHeader = ({ notification, isSummary, onClickMarkRead }) => (_jsxs(Flex, { justifyContent: "space-between", mb: 2, sx: { maxWidth: isSummary ? '344px' : '100%' }, flexWrap: "nowrap", children: [_jsx(Text, { appearance: isSummary ? 'body2' : 'body1', nowrapEllipsis: true, children: notification.title }), _jsx(IconBox, { appearance: "circle", onClick: () => {
-                !notification.committed && onClickMarkRead('icon');
-            }, sx: { border: `1px solid ${theme.color.light[500]}`, cursor: notification.committed ? 'default' : 'pointer' }, children: notification.committed ? _jsx(Envelope, {}) : _jsx(EnvelopeOpen, {}) })] }));
+const style = {
+    tooltip: {
+        '&::after': {
+            top: '25%',
+        },
+    },
+};
+const NotificationHeader = ({ notification, isSummary, onClickMarkReadUnread }) => {
+    const t = useTranslate(dictionary);
+    return (_jsxs(Flex, { justifyContent: "space-between", mb: 2, sx: { maxWidth: isSummary ? '330px' : '100%' }, flexWrap: "nowrap", children: [_jsx(Text, { appearance: isSummary ? 'body2' : 'body1', nowrapEllipsis: true, children: notification.title }), _jsx(Tooltip, { text: notification.committed ? t.markAsUnread : t.markAsRead, position: "left", id: `tooltip-${notification.title}`, role: "tooltip", sx: style.tooltip, children: _jsx(IconButton, { "aria-describedby": `tooltip-${notification.title}`, children: _jsx(IconBox, { size: "xs", onClick: () => {
+                            onClickMarkReadUnread(!notification.committed, 'icon');
+                        }, children: notification.committed ? _jsx(Envelope, {}) : _jsx(EnvelopeOpen, {}) }) }) })] }));
+};
 const getDaysAgo = (dateString) => {
     const givenDate = parseISO(dateString);
     const today = new Date();
@@ -32,12 +42,12 @@ const NotificationContent = ({ notification, isSummary }) => {
     const daysAgo = getDaysAgo(notification.trigger_at);
     return (_jsxs(_Fragment, { children: [!isSummary && _jsx(Flex, { mt: 4, mb: 3, children: _jsx(LazyMarkdown, { children: notification.description }) }), _jsxs(Flex, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: t[notification.context] }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" }), !isSummary && _jsxs(_Fragment, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: formatDate(notification.created_at) }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" })] }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: daysAgo > 0 ? daysAgo + ' ' + t.daysAgo : t.today })] })] }));
 };
-const NotificationFooter = ({ call_to_action, onClickMarkRead }) => {
+const NotificationFooter = ({ call_to_action, onClickMarkReadUnread }) => {
     const t = useTranslate(dictionary);
     const Link = useAnchorTag();
-    return (_jsx(Flex, { mt: "5", children: _jsx(Button, { size: "sm", colorScheme: "inverse", onClick: () => onClickMarkRead('callToAction'), children: _jsx(Link, { href: call_to_action, children: _jsx(Text, { colorScheme: 'inverse.contrastText', children: t.takeMeThere }) }) }) }));
+    return (_jsx(Flex, { mt: "5", children: _jsx(Button, { size: "sm", colorScheme: "inverse", onClick: () => onClickMarkReadUnread('callToAction'), children: _jsx(Link, { href: call_to_action, children: _jsx(Text, { colorScheme: 'inverse.contrastText', children: t.takeMeThere }) }) }) }));
 };
-export const NotificationItem = ({ notification, isSummary, onClickMarkRead }) => (_jsxs(Flex, { bg: "light.400", p: "3 3 3 5", r: "xs", flexDirection: "column", w: "100%", sx: styles.item(statusToColor[notification.criticality], notification.committed), children: [_jsx(NotificationHeader, { notification: notification, isSummary: isSummary, onClickMarkRead: onClickMarkRead }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary }), notification.call_to_action && _jsx(NotificationFooter, { call_to_action: notification.call_to_action, onClickMarkRead: onClickMarkRead })] }));
+export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }) => (_jsxs(Flex, { bg: "light.400", p: "3 3 3 5", r: "xs", flexDirection: "column", w: "100%", sx: styles.item(statusToColor[notification.criticality], notification.committed), children: [_jsx(NotificationHeader, { notification: notification, isSummary: isSummary, onClickMarkReadUnread: onClickMarkReadUnread }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary }), notification.call_to_action && _jsx(NotificationFooter, { call_to_action: notification.call_to_action, onClickMarkReadUnread: (type) => onClickMarkReadUnread(!notification.committed, type) })] }));
 const dictionary = {
     en: {
         takeMeThere: 'Take me there',
@@ -46,6 +56,8 @@ const dictionary = {
         STUDIO: 'Studio',
         daysAgo: 'days ago',
         today: 'today',
+        markAsRead: 'Mark as read',
+        markAsUnread: 'Mark as unread',
     },
     pt: {
         takeMeThere: 'Leve-me para lá',
@@ -54,6 +66,8 @@ const dictionary = {
         STUDIO: 'Estúdio',
         daysAgo: 'dias atrás',
         today: 'hoje',
+        markAsRead: 'Marcar como lido',
+        markAsUnread: 'Marcar como não lido',
     },
 };
 //# sourceMappingURL=NotificationItem.js.map

package/dist/components/Notifications/NotificationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"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"}

package/dist/components/ScrollView.d.ts

@@ -22,6 +22,11 @@ interface Props {
      */
     scrollType?: 'auto' | 'scroll';
 }
+/**
+ * Renders a component that provides scrolling.
+ *
+ * @param options the props for rendering the component: {@link Props}.
+ */
 export declare const ScrollView: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
 export {};
 //# sourceMappingURL=ScrollView.d.ts.map

package/dist/components/ScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,6BAA6B,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AAIvF,KAAK,KAAK,GAAG,6BAA6B,GAAG,yBAAyB,CAAA;AAEtE,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC/C;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAChC;AAQD,eAAO,MAAM,UAAU,0OAgBtB,CAAA"}
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,6BAA6B,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AAIvF,KAAK,KAAK,GAAG,6BAA6B,GAAG,yBAAyB,CAAA;AAEtE,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC/C;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAChC;AAQD;;;;GAIG;AAEH,eAAO,MAAM,UAAU,0OAgBtB,CAAA"}

package/dist/components/ScrollView.js

@@ -5,6 +5,11 @@ function getDirectionStyle({ direction = 'both', scrollType = 'auto' }) {
     const y = direction === 'both' || direction === 'vertical' ? `overflow-x: ${scrollType};` : '';
     return `${x}${y}`;
 }
+/**
+ * Renders a component that provides scrolling.
+ *
+ * @param options the props for rendering the component: {@link Props}.
+ */
 export const ScrollView = styled.div `
   ${getDirectionStyle}
   &::-webkit-scrollbar {

package/dist/components/ScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AA0B1C,SAAS,iBAAiB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,UAAU,GAAG,MAAM,EAAS;IAC3E,MAAM,CAAC,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAChG,MAAM,CAAC,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9F,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,CAAA;AACnB,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAO;IACvC,iBAAiB;;;;;;kBAMH,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;;;;;;kBAMpE,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;;;CAGrF,CAAA"}
+{"version":3,"file":"ScrollView.js","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AA0B1C,SAAS,iBAAiB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,UAAU,GAAG,MAAM,EAAS;IAC3E,MAAM,CAAC,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAChG,MAAM,CAAC,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9F,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,CAAA;AACnB,CAAC;AAED;;;;GAIG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAO;IACvC,iBAAiB;;;;;;kBAMH,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;;;;;;kBAMpE,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;;;CAGrF,CAAA"}

package/dist/components/StatusCircle.d.ts

@@ -1,14 +1,26 @@
 /// <reference types="react" />
 export type Status = 'success' | 'warning' | 'danger' | 'unknown' | 'progress';
 interface Props {
+    /** The status of the component which determines its color */
     status?: Status;
+    /** Tooltip text to be displayed on hover */
     tooltip?: string;
 }
 interface WithTooltip {
+    /** Tooltip text to be displayed on hover */
     tooltip?: string;
+    /** Additional class names for the component */
     className?: string;
+    /** Inline styles for the component */
     style?: React.CSSProperties;
 }
+/**
+ * StatusCircle component that displays a colored circle based on the status.
+ * It also supports an optional tooltip.
+ *
+ * @param {Props} props - The props for the StatusCircle component.
+ * @returns {JSX.Element} The StatusCircle component.
+ */
 export declare const StatusCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<WithTooltip, Props>> & string & Omit<({ tooltip, className, style }: WithTooltip) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};
 //# sourceMappingURL=StatusCircle.d.ts.map

package/dist/components/StatusCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusCircle.d.ts","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAeD,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAOD,eAAO,MAAM,YAAY,4LALiC,WAAW,4FAUpE,CAAA"}
+{"version":3,"file":"StatusCircle.d.ts","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,KAAK;IACb,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAsBD,UAAU,WAAW;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAaD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,4LAZiC,WAAW,4FAiBpE,CAAA"}

package/dist/components/StatusCircle.js

@@ -9,14 +9,34 @@ const statusToColor = {
     progress: 'secondary.500',
     unknown: 'light.contrastText',
 };
+/**
+ * Get the color corresponding to the status.
+ *
+ * @param {Theme} theme - The theme object.
+ * @param {Status} [status] - The status of the component.
+ * @returns {string} The color corresponding to the status.
+ */
 function getColorFromStatus(theme, status) {
     const colorName = status && status in statusToColor ? statusToColor[status] : statusToColor.unknown;
     return getColor(theme, colorName);
 }
+/**
+ * CircleWithTooltip component that displays a circle with an optional tooltip.
+ *
+ * @param {WithTooltip} props - The props for the CircleWithTooltip component.
+ * @returns {JSX.Element} The CircleWithTooltip component.
+ */
 const CircleWithTooltip = ({ tooltip, className, style }) => {
     const circle = _jsx("div", { style: style, className: className });
     return tooltip && tooltip.length ? _jsx(Tooltip, { text: tooltip, children: circle }) : circle;
 };
+/**
+ * StatusCircle component that displays a colored circle based on the status.
+ * It also supports an optional tooltip.
+ *
+ * @param {Props} props - The props for the StatusCircle component.
+ * @returns {JSX.Element} The StatusCircle component.
+ */
 export const StatusCircle = styled(CircleWithTooltip) `
   background-color: ${({ status, theme }) => getColorFromStatus(theme, status)};
   width: 12px;

package/dist/components/StatusCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusCircle.js","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAWtC,MAAM,aAAa,GAA0B;IAC3C,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,oBAAoB;CAC9B,CAAA;AAED,SAAS,kBAAkB,CAAC,KAAY,EAAE,MAAe;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;IACnG,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AACnC,CAAC;AAQD,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAA;IAC9D,OAAO,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AACxF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAO;sBACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAY,EAAE,MAAM,CAAC;;;;CAIpF,CAAA"}
+{"version":3,"file":"StatusCircle.js","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAatC,MAAM,aAAa,GAA0B;IAC3C,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,oBAAoB;CAC9B,CAAA;AAED;;;;;;GAMG;AACH,SAAS,kBAAkB,CAAC,KAAY,EAAE,MAAe;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;IACnG,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AACnC,CAAC;AAWD;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAA;IAC9D,OAAO,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AACxF,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAO;sBACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAY,EAAE,MAAM,CAAC;;;;CAIpF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "1.3.1-rc",
+  "version": "1.3.3-rc",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/AsyncContent.tsx

@@ -37,6 +37,14 @@ interface Props {
   errorDetails: ErrorProps,
 }
 
+/**
+ * Renders a component that provides user feedback on async requests.
+ * It renders either a loading component, an error component (which is received as prop)
+ * or the received children props.
+ * 
+ * @param options the props for rendering the component: {@link Props}. 
+ */
+
 export const AsyncContent = ({ loading, error, autofocus, children, errorDetails }: Props) => {
   const ErrorComponent = errorDetails.errorComponent
 

package/src/components/InfiniteScroll.tsx

@@ -1,6 +1,14 @@
 import { LoadingCircular } from '@citric/ui'
 import ReactInfiniteScroll, { Props as ReactInfiniteScrollProps } from 'react-infinite-scroll-component'
 
+/**
+ * Renders a component that provides infinite scroll. 
+ * 
+ * The component wraps around the ReactInfiniteScroll component.
+ * It provides a loading indicator using citric loading circular and custom styles.
+ *
+ * By default, it adds the scrollable target as page and overflow hidden.
+ */
 export const InfiniteScroll = ({ style, children, scrollableTarget, ...props }: Omit<ReactInfiniteScrollProps, 'loader'>) => (
   <ReactInfiniteScroll
     loader={<LoadingCircular />}

package/src/components/Notifications/NotificationComponent.tsx

@@ -4,6 +4,7 @@ import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { ReactElement, useState } from 'react'
 import styled from 'styled-components'
+import { IconButton } from '@citric/ui'
 import { AsyncContent, ErrorProps } from '../AsyncContent'
 import { InfiniteScroll } from '../InfiniteScroll'
 import { ScrollView } from '../ScrollView'
@@ -23,7 +24,7 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
   z-index: 1;
   visibility: hidden;
   position: absolute;
-  top: calc(var(--header-height) - 2px);
+  top: calc(var(--header-height) + 4px);
   right: -270%;
   width: 400px;
 
@@ -46,7 +47,7 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
   &::after {
     content: '';
     position: absolute;
-    border-width: 10px;
+    border-width: 8px 32px;
     border-style: solid;
     border-color: transparent;
     bottom: 100%;
@@ -128,7 +129,7 @@ const NotificationsFilter = ({ type, onChangeFilterType }: NotificationsFilterPr
 }
 
 interface Props {
-  onMarkAsRead: (notificationId: string, type: 'callToAction' | 'icon') => void, 
+  onMarkAsReadUnread: (notificationId: string, read: boolean, type: 'callToAction' | 'icon') => void, 
   notifications?: StackspotNotification[],
   isLoading: boolean, 
   error?: any, 
@@ -144,7 +145,7 @@ interface Props {
 }
 
 export const NotificationComponent = ({ 
-  hasUnreadNotification, onMarkAsRead, notifications, isLoading, error, 
+  hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, 
   type, onUpdateType,
   onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage,
   placeholderComponent, isSummary=false,
@@ -157,14 +158,16 @@ export const NotificationComponent = ({
   }
 
   return (<Flex sx={{ position: 'relative' }}>
-    <IconBox size="md" sx={{ cursor: 'pointer' }}
-      onClick={() => {
-        onClickViewNotifications()
-        setVisible(true)
-      }} className="notificationsTour">
-      <Bell />
-    </IconBox>
-    {hasUnreadNotification && <Box sx={{ position: 'absolute', right: '2px' }}>
+    <IconButton aria-label={t.openNotifications}  onClick={() => {
+      onClickViewNotifications()
+      setVisible(true)
+    }} sx={{ border: 'none', bg: 'transparent' }}>
+      <IconBox size="md"
+        className="notificationsTour" >
+        <Bell />
+      </IconBox>
+    </IconButton>
+    {hasUnreadNotification && <Box sx={{ position: 'absolute', right: '2px' }} aria-label={t.hasUnread}>
       <StatusCircle status={'danger'} />
     </Box>}
 
@@ -174,15 +177,16 @@ export const NotificationComponent = ({
       aria-hidden={!visible}
     >
       <Flex className="content" p={5} flexDirection="column" justifyContent="space-between">
-        <Flex>
+        <Flex w="100%">
           <Flex justifyContent="space-between" w="100%" >
             <Text appearance="h4">
               {t.notifications}
             </Text>
-            <IconBox appearance="circle" onClick={() => setVisible(false)}
-              sx={{ border: `1px solid ${theme.color.light[500]}`, cursor: 'pointer' }}>
-              <TimesMini />
-            </IconBox>
+            <IconButton onClick={() => setVisible(false)} aria-label={t.close}>
+              <IconBox size="xs">
+                <TimesMini />
+              </IconBox>
+            </IconButton>
           </Flex>
 
           <NotificationsFilter type={type} onChangeFilterType={updateType} />
@@ -198,7 +202,7 @@ export const NotificationComponent = ({
                   <Flex sx={{ gap: '4px' }} mr="3">
                     {notifications?.map((item) => (
                       <NotificationItem key={item.id} notification={item} 
-                        isSummary={isSummary} onClickMarkRead={(type) => onMarkAsRead(item.id, type)} />
+                        isSummary={isSummary} onClickMarkReadUnread={(read, type) => onMarkAsReadUnread(item.id, read, type)} />
                     ))}
                   </Flex>
                 </ScrollView>
@@ -246,6 +250,9 @@ const dictionary = {
     medium: 'Medium',
     low: 'Low',
     seeAll: 'See all notifications',
+    openNotifications: 'View notifications',
+    hasUnread: 'Has Unread notifications',
+    close: 'Close',
   },
   pt: {
     notifications: 'Notificações',
@@ -260,5 +267,8 @@ const dictionary = {
     medium: 'Médio',
     low: 'Baixo',
     seeAll: 'Ver todas as notificações',
+    openNotifications: 'Visualizar notificações',
+    hasUnread: 'Existem notificações não lidas',
+    close: 'Fechar',
   },
 } satisfies Dictionary

package/src/components/Notifications/NotificationItem.tsx

@@ -1,6 +1,6 @@
-import { Button, Flex, IconBox, OneOfColorSchemesWithVariants, SxProp, Text } from '@citric/core'
+import { Button, Flex, IconBox, OneOfColorSchemesWithVariants, Styles, SxProp, Text } from '@citric/core'
 import { Envelope, EnvelopeOpen } from '@citric/icons'
-import { theme } from '@stack-spot/portal-theme'
+import { IconButton, Tooltip } from '@citric/ui'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { differenceInDays, parseISO } from 'date-fns'
 import { useAnchorTag } from '../../context/anchor'
@@ -26,20 +26,38 @@ interface Props {
   isSummary: boolean,
 }
 
-const NotificationHeader = ({ notification, isSummary, onClickMarkRead }: NotificationItemProps) => (
-  <Flex justifyContent="space-between" mb={2} sx={{ maxWidth: isSummary ? '344px' : '100%' }} flexWrap="nowrap">
-    <Text appearance={isSummary ? 'body2' : 'body1'} nowrapEllipsis>
-      {notification.title}
-    </Text>
-    <IconBox appearance="circle" 
-      onClick={() => {
-        !notification.committed && onClickMarkRead('icon')
-      }}
-      sx={{ border: `1px solid ${theme.color.light[500]}`, cursor: notification.committed ? 'default' : 'pointer' }}>
-      {notification.committed ? <Envelope /> : <EnvelopeOpen />}
-    </IconBox>
-  </Flex>
-)
+const style: Styles = { 
+  tooltip: {
+    '&::after':{
+      top: '25%',
+    },
+  },
+}
+
+const NotificationHeader = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => {
+  const t = useTranslate(dictionary)
+  return (
+    <Flex justifyContent="space-between" mb={2} sx={{ maxWidth: isSummary ? '330px' : '100%' }} flexWrap="nowrap">
+      <Text appearance={isSummary ? 'body2' : 'body1'} nowrapEllipsis>
+        {notification.title}
+      </Text>
+      <Tooltip text={notification.committed ? t.markAsUnread : t.markAsRead} position="left" 
+        id={`tooltip-${notification.title}`} role="tooltip"
+        sx={style.tooltip}>
+        <IconButton aria-describedby={`tooltip-${notification.title}`}>
+          <IconBox
+            size="xs"
+            onClick={() => {
+              onClickMarkReadUnread(!notification.committed, 'icon')
+            }}
+          >
+            {notification.committed ? <Envelope /> : <EnvelopeOpen />}
+          </IconBox>
+        </IconButton>
+      </Tooltip>
+    </Flex>
+  )
+}
 
 const getDaysAgo = (dateString: string): number => {
   const givenDate = parseISO(dateString)
@@ -82,16 +100,16 @@ const NotificationContent = ({ notification, isSummary }: Props) => {
 }
 interface NotificationFooterProps  { 
   call_to_action: string, 
-  onClickMarkRead: (type: 'callToAction' | 'icon') => void,
+  onClickMarkReadUnread: (type: 'callToAction' | 'icon') => void,
 }
 
-const NotificationFooter = ({ call_to_action, onClickMarkRead }: NotificationFooterProps) => {
+const NotificationFooter = ({ call_to_action, onClickMarkReadUnread }: NotificationFooterProps) => {
   const t = useTranslate(dictionary)
   const Link = useAnchorTag()
   
   return (
     <Flex mt="5">
-      <Button size="sm" colorScheme="inverse" onClick={() => onClickMarkRead('callToAction')}>
+      <Button size="sm" colorScheme="inverse" onClick={() => onClickMarkReadUnread('callToAction')}>
         <Link href={call_to_action}>
           <Text colorScheme={'inverse.contrastText'}>
             {t.takeMeThere}
@@ -103,16 +121,16 @@ const NotificationFooter = ({ call_to_action, onClickMarkRead }: NotificationFoo
 }
 
 interface NotificationItemProps extends Props {
-  onClickMarkRead: (type: 'callToAction' | 'icon') => void,
+  onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void,
 }
 
-export const NotificationItem = ({ notification, isSummary, onClickMarkRead }: NotificationItemProps) => (
+export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => (
   <Flex bg="light.400" p="3 3 3 5" r="xs"
     flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>
-    <NotificationHeader notification={notification} isSummary={isSummary} onClickMarkRead={onClickMarkRead}/>
+    <NotificationHeader notification={notification} isSummary={isSummary} onClickMarkReadUnread={onClickMarkReadUnread}/>
     <NotificationContent notification={notification} isSummary={isSummary} />
     {notification.call_to_action && <NotificationFooter call_to_action={notification.call_to_action} 
-      onClickMarkRead={onClickMarkRead} />}
+      onClickMarkReadUnread={(type) => onClickMarkReadUnread(!notification.committed, type)} />}
   </Flex>
 )
 
@@ -124,6 +142,8 @@ const dictionary = {
     STUDIO: 'Studio',
     daysAgo: 'days ago',
     today: 'today',
+    markAsRead: 'Mark as read',
+    markAsUnread: 'Mark as unread',
   },
   pt: {
     takeMeThere: 'Leve-me para lá',
@@ -132,5 +152,7 @@ const dictionary = {
     STUDIO: 'Estúdio',
     daysAgo: 'dias atrás',
     today: 'hoje',
+    markAsRead: 'Marcar como lido',
+    markAsUnread: 'Marcar como não lido',
   },
 } satisfies Dictionary

package/src/components/ScrollView.tsx

@@ -32,6 +32,12 @@ function getDirectionStyle({ direction = 'both', scrollType = 'auto' }: Props) {
   return `${x}${y}`
 }
 
+/**
+ * Renders a component that provides scrolling. 
+ * 
+ * @param options the props for rendering the component: {@link Props}. 
+ */
+
 export const ScrollView = styled.div<Props>`
   ${getDirectionStyle}
   &::-webkit-scrollbar {

package/src/components/StatusCircle.tsx

@@ -8,7 +8,9 @@ type Color = OneOfColorSchemesWithVariants | OneOfPalettesWithVariants
 export type Status = 'success' | 'warning' | 'danger' | 'unknown' | 'progress'
 
 interface Props {
+  /** The status of the component which determines its color */
   status?: Status,
+  /** Tooltip text to be displayed on hover */
   tooltip?: string,
 }
 
@@ -20,22 +22,45 @@ const statusToColor: Record<Status, Color> = {
   unknown: 'light.contrastText',
 }
 
+/**
+ * Get the color corresponding to the status.
+ *
+ * @param {Theme} theme - The theme object.
+ * @param {Status} [status] - The status of the component.
+ * @returns {string} The color corresponding to the status.
+ */
 function getColorFromStatus(theme: Theme, status?: Status) {
   const colorName = status && status in statusToColor ? statusToColor[status] : statusToColor.unknown
   return getColor(theme, colorName)
 }
 
 interface WithTooltip {
+  /** Tooltip text to be displayed on hover */
   tooltip?: string,
+  /** Additional class names for the component */
   className?: string,
+  /** Inline styles for the component */
   style?: React.CSSProperties,
 }
 
+/**
+ * CircleWithTooltip component that displays a circle with an optional tooltip.
+ *
+ * @param {WithTooltip} props - The props for the CircleWithTooltip component.
+ * @returns {JSX.Element} The CircleWithTooltip component.
+ */
 const CircleWithTooltip = ({ tooltip, className, style }: WithTooltip) => {
   const circle = <div style={style} className={className}></div>
   return tooltip && tooltip.length ? <Tooltip text={tooltip}>{circle}</Tooltip> : circle
 }
 
+/**
+ * StatusCircle component that displays a colored circle based on the status.
+ * It also supports an optional tooltip.
+ *
+ * @param {Props} props - The props for the StatusCircle component.
+ * @returns {JSX.Element} The StatusCircle component.
+ */
 export const StatusCircle = styled(CircleWithTooltip)<Props>`
   background-color: ${({ status, theme }) => getColorFromStatus(theme as any, status)};
   width: 12px;