@aivenio/aquarium 1.13.0-rc1 → 1.14.0

package/dist/system.cjs

@@ -221,7 +221,7 @@ var require_tokens = __commonJS({
                 style: {
                   fontFamily: "Inter",
                   fontSize: "16px",
-                  fontWeight: 600,
+                  fontWeight: 500,
                   fontStyle: "normal",
                   lineHeight: 1.5,
                   textTransform: "none"
@@ -247,7 +247,7 @@ var require_tokens = __commonJS({
                 style: {
                   fontFamily: "Inter",
                   fontSize: "14px",
-                  fontWeight: 600,
+                  fontWeight: 500,
                   fontStyle: "normal",
                   lineHeight: 1.42,
                   textTransform: "none"
@@ -781,7 +781,7 @@ var require_tokens = __commonJS({
                 style: {
                   fontFamily: "Inter",
                   fontSize: "16px",
-                  fontWeight: 600,
+                  fontWeight: 500,
                   fontStyle: "normal",
                   lineHeight: 1.5,
                   textTransform: "none"
@@ -807,7 +807,7 @@ var require_tokens = __commonJS({
                 style: {
                   fontFamily: "Inter",
                   fontSize: "14px",
-                  fontWeight: 600,
+                  fontWeight: 500,
                   fontStyle: "normal",
                   lineHeight: 1.42,
                   textTransform: "none"
@@ -1661,6 +1661,7 @@ __export(system_exports, {
   calcTopPosition: () => calcTopPosition,
   calcTopRightPosition: () => calcTopRightPosition,
   cellProps: () => cellProps,
+  columnIsFieldColumn: () => columnIsFieldColumn,
   createComponent: () => createComponent,
   createMountPointElement: () => createMountPointElement,
   createSimpleComponent: () => createSimpleComponent,
@@ -1787,6 +1788,7 @@ __export(molecules_exports, {
   asPopoverButton: () => asPopoverButton,
   asTabItem: () => asTabItem,
   cellProps: () => cellProps,
+  columnIsFieldColumn: () => columnIsFieldColumn,
   createTabsComponent: () => createTabsComponent,
   toSortDirection: () => toSortDirection,
   usePagination: () => usePagination,
@@ -5100,6 +5102,7 @@ var Wrapper = import_react45.default.forwardRef(
       style = {},
       placement = "bottom-left",
       role,
+      focusable = true,
       isNonModal = false,
       autoFocus,
       containFocus,
@@ -5112,6 +5115,7 @@ var Wrapper = import_react45.default.forwardRef(
       "style",
       "placement",
       "role",
+      "focusable",
       "isNonModal",
       "autoFocus",
       "containFocus",
@@ -5135,7 +5139,7 @@ var Wrapper = import_react45.default.forwardRef(
     );
     return /* @__PURE__ */ import_react45.default.createElement("div", null, !isNonModal && /* @__PURE__ */ import_react45.default.createElement(Popover.Underlay, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react45.default.createElement(Popover.Panel, __spreadProps(__spreadValues({
       ref: popoverRef,
-      tabIndex: 0,
+      tabIndex: focusable ? 0 : -1,
       role: role != null ? role : "presentation"
     }, popoverProps), {
       id: id != null ? id : popoverProps.id,
@@ -5348,7 +5352,6 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ import_react
 
 // src/molecules/DataList/DataList.tsx
 var import_react53 = __toESM(require("react"));
-var import_orderBy2 = __toESM(require("lodash/orderBy"));
 
 // src/molecules/Template/Template.tsx
 var import_react48 = __toESM(require("react"));
@@ -5438,7 +5441,7 @@ var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ import_react50.default.createElement("tbody", __spreadValues({}, rest), children);
 };
-var rowClassNames = tw("children:border-grey-10 children:last:border-b-0 hover:bg-grey-0");
+var rowClassNames = tw("children:border-grey-10 group children:last:border-b-0 hover:bg-grey-0");
 var TableRow = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react50.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
@@ -5446,27 +5449,43 @@ var TableRow = (_a) => {
   }), children);
 };
 var cellClassNames = tw("px-4 border-b typography-small leading-[18px]");
-var getBodyCellClassNames = (table = true) => tw("text-grey-70 py-3", {
+var getBodyCellClassNames = (table = true, stickyColumn) => tw("text-grey-70 py-3", {
   "h-[50px]": table,
-  "min-h-[50px]": !table
+  "min-h-[50px]": !table,
+  "sticky z-10 bg-white group-hover:bg-grey-0": Boolean(stickyColumn),
+  "left-0": stickyColumn === "left",
+  "right-0": stickyColumn === "right"
 });
 var getAlignClassNames = (align) => tw({ "text-right": align === "right", "text-center": align === "center" });
-var getHeadCellClassNames = (sticky = true) => {
+var getHeadCellClassNames = (sticky = true, stickyColumn) => {
   const common = tw("py-[14px] text-left bg-white border-grey-40 text-grey-50 font-normal");
-  return sticky ? classNames(common, tw("sticky top-0 z-10")) : common;
+  return sticky ? classNames(
+    common,
+    tw("sticky top-0", {
+      "z-10": !stickyColumn,
+      "z-20": Boolean(stickyColumn),
+      "left-0": stickyColumn === "left",
+      "right-0": stickyColumn === "right"
+    })
+  ) : common;
 };
 var TableCell = (_a) => {
-  var _b = _a, { children, className, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "align"]);
+  var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
   const headContext = import_react50.default.useContext(HeadContext);
   return headContext ? /* @__PURE__ */ import_react50.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
-      getHeadCellClassNames(headContext.sticky),
+      getHeadCellClassNames(headContext.sticky, stickyColumn),
       getAlignClassNames(align),
       className
     )
   }), children) : /* @__PURE__ */ import_react50.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(cellClassNames, getBodyCellClassNames(), getAlignClassNames(align), className)
+    className: classNames(
+      cellClassNames,
+      getBodyCellClassNames(true, stickyColumn),
+      getAlignClassNames(align),
+      className
+    )
   }), children);
 };
 var TableSelectCell = (_a) => {
@@ -5535,24 +5554,39 @@ var HeadCell = (_a) => {
   var _b = _a, {
     className,
     sticky,
-    align
+    align,
+    stickyColumn
   } = _b, rest = __objRest(_b, [
     "className",
     "sticky",
-    "align"
+    "align",
+    "stickyColumn"
   ]);
   return /* @__PURE__ */ import_react51.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "cell",
-    className: classNames(cellClassNames, getHeadCellClassNames(sticky), getAlignClassNames2(align), className)
+    className: classNames(
+      cellClassNames,
+      getHeadCellClassNames(sticky, stickyColumn),
+      getAlignClassNames2(align),
+      className
+    )
   }));
 };
 var Cell = (_a) => {
-  var _b = _a, { className, align } = _b, rest = __objRest(_b, ["className", "align"]);
+  var _b = _a, {
+    className,
+    align,
+    stickyColumn
+  } = _b, rest = __objRest(_b, [
+    "className",
+    "align",
+    "stickyColumn"
+  ]);
   return /* @__PURE__ */ import_react51.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "cell",
     className: classNames(
       cellClassNames,
-      getBodyCellClassNames(false),
+      getBodyCellClassNames(false, stickyColumn),
       getAlignClassNames2(align),
       tw("border-grey-10 group-hover:bg-grey-0 group-last:border-b-0"),
       className
@@ -5607,31 +5641,52 @@ var renameProperty = (oldProp, newProp, _a) => {
 var toSortDirection = (direction) => direction === "ascending" ? "asc" : direction === "descending" ? "desc" : false;
 var cellProps = (column) => ({
   key: column.key || column.headerName,
-  align: column.type === "number" || column.type === "action" ? "right" : "left"
+  align: column.type === "number" || column.type === "action" ? "right" : "left",
+  stickyColumn: column.sticky
 });
+var columnIsFieldColumn = (column) => Boolean(column && column.field);
 
 // src/utils/table/useTableSort.tsx
 var import_react52 = __toESM(require("react"));
 var useTableSort = () => {
   const [sort, setSort] = import_react52.default.useState();
-  const handleSortClick = (field) => {
-    if ((sort == null ? void 0 : sort.key) === field) {
+  const handleSortClick = (column) => {
+    if (sort && sort.column.headerName === column.headerName) {
       if (sort.direction === "ascending") {
-        setSort({ key: field, direction: "descending" });
+        setSort({ column, direction: "descending" });
       } else {
         setSort(void 0);
       }
     } else {
-      setSort({ key: field, direction: "ascending" });
+      setSort({ column, direction: "ascending" });
     }
   };
   return [sort, handleSortClick];
 };
 
+// src/utils/table/utils.ts
+var import_orderBy2 = __toESM(require("lodash/orderBy"));
+var sortRowsBy = (rows, sort) => {
+  if (!sort) {
+    return rows;
+  }
+  const sortFunction = sort.column.sort;
+  if (sortFunction) {
+    return [...rows].sort((a, b) => sortFunction(a, b, sort.direction));
+  } else if (columnIsFieldColumn(sort.column)) {
+    return (0, import_orderBy2.default)(rows, [sort.column.field], [toSortDirection(sort.direction)]);
+  }
+  return rows;
+};
+
 // src/molecules/DataList/DataList.tsx
-var DataList2 = ({ columns, rows, sticky }) => {
+var DataList2 = ({
+  columns,
+  rows,
+  sticky
+}) => {
   const [sort, updateSort] = useTableSort();
-  const sortedRows = (0, import_orderBy2.default)(rows, [sort == null ? void 0 : sort.key], [toSortDirection(sort == null ? void 0 : sort.direction)]);
+  const sortedRows = sortRowsBy(rows, sort);
   const templateColumns = columns.map((column) => {
     var _a;
     return (_a = column.width) != null ? _a : "auto";
@@ -5639,9 +5694,9 @@ var DataList2 = ({ columns, rows, sticky }) => {
   return /* @__PURE__ */ import_react53.default.createElement(Template, {
     columns: templateColumns
   }, columns.map(
-    (column) => (column.type === "text" || column.type === "number") && column.sortable ? /* @__PURE__ */ import_react53.default.createElement(DataList.SortCell, __spreadValues({
-      direction: sort && sort.key === column.field ? sort.direction : "none",
-      onClick: () => updateSort(column.field),
+    (column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react53.default.createElement(DataList.SortCell, __spreadValues({
+      direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
+      onClick: () => updateSort(column),
       sticky
     }, cellProps(column)), column.headerName) : /* @__PURE__ */ import_react53.default.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
       sticky
@@ -5656,14 +5711,13 @@ var DataList2 = ({ columns, rows, sticky }) => {
         dense: true
       }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react53.default.createElement(SecondaryButton, __spreadValues({
         dense: true
-      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react53.default.createElement(Item2, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
+      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react53.default.createElement(Item2, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
     }))
   }));
 };
 
 // src/molecules/DataTable/DataTable.tsx
 var import_react56 = __toESM(require("react"));
-var import_orderBy3 = __toESM(require("lodash/orderBy"));
 
 // src/molecules/Table/Table.tsx
 var import_react55 = __toESM(require("react"));
@@ -5723,7 +5777,7 @@ var DataTable = (_a) => {
     "sticky"
   ]);
   const [sort, updateSort] = useTableSort();
-  const sortedRows = (0, import_orderBy3.default)(rows, [sort == null ? void 0 : sort.key], [toSortDirection(sort == null ? void 0 : sort.direction)]);
+  const sortedRows = sortRowsBy(rows, sort);
   return /* @__PURE__ */ import_react56.default.createElement(Table2, __spreadProps(__spreadValues({}, rest), {
     className: tw({
       "whitespace-nowrap": noWrap,
@@ -5733,9 +5787,9 @@ var DataTable = (_a) => {
   }), /* @__PURE__ */ import_react56.default.createElement(Table2.Head, {
     sticky
   }, columns.map(
-    (column) => (column.type === "text" || column.type === "number") && column.sortable ? /* @__PURE__ */ import_react56.default.createElement(Table2.SortCell, __spreadValues({
-      direction: sort && sort.key === column.field ? sort.direction : "none",
-      onClick: () => updateSort(column.field),
+    (column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react56.default.createElement(Table2.SortCell, __spreadValues({
+      direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
+      onClick: () => updateSort(column),
       style: { width: column.width },
       "aria-label": column.headerInvisible ? column.headerName : void 0
     }, cellProps(column)), !column.headerInvisible && column.headerName) : /* @__PURE__ */ import_react56.default.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
@@ -5761,7 +5815,7 @@ var DataTable = (_a) => {
 var import_react58 = __toESM(require("react"));
 var import_dialog = require("@react-aria/dialog");
 var import_overlays6 = require("@react-aria/overlays");
-var import_utils3 = require("@react-aria/utils");
+var import_utils5 = require("@react-aria/utils");
 var import_overlays7 = require("@react-stately/overlays");
 var import_omit6 = __toESM(require("lodash/omit"));
 
@@ -5909,15 +5963,17 @@ var DialogWrapper = ({
   secondaryAction
 }) => {
   const ref = import_react58.default.useRef(null);
-  const labelledBy = (0, import_utils3.useId)();
-  const describedBy = (0, import_utils3.useId)();
+  const labelledBy = (0, import_utils5.useId)();
+  const describedBy = (0, import_utils5.useId)();
   const { dialogProps } = (0, import_dialog.useDialog)(
     { "role": "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
     ref
   );
-  return /* @__PURE__ */ import_react58.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react58.default.createElement("div", __spreadProps(__spreadValues({
     ref
-  }, dialogProps), /* @__PURE__ */ import_react58.default.createElement(Modal.Header, null, /* @__PURE__ */ import_react58.default.createElement(Icon, {
+  }, dialogProps), {
+    className: tw("outline-none")
+  }), /* @__PURE__ */ import_react58.default.createElement(Modal.Header, null, /* @__PURE__ */ import_react58.default.createElement(Icon, {
     icon: DIALOG_ICONS_AND_COLORS[type].icon,
     color: DIALOG_ICONS_AND_COLORS[type].color,
     fontSize: 20
@@ -5972,7 +6028,7 @@ var import_react63 = __toESM(require("react"));
 var import_react62 = __toESM(require("react"));
 var import_interactions2 = require("@react-aria/interactions");
 var import_overlays8 = require("@react-aria/overlays");
-var import_utils4 = require("@react-aria/utils");
+var import_utils6 = require("@react-aria/utils");
 var import_overlays9 = require("@react-stately/overlays");
 
 // src/molecules/Popover/Dialog.tsx
@@ -6076,7 +6132,7 @@ var PopoverTriggerWrapper = (_a) => {
   const { pressProps } = (0, import_interactions2.usePress)(__spreadProps(__spreadValues({}, rest), { ref }));
   return import_react62.default.cloneElement(trigger, __spreadProps(__spreadValues({
     "ref": ref
-  }, (0, import_utils4.mergeProps)(pressProps, trigger.props)), {
+  }, (0, import_utils6.mergeProps)(pressProps, trigger.props)), {
     "aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
   }));
 };
@@ -6201,7 +6257,7 @@ var import_i18n = require("@react-aria/i18n");
 var import_interactions3 = require("@react-aria/interactions");
 var import_menu = require("@react-aria/menu");
 var import_separator = require("@react-aria/separator");
-var import_utils6 = require("@react-aria/utils");
+var import_utils8 = require("@react-aria/utils");
 var import_collections = require("@react-stately/collections");
 var import_menu2 = require("@react-stately/menu");
 var import_tree = require("@react-stately/tree");
@@ -6486,7 +6542,8 @@ var DropdownMenu3 = (_a) => {
   }, menuTriggerProps), /* @__PURE__ */ import_react67.default.createElement(TriggerWrapper, null, trigger.props.children)), state.isOpen && /* @__PURE__ */ import_react67.default.createElement(PopoverOverlay, {
     triggerRef,
     state,
-    placement
+    placement,
+    focusable: false
   }, /* @__PURE__ */ import_react67.default.createElement(MenuWrapper, __spreadValues({
     onAction,
     selectionMode,
@@ -6518,7 +6575,7 @@ var TriggerWrapper = (_a) => {
   if (!trigger || !import_react67.default.isValidElement(trigger)) {
     throw new Error("<DropdownMenu.Trigger> must have valid child");
   }
-  return import_react67.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils6.mergeProps)(pressProps, props)));
+  return import_react67.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils8.mergeProps)(pressProps, props)));
 };
 var isSectionNode = (item) => item.type === "section";
 var isItemNode = (item) => item.type === "item";
@@ -6882,7 +6939,7 @@ var ListItem = ({ name, icon, active = false }) => {
 var import_react77 = __toESM(require("react"));
 var import_dialog3 = require("@react-aria/dialog");
 var import_overlays10 = require("@react-aria/overlays");
-var import_utils9 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_overlays11 = require("@react-stately/overlays");
 var import_castArray = __toESM(require("lodash/castArray"));
 var import_omit9 = __toESM(require("lodash/omit"));
@@ -7179,12 +7236,13 @@ var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /*
 
 // src/molecules/Modal/Modal.tsx
 var import_cross5 = __toESM(require_cross());
-var Modal2 = (props) => {
+var Modal2 = (_a) => {
+  var _b = _a, { closeOnEsc = true } = _b, props = __objRest(_b, ["closeOnEsc"]);
   const { open, onClose, size, portalContainer } = props;
   const ref = import_react77.default.useRef(null);
   const state = (0, import_overlays11.useOverlayTriggerState)({ isOpen: open, onOpenChange: (isOpen) => !isOpen && onClose() });
   const { modalProps, underlayProps } = (0, import_overlays10.useModalOverlay)(
-    { isDismissable: true, isKeyboardDismissDisabled: false },
+    { isDismissable: true, isKeyboardDismissDisabled: !closeOnEsc },
     state,
     ref
   );
@@ -7203,8 +7261,8 @@ var Modal2 = (props) => {
 var ModalWrapper = import_react77.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { title, subtitle, headerImage, primaryAction, secondaryActions, children, onClose } = _b, props = __objRest(_b, ["title", "subtitle", "headerImage", "primaryAction", "secondaryActions", "children", "onClose"]);
-    const labelledBy = (0, import_utils9.useId)();
-    const describedBy = (0, import_utils9.useId)();
+    const labelledBy = (0, import_utils11.useId)();
+    const describedBy = (0, import_utils11.useId)();
     const { dialogProps } = (0, import_dialog3.useDialog)(
       { "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
       ref
@@ -9398,6 +9456,7 @@ var system_default = __spreadProps(__spreadValues({}, molecules_exports), {
   calcTopPosition,
   calcTopRightPosition,
   cellProps,
+  columnIsFieldColumn,
   createComponent,
   createMountPointElement,
   createSimpleComponent,