@aivenio/aquarium 1.9.0 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1259,6 +1259,9 @@ input[type='number'].no-arrows {
1259
1259
  .whitespace-pre {
1260
1260
  white-space: pre !important;
1261
1261
  }
1262
+ .break-words {
1263
+ word-wrap: break-word !important;
1264
+ }
1262
1265
  .break-all {
1263
1266
  word-break: break-all !important;
1264
1267
  }
@@ -1258,6 +1258,9 @@ input[type='number'].no-arrows {
1258
1258
  .whitespace-pre {
1259
1259
  white-space: pre !important;
1260
1260
  }
1261
+ .break-words {
1262
+ word-wrap: break-word !important;
1263
+ }
1261
1264
  .break-all {
1262
1265
  word-break: break-all !important;
1263
1266
  }
package/dist/system.cjs CHANGED
@@ -3199,8 +3199,8 @@ var asButton = (Component, isDropdownButton) => {
3199
3199
  !isIconOnlyButton && COLOR_CLASSNAMES[kind],
3200
3200
  tw("inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative", {
3201
3201
  "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
3202
- "typography-default": !dense && !isIconOnlyButton,
3203
- "typography-small": dense && !isIconOnlyButton,
3202
+ "typography-default-strong": !dense && !isIconOnlyButton,
3203
+ "typography-small-strong": dense && !isIconOnlyButton,
3204
3204
  "py-3 px-4": !dense && isButton,
3205
3205
  "py-2 px-3": dense && isButton,
3206
3206
  "py-3": !dense && isGhost,
@@ -4200,10 +4200,12 @@ Card.ColorHiglight = ColorHighlight;
4200
4200
  var import_react29 = __toESM(require("react"));
4201
4201
  var LineClamp = import_react29.default.forwardRef(
4202
4202
  (_a, ref) => {
4203
- var _b = _a, { lines = 1, clamped = true, children, className } = _b, props = __objRest(_b, ["lines", "clamped", "children", "className"]);
4203
+ var _b = _a, { lines = 1, clamped = true, children, className, wordBreak = "break-words" } = _b, props = __objRest(_b, ["lines", "clamped", "children", "className", "wordBreak"]);
4204
4204
  return /* @__PURE__ */ import_react29.default.createElement("div", __spreadValues({
4205
4205
  ref,
4206
- className: classNames(className, "break-all", { [`line-clamp-${lines}`]: clamped })
4206
+ className: classNames(className, wordBreak === "break-words" ? "break-words" : "break-all", {
4207
+ [`line-clamp-${lines}`]: clamped
4208
+ })
4207
4209
  }, props), children);
4208
4210
  }
4209
4211
  );
@@ -4347,7 +4349,8 @@ var Card2 = ({
4347
4349
  imageAlt,
4348
4350
  fullSize: chips.length === 0
4349
4351
  })), /* @__PURE__ */ import_react31.default.createElement(Card.Content, null, clampTitle ? /* @__PURE__ */ import_react31.default.createElement(LineClamp, {
4350
- lines: clampTitle
4352
+ lines: clampTitle,
4353
+ wordBreak: "break-all"
4351
4354
  }, titleContent) : titleContent, /* @__PURE__ */ import_react31.default.createElement(Typography2.Caption, {
4352
4355
  color: "grey-70"
4353
4356
  }, children || description)), (action || link) && /* @__PURE__ */ import_react31.default.createElement(Card.Actions, null, action && /* @__PURE__ */ import_react31.default.createElement(SecondaryButton, __spreadValues({
@@ -5038,7 +5041,7 @@ var PopoverPanel = import_react44.default.forwardRef((_a, ref) => {
5038
5041
  className: classNames(
5039
5042
  className,
5040
5043
  tw(
5041
- "rounded-sm shadow-16dp bg-white mt-1 focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20"
5044
+ "rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20"
5042
5045
  )
5043
5046
  )
5044
5047
  }, props), children);
@@ -5098,9 +5101,7 @@ var PopoverWrapper = import_react45.default.forwardRef((props, ref) => {
5098
5101
  }, (0, import_utils3.mergeProps)(otherProps, modalProps, overlayProps)), {
5099
5102
  id: id != null ? id : overlayProps.id,
5100
5103
  className
5101
- }), children, /* @__PURE__ */ import_react45.default.createElement(import_overlays4.DismissButton, {
5102
- onDismiss: props.onClose
5103
- }))));
5104
+ }), children)));
5104
5105
  });
