@aivenio/aquarium 6.2.0 → 6.3.0

package/dist/src/molecules/Timeline/Timeline.js

@@ -4,6 +4,7 @@ import { Icon } from '../../../src/molecules/Icon/Icon';
 import { Typography } from '../../../src/molecules/Typography/Typography';
 import { Skeleton } from '../../../src/atoms/Skeleton/Skeleton';
 import { Timeline as BaseTimeline } from '../../../src/atoms/Timeline/Timeline';
+import { VisuallyHidden } from '../../../src/atoms/VisuallyHidden/VisuallyHidden';
 import { isComponentType } from '../../../types/utils';
 import danger from '../../../src/icons/error';
 import loading from '../../../src/icons/loading';
@@ -11,14 +12,24 @@ import tickCircle from '../../../src/icons/tickCircle';
 import time from '../../../src/icons/time';
 import warning from '../../../src/icons/warningSign';
 const TimelineItem = () => null;
-export const Timeline = ({ children }) => (React.createElement("div", { className: "Aquarium-Timeline" }, React.Children.map(children, (item) => {
+export const Timeline = ({ children, 'aria-label': ariaLabel }) => (React.createElement("ol", { className: "Aquarium-Timeline", "aria-label": ariaLabel }, React.Children.map(children, (item) => {
     if (!isComponentType(item, TimelineItem)) {
         throw new Error('<Timeline> can only have <Timeline.Item> components as children');
     }
     else {
         const { props, key } = item;
         return (React.createElement(BaseTimeline, { key: key !== null && key !== void 0 ? key : props.title },
-            React.createElement(BaseTimeline.Separator, null, props.variant === 'error' ? (React.createElement(Icon, { icon: danger, color: "danger-default" })) : props.variant === 'warning' ? (React.createElement(Icon, { icon: warning, color: "warning-default" })) : props.variant === 'info' ? (React.createElement(Icon, { icon: time, color: "info-default" })) : props.variant === 'success' ? (React.createElement(Icon, { icon: tickCircle, color: "success-default" })) : props.variant === 'loading' ? (React.createElement(Icon, { icon: loading, color: "default" })) : (React.createElement(BaseTimeline.Separator.Dot, null))),
+            React.createElement(BaseTimeline.Separator, null, props.variant === 'error' ? (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, null, "Error: "),
+                React.createElement(Icon, { icon: danger, color: "danger-default" }))) : props.variant === 'warning' ? (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, null, "Warning: "),
+                React.createElement(Icon, { icon: warning, color: "warning-default" }))) : props.variant === 'info' ? (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, null, "Info: "),
+                React.createElement(Icon, { icon: time, color: "info-default" }))) : props.variant === 'success' ? (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, null, "Success: "),
+                React.createElement(Icon, { icon: tickCircle, color: "success-default" }))) : props.variant === 'loading' ? (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, null, "Loading: "),
+                React.createElement(Icon, { icon: loading, color: "default" }))) : (React.createElement(BaseTimeline.Separator.Dot, null))),
             React.createElement(Typography.Small, { color: "muted" }, props.title),
             React.createElement(BaseTimeline.LineContainer, null,
                 React.createElement(BaseTimeline.LineContainer.Line, null)),
@@ -37,8 +48,9 @@ const TimelineItemSkeleton = () => (React.createElement(BaseTimeline, null,
             React.createElement(Skeleton, { height: 32, width: "100%" }),
             React.createElement(Skeleton, { height: 32, width: "73%" }),
             React.createElement(Skeleton, { height: 32, width: "80%" })))));
-const TimelineSkeleton = ({ items = 3 }) => (React.createElement("div", null, Array.from({ length: items }).map((_, key) => (React.createElement(TimelineItemSkeleton, { key: key })))));
+const TimelineSkeleton = ({ items = 3 }) => (React.createElement("ol", { className: "Aquarium-Timeline", "aria-busy": "true", "aria-label": "Loading timeline" },
+    React.createElement("div", { "aria-hidden": true }, Array.from({ length: items }).map((_, key) => (React.createElement(TimelineItemSkeleton, { key: key }))))));
 Timeline.Item = TimelineItem;
 Timeline.Skeleton = TimelineSkeleton;
 Timeline.Skeleton.displayName = 'Timeline.Skeleton';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL1RpbWVsaW5lL1RpbWVsaW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzVDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFFakUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxRQUFRLElBQUksWUFBWSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFdkUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUU5QyxPQUFPLE1BQU0sTUFBTSxpQkFBaUIsQ0FBQztBQUNyQyxPQUFPLE9BQU8sTUFBTSxtQkFBbUIsQ0FBQztBQUN4QyxPQUFPLFVBQVUsTUFBTSxzQkFBc0IsQ0FBQztBQUM5QyxPQUFPLElBQUksTUFBTSxnQkFBZ0IsQ0FBQztBQUNsQyxPQUFPLE9BQU8sTUFBTSx1QkFBdUIsQ0FBQztBQWlCNUMsTUFBTSxZQUFZLEdBQWdDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQztBQVE3RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQTBCLENBQUMsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDL0QsNkJBQUssU0FBUyxFQUFDLG1CQUFtQixJQUMvQixLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxJQUFJLEVBQUUsRUFBRTtJQUNyQyxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksRUFBRSxZQUFZLENBQUMsRUFBRSxDQUFDO1FBQ3pDLE1BQU0sSUFBSSxLQUFLLENBQUMsaUVBQWlFLENBQUMs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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL1RpbWVsaW5lL1RpbWVsaW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzVDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFFakUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxRQUFRLElBQUksWUFBWSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDdkUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBRXpFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFFOUMsT0FBTyxNQUFNLE1BQU0saUJBQWlCLENBQUM7QUFDckMsT0FBTyxPQUFPLE1BQU0sbUJBQW1CLENBQUM7QUFDeEMsT0FBTyxVQUFVLE1BQU0sc0JBQXNCLENBQUM7QUFDOUMsT0FBTyxJQUFJLE1BQU0sZ0JBQWdCLENBQUM7QUFDbEMsT0FBTyxPQUFPLE1BQU0sdUJBQXVCLENBQUM7QUFnQjVDLE1BQU0sWUFBWSxHQUFnQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUM7QUFTN0QsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUEwQixDQUFDLEVBQUUsUUFBUSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDeEYsNEJBQUksU0FBUyxFQUFDLG1CQUFtQixnQkFBYSxTQUFTLElBQ3BELEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxDQUFDLElBQUksRUFBRSxFQUFFO0lBQ3JDLElBQUksQ0FBQyxlQUFl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

