@stack-spot/portal-components 2.6.1 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.8.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.7.0...portal-components@v2.8.0) (2024-10-25)
+
+
+### Features
+
+* adds new features to the keyboard hook ([#459](https://github.com/stack-spot/portal-commons/issues/459)) ([39b669c](https://github.com/stack-spot/portal-commons/commit/39b669c4ea4b551b399be50678399e14607ce167))
+
+## [2.7.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.6.1...portal-components@v2.7.0) (2024-10-18)
+
+
+### Features
+
+* Handle i18n in notification ([#445](https://github.com/stack-spot/portal-commons/issues/445)) ([1803cea](https://github.com/stack-spot/portal-commons/commit/1803cea1f5ef3b257debb6383dd0c0bc81c9597a))
+
 ## [2.6.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.6.0...portal-components@v2.6.1) (2024-09-26)
 
 

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/notification/NotificationItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAA;AAexD,UAAU,KAAK;IACb,YAAY,EAAE,8BAA8B,CAAC;IAC7C,SAAS,EAAE,OAAO,CAAC;IAEnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAyHD,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,4CA0C5F,CAAA"}
+{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/notification/NotificationItem.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAA;AAexD,UAAU,KAAK;IACb,YAAY,EAAE,8BAA8B,CAAC;IAC7C,SAAS,EAAE,OAAO,CAAC;IAEnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAyHD,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,4CA2C5F,CAAA"}

package/dist/components/notification/NotificationItem.js

@@ -6,6 +6,7 @@ import { useTranslate } from '@stack-spot/portal-translate';
 import { differenceInDays, parseISO } from 'date-fns';
 import { useAnchorTag } from '../../context/anchor.js';
 import { useDateFormatter } from '../../hooks/date.js';
+import { useGetNotificationTitleAndDescription } from '../../context/notification/hooks.js';
 import { LazyMarkdown } from '../LazyMarkdown/index.js';
 const styles = {
     item: (color, isRead) => ({
@@ -50,8 +51,9 @@ const getDaysAgo = (dateString) => {
 const NotificationContent = ({ notification, isSummary }) => {
     const { formatDate } = useDateFormatter();
     const t = useTranslate(dictionary);
+    const { description } = useGetNotificationTitleAndDescription(notification);
     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.trigger_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 })] })] }));
+    return (_jsxs(_Fragment, { children: [!isSummary && _jsx(Flex, { mt: 4, mb: 3, children: _jsx(LazyMarkdown, { children: 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.trigger_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 })] })] }));
 };
 /**
  * NotificationFooter component that renders the footer of a notification.
@@ -70,6 +72,7 @@ const NotificationFooter = ({ actionURL, onClickAction, title }) => {
  */
 export const NotificationItem = ({ notification, isSummary, ...props }) => {
     const t = useTranslate(dictionary);
+    const { title } = useGetNotificationTitleAndDescription(notification);
     function commit() {
         if ('onCommit' in props)
             props.onCommit();
@@ -85,7 +88,7 @@ export const NotificationItem = ({ notification, isSummary, ...props }) => {
         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, title: notification.title })] }), _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
+    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: title, isSummary: isSummary }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary }), notification.call_to_action && _jsx(NotificationFooter, { actionURL: notification.call_to_action, onClickAction: clickAction, title: title })] }), _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, {}) }) })) }) })] }));
 };

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

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

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

@@ -1,9 +1,14 @@
 export type NotificationType = 'LOW' | 'MEDIUM' | 'HIGH';
 export type NotificationContext = 'ACCOUNT' | 'STUDIO' | 'WORKSPACE' | 'AI';
-export type GetTenantNotificationsResponse = {
-    id: string;
+export type NotificationContentResponse = {
     title: string;
     description: string;
+};
+export type GetTenantNotificationsResponse = {
+    id: string;
+    content: {
+        [key: string]: NotificationContentResponse;
+    };
     broadcast_level: 'ACCOUNT' | 'INDIVIDUAL' | 'PLATFORM' | 'RESOURCE';
     context: 'ACCOUNT' | 'STUDIO' | 'WORKSPACE' | 'AI';
     target?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/notification/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;AAExD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAA;AAG3E,MAAM,MAAM,8BAA8B,GAAG;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC;IACpE,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAA;AAED,MAAM,MAAM,2CAA2C,GAAG;IACxD,KAAK,EAAE,8BAA8B,EAAE,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,CAAA;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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/notification/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;AAExD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAA;AAI3E,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE;QACP,CAAC,GAAG,EAAE,MAAM,GAAG,2BAA2B,CAAC;KAC5C,CAAC;IACF,eAAe,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC;IACpE,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAA;AAED,MAAM,MAAM,2CAA2C,GAAG;IACxD,KAAK,EAAE,8BAA8B,EAAE,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,CAAA;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"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/notification/types.ts"],"names":[],"mappings":"AA0CA,iIAAiI;AACjI,gDAAgD;AAChD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,+BAAiB,CAAA;AACnB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/notification/types.ts"],"names":[],"mappings":"AAiDA,iIAAiI;AACjI,gDAAgD;AAChD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,+BAAiB,CAAA;AACnB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}

