@aivenio/aquarium 4.2.0 → 4.4.0

package/dist/system.mjs

@@ -12272,14 +12272,30 @@ var CalendarGridHeader = () => {
 // src/atoms/DatePicker/DatePicker.tsx
 import React84 from "react";
 import {
+  Button as AriaButton3,
   DatePicker as AriaDatePicker,
-  DateRangePicker as AriaDateRangePicker
+  DatePickerStateContext as AriaDatePickerStateContext,
+  DateRangePicker as AriaDateRangePicker,
+  DateRangePickerStateContext as AriaDateRangePickerStateContext
 } from "react-aria-components";
 import { tv as tv11 } from "tailwind-variants";
 var datePickerCalendarStyles = tv11({
   slots: {
-    dialog: "p-5 [[data-placement]>&]:px-5 [[data-placement]>&]:py-6 max-h-[inherit]",
-    errorMessage: "typography-caption text-danger-default max-w-[300px]"
+    dialog: "flex",
+    calendar: "[[data-placement]>&]:px-5 [[data-placement]>&]:py-6 max-h-[inherit]",
+    errorMessage: "typography-caption text-danger-default max-w-[300px]",
+    presets: "bg-muted py-6 px-5 flex flex-col min-w-[150px] max-w-[300px] self-stretch",
+    preset: "hover:text-primary-active p-3 text-left hover:underline"
+  },
+  variants: {
+    isPresetActive: {
+      true: {
+        preset: "text-primary-active typography-small-strong"
+      },
+      false: {
+        preset: "typography-small"
+      }
+    }
   }
 });
 var DatePicker = ({ variant, ...props }) => {
@@ -12304,6 +12320,30 @@ var DateRangePicker = ({ variant, ...props }) => {
     }
   );
 };
+var Presets = ({ children }) => {
+  const { presets } = datePickerCalendarStyles();
+  return /* @__PURE__ */ React84.createElement("div", { className: presets() }, children);
+};
+var Preset = ({ value, label }) => {
+  const { preset } = datePickerCalendarStyles();
+  const context2 = React84.useContext(AriaDatePickerStateContext);
+  const handlePress = () => {
+    context2?.setValue(value);
+    context2?.close();
+  };
+  const isActive = context2?.value !== void 0 && context2.value?.toString() === value.toString();
+  return /* @__PURE__ */ React84.createElement(AriaButton3, { onPress: handlePress, className: preset({ isPresetActive: isActive }) }, label);
+};
+var RangePreset = ({ value, label }) => {
+  const { preset } = datePickerCalendarStyles();
+  const context2 = React84.useContext(AriaDateRangePickerStateContext);
+  const handlePress = () => {
+    context2?.setValue(value);
+    context2?.close();
+  };
+  const isActive = context2?.value !== void 0 && context2.value.start?.toString() === value.start.toString() && context2.value.end?.toString() === value.end.toString();
+  return /* @__PURE__ */ React84.createElement(AriaButton3, { onPress: handlePress, className: preset({ isPresetActive: isActive }) }, label);
+};
 
 // src/atoms/Dialog/Dialog.tsx
 import React85 from "react";
