@loomhq/lens 12.12.4 → 12.13.0

package/dist/cjs/index.js

@@ -1107,6 +1107,11 @@ var layoutDeprecatedWarning = `Lens: Layout component is deprecated. Use Arrange
 
 // src/components/text/text.tsx
 var dimAmount = 0.6;
+var FontFamily = /* @__PURE__ */ ((FontFamily2) => {
+  FontFamily2["sans-serif"] = "inherit";
+  FontFamily2["mono"] = "Atlassian Mono";
+  return FontFamily2;
+})(FontFamily || {});
 var variants = {
   body: {
     size: "body-md",
@@ -1137,6 +1142,7 @@ var TextWrapper = import_styled.default.span`
   ${(props) => props.fontSetting && `font-feature-settings: ${getFontSetting(props.fontSetting)}`};
   ${(props) => props.isDimmed && `opacity: ${dimAmount}`};
   ${(props) => props.alignment && `text-align: ${props.alignment}`};
+  ${(props) => props.overflowWrap && `overflow-wrap: ${props.overflowWrap};`};
   ${(props) => props.hasEllipsis && !props.ellipsisLines && `
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1149,6 +1155,7 @@ var TextWrapper = import_styled.default.span`
     -webkit-line-clamp: ${props.ellipsisLines};
   `};
   ${(props) => !props.hasEllipsis && props.noWrap && "white-space: nowrap; overflow: hidden;"};
+  ${(props) => props.fontFamily && `font-family: ${FontFamily[props.fontFamily]};`};
   ${(props) => props.sizeMinMax && `
     min-height: 0vw;
     font-size: clamp(
@@ -1181,6 +1188,7 @@ var Text = (_a) => {
     color,
     isInline,
     isDimmed,
+    fontFamily = "sans-serif",
     fontWeight = "regular",
     hasEllipsis,
     ellipsisLines,
@@ -1189,13 +1197,15 @@ var Text = (_a) => {
     htmlTag = "span",
     alignment,
     sizeMinMax,
-    fontSetting = "normal"
+    fontSetting = "normal",
+    overflowWrap
   } = _b, props = __objRest(_b, [
     "children",
     "size",
     "color",
     "isInline",
     "isDimmed",
+    "fontFamily",
     "fontWeight",
     "hasEllipsis",
     "ellipsisLines",
@@ -1204,7 +1214,8 @@ var Text = (_a) => {
     "htmlTag",
     "alignment",
     "sizeMinMax",
-    "fontSetting"
+    "fontSetting",
+    "overflowWrap"
   ]);
   if (isDimmed) {
     console.warn(textIsDimmedDeprecated);
@@ -1220,6 +1231,7 @@ var Text = (_a) => {
       isInline,
       isDimmed,
       fontWeight: variant ? variants[variant].fontWeight : fontWeight,
+      fontFamily,
       hasEllipsis,
       ellipsisLines,
       noWrap,
@@ -1227,7 +1239,8 @@ var Text = (_a) => {
       as: htmlTag,
       alignment,
       sizeMinMax,
-      fontSetting
+      fontSetting,
+      overflowWrap
     }, props),
     children
   );
@@ -3775,6 +3788,13 @@ function SvgCheck() {
   return /* @__PURE__ */ React22.createElement(import_check_mark.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
+// src/components/icon/available-icons/close.tsx
+var import_close = __toESM(require("@atlaskit/icon/core/close"));
+var React23 = __toESM(require("react"));
+function SvgClose() {
+  return /* @__PURE__ */ React23.createElement(import_close.default, { label: "", testId: "ads-refreshed-icon" });
+}
+
 // src/components/menu/menu.tsx
 var menuPositions = {
   left: "bottom-start",
@@ -3782,7 +3802,9 @@ var menuPositions = {
   ["topLeft"]: "top-start",
   ["topRight"]: "top-end",
   leftSide: "left-start",
-  rightSide: "right-start"
+  rightSide: "right-start",
+  rightTop: "right-start",
+  leftTop: "left-start"
 };
 var MenuContainer = import_styled17.default.div`
   background-color: ${getColorValue("overlay")};
@@ -3796,12 +3818,18 @@ var MenuContainer = import_styled17.default.div`
   border: 1px solid ${getColorValue("border")};
   ${getShadow("medium")};
   ${getRadius("250")};
+  overflow: hidden;
+`;
+var SearchWrapper = import_styled17.default.div`
+  flex-shrink: 0;
 `;
 var MenuWrapper = import_styled17.default.ul`
   padding: ${(props) => props.search ? `0 ${u(1.5)} ${u(1.5)} ${u(1.5)}` : u(1.5)};
   list-style: none;
   overflow: auto;
   margin: 0;
+  flex: 1 1 auto;
+  min-height: 0;
 `;
 var MenuItemWrapper = import_styled17.default.li`
   display: ${({ hidden }) => hidden ? "none" : "grid"};
@@ -3836,6 +3864,25 @@ var MenuItemWrapper = import_styled17.default.li`
       width: calc(100% + ${u(3)});
     }
   `};
+
+  /* Default state: show checkmark for selected items */
+  .check-icon {
+    display: block;
+  }
+
+  .deselect-icon {
+    display: none;
+  }
+
+  /* When highlighted (mouse hover OR keyboard navigation) and allowsDeselect: swap to X */
+  ${(props) => props.showDeselectIcon && props.isHighlighted ? `
+    .check-icon {
+      display: none;
+    }
+    .deselect-icon {
+      display: block;
+    }
+  ` : ""}
 `;
 var Image2 = import_styled17.default.img`
   height: 100%;
@@ -3854,7 +3901,8 @@ var MenuItem = (_a) => {
     hasDivider,
     children,
     menuItemRole,
-    keyboardMove
+    keyboardMove,
+    showDeselectIcon = false
   } = _b, props = __objRest(_b, [
     "isDisabled",
     "isHighlighted",
@@ -3863,7 +3911,8 @@ var MenuItem = (_a) => {
     "hasDivider",
     "children",
     "menuItemRole",
-    "keyboardMove"
+    "keyboardMove",
+    "showDeselectIcon"
   ]);
   const checkColumn = isSelected ? "auto" : "";
   const iconColumn = icon ? "auto" : "";
@@ -3881,11 +3930,12 @@ var MenuItem = (_a) => {
       columns,
       hasDivider,
       tabIndex: isDisabled ? -1 : 0,
-      "data-highlighted": isHighlighted || void 0
+      "data-highlighted": isHighlighted || void 0,
+      showDeselectIcon
     }, updatedProps),
     icon && (typeof icon === "string" ? /* @__PURE__ */ import_react23.default.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ import_react23.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react23.default.createElement(Image2, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ import_react23.default.createElement(icon_default, { icon, color })),
     /* @__PURE__ */ import_react23.default.createElement(text_default, { color, hasEllipsis: true }, children),
-    isSelected && /* @__PURE__ */ import_react23.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react23.default.createElement(SvgCheck, null), color })
+    isSelected && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "check-icon", "aria-hidden": "true" }, /* @__PURE__ */ import_react23.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react23.default.createElement(SvgCheck, null), color })), /* @__PURE__ */ import_react23.default.createElement("span", { className: "deselect-icon", "aria-hidden": "true" }, /* @__PURE__ */ import_react23.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react23.default.createElement(SvgClose, null), color })))
   );
 };
 var Menu = (_a) => {
@@ -3922,7 +3972,7 @@ var Menu = (_a) => {
       zIndex,
       position
     }, updatedDownshiftMenuProps), props),
