@aivenio/aquarium 1.76.3 → 1.77.1

package/dist/src/utils/form/InputAdornment/InputAdornment.js

@@ -5,6 +5,7 @@ import crossIcon from '../../../../src/icons/cross';
 import errorIcon from '../../../../src/icons/error';
 import searchIcon from '../../../../src/icons/search';
 import tickIcon from '../../../../src/icons/tick';
+import uploadIcon from '../../../../src/icons/upload';
 export const InputAdornment = ({ placement = 'right', className, dense, children, }) => {
     return (React.createElement("span", { className: classNames(className, 'absolute inset-y-0 grow-0 text-inactive flex items-center mx-3', {
             'right-0': placement === 'right',
@@ -17,5 +18,6 @@ export const InputAdornment = ({ placement = 'right', className, dense, children
 export const ValidIcon = ({ onClick }) => (React.createElement(Icon, { icon: tickIcon, color: "success-default", "data-testid": "icon-valid", onClick: onClick }));
 export const ErrorIcon = ({ onClick }) => (React.createElement(Icon, { icon: errorIcon, color: "danger-intense", "data-testid": "icon-invalid", onClick: onClick }));
 export const SearchIcon = ({ onClick }) => (React.createElement(Icon, { icon: searchIcon, color: "inactive", "data-testid": "icon-search", onClick: onClick }));
+export const UploadIcon = ({ onClick }) => (React.createElement(Icon, { icon: uploadIcon, color: "primary-intense", "data-testid": "icon-upload", onClick: onClick }));
 export const ResetIcon = ({ onClick }) => (React.createElement(Icon, { className: "hover:cursor-pointer", icon: crossIcon, color: "inactive", "data-testid": "icon-reset", onClick: onClick }));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXRBZG9ybm1lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvdXRpbHMvZm9ybS9JbnB1dEFkb3JubWVudC9JbnB1dEFkb3JubWVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFrQixNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFaEQsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxVQUFVLE1BQU0sa0JBQWtCLENBQUM7QUFDMUMsT0FBTyxRQUFRLE1BQU0sZ0JBQWdCLENBQUM7QUFRdEMsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFzRCxDQUFDLEVBQ2hGLFNBQVMsR0FBRyxPQUFPLEVBQ25CLFNBQVMsRUFDVCxLQUFLLEVBQ0wsUUFBUSxHQUNULEVBQUUsRUFBRTtJQUNILE9BQU8sQ0FDTCw4QkFDRSxTQUFTLEVBQUUsVUFBVSxDQUFDLFNBQVMsRUFBRSxnRUFBZ0UsRUFBRTtZQUNqRyxTQUFTLEVBQUUsU0FBUyxLQUFLLE9BQU87WUFDaEMsUUFBUSxFQUFFLFNBQVMsS0FBSyxNQUFNO1lBQzlCLGtCQUFrQixFQUFFLEtBQUs7WUFDekIsMkJBQTJCLEVBQUUsQ0FBQyxLQUFLO1NBQ3BDLENBQUM7UUFFRixvQkFBQyxPQUFPLElBQUMsR0FBRyxFQUFDLEdBQUcsRUFBQyxJQUFJLEVBQUMsTUFBTSxJQUN6QixRQUFRLENBQ0QsQ0FDTCxDQUNSLENBQUM7QUFDSixDQUFDLENBQUM7QUFJRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQW9CLENBQUMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDekQsb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFDLGlCQUFpQixpQkFBYSxZQUFZLEVBQUMsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUM1RixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFvQixDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQ3pELG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBQyxnQkFBZ0IsaUJBQWEsY0FBYyxFQUFDLE9BQU8sRUFBRSxPQUFPLEdBQUksQ0FDOUYsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBb0IsQ0FBQyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUMxRCxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUMsVUFBVSxpQkFBYSxhQUFhLEVBQUMsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUN4RixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFvQixDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQ3pELG9CQUFDLElBQUksSUFBQyxTQUFTLEVBQUMsc0JBQXNCLEVBQUMsSUFBSSxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUMsVUFBVSxpQkFBYSxZQUFZLEVBQUMsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUN2SCxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXRBZG9ybm1lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvdXRpbHMvZm9ybS9JbnB1dEFkb3JubWVudC9JbnB1dEFkb3JubWVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFrQixNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFaEQsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxVQUFVLE1BQU0sa0JBQWtCLENBQUM7QUFDMUMsT0FBTyxRQUFRLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxVQUFVLE1BQU0sa0JBQWtCLENBQUM7QUFRMUMsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFzRCxDQUFDLEVBQ2hGLFNBQVMsR0FBRyxPQUFPLEVBQ25CLFNBQVMsRUFDVCxLQUFLLEVBQ0wsUUFBUSxHQUNULEVBQUUsRUFBRTtJQUNILE9BQU8sQ0FDTCw4QkFDRSxTQUFTLEVBQUUsVUFBVSxDQUFDLFNBQVMsRUFBRSxnRUFBZ0UsRUFBRTtZQUNqRyxTQUFTLEVBQUUsU0FBUyxLQUFLLE9BQU87WUFDaEMsUUFBUSxFQUFFLFNBQVMsS0FBSyxNQUFNO1lBQzlCLGtCQUFrQixFQUFFLEtBQUs7WUFDekIsMkJBQTJCLEVBQUUsQ0FBQyxLQUFLO1NBQ3BDLENBQUM7UUFFRixvQkFBQyxPQUFPLElBQUMsR0FBRyxFQUFDLEdBQUcsRUFBQyxJQUFJLEVBQUMsTUFBTSxJQUN6QixRQUFRLENBQ0QsQ0FDTCxDQUNSLENBQUM7QUFDSixDQUFDLENBQUM7QUFJRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQW9CLENBQUMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDekQsb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFDLGlCQUFpQixpQkFBYSxZQUFZLEVBQUMsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUM1RixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFvQixDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQ3pELG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBQyxnQkFBZ0IsaUJBQWEsY0FBYyxFQUFDLE9BQU8sRUFBRSxPQUFPLEdBQUksQ0FDOUYsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBb0IsQ0FBQyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUMxRCxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUMsVUFBVSxpQkFBYSxhQUFhLEVBQUMsT0FBTyxFQUFFLE9BQU8sR0FBSSxDQUN4RixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFvQixDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQzFELG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBQyxpQkFBaUIsaUJBQWEsYUFBYSxFQUFDLE9BQU8sRUFBRSxPQUFPLEdBQUksQ0FDL0YsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBb0IsQ0FBQyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUN6RCxvQkFBQyxJQUFJLElBQUMsU0FBUyxFQUFDLHNCQUFzQixFQUFDLElBQUksRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFDLFVBQVUsaUJBQWEsWUFBWSxFQUFDLE9BQU8sRUFBRSxPQUFPLEdBQUksQ0FDdkgsQ0FBQyJ9

package/dist/styles.css

@@ -3518,6 +3518,30 @@ input[type='number'].no-arrows {
 .aquarium-theme-dark .Aquarium-Card {
   --aquarium-background-color-primary-hover: color-mix(in srgb, var(--aquarium-colors-primary-100) 70%, transparent);
  }
+.aquarium-theme-dark .Aquarium-Tooltip {
+  --aquarium-background-color-body-intense: var(--aquarium-background-color-intense);
+ }
+.file\:typography-small-strong::file-selector-button{
+  font: normal 500 14px/1.42 Inter;
+}
+.file\:mr-4::file-selector-button{
+  margin-right: 12px;
+}
+.file\:border-0::file-selector-button{
+  border-width: 0px;
+  border-width: var(--aquarium-border-width-0);
+}
+.file\:bg-transparent::file-selector-button{
+  background-color: transparent;
+  background-color: var(--aquarium-colors-transparent);
+}
+.file\:p-0::file-selector-button{
+  padding: 0px;
+}
+.file\:text-primary-intense::file-selector-button{
+  color: rgba(53,69,190,1);
+  color: var(--aquarium-text-color-primary-intense);
+}
 .placeholder\:text-inactive::-moz-placeholder{
   color: rgba(150,150,160,1);
   color: var(--aquarium-text-color-inactive);

package/dist/system.cjs

@@ -4227,6 +4227,7 @@ __export(system_exports, {
   EmptyState: () => EmptyState,
   EmptyStateLayout: () => EmptyStateLayout,
   ExternalLinkButton: () => ExternalLinkButton,
+  FileInput: () => FileInput,
   Flexbox: () => Flexbox,
   FlexboxItem: () => FlexboxItem,
   FormControl: () => FormControl,
@@ -4377,6 +4378,7 @@ __export(molecules_exports, {
   EmptyState: () => EmptyState,
   EmptyStateLayout: () => EmptyStateLayout,
   ExternalLinkButton: () => ExternalLinkButton,
+  FileInput: () => FileInput,
   Flexbox: () => Flexbox,
   FlexboxItem: () => FlexboxItem,
   GhostButton: () => GhostButton,
@@ -6975,7 +6977,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
     }))));
@@ -10443,6 +10448,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,
@@ -10467,6 +10473,12 @@ var SearchIcon = ({ onClick }) => /* @__PURE__ */ import_react62.default.createE
   "data-testid": "icon-search",
   onClick
 });
+var UploadIcon = ({ onClick }) => /* @__PURE__ */ import_react62.default.createElement(Icon, {
+  icon: import_upload2.default,
+  color: "primary-intense",
+  "data-testid": "icon-upload",
+  onClick
+});
 var ResetIcon = ({ onClick }) => /* @__PURE__ */ import_react62.default.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross5.default,
@@ -10497,11 +10509,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 = import_react63.default.useRef(null);
       (0, import_react63.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;
@@ -10514,7 +10529,8 @@ var createInput = (displayName, opts = {}) => {
       return /* @__PURE__ */ import_react63.default.createElement("span", {
         className: classNames("Aquarium-InputBase", tw("relative block"))
       }, opts.adornment && /* @__PURE__ */ import_react63.default.createElement(InputAdornment, {
-        placement: "left"
+        placement: "left",
+        className: opts.isFile ? "icon-stroke-2" : void 0
       }, opts.adornment), /* @__PURE__ */ import_react63.default.createElement("input", __spreadProps(__spreadValues({
         ref: inputRef,
         type: inputType
@@ -10527,7 +10543,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
@@ -10545,57 +10562,68 @@ var createInput = (displayName, opts = {}) => {
   return InputComponent;
 };
 var InputBase = createInput("InputBase");
+var FileInputBase = createInput("FileInputBase", {
+  adornment: /* @__PURE__ */ import_react63.default.createElement(UploadIcon, null),
+  canReset: true,
+  isFile: true
+});
 var SearchInput = createInput("SearchInput", {
   adornment: /* @__PURE__ */ import_react63.default.createElement(SearchIcon, null),
   canReset: true,
   isSearch: true
 });
-var Input2 = import_react63.default.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] = (0, import_react63.useState)((_b = props.defaultValue) != null ? _b : "");
-  const value = isControlled ? valueProp : valueState;
-  const handleChange = (0, import_react63.useCallback)(
-    (e) => {
-      const next = e.target.value;
-      if (!isControlled) {
-        setValueState(next);
-      }
-      onChangeProp == null ? void 0 : onChangeProp(e);
-    },
-    [isControlled, onChangeProp]
-  );
-  const defaultId = (0, import_utils9.useId)();
-  const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = (0, import_utils9.useId)();
-  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 = (0, import_omit5.default)(
-    inputProps,
-    Object.keys(labelControlProps).concat(isControlled ? ["defaultValue"] : ["value"])
-  );
-  return /* @__PURE__ */ import_react63.default.createElement(LabelControl, __spreadProps(__spreadValues({
-    id: `${id}-label`,
-    htmlFor: id,
-    messageId: errorMessageId,
-    length: value !== void 0 ? (0, import_toString.default)(value).length : void 0
-  }, labelControlProps), {
-    className: "Aquarium-Input"
-  }), /* @__PURE__ */ import_react63.default.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 = import_react63.default.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] = (0, import_react63.useState)((_b = props.defaultValue) != null ? _b : "");
+    const value = isControlled ? valueProp : valueState;
+    const handleChange = (0, import_react63.useCallback)(
+      (e) => {
+        const next = e.target.value;
+        if (!isControlled) {
+          setValueState(next);
+        }
+        onChangeProp == null ? void 0 : onChangeProp(e);
+      },
+      [isControlled, onChangeProp]
+    );
+    const defaultId = (0, import_utils9.useId)();
+    const id = (_c = props.id) != null ? _c : defaultId;
+    const errorMessageId = (0, import_utils9.useId)();
+    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 = (0, import_omit5.default)(
+      inputProps,
+      Object.keys(labelControlProps).concat(isControlled ? ["defaultValue"] : ["value"])
+    );
+    return /* @__PURE__ */ import_react63.default.createElement(LabelControl, __spreadProps(__spreadValues({
+      id: `${id}-label`,
+      htmlFor: id,
+      messageId: errorMessageId,
+      length: value !== void 0 ? (0, import_toString.default)(value).length : void 0
+    }, labelControlProps), {
+      className: "Aquarium-Input"
+    }), /* @__PURE__ */ import_react63.default.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__ */ import_react63.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react63.default.createElement(InputBase.Skeleton, null));
 Input2.Skeleton.displayName = "Input.Skeleton";
 
@@ -11796,13 +11824,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);
@@ -11810,12 +11838,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,
@@ -11825,10 +11892,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, {
@@ -11843,7 +11913,7 @@ var MenuWrapper = (_a) => {
         state
       });
     }
-  }))), footer);
+  })))), footer);
 };
 var ItemWrapper = ({ item, state }) => {
   const ref = import_react74.default.useRef(null);
@@ -16074,6 +16144,7 @@ var system_default = __spreadValues({}, molecules_exports);
   EmptyState,
   EmptyStateLayout,
   ExternalLinkButton,
+  FileInput,
   Flexbox,
   FlexboxItem,
   FormControl,