@aivenio/aquarium 1.76.3 → 1.77.1

package/dist/system.mjs

@@ -4224,6 +4224,7 @@ __export(molecules_exports, {
   EmptyState: () => EmptyState,
   EmptyStateLayout: () => EmptyStateLayout,
   ExternalLinkButton: () => ExternalLinkButton,
+  FileInput: () => FileInput,
   Flexbox: () => Flexbox,
   FlexboxItem: () => FlexboxItem,
   GhostButton: () => GhostButton,
@@ -6825,7 +6826,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
     }))));
@@ -10293,6 +10297,7 @@ var import_cross5 = __toESM(require_cross());
 var import_error3 = __toESM(require_error());
 var import_search3 = __toESM(require_search());
 var import_tick4 = __toESM(require_tick());
+var import_upload2 = __toESM(require_upload());
 var InputAdornment = ({
   placement = "right",
   className,
@@ -10317,6 +10322,12 @@ var SearchIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
   "data-testid": "icon-search",
   onClick
 });
+var UploadIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
+  icon: import_upload2.default,
+  color: "primary-intense",
+  "data-testid": "icon-upload",
+  onClick
+});
 var ResetIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross5.default,
@@ -10347,11 +10358,14 @@ var createInput = (displayName, opts = {}) => {
         "type"
       ]);
       var _a2;
-      const inputType = opts.isSearch ? "search" : type;
+      const inputType = opts.isSearch ? "search" : opts.isFile ? "file" : type;
       const inputRef = React57.useRef(null);
       useImperativeHandle(ref, () => inputRef.current);
