@aivenio/aquarium 1.77.0 → 1.78.0

package/dist/system.cjs

@@ -6325,6 +6325,26 @@ var tokens_default = {
       lineHeight: 1.5,
       textTransform: "none"
     },
+    "code-small": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "14px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
+    "code-small-strong": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "14px",
+      fontWeight: 600,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
     "caption-small": {
       fontFamily: [
         "Inter"
@@ -6977,7 +6997,10 @@ var TooltipWrapper = import_react11.default.forwardRef(
     const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
     return /* @__PURE__ */ import_react11.default.createElement(import_overlays2.OverlayContainer, null, /* @__PURE__ */ import_react11.default.createElement("div", __spreadValues({
       ref,
-      className: classNames(tw("p-3 rounded-sm typography-caption max-w-[320px] bg-body-intense text-white"))
+      className: classNames(
+        "Aquarium-Tooltip",
+        tw("p-3 rounded-sm typography-caption max-w-[320px] bg-body-intense text-opposite-default")
+      )
     }, (0, import_utils.mergeProps)(props, tooltipProps)), props.children, /* @__PURE__ */ import_react11.default.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
@@ -7864,6 +7887,22 @@ Typography2.CodeStrong = (_a) => {
   }));
 };
 Typography2.CodeStrong.displayName = "Typography.CodeStrong";
+Typography2.CodeSmall = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react23.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "code-small"
+  }));
+};
+Typography2.CodeSmall.displayName = "Typography.Code";
+Typography2.CodeSmallStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react23.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "code-small-strong"
+  }));
+};
+Typography2.CodeSmallStrong.displayName = "Typography.CodeSmallStrong";
 Typography2.LargeText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react23.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -11821,13 +11860,13 @@ var MenuWrapper = (_a) => {
     "header",
     "footer"
   ]);
-  const ref = import_react74.default.useRef(null);
+  const baseListRef = import_react74.default.useRef(null);
   const disabledKeys = getDisabledItemKeys(props.children);
   const state = (0, import_tree.useTreeState)(__spreadValues({
     disabledKeys,
     selectedKeys
   }, props));
-  const { menuProps } = (0, import_menu2.useMenu)(props, state, ref);
+  const { menuProps } = (0, import_menu2.useMenu)(props, state, baseListRef);
   const { contains } = (0, import_i18n.useFilter)({ sensitivity: "base" });
   const [search, setSearch] = import_react74.default.useState("");
   const searchInputRef = import_react74.default.useRef(null);
@@ -11835,12 +11874,51 @@ var MenuWrapper = (_a) => {
     () => searchable ? filterCollection(state.collection, search, contains) : state.collection,
     [searchable, state.collection, search, contains]
   );