package/dist/src/tokens/tokens.json

@@ -189,6 +189,7 @@
     "code": {
         "background": "rgba(250,250,250,1)",
         "text": "rgba(45,46,48,1)",
+        "variable": "rgba(123,45,139,1)",
         "keyword": "rgba(202, 33, 101, 1)",
         "string": "rgba(0, 127, 115, 1)",
         "function": "rgba(9, 128, 193, 1)",

package/dist/src/utils/useScrollFade.d.ts

@@ -0,0 +1,17 @@
+type ScrollFade = {
+    containerRef: React.RefCallback<HTMLElement>;
+    topSentinelRef: React.RefObject<HTMLDivElement | null>;
+    bottomSentinelRef: React.RefObject<HTMLDivElement | null>;
+    showTopFade: boolean;
+    showBottomFade: boolean;
+};
+/**
+ * Uses IntersectionObserver with sentinel elements to determine whether
+ * top/bottom scroll fade indicators should be visible.
+ *
+ * When the top sentinel scrolls out of view the top fade appears;
+ * when the bottom sentinel scrolls out of view the bottom fade appears.
+ * If content doesn't overflow, both sentinels stay visible and no fades show.
+ */
+export declare const useScrollFade: () => ScrollFade;
+export {};

package/dist/src/utils/useScrollFade.js

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * Uses IntersectionObserver with sentinel elements to determine whether
+ * top/bottom scroll fade indicators should be visible.
+ *
+ * When the top sentinel scrolls out of view the top fade appears;
+ * when the bottom sentinel scrolls out of view the bottom fade appears.
+ * If content doesn't overflow, both sentinels stay visible and no fades show.
+ */
+export const useScrollFade = () => {
+    const topSentinelRef = useRef(null);
+    const bottomSentinelRef = useRef(null);
+    const observerRef = useRef(null);
+    const [showTopFade, setShowTopFade] = useState(false);
+    const [showBottomFade, setShowBottomFade] = useState(false);
+    const containerRef = useCallback((container) => {
+        var _a;
+        (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (!container) {
+            return;
+        }
+        observerRef.current = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.target === topSentinelRef.current) {
+                    setShowTopFade(!entry.isIntersecting);
+                }
+                else if (entry.target === bottomSentinelRef.current) {
+                    setShowBottomFade(!entry.isIntersecting);
+                }
+            });
+        }, { root: container, threshold: 0 });
+        if (topSentinelRef.current) {
+            observerRef.current.observe(topSentinelRef.current);
+        }
+        if (bottomSentinelRef.current) {
+            observerRef.current.observe(bottomSentinelRef.current);
+        }
+    }, []);
+    useEffect(() => {
+        return () => { var _a; return (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); };
+    }, []);
+    return { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade };
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU2Nyb2xsRmFkZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy91c2VTY3JvbGxGYWRlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFVakU7Ozs7Ozs7R0FPRztBQUNILE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxHQUFlLEVBQUU7SUFDNUMsTUFBTSxjQUFjLEdBQUcsTUFBTSxDQUF3QixJQUFJLENBQUMsQ0FBQztJQUMzRCxNQUFNLGlCQUFpQixHQUFHLE1BQU0sQ0FBd0IsSUFBSSxDQUFDLENBQUM7SUFDOUQsTUFBTSxXQUFXLEdBQUcsTUFBTSxDQUE4QixJQUFJLENBQUMsQ0FBQztJQUU5RCxNQUFNLENBQUMsV0FBVyxFQUFFLGNBQWMsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN0RCxNQUFNLENBQUMsY0FBYyxFQUFFLGlCQUFpQixDQUFDLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBRTVELE1BQU0sWUFBWSxHQUFHLFdBQVcsQ0FBQyxDQUFDLFNBQTZCLEVBQUUsRUFBRTs7UUFDakUsTUFBQSxXQUFXLENBQUMsT0FBTywwQ0FBRSxVQUFVLEVBQUUsQ0FBQztRQUVsQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDZixPQUFPO1FBQ1QsQ0FBQztRQUVELFdBQVcsQ0FBQyxPQUFPLEdBQUcsSUFBSSxvQkFBb0IsQ0FDNUMsQ0FBQyxPQUFPLEVBQUUsRUFBRTtZQUNWLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtnQkFDeEIsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLGNBQWMsQ0FBQyxPQUFPLEVBQUUsQ0FBQztvQkFDNUMsY0FBYyxDQUFDLENBQUMsS0FBSyxDQUFDLGNBQWMsQ0FBQyxDQUFDO2dCQUN4QyxDQUFDO3FCQUFNLElBQUksS0FBSyxDQUFDLE1BQU0sS0FBSyxpQkFBaUIsQ0FBQyxPQUFPLEVBQUUsQ0FBQztvQkFDdEQsaUJBQWlCLENBQUMsQ0FBQyxLQUFLLENBQUMsY0FBYyxDQUFDLENBQUM7Z0JBQzNDLENBQUM7WUFDSCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsRUFDRCxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRSxDQUNsQyxDQUFDO1FBRUYsSUFBSSxjQUFjLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDM0IsV0FBVyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3RELENBQUM7UUFDRCxJQUFJLGlCQUFpQixDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQzlCLFdBQVcsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3pELENBQUM7SUFDSCxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFFUCxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ2IsT0FBTyxHQUFHLEVBQUUsV0FBQyxPQUFBLE1BQUEsV0FBVyxDQUFDLE9BQU8sMENBQUUsVUFBVSxFQUFFLENBQUEsRUFBQSxDQUFDO0lBQ2pELENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUVQLE9BQU8sRUFBRSxZQUFZLEVBQUUsY0FBYyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxjQUFjLEVBQUUsQ0FBQztBQUMxRixDQUFDLENBQUMifQ==