-      const handleReset = () => {
+      const handleReset = (e) => {
         var _a3;
+        if (opts.isFile) {
+          e.preventDefault();
+        }
         const el = inputRef.current;
         if (el) {
           const lastValue = el.value;
@@ -10364,7 +10378,8 @@ var createInput = (displayName, opts = {}) => {
       return /* @__PURE__ */ React57.createElement("span", {
         className: classNames("Aquarium-InputBase", tw("relative block"))
       }, opts.adornment && /* @__PURE__ */ React57.createElement(InputAdornment, {
-        placement: "left"
+        placement: "left",
+        className: opts.isFile ? "icon-stroke-2" : void 0
       }, opts.adornment), /* @__PURE__ */ React57.createElement("input", __spreadProps(__spreadValues({
         ref: inputRef,
         type: inputType
@@ -10377,7 +10392,8 @@ var createInput = (displayName, opts = {}) => {
           {
             "[&::-webkit-search-cancel-button]:appearance-none": opts.isSearch,
             "pl-7": opts.adornment,
-            "pr-7": opts.canReset || endAdornment
+            "pr-7": opts.canReset || endAdornment,
+            "file:text-primary-intense file:typography-small-strong file:border-0 file:bg-transparent file:p-0 file:mr-4": opts.isFile
           },
           getCommonInputStyles({ readOnly, valid }),
           props.className
@@ -10395,57 +10411,68 @@ var createInput = (displayName, opts = {}) => {
   return InputComponent;
 };
 var InputBase = createInput("InputBase");
+var FileInputBase = createInput("FileInputBase", {
+  adornment: /* @__PURE__ */ React57.createElement(UploadIcon, null),
+  canReset: true,
+  isFile: true
+});
 var SearchInput = createInput("SearchInput", {
   adornment: /* @__PURE__ */ React57.createElement(SearchIcon, null),
   canReset: true,
   isSearch: true
 });
-var Input2 = React57.forwardRef((inputProps, ref) => {
-  var _b, _c;
-  const _a = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a, props = __objRest(_a, ["readOnly", "value", "onChange"]);
-  const isControlled = typeof valueProp !== "undefined";
-  const [valueState, setValueState] = useState7((_b = props.defaultValue) != null ? _b : "");
-  const value = isControlled ? valueProp : valueState;
-  const handleChange = useCallback(
-    (e) => {
-      const next = e.target.value;
-      if (!isControlled) {
-        setValueState(next);
-      }
-      onChangeProp == null ? void 0 : onChangeProp(e);
-    },
-    [isControlled, onChangeProp]
-  );
-  const defaultId = useId7();
-  const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = useId7();
-  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
-  const _d = getLabelControlProps(inputProps), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
-  const baseProps = omit5(
-    inputProps,
-    Object.keys(labelControlProps).concat(isControlled ? ["defaultValue"] : ["value"])
-  );
-  return /* @__PURE__ */ React57.createElement(LabelControl, __spreadProps(__spreadValues({
-    id: `${id}-label`,
-    htmlFor: id,
-    messageId: errorMessageId,
-    length: value !== void 0 ? toString(value).length : void 0
-  }, labelControlProps), {
-    className: "Aquarium-Input"
-  }), /* @__PURE__ */ React57.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
-    ref
-  }, baseProps), errorProps), {
-    id,
-    "data-testid": dataTestId,
-    onChange: handleChange,
-    disabled: props.disabled,
-    maxLength: props.maxLength,
-    required: props.required,
-    valid: props.valid,
-    readOnly
-  })));
-});
-Input2.displayName = "Input";
+var createInputComponent = (displayName, options = {}) => {
+  const InputComponentBase = options.input || InputBase;
+  const InputComponent = React57.forwardRef((inputProps, ref) => {
+    var _b, _c;
+    const _a = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a, props = __objRest(_a, ["readOnly", "value", "onChange"]);
+    const isControlled = typeof valueProp !== "undefined";
+    const [valueState, setValueState] = useState7((_b = props.defaultValue) != null ? _b : "");
+    const value = isControlled ? valueProp : valueState;
+    const handleChange = useCallback(
+      (e) => {
+        const next = e.target.value;
+        if (!isControlled) {
+          setValueState(next);
+        }
+        onChangeProp == null ? void 0 : onChangeProp(e);
+      },
+      [isControlled, onChangeProp]
+    );
+    const defaultId = useId7();
+    const id = (_c = props.id) != null ? _c : defaultId;
+    const errorMessageId = useId7();
+    const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
+    const _d = getLabelControlProps(inputProps), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
+    const baseProps = omit5(
+      inputProps,
+      Object.keys(labelControlProps).concat(isControlled ? ["defaultValue"] : ["value"])
+    );
+    return /* @__PURE__ */ React57.createElement(LabelControl, __spreadProps(__spreadValues({
+      id: `${id}-label`,
+      htmlFor: id,
+      messageId: errorMessageId,
+      length: value !== void 0 ? toString(value).length : void 0
+    }, labelControlProps), {
+      className: "Aquarium-Input"
+    }), /* @__PURE__ */ React57.createElement(InputComponentBase, __spreadProps(__spreadValues(__spreadValues({
+      ref
+    }, baseProps), errorProps), {
+      id,
+      "data-testid": dataTestId,
+      onChange: handleChange,
+      disabled: props.disabled,
+      maxLength: props.maxLength,
+      required: props.required,
+      valid: props.valid,
+      readOnly
+    })));
+  });
+  InputComponent.displayName = displayName;
+  return InputComponent;
+};
+var FileInput = createInputComponent("FileInput", { input: FileInputBase });
+var Input2 = createInputComponent("Input", { input: InputBase });
 Input2.Skeleton = () => /* @__PURE__ */ React57.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React57.createElement(InputBase.Skeleton, null));
 Input2.Skeleton.displayName = "Input.Skeleton";
 
@@ -11416,7 +11443,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";
@@ -11646,13 +11673,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);
@@ -11660,12 +11687,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,
@@ -11675,10 +11741,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, {
@@ -11693,7 +11762,7 @@ var MenuWrapper = (_a) => {
         state
       });
     }
-  }))), footer);
+  })))), footer);
 };
 var ItemWrapper = ({ item, state }) => {
   const ref = React67.useRef(null);
@@ -15923,6 +15992,7 @@ export {
   EmptyState,
   EmptyStateLayout,
   ExternalLinkButton,
+  FileInput,
   Flexbox,
   FlexboxItem,
   FormControl,