@stack-spot/portal-components 2.14.0 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.15.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.14.1...portal-components@v2.15.0) (2025-02-27)
+
+
+### Features
+
+* adds component FadingOverflow ([#760](https://github.com/stack-spot/portal-commons/issues/760)) ([c70834d](https://github.com/stack-spot/portal-commons/commit/c70834dc836e3c0ec87cf160c694ba730a11a4a7))
+
+
+### Bug Fixes
+
+* re-exports FadingOverflow in package.json ([#762](https://github.com/stack-spot/portal-commons/issues/762)) ([c647054](https://github.com/stack-spot/portal-commons/commit/c6470548bbf7ad09e44fd45498c5d5f3abd3abc4))
+
+## [2.14.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.14.0...portal-components@v2.14.1) (2025-02-10)
+
+
+### Bug Fixes
+
+* Fix text notification when markdown ([#716](https://github.com/stack-spot/portal-commons/issues/716)) ([92196ab](https://github.com/stack-spot/portal-commons/commit/92196ab463d34b65d0b4952baa4720ff54181b45))
+
 ## [2.14.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.13.0...portal-components@v2.14.0) (2025-02-10)
 
 

package/dist/components/FadingOverflow.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { WithStyle } from '@stack-spot/portal-theme';
+type Side = 'top' | 'right' | 'left' | 'bottom';
+type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows';
+interface Props extends WithStyle {
+    /**
+     * How to scroll the content.
+     * - none: overflow is hidden. No scrolling.
+     * - wheel: the content is solely scrollable through the mouse wheel and keyboard arrows, no scroll bars are rendered.
+     * - bar: this is the normal browser scroll. The content will be scrollable through the mouse wheel, keyboard and scrollbar.
+     * - arrows: arrows will be placed in the far edges of the sides that must be scrolled. The content is scrolled through the mouse wheel,
+     * keyboard and these arrows. Hovering an arrow slowly scrolls the content, clicking the arrow fully scrolls the content in its direction.
+     * There are no scrollbars in this scenario.
+     * @default 'none'
+     */
+    scroll?: ScrollType;
+    /**
+     * If true, a horizontal scroll can be performed by using the vertical mouse wheel.
+     * @default false
+     */
+    enableHorizontalScrollWithVerticalWheel?: boolean;
+    /**
+     * Which sides to fade when the content overflows.
+     *
+     * Important: it seems the current solution doesn't support mixing vertical and horizontal scrolls. I'm not sure if this is possible, I
+     * believed combining linear gradients would work, but it doesn't.
+     */
+    sides?: Side[];
+    children?: React.ReactNode;
+}
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ *
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
+export declare const FadingOverflow: ({ children, scroll, sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FadingOverflow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FadingOverflow.d.ts","sourceRoot":"","sources":["../../src/components/FadingOverflow.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAKxE,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC/C,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAErD,UAAU,KAAM,SAAQ,SAAS;IAC/B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,uCAAuC,CAAC,EAAE,OAAO,CAAC;IAClD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAwFD;;;;GAIG;AACH,eAAO,MAAM,cAAc,8FAC2E,KAAK,4CAqI1G,CAAA"}

package/dist/components/FadingOverflow.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBox } from '@citric/core';
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { debounce } from 'lodash';
+import { useEffect, useRef } from 'react';
+import { styled } from 'styled-components';
+// Scrolling can be very fast, this sets a lower limit for us to run listeners without impacting performance.
+const MIN_CHECK_INTERVAL_MS = 20;
+// The interval which to scroll the content when a scroll arrow is hovered.
+const SCROLL_INTERVAL_MS = 20;
+// This sets the speed of the scroll when the user hovers a scroll arrow.
+const SCROLL_PX = 4;
+// Fade masks
+const masks = {
+    right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    top: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    bottom: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+    vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+};
+const OverflowBox = styled.div `
+  &.hidden-scroll-bars::-webkit-scrollbar, &.scroll-arrows ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &.scroll-arrows {
+    position: relative;
+
+    > .content {
+      width: 100%;
+    }
+  }
+
+  .scroll-to-left, .scroll-to-right, .scroll-to-top, .scroll-to-bottom {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    ${IconBox} {
+      background-color: ${theme.color.light[300]};
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.visible {
+      opacity: 0.6;
+      pointer-events: auto;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .scroll-to-left {
+    right: unset;
+    height: unset;
+  }
+  
+  .scroll-to-right {
+    left: unset;
+    height: unset;
+  }
+  
+  .scroll-to-top {
+    bottom: unset;
+    width: unset;
+  }
+  
+  .scroll-to-bottom {
+    top: unset;
+    width: unset;
+  }
+`;
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ *
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
+export const FadingOverflow = ({ children, scroll = 'none', sides, enableHorizontalScrollWithVerticalWheel, className, ...props }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        const element = ref.current;
+        const fadeTop = !sides || sides.includes('top');
+        const fadeRight = !sides || sides.includes('right');
+        const fadeBottom = !sides || sides.includes('bottom');
+        const fadeLeft = !sides || sides.includes('left');
+        let intervalId;
+        const overflow = scroll === 'none' ? 'clip' : 'auto';
+        element.style.overflowX = (fadeLeft || fadeRight) ? overflow : '';
+        element.style.overflowY = (fadeTop || fadeBottom) ? overflow : '';
+        if (scroll === 'arrows' || scroll === 'wheel')
+            element.classList.add('hidden-scroll-bars');
+        function stopScrolling() {
+            clearInterval(intervalId);
+        }
+        function checkOverflow() {
+            // masking (fading)
+            const overflowsRight = element.clientWidth < element.scrollWidth && element.scrollLeft < (element.scrollWidth - element.clientWidth);
+            const overflowsLeft = element.scrollLeft > 0;
+            const overflowsBottom = element.clientHeight < element.scrollHeight
+                && element.scrollTop < (element.scrollHeight - element.clientHeight);
+            const overflowsTop = element.scrollTop > 0;
+            const masksToApply = [];
+            if (overflowsLeft && fadeLeft && overflowsRight && fadeRight)
+                masksToApply.push(masks.horizontal);
+            else {
+                if (overflowsRight && fadeRight)
+                    masksToApply.push(masks.right);
+                if (overflowsLeft && fadeLeft)
+                    masksToApply.push(masks.left);
+            }
+            if (overflowsTop && fadeTop && overflowsBottom && fadeBottom)
+                masksToApply.push(masks.vertical);
+            else {
+                if (overflowsTop && fadeTop)
+                    masksToApply.push(masks.top);
+                if (overflowsBottom && fadeBottom)
+                    masksToApply.push(masks.bottom);
+            }
+            element.style.maskImage = masksToApply.join(', ');
+            // arrow buttons
+            if (scroll !== 'arrows')
+                return;
+            function startScrolling(side) {
+                stopScrolling();
+                const direction = side === 'bottom' || side === 'top' ? 'scrollTop' : 'scrollLeft';
+                const multiplier = side === 'bottom' || side === 'right' ? 1 : -1;
+                intervalId = window.setInterval(() => {
+                    element[direction] += SCROLL_PX * multiplier;
+                }, SCROLL_INTERVAL_MS);
+            }
+            const startScrollingBySide = {
+                left: () => startScrolling('left'),
+                right: () => startScrolling('right'),
+                top: () => startScrolling('top'),
+                bottom: () => startScrolling('bottom'),
+            };
+            const scrollToMaxBySide = {
+                left: () => element.scrollLeft = 0,
+                right: () => element.scrollLeft = element.scrollWidth - element.clientWidth,
+                top: () => element.scrollTop = 0,
+                bottom: () => element.scrollTop = element.scrollHeight - element.clientHeight,
+            };
+            function enableArrowButton(side) {
+                const button = element.parentNode?.querySelector(`.scroll-to-${side}`);
+                if (button?.classList.contains('visible'))
+                    return;
+                button?.classList.add('visible');
+                button?.addEventListener('mouseenter', startScrollingBySide[side]);
+                button?.addEventListener('mouseleave', stopScrolling);
+                button?.addEventListener('click', scrollToMaxBySide[side]);
+            }
+            function disableArrowButton(side) {
+                const button = element.parentNode?.querySelector(`.scroll-to-${side}`);
+                if (!button?.classList.contains('visible'))
+                    return;
+                button?.classList.remove('visible');
+                stopScrolling();
+                button?.removeEventListener('mouseenter', startScrollingBySide[side]);
+                button?.removeEventListener('mouseleave', stopScrolling);
+                button?.removeEventListener('click', scrollToMaxBySide[side]);
+            }
+            if (overflowsRight && fadeRight)
+                enableArrowButton('right');
+            else
+                disableArrowButton('right');
+            if (overflowsLeft && fadeLeft)
+                enableArrowButton('left');
+            else
+                disableArrowButton('left');
+            if (overflowsTop && fadeTop)
+                enableArrowButton('top');
+            else
+                disableArrowButton('top');
+            if (overflowsBottom && fadeBottom)
+                enableArrowButton('bottom');
+            else
+                disableArrowButton('bottom');
+        }
+        const debouncedCheck = debounce(checkOverflow, MIN_CHECK_INTERVAL_MS);
+        const resizeObserver = new ResizeObserver(debouncedCheck);
+        resizeObserver.observe(element);
+        element.addEventListener('scroll', debouncedCheck);
+        return () => {
+            stopScrolling();
+            resizeObserver.disconnect();
+            element.removeEventListener('scroll', debouncedCheck);
+        };
+    }, [sides, ref.current, scroll]);
+    useEffect(() => {
+        if (!enableHorizontalScrollWithVerticalWheel || !ref.current)
+            return;
+        const element = ref.current;
+        function scrollWithWheel(event) {
+            if (event.deltaY) {
+                element.scrollLeft += event.deltaY;
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+        element.addEventListener('wheel', scrollWithWheel);
+        return () => element.removeEventListener('wheel', scrollWithWheel);
+    }, [ref.current, enableHorizontalScrollWithVerticalWheel]);
+    return scroll === 'arrows' ? (_jsxs(OverflowBox, { ...props, className: listToClass(['scroll-arrows', className]), children: [_jsx("div", { className: "content", ref: ref, children: children }), _jsx("div", { className: "scroll-to-left", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronLeft, {}) }) }), _jsx("div", { className: "scroll-to-right", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronRight, {}) }) }), _jsx("div", { className: "scroll-to-top", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronUp, {}) }) }), _jsx("div", { className: "scroll-to-bottom", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronDown, {}) }) })] })) : _jsx(OverflowBox, { ...props, className: className, ref: ref, children: children });
+};
+//# sourceMappingURL=FadingOverflow.js.map

