@aivenio/aquarium 2.11.0 → 2.12.0

package/dist/system.cjs

@@ -4668,7 +4668,15 @@ var Input = import_react3.default.forwardRef((_a, ref) => {
 var Menu = import_react3.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { maxHeight = "450px", className, children } = _b, props = __objRest(_b, ["maxHeight", "className", "children"]);
-    return /* @__PURE__ */ import_react3.default.createElement("ul", __spreadValues({ ref, style: { maxHeight }, className: classNames(className, tw("text-default bg-body")) }, props), children);
+    return /* @__PURE__ */ import_react3.default.createElement(
+      "ul",
+      __spreadValues({
+        ref,
+        style: { maxHeight },
+        className: classNames(className, tw("text-default bg-body overflow-y-auto"))
+      }, props),
+      children
+    );
   }
 );
 var NoResults = import_react3.default.forwardRef(
@@ -10133,6 +10141,7 @@ var ComboboxBase = (_a) => {
     createOption,
     renderOption = (opt) => itemToString(opt),
     isOptionDisabled = isOptionDisabledBuiltin,
+    clearSelectionEnabled = true,
     getValue = defaultGetValue,
     getOptionKey,
     defaultValue,
@@ -10156,6 +10165,7 @@ var ComboboxBase = (_a) => {
     "createOption",
     "renderOption",
     "isOptionDisabled",
+    "clearSelectionEnabled",
     "getValue",
     "getOptionKey",
     "defaultValue",
@@ -10306,7 +10316,7 @@ var ComboboxBase = (_a) => {
         onKeyUp: (e) => e.stopPropagation()
       })
     ),
-    !readOnly && /* @__PURE__ */ import_react60.default.createElement(Box.Flex, { alignItems: "center", gap: "2" }, !!inputProps.value && !disabled && /* @__PURE__ */ import_react60.default.createElement(
+    !readOnly && /* @__PURE__ */ import_react60.default.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !!inputProps.value && !disabled && /* @__PURE__ */ import_react60.default.createElement(
       Button.Icon,
       {
         UNSAFE_className: tw("group-hover:opacity-100 py-1", {
@@ -11909,7 +11919,7 @@ var getDisabledItemKeys = (children) => {
     }
     return null;
   });
-  return keys.flat().filter((key) => key !== null);
+  return (keys != null ? keys : []).flat().filter((key) => key !== null);
 };
 
 // src/utils/object.ts
@@ -13099,8 +13109,8 @@ var PickerTimeField = ({ granularity }) => {
     {
       labelText: "Time",
       granularity: granularity !== "day" ? granularity : void 0,
-      value: state.timeValue,
-      onChange: state.setTimeValue,
+      value: state == null ? void 0 : state.timeValue,
+      onChange: (value) => value && (state == null ? void 0 : state.setTimeValue(value)),
       reserveSpaceForError: false
     }
   );
@@ -13211,15 +13221,15 @@ var createDateRangePickerBase = (variant) => (_a) => {
   );
 };
 var PickerTimeField2 = ({ granularity, part }) => {
-  var _a;
-  const { timeRange, setTime } = import_react93.default.useContext(import_react_aria_components10.DateRangePickerStateContext);
+  var _a, _b;
+  const ctx = import_react93.default.useContext(import_react_aria_components10.DateRangePickerStateContext);
   return /* @__PURE__ */ import_react93.default.createElement(
     TimeField,
     {
       labelText: part === "start" ? "Start time" : "End time",
       granularity: granularity !== "day" ? granularity : void 0,
-      value: (_a = timeRange == null ? void 0 : timeRange[part]) != null ? _a : null,
-      onChange: (value) => setTime(part, value),
+      value: (_b = (_a = ctx == null ? void 0 : ctx.timeRange) == null ? void 0 : _a[part]) != null ? _b : null,
+      onChange: (value) => ctx == null ? void 0 : ctx.setTime(part, value),
       reserveSpaceForError: false
     }
   );
@@ -15049,12 +15059,10 @@ NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
 // src/molecules/Navigation/Navigation.tsx
 var import_react117 = __toESM(require("react"));
 var import_classnames12 = __toESM(require("classnames"));
+var import_lodash_es39 = require("lodash-es");
 
 // src/atoms/Navigation/Navigation.tsx
 var import_react116 = __toESM(require("react"));
-var import_lodash_es39 = require("lodash-es");
-var import_caretDownFilled2 = __toESM(require_caretDownFilled());
-var import_caretUpFilled2 = __toESM(require_caretUpFilled());
 var Navigation = (_a) => {
   var _b = _a, {
     className,
@@ -15099,39 +15107,43 @@ var Item5 = (_a) => {
     })
   ));
 };
-var Submenu = ({ title, icon, children }) => {
-  const [open, setOpen] = import_react116.default.useState(false);
-  const submenuTitleId = (0, import_lodash_es39.uniqueId)();
+var Submenu = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    title,
+    id
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className",
+    "title",
+    "id"
+  ]);
   return /* @__PURE__ */ import_react116.default.createElement("li", { role: "presentation" }, /* @__PURE__ */ import_react116.default.createElement(
     "a",
-    {
+    __spreadValues({
       role: "menuitem",
       "aria-haspopup": "true",
-      "aria-expanded": open,
-      onClick: (e) => {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-      },
-      className: classNames(
-        tw("py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full")
-      ),
       href: "#",
-      id: submenuTitleId
-    },
-    /* @__PURE__ */ import_react116.default.createElement(InlineIcon, { icon: open ? import_caretUpFilled2.default : import_caretDownFilled2.default, width: "12px", height: "12px", className: "mr-1" }),
-    /* @__PURE__ */ import_react116.default.createElement(Box.Flex, { paddingX: "1", gap: "4" }, icon && /* @__PURE__ */ import_react116.default.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), title)
-  ), open && /* @__PURE__ */ import_react116.default.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": submenuTitleId }, children));
+      id,
+      className: classNames(
+        tw("py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full"),
+        className
+      )
+    }, rest),
+    title
+  ), /* @__PURE__ */ import_react116.default.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": id }, children));
 };
 var SubmenuItem = (_a) => {
   var _b = _a, { className, active } = _b, rest = __objRest(_b, ["className", "active"]);
   return /* @__PURE__ */ import_react116.default.createElement(Navigation.Item, __spreadProps(__spreadValues({}, rest), { active, className: classNames(className, tw("pl-[56px]")) }));
 };