-  import_react74.default.useEffect(() => {
+  const focusOnSearchInput = (0, import_react74.useCallback)(() => {
     var _a2;
+    (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+  }, []);
+  const focusOnBaseList = (0, import_react74.useCallback)(() => {
+    var _a2;
+    (_a2 = baseListRef.current) == null ? void 0 : _a2.focus();
+  }, []);
+  import_react74.default.useEffect(() => {
     if (searchable) {
-      (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      requestAnimationFrame(focusOnSearchInput);
     }
-  }, [searchable]);
+  }, [searchable, focusOnSearchInput]);
+  const onSearchInputKeyDown = (0, import_react74.useCallback)(
+    (event) => {
+      if (event.code === "ArrowDown") {
+        focusOnBaseList();
+      }
+    },
+    [focusOnBaseList]
+  );
+  const onMenuItemsKeyDown = (0, import_react74.useCallback)(
+    (event) => {
+      if (!searchable) {
+        return;
+      }
+      if (event.shiftKey && event.code.startsWith("Shift") || event.altKey && event.code.startsWith("Alt") || event.ctrlKey || event.metaKey || [
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "PageUp",
+        "PageDown",
+        "Home",
+        "End",
+        "Tab",
+        "Enter",
+        "Space"
+      ].includes(event.code)) {
+        return;
+      }
+      focusOnSearchInput();
+    },
+    [searchable, focusOnSearchInput]
+  );
   return /* @__PURE__ */ import_react74.default.createElement(DropdownMenu, {
     minWidth,
     maxWidth,
@@ -11850,10 +11928,13 @@ var MenuWrapper = (_a) => {
     "aria-label": "search",
     value: search,
     onChange: (e) => setSearch(e.target.value),
+    onKeyDown: onSearchInputKeyDown,
     className: tw("mb-5"),
     ref: searchInputRef
-  }), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.EmptyStateContainer, null, emptyState), /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.List, __spreadValues({
-    ref
+  }), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.EmptyStateContainer, null, emptyState), /* @__PURE__ */ import_react74.default.createElement("div", {
+    onKeyDown: onMenuItemsKeyDown
+  }, /* @__PURE__ */ import_react74.default.createElement(DropdownMenu.List, __spreadValues({
+    ref: baseListRef
   }, menuProps), Array.from(filteredCollection).map((item) => {
     if (isSectionNode(item)) {
       return /* @__PURE__ */ import_react74.default.createElement(SectionWrapper, {
@@ -11868,7 +11949,7 @@ var MenuWrapper = (_a) => {
         state
       });
     }
-  }))), footer);
+  })))), footer);
 };
 var ItemWrapper = ({ item, state }) => {
   const ref = import_react74.default.useRef(null);

package/dist/system.mjs

@@ -6174,6 +6174,26 @@ var tokens_default = {
       lineHeight: 1.5,
       textTransform: "none"
     },
+    "code-small": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "14px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
+    "code-small-strong": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "14px",
+      fontWeight: 600,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
     "caption-small": {
       fontFamily: [
         "Inter"
@@ -6826,7 +6846,10 @@ var TooltipWrapper = React8.forwardRef(
     const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
     return /* @__PURE__ */ React8.createElement(OverlayContainer, null, /* @__PURE__ */ React8.createElement("div", __spreadValues({
       ref,
-      className: classNames(tw("p-3 rounded-sm typography-caption max-w-[320px] bg-body-intense text-white"))
+      className: classNames(
+        "Aquarium-Tooltip",
+        tw("p-3 rounded-sm typography-caption max-w-[320px] bg-body-intense text-opposite-default")
+      )
     }, mergeProps(props, tooltipProps)), props.children, /* @__PURE__ */ React8.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
@@ -7713,6 +7736,22 @@ Typography2.CodeStrong = (_a) => {
   }));
 };
 Typography2.CodeStrong.displayName = "Typography.CodeStrong";
+Typography2.CodeSmall = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React19.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "code-small"
+  }));
+};
+Typography2.CodeSmall.displayName = "Typography.Code";
+Typography2.CodeSmallStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React19.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "code-small-strong"
+  }));
+};
+Typography2.CodeSmallStrong.displayName = "Typography.CodeSmallStrong";
 Typography2.LargeText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React19.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -11440,7 +11479,7 @@ import React68 from "react";
 import isFunction from "lodash/isFunction";
 
 // src/molecules/DropdownMenu/DropdownMenu.tsx
-import React67 from "react";
+import React67, { useCallback as useCallback2 } from "react";
 import { useFilter } from "@react-aria/i18n";
 import { PressResponder, usePress } from "@react-aria/interactions";
 import { useMenu, useMenuItem, useMenuSection, useMenuTrigger } from "@react-aria/menu";
@@ -11670,13 +11709,13 @@ var MenuWrapper = (_a) => {
     "header",
     "footer"
   ]);
-  const ref = React67.useRef(null);
+  const baseListRef = React67.useRef(null);
   const disabledKeys = getDisabledItemKeys(props.children);
   const state = useTreeState(__spreadValues({
     disabledKeys,
     selectedKeys
   }, props));
