@aivenio/aquarium 1.11.0 → 1.12.0

package/dist/system.cjs

@@ -1640,6 +1640,7 @@ __export(system_exports, {
   TagLabel: () => TagLabel,
   Tailwindify: () => Tailwindify,
   Template: () => Template,
+  TextButton: () => TextButton,
   Textarea: () => Textarea,
   TextareaBase: () => TextareaBase,
   Timeline: () => Timeline2,
@@ -1775,6 +1776,7 @@ __export(molecules_exports, {
   TagLabel: () => TagLabel,
   Tailwindify: () => Tailwindify,
   Template: () => Template,
+  TextButton: () => TextButton,
   Textarea: () => Textarea,
   TextareaBase: () => TextareaBase,
   Timeline: () => Timeline2,
@@ -2014,9 +2016,6 @@ var Select = {
 var import_react14 = __toESM(require("react"));
 var import_omit = __toESM(require("lodash/omit"));
 
-// src/atoms/Alert/Alert.tsx
-var import_react13 = __toESM(require("react"));
-
 // src/molecules/Button/Button.tsx
 var import_react11 = __toESM(require("react"));
 
@@ -2843,6 +2842,7 @@ var Flexbox = Tailwindify(
 
 // src/molecules/Tooltip/Tooltip.tsx
 var import_react10 = __toESM(require("react"));
+var import_interactions = require("@react-aria/interactions");
 var import_overlays3 = require("@react-aria/overlays");
 var import_tooltip = require("@react-aria/tooltip");
 var import_utils = require("@react-aria/utils");
@@ -2980,6 +2980,9 @@ var Tooltip = (_a) => {
     shouldFlip,
     offset: ARROW_OFFSET
   });
+  const { focusWithinProps } = (0, import_interactions.useFocusWithin)({
+    onFocusWithinChange: (isFocusWithin) => isFocusWithin ? state.open() : state.close()
+  });
   const handleClick = (e) => {
     var _a2, _b2;
     (_a2 = props.onClick) == null ? void 0 : _a2.call(props, e);
@@ -3008,6 +3011,16 @@ var Tooltip = (_a) => {
   return /* @__PURE__ */ import_react10.default.createElement("div", __spreadProps(__spreadValues({
     className: tw(`${inline ? "inline-block" : "block"}`)
   }, triggerProps), {
+    onFocus: (e) => {
+      var _a2, _b2;
+      (_a2 = triggerProps.onFocus) == null ? void 0 : _a2.call(triggerProps, e);
+      (_b2 = focusWithinProps.onFocus) == null ? void 0 : _b2.call(focusWithinProps, e);
+    },
+    onBlur: (e) => {
+      var _a2, _b2;
+      (_a2 = triggerProps.onBlur) == null ? void 0 : _a2.call(triggerProps, e);
+      (_b2 = focusWithinProps.onBlur) == null ? void 0 : _b2.call(focusWithinProps, e);
+    },
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onMouseUp: handleMouseUp,
@@ -3102,6 +3115,7 @@ var COLOR_CLASSNAMES = {
     "hover:ring-grey-50 hover:text-grey-80 disabled:text-grey-30 disabled:bg-grey-0 disabled:ring-grey-20"
   ),
   "ghost": ghostButtonStyle,
+  "text": ghostButtonStyle,
   "secondary-ghost": tw(
     "text-grey-60 active:text-grey-50 focus-visible:text-grey-80 hover:text-grey-80 disabled:text-grey-30"
   )
@@ -3201,7 +3215,7 @@ var asButton = (Component, isDropdownButton) => {
           !isIconOnlyButton && COLOR_CLASSNAMES[kind],
           tw("inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative", {
             "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
-            "typography-default-strong": !dense && !isIconOnlyButton,
+            "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
             "typography-small-strong": dense && !isIconOnlyButton,
             "py-3 px-4": !dense && isButton,
             "py-2 px-3": dense && isButton,
@@ -3255,6 +3269,12 @@ var SecondaryGhostButton = import_react11.default.forwardRef((props, ref) => /*
   kind: "secondary-ghost"
 })));
 SecondaryGhostButton.displayName = "SecondaryGhostButton";
+var TextButton = import_react11.default.forwardRef((props, ref) => /* @__PURE__ */ import_react11.default.createElement(Button, __spreadProps(__spreadValues({
+  ref
+}, props), {
+  kind: "text"
+})));
+TextButton.displayName = "TextButton";
 var IconButton = import_react11.default.forwardRef((props, ref) => /* @__PURE__ */ import_react11.default.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
@@ -3286,6 +3306,9 @@ var SecondaryDropdownButton = import_react11.default.forwardRef((props, ref) =>
 })));
 SecondaryDropdownButton.displayName = "SecondaryDropdownButton";
 
+// src/atoms/Alert/Alert.tsx
+var import_react13 = __toESM(require("react"));
+
 // src/atoms/Typography/Typography.tsx
 var import_react12 = __toESM(require("react"));
 var import_isUndefined5 = __toESM(require("lodash/isUndefined"));
@@ -3413,14 +3436,18 @@ Alert.Dismiss = (_a) => {
 };
 
 // src/molecules/Alert/Alert.tsx
-var Alert2 = ({ description, type, title, action, onDismiss, children }) => /* @__PURE__ */ import_react14.default.createElement(Alert, {
+var isLink = (action) => action.href !== void 0;
+var Alert2 = ({ description, type, title, onDismiss, children, action }) => /* @__PURE__ */ import_react14.default.createElement(Alert, {
   type,
   dense: Boolean(title)
 }, /* @__PURE__ */ import_react14.default.createElement(Alert.Icon, {
   type,
   dense: Boolean(title)
-}), title && /* @__PURE__ */ import_react14.default.createElement(Alert.Title, null, title), /* @__PURE__ */ import_react14.default.createElement(Alert.Description, null, children || description), action && /* @__PURE__ */ import_react14.default.createElement(Alert.Actions, null, /* @__PURE__ */ import_react14.default.createElement(GhostButton, __spreadValues({
+}), title && /* @__PURE__ */ import_react14.default.createElement(Alert.Title, null, title), /* @__PURE__ */ import_react14.default.createElement(Alert.Description, null, children || description), action && /* @__PURE__ */ import_react14.default.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ import_react14.default.createElement(GhostButton, __spreadValues({
   dense: true
+}, (0, import_omit.default)(action, "text")), action.text), isLink(action) && /* @__PURE__ */ import_react14.default.createElement(ExternalLinkButton, __spreadValues({
+  dense: true,
+  kind: "ghost"
 }, (0, import_omit.default)(action, "text")), action.text)), onDismiss && /* @__PURE__ */ import_react14.default.createElement(Alert.Dismiss, {
   onClick: onDismiss
 }));
@@ -4256,7 +4283,8 @@ var CompactCard = ({
   }), /* @__PURE__ */ import_react30.default.createElement(Card.Content, {
     dense: true
   }, clampTitle ? /* @__PURE__ */ import_react30.default.createElement(LineClamp, {
-    lines: clampTitle
+    lines: clampTitle,
+    wordBreak: "break-all"
   }, titleContent) : titleContent, /* @__PURE__ */ import_react30.default.createElement(Typography2.Caption, {
     color: "grey-70"
   }, children))), (action || link) && /* @__PURE__ */ import_react30.default.createElement(Card.Actions, {
@@ -4826,6 +4854,7 @@ var LabelText = ({
     content: helpTooltip,
     placement: helpTooltipPlacement
   }, /* @__PURE__ */ import_react41.default.createElement("span", {
+    tabIndex: 0,
     className: tw("text-grey-30 flex items-center cursor-pointer ml-2")
   }, /* @__PURE__ */ import_react41.default.createElement(InlineIcon, {
     icon: import_questionMark.default,
@@ -5919,7 +5948,7 @@ var import_react62 = __toESM(require("react"));
 
 // src/molecules/Popover/Popover.tsx
 var import_react61 = __toESM(require("react"));
-var import_interactions = require("@react-aria/interactions");
+var import_interactions2 = require("@react-aria/interactions");
 var import_overlays8 = require("@react-aria/overlays");
 var import_utils5 = require("@react-aria/utils");
 var import_overlays9 = require("@react-stately/overlays");
@@ -5973,7 +6002,7 @@ var Popover2 = (props) => {
     }
   }, import_react61.default.Children.map(props.children, (child) => {
     if (isComponentType(child, Popover2.Trigger)) {
-      return /* @__PURE__ */ import_react61.default.createElement(import_interactions.PressResponder, __spreadValues({
+      return /* @__PURE__ */ import_react61.default.createElement(import_interactions2.PressResponder, __spreadValues({
         ref: triggerRef,
         onPress: state.toggle
       }, triggerProps), /* @__PURE__ */ import_react61.default.createElement(PopoverTriggerWrapper, {
@@ -6028,7 +6057,7 @@ var PopoverTriggerWrapper = (_a) => {
   var _a2;
   const ref = (0, import_react61.useRef)(null);
   const trigger = import_react61.default.Children.only(children);
-  const { pressProps } = (0, import_interactions.usePress)(__spreadProps(__spreadValues({}, rest), { ref }));
+  const { pressProps } = (0, import_interactions2.usePress)(__spreadProps(__spreadValues({}, rest), { ref }));
   return import_react61.default.cloneElement(trigger, __spreadProps(__spreadValues({
     "ref": ref
   }, (0, import_utils5.mergeProps)(pressProps, trigger.props)), {
@@ -6143,7 +6172,10 @@ var DropdownItem = (_a) => {
     content: tooltip,
     placement: tooltipPlacement,
     inline: false
-  }, itemContent) : itemContent);
+  }, /* @__PURE__ */ import_react62.default.createElement("div", {
+    tabIndex: 0,
+    className: tw("grow")
+  }, itemContent)) : itemContent);
 };
 Dropdown.Menu = DropdownMenu;
 Dropdown.Item = DropdownItem;
@@ -6151,7 +6183,7 @@ Dropdown.Item = DropdownItem;
 // src/molecules/DropdownMenu/DropdownMenu.tsx
 var import_react66 = __toESM(require("react"));
 var import_i18n = require("@react-aria/i18n");
-var import_interactions2 = require("@react-aria/interactions");
+var import_interactions3 = require("@react-aria/interactions");
 var import_menu = require("@react-aria/menu");
 var import_overlays10 = require("@react-aria/overlays");
 var import_separator = require("@react-aria/separator");
@@ -6441,7 +6473,7 @@ var DropdownMenu3 = (_a) => {
     shouldFlip: true,
     isOpen: state.isOpen
   });
-  return /* @__PURE__ */ import_react66.default.createElement("div", null, /* @__PURE__ */ import_react66.default.createElement(import_interactions2.PressResponder, __spreadValues({
+  return /* @__PURE__ */ import_react66.default.createElement("div", null, /* @__PURE__ */ import_react66.default.createElement(import_interactions3.PressResponder, __spreadValues({
     ref: triggerRef,
     onPress: () => state.toggle()
   }, menuTriggerProps), /* @__PURE__ */ import_react66.default.createElement(TriggerWrapper, null, trigger.props.children)), /* @__PURE__ */ import_react66.default.createElement(PopoverWrapper, __spreadValues({
@@ -6477,7 +6509,7 @@ DropdownMenu3.Section.displayName = "DropdownMenu.Section";
 var TriggerWrapper = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   const ref = import_react66.default.useRef(null);
-  const { pressProps } = (0, import_interactions2.usePress)(__spreadProps(__spreadValues({}, props), { ref }));
+  const { pressProps } = (0, import_interactions3.usePress)(__spreadProps(__spreadValues({}, props), { ref }));
   const trigger = import_react66.default.Children.only(children);
   if (!trigger || !import_react66.default.isValidElement(trigger)) {
     throw new Error("<DropdownMenu.Trigger> must have valid child");
@@ -9332,6 +9364,7 @@ var system_default = __spreadProps(__spreadValues({}, molecules_exports), {
   TagLabel,
   Tailwindify,
   Template,
+  TextButton,
   Textarea,
   TextareaBase,
   Timeline,

package/dist/system.mjs

@@ -1635,6 +1635,7 @@ __export(molecules_exports, {
   TagLabel: () => TagLabel,
   Tailwindify: () => Tailwindify,
   Template: () => Template,
+  TextButton: () => TextButton,
   Textarea: () => Textarea,
   TextareaBase: () => TextareaBase,
   Timeline: () => Timeline2,
@@ -1877,9 +1878,6 @@ var Select = {
 import React10 from "react";
 import omit from "lodash/omit";
 
-// src/atoms/Alert/Alert.tsx
-import React9 from "react";
-
 // src/molecules/Button/Button.tsx
 import React7 from "react";
 
@@ -2706,6 +2704,7 @@ var Flexbox = Tailwindify(
 
 // src/molecules/Tooltip/Tooltip.tsx
 import React6 from "react";
+import { useFocusWithin } from "@react-aria/interactions";
 import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
 import { useTooltip, useTooltipTrigger } from "@react-aria/tooltip";
 import { mergeProps } from "@react-aria/utils";
@@ -2843,6 +2842,9 @@ var Tooltip = (_a) => {
     shouldFlip,
     offset: ARROW_OFFSET
   });
+  const { focusWithinProps } = useFocusWithin({
+    onFocusWithinChange: (isFocusWithin) => isFocusWithin ? state.open() : state.close()
+  });
   const handleClick = (e) => {
     var _a2, _b2;
     (_a2 = props.onClick) == null ? void 0 : _a2.call(props, e);
@@ -2871,6 +2873,16 @@ var Tooltip = (_a) => {
   return /* @__PURE__ */ React6.createElement("div", __spreadProps(__spreadValues({
     className: tw(`${inline ? "inline-block" : "block"}`)
   }, triggerProps), {
+    onFocus: (e) => {
+      var _a2, _b2;
+      (_a2 = triggerProps.onFocus) == null ? void 0 : _a2.call(triggerProps, e);
+      (_b2 = focusWithinProps.onFocus) == null ? void 0 : _b2.call(focusWithinProps, e);
+    },
+    onBlur: (e) => {
+      var _a2, _b2;
+      (_a2 = triggerProps.onBlur) == null ? void 0 : _a2.call(triggerProps, e);
+      (_b2 = focusWithinProps.onBlur) == null ? void 0 : _b2.call(focusWithinProps, e);
+    },
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onMouseUp: handleMouseUp,
@@ -2965,6 +2977,7 @@ var COLOR_CLASSNAMES = {
     "hover:ring-grey-50 hover:text-grey-80 disabled:text-grey-30 disabled:bg-grey-0 disabled:ring-grey-20"
   ),
   "ghost": ghostButtonStyle,
+  "text": ghostButtonStyle,
   "secondary-ghost": tw(
     "text-grey-60 active:text-grey-50 focus-visible:text-grey-80 hover:text-grey-80 disabled:text-grey-30"
   )
@@ -3064,7 +3077,7 @@ var asButton = (Component, isDropdownButton) => {
           !isIconOnlyButton && COLOR_CLASSNAMES[kind],
           tw("inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative", {
             "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
-            "typography-default-strong": !dense && !isIconOnlyButton,
+            "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
             "typography-small-strong": dense && !isIconOnlyButton,
             "py-3 px-4": !dense && isButton,
             "py-2 px-3": dense && isButton,
@@ -3118,6 +3131,12 @@ var SecondaryGhostButton = React7.forwardRef((props, ref) => /* @__PURE__ */ Rea
   kind: "secondary-ghost"
 })));
 SecondaryGhostButton.displayName = "SecondaryGhostButton";
+var TextButton = React7.forwardRef((props, ref) => /* @__PURE__ */ React7.createElement(Button, __spreadProps(__spreadValues({
+  ref
+}, props), {
+  kind: "text"
+})));
+TextButton.displayName = "TextButton";
 var IconButton = React7.forwardRef((props, ref) => /* @__PURE__ */ React7.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
@@ -3149,6 +3168,9 @@ var SecondaryDropdownButton = React7.forwardRef((props, ref) => /* @__PURE__ */
 })));
 SecondaryDropdownButton.displayName = "SecondaryDropdownButton";
 
+// src/atoms/Alert/Alert.tsx
+import React9 from "react";
+
 // src/atoms/Typography/Typography.tsx
 var import_resolveTheme = __toESM(require_resolveTheme());
 import React8 from "react";
@@ -3276,14 +3298,18 @@ Alert.Dismiss = (_a) => {
 };
 
 // src/molecules/Alert/Alert.tsx
-var Alert2 = ({ description, type, title, action, onDismiss, children }) => /* @__PURE__ */ React10.createElement(Alert, {
+var isLink = (action) => action.href !== void 0;
+var Alert2 = ({ description, type, title, onDismiss, children, action }) => /* @__PURE__ */ React10.createElement(Alert, {
   type,
   dense: Boolean(title)
 }, /* @__PURE__ */ React10.createElement(Alert.Icon, {
   type,
   dense: Boolean(title)
-}), title && /* @__PURE__ */ React10.createElement(Alert.Title, null, title), /* @__PURE__ */ React10.createElement(Alert.Description, null, children || description), action && /* @__PURE__ */ React10.createElement(Alert.Actions, null, /* @__PURE__ */ React10.createElement(GhostButton, __spreadValues({
+}), title && /* @__PURE__ */ React10.createElement(Alert.Title, null, title), /* @__PURE__ */ React10.createElement(Alert.Description, null, children || description), action && /* @__PURE__ */ React10.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ React10.createElement(GhostButton, __spreadValues({
   dense: true
+}, omit(action, "text")), action.text), isLink(action) && /* @__PURE__ */ React10.createElement(ExternalLinkButton, __spreadValues({
+  dense: true,
+  kind: "ghost"
 }, omit(action, "text")), action.text)), onDismiss && /* @__PURE__ */ React10.createElement(Alert.Dismiss, {
   onClick: onDismiss
 }));
@@ -4119,7 +4145,8 @@ var CompactCard = ({
   }), /* @__PURE__ */ React25.createElement(Card.Content, {
     dense: true
   }, clampTitle ? /* @__PURE__ */ React25.createElement(LineClamp, {
-    lines: clampTitle
+    lines: clampTitle,
+    wordBreak: "break-all"
   }, titleContent) : titleContent, /* @__PURE__ */ React25.createElement(Typography2.Caption, {
     color: "grey-70"
   }, children))), (action || link) && /* @__PURE__ */ React25.createElement(Card.Actions, {
@@ -4689,6 +4716,7 @@ var LabelText = ({
     content: helpTooltip,
     placement: helpTooltipPlacement
   }, /* @__PURE__ */ React36.createElement("span", {
+    tabIndex: 0,
     className: tw("text-grey-30 flex items-center cursor-pointer ml-2")
   }, /* @__PURE__ */ React36.createElement(InlineIcon, {
     icon: import_questionMark.default,
@@ -6006,7 +6034,10 @@ var DropdownItem = (_a) => {
     content: tooltip,
     placement: tooltipPlacement,
     inline: false
-  }, itemContent) : itemContent);
+  }, /* @__PURE__ */ React56.createElement("div", {
+    tabIndex: 0,
+    className: tw("grow")
+  }, itemContent)) : itemContent);
 };
 Dropdown.Menu = DropdownMenu;
 Dropdown.Item = DropdownItem;
@@ -9195,6 +9226,7 @@ export {
   TagLabel,
   Tailwindify,
   Template,
+  TextButton,
   Textarea,
   TextareaBase,
   Timeline2 as Timeline,