@stack-spot/portal-components 2.0.2 → 2.1.0

package/dist/components/form/Select.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBox, Text } from '@citric/core';
+import { ChevronDown } from '@citric/icons';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { styled } from 'styled-components';
+const OPTION_HEIGHT = 32;
+const LIST_BOTTOM_PADDING = 7;
+const SelectBox = styled.div `
+  position: relative;
+
+  select {
+    border: none;
+    height: 40px;
+    opacity: 0;
+    pointer-events: none;
+  }
+  
+  .fake-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid ${theme.color.light[600]};
+    transition: border-color 0.3s, box-shadow 0.3s;
+    z-index: 1;
+    background-color: ${theme.color.light[300]};
+
+    .arrow {
+      transition: transform ease-in-out 0.3s;
+    }
+
+    &.focused, &.open {
+      border: 1px solid ${theme.color.primary[500]};
+      box-shadow: 0 0 0 1px ${theme.color.primary[500]};
+    }
+
+    &.open {
+      .arrow {
+        transform: rotate(180deg);
+      }
+      .options {
+        /* lets the overflow be hidden until the animation on the height ends. */
+        overflow-y: auto;
+        animation: 0.3s overflow-animation;
+        @keyframes overflow-animation {
+          0% {
+            overflow-y: hidden;
+          }
+          99% {
+            overflow-y: hidden;
+          }
+          100% {
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+
+    .current-value {
+      height: 40px;
+      display: flex;
+      flex-direction: row;
+      padding: 0 8px;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .clipped-text {
+      text-overflow: ellipsis;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .options {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      overflow-y: hidden;
+      transition: height ease-in-out 0.3s;
+      max-height: ${({ $maxItems }) => $maxItems * OPTION_HEIGHT + LIST_BOTTOM_PADDING}px;
+
+      li {
+        height: ${OPTION_HEIGHT}px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0 8px;
+        border-top: 1px solid ${theme.color.light[600]};
+        cursor: pointer;
+        transition: background-color 0.2s;
+        &:hover {
+          background-color: ${theme.color.light[500]};
+        }
+      }
+    }
+  }
+`;
+function renderProperty(option, renderer) {
+    if (!renderer)
+        return `${option ?? ''}`;
+    return typeof renderer === 'function' ? renderer(option) : (option[renderer] ?? `${option ?? ''}`);
+}
+const FakeOption = ({ value, label, onChange }) => (_jsx("li", { className: "option", onClick: () => onChange({ target: { value } }), children: _jsx(Text, { className: "clipped-text", children: label }) }));
+/**
+ * Renders a Select component using the Citric Design System.
+ *
+ * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
+ * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
+ * highly optimized for accessibility.
+ * @param props the component props: {@link SelectProps}.
+ */
+export function Select({ onChange, options, value, emptyOption, renderLabel, renderValue, maxItems = 6, onFocus, onBlur, style, className, ...props }) {
+    const [open, setOpen] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const valueLabelRef = useRef(null);
+    const onChangeOption = useCallback((event) => {
+        const value = options.find(o => renderProperty(o, renderValue) === event.target.value);
+        onChange(value);
+    }, []);
+    const onClickOutside = useCallback((event) => {
+        if (valueLabelRef.current && !valueLabelRef.current.contains(event.target))
+            setOpen(false);
+    }, []);
+    const [htmlOptions, fakeOptions] = useMemo(() => options.reduce(([opts, fake], o) => {
+        const id = renderProperty(o, renderValue);
+        const label = renderProperty(o, renderLabel);
+        return [
+            [...opts, _jsx("option", { value: id, selected: value === id, children: label }, id)],
+            [...fake, _jsx(FakeOption, { value: id, label: label, onChange: onChangeOption }, id)],
+        ];
+    }, [[], []]), [options, value]);
+    const height = open ? (LIST_BOTTOM_PADDING + (options.length + (emptyOption === undefined ? 0 : 1)) * OPTION_HEIGHT) : 0;
+    function getCurrentValue() {
+        return value === undefined ? '' : renderProperty(value, renderValue);
+    }
+    function getCurrentLabel() {
+        return value === undefined ? (emptyOption ?? '') : renderProperty(value, renderLabel);
+    }
+    useEffect(() => {
+        const detach = () => document.removeEventListener('mousedown', onClickOutside);
+        if (open)
+            document.addEventListener('mousedown', onClickOutside);
+        else
+            detach();
+        return detach;
+    }, [open]);
+    return (_jsxs(SelectBox, { style: style, className: className, "$maxItems": maxItems, children: [_jsxs("select", { ...props, value: getCurrentValue(), onChange: onChangeOption, onFocus: (ev) => {
+                    setFocused(true);
+                    onFocus?.(ev);
+                }, onBlur: (ev) => {
+                    setFocused(false);
+                    onBlur?.(ev);
+                }, children: [emptyOption === undefined ? null : _jsx("option", { value: "", selected: !value, children: emptyOption }), htmlOptions] }), _jsxs("div", { className: listToClass(['fake-select', open && 'open', focused && 'focused']), "aria-hidden": true, children: [_jsxs("div", { ref: valueLabelRef, className: "current-value", onClick: () => setOpen(!open), children: [_jsx(Text, { className: "clipped-text", children: getCurrentLabel() }), _jsx(IconBox, { className: "arrow", children: _jsx(ChevronDown, {}) })] }), _jsxs("ul", { className: "options", style: { height: `${height}px` }, children: [emptyOption === undefined ? null : _jsx(FakeOption, { value: "", label: emptyOption, onChange: onChangeOption }), fakeOptions] })] })] }));
+}
+//# sourceMappingURL=Select.js.map