package/dist/styles.css

@@ -507,6 +507,7 @@ video {
   --aquarium-chart-colors-sequential-300: rgba(0, 150, 147, 1);
   --aquarium-chart-colors-sequential-400: rgba(0, 98, 96, 1);
   --aquarium-chart-colors-sequential-500: rgba(0, 74, 72, 1);
+  --aquarium-code-variable: rgba(123,45,139,1); /** Code block variable and identifiers */
   --aquarium-code-keyword: rgba(202, 33, 101, 1); /** Syntax: keyword */
   --aquarium-code-string: rgba(0, 127, 115, 1); /** Syntax: string */
   --aquarium-code-function: rgba(9, 128, 193, 1); /** Syntax: function */
@@ -1088,8 +1089,8 @@ video {
 .top-\[3px\]{
   top: 3px;
 }
-.top-\[47px\]{
-  top: 47px;
+.top-\[43px\]{
+  top: 43px;
 }
 .-z-10{
   z-index: -10;
@@ -1175,6 +1176,9 @@ video {
   margin-top: 12px;
   margin-bottom: 12px;
 }
+.-mt-1px{
+  margin-top: -1px;
+}
 .mb-1{
   margin-bottom: 2px;
 }
@@ -3843,6 +3847,7 @@ code{
   --aquarium-code-background: var(--aquarium-background-color-body);
   --aquarium-code-text: var(--aquarium-text-color-default);
   --aquarium-code-keyword: rgba(223, 86, 242, 1);
+  --aquarium-code-variable: rgba(192,132,252, 1);
   --aquarium-code-string: rgba(95, 250, 116, 1);
   --aquarium-code-function: rgba(89, 210, 244, 1);
   --aquarium-code-number: rgba(255, 229, 94, 1);
@@ -4059,6 +4064,10 @@ code{
   content: var(--tw-content);
   z-index: 10;
 }
+.before\:-mb-5::before{
+  content: var(--tw-content);
+  margin-bottom: -16px;
+}
 .before\:h-5::before{
   content: var(--tw-content);
   height: 16px;
@@ -4112,9 +4121,9 @@ code{
   content: var(--tw-content);
   position: sticky;
 }
-.after\:bottom-3::after{
+.after\:bottom-0::after{
   content: var(--tw-content);
-  bottom: 8px;
+  bottom: 0px;
 }
 .after\:left-0::after{
   content: var(--tw-content);
@@ -4124,9 +4133,13 @@ code{
   content: var(--tw-content);
   z-index: 10;
 }
-.after\:h-5::after{
+.after\:-mt-\[60px\]::after{
   content: var(--tw-content);
-  height: 16px;
+  margin-top: -60px;
+}
+.after\:h-\[60px\]::after{
+  content: var(--tw-content);
+  height: 60px;
 }
 .after\:flex-shrink-0::after{
   content: var(--tw-content);