@aivenio/aquarium 1.13.0-rc1 → 1.14.0

package/dist/system.mjs

@@ -219,7 +219,7 @@ var require_tokens = __commonJS({
                 style: {
                   fontFamily: "Inter",
                   fontSize: "16px",
-                  fontWeight: 600,
+                  fontWeight: 500,
                   fontStyle: "normal",
                   lineHeight: 1.5,
                   textTransform: "none"
@@ -245,7 +245,7 @@ var require_tokens = __commonJS({
                 style: {
                   fontFamily: "Inter",
                   fontSize: "14px",
-                  fontWeight: 600,
+                  fontWeight: 500,
                   fontStyle: "normal",
                   lineHeight: 1.42,
                   textTransform: "none"
@@ -779,7 +779,7 @@ var require_tokens = __commonJS({
                 style: {
                   fontFamily: "Inter",
                   fontSize: "16px",
-                  fontWeight: 600,
+                  fontWeight: 500,
                   fontStyle: "normal",
                   lineHeight: 1.5,
                   textTransform: "none"
@@ -805,7 +805,7 @@ var require_tokens = __commonJS({
                 style: {
                   fontFamily: "Inter",
                   fontSize: "14px",
-                  fontWeight: 600,
+                  fontWeight: 500,
                   fontStyle: "normal",
                   lineHeight: 1.42,
                   textTransform: "none"
@@ -1646,6 +1646,7 @@ __export(molecules_exports, {
   asPopoverButton: () => asPopoverButton,
   asTabItem: () => asTabItem,
   cellProps: () => cellProps,
+  columnIsFieldColumn: () => columnIsFieldColumn,
   createTabsComponent: () => createTabsComponent,
   toSortDirection: () => toSortDirection,
   usePagination: () => usePagination,
@@ -4962,6 +4963,7 @@ var Wrapper = React40.forwardRef(
       style = {},
       placement = "bottom-left",
       role,
+      focusable = true,
       isNonModal = false,
       autoFocus,
       containFocus,
@@ -4974,6 +4976,7 @@ var Wrapper = React40.forwardRef(
       "style",
       "placement",
       "role",
+      "focusable",
       "isNonModal",
       "autoFocus",
       "containFocus",
@@ -4997,7 +5000,7 @@ var Wrapper = React40.forwardRef(
     );
     return /* @__PURE__ */ React40.createElement("div", null, !isNonModal && /* @__PURE__ */ React40.createElement(Popover.Underlay, __spreadValues({}, underlayProps)), /* @__PURE__ */ React40.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,
@@ -5210,7 +5213,6 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ React42.crea
 
 // src/molecules/DataList/DataList.tsx
 import React48 from "react";
-import orderBy2 from "lodash/orderBy";
 
 // src/molecules/Template/Template.tsx
 import React43 from "react";
@@ -5300,7 +5302,7 @@ var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React45.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__ */ React45.createElement("tr", __spreadProps(__spreadValues({}, rest), {
@@ -5308,27 +5310,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 = React45.useContext(HeadContext);
   return headContext ? /* @__PURE__ */ React45.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
-      getHeadCellClassNames(headContext.sticky),
+      getHeadCellClassNames(headContext.sticky, stickyColumn),
       getAlignClassNames(align),
       className
     )
   }), children) : /* @__PURE__ */ React45.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) => {
@@ -5397,24 +5415,39 @@ var HeadCell = (_a) => {
   var _b = _a, {
     className,
     sticky,
-    align
+    align,
+    stickyColumn
   } = _b, rest = __objRest(_b, [
     "className",
     "sticky",
-    "align"
+    "align",
+    "stickyColumn"
   ]);
   return /* @__PURE__ */ React46.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__ */ React46.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
@@ -5469,31 +5502,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
 import React47 from "react";
 var useTableSort = () => {
   const [sort, setSort] = React47.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
+import orderBy2 from "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 orderBy2(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 = orderBy2(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";
@@ -5501,9 +5555,9 @@ var DataList2 = ({ columns, rows, sticky }) => {
   return /* @__PURE__ */ React48.createElement(Template, {
     columns: templateColumns
   }, columns.map(
-    (column) => (column.type === "text" || column.type === "number") && column.sortable ? /* @__PURE__ */ React48.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__ */ React48.createElement(DataList.SortCell, __spreadValues({
+      direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
+      onClick: () => updateSort(column),
       sticky
     }, cellProps(column)), column.headerName) : /* @__PURE__ */ React48.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
       sticky
@@ -5518,14 +5572,13 @@ var DataList2 = ({ columns, rows, sticky }) => {
         dense: true
       }, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ React48.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React48.createElement(SecondaryButton, __spreadValues({
         dense: true
-      }, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ React48.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ React48.createElement(DataList.Cell, null, /* @__PURE__ */ React48.createElement(Item2, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ React48.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__ */ React48.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ React48.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React48.createElement(Item2, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ React48.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
     }))
   }));
 };
 
 // src/molecules/DataTable/DataTable.tsx
 import React51 from "react";
-import orderBy3 from "lodash/orderBy";
 
 // src/molecules/Table/Table.tsx
 import React50 from "react";
@@ -5585,7 +5638,7 @@ var DataTable = (_a) => {
     "sticky"
   ]);
   const [sort, updateSort] = useTableSort();
-  const sortedRows = orderBy3(rows, [sort == null ? void 0 : sort.key], [toSortDirection(sort == null ? void 0 : sort.direction)]);
+  const sortedRows = sortRowsBy(rows, sort);
   return /* @__PURE__ */ React51.createElement(Table2, __spreadProps(__spreadValues({}, rest), {
     className: tw({
       "whitespace-nowrap": noWrap,
@@ -5595,9 +5648,9 @@ var DataTable = (_a) => {
   }), /* @__PURE__ */ React51.createElement(Table2.Head, {
     sticky
   }, columns.map(
-    (column) => (column.type === "text" || column.type === "number") && column.sortable ? /* @__PURE__ */ React51.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__ */ React51.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__ */ React51.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
@@ -5777,9 +5830,11 @@ var DialogWrapper = ({
     { "role": "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
     ref
   );
-  return /* @__PURE__ */ React53.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React53.createElement("div", __spreadProps(__spreadValues({
     ref
-  }, dialogProps), /* @__PURE__ */ React53.createElement(Modal.Header, null, /* @__PURE__ */ React53.createElement(Icon, {
+  }, dialogProps), {
+    className: tw("outline-none")
+  }), /* @__PURE__ */ React53.createElement(Modal.Header, null, /* @__PURE__ */ React53.createElement(Icon, {
     icon: DIALOG_ICONS_AND_COLORS[type].icon,
     color: DIALOG_ICONS_AND_COLORS[type].color,
     fontSize: 20
@@ -6348,7 +6403,8 @@ var DropdownMenu3 = (_a) => {
   }, menuTriggerProps), /* @__PURE__ */ React61.createElement(TriggerWrapper, null, trigger.props.children)), state.isOpen && /* @__PURE__ */ React61.createElement(PopoverOverlay, {
     triggerRef,
     state,
-    placement
+    placement,
+    focusable: false
   }, /* @__PURE__ */ React61.createElement(MenuWrapper, __spreadValues({
     onAction,
     selectionMode,
@@ -7041,12 +7097,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 = React71.useRef(null);
   const state = useOverlayTriggerState4({ isOpen: open, onOpenChange: (isOpen) => !isOpen && onClose() });
   const { modalProps, underlayProps } = useModalOverlay2(
-    { isDismissable: true, isKeyboardDismissDisabled: false },
+    { isDismissable: true, isKeyboardDismissDisabled: !closeOnEsc },
     state,
     ref
   );
@@ -9260,6 +9317,7 @@ export {
   calcTopPosition,
   calcTopRightPosition,
   cellProps,
+  columnIsFieldColumn,
   createComponent,
   createMountPointElement,
   createSimpleComponent,

package/dist/tokens.json

@@ -160,7 +160,7 @@
                         "style": {
                             "fontFamily": "Inter",
                             "fontSize": "16px",
-                            "fontWeight": 600,
+                            "fontWeight": 500,
                             "fontStyle": "normal",
                             "lineHeight": 1.5,
                             "textTransform": "none"
@@ -186,7 +186,7 @@
                         "style": {
                             "fontFamily": "Inter",
                             "fontSize": "14px",
-                            "fontWeight": 600,
+                            "fontWeight": 500,
                             "fontStyle": "normal",
                             "lineHeight": 1.42,
                             "textTransform": "none"
@@ -720,7 +720,7 @@
                         "style": {
                             "fontFamily": "Inter",
                             "fontSize": "16px",
-                            "fontWeight": 600,
+                            "fontWeight": 500,
                             "fontStyle": "normal",
                             "lineHeight": 1.5,
                             "textTransform": "none"
@@ -746,7 +746,7 @@
                         "style": {
                             "fontFamily": "Inter",
                             "fontSize": "14px",
-                            "fontWeight": 600,
+                            "fontWeight": 500,
                             "fontStyle": "normal",
                             "lineHeight": 1.42,
                             "textTransform": "none"