package/dist/components/form/Select.js.map

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

package/dist/components/{Notifications → notification}/NotificationComponent.d.ts

@@ -21,9 +21,10 @@ interface Props {
 }
 /**
  * NotificationComponent component that renders the notifications panel.
- * It render the notification icon and when clicked the notification modal is opened.
+ * It renders the notification icon and when clicked the notification modal is opened.
  *
  * @param props the component's props {@link Props}.
+ * @deprecated this functionality has been moved to the Layout library. This is now a property of the Header.
  */
 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 {};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationComponent.d.ts","sourceRoot":"","sources":["../../../src/components/notification/NotificationComponent.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAqC,MAAM,OAAO,CAAA;AAEvE,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;AAyID,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;AAGD;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,6NAK/B,KAAK,4CAqHP,CAAA"}

package/dist/components/{Notifications → notification}/NotificationComponent.js

@@ -12,18 +12,24 @@ import { ScrollView } from '../ScrollView.js';
 import { StatusCircle } from '../StatusCircle.js';
 import { NotificationItem } from './NotificationItem.js';
 import { NotificationType, UnreadType } from './types.js';
-const NotificationsComponent = styled(Flex) `
+const ANIMATION_DURATION_MS = 300;
+const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`;
+const NotificationsComponent = styled.div `
   max-height: 0;
   z-index: 2;
   visibility: hidden;
   position: absolute;
   top: calc(var(--header-height) + 4px);
   right: -270%;
+  opacity: 0;
   width: 400px;
+  transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out, visibility 0s ${ANIMATION_DURATION_MS}ms;
 
   &.visible {
     visibility: visible;
     min-height: 400px;
+    opacity: 1;
+    transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out;
   }
 
   .content {
@@ -31,7 +37,7 @@ const NotificationsComponent = styled(Flex) `
     border: 1px solid ${theme.color.light[400]};
     box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
     background-color: ${theme.color.light[300]};
-    overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
+    overflow-y: ${({ $scroll }) => ($scroll ? 'auto' : 'hidden')};
     overflow-x: hidden;
   }
 
@@ -82,11 +88,13 @@ 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 })] }));
 };