package/dist/context/notification/hooks.d.ts

@@ -1,7 +1,8 @@
+import { GetTenantNotificationsResponse } from '../../notifications.js';
 import { LoadNotificationsFilters } from './types.js';
 export declare function useNotificationList(initialFilters?: LoadNotificationsFilters): {
     status: "loading" | "error" | "startup" | "idle";
-    items: import("../../notifications.js").GetTenantNotificationsResponse[];
+    items: GetTenantNotificationsResponse[];
     hasMore: boolean;
     loadMore: () => Promise<void> | undefined;
     refresh: () => Promise<void>;
@@ -9,5 +10,9 @@ export declare function useNotificationList(initialFilters?: LoadNotificationsFi
     filters: LoadNotificationsFilters;
     error: any;
 };
+export declare function useGetNotificationTitleAndDescription({ content }: GetTenantNotificationsResponse): {
+    title: string;
+    description: string;
+};
 export declare function useUnreadNotifications(): boolean;
 //# sourceMappingURL=hooks.d.ts.map

package/dist/context/notification/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/context/notification/hooks.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAElD,wBAAgB,mBAAmB,CAAC,cAAc,GAAE,wBAA6B;;;;;;+BA0B3B,wBAAwB;;;EAuC7E;AAED,wBAAgB,sBAAsB,YAWrC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/context/notification/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAA;AAKpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAElD,wBAAgB,mBAAmB,CAAC,cAAc,GAAE,wBAA6B;;;;;;+BA0B3B,wBAAwB;;;EAuC7E;AAED,wBAAgB,qCAAqC,CAAC,EAAE,OAAO,EAAE,EAAE,8BAA8B;;;EAQhG;AAED,wBAAgB,sBAAsB,YAWrC"}

package/dist/context/notification/hooks.js

@@ -1,4 +1,5 @@
 import { useCallback, useRef, useState } from 'react';
+import { useLanguage } from '@stack-spot/portal-translate';
 import { useManualRender } from '../../hooks/manual-render.js';
 import { useEffectOnce } from '../../hooks/use-effect-once.js';
 import { useNotificationController } from './context.js';
@@ -70,6 +71,14 @@ export function useNotificationList(initialFilters = {}) {
         error: error.current,
     };
 }