@@ -14833,9 +14873,9 @@ var CalendarTimeField = ({ granularity, labelText = "Time", ...props }) => {
 var DatePickerCalendarPropsContext = React86.createContext(null);
 var DatePickerCalendar = (props) => {
   const ctx = React86.useContext(DatePickerCalendarPropsContext);
-  const { variant, granularity, errorMessage } = mergeProps3(ctx, props);
-  const { dialog, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
-  return /* @__PURE__ */ React86.createElement(Popover, { offset: 0 }, /* @__PURE__ */ React86.createElement(Dialog, { className: dialog() }, /* @__PURE__ */ React86.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ React86.createElement(Calendar, null), variant === "datetime" && /* @__PURE__ */ React86.createElement(CalendarTimeField, { granularity }), errorMessage && /* @__PURE__ */ React86.createElement(Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
+  const { variant, granularity, errorMessage, presets = [] } = mergeProps3(ctx, props);
+  const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
+  return /* @__PURE__ */ React86.createElement(Popover, { offset: 0 }, /* @__PURE__ */ React86.createElement(Dialog, { className: dialog() }, presets.length > 0 && /* @__PURE__ */ React86.createElement(Presets, null, presets.map((props2) => /* @__PURE__ */ React86.createElement(Preset, { key: props2.value.toString(), ...props2 }))), /* @__PURE__ */ React86.createElement(Spacing, { gap: "3", className: tw("p-5") }, /* @__PURE__ */ React86.createElement(Calendar, { className: calendar() }), variant === "datetime" && /* @__PURE__ */ React86.createElement(CalendarTimeField, { granularity }), errorMessage && /* @__PURE__ */ React86.createElement(Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
 };
 DatePickerCalendar.displayName = "DatePicker.Calendar";
 var DatePickerField = ({ clearSelectionEnabled = true, disabled = false }) => {
@@ -14849,11 +14889,18 @@ var createDatePickerBase = (variant) => {
     shouldCloseOnSelect,
     errorMessage,
     clearSelectionEnabled = true,
+    presets,
     children,
     ...props
   }) => {
     const content = children ?? /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(DatePickerField, { clearSelectionEnabled, disabled }), /* @__PURE__ */ React86.createElement(DatePickerCalendar, null));
-    return /* @__PURE__ */ React86.createElement(DatePickerCalendarPropsContext.Provider, { value: { variant, granularity: props.granularity, errorMessage } }, /* @__PURE__ */ React86.createElement(DatePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content));
+    return /* @__PURE__ */ React86.createElement(
+      DatePickerCalendarPropsContext.Provider,
+      {
+        value: { variant, granularity: props.granularity, errorMessage, presets }
+      },
+      /* @__PURE__ */ React86.createElement(DatePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content)
+    );
   };
   datePicker.Calendar = DatePickerCalendar;
   datePicker.Field = DatePickerField;
@@ -14983,9 +15030,9 @@ var RangeCalendarTimeField = ({ granularity, part, ...props }) => {
 var DateRangePickerCalendarPropsContext = React88.createContext(null);
 var DateRangePickerCalendar = (props) => {
   const ctx = React88.useContext(DateRangePickerCalendarPropsContext);
-  const { variant, granularity, errorMessage } = mergeProps4(ctx, props);
-  const { dialog, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
-  return /* @__PURE__ */ React88.createElement(Popover, { offset: 0 }, /* @__PURE__ */ React88.createElement(Dialog, { className: dialog() }, /* @__PURE__ */ React88.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ React88.createElement(RangeCalendar, null), variant === "datetime" && /* @__PURE__ */ React88.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ React88.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React88.createElement(RangeCalendarTimeField, { granularity, part: "start" })), /* @__PURE__ */ React88.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React88.createElement(RangeCalendarTimeField, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ React88.createElement(Text2, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
+  const { variant, granularity, errorMessage, presets = [] } = mergeProps4(ctx, props);
+  const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
+  return /* @__PURE__ */ React88.createElement(Popover, { offset: 0 }, /* @__PURE__ */ React88.createElement(Dialog, { className: dialog() }, presets.length > 0 && /* @__PURE__ */ React88.createElement(Presets, null, presets.map((props2) => /* @__PURE__ */ React88.createElement(RangePreset, { key: `${props2.value.start.toString()}-${props2.value.end.toString()}`, ...props2 }))), /* @__PURE__ */ React88.createElement(Spacing, { gap: "3", className: tw("p-5") }, /* @__PURE__ */ React88.createElement(RangeCalendar, { className: calendar() }), variant === "datetime" && /* @__PURE__ */ React88.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ React88.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React88.createElement(RangeCalendarTimeField, { granularity, part: "start" })), /* @__PURE__ */ React88.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React88.createElement(RangeCalendarTimeField, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ React88.createElement(Text2, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
 };
 DateRangePickerCalendar.displayName = "DateRangePicker.Calendar";
 var DateRangePickerField = ({ clearSelectionEnabled = true, disabled = false }) => {
@@ -14999,11 +15046,18 @@ var createDateRangePickerBase = (variant) => {
     shouldCloseOnSelect,
     errorMessage,
     clearSelectionEnabled = true,
+    presets,
     children,
     ...props
   }) => {
     const content = children ?? /* @__PURE__ */ React88.createElement(React88.Fragment, null, /* @__PURE__ */ React88.createElement(DateRangePickerField, { clearSelectionEnabled, disabled }), /* @__PURE__ */ React88.createElement(DateRangePickerCalendar, { variant, granularity: props.granularity, errorMessage }));
-    return /* @__PURE__ */ React88.createElement(DateRangePickerCalendarPropsContext.Provider, { value: { variant, granularity: props.granularity, errorMessage } }, /* @__PURE__ */ React88.createElement(DateRangePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content));
+    return /* @__PURE__ */ React88.createElement(
+      DateRangePickerCalendarPropsContext.Provider,
+      {
+        value: { variant, granularity: props.granularity, errorMessage, presets }
+      },
+      /* @__PURE__ */ React88.createElement(DateRangePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content)
+    );
   };
   dateRangePicker.Calendar = DateRangePickerCalendar;
   dateRangePicker.Field = DateRangePickerField;
@@ -15074,7 +15128,8 @@ var modalStyles = tv13({
       screen: {
         overlay: "py-0",
         dialog: "w-dvw h-dvh mx-0 rounded-none",
-        header: "border-b-1 border-muted mb-6"
+        header: "border-b-1 border-muted",
+        body: "pt-6"
       }
     },
     noFooter: {
@@ -15177,8 +15232,8 @@ Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer } = modalStyles();
   return /* @__PURE__ */ React89.createElement("div", { ...rest, className: titleContainer({ className }) }, children);
 };
-Modal.Body = ({ children, className, noFooter = false, maxHeight, style, ...rest }) => {
-  const { body } = modalStyles();
+Modal.Body = ({ children, className, noFooter = false, maxHeight, style, size, ...rest }) => {
+  const { body } = modalStyles({ size });
   return /* @__PURE__ */ React89.createElement("div", { ...rest, className: body({ noFooter, className }), style: { maxHeight, ...style } }, children);
 };
 Modal.Footer = ({ children, className, ...rest }) => {
@@ -15800,9 +15855,9 @@ var EmptyState = ({
 // src/atoms/Filter/Filter.tsx
 import React97 from "react";
 import {
-  Button as AriaButton3,
-  DatePickerStateContext as AriaDatePickerStateContext,
-  DateRangePickerStateContext as AriaDateRangePickerStateContext,
+  Button as AriaButton4,
+  DatePickerStateContext as AriaDatePickerStateContext2,
+  DateRangePickerStateContext as AriaDateRangePickerStateContext2,
   Group as AriaGroup
 } from "react-aria-components";
 import { tv as tv14 } from "tailwind-variants";
@@ -15835,12 +15890,12 @@ var FilterTrigger = ({
   onClear,
   onClick,
   value,
-  // children,
   error: error2 = false,
+  clearSelectionEnabled = true,
   ...props
 }) => {
-  const ariaDatePickerState = React97.useContext(AriaDatePickerStateContext);
-  const ariaDateRangePickerState = React97.useContext(AriaDateRangePickerStateContext);
+  const ariaDatePickerState = React97.useContext(AriaDatePickerStateContext2);
+  const ariaDateRangePickerState = React97.useContext(AriaDateRangePickerStateContext2);
   const isUsedInsideDatePicker = !!ariaDatePickerState?.value;
   const isUsedInsideDateRangePicker = !!ariaDateRangePickerState?.value.start && !!ariaDateRangePickerState.value.end;
   const onClearDatePickerRelated = () => {
@@ -15851,7 +15906,7 @@ var FilterTrigger = ({
     }
   };
   const hasValue = !!value || isUsedInsideDatePicker || isUsedInsideDateRangePicker;
-  const showClearButton = !!onClear && !!value || isUsedInsideDatePicker || isUsedInsideDateRangePicker;
+  const showClearButton = clearSelectionEnabled && (!!onClear && !!value || isUsedInsideDatePicker || isUsedInsideDateRangePicker);
   return /* @__PURE__ */ React97.createElement(
     AriaGroup,
     {
@@ -15860,7 +15915,7 @@ var FilterTrigger = ({
       className: (renderProps) => filterWrapper({ ...renderProps, hasValue: hasValue || !!badge })
     },
     /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
-      AriaButton3,
+      AriaButton4,
       {
         onPress: () => {
           onClick && onClick();
@@ -15874,7 +15929,11 @@ var FilterTrigger = ({
       /* @__PURE__ */ React97.createElement("div", { className: tw("flex items-center gap-3 divide-x divide-grey-20") }, /* @__PURE__ */ React97.createElement("div", { className: tw("flex items-center gap-3") }, /* @__PURE__ */ React97.createElement("div", { className: tw("flex items-center gap-2") }, /* @__PURE__ */ React97.createElement(InlineIcon, { icon }), /* @__PURE__ */ React97.createElement(Typography2.Small, null, labelText)), badge && /* @__PURE__ */ React97.createElement(Typography2, { color: "primary-active", className: tw("flex items-center") }, /* @__PURE__ */ React97.createElement(Badge, { dense: true, value: badge }))), hasValue && /* @__PURE__ */ React97.createElement("div", { className: "pl-3" }, /* @__PURE__ */ React97.createElement(
         Typography2.Small,
         {
-          className: tw("truncate max-w-[233px]"),
+          className: tw("truncate", {
+            "max-w-[320px]": isUsedInsideDateRangePicker,
+            "max-w-[233px]": !isUsedInsideDateRangePicker
+            // Set to 233px to keep the total width of the filter pill within approximately 360px.
+          }),
           color: error2 ? "danger-intense" : "primary-active"
         },
         value,
@@ -15999,7 +16058,7 @@ var ListItem = ({ name, icon, active = false }) => {
 // src/molecules/Modal/Modal.tsx
 import React101 from "react";
 import { Dialog as AriaDialog3, Modal as AriaModal2, ModalOverlay as AriaModalOverlay2 } from "react-aria-components";
-import { castArray as castArray4, omit as omit12 } from "lodash-es";
+import { castArray as castArray4, isEmpty as isEmpty2, omit as omit12 } from "lodash-es";
 var import_cross8 = __toESM(require_cross());
 var Modal2 = ({
   open,
@@ -16018,6 +16077,7 @@ var Modal2 = ({
   }
   const styles = modalStyles({ kind: "dialog", size });
   const hasTabs = isComponentType(children, ModalTabs);
+  const hasActions = secondaryActions && !isEmpty2(secondaryActions) || primaryAction;
   return /* @__PURE__ */ React101.createElement(
     AriaModalOverlay2,
     {
@@ -16036,7 +16096,7 @@ var Modal2 = ({
         className: tw({ "pb-3": isComponentType(children, ModalTabs) })
       },
       /* @__PURE__ */ React101.createElement(Modal.TitleContainer, null, /* @__PURE__ */ React101.createElement(ModalTitle, { kind: "dialog" }, title), subtitle && /* @__PURE__ */ React101.createElement(Modal.Subtitle, null, subtitle))
-    ), hasTabs ? React101.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ React101.createElement(Modal.Body, { tabIndex: 0, noFooter: !(secondaryActions ?? primaryAction) }, children), (secondaryActions ?? primaryAction) && /* @__PURE__ */ React101.createElement(Modal.Footer, null, /* @__PURE__ */ React101.createElement(Modal.Actions, null, secondaryActions && castArray4(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ React101.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ React101.createElement(Button2.Primary, { key: primaryAction.text, ...omit12(primaryAction, "text") }, primaryAction.text))))))
+    ), hasTabs ? React101.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ React101.createElement(Modal.Body, { tabIndex: 0, noFooter: !hasActions, size }, children), hasActions && /* @__PURE__ */ React101.createElement(Modal.Footer, null, /* @__PURE__ */ React101.createElement(Modal.Actions, null, secondaryActions && castArray4(secondaryActions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ React101.createElement(Button2.Secondary, { key: text, ...action }, text)), primaryAction && /* @__PURE__ */ React101.createElement(Button2.Primary, { key: primaryAction.text, ...omit12(primaryAction, "text") }, primaryAction.text))))))
   );
 };
 var ModalTabs = createTabsComponent(