+// fixme: remove this component in the next major
 /**
  * NotificationComponent component that renders the notifications panel.
- * It render the notification icon and when clicked the notification modal is opened.
+ * It renders the notification icon and when clicked the notification modal is opened.
  *
  * @param props the component's props {@link Props}.
+ * @deprecated this functionality has been moved to the Layout library. This is now a property of the Header.
  */
 export const NotificationComponent = ({ hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary = false, }) => {
     const t = useTranslate(dictionary);
@@ -122,7 +130,7 @@ export const NotificationComponent = ({ hasUnreadNotification, onMarkAsReadUnrea
     return (_jsxs(Flex, { sx: { position: 'relative' }, children: [_jsx(IconButton, { "aria-label": t.openNotifications, onClick: () => {
                     onClickViewNotifications();
                     setVisible(!visible);
-                }, sx: { border: 'none', bg: 'transparent' }, "aria-expanded": visible, 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' }) }), visible && _jsx(Overlay, { onClick: () => setVisible(false) }), _jsx(NotificationsComponent, { className: listToClass(['notification-component', 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(ScrollView, { id: "scrollableNotifications", direction: "vertical", style: { maxHeight: 'calc(100vh - 300px)' }, children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, scrollableTarget: "scrollableNotifications", children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", flexDirection: "column", children: notifications?.map((item, index) => (_jsx(NotificationItem, { notification: item, id: `notificationItem-${index}`, isSummary: isSummary, onClickMarkReadUnread: (read, type) => onMarkAsReadUnread(item.id, read, type) }, item.id))) }) }) }) })
+                }, sx: { border: 'none', bg: 'transparent' }, "aria-expanded": visible, 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' }) }), visible && _jsx(Overlay, { onClick: () => setVisible(false) }), _jsx(NotificationsComponent, { className: listToClass(['notification-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(ScrollView, { id: "scrollableNotifications", direction: "vertical", style: { maxHeight: 'calc(100vh - 300px)' }, children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, scrollableTarget: "scrollableNotifications", children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", flexDirection: "column", children: notifications?.map((item, index) => (_jsx(NotificationItem, { notification: item, id: `notificationItem-${index}`, 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, { ref: seeAllButtonRef, size: "sm", sx: { width: '100%' }, colorScheme: "inverse", appearance: "text", onClick: () => {
                                     setVisible(false);

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

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

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

@@ -0,0 +1,42 @@
+import { StackspotNotification } from './types.js';
+interface Props {
+    notification: StackspotNotification;
+    isSummary: boolean;
+    id?: string;
+}
+interface DeprecatedNotificationItemProps extends Props {
+    /**
+     * @deprecated use `onCommit` and `onClickAction` instead.
+     *
+     * Function to call when the user marks a notification as read or unread. This can happen either through the mail icon or when the user
+     * clicks the action button of a notification. Type will be "icon" on the first case or "callToAction" on the former.
+     *
+     * Tip: clicking the action button (callToAction) should only change the read status if the message is unread. This is not treated by this
+     * component, be sure to handle it on your side.
+     *
+     * Deprecation warning: since the deprecation, the parameter `read` is always true.
+     */
+    onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void | Promise<void>;
+}
+interface NewNotificationItemProps extends Props {
+    /**
+     * Function to call when the user marks a notification as read (committed).
+     */
+    onCommit: () => void;
+    /**
+     * Whenever the user clicks the action button of a notification, the notification is marked as read (committed) and the browser is
+     * redirected to the page that corresponds to the action.
+     *
+     * If you need additional behavior, use this parameter, which is a function to call whenever the button is clicked.
+     */
+    onClickAction?: () => void;
+}
+type NotificationItemProps = DeprecatedNotificationItemProps | NewNotificationItemProps;
+/**
+ * NotificationItem component that renders a notification item.
+ *
+ * @param props the component's props {@link NotificationItemProps}.
+ */
+export declare const NotificationItem: ({ notification, isSummary, ...props }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NotificationItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/notification/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;IAEnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAgHD,UAAU,+BAAgC,SAAQ,KAAK;IACrD;;;;;;;;;;OAUG;IACH,qBAAqB,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/F;AAED,UAAU,wBAAyB,SAAQ,KAAK;IAC9C;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,KAAK,qBAAqB,GAAG,+BAA+B,GAAG,wBAAwB,CAAA;AAEvF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,0CAA2C,qBAAqB,4CAsC5F,CAAA"}

package/dist/components/{Notifications → notification}/NotificationItem.js

@@ -28,9 +28,9 @@ const style = {
 /**
  * NotificationHeader component that renders the header of a notification.
  *
- * @param props the component's props {@link NotificationItemProps}.
+ * @param props the component's props.
  */
-const NotificationHeader = ({ notification, isSummary }) => (_jsx(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 }) }));
+const NotificationHeader = ({ title, isSummary }) => (_jsx(Flex, { justifyContent: "space-between", mb: 2, sx: { maxWidth: isSummary ? '330px' : '100%' }, flexWrap: "nowrap", children: _jsx(Text, { appearance: isSummary ? 'body2' : 'body1', nowrapEllipsis: true, children: title }) }));
 /**
  * Get the number of days ago from the given date string.
  *
@@ -58,21 +58,36 @@ const NotificationContent = ({ notification, isSummary }) => {
  *
  * @param props the component's props {@link NotificationFooterProps}.
  */
-const NotificationFooter = ({ call_to_action, onClickMarkReadUnread }) => {
+const NotificationFooter = ({ actionURL, onClickAction }) => {
     const t = useTranslate(dictionary);
     const Link = useAnchorTag();
-    return (_jsx(Flex, { mt: "5", children: _jsx(Button, { size: "sm", colorScheme: "inverse", onClick: () => onClickMarkReadUnread('callToAction'), as: Link, href: call_to_action, "aria-label": t.takeMeThere, children: _jsx(Text, { colorScheme: "inverse.contrastText", children: t.takeMeThere }) }) }));
+    return (_jsx(Flex, { mt: "5", children: _jsx(Button, { size: "sm", colorScheme: "inverse", onClick: onClickAction, as: Link, href: actionURL, "aria-label": t.takeMeThere, children: _jsx(Text, { colorScheme: "inverse.contrastText", children: t.takeMeThere }) }) }));
 };
 /**
  * NotificationItem component that renders a notification item.
  *
  * @param props the component's props {@link NotificationItemProps}.
  */
-export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread, id }) => {
+export const NotificationItem = ({ notification, isSummary, ...props }) => {
     const t = useTranslate(dictionary);
-    return (_jsxs(Box, { sx: { position: 'relative' }, id: id, children: [_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) })] }), _jsx(Box, { sx: { position: 'absolute', top: '8px', right: '8px' }, children: _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}`, "aria-live": "polite", "aria-label": notification.committed ? t.markAsUnread : t.markAsRead, sx: { opacity: notification.committed ? 0.5 : 1 }, onClick: () => {
-                            onClickMarkReadUnread(notification.committed, 'icon');
-                        }, children: _jsx(IconBox, { size: "xs", children: notification.committed ? _jsx(Envelope, {}) : _jsx(EnvelopeOpen, {}) }) }) }) })] }));
+    function commit() {
+        if ('onCommit' in props)
+            props.onCommit();
+        else
+            props.onClickMarkReadUnread(true, 'icon');
+    }
+    function clickAction() {
+        if ('onCommit' in props) {
+            if (!notification.committed)
+                props.onCommit();
+            props.onClickAction?.();
+        }
+        else
+            props.onClickMarkReadUnread(true, 'callToAction');
+    }
+    return (_jsxs(Box, { sx: { position: 'relative' }, children: [_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, { title: notification.title, isSummary: isSummary }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary }), notification.call_to_action && _jsx(NotificationFooter, { actionURL: notification.call_to_action, onClickAction: clickAction })] }), _jsx(Box, { sx: { position: 'absolute', top: '8px', right: '8px' }, children: _jsx(Tooltip, { text: notification.committed ? t.committed : t.uncommitted, position: "left", sx: style.tooltip, children: notification.committed
+                        ? _jsx(IconBox, { role: "img", "aria-label": t.committed, size: "xs", style: { margin: '4px', opacity: 0.5 }, children: _jsx(EnvelopeOpen, {}) })
+                        : (_jsx(IconButton, { "aria-label": t.uncommitted, onClick: commit, children: _jsx(IconBox, { size: "xs", children: _jsx(Envelope, {}) }) })) }) })] }));
 };
 const dictionary = {
     en: {
@@ -82,8 +97,8 @@ const dictionary = {
         STUDIO: 'Studio',
         daysAgo: 'days ago',
         today: 'today',
-        markAsRead: 'Mark as read',
-        markAsUnread: 'Mark as unread',
+        committed: 'This notification has been read.',
+        uncommitted: 'This notification has not been read yet. Click to mark as read.',
     },
     pt: {
         takeMeThere: 'Leve-me para lá',
@@ -92,8 +107,8 @@ const dictionary = {
         STUDIO: 'Estúdio',
         daysAgo: 'dias atrás',
         today: 'hoje',
-        markAsRead: 'Marcar como lido',
-        markAsUnread: 'Marcar como não lido',
+        committed: 'Esta notificação já foi lida.',
+        uncommitted: 'Esta notificação ainda não foi lida. Clique para marcar como lida.',
     },
 };
 //# sourceMappingURL=NotificationItem.js.map

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

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

package/dist/components/notification/NotificationList.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { InfiniteScrollConfig, StackspotNotification } from './types.js';
+export interface NotificationListProps {
+    /**
+     * Function to call when the message is marked as read (committed).
+     * @param id the id of the notification where the read status changed.
+     */
+    onCommit: (id: string) => void;
+    /**
+     * Optional. Function called when the button to perform the notification action is clicked. This function will be run in addition to
+     * the notification action.
+     * @param id the id of the notification where the button was clicked
+     */
+    onClickAction?: (id: string) => void;
+    /**
+     * If you need this notification list to be have an infinite scroll behavior, set this option.
+     */
+    infiniteScroll?: InfiniteScrollConfig;
+    /**
+     * The notifications themselves.
+     */
+    items: StackspotNotification[];
+    /**
+     * A compact notification list don't show date headers (as a timeline) or descriptions of notifications.
+     */
+    compact?: boolean;
+    /**
+     * Whether or not the content is loading. If this is true, the content becomes transparent and the cursor turns into the progress cursor.
+     */
+    loading?: boolean;
+    /**
+     * If true, when the list is empty, the placeholder will say "nothing found" instead of "no notifications".
+     */
+    showEmptySearch?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const NotificationList: ({ items, compact, onCommit, onClickAction, infiniteScroll, loading, showEmptySearch, style, className }: NotificationListProps) => false | import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NotificationList.d.ts.map

package/dist/components/notification/NotificationList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationList.d.ts","sourceRoot":"","sources":["../../../src/components/notification/NotificationList.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAErE,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC;;OAEG;IACH,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuED,eAAO,MAAM,gBAAgB,4GACsF,qBAAqB,oDAgDvI,CAAA"}

package/dist/components/notification/NotificationList.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from '@citric/core';
+import { listToClass } from '@stack-spot/portal-theme';
+import { last } from 'lodash';
+import { useMemo } from 'react';
+import { styled } from 'styled-components';
+import { InfiniteScroll } from '../InfiniteScroll.js';
+import { TimelineSection } from '../TimelineSection.js';
+import { NotificationItem } from './NotificationItem.js';
+import { NotificationPlaceholder } from './NotificationPlaceholder.js';
+const StyledBox = styled(Box) `
+  width: 100%;
+  position: relative;
+  transition: opacity 0.3s;
+
+  > div:first-child{
+    width: 100%;
+  }
+
+  &.loading {
+    opacity: 0.6;
+    .loading-mask {
+      pointer-events: auto;
+    }
+  }
+
+  .loading-mask {
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    cursor: progress;
+  }
+
+  .placeholder.compact {
+    & > div {
+      padding-block: 0;
+      gap: 15px;
+      & > div {
+        text-align: center;
+        h4 {
+          margin-bottom: 10px;
+        }
+        p {
+          margin: 0;
+        }
+      }
+    }
+  }
+`;
+// this assumes the data from the backend is ordered by date (trigger_at)
+function groupNotificationsByDate(notifications) {
+    const groups = [];
+    for (const n of notifications) {
+        let currentGroup = last(groups);
+        const date = new Date(n.trigger_at);
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const day = date.getDate();
+        if (!currentGroup || currentGroup.day !== day || currentGroup.month !== month || currentGroup.year !== year) {
+            currentGroup = { year, month, day, items: [] };
+            groups.push(currentGroup);
+        }
+        currentGroup.items.push(n);
+    }
+    return groups;
+}
+export const NotificationList = ({ items, compact = false, onCommit, onClickAction, infiniteScroll, loading, showEmptySearch, style, className }) => {
+    const groups = useMemo(() => compact ? [{ day: 0, month: 0, year: 0, items }] : groupNotificationsByDate(items), [compact, items]);
+    const renderNotifications = (notifications, key) => (_jsx(Flex, { sx: { gap: '4px' }, flexDirection: "column", children: notifications?.map((item) => (_jsx(NotificationItem, { notification: item, isSummary: compact, onCommit: () => onCommit(item.id), onClickAction: () => onClickAction?.(item.id) }, item.id))) }, key));
+    return infiniteScroll?.scrollableTarget !== null && (_jsxs(StyledBox, { style: style, className: listToClass([className, loading && 'loading']), children: [items.length ? (_jsx(InfiniteScroll, { dataLength: items.length || 0, next: infiniteScroll?.loadMore ?? (() => { }), hasMore: infiniteScroll?.hasMore ?? false, 
+                // @ts-ignore: the library is wrongly typed and abandoned, meaning, it will never be fixed. The source code clearly accepts
+                // HTMLElements as scrollable targets:
+                // https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/src/index.tsx#L168 
+                scrollableTarget: infiniteScroll?.scrollableTarget, children: _jsx(Flex, { sx: { gap: '24px' }, flexDirection: "column", children: groups.map((group) => compact
+                        ? renderNotifications(group.items, 'compact')
+                        : (_jsx(TimelineSection, { month: group.month, day: group.day, children: renderNotifications(group.items) }, `${group.day}-${group.month}-${group.year}`))) }) })) : _jsx(NotificationPlaceholder, { isSearch: showEmptySearch, className: listToClass(['placeholder', compact && 'compact']) }), _jsx("div", { className: "loading-mask" })] }));
+};
+//# sourceMappingURL=NotificationList.js.map

package/dist/components/notification/NotificationList.js.map

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

package/dist/components/notification/NotificationPlaceholder.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SxProperties } from '@citric/core/dist/sx.js';
+interface Props {
+    isSearch?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    sx?: SxProperties;
+    sxCard?: SxProperties;
+}
+export declare const NotificationPlaceholder: ({ isSearch, sx, sxCard, className, style }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NotificationPlaceholder.d.ts.map

package/dist/components/notification/NotificationPlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/notification/NotificationPlaceholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInD,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,+CAAgD,KAAK,4CAYxF,CAAA"}

package/dist/components/notification/NotificationPlaceholder.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslate } from '@stack-spot/portal-translate';
+import { PlaceholderCallToAction } from '../Placeholder.js';
+export const NotificationPlaceholder = ({ isSearch, sx, sxCard, className, style }) => {
+    const t = useTranslate(dictionary);
+    return _jsx(PlaceholderCallToAction, { title: isSearch ? t.placeholderSearchTitle : t.placeholderTitle, description: isSearch ? t.placeholderSearchDescription : t.placeholderDescription, fullWidth: true, sx: sx, sxCard: sxCard, className: className, style: style });
+};
+const dictionary = {
+    en: {
+        placeholderTitle: 'No notifications',
+        placeholderDescription: 'Your notifications will appear here.',
+        placeholderSearchTitle: 'No notifications found',
+        placeholderSearchDescription: 'You can change the current filters in the fields above',
+    },
+    pt: {
+        placeholderTitle: 'Nenhuma notificação',
+        placeholderDescription: 'Suas notificações aparecerão aqui.',
+        placeholderSearchTitle: 'Nenhuma notificação encontrada',
+        placeholderSearchDescription: 'Você pode mudar os filtros aplicados nos campos acima',
+    },
+};
+//# sourceMappingURL=NotificationPlaceholder.js.map

package/dist/components/notification/NotificationPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationPlaceholder.js","sourceRoot":"","sources":["../../../src/components/notification/NotificationPlaceholder.tsx"],"names":[],"mappings":";AACA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAA;AAUxD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAS,EAAE,EAAE;IAC3F,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAElC,OAAO,KAAC,uBAAuB,IAC7B,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAC/D,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,EACjF,SAAS,QACT,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,GACZ,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,gBAAgB,EAAE,kBAAkB;QACpC,sBAAsB,EAAE,sCAAsC;QAC9D,sBAAsB,EAAE,wBAAwB;QAChD,4BAA4B,EAAE,wDAAwD;KACvF;IACD,EAAE,EAAE;QACF,gBAAgB,EAAE,qBAAqB;QACvC,sBAAsB,EAAE,oCAAoC;QAC5D,sBAAsB,EAAE,gCAAgC;QACxD,4BAA4B,EAAE,uDAAuD;KACtF;CACmB,CAAA"}

package/dist/components/{Notifications → notification}/types.d.ts

@@ -35,4 +35,20 @@ export interface NotificationCommitted {
 export declare enum UnreadType {
     Unread = "unread"
 }
+export interface InfiniteScrollConfig {
+    /**
+     * Function to load more items into the list. Called when the scroll is almost reaching its end.
+     */
+    loadMore: () => void;
+    /**
+     * Set this to false to prevent the scroll from loading more items when it reaches the end.
+     */
+    hasMore: boolean;
+    /**
+     * Defines which scroll will be used as the target of the infinite scroll.
+     *
+     * If null, nothing renders, it waits until it has a value.
+     */
+    scrollableTarget?: string | HTMLElement | null;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/notification/types.ts"],"names":[],"mappings":"AAEA,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,GAAG,QAAQ;CACZ;AAKD,oBAAY,mBAAmB;IAC7B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,UAAU,CAAA;AAEnE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;CACpB;AAID,oBAAY,UAAU;IACpB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;CAChD"}