package/dist/components/FadingOverflow.js.map

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

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":"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;IACZ,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC;AAwKD,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;IAC3B;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC;AAED,KAAK,qBAAqB,GAAG,+BAA+B,GAAG,wBAAwB,CAAA;AAEvF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,0CAA2C,qBAAqB,4CA4C5F,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;IACZ,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC;AAqKD,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;IAC3B;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC;AAED,KAAK,qBAAqB,GAAG,+BAA+B,GAAG,wBAAwB,CAAA;AAEvF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,0CAA2C,qBAAqB,4CA4C5F,CAAA"}

package/dist/components/notification/NotificationItem.js

@@ -20,11 +20,6 @@ const statusToColor = {
     HIGH: 'danger.500',
 };
 const style = {
-    tooltip: {
-        '&::after': {
-            top: '25%',
-        },
-    },
     notificationDescription: {
         display: '-webkit-box',
         WebkitBoxOrient: 'vertical',
@@ -76,7 +71,7 @@ const NotificationContent = ({ notification, isSummary, onClickViewNotification
             }
         }, 100);
     };
-    return (_jsxs(_Fragment, { children: [!isSummary && _jsx(Flex, { mt: 4, mb: 3, flexDirection: "column", children: _jsx(LazyMarkdown, { components: components(), children: description }) }), isSummary && (_jsx(Text, { appearance: "body2", mb: 3, sx: style.notificationDescription, children: description })), _jsxs(Flex, { justifyContent: "space-between", children: [_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 })] }), isSummary && description.length > 120 && (_jsx(Link, { href: "/notifications", onClick: (ev) => {
+    return (_jsxs(_Fragment, { children: [!isSummary && _jsx(Flex, { mt: 4, mb: 3, flexDirection: "column", children: _jsx(LazyMarkdown, { components: components(), children: description }) }), isSummary && (_jsx(Text, { appearance: "body2", mb: 3, sx: style.notificationDescription, children: handleTextMark(description) })), _jsxs(Flex, { justifyContent: "space-between", children: [_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 })] }), isSummary && description.length > 120 && (_jsx(Link, { href: "/notifications", onClick: (ev) => {
                             onClickViewNotification?.();
                             navigateToNotificationPosition(ev, `notification-item-${notification.id}`);
                         }, children: _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: t.readMore }) }))] })] }));