-    search && search,
+    search && /* @__PURE__ */ import_react23.default.createElement(SearchWrapper, null, search),
     /* @__PURE__ */ import_react23.default.createElement(MenuWrapper, { search }, children)
   );
 };
@@ -3934,9 +3984,9 @@ var import_react24 = __toESM(require("react"));
 
 // src/components/icon/available-icons/search.tsx
 var import_search = __toESM(require("@atlaskit/icon/core/search"));
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 function SvgSearch() {
-  return /* @__PURE__ */ React24.createElement(import_search.default, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React25.createElement(import_search.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/search-bar/search-bar.tsx
@@ -3953,22 +4003,31 @@ var SearchBar = ({
   onChange,
   getInputProps
 }) => {
+  const inputProps = getInputProps ? getInputProps({
+    placeholder,
+    value,
+    type: "text"
+  }) : { placeholder, value, type: "text" };
+  const handleChange = (e) => {
+    if (inputProps.onChange) {
+      inputProps.onChange(e);
+    }
+    onChange(e);
+  };
   return /* @__PURE__ */ import_react24.default.createElement(SearchBarContainer, null, /* @__PURE__ */ import_react24.default.createElement(
     text_input_default,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       "aria-label": ariaLabel,
       icon: /* @__PURE__ */ import_react24.default.createElement(SvgSearch, null)
-    }, getInputProps({
-      placeholder,
-      value,
-      onChange,
-      type: "text"
-    }))
+    }, inputProps), {
+      onChange: handleChange
+    })
   ));
 };
 var search_bar_default = SearchBar;
 
 // src/components/select/select.tsx