+Submenu.Item = SubmenuItem;
 Navigation.Header = Header;
 Navigation.Footer = Footer;
 Navigation.Section = Section2;
 Navigation.Item = Item5;
 Navigation.Submenu = Submenu;
-Submenu.Item = SubmenuItem;
 Navigation.Divider = Divider3;
 
 // src/molecules/Navigation/Navigation.tsx
@@ -15151,13 +15163,30 @@ var Item6 = (_a) => {
   ]);
   return /* @__PURE__ */ import_react117.default.createElement(Navigation.Item, __spreadValues({}, rest), icon && showNotification && /* @__PURE__ */ import_react117.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react117.default.createElement(InlineIcon, { icon, width: "20px", height: "20px" })), icon && !showNotification && /* @__PURE__ */ import_react117.default.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), children);
 };
+var Submenu2 = ({ children, title, icon, defaultOpen = false }) => {
+  const [open, setOpen] = import_react117.default.useState(defaultOpen);
+  const id = (0, import_lodash_es39.uniqueId)();
+  return /* @__PURE__ */ import_react117.default.createElement(
+    Navigation.Submenu,
+    {
+      title: /* @__PURE__ */ import_react117.default.createElement(import_react117.default.Fragment, null, /* @__PURE__ */ import_react117.default.createElement(InlineIcon, { icon: open ? import_caretUpFilled.default : import_caretDownFilled.default, width: "12px", height: "12px", className: "mr-1" }), /* @__PURE__ */ import_react117.default.createElement(Box.Flex, { paddingX: "1", gap: "4" }, icon && /* @__PURE__ */ import_react117.default.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), title)),
+      "aria-expanded": open,
+      id,
+      onClick: (e) => {
+        e.preventDefault();
+        setOpen(!open);
+      }
+    },
+    open && /* @__PURE__ */ import_react117.default.createElement("ul", { role: "menu", className: (0, import_classnames12.default)(tw("flex flex-col")), "aria-labelledby": id }, children)
+  );
+};
+Submenu2.Item = Navigation.Submenu.Item;
 Navigation2.Item = Item6;
-Navigation2.Submenu = Navigation.Submenu;
-Navigation2.Submenu.Item = Navigation.Submenu.Item;
 Navigation2.Divider = Navigation.Divider;
 Navigation2.Footer = Navigation.Footer;
 Navigation2.Header = Navigation.Header;
 Navigation2.Section = Navigation.Section;
