@aivenio/aquarium 3.0.0 → 3.1.0

package/dist/system.mjs

@@ -1388,6 +1388,22 @@ var require_database02 = __commonJS({
   }
 });
 
+// src/icons/databaseArrow.js
+var require_databaseArrow = __commonJS({
+  "src/icons/databaseArrow.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 3.333c0 1.105-2.686 2-6 2s-6-.895-6-2m12 0c0-1.104-2.686-2-6-2s-6 .896-6 2m12 0v3.212M2 3.333v9.334c0 1.106 2.667 2 6 2m6-8.187c0 1.107-2.667 2-6 2s-6-.893-6-2m6 5.147c-3.333 0-6-.894-6-2m12.91 2.737-2.183-2.182m0 0-2.181 2.182m2.181-2.182v4.364"/>',
+      "left": 0,
+      "top": 0,
+      "width": 16,
+      "height": 16
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/database.js
 var require_database = __commonJS({
   "src/icons/database.js"(exports) {
@@ -4471,7 +4487,7 @@ var InputContainer = React2.forwardRef(
           "border-danger-default": variant === "error",
           "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
           "border-info-default": variant === "focused",
-          "bg-body": variant !== "disabled",
+          "bg-transparent": variant !== "disabled",
           "cursor-not-allowed border-default bg-default": variant === "disabled"
         }
       ),
@@ -4487,12 +4503,11 @@ var Input = React2.forwardRef(({ className, required, ...props }, ref) => /* @__
     "aria-required": required,
     className: classNames(
       className,
-      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
+      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small bg-transparent disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
       {
         "text-default": !props.disabled,
         "text-inactive": props.disabled,
-        "bg-body": !props.readOnly,
-        "cursor-default bg-transparent": props.readOnly
+        "cursor-default": props.readOnly
       }
     ),
     ...props
@@ -4504,7 +4519,7 @@ var Menu = React2.forwardRef(
     {
       ref,
       style: { maxHeight },
-      className: classNames(className, tw("text-default bg-body overflow-y-auto")),
+      className: classNames(className, tw("text-default bg-popover-content overflow-y-auto")),
       ...props
     },
     children
@@ -4533,7 +4548,7 @@ var Item = React2.forwardRef(
     "li",
     {
       ref,
-      className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
+      className: classNames("Aquarium-Select.Item", className, "flex items-center gap-x-3 p-3 typography-small", {
         "cursor-pointer hover:bg-muted": !props["aria-disabled"],
         "cursor-not-allowed opacity-40 grayscale": props["aria-disabled"],
         "bg-muted": highlighted
@@ -4685,6 +4700,7 @@ var import_currencyDollar = __toESM(require_currencyDollar());
 var import_dashboard = __toESM(require_dashboard());
 var import_dataLineage = __toESM(require_dataLineage());
 var import_database02 = __toESM(require_database02());
+var import_databaseArrow = __toESM(require_databaseArrow());
 var import_database = __toESM(require_database());
 var import_dataflow01 = __toESM(require_dataflow01());
 var import_dataflow02 = __toESM(require_dataflow02());
@@ -7084,7 +7100,7 @@ var Arrow = (props) => {
 var getCommonInputStyles = ({ readOnly, valid }) => tw(
   "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-default typography-small text-default disabled:text-inactive placeholder:text-inactive focus:outline-none",
   {
-    "px-3 py-3 bg-body": !readOnly,
+    "px-3 py-3 bg-transparent": !readOnly,
     "border-none resize-none cursor-default bg-transparent": readOnly,
     "border border-danger-default": !valid && !readOnly,
     "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
@@ -9318,8 +9334,22 @@ import React49 from "react";
 
 // src/utils/form/FormControl/FormControl.tsx
 import React46 from "react";
-var FormControl = ({ className, inline, children }) => {
-  return /* @__PURE__ */ React46.createElement(Box.Flex, { flexDirection: "column", display: inline ? "inline-flex" : "flex", className }, children);
+var FormControl = ({
+  className,
+  inline,
+  children,
+  "data-testid": dataTestId
+}) => {
+  return /* @__PURE__ */ React46.createElement(
+    Box.Flex,
+    {
+      "data-testid": dataTestId,
+      flexDirection: "column",
+      display: inline ? "inline-flex" : "flex",
+      className
+    },
+    children
+  );
 };
 
 // src/utils/form/HelperText/HelperText.tsx
@@ -9421,11 +9451,13 @@ var LabelControl = ({
   valid,
   disabled,
   className,
+  htmlFor,
+  "data-testid": dataTestId,
   ...rest
 }) => {
   const legacyError = error2 !== void 0 && valid === false;
   const variant = !valid || legacyError ? "error" : disabled ? "disabled" : "default";
-  return /* @__PURE__ */ React49.createElement(FormControl, { className }, !fieldset && /* @__PURE__ */ React49.createElement(Label2, { ...rest, variant }, children), fieldset && /* @__PURE__ */ React49.createElement("fieldset", { id: rest.id }, /* @__PURE__ */ React49.createElement("legend", { className: tw("w-full mb-2") }, /* @__PURE__ */ React49.createElement(LabelText, { ...rest, variant })), children), /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React49.createElement(FormControl, { "data-testid": dataTestId, className }, !fieldset && !!htmlFor && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(Label2, { ...rest, htmlFor, variant }), children), !fieldset && !htmlFor && /* @__PURE__ */ React49.createElement(Label2, { ...rest, variant }, children), fieldset && /* @__PURE__ */ React49.createElement("fieldset", { id: rest.id }, /* @__PURE__ */ React49.createElement("legend", { className: tw("w-full mb-2") }, /* @__PURE__ */ React49.createElement(LabelText, { ...rest, variant })), children), /* @__PURE__ */ React49.createElement(
     HelperText,
     {
       messageId,
@@ -10145,7 +10177,6 @@ var _SelectBase = (props) => {
     emptyState,
     actions,
     children,
-    labelWrapper,
     ...rest
   } = withDefaults;
   const [hasFocus, setFocus] = useState8(false);
@@ -10230,7 +10261,7 @@ var _SelectBase = (props) => {
     !readOnly && /* @__PURE__ */ React58.createElement(Select.Toggle, { disabled, isOpen, tabIndex: -1 })
   );
   const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
-  return /* @__PURE__ */ React58.createElement("div", { className: classNames("Aquarium-SelectBase", tw("relative")) }, labelWrapper ? React58.cloneElement(labelWrapper, { children: input }) : input, isOpen && /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React58.createElement("div", { className: classNames("Aquarium-SelectBase", tw("relative")) }, input, isOpen && /* @__PURE__ */ React58.createElement(
     PopoverOverlay,
     {
       state,
@@ -10254,7 +10285,7 @@ var _SelectBase = (props) => {
     ))))
   ));
 };
-var SelectBase = (props) => /* @__PURE__ */ React58.createElement(_SelectBase, { ...props, labelWrapper: void 0 });
+var SelectBase = (props) => /* @__PURE__ */ React58.createElement(_SelectBase, { ...props });
 var SelectBaseSkeleton = () => /* @__PURE__ */ React58.createElement(Skeleton, { height: 38 });
 SelectBase.Skeleton = SelectBaseSkeleton;
 var Select2 = ({
@@ -10267,31 +10298,27 @@ var Select2 = ({
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
   const baseProps = omit6(props, without(Object.keys(labelProps), "required"));
-  const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
-  const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
-  const label = /* @__PURE__ */ React58.createElement(Label2, { id: `${id}-label`, htmlFor: `${id}-input`, variant, messageId: errorMessageId, ...labelProps });
-  return /* @__PURE__ */ React58.createElement(FormControl, { className: "Aquarium-Select" }, /* @__PURE__ */ React58.createElement(
-    _SelectBase,
-    {
-      ...baseProps,
-      ...errorProps,
-      id: `${id}-input`,
-      options,
-      disabled: props.disabled,
-      valid: props.valid,
-      labelWrapper: label
-    }
-  ), /* @__PURE__ */ React58.createElement(
-    HelperText,
+  return /* @__PURE__ */ React58.createElement(
+    LabelControl,
     {
+      id: `${id}-label`,
+      htmlFor: `${id}-input`,
       messageId: errorMessageId,
-      error: !labelProps.valid,
-      helperText: labelProps.helperText,
-      length: labelProps.length,
-      maxLength: labelProps.maxLength,
-      reserveSpaceForError: labelProps.reserveSpaceForError
-    }
-  ));
+      ...labelProps,
+      className: "Aquarium-Select"
+    },
+    /* @__PURE__ */ React58.createElement(
+      _SelectBase,
+      {
+        ...baseProps,
+        ...errorProps,
+        id: `${id}-input`,
+        options,
+        disabled: props.disabled,
+        valid: props.valid
+      }
+    )
+  );
 };
 var SelectSkeleton = () => /* @__PURE__ */ React58.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React58.createElement(SelectBase.Skeleton, null));
 Select2.Skeleton = SelectSkeleton;
@@ -12264,7 +12291,7 @@ var fieldBorder = tv2({
   }
 });
 var fieldGroup = tv2({
-  base: "group flex items-center bg-body border rounded-sm typography-small text-default px-3 py-3 overflow-hidden",
+  base: "group flex items-center bg-transparent border rounded-sm typography-small text-default px-3 py-3 overflow-hidden",
   variants: fieldBorder.variants
 });
 
@@ -12343,7 +12370,7 @@ var ButtonBase = ({
       ...props,
       className: classNames(
         className,
-        tw("group-hover:opacity-100 py-1 ", {
+        tw("group-hover:opacity-100 p-0", {
           "opacity-0 group-focus-within:opacity-100": !hideWhenParentIsNotHoveredOrFocused
         })
       )
@@ -12502,7 +12529,7 @@ var createDatePickerBase = (variant) => ({
       isInvalid: valid === false,
       granularity: granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0)
     },
-    /* @__PURE__ */ React83.createElement(FieldGroup, { className: tw("min-w-[210px] w-auto") }, /* @__PURE__ */ React83.createElement(DateInput, { className: tw("flex-1") }), clearSelectionEnabled && !disabled && /* @__PURE__ */ React83.createElement(DatePickerClearButton, null), /* @__PURE__ */ React83.createElement(CalendarButton, null)),
+    /* @__PURE__ */ React83.createElement(FieldGroup, { className: tw("min-w-[210px] w-auto") }, /* @__PURE__ */ React83.createElement(DateInput, { className: tw("flex-1") }), /* @__PURE__ */ React83.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ React83.createElement(DatePickerClearButton, null), /* @__PURE__ */ React83.createElement(CalendarButton, null))),
     /* @__PURE__ */ React83.createElement(Popover2, { offset: 0 }, /* @__PURE__ */ React83.createElement(Dialog, null, /* @__PURE__ */ React83.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ React83.createElement(Calendar, null), variant === "datetime" && /* @__PURE__ */ React83.createElement(PickerTimeField, { granularity }), errorMessage && /* @__PURE__ */ React83.createElement(Text, { slot: "errorMessage", className: tw("typography-caption text-danger-default max-w-[300px]") }, errorMessage))))
   );
 };
@@ -12642,7 +12669,7 @@ var createDateRangePickerBase = (variant) => ({
       granularity: granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0),
       className: tw("group flex flex-col gap-1")
     },
-    /* @__PURE__ */ React85.createElement(FieldGroup, { className: tw("min-w-[200px] w-auto gap-2") }, /* @__PURE__ */ React85.createElement(DateInput, { slot: "start", className: tw("px-2 py-1") }), /* @__PURE__ */ React85.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ React85.createElement(DateInput, { slot: "end", className: tw("flex-1 px-2 py-1") }), clearSelectionEnabled && !disabled && /* @__PURE__ */ React85.createElement(DateRangePickerClearButton, null), /* @__PURE__ */ React85.createElement(CalendarButton, null)),
+    /* @__PURE__ */ React85.createElement(FieldGroup, { className: tw("min-w-[200px] w-auto gap-2") }, /* @__PURE__ */ React85.createElement(DateInput, { slot: "start", className: tw("px-2 py-1") }), /* @__PURE__ */ React85.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ React85.createElement(DateInput, { slot: "end", className: tw("flex-1 px-2 py-1") }), /* @__PURE__ */ React85.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ React85.createElement(DateRangePickerClearButton, null), /* @__PURE__ */ React85.createElement(CalendarButton, null))),
     /* @__PURE__ */ React85.createElement(Popover2, { offset: 0 }, /* @__PURE__ */ React85.createElement(Dialog, null, /* @__PURE__ */ React85.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ React85.createElement(RangeCalendar, null), variant === "datetime" && /* @__PURE__ */ React85.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ React85.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React85.createElement(PickerTimeField2, { granularity, part: "start" })), /* @__PURE__ */ React85.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React85.createElement(PickerTimeField2, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ React85.createElement(Text2, { slot: "errorMessage", className: tw("typography-caption text-danger-default max-w-[300px]") }, errorMessage))))
   );
 };
@@ -14328,8 +14355,8 @@ var NativeSelectBase = React106.forwardRef(
           tw(
             "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-default placeholder:text-inactive focus:outline-none",
             {
-              "px-3 py-3 bg-body disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
-              "px-0 py-3 border-none": readOnly,
+              "px-3 py-3 bg-transparent disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
+              "px-0 py-3 border-none bg-transparent": readOnly,
               "border border-danger-default": !valid && !readOnly,
               "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
             }