+var SIDE_MENU_PADDING_UNITS = 2;
 var SelectWrapper = import_styled19.default.div`
   position: relative;
 `;
@@ -4194,7 +4253,7 @@ var getSelectedOption = (value, options) => {
     return options.find((item) => item.value === value);
   }
 };
-var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps, keyboardMove, setKeyboardMove) => {
+var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps, keyboardMove, setKeyboardMove, allowsDeselect = false) => {
   const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
   return /* @__PURE__ */ import_react25.default.createElement(
     MenuItem,
@@ -4219,7 +4278,8 @@ var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedI
       hasDivider: item.hasDivider,
       isHighlighted: highlightedIndex === index,
       keyboardMove: keyboardMove && highlightedIndex === index,
-      isSelected
+      isSelected,
+      showDeselectIcon: allowsDeselect && isSelected
     }),
     item.title
   );
@@ -4233,7 +4293,8 @@ var SelectMenu = (_a) => {
     getItemProps,
     search,
     keyboardMove,
-    setKeyboardMove
+    setKeyboardMove,
+    allowsDeselect
   } = _b, menuProps = __objRest(_b, [
     "options",
     "selectedItem",
@@ -4242,7 +4303,8 @@ var SelectMenu = (_a) => {
     "getItemProps",
     "search",
     "keyboardMove",
-    "setKeyboardMove"
+    "setKeyboardMove",
+    "allowsDeselect"
   ]);
   if (!isGrouped(options)) {
     return /* @__PURE__ */ import_react25.default.createElement(menu_default, __spreadValues({ search }, menuProps), options.map(
@@ -4254,7 +4316,8 @@ var SelectMenu = (_a) => {
         highlightedIndex,
         getItemProps,
         keyboardMove,
-        setKeyboardMove
+        setKeyboardMove,
+        allowsDeselect
       )
     ));
   }
@@ -4270,7 +4333,8 @@ var SelectMenu = (_a) => {
         highlightedIndex,
         getItemProps,
         keyboardMove,
-        setKeyboardMove
+        setKeyboardMove,
+        allowsDeselect
       );
     })));
   }));