+export function useGetNotificationTitleAndDescription({ content }) {
+    const language = useLanguage();
+    const { title, description } = content?.[language] || content?.en || {};
+    return {
+        title,
+        description: description?.replace(/^\s*#+\s*/gm, ''),
+    };
+}
 export function useUnreadNotifications() {
     const [hasUnreadNotifications, setUnreadNotifications] = useState(false);
     const controller = useNotificationController();

package/dist/context/notification/hooks.js.map

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

package/dist/hooks/keyboard.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface Props {
+interface Options<T extends HTMLElement = HTMLDivElement> {
     /**
      * A query selector that returns every html element that must be navigable through the keyboard.
      */
@@ -11,8 +11,29 @@ interface Props {
     /**
      * Function to call when TAB is pressed at the last item in the list of items returned by the query selector. Will be the same as
      * onPressEscape if not specified.
+     *
+     * Attention: has no effect if `disableTabBehavior` is true.
      */
     onPressLastTab?: () => void;
+    /**
+     * Pass this function if you want any behavior when the user presses the arrow left.
+     */
+    onPressArrowLeft?: () => void;
+    /**
+     * Pass this function if you want any behavior when the user presses the arrow right.
+     */
+    onPressArrowRight?: () => void;
+    /**
+     * Disables any alteration to the tab key.
+     * @default false
+     */
+    disableTabBehavior?: boolean;
+    /**
+     * If you already have a ref to the element you want to attach the events to, you can pass it in this prop.
+     *
+     * If you pass a ref. The events won't be attached to the document, instead, they will be attached to the element referred by the ref.
+     */
+    ref?: React.RefObject<T>;
 }
 /**
  * Creates listeners for controlling a Menu UI through the keyboard.
@@ -20,11 +41,22 @@ interface Props {
  * - Arrow up: previous element in the iterator returned by the query selectors. Last element, if the current element is the first.
  * - Tab: same as Arrow down, but has a different behavior if the element is the last (see onPressLastTab).
  * - Esc: determined by onPressEscape.
- * @param props {@link Props}.
+ * @param props {@link Options}.
  * @returns an object with the element controlled by the keyboard (useRef); a function to attach the keyboard events and a function to
  * detach the keyboard events.
  */
-export declare function useKeyboardControls<T extends HTMLElement = HTMLDivElement>({ querySelectors, onPressEscape, onPressLastTab }: Props): {
+export declare function useKeyboardControls<T extends HTMLElement = HTMLDivElement>(
+/**
+ * Options for the keyboard controls.
+ */
+{ querySelectors, onPressEscape, onPressLastTab, onPressArrowLeft, onPressArrowRight, disableTabBehavior, ref, }: Options<T>, 
+/**
+ * Calls `attachKeyboardListeners` (mount) and `detachKeyboardListeners` (unmount) whenever the deps passed as parameter changes.
+ *
+ * If deps are undefined, this component doesn't automatically add these listeners and you have to use the functions returned in the
+ * result.
+ */
+deps?: any[]): {
     keyboardControlledElement: import("react").RefObject<T>;
     attachKeyboardListeners: () => void;
     detachKeyboardListeners: () => void;

package/dist/hooks/keyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/hooks/keyboard.tsx"],"names":[],"mappings":";AAEA,UAAU,KAAK;IACb;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EACxE,EAAE,cAAc,EAAE,aAAa,EAAE,cAA8B,EAAE,EAAE,KAAK;;;;EAoDzE"}
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/hooks/keyboard.tsx"],"names":[],"mappings":";AAEA,UAAU,OAAO,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc;IACtD;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc;AACxE;;GAEG;AACH,EACE,cAAc,EAAE,aAAa,EAAE,cAA8B,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,GAC5H,EAAE,OAAO,CAAC,CAAC,CAAC;AACb;;;;;GAKG;AACH,IAAI,CAAC,EAAE,GAAG,EAAE;;;;EAiEb"}

package/dist/hooks/keyboard.js

@@ -1,24 +1,37 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 /**
  * Creates listeners for controlling a Menu UI through the keyboard.
  * - Arrow down: next element in the iterator returned by the query selectors. First element, if the current element is the last.
  * - Arrow up: previous element in the iterator returned by the query selectors. Last element, if the current element is the first.
  * - Tab: same as Arrow down, but has a different behavior if the element is the last (see onPressLastTab).
  * - Esc: determined by onPressEscape.
- * @param props {@link Props}.
+ * @param props {@link Options}.
  * @returns an object with the element controlled by the keyboard (useRef); a function to attach the keyboard events and a function to
  * detach the keyboard events.
  */
-export function useKeyboardControls({ querySelectors, onPressEscape, onPressLastTab = onPressEscape }) {
-    const keyboardControlledElement = useRef(null);
+export function useKeyboardControls(
+/**
+ * Options for the keyboard controls.
+ */
+{ querySelectors, onPressEscape, onPressLastTab = onPressEscape, onPressArrowLeft, onPressArrowRight, disableTabBehavior, ref, }, 
+/**
+ * Calls `attachKeyboardListeners` (mount) and `detachKeyboardListeners` (unmount) whenever the deps passed as parameter changes.
+ *
+ * If deps are undefined, this component doesn't automatically add these listeners and you have to use the functions returned in the
+ * result.
+ */
+deps) {
+    const localRef = useRef(null);
+    const keyboardControlledElement = ref ?? localRef;
     const listeners = useRef({});
     listeners.current = { onPressEscape, onPressLastTab };
     const keyboardControls = useCallback((event) => {
+        const eventKey = event.key;
         const target = event?.target;
         function getSelectableAnchors() {
             return keyboardControlledElement.current?.querySelectorAll(querySelectors) ?? [];
         }
-        function handleArrows(key = event.key) {
+        function handleArrows(key = eventKey) {
             const anchors = getSelectableAnchors();
             let i = 0;
             while (i < anchors.length && document.activeElement !== anchors[i])
@@ -36,6 +49,8 @@ export function useKeyboardControls({ querySelectors, onPressEscape, onPressLast
                 target?.click();
             },
             Tab: () => {
+                if (disableTabBehavior)
+                    return;
                 const anchors = getSelectableAnchors();
                 if (document.activeElement === anchors[anchors.length - 1])
                     listeners.current.onPressLastTab?.();
@@ -45,15 +60,25 @@ export function useKeyboardControls({ querySelectors, onPressEscape, onPressLast
             },
             ArrowUp: handleArrows,
             ArrowDown: handleArrows,
+            ArrowLeft: onPressArrowLeft,
+            ArrowRight: onPressArrowRight,
         };
-        handlers[event.key]?.();
+        handlers[eventKey]?.();
     }, []);
     const attachKeyboardListeners = useCallback(() => {
-        document.addEventListener('keydown', keyboardControls);
+        const element = ref?.current ?? document;
+        element.addEventListener('keydown', keyboardControls);
     }, []);
     const detachKeyboardListeners = useCallback(() => {
-        document.removeEventListener('keydown', keyboardControls);
+        const element = ref?.current ?? document;
+        element.removeEventListener('keydown', keyboardControls);
     }, []);
+    useEffect(() => {
+        if (!deps)
+            return;
+        attachKeyboardListeners();
+        return detachKeyboardListeners;
+    }, deps);
     return { keyboardControlledElement, attachKeyboardListeners, detachKeyboardListeners };
 }
 //# sourceMappingURL=keyboard.js.map

package/dist/hooks/keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../../src/hooks/keyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAkB3C;;;;;;;;;GASG;AACH,MAAM,UAAU,mBAAmB,CACjC,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,GAAG,aAAa,EAAS;IAExE,MAAM,yBAAyB,GAAG,MAAM,CAAI,IAAI,CAAC,CAAA;IACjD,MAAM,SAAS,GAAG,MAAM,CAAkD,EAAE,CAAC,CAAA;IAC7E,SAAS,CAAC,OAAO,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,CAAA;IAErD,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,KAAoB,EAAE,EAAE;QAC5D,MAAM,MAAM,GAAG,KAAK,EAAE,MAA4B,CAAA;QAElD,SAAS,oBAAoB;YAC3B,OAAO,yBAAyB,CAAC,OAAO,EAAE,gBAAgB,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;QAClF,CAAC;QAED,SAAS,YAAY,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG;YACnC,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAA;YACtC,IAAI,CAAC,GAAG,CAAC,CAAA;YACT,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC;gBAAE,CAAC,EAAE,CAAA;YACvE,MAAM,IAAI,GAAQ,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;YACxH,IAAI,EAAE,KAAK,EAAE,EAAE,CAAA;QACjB,CAAC;QAED,MAAM,QAAQ,GAA6C;YACzD,MAAM,EAAE,GAAG,EAAE;gBACX,SAAS,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAA;gBACnC,KAAK,CAAC,eAAe,EAAE,CAAA;gBACvB,KAAK,CAAC,cAAc,EAAE,CAAA;YACxB,CAAC;YACD,KAAK,EAAE,GAAG,EAAE;gBACV,MAAM,EAAE,KAAK,EAAE,CAAA;YACjB,CAAC;YACD,GAAG,EAAE,GAAG,EAAE;gBACR,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAA;gBACtC,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;oBAAE,SAAS,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAA;;oBAC1F,YAAY,CAAC,WAAW,CAAC,CAAA;gBAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;YACxB,CAAC;YACD,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE,YAAY;SACxB,CAAA;QAED,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,CAAA;IACzB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/C,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAA;IACxD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAA;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,CAAA;AACxF,CAAC"}
+{"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../../src/hooks/keyboard.tsx"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/notification/NotificationItem.tsx

@@ -5,6 +5,7 @@ import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { differenceInDays, parseISO } from 'date-fns'
 import { useAnchorTag } from '../../context/anchor'
 import { useDateFormatter } from '../../hooks/date'
+import { useGetNotificationTitleAndDescription } from '../../context/notification/hooks'
 import { LazyMarkdown } from '../LazyMarkdown/index'
 import { GetTenantNotificationsResponse } from './types'
 
@@ -69,13 +70,13 @@ const getDaysAgo = (dateString: string): number => {
 const NotificationContent = ({ notification, isSummary }: Props) => {
   const { formatDate } = useDateFormatter()
   const t = useTranslate(dictionary)
-
+  const { description } = useGetNotificationTitleAndDescription(notification)
   const daysAgo = getDaysAgo(notification.trigger_at)
 
   return (
     <>
       {!isSummary && <Flex mt={4} mb={3}>
-        <LazyMarkdown>{notification.description}</LazyMarkdown>
+        <LazyMarkdown>{description}</LazyMarkdown>
       </Flex>}
       <Flex>
         <Text appearance="microtext1" colorScheme="light.700">
@@ -185,6 +186,7 @@ type NotificationItemProps = DeprecatedNotificationItemProps | NewNotificationIt
  */
 export const NotificationItem = ({ notification, isSummary, ...props }: NotificationItemProps) => {
   const t = useTranslate(dictionary)
+  const { title } = useGetNotificationTitleAndDescription(notification)
 
   function commit() {
     if ('onCommit' in props) props.onCommit()
@@ -203,12 +205,12 @@ export const NotificationItem = ({ notification, isSummary, ...props }: Notifica
     <Box sx={{ position: 'relative' }}>
       <Flex bg="light.400" p="3 3 3 5" r="xs"
         flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>
-        <NotificationHeader title={notification.title} isSummary={isSummary} />
+        <NotificationHeader title={title} isSummary={isSummary} />
         <NotificationContent notification={notification} isSummary={isSummary} />
         {notification.call_to_action && <NotificationFooter
           actionURL={notification.call_to_action}
           onClickAction={clickAction}
-          title={notification.title}
+          title={title}
         />}
       </Flex>
       <Box sx={{ position: 'absolute', top: '8px', right: '8px' }}>

package/src/components/notification/types.ts

@@ -2,11 +2,18 @@ export type NotificationType = 'LOW' | 'MEDIUM' | 'HIGH'
 
 export type NotificationContext = 'ACCOUNT' | 'STUDIO' | 'WORKSPACE' | 'AI'
 
-//The following two notification types comes from the api swagger
-export type GetTenantNotificationsResponse = {
-  id: string,
+//The following three notification types comes from the api swagger
+
+export type NotificationContentResponse = {
   title: string,
   description: string,
+};
+
+export type GetTenantNotificationsResponse = {
+  id: string,
+  content: {
+    [key: string]: NotificationContentResponse,
+  },
   broadcast_level: 'ACCOUNT' | 'INDIVIDUAL' | 'PLATFORM' | 'RESOURCE',
   context: 'ACCOUNT' | 'STUDIO' | 'WORKSPACE' | 'AI',
   target?: string,

package/src/context/notification/hooks.ts

@@ -1,4 +1,6 @@
 import { useCallback, useRef, useState } from 'react'
+import { useLanguage } from '@stack-spot/portal-translate'
+import { GetTenantNotificationsResponse } from '../../notifications'
 import { useManualRender } from '../../hooks/manual-render'
 import { useEffectOnce } from '../../hooks/use-effect-once'
 import { useNotificationController } from './context'
@@ -72,6 +74,16 @@ export function useNotificationList(initialFilters: LoadNotificationsFilters = {
   }
 }
 
+export function useGetNotificationTitleAndDescription({ content }: GetTenantNotificationsResponse) {
+  const language = useLanguage()
+  const { title, description } = content?.[language] || content?.en || {}
+
+  return {
+    title,
+    description: description?.replace(/^\s*#+\s*/gm, ''),
+  }
+}
+
 export function useUnreadNotifications() {
   const [hasUnreadNotifications, setUnreadNotifications] = useState(false)
   const controller = useNotificationController()

package/src/hooks/keyboard.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
-interface Props {
+interface Options<T extends HTMLElement = HTMLDivElement> {
   /**
    * A query selector that returns every html element that must be navigable through the keyboard.
    */
@@ -12,8 +12,29 @@ interface Props {
   /**
    * Function to call when TAB is pressed at the last item in the list of items returned by the query selector. Will be the same as
    * onPressEscape if not specified.
+   * 
+   * Attention: has no effect if `disableTabBehavior` is true.
    */
   onPressLastTab?: () => void,
+  /**
+   * Pass this function if you want any behavior when the user presses the arrow left.
+   */
+  onPressArrowLeft?: () => void,
+  /**
+   * Pass this function if you want any behavior when the user presses the arrow right.
+   */
+  onPressArrowRight?: () => void,
+  /**
+   * Disables any alteration to the tab key.
+   * @default false
+   */
+  disableTabBehavior?: boolean,
+  /**
+   * If you already have a ref to the element you want to attach the events to, you can pass it in this prop.
+   * 
+   * If you pass a ref. The events won't be attached to the document, instead, they will be attached to the element referred by the ref.
+   */
+  ref?: React.RefObject<T>,
 }
 
 /**
@@ -22,25 +43,39 @@ interface Props {
  * - Arrow up: previous element in the iterator returned by the query selectors. Last element, if the current element is the first.
  * - Tab: same as Arrow down, but has a different behavior if the element is the last (see onPressLastTab).
  * - Esc: determined by onPressEscape.
- * @param props {@link Props}.
+ * @param props {@link Options}.
  * @returns an object with the element controlled by the keyboard (useRef); a function to attach the keyboard events and a function to
  * detach the keyboard events.
  */
 export function useKeyboardControls<T extends HTMLElement = HTMLDivElement>(
-  { querySelectors, onPressEscape, onPressLastTab = onPressEscape }: Props,
+  /**
+   * Options for the keyboard controls.
+   */
+  {
+    querySelectors, onPressEscape, onPressLastTab = onPressEscape, onPressArrowLeft, onPressArrowRight, disableTabBehavior, ref,
+  }: Options<T>,
+  /**
+   * Calls `attachKeyboardListeners` (mount) and `detachKeyboardListeners` (unmount) whenever the deps passed as parameter changes.
+   * 
+   * If deps are undefined, this component doesn't automatically add these listeners and you have to use the functions returned in the
+   * result.
+   */
+  deps?: any[],
 ) {
-  const keyboardControlledElement = useRef<T>(null)
-  const listeners = useRef<Pick<Props, 'onPressEscape' | 'onPressLastTab'>>({})
+  const localRef = useRef<T>(null)
+  const keyboardControlledElement = ref ?? localRef
+  const listeners = useRef<Pick<Options, 'onPressEscape' | 'onPressLastTab'>>({})
   listeners.current = { onPressEscape, onPressLastTab }
 
-  const keyboardControls = useCallback((event: KeyboardEvent) => {
+  const keyboardControls = useCallback((event: Event) => {
+    const eventKey = (event as KeyboardEvent).key
     const target = event?.target as HTMLElement | null
 
     function getSelectableAnchors() {
       return keyboardControlledElement.current?.querySelectorAll(querySelectors) ?? []
     }
 
-    function handleArrows(key = event.key) {
+    function handleArrows(key = eventKey) {
       const anchors = getSelectableAnchors()
       let i = 0
       while (i < anchors.length && document.activeElement !== anchors[i]) i++
@@ -58,6 +93,7 @@ export function useKeyboardControls<T extends HTMLElement = HTMLDivElement>(
         target?.click()
       },
       Tab: () => {
+        if (disableTabBehavior) return
         const anchors = getSelectableAnchors()
         if (document.activeElement === anchors[anchors.length - 1]) listeners.current.onPressLastTab?.()
         else  handleArrows('ArrowDown')
@@ -65,18 +101,28 @@ export function useKeyboardControls<T extends HTMLElement = HTMLDivElement>(
       },
       ArrowUp: handleArrows,
       ArrowDown: handleArrows,
+      ArrowLeft: onPressArrowLeft,
+      ArrowRight: onPressArrowRight,
     }
 
-    handlers[event.key]?.()
+    handlers[eventKey]?.()
   }, [])
 
   const attachKeyboardListeners = useCallback(() => {
-    document.addEventListener('keydown', keyboardControls)
+    const element = ref?.current ?? document
+    element.addEventListener('keydown', keyboardControls)
   }, [])
 
   const detachKeyboardListeners = useCallback(() => {
-    document.removeEventListener('keydown', keyboardControls)
+    const element = ref?.current ?? document
+    element.removeEventListener('keydown', keyboardControls)
   }, [])
 
+  useEffect(() => {
+    if (!deps) return
+    attachKeyboardListeners()
+    return detachKeyboardListeners
+  }, deps)
+
   return { keyboardControlledElement, attachKeyboardListeners, detachKeyboardListeners }
 }