+Navigation2.Submenu = Submenu2;
 
 // src/molecules/PageHeader/PageHeader.tsx
 var import_react119 = __toESM(require("react"));

package/dist/system.mjs

@@ -4505,7 +4505,15 @@ var Input = React2.forwardRef((_a, ref) => {
 var Menu = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, { maxHeight = "450px", className, children } = _b, props = __objRest(_b, ["maxHeight", "className", "children"]);
-    return /* @__PURE__ */ React2.createElement("ul", __spreadValues({ ref, style: { maxHeight }, className: classNames(className, tw("text-default bg-body")) }, props), children);
+    return /* @__PURE__ */ React2.createElement(
+      "ul",
+      __spreadValues({
+        ref,
+        style: { maxHeight },
+        className: classNames(className, tw("text-default bg-body overflow-y-auto"))
+      }, props),
+      children
+    );
   }
 );
 var NoResults = React2.forwardRef(
@@ -9970,6 +9978,7 @@ var ComboboxBase = (_a) => {
     createOption,
     renderOption = (opt) => itemToString(opt),
     isOptionDisabled = isOptionDisabledBuiltin,
+    clearSelectionEnabled = true,
     getValue = defaultGetValue,
     getOptionKey,
     defaultValue,
@@ -9993,6 +10002,7 @@ var ComboboxBase = (_a) => {
     "createOption",
     "renderOption",
     "isOptionDisabled",
+    "clearSelectionEnabled",
     "getValue",
     "getOptionKey",
     "defaultValue",
@@ -10143,7 +10153,7 @@ var ComboboxBase = (_a) => {
         onKeyUp: (e) => e.stopPropagation()
       })
     ),
-    !readOnly && /* @__PURE__ */ React54.createElement(Box.Flex, { alignItems: "center", gap: "2" }, !!inputProps.value && !disabled && /* @__PURE__ */ React54.createElement(
+    !readOnly && /* @__PURE__ */ React54.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !!inputProps.value && !disabled && /* @__PURE__ */ React54.createElement(
       Button.Icon,
       {
         UNSAFE_className: tw("group-hover:opacity-100 py-1", {
@@ -11746,7 +11756,7 @@ var getDisabledItemKeys = (children) => {
     }
     return null;
   });
-  return keys.flat().filter((key) => key !== null);
+  return (keys != null ? keys : []).flat().filter((key) => key !== null);
 };
 
 // src/utils/object.ts
@@ -12955,8 +12965,8 @@ var PickerTimeField = ({ granularity }) => {
     {
       labelText: "Time",
       granularity: granularity !== "day" ? granularity : void 0,
-      value: state.timeValue,
-      onChange: state.setTimeValue,
+      value: state == null ? void 0 : state.timeValue,
+      onChange: (value) => value && (state == null ? void 0 : state.setTimeValue(value)),
       reserveSpaceForError: false
     }
   );
@@ -13076,15 +13086,15 @@ var createDateRangePickerBase = (variant) => (_a) => {
   );
 };
 var PickerTimeField2 = ({ granularity, part }) => {
-  var _a;
-  const { timeRange, setTime } = React85.useContext(DateRangePickerStateContext);
+  var _a, _b;
+  const ctx = React85.useContext(DateRangePickerStateContext);
   return /* @__PURE__ */ React85.createElement(
     TimeField,
     {
       labelText: part === "start" ? "Start time" : "End time",
       granularity: granularity !== "day" ? granularity : void 0,
-      value: (_a = timeRange == null ? void 0 : timeRange[part]) != null ? _a : null,
-      onChange: (value) => setTime(part, value),
+      value: (_b = (_a = ctx == null ? void 0 : ctx.timeRange) == null ? void 0 : _a[part]) != null ? _b : null,
+      onChange: (value) => ctx == null ? void 0 : ctx.setTime(part, value),
       reserveSpaceForError: false
     }
   );
@@ -14914,12 +14924,10 @@ NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
 // src/molecules/Navigation/Navigation.tsx
 import React108 from "react";
 import classNames12 from "classnames";
+import { uniqueId as uniqueId2 } from "lodash-es";
 
 // src/atoms/Navigation/Navigation.tsx
 import React107 from "react";
-import { uniqueId as uniqueId2 } from "lodash-es";
-var import_caretDownFilled2 = __toESM(require_caretDownFilled());
-var import_caretUpFilled2 = __toESM(require_caretUpFilled());
 var Navigation = (_a) => {
   var _b = _a, {
     className,
@@ -14964,39 +14972,43 @@ var Item5 = (_a) => {
     })
   ));
 };
-var Submenu = ({ title, icon, children }) => {
-  const [open, setOpen] = React107.useState(false);
-  const submenuTitleId = uniqueId2();
+var Submenu = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    title,
+    id
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className",
+    "title",
+    "id"
+  ]);
   return /* @__PURE__ */ React107.createElement("li", { role: "presentation" }, /* @__PURE__ */ React107.createElement(
     "a",
-    {
+    __spreadValues({
       role: "menuitem",
       "aria-haspopup": "true",
-      "aria-expanded": open,
-      onClick: (e) => {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-      },
-      className: classNames(
-        tw("py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full")
-      ),
       href: "#",
-      id: submenuTitleId
-    },
-    /* @__PURE__ */ React107.createElement(InlineIcon, { icon: open ? import_caretUpFilled2.default : import_caretDownFilled2.default, width: "12px", height: "12px", className: "mr-1" }),
-    /* @__PURE__ */ React107.createElement(Box.Flex, { paddingX: "1", gap: "4" }, icon && /* @__PURE__ */ React107.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), title)
-  ), open && /* @__PURE__ */ React107.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": submenuTitleId }, children));
+      id,
+      className: classNames(
+        tw("py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full"),
+        className
+      )
+    }, rest),
+    title
+  ), /* @__PURE__ */ React107.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": id }, children));
 };
 var SubmenuItem = (_a) => {
   var _b = _a, { className, active } = _b, rest = __objRest(_b, ["className", "active"]);
   return /* @__PURE__ */ React107.createElement(Navigation.Item, __spreadProps(__spreadValues({}, rest), { active, className: classNames(className, tw("pl-[56px]")) }));
 };