@@ -114,10 +109,13 @@ export const NotificationItem = ({ notification, isSummary, ...props }) => {
         else
             props.onClickMarkReadUnread(true, 'callToAction');
     }
-    return (_jsxs(Box, { sx: { position: 'relative' }, id: props.id, children: [_jsxs(Flex, { bg: "light.400", p: "3 3 3 5", r: "xs", flexWrap: "nowrap", 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, onClickViewNotification: props.onClickViewNotification }), 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
+    return (_jsxs(Box, { sx: { position: 'relative' }, id: props.id, children: [_jsxs(Flex, { bg: "light.400", p: "3 3 3 5", r: "xs", flexWrap: "nowrap", 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, onClickViewNotification: props.onClickViewNotification }), 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", 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, {}) }) })) }) })] }));
 };
+function handleTextMark(text) {
+    return text.replace(/[^\p{L}\p{N}\s\p{Emoji_Presentation}:!'()]/gu, '');
+}
 const dictionary = {
     en: {
         ACCOUNT: 'Account',

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/index.d.ts

@@ -1,7 +1,7 @@
 export { AsyncContent } from './components/AsyncContent.js';
 export { BannerWarning } from './components/BannerWarning.js';
-export { ChatBot } from './components/ChatBot.js';
 export { ButtonLoading } from './components/ButtonLoading.js';
+export { ChatBot } from './components/ChatBot.js';
 export { useDateFormatter } from './hooks/date.js';
 export { useKeyboardControls } from './hooks/keyboard.js';
 export { useManualRender } from './hooks/manual-render.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -1,7 +1,7 @@
 export { AsyncContent } from './components/AsyncContent.js';
 export { BannerWarning } from './components/BannerWarning.js';
-export { ChatBot } from './components/ChatBot.js';
 export { ButtonLoading } from './components/ButtonLoading.js';
+export { ChatBot } from './components/ChatBot.js';
 export { useDateFormatter } from './hooks/date.js';
 export { useKeyboardControls } from './hooks/keyboard.js';
 export { useManualRender } from './hooks/manual-render.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,8 @@
     "./SearchInput": "./dist/components/form/SearchInput.js",
     "./Select": "./dist/components/form/Select/index.js",
     "./Stepper": "./dist/components/Stepper/index.js",
-    "./FileTreeView": "./dist/components/FileTreeView/index.js"
+    "./FileTreeView": "./dist/components/FileTreeView/index.js",
+    "./FadingOverflow": "./dist/components/FadingOverflow.js"
   },
   "scripts": {
     "build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",

package/src/components/FadingOverflow.tsx

@@ -0,0 +1,263 @@
+import { IconBox } from '@citric/core'
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons'
+import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
+import { debounce } from 'lodash'
+import { useEffect, useRef } from 'react'
+import { styled } from 'styled-components'
+
+type Side = 'top' | 'right' | 'left' | 'bottom'
+type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows'
+
+interface Props extends WithStyle {
+  /**
+   * How to scroll the content.
+   * - none: overflow is hidden. No scrolling.
+   * - wheel: the content is solely scrollable through the mouse wheel and keyboard arrows, no scroll bars are rendered.
+   * - bar: this is the normal browser scroll. The content will be scrollable through the mouse wheel, keyboard and scrollbar.
+   * - arrows: arrows will be placed in the far edges of the sides that must be scrolled. The content is scrolled through the mouse wheel,
+   * keyboard and these arrows. Hovering an arrow slowly scrolls the content, clicking the arrow fully scrolls the content in its direction.
+   * There are no scrollbars in this scenario.
+   * @default 'none'
+   */
+  scroll?: ScrollType,
+  /**
+   * If true, a horizontal scroll can be performed by using the vertical mouse wheel.
+   * @default false
+   */
+  enableHorizontalScrollWithVerticalWheel?: boolean,
+  /**
+   * Which sides to fade when the content overflows.
+   * 
+   * Important: it seems the current solution doesn't support mixing vertical and horizontal scrolls. I'm not sure if this is possible, I
+   * believed combining linear gradients would work, but it doesn't.
+   */
+  sides?: Side[],
+  children?: React.ReactNode,
+}
+
+// Scrolling can be very fast, this sets a lower limit for us to run listeners without impacting performance.
+const MIN_CHECK_INTERVAL_MS = 20
+// The interval which to scroll the content when a scroll arrow is hovered.
+const SCROLL_INTERVAL_MS = 20
+// This sets the speed of the scroll when the user hovers a scroll arrow.
+const SCROLL_PX = 4
+// Fade masks
+const masks = {
+  right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  top: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  bottom: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+  vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+}
+
+const OverflowBox = styled.div`
+  &.hidden-scroll-bars::-webkit-scrollbar, &.scroll-arrows ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &.scroll-arrows {
+    position: relative;
+
+    > .content {
+      width: 100%;
+    }
+  }
+
+  .scroll-to-left, .scroll-to-right, .scroll-to-top, .scroll-to-bottom {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    ${IconBox} {
+      background-color: ${theme.color.light[300]};
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.visible {
+      opacity: 0.6;
+      pointer-events: auto;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .scroll-to-left {
+    right: unset;
+    height: unset;
+  }
+  
+  .scroll-to-right {
+    left: unset;
+    height: unset;
+  }
+  
+  .scroll-to-top {
+    bottom: unset;
+    width: unset;
+  }
+  
+  .scroll-to-bottom {
+    top: unset;
+    width: unset;
+  }
+`
+
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ * 
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
+export const FadingOverflow = (
+  { children, scroll = 'none', sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props,
+) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+    const element = ref.current
+    const fadeTop = !sides || sides.includes('top')
+    const fadeRight = !sides || sides.includes('right')
+    const fadeBottom = !sides || sides.includes('bottom')
+    const fadeLeft = !sides || sides.includes('left')
+    let intervalId: number | undefined
+    const overflow = scroll === 'none' ? 'clip' : 'auto'
+    element.style.overflowX = (fadeLeft || fadeRight) ? overflow : ''
+    element.style.overflowY = (fadeTop || fadeBottom) ? overflow : ''
+    if (scroll === 'arrows' || scroll === 'wheel') element.classList.add('hidden-scroll-bars')
+
+    function stopScrolling() {
+      clearInterval(intervalId)
+    }
+
+    function checkOverflow() {
+      // masking (fading)
+      const overflowsRight = element.clientWidth < element.scrollWidth && element.scrollLeft < (element.scrollWidth - element.clientWidth)
+      const overflowsLeft = element.scrollLeft > 0
+      const overflowsBottom = element.clientHeight < element.scrollHeight
+        && element.scrollTop < (element.scrollHeight - element.clientHeight)
+      const overflowsTop = element.scrollTop > 0
+      const masksToApply: string[] = []
+      if (overflowsLeft && fadeLeft && overflowsRight && fadeRight) masksToApply.push(masks.horizontal)
+      else {
+        if (overflowsRight && fadeRight) masksToApply.push(masks.right)
+        if (overflowsLeft && fadeLeft) masksToApply.push(masks.left)
+      }
+      if (overflowsTop && fadeTop && overflowsBottom && fadeBottom) masksToApply.push(masks.vertical)
+      else {
+        if (overflowsTop && fadeTop) masksToApply.push(masks.top)
+        if (overflowsBottom && fadeBottom) masksToApply.push(masks.bottom)
+      }
+      element.style.maskImage = masksToApply.join(', ')
+
+      // arrow buttons
+      if (scroll !== 'arrows') return
+
+      function startScrolling(side: Side) {
+        stopScrolling()
+        const direction = side === 'bottom' || side === 'top' ? 'scrollTop' : 'scrollLeft'
+        const multiplier = side === 'bottom' || side === 'right' ? 1 : -1
+        intervalId = window.setInterval(() => {
+          element[direction] += SCROLL_PX * multiplier
+        }, SCROLL_INTERVAL_MS)
+      }
+  
+      const startScrollingBySide = {
+        left: () => startScrolling('left'),
+        right: () => startScrolling('right'),
+        top: () => startScrolling('top'),
+        bottom: () => startScrolling('bottom'),
+      }
+
+      const scrollToMaxBySide = {
+        left: () => element.scrollLeft = 0,
+        right: () => element.scrollLeft = element.scrollWidth - element.clientWidth,
+        top: () => element.scrollTop = 0,
+        bottom: () => element.scrollTop = element.scrollHeight - element.clientHeight,
+      }
+  
+      function enableArrowButton(side: Side) {
+        const button = element.parentNode?.querySelector(`.scroll-to-${side}`)
+        if (button?.classList.contains('visible')) return
+        button?.classList.add('visible')
+        button?.addEventListener('mouseenter', startScrollingBySide[side])
+        button?.addEventListener('mouseleave', stopScrolling)
+        button?.addEventListener('click', scrollToMaxBySide[side])
+      }
+  
+      function disableArrowButton(side: Side) {
+        const button = element.parentNode?.querySelector(`.scroll-to-${side}`)
+        if (!button?.classList.contains('visible')) return
+        button?.classList.remove('visible')
+        stopScrolling()
+        button?.removeEventListener('mouseenter', startScrollingBySide[side])
+        button?.removeEventListener('mouseleave', stopScrolling)
+        button?.removeEventListener('click', scrollToMaxBySide[side])
+      }
+      
+      if (overflowsRight && fadeRight) enableArrowButton('right')
+      else disableArrowButton('right')
+      if (overflowsLeft && fadeLeft) enableArrowButton('left')
+      else disableArrowButton('left')
+      if (overflowsTop && fadeTop) enableArrowButton('top')
+      else disableArrowButton('top')
+      if (overflowsBottom && fadeBottom) enableArrowButton('bottom')
+      else disableArrowButton('bottom')
+    }
+
+    const debouncedCheck = debounce(checkOverflow, MIN_CHECK_INTERVAL_MS)
+    const resizeObserver = new ResizeObserver(debouncedCheck)
+    resizeObserver.observe(element)
+    element.addEventListener('scroll', debouncedCheck)
+
+    return () => {
+      stopScrolling()
+      resizeObserver.disconnect()
+      element.removeEventListener('scroll', debouncedCheck)
+    }
+  }, [sides, ref.current, scroll])
+
+  useEffect(() => {
+    if (!enableHorizontalScrollWithVerticalWheel || !ref.current) return
+    const element = ref.current
+
+    function scrollWithWheel(event: WheelEvent) {
+      if (event.deltaY) {
+        element.scrollLeft += event.deltaY
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    }
+
+    element.addEventListener('wheel', scrollWithWheel)
+    return () => element.removeEventListener('wheel', scrollWithWheel)
+  }, [ref.current, enableHorizontalScrollWithVerticalWheel])
+
+  return scroll === 'arrows' ? (
+    <OverflowBox {...props} className={listToClass(['scroll-arrows', className])}>
+      <div className="content" ref={ref}>{children}</div>
+      <div className="scroll-to-left" aria-hidden><IconBox size="xs"><ChevronLeft /></IconBox></div>
+      <div className="scroll-to-right" aria-hidden><IconBox size="xs"><ChevronRight /></IconBox></div>
+      <div className="scroll-to-top" aria-hidden><IconBox size="xs"><ChevronUp /></IconBox></div>
+      <div className="scroll-to-bottom" aria-hidden><IconBox size="xs"><ChevronDown /></IconBox></div>
+    </OverflowBox>
+  ) : <OverflowBox {...props} className={className} ref={ref}>{children}</OverflowBox>
+}

package/src/components/notification/NotificationItem.tsx

@@ -31,11 +31,6 @@ interface Props {
 }
 
 const style: Styles = {
-  tooltip: {
-    '&::after': {
-      top: '25%',
-    },
-  },
   notificationDescription: {
     display: '-webkit-box',
     WebkitBoxOrient: 'vertical',
@@ -113,7 +108,9 @@ const NotificationContent = ({ notification, isSummary, onClickViewNotification
         <LazyMarkdown components={components()}>{description}</LazyMarkdown>
       </Flex>}
       {isSummary && (
-        <Text appearance="body2" mb={3} sx={style.notificationDescription}>{description}</Text>
+        <Text appearance="body2" mb={3} sx={style.notificationDescription}>
+          {handleTextMark(description)}
+        </Text>
       )}
       <Flex justifyContent="space-between">
         <Flex>
@@ -267,7 +264,7 @@ export const NotificationItem = ({ notification, isSummary, ...props }: Notifica
         />}
       </Flex>
       <Box sx={{ position: 'absolute', top: '8px', right: '8px' }}>
-        <Tooltip text={notification.committed ? t.committed : t.uncommitted} position="left" sx={style.tooltip}>
+        <Tooltip text={notification.committed ? t.committed : t.uncommitted} position="left">
           {notification.committed
             ? <IconBox role="img" aria-label={t.committed} size="xs" style={{ margin: '4px', opacity: 0.5 }}><EnvelopeOpen /></IconBox>
             : (
@@ -282,6 +279,10 @@ export const NotificationItem = ({ notification, isSummary, ...props }: Notifica
   )
 }
 
+function handleTextMark(text: string) {
+  return text.replace(/[^\p{L}\p{N}\s\p{Emoji_Presentation}:!'()]/gu, '')
+}
+
 const dictionary = {
   en: {
     ACCOUNT: 'Account',

package/src/index.ts

@@ -1,7 +1,7 @@
 export { AsyncContent } from './components/AsyncContent'
 export { BannerWarning } from './components/BannerWarning'
-export { ChatBot } from './components/ChatBot'
 export { ButtonLoading } from './components/ButtonLoading'
+export { ChatBot } from './components/ChatBot'
 export { useDateFormatter } from './hooks/date'
 export { useKeyboardControls } from './hooks/keyboard'
 export { useManualRender } from './hooks/manual-render'