@aivenio/aquarium 1.68.0 → 1.70.0

package/dist/system.cjs

@@ -5078,7 +5078,7 @@ var InputContainer = import_react3.default.forwardRef(
       ref,
       className: classNames(
         className,
-        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default",
+        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default group",
         {
           "border px-3 py-[6px]": variant !== "readOnly",
           "cursor-default": variant === "readOnly",
@@ -5622,7 +5622,8 @@ var tailwind_theme_default = {
     "status-info": "var(--aquarium-background-color-status-info)",
     "status-warning": "var(--aquarium-background-color-status-warning)",
     "status-danger": "var(--aquarium-background-color-status-danger)",
-    "status-success": "var(--aquarium-background-color-status-success)"
+    "status-success": "var(--aquarium-background-color-status-success)",
+    "icon-button-hover": "rgba(25,25,29,.05)"
   },
   textColor: {
     "error-100": "var(--aquarium-colors-error-100, #aa0000)",
@@ -7043,6 +7044,7 @@ function useTooltipTriggerState(props = {}) {
     }
   };
   (0, import_react17.useEffect)(() => {
+    isUnmounted.current = false;
     return () => {
       isUnmounted.current = true;
       if (closeTimeout.current) {
@@ -7331,7 +7333,7 @@ var asButton = (Component, isDropdownButton) => {
           tw(
             "inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center",
             {
-              "text-default p-2 active:text-default active:bg-transparent hover:text-intense hover:bg-muted focus-visible:text-intense focus-visible:bg-muted disabled:text-inactive disabled:bg-transparent": isIconOnlyButton,
+              "text-default p-2 active:text-default active:bg-transparent hover:text-intense hover:bg-icon-button-hover focus-visible:text-intense focus-visible:bg-muted disabled:text-inactive disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
               "py-3 px-4": !dense && isButton,
@@ -9764,6 +9766,7 @@ var Wrapper = import_react55.default.forwardRef(
 );
 
 // src/molecules/Combobox/Combobox.tsx
+var import_smallCross2 = __toESM(require_smallCross());
 var ComboboxBase = (_a) => {
   var _b = _a, {
     id,
@@ -9836,7 +9839,8 @@ var ComboboxBase = (_a) => {
     highlightedIndex,
     inputValue,
     getItemProps,
-    selectedItem
+    selectedItem,
+    selectItem
   } = (0, import_downshift.useCombobox)({
     id,
     selectedItem: value,
@@ -9909,10 +9913,25 @@ var ComboboxBase = (_a) => {
       (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
     },
     onKeyUp: (e) => e.stopPropagation()
-  })), !readOnly && /* @__PURE__ */ import_react56.default.createElement(Select.Toggle, __spreadValues({
+  })), !readOnly && /* @__PURE__ */ import_react56.default.createElement(Box.Flex, {
+    alignItems: "center",
+    gap: "2"
+  }, !!inputProps.value && !disabled && /* @__PURE__ */ import_react56.default.createElement("div", {
+    className: tw("group-hover:opacity-100", {
+      "opacity-0": !hasFocus,
+      "opacity-100": hasFocus
+    })
+  }, /* @__PURE__ */ import_react56.default.createElement(Button.Icon, {
+    icon: import_smallCross2.default,
+    onClick: () => selectItem(null),
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    "aria-label": "Clear selection",
+    dense: true
+  })), /* @__PURE__ */ import_react56.default.createElement(Select.Toggle, __spreadValues({
     hasFocus,
     isOpen
-  }, getToggleButtonProps({ disabled })))), isOpen && /* @__PURE__ */ import_react56.default.createElement(PopoverOverlay, {
+  }, getToggleButtonProps({ disabled }))))), isOpen && /* @__PURE__ */ import_react56.default.createElement(PopoverOverlay, {
     ref: popoverRef,
     triggerRef: targetRef,
     state,
@@ -12071,7 +12090,7 @@ var DataList2 = (_a) => {
     getRowCheckboxLabel = getDefaultRowCheckboxLabel,
     getGroupCheckboxLabel = getDefaultGroupCheckboxLabel,
     selectedRows,
-    defaultSelectedRows,
+    defaultSelectedRows = [],
     onSelectionChange,
     toolbar
   } = _b, rest = __objRest(_b, [
@@ -12150,7 +12169,9 @@ var DataList2 = (_a) => {
   const allRows = flattenRows(rows);
   const totalSelected = (_b2 = selected == null ? void 0 : selected.length) != null ? _b2 : 0;
   const allEnabledRowIds = (0, import_compact.default)(
-    allRows.map((row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) ? void 0 : row.id)
+    allRows.map(
+      (row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) || (selectionDisabled == null ? void 0 : selectionDisabled(row, index, sortedRows)) ? void 0 : row.id
+    )
   );
   const allRowsSelected = totalSelected >= allEnabledRowIds.length;
   return /* @__PURE__ */ import_react80.default.createElement(DataListContext.Provider, {
@@ -13790,7 +13811,7 @@ var import_omit12 = __toESM(require("lodash/omit"));
 
 // src/molecules/MultiInput/InputChip.tsx
 var import_react101 = __toESM(require("react"));
-var import_smallCross2 = __toESM(require_smallCross());
+var import_smallCross3 = __toESM(require_smallCross());
 var InputChip = import_react101.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
@@ -13822,7 +13843,7 @@ var InputChip = import_react101.default.forwardRef(
       role: "button",
       "aria-label": `Remove ${String(children)}`
     }), !disabled && /* @__PURE__ */ import_react101.default.createElement(Icon, {
-      icon: import_smallCross2.default,
+      icon: import_smallCross3.default,
       className: tw({
         "text-danger-default": invalid,
         "text-default": !invalid

package/dist/system.mjs

@@ -4930,7 +4930,7 @@ var InputContainer = React2.forwardRef(
       ref,
       className: classNames(
         className,
-        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default",
+        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default group",
         {
           "border px-3 py-[6px]": variant !== "readOnly",
           "cursor-default": variant === "readOnly",
@@ -5474,7 +5474,8 @@ var tailwind_theme_default = {
     "status-info": "var(--aquarium-background-color-status-info)",
     "status-warning": "var(--aquarium-background-color-status-warning)",
     "status-danger": "var(--aquarium-background-color-status-danger)",
-    "status-success": "var(--aquarium-background-color-status-success)"
+    "status-success": "var(--aquarium-background-color-status-success)",
+    "icon-button-hover": "rgba(25,25,29,.05)"
   },
   textColor: {
     "error-100": "var(--aquarium-colors-error-100, #aa0000)",
@@ -6895,6 +6896,7 @@ function useTooltipTriggerState(props = {}) {
     }
   };
   useEffect3(() => {
+    isUnmounted.current = false;
     return () => {
       isUnmounted.current = true;
       if (closeTimeout.current) {
@@ -7183,7 +7185,7 @@ var asButton = (Component, isDropdownButton) => {
           tw(
             "inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center",
             {
-              "text-default p-2 active:text-default active:bg-transparent hover:text-intense hover:bg-muted focus-visible:text-intense focus-visible:bg-muted disabled:text-inactive disabled:bg-transparent": isIconOnlyButton,
+              "text-default p-2 active:text-default active:bg-transparent hover:text-intense hover:bg-icon-button-hover focus-visible:text-intense focus-visible:bg-muted disabled:text-inactive disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
               "py-3 px-4": !dense && isButton,
@@ -9616,6 +9618,7 @@ var Wrapper = React50.forwardRef(
 );
 
 // src/molecules/Combobox/Combobox.tsx
+var import_smallCross2 = __toESM(require_smallCross());
 var ComboboxBase = (_a) => {
   var _b = _a, {
     id,
@@ -9688,7 +9691,8 @@ var ComboboxBase = (_a) => {
     highlightedIndex,
     inputValue,
     getItemProps,
-    selectedItem
+    selectedItem,
+    selectItem
   } = useCombobox({
     id,
     selectedItem: value,
@@ -9761,10 +9765,25 @@ var ComboboxBase = (_a) => {
       (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
     },
     onKeyUp: (e) => e.stopPropagation()
-  })), !readOnly && /* @__PURE__ */ React51.createElement(Select.Toggle, __spreadValues({
+  })), !readOnly && /* @__PURE__ */ React51.createElement(Box.Flex, {
+    alignItems: "center",
+    gap: "2"
+  }, !!inputProps.value && !disabled && /* @__PURE__ */ React51.createElement("div", {
+    className: tw("group-hover:opacity-100", {
+      "opacity-0": !hasFocus,
+      "opacity-100": hasFocus
+    })
+  }, /* @__PURE__ */ React51.createElement(Button.Icon, {
+    icon: import_smallCross2.default,
+    onClick: () => selectItem(null),
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    "aria-label": "Clear selection",
+    dense: true
+  })), /* @__PURE__ */ React51.createElement(Select.Toggle, __spreadValues({
     hasFocus,
     isOpen
-  }, getToggleButtonProps({ disabled })))), isOpen && /* @__PURE__ */ React51.createElement(PopoverOverlay, {
+  }, getToggleButtonProps({ disabled }))))), isOpen && /* @__PURE__ */ React51.createElement(PopoverOverlay, {
     ref: popoverRef,
     triggerRef: targetRef,
     state,
@@ -11923,7 +11942,7 @@ var DataList2 = (_a) => {
     getRowCheckboxLabel = getDefaultRowCheckboxLabel,
     getGroupCheckboxLabel = getDefaultGroupCheckboxLabel,
     selectedRows,
-    defaultSelectedRows,
+    defaultSelectedRows = [],
     onSelectionChange,
     toolbar
   } = _b, rest = __objRest(_b, [
@@ -12002,7 +12021,9 @@ var DataList2 = (_a) => {
   const allRows = flattenRows(rows);
   const totalSelected = (_b2 = selected == null ? void 0 : selected.length) != null ? _b2 : 0;
   const allEnabledRowIds = compact(
-    allRows.map((row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) ? void 0 : row.id)
+    allRows.map(
+      (row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) || (selectionDisabled == null ? void 0 : selectionDisabled(row, index, sortedRows)) ? void 0 : row.id
+    )
   );
   const allRowsSelected = totalSelected >= allEnabledRowIds.length;
   return /* @__PURE__ */ React72.createElement(DataListContext.Provider, {
@@ -13642,7 +13663,7 @@ import omit12 from "lodash/omit";
 
 // src/molecules/MultiInput/InputChip.tsx
 import React92 from "react";
-var import_smallCross2 = __toESM(require_smallCross());
+var import_smallCross3 = __toESM(require_smallCross());
 var InputChip = React92.forwardRef(
   (_a, ref) => {
     var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
@@ -13674,7 +13695,7 @@ var InputChip = React92.forwardRef(
       role: "button",
       "aria-label": `Remove ${String(children)}`
     }), !disabled && /* @__PURE__ */ React92.createElement(Icon, {
-      icon: import_smallCross2.default,
+      icon: import_smallCross3.default,
       className: tw({
         "text-danger-default": invalid,
         "text-default": !invalid

package/dist/tailwind.config.js

@@ -70,6 +70,7 @@ const originalTheme = {
       'status-warning': 'var(--aquarium-colors-warning-5)',
       'status-danger': 'var(--aquarium-colors-error-5)',
       'status-success': 'var(--aquarium-colors-success-5)',
+      'icon-button-hover': 'rgba(25,25,29,.05)', // rgb value is from grey-100
     },
     textColor: {
       'inactive': 'var(--aquarium-colors-grey-40)',

package/dist/tailwind.theme.json

@@ -385,7 +385,8 @@
     "status-info": "var(--aquarium-background-color-status-info)",
     "status-warning": "var(--aquarium-background-color-status-warning)",
     "status-danger": "var(--aquarium-background-color-status-danger)",
-    "status-success": "var(--aquarium-background-color-status-success)"
+    "status-success": "var(--aquarium-background-color-status-success)",
+    "icon-button-hover": "rgba(25,25,29,.05)"
   },
   "textColor": {
     "error-100": "var(--aquarium-colors-error-100, #aa0000)",