+Submenu.Item = SubmenuItem;
 Navigation.Header = Header;
 Navigation.Footer = Footer;
 Navigation.Section = Section2;
 Navigation.Item = Item5;
 Navigation.Submenu = Submenu;
-Submenu.Item = SubmenuItem;
 Navigation.Divider = Divider3;
 
 // src/molecules/Navigation/Navigation.tsx
@@ -15016,13 +15028,30 @@ var Item6 = (_a) => {
   ]);
   return /* @__PURE__ */ React108.createElement(Navigation.Item, __spreadValues({}, rest), icon && showNotification && /* @__PURE__ */ React108.createElement(Badge.Notification, null, /* @__PURE__ */ React108.createElement(InlineIcon, { icon, width: "20px", height: "20px" })), icon && !showNotification && /* @__PURE__ */ React108.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), children);
 };
+var Submenu2 = ({ children, title, icon, defaultOpen = false }) => {
+  const [open, setOpen] = React108.useState(defaultOpen);
+  const id = uniqueId2();
+  return /* @__PURE__ */ React108.createElement(
+    Navigation.Submenu,
+    {
+      title: /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(InlineIcon, { icon: open ? import_caretUpFilled.default : import_caretDownFilled.default, width: "12px", height: "12px", className: "mr-1" }), /* @__PURE__ */ React108.createElement(Box.Flex, { paddingX: "1", gap: "4" }, icon && /* @__PURE__ */ React108.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), title)),
+      "aria-expanded": open,
+      id,
+      onClick: (e) => {
+        e.preventDefault();
+        setOpen(!open);
+      }
+    },
+    open && /* @__PURE__ */ React108.createElement("ul", { role: "menu", className: classNames12(tw("flex flex-col")), "aria-labelledby": id }, children)
+  );
+};
+Submenu2.Item = Navigation.Submenu.Item;
 Navigation2.Item = Item6;
-Navigation2.Submenu = Navigation.Submenu;
-Navigation2.Submenu.Item = Navigation.Submenu.Item;
 Navigation2.Divider = Navigation.Divider;
 Navigation2.Footer = Navigation.Footer;
 Navigation2.Header = Navigation.Header;
 Navigation2.Section = Navigation.Section;
+Navigation2.Submenu = Submenu2;
 
 // src/molecules/PageHeader/PageHeader.tsx
 import React110 from "react";