@aivenio/aquarium 2.3.2 → 2.5.0

package/dist/system.mjs

@@ -5930,6 +5930,61 @@ var tokens_default = {
       intense: "rgba(197,0,1,1)"
     }
   },
+  chartColors: {
+    default: "rgba(180, 180, 187, 1)",
+    primaryCategorical: {
+      "0": "rgba(88, 101, 205, 1)",
+      "1": "rgba(255, 53, 84, 1)",
+      "2": "rgba(40, 180, 244, 1)",
+      "3": "rgba(249, 106, 2, 1)",
+      "4": "rgba(0, 179, 0, 1)",
+      "5": "rgba(255, 193, 7, 1)"
+    },
+    secondaryCategorical: {
+      "0": "rgba(53, 69, 190, 1)",
+      "1": "rgba(253, 159, 0, 1)",
+      "2": "rgba(255, 53, 84, 1)",
+      "3": "rgba(0, 179, 0, 1)",
+      "4": "rgba(243, 88, 13, 1)",
+      "5": "rgba(3, 153, 227, 1)",
+      "6": "rgba(231, 0, 0, 1)",
+      "7": "rgba(34, 47, 149, 1)",
+      "8": "rgba(255, 144, 3, 1)",
+      "9": "rgba(228, 26, 74, 1)",
+      "10": "rgba(0, 159, 0, 1)",
+      "11": "rgba(235, 70, 16, 1)",
+      "12": "rgba(1, 116, 186, 1)",
+      "13": "rgba(197, 0, 1, 1)",
+      "14": "rgba(225, 29, 22, 1)",
+      "15": "rgba(170, 0, 0, 1)",
+      "16": "rgba(2, 86, 154, 1)",
+      "17": "rgba(167, 0, 69, 1)",
+      "18": "rgba(0, 111, 0, 1)",
+      "19": "rgba(254, 109, 0, 1)",
+      "20": "rgba(14, 22, 82, 1)",
+      "21": "rgba(88, 101, 205, 1)",
+      "22": "rgba(255, 179, 0, 1)",
+      "23": "rgba(255, 82, 117, 1)",
+      "24": "rgba(0, 195, 0, 1)",
+      "25": "rgba(249, 106, 2, 1)",
+      "26": "rgba(40, 180, 244, 1)",
+      "27": "rgba(230, 39, 40, 1)",
+      "28": "rgba(129, 142, 236, 1)",
+      "29": "rgba(255, 193, 7, 1)",
+      "30": "rgba(255, 111, 148, 1)",
+      "31": "rgba(96, 219, 87, 1)",
+      "32": "rgba(252, 135, 26, 1)",
+      "33": "rgba(127, 209, 247, 1)",
+      "34": "rgba(224, 80, 79, 1)",
+      "35": "rgba(185, 197, 239, 1)",
+      "36": "rgba(253, 212, 77, 1)",
+      "37": "rgba(255, 169, 201, 1)",
+      "38": "rgba(137, 235, 128, 1)",
+      "39": "rgba(250, 178, 110, 1)",
+      "40": "rgba(180, 229, 251, 1)",
+      "41": "rgba(255, 173, 179, 1)"
+    }
+  },
   colors: {
     white: "white",
     black: "black",
@@ -10192,6 +10247,14 @@ var Wrapper = React53.forwardRef(
   }
 );
 
+// src/molecules/Select/utils.ts
+var isOptionGroup = (val) => {
+  return (val == null ? void 0 : val.label) !== void 0 && Array.isArray(val == null ? void 0 : val.options);
+};
+var hasOptionGroups = (val) => {
+  return val.some(isOptionGroup);
+};
+
 // src/molecules/Combobox/Combobox.tsx
 var import_smallCross2 = __toESM(require_smallCross());
 var ComboboxBase = (_a) => {
@@ -10241,18 +10304,19 @@ var ComboboxBase = (_a) => {
     "readOnly"
   ]);
   var _a2;
+  const allOptions = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
   const popoverRef = useRef6(null);
   const targetRef = useRef6(null);
   const menuRef = useRef6(null);
   const inputRef = useRef6(null);