5105
5106
 
5106
5107
  // src/components/Combobox/Combobox.tsx
@@ -5234,8 +5235,7 @@ var ComboboxBase = (_a) => {
5234
5235
  autoFocus: true
5235
5236
  }, getMenuProps({ ref: overlayRef })), {
5236
5237
  style,
5237
- onClose: closeMenu,
5238
- className: tw("overflow-y-auto")
5238
+ onClose: closeMenu
5239
5239
  }), /* @__PURE__ */ import_react46.default.createElement(Select.Menu, {
5240
5240
  maxHeight
5241
5241
  }, isOpen && hasNoResults && /* @__PURE__ */ import_react46.default.createElement(Select.NoResults, null, noResults), isOpen && inputItems.map((item, index) => /* @__PURE__ */ import_react46.default.createElement(Select.Item, __spreadValues({
@@ -6308,15 +6308,12 @@ var DropdownMenu2 = import_react65.default.forwardRef(
6308
6308
  return /* @__PURE__ */ import_react65.default.createElement("div", __spreadValues({
6309
6309
  ref,
6310
6310
  style: { maxHeight, minWidth, maxWidth },
6311
- className: classNames(
6312
- className,
6313
- "bg-white w-full overflow-y-auto overflow-x-hidden typography-small text-grey-70"
6314
- )
6311
+ className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-grey-70")
6315
6312
  }, props), children);
6316
6313
  }
6317
6314
  );
6318
6315
  var ContentContainer = ({ children }) => /* @__PURE__ */ import_react65.default.createElement("div", {
6319
- className: tw("p-3")
6316
+ className: tw("p-3 overflow-y-auto overflow-x-hidden")
6320
6317
  }, children);
6321
6318
  DropdownMenu2.ContentContainer = ContentContainer;
6322
6319
  var List2 = import_react65.default.forwardRef(
@@ -6771,7 +6768,14 @@ var GridItem = Tailwindify(
6771
6768
 
6772
6769
  // src/components/LineClamp/LineClamp.tsx
6773
6770
  var import_react70 = __toESM(require("react"));
6774
- var LineClamp2 = ({ lines, children, expandLabel, collapseLabel }) => {
6771
+ var LineClamp2 = ({
6772
+ lines,
6773
+ children,
6774
+ wordBreak,
6775
+ expandLabel,
6776
+ collapseLabel,
6777
+ onClampedChange
6778
+ }) => {
6775
6779
  const ref = import_react70.default.useRef(null);
6776
6780
  const [clamped, setClamped] = import_react70.default.useState(true);
6777
6781
  const [isClampingEnabled, setClampingEnabled] = import_react70.default.useState(false);
@@ -6780,13 +6784,18 @@ var LineClamp2 = ({ lines, children, expandLabel, collapseLabel }) => {
6780
6784
  const el = ref.current;
6781
6785
  setClampingEnabled(((_a = el == null ? void 0 : el.scrollHeight) != null ? _a : 0) > ((_b = el == null ? void 0 : el.clientHeight) != null ? _b : 0));
6782
6786
  }, [ref.current]);
6787
+ const handleClampedChange = () => {
6788
+ setClamped(!clamped);
6789
+ onClampedChange == null ? void 0 : onClampedChange(!clamped);
6790
+ };
6783
6791
  return /* @__PURE__ */ import_react70.default.createElement("div", null, /* @__PURE__ */ import_react70.default.createElement(LineClamp, {
6784
6792
  ref,
6785
6793
  lines,
6786
- clamped
6794
+ clamped,
6795
+ wordBreak
6787
6796
  }, children), expandLabel && isClampingEnabled && /* @__PURE__ */ import_react70.default.createElement(GhostButton, {
6788
6797
  dense: true,
6789
- onClick: () => setClamped(!clamped)
6798
+ onClick: handleClampedChange
6790
6799
  }, clamped ? expandLabel : collapseLabel));
6791
6800
  };
6792
6801
 
@@ -7642,8 +7651,7 @@ var MultiSelectBase = (_a) => {
7642
7651
  autoFocus: true
7643
7652
  }, getMenuProps({ ref: overlayRef })), {
7644
7653
  style,
7645
- onClose: closeMenu,
7646
- className: tw("overflow-y-auto")
7654
+ onClose: closeMenu
7647
7655
  }), /* @__PURE__ */ import_react79.default.createElement(Select.Menu, {
7648
7656
  maxHeight
7649
7657
  }, isOpen && hasNoResults && /* @__PURE__ */ import_react79.default.createElement(Select.NoResults, null, noResults), isOpen && filteredOptions.map((item, index) => /* @__PURE__ */ import_react79.default.createElement(Select.Item, __spreadValues({
@@ -8009,8 +8017,7 @@ var _SelectBase = (props) => {
8009
8017
  autoFocus: true
8010
8018
  }, getMenuProps({ ref: overlayRef })), {
8011
8019
  style,
8012
- onClose: closeMenu,
8013
- className: tw("overflow-y-auto")
8020
+ onClose: closeMenu
8014
8021
  }), /* @__PURE__ */ import_react82.default.createElement(Select.Menu, {
8015
8022
  maxHeight
8016
8023
  }, isOpen && options.length === 0 && /* @__PURE__ */ import_react82.default.createElement(Select.EmptyStateContainer, null, emptyState), isOpen && options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), isOpen && options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), isOpen && actions.length > 0 && /* @__PURE__ */ import_react82.default.createElement(import_react82.default.Fragment, null, /* @__PURE__ */ import_react82.default.createElement(Select.Divider, {
package/dist/system.mjs CHANGED
@@ -3063,8 +3063,8 @@ var asButton = (Component, isDropdownButton) => {
3063
3063
  !isIconOnlyButton && COLOR_CLASSNAMES[kind],
3064
3064
  tw("inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative", {
3065
3065
  "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
3066
- "typography-default": !dense && !isIconOnlyButton,
3067
- "typography-small": dense && !isIconOnlyButton,
3066
+ "typography-default-strong": !dense && !isIconOnlyButton,
3067
+ "typography-small-strong": dense && !isIconOnlyButton,
3068
3068
  "py-3 px-4": !dense && isButton,
3069
3069
  "py-2 px-3": dense && isButton,
3070
3070
  "py-3": !dense && isGhost,
@@ -4064,10 +4064,12 @@ Card.ColorHiglight = ColorHighlight;
4064
4064
  import React24 from "react";
4065
4065
  var LineClamp = React24.forwardRef(
4066
4066
  (_a, ref) => {
4067
- var _b = _a, { lines = 1, clamped = true, children, className } = _b, props = __objRest(_b, ["lines", "clamped", "children", "className"]);
4067
+ var _b = _a, { lines = 1, clamped = true, children, className, wordBreak = "break-words" } = _b, props = __objRest(_b, ["lines", "clamped", "children", "className", "wordBreak"]);
4068
4068
  return /* @__PURE__ */ React24.createElement("div", __spreadValues({
4069
4069
  ref,
4070
- className: classNames(className, "break-all", { [`line-clamp-${lines}`]: clamped })
4070
+ className: classNames(className, wordBreak === "break-words" ? "break-words" : "break-all", {
4071
+ [`line-clamp-${lines}`]: clamped
4072
+ })
4071
4073
  }, props), children);
4072
4074
  }
4073
4075
  );
@@ -4211,7 +4213,8 @@ var Card2 = ({
4211
4213
  imageAlt,
4212
4214
  fullSize: chips.length === 0
4213
4215
  })), /* @__PURE__ */ React26.createElement(Card.Content, null, clampTitle ? /* @__PURE__ */ React26.createElement(LineClamp, {
4214
- lines: clampTitle
4216
+ lines: clampTitle,
4217
+ wordBreak: "break-all"
4215
4218
  }, titleContent) : titleContent, /* @__PURE__ */ React26.createElement(Typography2.Caption, {
4216
4219
  color: "grey-70"
4217
4220
  }, children || description)), (action || link) && /* @__PURE__ */ React26.createElement(Card.Actions, null, action && /* @__PURE__ */ React26.createElement(SecondaryButton, __spreadValues({
@@ -4890,7 +4893,7 @@ import { matchSorter } from "match-sorter";
4890
4893
  // src/components/Popover/PopoverWrapper.tsx
4891
4894
  import React40 from "react";
4892
4895
  import { FocusScope } from "@react-aria/focus";
4893
- import { DismissButton, OverlayContainer as OverlayContainer2, useModal, useOverlay } from "@react-aria/overlays";
4896
+ import { OverlayContainer as OverlayContainer2, useModal, useOverlay } from "@react-aria/overlays";
4894
4897
  import { mergeProps as mergeProps2 } from "@react-aria/utils";
4895
4898
 
4896
4899
  // src/common/Popover/Popover.tsx
@@ -4902,7 +4905,7 @@ var PopoverPanel = React39.forwardRef((_a, ref) => {
4902
4905
  className: classNames(
4903
4906
  className,
4904
4907
  tw(
4905
- "rounded-sm shadow-16dp bg-white mt-1 focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20"
4908
+ "rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20"
4906
4909
  )
4907
4910
  )
4908
4911
  }, props), children);
@@ -4962,9 +4965,7 @@ var PopoverWrapper = React40.forwardRef((props, ref) => {
4962
4965
  }, mergeProps2(otherProps, modalProps, overlayProps)), {
4963
4966
  id: id != null ? id : overlayProps.id,
4964
4967
  className
4965
- }), children, /* @__PURE__ */ React40.createElement(DismissButton, {
4966
- onDismiss: props.onClose
4967
- }))));
4968
+ }), children)));
4968
4969
  });
4969
4970
 
4970
4971
  // src/components/Combobox/Combobox.tsx
@@ -5098,8 +5099,7 @@ var ComboboxBase = (_a) => {
5098
5099
  autoFocus: true
5099
5100
  }, getMenuProps({ ref: overlayRef })), {
5100
5101
  style,
5101
- onClose: closeMenu,
5102
- className: tw("overflow-y-auto")
5102
+ onClose: closeMenu
5103
5103
  }), /* @__PURE__ */ React41.createElement(Select.Menu, {
5104
5104
  maxHeight
5105
5105
  }, isOpen && hasNoResults && /* @__PURE__ */ React41.createElement(Select.NoResults, null, noResults), isOpen && inputItems.map((item, index) => /* @__PURE__ */ React41.createElement(Select.Item, __spreadValues({
@@ -6172,15 +6172,12 @@ var DropdownMenu2 = React59.forwardRef(
6172
6172
  return /* @__PURE__ */ React59.createElement("div", __spreadValues({
6173
6173
  ref,
6174
6174
  style: { maxHeight, minWidth, maxWidth },
6175
- className: classNames(
6176
- className,
6177
- "bg-white w-full overflow-y-auto overflow-x-hidden typography-small text-grey-70"
6178
- )
6175
+ className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-grey-70")
6179
6176
  }, props), children);
6180
6177
  }
6181
6178
  );
6182
6179
  var ContentContainer = ({ children }) => /* @__PURE__ */ React59.createElement("div", {
6183
- className: tw("p-3")
6180
+ className: tw("p-3 overflow-y-auto overflow-x-hidden")
6184
6181
  }, children);
6185
6182
  DropdownMenu2.ContentContainer = ContentContainer;
6186
6183
  var List2 = React59.forwardRef(
@@ -6635,7 +6632,14 @@ var GridItem = Tailwindify(
6635
6632
 
6636
6633
  // src/components/LineClamp/LineClamp.tsx
6637
6634
  import React64 from "react";
6638
- var LineClamp2 = ({ lines, children, expandLabel, collapseLabel }) => {
6635
+ var LineClamp2 = ({
6636
+ lines,
6637
+ children,
6638
+ wordBreak,
6639
+ expandLabel,
6640
+ collapseLabel,
6641
+ onClampedChange
6642
+ }) => {
6639
6643
  const ref = React64.useRef(null);
6640
6644
  const [clamped, setClamped] = React64.useState(true);
6641
6645
  const [isClampingEnabled, setClampingEnabled] = React64.useState(false);
@@ -6644,13 +6648,18 @@ var LineClamp2 = ({ lines, children, expandLabel, collapseLabel }) => {
6644
6648
  const el = ref.current;
6645
6649
  setClampingEnabled(((_a = el == null ? void 0 : el.scrollHeight) != null ? _a : 0) > ((_b = el == null ? void 0 : el.clientHeight) != null ? _b : 0));
6646
6650
  }, [ref.current]);
6651
+ const handleClampedChange = () => {
6652
+ setClamped(!clamped);
6653
+ onClampedChange == null ? void 0 : onClampedChange(!clamped);
6654
+ };
6647
6655
  return /* @__PURE__ */ React64.createElement("div", null, /* @__PURE__ */ React64.createElement(LineClamp, {
6648
6656
  ref,
6649
6657
  lines,
6650
- clamped
6658
+ clamped,
6659
+ wordBreak
6651
6660
  }, children), expandLabel && isClampingEnabled && /* @__PURE__ */ React64.createElement(GhostButton, {
6652
6661
  dense: true,
6653
- onClick: () => setClamped(!clamped)
6662
+ onClick: handleClampedChange
6654
6663
  }, clamped ? expandLabel : collapseLabel));
6655
6664
  };
6656
6665
 
@@ -7506,8 +7515,7 @@ var MultiSelectBase = (_a) => {
7506
7515
  autoFocus: true
7507
7516
  }, getMenuProps({ ref: overlayRef })), {
7508
7517
  style,
7509
- onClose: closeMenu,
7510
- className: tw("overflow-y-auto")
7518
+ onClose: closeMenu
7511
7519
  }), /* @__PURE__ */ React73.createElement(Select.Menu, {
7512
7520
  maxHeight
7513
7521
  }, isOpen && hasNoResults && /* @__PURE__ */ React73.createElement(Select.NoResults, null, noResults), isOpen && filteredOptions.map((item, index) => /* @__PURE__ */ React73.createElement(Select.Item, __spreadValues({
@@ -7873,8 +7881,7 @@ var _SelectBase = (props) => {
7873
7881
  autoFocus: true
7874
7882
  }, getMenuProps({ ref: overlayRef })), {
7875
7883
  style,
7876
- onClose: closeMenu,
7877
- className: tw("overflow-y-auto")
7884
+ onClose: closeMenu
7878
7885
  }), /* @__PURE__ */ React76.createElement(Select.Menu, {
7879
7886
  maxHeight
7880
7887
  }, isOpen && options.length === 0 && /* @__PURE__ */ React76.createElement(Select.EmptyStateContainer, null, emptyState), isOpen && options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), isOpen && options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), isOpen && actions.length > 0 && /* @__PURE__ */ React76.createElement(React76.Fragment, null, /* @__PURE__ */ React76.createElement(Select.Divider, {