@aivenio/aquarium 2.4.0 → 2.5.1

package/dist/system.mjs

@@ -4439,10 +4439,11 @@ var InputContainer = React2.forwardRef(
   }
 );
 var Input = React2.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, { className, required } = _b, props = __objRest(_b, ["className", "required"]);
   return /* @__PURE__ */ React2.createElement("input", __spreadValues({
     ref,
     type: "text",
+    "aria-required": required,
     className: classNames(
       className,
       "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
@@ -10247,6 +10248,14 @@ var Wrapper = React53.forwardRef(
   }
 );
 
+// src/molecules/Select/utils.ts
+var isOptionGroup = (val) => {
+  return (val == null ? void 0 : val.label) !== void 0 && Array.isArray(val == null ? void 0 : val.options);
+};
+var hasOptionGroups = (val) => {
+  return val.some(isOptionGroup);
+};
+
 // src/molecules/Combobox/Combobox.tsx
 var import_smallCross2 = __toESM(require_smallCross());
 var ComboboxBase = (_a) => {
@@ -10296,18 +10305,19 @@ var ComboboxBase = (_a) => {
     "readOnly"
   ]);
   var _a2;
+  const allOptions = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
   const popoverRef = useRef6(null);
   const targetRef = useRef6(null);
   const menuRef = useRef6(null);
   const inputRef = useRef6(null);
-  const [inputItems, setInputItems] = useState6(options);
+  const [inputItems, setInputItems] = useState6(allOptions);
   const [hasFocus, setFocus] = useState6(false);
   const updateInputItems = (query, selected) => {
-    const keys = typeof options[0] === "string" ? void 0 : optionKeys;
+    const keys = typeof allOptions[0] === "string" ? void 0 : optionKeys;
     if (selected && itemToString(selected) === query) {
-      setInputItems(options);
+      setInputItems(allOptions);
     } else {
-      setInputItems(query ? matchSorter(options, query, { keys }) : options);
+      setInputItems(query ? matchSorter(allOptions, query, { keys }) : allOptions);
     }
   };
   const {
@@ -10359,6 +10369,20 @@ var ComboboxBase = (_a) => {
     toggle: toggleMenu,
     setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
   };
+  const renderGroup = (group) => {
+    const groupInputItems = group.options.filter((o) => inputItems.includes(o));
+    return groupInputItems.length > 0 ? /* @__PURE__ */ React54.createElement(React54.Fragment, {
+      key: group.label
+    }, /* @__PURE__ */ React54.createElement(Select.Group, null, group.label), groupInputItems.map((opt) => renderItem(opt, inputItems.indexOf(opt)))) : null;
+  };
+  const renderItem = (item, index) => {
+    var _a3;
+    return /* @__PURE__ */ React54.createElement(Select.Item, __spreadValues({
+      key: (_a3 = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a3 : itemToString(item),
+      selected: item === selectedItem,
+      highlighted: index === highlightedIndex || item === selectedItem
+    }, getItemProps({ item, index })), renderOption(item));
+  };
   useEffect6(() => {
     updateInputItems(inputValue, selectedItem);
   }, [JSON.stringify(options)]);
@@ -10399,19 +10423,18 @@ var ComboboxBase = (_a) => {
   })), !readOnly && /* @__PURE__ */ React54.createElement(Box.Flex, {
     alignItems: "center",
     gap: "2"
-  }, !!inputProps.value && !disabled && /* @__PURE__ */ React54.createElement("div", {
-    className: tw("group-hover:opacity-100", {
+  }, !!inputProps.value && !disabled && /* @__PURE__ */ React54.createElement(Button.Icon, {
+    UNSAFE_className: tw("group-hover:opacity-100 py-1", {
       "opacity-0": !hasFocus,
       "opacity-100": hasFocus
-    })
-  }, /* @__PURE__ */ React54.createElement(Button.Icon, {
+    }),
     icon: import_smallCross2.default,
     onClick: () => selectItem(null),
     onFocus: () => setFocus(true),
     onBlur: () => setFocus(false),
     "aria-label": "Clear selection",
     dense: true
-  })), /* @__PURE__ */ React54.createElement(Select.Toggle, __spreadValues({
+  }), /* @__PURE__ */ React54.createElement(Select.Toggle, __spreadValues({
     hasFocus,
     isOpen
   }, getToggleButtonProps({ disabled }))))), isOpen && /* @__PURE__ */ React54.createElement(PopoverOverlay, {
@@ -10424,14 +10447,7 @@ var ComboboxBase = (_a) => {
     style: { width: (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth }
   }, /* @__PURE__ */ React54.createElement(Select.Menu, __spreadValues({
     maxHeight
-  }, menuProps), hasNoResults && /* @__PURE__ */ React54.createElement(Select.NoResults, null, emptyState), inputItems.map((item, index) => {
-    var _a3;
-    return /* @__PURE__ */ React54.createElement(Select.Item, __spreadValues({
-      key: (_a3 = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a3 : itemToString(item),
-      selected: item === selectedItem,
-      highlighted: index === highlightedIndex || item === selectedItem
-    }, getItemProps({ item, index })), renderOption(item));
-  }))));
+  }, menuProps), hasNoResults && /* @__PURE__ */ React54.createElement(Select.NoResults, null, emptyState), inputItems.length > 0 && !hasOptionGroups(options) && inputItems.map(renderItem), inputItems.length > 0 && hasOptionGroups(options) && options.map(renderGroup))));
 };
 var ComboboxBaseSkeleton = () => /* @__PURE__ */ React54.createElement(Skeleton, {
   height: 38
@@ -10702,6 +10718,7 @@ Input2.Skeleton.displayName = "Input.Skeleton";
 import React58, { useRef as useRef7, useState as useState8 } from "react";
 import { useId as useId8 } from "@react-aria/utils";
 import { useSelect } from "downshift";
+import { without } from "lodash";
 import defaults from "lodash/defaults";
 import isArray from "lodash/isArray";
 import isNil from "lodash/isNil";
@@ -10710,7 +10727,7 @@ var hasIconProperty = (val) => {
   var _a;
   return typeof val === "string" || ((_a = val == null ? void 0 : val.icon) == null ? void 0 : _a.body) !== void 0;
 };
-var hasOptionGroups = (val) => {
+var hasOptionGroups2 = (val) => {
   return !val.some((opt) => (opt == null ? void 0 : opt.label) === void 0 || !isArray(opt == null ? void 0 : opt.options));
 };
 var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
@@ -10763,7 +10780,6 @@ var _SelectBase = (props) => {
     valid,
     emptyState,
     actions,
-    required,
     children,
     labelWrapper
   } = _a, rest = __objRest(_a, [
@@ -10785,14 +10801,13 @@ var _SelectBase = (props) => {
     "valid",
     "emptyState",
     "actions",
-    "required",
     "children",
     "labelWrapper"
   ]);
   const [hasFocus, setFocus] = useState8(false);
   const targetRef = useRef7(null);
   const menuRef = useRef7(null);
-  const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
+  const items = hasOptionGroups2(options) ? options.flatMap((g) => g.options) : options;
   const findItemByValue = (val) => {
     if (val === null) {
       return null;
@@ -10873,7 +10888,7 @@ var _SelectBase = (props) => {
     style: { width: (_b = targetRef.current) == null ? void 0 : _b.offsetWidth }
   }, /* @__PURE__ */ React58.createElement(Select.Menu, __spreadValues({
     maxHeight
-  }, menuProps), options.length === 0 && /* @__PURE__ */ React58.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Select.Divider, {
+  }, menuProps), options.length === 0 && /* @__PURE__ */ React58.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups2(options) && options.map(renderItem), options.length > 0 && hasOptionGroups2(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Select.Divider, {
     onMouseOver: () => setHighlightedIndex(-1)
   }), actions.map((act, index) => /* @__PURE__ */ React58.createElement(Select.ActionItem, __spreadProps(__spreadValues({
     key: `${index}`
@@ -10904,7 +10919,7 @@ var Select2 = (_a) => {
   const errorMessageId = useId8();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
-  const baseProps = omit6(props, Object.keys(labelProps));
+  const baseProps = omit6(props, without(Object.keys(labelProps), "required"));
   const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
   const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
   const label = /* @__PURE__ */ React58.createElement(Label2, __spreadValues({
@@ -13183,7 +13198,7 @@ var import_chevronLeft4 = __toESM(require_chevronLeft());
 var import_chevronRight4 = __toESM(require_chevronRight());
 var cellStyles = tv4({
   extend: focusRing,
-  base: "w-8 h-8 typography-small cursor-default rounded flex items-center justify-center",
+  base: "w-8 h-8 typography-small cursor-default rounded-md flex items-center justify-center outside-month:hidden",
   variants: {
     isSelected: {
       false: "text-default hover:bg-default pressed:bg-intense",
@@ -13362,7 +13377,7 @@ import {
 import { tv as tv5 } from "tailwind-variants";
 var cell = tv5({
   extend: focusRing,
-  base: "w-full h-full flex items-center justify-center rounded text-default",
+  base: "w-full h-full flex items-center justify-center rounded-md text-default",
   variants: {
     selectionState: {
       none: "group-hover:bg-default group-pressed:bg-intense",
@@ -13390,9 +13405,9 @@ function RangeCalendar(props) {
     date,
     className: tw(
       "group w-8 h-8 typography-small outline outline-0 cursor-default",
-      "outside-month:text-inactive selected:bg-primary-default",
+      "outside-month:hidden selected:bg-primary-default",
       "invalid:selected:bg-danger-default",
-      "selection-start:rounded-s selection-end:rounded-e"
+      "selection-start:rounded-s-md selection-end:rounded-e-md"
     )
   }, (_a) => {
     var _b = _a, { formattedDate, isSelected, isSelectionStart, isSelectionEnd } = _b, rest = __objRest(_b, ["formattedDate", "isSelected", "isSelectionStart", "isSelectionEnd"]);
@@ -15052,19 +15067,11 @@ import React105, { useEffect as useEffect10, useRef as useRef13, useState as use
 import { ariaHideOutside as ariaHideOutside2 } from "@react-aria/overlays";
 import { useId as useId14 } from "@react-aria/utils";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
-import isArray4 from "lodash/isArray";
 import isEqual from "lodash/isEqual";
 import isNil2 from "lodash/isNil";
-import isObject2 from "lodash/isObject";
 import omit16 from "lodash/omit";
 import omitBy from "lodash/omitBy";
 import { matchSorter as matchSorter2 } from "match-sorter";
-var isOptionGroup = (option) => {
-  return isObject2(option) && "options" in option && isArray4(option.options);
-};
-var hasOptionGroups2 = (options) => {
-  return options.some(isOptionGroup);
-};
 var MultiSelectBase = (_a) => {
   var _b = _a, {
     id,
@@ -15132,14 +15139,14 @@ var MultiSelectBase = (_a) => {
   );
   const keys = typeof options[0] === "string" ? void 0 : optionKeys;
   const selectedItemsAsStrings = selectedItems.map(itemToString);
-  const filteredOptions = hasOptionGroups2(options) ? options.map((option) => __spreadProps(__spreadValues({}, option), {
+  const filteredOptions = hasOptionGroups(options) ? options.map((option) => __spreadProps(__spreadValues({}, option), {
     options: (inputValue ? matchSorter2(option.options, inputValue, { keys }) : option.options).filter(
       (opt) => !selectedItemsAsStrings.includes(itemToString(opt))
     )
   })) : (inputValue ? matchSorter2(options, inputValue, { keys }) : options).filter(
     (opt) => !selectedItemsAsStrings.includes(itemToString(opt))
   );
-  const flattenedOptions = hasOptionGroups2(filteredOptions) ? filteredOptions.flatMap((group) => group.options) : filteredOptions;
+  const flattenedOptions = hasOptionGroups(filteredOptions) ? filteredOptions.flatMap((group) => group.options) : filteredOptions;
   const {
     isOpen,
     openMenu,
@@ -16151,8 +16158,16 @@ var Section4 = (props) => {
   const _collapsed = title ? props.collapsed : void 0;
   const _defaultCollapsed = title ? (_b = props.defaultCollapsed) != null ? _b : false : false;
   const [isCollapsed, setCollapsed] = React121.useState(_collapsed != null ? _collapsed : _defaultCollapsed);
+  const [isResting, setResting] = React121.useState(true);
   const [ref, { height }] = useMeasure();
   const toggleAreaRef = useRef14(null);
+  const isMounted = useRef14(true);
+  React121.useEffect(
+    () => () => {
+      isMounted.current = false;
+    },
+    []
+  );
   const menu = title ? (_c = props.menu) != null ? _c : void 0 : void 0;
   const menuAriaLabel = title ? (_e = (_d = props.menuAriaLabel) != null ? _d : props.menuLabel) != null ? _e : "Context menu" : void 0;
   const onAction = title ? props.onAction : void 0;
@@ -16179,7 +16194,9 @@ var Section4 = (props) => {
     config: {
       duration: 150
     },
-    immediate: !_collapsible
+    immediate: !_collapsible,
+    onStart: () => isMounted.current && setResting(false),
+    onRest: () => isMounted.current && setResting(true)
   }), { transform } = _f, spring = __objRest(_f, ["transform"]);
   const toggleId = useId17();
   const regionId = useId17();
@@ -16233,7 +16250,7 @@ var Section4 = (props) => {
     id: regionId,
     "aria-hidden": _collapsible ? isCollapsed ? true : void 0 : void 0,
     style: spring,
-    className: tw({ "overflow-hidden": _collapsible })
+    className: tw({ "overflow-hidden": _collapsible && (isCollapsed || !isResting) })
   }, /* @__PURE__ */ React121.createElement("div", {
     ref
   }, hasTabs ? /* @__PURE__ */ React121.createElement(SectionTabs, __spreadProps(__spreadValues({}, children.props), {