-  const [inputItems, setInputItems] = useState6(options);
+  const [inputItems, setInputItems] = useState6(allOptions);
   const [hasFocus, setFocus] = useState6(false);
   const updateInputItems = (query, selected) => {
-    const keys = typeof options[0] === "string" ? void 0 : optionKeys;
+    const keys = typeof allOptions[0] === "string" ? void 0 : optionKeys;
     if (selected && itemToString(selected) === query) {
-      setInputItems(options);
+      setInputItems(allOptions);
     } else {
-      setInputItems(query ? matchSorter(options, query, { keys }) : options);
+      setInputItems(query ? matchSorter(allOptions, query, { keys }) : allOptions);
     }
   };
   const {
@@ -10304,6 +10368,20 @@ var ComboboxBase = (_a) => {
     toggle: toggleMenu,
     setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
   };
+  const renderGroup = (group) => {
+    const groupInputItems = group.options.filter((o) => inputItems.includes(o));
+    return groupInputItems.length > 0 ? /* @__PURE__ */ React54.createElement(React54.Fragment, {
+      key: group.label
+    }, /* @__PURE__ */ React54.createElement(Select.Group, null, group.label), groupInputItems.map((opt) => renderItem(opt, inputItems.indexOf(opt)))) : null;
+  };
+  const renderItem = (item, index) => {
+    var _a3;
+    return /* @__PURE__ */ React54.createElement(Select.Item, __spreadValues({
+      key: (_a3 = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a3 : itemToString(item),
+      selected: item === selectedItem,
+      highlighted: index === highlightedIndex || item === selectedItem
+    }, getItemProps({ item, index })), renderOption(item));
+  };
   useEffect6(() => {
     updateInputItems(inputValue, selectedItem);
   }, [JSON.stringify(options)]);
@@ -10344,19 +10422,18 @@ var ComboboxBase = (_a) => {
   })), !readOnly && /* @__PURE__ */ React54.createElement(Box.Flex, {
     alignItems: "center",
     gap: "2"
-  }, !!inputProps.value && !disabled && /* @__PURE__ */ React54.createElement("div", {
-    className: tw("group-hover:opacity-100", {
+  }, !!inputProps.value && !disabled && /* @__PURE__ */ React54.createElement(Button.Icon, {
+    UNSAFE_className: tw("group-hover:opacity-100 py-1", {
       "opacity-0": !hasFocus,
       "opacity-100": hasFocus
-    })
-  }, /* @__PURE__ */ React54.createElement(Button.Icon, {
+    }),
     icon: import_smallCross2.default,
     onClick: () => selectItem(null),
     onFocus: () => setFocus(true),
     onBlur: () => setFocus(false),
     "aria-label": "Clear selection",
     dense: true
-  })), /* @__PURE__ */ React54.createElement(Select.Toggle, __spreadValues({
+  }), /* @__PURE__ */ React54.createElement(Select.Toggle, __spreadValues({
     hasFocus,
     isOpen
   }, getToggleButtonProps({ disabled }))))), isOpen && /* @__PURE__ */ React54.createElement(PopoverOverlay, {
@@ -10369,14 +10446,7 @@ var ComboboxBase = (_a) => {
     style: { width: (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth }
   }, /* @__PURE__ */ React54.createElement(Select.Menu, __spreadValues({
     maxHeight
-  }, menuProps), hasNoResults && /* @__PURE__ */ React54.createElement(Select.NoResults, null, emptyState), inputItems.map((item, index) => {
-    var _a3;
-    return /* @__PURE__ */ React54.createElement(Select.Item, __spreadValues({
-      key: (_a3 = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a3 : itemToString(item),
-      selected: item === selectedItem,
-      highlighted: index === highlightedIndex || item === selectedItem
-    }, getItemProps({ item, index })), renderOption(item));
-  }))));
+  }, menuProps), hasNoResults && /* @__PURE__ */ React54.createElement(Select.NoResults, null, emptyState), inputItems.length > 0 && !hasOptionGroups(options) && inputItems.map(renderItem), inputItems.length > 0 && hasOptionGroups(options) && options.map(renderGroup))));
 };
 var ComboboxBaseSkeleton = () => /* @__PURE__ */ React54.createElement(Skeleton, {
   height: 38
@@ -10655,7 +10725,7 @@ var hasIconProperty = (val) => {
   var _a;
   return typeof val === "string" || ((_a = val == null ? void 0 : val.icon) == null ? void 0 : _a.body) !== void 0;
 };
-var hasOptionGroups = (val) => {
+var hasOptionGroups2 = (val) => {
   return !val.some((opt) => (opt == null ? void 0 : opt.label) === void 0 || !isArray(opt == null ? void 0 : opt.options));
 };
 var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
@@ -10737,7 +10807,7 @@ var _SelectBase = (props) => {
   const [hasFocus, setFocus] = useState8(false);
   const targetRef = useRef7(null);
   const menuRef = useRef7(null);
-  const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
+  const items = hasOptionGroups2(options) ? options.flatMap((g) => g.options) : options;
   const findItemByValue = (val) => {
     if (val === null) {
       return null;
@@ -10818,7 +10888,7 @@ var _SelectBase = (props) => {
     style: { width: (_b = targetRef.current) == null ? void 0 : _b.offsetWidth }
   }, /* @__PURE__ */ React58.createElement(Select.Menu, __spreadValues({
     maxHeight
-  }, menuProps), options.length === 0 && /* @__PURE__ */ React58.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Select.Divider, {
+  }, menuProps), options.length === 0 && /* @__PURE__ */ React58.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups2(options) && options.map(renderItem), options.length > 0 && hasOptionGroups2(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Select.Divider, {
     onMouseOver: () => setHighlightedIndex(-1)
   }), actions.map((act, index) => /* @__PURE__ */ React58.createElement(Select.ActionItem, __spreadProps(__spreadValues({
     key: `${index}`
@@ -13128,7 +13198,7 @@ var import_chevronLeft4 = __toESM(require_chevronLeft());
 var import_chevronRight4 = __toESM(require_chevronRight());
 var cellStyles = tv4({
   extend: focusRing,
-  base: "w-8 h-8 typography-small cursor-default rounded flex items-center justify-center",
+  base: "w-8 h-8 typography-small cursor-default rounded-md flex items-center justify-center outside-month:hidden",
   variants: {
     isSelected: {
       false: "text-default hover:bg-default pressed:bg-intense",
@@ -13307,7 +13377,7 @@ import {
 import { tv as tv5 } from "tailwind-variants";
 var cell = tv5({
   extend: focusRing,
-  base: "w-full h-full flex items-center justify-center rounded text-default",
+  base: "w-full h-full flex items-center justify-center rounded-md text-default",
   variants: {
     selectionState: {
       none: "group-hover:bg-default group-pressed:bg-intense",
@@ -13335,9 +13405,9 @@ function RangeCalendar(props) {
     date,
     className: tw(
       "group w-8 h-8 typography-small outline outline-0 cursor-default",
-      "outside-month:text-inactive selected:bg-primary-default",
+      "outside-month:hidden selected:bg-primary-default",
       "invalid:selected:bg-danger-default",
-      "selection-start:rounded-s selection-end:rounded-e"
+      "selection-start:rounded-s-md selection-end:rounded-e-md"
     )
   }, (_a) => {
     var _b = _a, { formattedDate, isSelected, isSelectionStart, isSelectionEnd } = _b, rest = __objRest(_b, ["formattedDate", "isSelected", "isSelectionStart", "isSelectionEnd"]);
@@ -14997,19 +15067,11 @@ import React105, { useEffect as useEffect10, useRef as useRef13, useState as use
 import { ariaHideOutside as ariaHideOutside2 } from "@react-aria/overlays";
 import { useId as useId14 } from "@react-aria/utils";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
-import isArray4 from "lodash/isArray";
 import isEqual from "lodash/isEqual";
 import isNil2 from "lodash/isNil";
-import isObject2 from "lodash/isObject";
 import omit16 from "lodash/omit";
 import omitBy from "lodash/omitBy";
 import { matchSorter as matchSorter2 } from "match-sorter";
-var isOptionGroup = (option) => {
-  return isObject2(option) && "options" in option && isArray4(option.options);
-};
-var hasOptionGroups2 = (options) => {
-  return options.some(isOptionGroup);
-};
 var MultiSelectBase = (_a) => {
   var _b = _a, {
     id,
@@ -15077,14 +15139,14 @@ var MultiSelectBase = (_a) => {
   );
   const keys = typeof options[0] === "string" ? void 0 : optionKeys;
   const selectedItemsAsStrings = selectedItems.map(itemToString);
-  const filteredOptions = hasOptionGroups2(options) ? options.map((option) => __spreadProps(__spreadValues({}, option), {
+  const filteredOptions = hasOptionGroups(options) ? options.map((option) => __spreadProps(__spreadValues({}, option), {
     options: (inputValue ? matchSorter2(option.options, inputValue, { keys }) : option.options).filter(
       (opt) => !selectedItemsAsStrings.includes(itemToString(opt))
     )
   })) : (inputValue ? matchSorter2(options, inputValue, { keys }) : options).filter(
     (opt) => !selectedItemsAsStrings.includes(itemToString(opt))
   );
-  const flattenedOptions = hasOptionGroups2(filteredOptions) ? filteredOptions.flatMap((group) => group.options) : filteredOptions;
+  const flattenedOptions = hasOptionGroups(filteredOptions) ? filteredOptions.flatMap((group) => group.options) : filteredOptions;
   const {
     isOpen,
     openMenu,
@@ -16096,6 +16158,7 @@ var Section4 = (props) => {
   const _collapsed = title ? props.collapsed : void 0;
   const _defaultCollapsed = title ? (_b = props.defaultCollapsed) != null ? _b : false : false;
   const [isCollapsed, setCollapsed] = React121.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
+  const [isResting, setResting] = React121.useState(true);
   const [ref, { height }] = useMeasure();
   const toggleAreaRef = useRef14(null);
   const menu = title ? (_c = props.menu) != null ? _c : void 0 : void 0;
@@ -16124,7 +16187,9 @@ var Section4 = (props) => {
     config: {
       duration: 150
     },
-    immediate: !_collapsible
+    immediate: !_collapsible,
+    onStart: () => setResting(false),
+    onRest: () => setResting(true)
   }), { transform } = _f, spring = __objRest(_f, ["transform"]);
   const toggleId = useId17();
   const regionId = useId17();
@@ -16178,7 +16243,7 @@ var Section4 = (props) => {
     id: regionId,
     "aria-hidden": _collapsible ? isCollapsed ? true : void 0 : void 0,
     style: spring,
-    className: tw({ "overflow-hidden": _collapsible })
+    className: tw({ "overflow-hidden": _collapsible && (isCollapsed || !isResting) })
   }, /* @__PURE__ */ React121.createElement("div", {
     ref
   }, hasTabs ? /* @__PURE__ */ React121.createElement(SectionTabs, __spreadProps(__spreadValues({}, children.props), {

package/dist/tokens.json

@@ -93,6 +93,61 @@
       "intense": "rgba(197,0,1,1)"
     }
   },
+  "chartColors": {
+    "default": "rgba(180, 180, 187, 1)",
+    "primaryCategorical": {
+      "0": "rgba(88, 101, 205, 1)",
+      "1": "rgba(255, 53, 84, 1)",
+      "2": "rgba(40, 180, 244, 1)",
+      "3": "rgba(249, 106, 2, 1)",
+      "4": "rgba(0, 179, 0, 1)",
+      "5": "rgba(255, 193, 7, 1)"
+    },
+    "secondaryCategorical": {
+      "0": "rgba(53, 69, 190, 1)",
+      "1": "rgba(253, 159, 0, 1)",
+      "2": "rgba(255, 53, 84, 1)",
+      "3": "rgba(0, 179, 0, 1)",
+      "4": "rgba(243, 88, 13, 1)",
+      "5": "rgba(3, 153, 227, 1)",
+      "6": "rgba(231, 0, 0, 1)",
+      "7": "rgba(34, 47, 149, 1)",
+      "8": "rgba(255, 144, 3, 1)",
+      "9": "rgba(228, 26, 74, 1)",
+      "10": "rgba(0, 159, 0, 1)",
+      "11": "rgba(235, 70, 16, 1)",
+      "12": "rgba(1, 116, 186, 1)",
+      "13": "rgba(197, 0, 1, 1)",
+      "14": "rgba(225, 29, 22, 1)",
+      "15": "rgba(170, 0, 0, 1)",
+      "16": "rgba(2, 86, 154, 1)",
+      "17": "rgba(167, 0, 69, 1)",
+      "18": "rgba(0, 111, 0, 1)",
+      "19": "rgba(254, 109, 0, 1)",
+      "20": "rgba(14, 22, 82, 1)",
+      "21": "rgba(88, 101, 205, 1)",
+      "22": "rgba(255, 179, 0, 1)",
+      "23": "rgba(255, 82, 117, 1)",
+      "24": "rgba(0, 195, 0, 1)",
+      "25": "rgba(249, 106, 2, 1)",
+      "26": "rgba(40, 180, 244, 1)",
+      "27": "rgba(230, 39, 40, 1)",
+      "28": "rgba(129, 142, 236, 1)",
+      "29": "rgba(255, 193, 7, 1)",
+      "30": "rgba(255, 111, 148, 1)",
+      "31": "rgba(96, 219, 87, 1)",
+      "32": "rgba(252, 135, 26, 1)",
+      "33": "rgba(127, 209, 247, 1)",
+      "34": "rgba(224, 80, 79, 1)",
+      "35": "rgba(185, 197, 239, 1)",
+      "36": "rgba(253, 212, 77, 1)",
+      "37": "rgba(255, 169, 201, 1)",
+      "38": "rgba(137, 235, 128, 1)",
+      "39": "rgba(250, 178, 110, 1)",
+      "40": "rgba(180, 229, 251, 1)",
+      "41": "rgba(255, 173, 179, 1)"
+    }
+  },
   "colors": {
     "white": "white",
     "black": "black",