@loomhq/lens 12.12.3 → 12.12.5

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",
@@ -1149,6 +1154,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 +1187,7 @@ var Text = (_a) => {
     color,
     isInline,
     isDimmed,
+    fontFamily = "sans-serif",
     fontWeight = "regular",
     hasEllipsis,
     ellipsisLines,
@@ -1196,6 +1203,7 @@ var Text = (_a) => {
     "color",
     "isInline",
     "isDimmed",
+    "fontFamily",
     "fontWeight",
     "hasEllipsis",
     "ellipsisLines",
@@ -1220,6 +1228,7 @@ var Text = (_a) => {
       isInline,
       isDimmed,
       fontWeight: variant ? variants[variant].fontWeight : fontWeight,
+      fontFamily,
       hasEllipsis,
       ellipsisLines,
       noWrap,
@@ -3379,8 +3388,7 @@ var IconButtonBox = import_styled14.default.button`
     border-radius: ${(props) => sizeStyles[props.size].radius};
   }
 
-  &:focus-visible:before,
-  &:focus:before {
+  &:focus-visible:before {
     ${getFocusRing()};
   }
 
@@ -3776,6 +3784,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",
@@ -3837,6 +3852,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%;
@@ -3855,7 +3889,8 @@ var MenuItem = (_a) => {
     hasDivider,
     children,
     menuItemRole,
-    keyboardMove
+    keyboardMove,
+    showDeselectIcon = false
   } = _b, props = __objRest(_b, [
     "isDisabled",
     "isHighlighted",
@@ -3864,7 +3899,8 @@ var MenuItem = (_a) => {
     "hasDivider",
     "children",
     "menuItemRole",
-    "keyboardMove"
+    "keyboardMove",
+    "showDeselectIcon"
   ]);
   const checkColumn = isSelected ? "auto" : "";
   const iconColumn = icon ? "auto" : "";
@@ -3882,11 +3918,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) => {
@@ -3935,9 +3972,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
@@ -4195,7 +4232,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,
@@ -4220,7 +4257,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
   );
@@ -4234,7 +4272,8 @@ var SelectMenu = (_a) => {
     getItemProps,
     search,
     keyboardMove,
-    setKeyboardMove
+    setKeyboardMove,
+    allowsDeselect
   } = _b, menuProps = __objRest(_b, [
     "options",
     "selectedItem",
@@ -4243,7 +4282,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(
@@ -4255,7 +4295,8 @@ var SelectMenu = (_a) => {
         highlightedIndex,
         getItemProps,
         keyboardMove,
-        setKeyboardMove
+        setKeyboardMove,
+        allowsDeselect
       )
     ));
   }
@@ -4271,7 +4312,8 @@ var SelectMenu = (_a) => {
         highlightedIndex,
         getItemProps,
         keyboardMove,
-        setKeyboardMove
+        setKeyboardMove,
+        allowsDeselect
       );
     })));
   }));
@@ -4296,7 +4338,8 @@ var Select = (_a) => {
     trigger,
     hasError,
     errorMessage = "Oops, that didn't work.",
-    search
+    search,
+    allowsDeselect = false
   } = _b, props = __objRest(_b, [
     "container",
     "onChange",
@@ -4316,8 +4359,10 @@ 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);
@@ -4327,15 +4372,32 @@ var Select = (_a) => {
     setSearchValue(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,
@@ -4354,10 +4416,8 @@ var Select = (_a) => {
     triggerOffset
   });
   (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);
     }
@@ -4366,12 +4426,14 @@ var Select = (_a) => {
     onOpenChange && onOpenChange(downshiftIsOpen);
   }, [downshiftIsOpen, onOpenChange]);
   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;
   };
@@ -4502,7 +4564,8 @@ var Select = (_a) => {
                 }
               ),
               keyboardMove,
-              setKeyboardMove
+              setKeyboardMove,
+              allowsDeselect
             }
           )
         )
@@ -4633,15 +4696,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;
@@ -4741,7 +4795,8 @@ var ModalCard = (_a) => {
     ariaLabelledBy,
     ref,
     removeClose,
-    initialFocus
+    initialFocus,
+    closeOnEscape = true
   } = _b, props = __objRest(_b, [
     "children",
     "onCloseClick",
@@ -4754,10 +4809,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);
@@ -6746,12 +6802,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)({