@aivenio/aquarium 1.22.0 → 1.23.0

package/dist/src/utils/ContrastRatio.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Box, Template, Typography } from '../../src/molecules';
+const luminanace = (r, g, b) => {
+    const a = [r, g, b].map(function (v) {
+        v /= 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+const contrast = (rgb1, rgb2) => {
+    const luminanceFront = luminanace(rgb1[0], rgb1[1], rgb1[2]);
+    const luminanceBack = luminanace(rgb2[0], rgb2[1], rgb2[2]);
+    return luminanceBack > luminanceFront
+        ? (luminanceFront + 0.05) / (luminanceBack + 0.05)
+        : (luminanceBack + 0.05) / (luminanceFront + 0.05);
+};
+const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
+};
+/**
+ * Contrast ratios are explained here
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
+ */
+export const ContrastRatio = ({ backgroundColor, textColor }) => {
+    const rgb1 = hexToRgb(backgroundColor);
+    const rgb2 = hexToRgb(textColor);
+    if (rgb1 && rgb2) {
+        const ratio = contrast(rgb1, rgb2);
+        return (React.createElement(Template, { columns: 2, gap: "3" },
+            React.createElement(Box, { borderColor: "grey-10", display: "flex", borderWidth: 2, borderRadius: 8, padding: "2", gap: "3", justifyContent: "space-between" },
+                React.createElement("div", { style: { color: 'white' } },
+                    React.createElement("div", null, "Text"),
+                    React.createElement("div", null, textColor)),
+                React.createElement(Box, { style: { backgroundColor: textColor }, height: "7", width: "7", borderRadius: 8 })),
+            React.createElement(Box, { borderColor: "grey-10", display: "flex", borderWidth: 2, borderRadius: 8, padding: "2", gap: "3", justifyContent: "space-between" },
+                React.createElement("div", { style: { color: 'white' } },
+                    React.createElement("div", null, "Background"),
+                    React.createElement("div", null, backgroundColor)),
+                React.createElement(Box, { style: { backgroundColor }, height: "7", width: "7", borderRadius: 8 })),
+            React.createElement(Box.Flex, { alignItems: "center", gap: "2" },
+                "Small text:",
+                React.createElement(Box.Flex, null,
+                    React.createElement(Typography, { color: ratio < 1 / 4.5 ? 'success-100' : 'error-100' }, "AA"),
+                    React.createElement(Typography, { color: ratio < 1 / 7 ? 'success-100' : 'error-100' }, "A"))),
+            React.createElement(Box.Flex, { alignItems: "center", gap: "2" },
+                "Large text:",
+                React.createElement(Box.Flex, null,
+                    React.createElement(Typography, { color: ratio < 1 / 3 ? 'success-100' : 'error-100' }, "AA"),
+                    React.createElement(Typography, { color: ratio < 1 / 4.5 ? 'success-100' : 'error-100' }, "A")))));
+    }
+    return null;
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29udHJhc3RSYXRpby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy9Db250cmFzdFJhdGlvLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBTzFELE1BQU0sVUFBVSxHQUFHLENBQUMsQ0FBUyxFQUFFLENBQVMsRUFBRSxDQUFTLEVBQUUsRUFBRTtJQUNyRCxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLFVBQVUsQ0FBQztRQUNqQyxDQUFDLElBQUksR0FBRyxDQUFDO1FBQ1QsT0FBTyxDQUFDLElBQUksT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxHQUFHLEtBQUssRUFBRSxHQUFHLENBQUMsQ0FBQztJQUN2RSxDQUFDLENBQUMsQ0FBQztJQUNILE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxNQUFNLENBQUM7QUFDdkQsQ0FBQyxDQUFDO0FBSUYsTUFBTSxRQUFRLEdBQUcsQ0FBQyxJQUFTLEVBQUUsSUFBUyxFQUFFLEVBQUU7SUFDeEMsTUFBTSxjQUFjLEdBQUcsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDN0QsTUFBTSxhQUFhLEdBQUcsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFB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

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

@@ -0,0 +1,2 @@
+import { type ActionType, type LinkActionType } from '../../types/ActionType';
+export declare const isLink: (action: ActionType | LinkActionType) => action is LinkActionType;

package/dist/src/utils/link.js

@@ -0,0 +1,2 @@
+export const isLink = (action) => action.href !== undefined;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluay5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy9saW5rLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBLE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBRyxDQUFDLE1BQW1DLEVBQTRCLEVBQUUsQ0FDckYsTUFBeUIsQ0FBQyxJQUFJLEtBQUssU0FBUyxDQUFDIn0=

package/dist/src/utils/table/types.d.ts

@@ -163,5 +163,9 @@ export declare type DataTableMenuProps<R extends DataTableRow> = AllOrNone<{
      * @param index currectly selected row index
      */
     onAction: (action: string | number, row: R, index: number) => void;
+    /**
+     * Handler that is called when the menu's open state changes.
+     */
+    onMenuOpenChange?: (isOpen: boolean) => void;
 }>;
 export {};

package/dist/styles.css

@@ -519,11 +519,11 @@ img,video {
   --aquarium-colors-primary-5: #ffe8f4;
   --aquarium-colors-primary-0: #fff9fc;
   --aquarium-colors-grey-20: #d2d2d6;
+  --aquarium-colors-navy-blue-100: #30375e;
   --aquarium-colors-transparent: transparent;
   --aquarium-colors-white: white;
   --aquarium-colors-black: black;
   --aquarium-colors-current: currentColor;
-  --aquarium-colors-navy-blue-100: #30375E;
   --aquarium-box-shadow-24dp: 0px 24px 48px rgba(90, 91, 106, 0.08), 0px 12px 24px rgba(58, 58, 68, 0.08);
   --aquarium-box-shadow-16dp: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12);
   --aquarium-box-shadow-8dp: 0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16);
@@ -1672,8 +1672,8 @@ input[type='number'].no-arrows {
   border-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
 .border-navyBlue-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(48 55 94 / var(--tw-border-opacity));
+  border-color: #30375e;
+  border-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .border-grey-50 {
   border-color: #787885;
@@ -1732,8 +1732,8 @@ input[type='number'].no-arrows {
   background-color: var(--aquarium-colors-white, white);
 }
 .bg-navyBlue-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity));
+  background-color: #30375e;
+  background-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .bg-grey-5 {
   background-color: #ededf0;
@@ -2329,6 +2329,10 @@ input[type='number'].no-arrows {
   color: #d2d2d6;
   color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
+.text-navyBlue-100 {
+  color: #30375e;
+  color: var(--aquarium-colors-navyBlue-100, #30375e);
+}
 .text-transparent {
   color: transparent;
   color: var(--aquarium-colors-transparent, transparent);
@@ -2487,12 +2491,12 @@ input[type='number'].no-arrows {
   color: var(--aquarium-colors-primary-80, #e41a4a);
 }
 .checked\:border-navyBlue-100:checked {
-  --tw-border-opacity: 1;
-  border-color: rgb(48 55 94 / var(--tw-border-opacity));
+  border-color: #30375e;
+  border-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .checked\:bg-navyBlue-100:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity));
+  background-color: #30375e;
+  background-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .checked\:bg-opacity-40:checked {
   --tw-bg-opacity: 0.4;
@@ -2561,8 +2565,8 @@ input[type='number'].no-arrows {
   --tw-ring-color: var(--aquarium-colors-grey-50, #787885);
 }
 .hover\:checked\:bg-navyBlue-100:checked:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity));
+  background-color: #30375e;
+  background-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .focus\:border:focus {
   border-width: 1px;
@@ -2802,8 +2806,8 @@ input[type='number'].no-arrows {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .peer:checked~.peer-checked\:border-navyBlue-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(48 55 94 / var(--tw-border-opacity));
+  border-color: #30375e;
+  border-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .peer:checked~.peer-checked\:text-white {
   color: white;

package/dist/styles_timescaledb.css

@@ -519,11 +519,11 @@ img,video {
   --aquarium-colors-primary-5: #ffe8f4;
   --aquarium-colors-primary-0: #fff9fc;
   --aquarium-colors-grey-20: #d2d2d6;
+  --aquarium-colors-navy-blue-100: #30375e;
   --aquarium-colors-transparent: transparent;
   --aquarium-colors-white: white;
   --aquarium-colors-black: black;
   --aquarium-colors-current: currentColor;
-  --aquarium-colors-navy-blue-100: #30375E;
   --aquarium-box-shadow-24dp: 0px 24px 48px rgba(90, 91, 106, 0.08), 0px 12px 24px rgba(58, 58, 68, 0.08);
   --aquarium-box-shadow-16dp: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12);
   --aquarium-box-shadow-8dp: 0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16);
@@ -1671,8 +1671,8 @@ input[type='number'].no-arrows {
   border-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
 .border-navyBlue-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(48 55 94 / var(--tw-border-opacity));
+  border-color: #30375e;
+  border-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .border-grey-50 {
   border-color: #787885;
@@ -1731,8 +1731,8 @@ input[type='number'].no-arrows {
   background-color: var(--aquarium-colors-white, white);
 }
 .bg-navyBlue-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity));
+  background-color: #30375e;
+  background-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .bg-grey-5 {
   background-color: #ededf0;
@@ -2328,6 +2328,10 @@ input[type='number'].no-arrows {
   color: #fff9fc;
   color: var(--aquarium-colors-primary-0, #f9fdff);
 }
+.text-navyBlue-100 {
+  color: #30375e;
+  color: var(--aquarium-colors-navyBlue-100, #30375e);
+}
 .text-transparent {
   color: transparent;
   color: var(--aquarium-colors-transparent, transparent);
@@ -2486,12 +2490,12 @@ input[type='number'].no-arrows {
   color: var(--aquarium-colors-primary-80, #0788d1);
 }
 .checked\:border-navyBlue-100:checked {
-  --tw-border-opacity: 1;
-  border-color: rgb(48 55 94 / var(--tw-border-opacity));
+  border-color: #30375e;
+  border-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .checked\:bg-navyBlue-100:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity));
+  background-color: #30375e;
+  background-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .checked\:bg-opacity-40:checked {
   --tw-bg-opacity: 0.4;
@@ -2560,8 +2564,8 @@ input[type='number'].no-arrows {
   --tw-ring-color: var(--aquarium-colors-grey-50, #787885);
 }
 .hover\:checked\:bg-navyBlue-100:checked:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity));
+  background-color: #30375e;
+  background-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .focus\:border:focus {
   border-width: 1px;
@@ -2801,8 +2805,8 @@ input[type='number'].no-arrows {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .peer:checked~.peer-checked\:border-navyBlue-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(48 55 94 / var(--tw-border-opacity));
+  border-color: #30375e;
+  border-color: var(--aquarium-colors-navyBlue-100, #30375e);
 }
 .peer:checked~.peer-checked\:text-white {
   color: white;