-  const { menuProps } = useMenu(props, state, ref);
+  const { menuProps } = useMenu(props, state, baseListRef);
   const { contains } = useFilter({ sensitivity: "base" });
   const [search, setSearch] = React67.useState("");
   const searchInputRef = React67.useRef(null);
@@ -11684,12 +11723,51 @@ var MenuWrapper = (_a) => {
     () => searchable ? filterCollection(state.collection, search, contains) : state.collection,
     [searchable, state.collection, search, contains]
   );
-  React67.useEffect(() => {
+  const focusOnSearchInput = useCallback2(() => {
     var _a2;
+    (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+  }, []);
+  const focusOnBaseList = useCallback2(() => {
+    var _a2;
+    (_a2 = baseListRef.current) == null ? void 0 : _a2.focus();
+  }, []);
+  React67.useEffect(() => {
     if (searchable) {
-      (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      requestAnimationFrame(focusOnSearchInput);
     }
-  }, [searchable]);
+  }, [searchable, focusOnSearchInput]);
+  const onSearchInputKeyDown = useCallback2(
+    (event) => {
+      if (event.code === "ArrowDown") {
+        focusOnBaseList();
+      }
+    },
+    [focusOnBaseList]
+  );
+  const onMenuItemsKeyDown = useCallback2(
+    (event) => {
+      if (!searchable) {
+        return;
+      }
+      if (event.shiftKey && event.code.startsWith("Shift") || event.altKey && event.code.startsWith("Alt") || event.ctrlKey || event.metaKey || [
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "PageUp",
+        "PageDown",
+        "Home",
+        "End",
+        "Tab",
+        "Enter",
+        "Space"
+      ].includes(event.code)) {
+        return;
+      }
+      focusOnSearchInput();
+    },
+    [searchable, focusOnSearchInput]
+  );
   return /* @__PURE__ */ React67.createElement(DropdownMenu, {
     minWidth,
     maxWidth,
@@ -11699,10 +11777,13 @@ var MenuWrapper = (_a) => {
     "aria-label": "search",
     value: search,
     onChange: (e) => setSearch(e.target.value),
+    onKeyDown: onSearchInputKeyDown,
     className: tw("mb-5"),
     ref: searchInputRef
-  }), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ React67.createElement(DropdownMenu.EmptyStateContainer, null, emptyState), /* @__PURE__ */ React67.createElement(DropdownMenu.List, __spreadValues({
-    ref
+  }), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ React67.createElement(DropdownMenu.EmptyStateContainer, null, emptyState), /* @__PURE__ */ React67.createElement("div", {
+    onKeyDown: onMenuItemsKeyDown
+  }, /* @__PURE__ */ React67.createElement(DropdownMenu.List, __spreadValues({
+    ref: baseListRef
   }, menuProps), Array.from(filteredCollection).map((item) => {
     if (isSectionNode(item)) {
       return /* @__PURE__ */ React67.createElement(SectionWrapper, {
@@ -11717,7 +11798,7 @@ var MenuWrapper = (_a) => {
         state
       });
     }
-  }))), footer);
+  })))), footer);
 };
 var ItemWrapper = ({ item, state }) => {
   const ref = React67.useRef(null);

package/dist/tokens.json

@@ -460,6 +460,26 @@
       "lineHeight": 1.5,
       "textTransform": "none"
     },
+    "code-small": {
+      "fontFamily": [
+        "Source Code Pro"
+      ],
+      "fontSize": "14px",
+      "fontWeight": 400,
+      "fontStyle": "normal",
+      "lineHeight": 1.42,
+      "textTransform": "none"
+    },
+    "code-small-strong": {
+      "fontFamily": [
+        "Source Code Pro"
+      ],
+      "fontSize": "14px",
+      "fontWeight": 600,
+      "fontStyle": "normal",
+      "lineHeight": 1.42,
+      "textTransform": "none"
+    },
     "caption-small": {
       "fontFamily": [
         "Inter"