@@ -4295,7 +4359,8 @@ var Select = (_a) => {
     trigger,
     hasError,
     errorMessage = "Oops, that didn't work.",
-    search
+    search,
+    allowsDeselect = false
   } = _b, props = __objRest(_b, [
     "container",
     "onChange",
@@ -4315,26 +4380,47 @@ var Select = (_a) => {
     "trigger",
     "hasError",
     "errorMessage",
-    "search"
+    "search",
+    "allowsDeselect"
   ]);
+  var _a2;
   const environment = getDownshiftEnvironment(container);
   const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react25.useState)(false);
   const [keyboardMove, setKeyboardMove] = (0, import_react25.useState)(false);
   const [searchValue, setSearchValue] = (0, import_react25.useState)("");
   const onSearchChange = (e) => {
+    var _a3;
     const value = e.target.value;
     setSearchValue(value);
+    (_a3 = search == null ? void 0 : search.onSearch) == null ? void 0 : _a3.call(search, value);
   };
   const [selectedItem, setSelectedItem] = (0, import_react25.useState)(
-    getSelectedOption(selectedOptionValue, options)
+    (_a2 = getSelectedOption(selectedOptionValue, options)) != null ? _a2 : null
   );
   const onDownshiftChange = (item) => {
-    setSelectedItem(item);
-    onChange && onChange(item ? item : "");
+    const isCurrentlySelected = selectedItem && item && item.value === selectedItem.value || !selectedItem && item && item.value === selectedOptionValue;
+    if (allowsDeselect && isCurrentlySelected) {
+      setSelectedItem(null);
+      setDownshiftIsOpen(false);
+      onChange && onChange(null);
+    } else {
+      setSelectedItem(item != null ? item : null);
+      if (item) {
+        onChange && onChange(item);
+      } else if (allowsDeselect) {
+        onChange && onChange(null);
+      }
+    }
+  };
+  const onStateChange = (changes) => {
+    if (changes.isOpen !== void 0) {
+      setDownshiftIsOpen(changes.isOpen);
+    }
   };
   const downshiftProps = {
     itemToString: (item) => item ? item.value : "",
     onChange: onDownshiftChange,
+    onStateChange,
     onOuterClick,
     environment,
     selectedItem,
@@ -4343,34 +4429,52 @@ var Select = (_a) => {
   if (environment) {
     downshiftProps.environment = environment;
   }
+  const isSideMenu = menuPosition === "leftTop" || menuPosition === "rightTop";
   const { layerProps, triggerProps, renderLayer, triggerBounds } = (0, import_react_laag.useLayer)({
     isOpen: downshiftIsOpen,
     container,
     ResizeObserver: import_resize_observer_polyfill.default,
     placement: menuPositions[menuPosition],
-    auto: true,
-    snap: true,
+    auto: !isSideMenu,
+    snap: !isSideMenu,
     triggerOffset
   });
+  const effectiveMenuMaxHeight = (0, import_react25.useMemo)(() => {
+    if (isSideMenu && typeof window !== "undefined" && triggerBounds) {
+      const viewportHeight = window.innerHeight;
+      const availableHeight = viewportHeight - triggerBounds.top;
+      const paddingReserve = SIDE_MENU_PADDING_UNITS * unit;
+      const calculatedMaxHeight = Math.floor(
+        Math.max(0, availableHeight - paddingReserve) / unit
+      );
+      return menuMaxHeight ? Math.min(menuMaxHeight, calculatedMaxHeight) : calculatedMaxHeight;
+    }
+    return menuMaxHeight;
+  }, [isSideMenu, menuMaxHeight, triggerBounds]);
   (0, import_react25.useEffect)(() => {
-    const expectedSelectedItem = getSelectedOption(
-      selectedOptionValue,
-      options
-    );
+    var _a3;
+    const expectedSelectedItem = (_a3 = getSelectedOption(selectedOptionValue, options)) != null ? _a3 : null;
     if ((expectedSelectedItem == null ? void 0 : expectedSelectedItem.value) !== (selectedItem == null ? void 0 : selectedItem.value)) {
       setSelectedItem(expectedSelectedItem);
     }
   }, [selectedOptionValue, options, selectedItem]);
   (0, import_react25.useEffect)(() => {
+    var _a3;
     onOpenChange && onOpenChange(downshiftIsOpen);
-  }, [downshiftIsOpen, onOpenChange]);
+    if (!downshiftIsOpen) {
+      setSearchValue("");
+      (_a3 = search == null ? void 0 : search.onSearch) == null ? void 0 : _a3.call(search, "");
+    }
+  }, [downshiftIsOpen, onOpenChange, search == null ? void 0 : search.onSearch]);
   const stateReducer = (state, changes) => {
-    if (changes.isOpen !== void 0) {
-      if (changes.type === import_downshift.default.stateChangeTypes.keyDownEscape) {
-        setDownshiftIsOpen(false);
-        return { isOpen: false };
+    if (allowsDeselect && changes.type === import_downshift.default.stateChangeTypes.clickItem && changes.selectedItem) {
+      const isCurrentlySelected = state.selectedItem && changes.selectedItem.value === state.selectedItem.value || !state.selectedItem && changes.selectedItem.value === selectedOptionValue;
+      if (isCurrentlySelected) {
+        return __spreadProps(__spreadValues({}, changes), { selectedItem: null, isOpen: false });
       }
-      setDownshiftIsOpen(changes.isOpen);
+    }
+    if (changes.type === import_downshift.default.stateChangeTypes.keyDownEscape) {
+      return { isOpen: false };
     }
     return changes;
   };
@@ -4392,6 +4496,9 @@ var Select = (_a) => {
   };
   options = (0, import_react25.useMemo)(() => {
     if (search) {
+      if (search.onSearch) {
+        return options;
+      }
       if (isGrouped(options)) {
         let filteredGroups;
         if (search.searchType === "startsWith") {
@@ -4424,7 +4531,7 @@ var Select = (_a) => {
       );
     }
     return options;
-  }, [options, searchValue, search]);
+  }, [options, searchValue, search == null ? void 0 : search.onSearch, search == null ? void 0 : search.searchType]);
   return /* @__PURE__ */ import_react25.default.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react25.default.createElement(import_downshift.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
     getItemProps,
     getInputProps,
@@ -4488,7 +4595,7 @@ var Select = (_a) => {
               position: menuPosition,
               downshiftMenuProps: () => getMenuProps({ onKeyDown }),
               maxWidth: menuMaxWidth,
-              maxHeight: menuMaxHeight,
+              maxHeight: effectiveMenuMaxHeight,
               minWidth: menuMinWidth,
               search: search && /* @__PURE__ */ import_react25.default.createElement(
                 search_bar_default,
@@ -4501,7 +4608,8 @@ var Select = (_a) => {
                 }
               ),
               keyboardMove,
-              setKeyboardMove
+              setKeyboardMove,
+              allowsDeselect
             }
           )
         )
@@ -4632,15 +4740,6 @@ var backdrop_default = Backdrop;
 var import_styled21 = __toESM(require("@emotion/styled"));
 var import_focus_trap_react = __toESM(require("focus-trap-react"));
 var import_react28 = __toESM(require("react"));
-
-// src/components/icon/available-icons/close.tsx
-var import_close = __toESM(require("@atlaskit/icon/core/close"));
-var React28 = __toESM(require("react"));
-function SvgClose() {
-  return /* @__PURE__ */ React28.createElement(import_close.default, { label: "", testId: "ads-refreshed-icon" });
-}
-
-// src/components/modal/modal.tsx
 var DEFAULT_MODAL_CARD_HEIGHT = "70vh";
 var ContentWrapper = import_styled21.default.div`
   display: grid;
@@ -4740,7 +4839,8 @@ var ModalCard = (_a) => {
     ariaLabelledBy,
     ref,
     removeClose,
-    initialFocus
+    initialFocus,
+    closeOnEscape = true
   } = _b, props = __objRest(_b, [
     "children",
     "onCloseClick",
@@ -4753,10 +4853,11 @@ var ModalCard = (_a) => {
     "ariaLabelledBy",
     "ref",
     "removeClose",
-    "initialFocus"
+    "initialFocus",
+    "closeOnEscape"
   ]);
   const keyListener = (e) => {
-    if (e.key === "Escape") {
+    if (e.key === "Escape" && closeOnEscape) {
       e.preventDefault();
       if (!removeClose) {
         onCloseClick(e);
@@ -6668,7 +6769,7 @@ var Tooltip = (_a) => {
     content,
     shortcut,
     placement = "topCenter",
-    keepOpen,
+    keepOpen = true,
     triggerOffset = 4,
     maxWidth = 26,
     isInline = true,
@@ -6745,12 +6846,13 @@ var Tooltip = (_a) => {
     const keyListener = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
+        e.stopPropagation();
         handleBlur();
       }
     };
-    window.addEventListener("keydown", keyListener);
+    window.addEventListener("keydown", keyListener, true);
     return () => {
-      window.removeEventListener("keydown", keyListener);
+      window.removeEventListener("keydown", keyListener, true);
     };
   }, [isOpen, setIsOpen]);
   const { layerProps, triggerProps, renderLayer } = (0, import_react_laag4.useLayer)({
@@ -7298,7 +7400,7 @@ var Logo = (_a) => {
     maxWidth,
     symbolColor,
     wordmarkColor = "body",
-    brand = "loom",
+    brand = "product",
     customId = ""
   } = _b, props = __objRest(_b, [
     "variant",