@bigbinary/neeto-tags-frontend 2.2.34 → 2.2.35-beta1

package/dist/.ready

@@ -1 +1 @@
-Built at 2026-09-15T16:05:45.553Z
+Built at 2026-09-24T09:45:06.949Z

package/dist/cjs/v2/TagsComponent.js

@@ -74,17 +74,22 @@ var Title = function Title(_ref) {
 
 var TitleActionBlock = function TitleActionBlock(_ref) {
   var isDisabled = _ref.isDisabled,
-    setIsTagsDropdownVisible = _ref.setIsTagsDropdownVisible;
-  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-    "data-testid": "neeto-tags-add-tag-button",
-    disabled: isDisabled,
-    icon: lucideReact.Settings,
-    size: "icon-sm",
-    variant: "ghost",
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      setIsTagsDropdownVisible(ramda.not);
-    }
+    setIsTagsDropdownVisible = _ref.setIsTagsDropdownVisible,
+    anchorRef = _ref.anchorRef;
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: "inline-flex",
+    ref: anchorRef,
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+      "data-testid": "neeto-tags-add-tag-button",
+      disabled: isDisabled,
+      icon: lucideReact.Settings,
+      size: "icon-sm",
+      variant: "ghost",
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        setIsTagsDropdownVisible(ramda.not);
+      }
+    })
   });
 };
 
@@ -97,7 +102,9 @@ var Container = function Container(_ref) {
     titleComponentProps = _ref.titleComponentProps,
     children = _ref.children,
     isTagsBodyVisible = _ref.isTagsBodyVisible,
-    bodyProps = _ref.bodyProps;
+    bodyProps = _ref.bodyProps,
+    _ref$isHeaderInteract = _ref.isHeaderInteractive,
+    isHeaderInteractive = _ref$isHeaderInteract === void 0 ? true : _ref$isHeaderInteract;
   if (isMetadataBlock) {
     return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$4(_objectSpread$4({
       className: "space-y-4 rounded-lg border border-border bg-background p-4"
@@ -111,13 +118,13 @@ var Container = function Container(_ref) {
   var isDisabled = actionBlockProps.isDisabled,
     setIsTagsDropdownVisible = actionBlockProps.setIsTagsDropdownVisible;
   var onHeaderClick = function onHeaderClick() {
-    !isDisabled && setIsTagsDropdownVisible(ramda.not);
+    isHeaderInteractive && !isDisabled && setIsTagsDropdownVisible(ramda.not);
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$4(_objectSpread$4({
     className: "flex w-full flex-col items-start gap-2"
   }, containerProps), {}, {
     children: [titleComponentProps.showTitleBar && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames("flex w-full cursor-pointer items-center justify-between gap-2 text-foreground", titleComponentProps.containerClassName),
+      className: classNames("flex w-full items-center justify-between gap-2 text-foreground", isHeaderInteractive && "cursor-pointer", titleComponentProps.containerClassName),
       onClick: onHeaderClick,
       children: [/*#__PURE__*/jsxRuntime.jsx(Title, _objectSpread$4({}, titleComponentProps)), titleComponentProps.showAddTagsOnTitle && /*#__PURE__*/jsxRuntime.jsx(TitleActionBlock, _objectSpread$4({}, actionBlockProps))]
     }), isTagsBodyVisible && /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$4(_objectSpread$4({
@@ -140,7 +147,11 @@ var PopoverTagsSelector = function PopoverTagsSelector(_ref) {
     _ref$buttonProps = _ref.buttonProps,
     buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    dataTestId = _ref.dataTestId,
+    anchorRef = _ref.anchorRef,
+    _ref$hideTriggerButto = _ref.hideTriggerButton,
+    hideTriggerButton = _ref$hideTriggerButto === void 0 ? false : _ref$hideTriggerButto;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var triggerRef = react.useRef(null);
@@ -178,12 +189,16 @@ var PopoverTagsSelector = function PopoverTagsSelector(_ref) {
   var optionId = function optionId(index) {
     return "".concat(listboxId, "-option-").concat(index);
   };
-  var focusTrigger = function focusTrigger() {
-    var _triggerRef$current;
-    return (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || (_triggerRef$current = _triggerRef$current.querySelector("button")) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus({
+
+  // Positioning and focus target the external anchor (the gear) when the
+  // in-body trigger button is hidden, otherwise this component's own wrapper.
+  var focusTrigger = react.useCallback(function () {
+    var _anchor$querySelector;
+    var anchor = hideTriggerButton && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) || triggerRef.current;
+    anchor === null || anchor === void 0 || (_anchor$querySelector = anchor.querySelector("button")) === null || _anchor$querySelector === void 0 || _anchor$querySelector.focus({
       preventScroll: true
     });
-  };
+  }, [hideTriggerButton, anchorRef]);
   var close = react.useCallback(function () {
     var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref4$restoreFocus = _ref4.restoreFocus,
@@ -195,7 +210,7 @@ var PopoverTagsSelector = function PopoverTagsSelector(_ref) {
     // Return focus to the trigger only for keyboard / selection dismissals;
     // an outside click should leave focus wherever the user clicked.
     if (restoreFocus) focusTrigger();
-  }, [onOpenChange]);
+  }, [onOpenChange, focusTrigger]);
   var handleSelect = function handleSelect(tag) {
     onChange(tag);
     close({
@@ -239,7 +254,7 @@ var PopoverTagsSelector = function PopoverTagsSelector(_ref) {
   };
   var updatePosition = react.useCallback(function () {
     var _panelRef$current$off, _panelRef$current;
-    var trigger = triggerRef.current;
+    var trigger = hideTriggerButton && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) || triggerRef.current;
     if (!trigger) return;
     var rect = trigger.getBoundingClientRect();
     var panelHeight = (_panelRef$current$off = (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.offsetHeight) !== null && _panelRef$current$off !== void 0 ? _panelRef$current$off : 0;
@@ -252,7 +267,7 @@ var PopoverTagsSelector = function PopoverTagsSelector(_ref) {
       top: top,
       left: left
     });
-  }, []);
+  }, [hideTriggerButton, anchorRef]);
 
   // Position on open and whenever the panel's height changes (list filtering),
   // synchronously before paint so the panel is never seen mispositioned.
@@ -268,8 +283,12 @@ var PopoverTagsSelector = function PopoverTagsSelector(_ref) {
       preventScroll: true
     });
     var handleClickOutside = function handleClickOutside(event) {
-      var _triggerRef$current2, _panelRef$current3;
-      if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.contains(event.target)) return;
+      var _triggerRef$current, _anchorRef$current, _panelRef$current3;
+      if ((_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.contains(event.target)) return;
+
+      // Treat the external anchor (the gear) as inside, so its own toggle
+      // governs open/close instead of this handler racing it.
+      if (anchorRef !== null && anchorRef !== void 0 && (_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event.target)) return;
       if ((_panelRef$current3 = panelRef.current) !== null && _panelRef$current3 !== void 0 && _panelRef$current3.contains(event.target)) return;
       close();
     };
@@ -293,10 +312,88 @@ var PopoverTagsSelector = function PopoverTagsSelector(_ref) {
       if (rafRef.current) window.cancelAnimationFrame(rafRef.current);
       rafRef.current = null;
     };
-  }, [open, close, updatePosition]);
+  }, [open, close, updatePosition, anchorRef]);
   var optionClassName = function optionClassName(isActive) {
     return classNames("flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-start text-sm", isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent");
   };
+  var panel = open && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "bg-popover text-popover-foreground border-border fixed z-50 overflow-hidden rounded-md border shadow-md",
+    ref: panelRef,
+    style: {
+      top: (_coords$top = coords === null || coords === void 0 ? void 0 : coords.top) !== null && _coords$top !== void 0 ? _coords$top : 0,
+      left: (_coords$left = coords === null || coords === void 0 ? void 0 : coords.left) !== null && _coords$left !== void 0 ? _coords$left : 0,
+      width: POPOVER_PANEL_WIDTH,
+      visibility: coords ? "visible" : "hidden"
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "border-border border-b p-2",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+        "aria-autocomplete": "list",
+        "aria-controls": listboxId,
+        "aria-expanded": open,
+        "data-testid": dataTestId,
+        placeholder: t("neetoTags.placeholder.searchOrCreateTags"),
+        prefix: /*#__PURE__*/jsxRuntime.jsx(lucideReact.Search, {
+          size: 14
+        }),
+        role: "combobox",
+        size: "small",
+        value: query,
+        "aria-activedescendant": optionCount > 0 ? optionId(activeIndex) : undefined,
+        onChange: handleQueryChange,
+        onKeyDown: handleKeyDown
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "max-h-56 overflow-y-auto p-1",
+      id: listboxId,
+      role: "listbox",
+      children: [filteredTags.map(function (tag, index) {
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          "aria-selected": index === activeIndex,
+          className: optionClassName(index === activeIndex),
+          id: optionId(index),
+          role: "option",
+          type: "button",
+          onClick: function onClick() {
+            return handleSelect(tag);
+          },
+          onMouseEnter: function onMouseEnter() {
+            return setActiveIndex(index);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
+            label: tag.label,
+            variant: constants$1.TAG_STYLE_TO_BADGE_VARIANT[tag.style] || "secondary"
+          })
+        }, tag.value);
+      }), canCreate && /*#__PURE__*/jsxRuntime.jsxs("button", {
+        "aria-selected": activeIndex === filteredTags.length,
+        className: optionClassName(activeIndex === filteredTags.length),
+        id: optionId(filteredTags.length),
+        role: "option",
+        type: "button",
+        onClick: handleCreate,
+        onMouseEnter: function onMouseEnter() {
+          return setActiveIndex(filteredTags.length);
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(lucideReact.Plus, {
+          size: 14
+        }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "truncate",
+          children: [t("neetoTags.button.createNewTag"), ": ", /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "font-medium",
+            children: trimmedQuery
+          })]
+        })]
+      }), optionCount === 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-muted-foreground px-2 py-2 text-sm",
+        children: t("neetoTags.common.noTagsFound")
+      })]
+    })]
+  }), document.body);
+
+  // Gear-anchored mode: render only the floating panel (the gear is the
+  // trigger), with no in-body wrapper or button of its own.
+  if (hideTriggerButton) return panel || null;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "inline-block",
     ref: triggerRef,
@@ -311,79 +408,7 @@ var PopoverTagsSelector = function PopoverTagsSelector(_ref) {
       onClick: function onClick() {
         return onOpenChange(!open);
       }
-    }, buttonProps)), open && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "bg-popover text-popover-foreground border-border fixed z-50 overflow-hidden rounded-md border shadow-md",
-      ref: panelRef,
-      style: {
-        top: (_coords$top = coords === null || coords === void 0 ? void 0 : coords.top) !== null && _coords$top !== void 0 ? _coords$top : 0,
-        left: (_coords$left = coords === null || coords === void 0 ? void 0 : coords.left) !== null && _coords$left !== void 0 ? _coords$left : 0,
-        width: POPOVER_PANEL_WIDTH,
-        visibility: coords ? "visible" : "hidden"
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "border-border border-b p-2",
-        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
-          "aria-autocomplete": "list",
-          "aria-controls": listboxId,
-          "aria-expanded": open,
-          placeholder: t("neetoTags.placeholder.searchOrCreateTags"),
-          prefix: /*#__PURE__*/jsxRuntime.jsx(lucideReact.Search, {
-            size: 14
-          }),
-          role: "combobox",
-          size: "small",
-          value: query,
-          "aria-activedescendant": optionCount > 0 ? optionId(activeIndex) : undefined,
-          onChange: handleQueryChange,
-          onKeyDown: handleKeyDown
-        })
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "max-h-56 overflow-y-auto p-1",
-        id: listboxId,
-        role: "listbox",
-        children: [filteredTags.map(function (tag, index) {
-          return /*#__PURE__*/jsxRuntime.jsx("button", {
-            "aria-selected": index === activeIndex,
-            className: optionClassName(index === activeIndex),
-            id: optionId(index),
-            role: "option",
-            type: "button",
-            onClick: function onClick() {
-              return handleSelect(tag);
-            },
-            onMouseEnter: function onMouseEnter() {
-              return setActiveIndex(index);
-            },
-            children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
-              label: tag.label,
-              variant: constants$1.TAG_STYLE_TO_BADGE_VARIANT[tag.style] || "secondary"
-            })
-          }, tag.value);
-        }), canCreate && /*#__PURE__*/jsxRuntime.jsxs("button", {
-          "aria-selected": activeIndex === filteredTags.length,
-          id: optionId(filteredTags.length),
-          role: "option",
-          type: "button",
-          className: optionClassName(activeIndex === filteredTags.length),
-          onClick: handleCreate,
-          onMouseEnter: function onMouseEnter() {
-            return setActiveIndex(filteredTags.length);
-          },
-          children: [/*#__PURE__*/jsxRuntime.jsx(lucideReact.Plus, {
-            size: 14
-          }), /*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: "truncate",
-            children: [t("neetoTags.button.createNewTag"), ": ", /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "font-medium",
-              children: trimmedQuery
-            })]
-          })]
-        }), optionCount === 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "text-muted-foreground px-2 py-2 text-sm",
-          children: t("neetoTags.common.noTagsFound")
-        })]
-      })]
-    }), document.body)]
+    }, buttonProps)), panel]
   });
 };
 
@@ -497,14 +522,19 @@ var Tags = function Tags(_ref) {
     _ref$isMetadataBlock = _ref.isMetadataBlock,
     isMetadataBlock = _ref$isMetadataBlock === void 0 ? false : _ref$isMetadataBlock,
     _ref$pickerVariant = _ref.pickerVariant,
-    pickerVariant = _ref$pickerVariant === void 0 ? "inline" : _ref$pickerVariant;
+    pickerVariant = _ref$pickerVariant === void 0 ? "popover" : _ref$pickerVariant,
+    dataTestId = _ref.dataTestId;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = react.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isTagsDropdownVisible = _useState2[0],
     setIsTagsDropdownVisible = _useState2[1];
+
+  // The title-bar/metadata settings gear, used as the popover's trigger anchor.
+  var gearAnchorRef = react.useRef(null);
   useHotkeys(KEYBOARD_SHORTCUTS.addTag.sequence, function (event) {
+    if (isDisabled) return;
     event.preventDefault();
     setIsTagsDropdownVisible(true);
   });
@@ -532,9 +562,22 @@ var Tags = function Tags(_ref) {
     setIsTagsDropdownVisible(false);
     onTagCreate(tagName);
   };
+
+  // Fall back to `selectProps.dataTestId` so consumers that only targeted the
+  // inline select can keep addressing the picker after the popover default.
+  var resolvedDataTestId = dataTestId !== null && dataTestId !== void 0 ? dataTestId : selectProps.dataTestId;
   var isPopoverPicker = pickerVariant === "popover";
-  var isAddTagsButtonVisible = !showAddTagsOnTitle && !isTagsDropdownVisible;
-  var isTagsBodyVisible = neetoCist.isNotEmpty(selectedTags) || isTagsDropdownVisible || isAddTagsButtonVisible || isPopoverPicker;
+  // A settings gear in the title bar (always shown in a metadata block) acts as
+  // the popover's trigger and positioning anchor. When present, the popover
+  // drops its own in-body "Add tag" button and opens directly below the gear.
+  var hasTitleGear = isMetadataBlock || showTitleBar && showAddTagsOnTitle;
+  var isGearAnchoredPopover = isPopoverPicker && hasTitleGear;
+  // Without a gear to anchor to, the popover renders its own in-body "Add tag"
+  // button as the trigger (kept permanently visible so there is always an
+  // anchor), e.g. when `showAddTagsOnTitle` is false or the title bar is hidden.
+  var isInBodyPopoverPicker = isPopoverPicker && !hasTitleGear;
+  var isAddTagsButtonVisible = !isPopoverPicker && !showAddTagsOnTitle && !isTagsDropdownVisible;
+  var isTagsBodyVisible = neetoCist.isNotEmpty(selectedTags) || !isPopoverPicker && isTagsDropdownVisible || isAddTagsButtonVisible || isInBodyPopoverPicker;
   var titleComponentProps = {
     isLoading: isLoading,
     isUpdating: isUpdating,
@@ -545,7 +588,8 @@ var Tags = function Tags(_ref) {
   };
   var actionBlockProps = {
     isDisabled: isDisabled,
-    setIsTagsDropdownVisible: setIsTagsDropdownVisible
+    setIsTagsDropdownVisible: setIsTagsDropdownVisible,
+    anchorRef: isGearAnchoredPopover ? gearAnchorRef : undefined
   };
   var tagsListProps = {
     handleDeleteTag: handleDeleteTag,
@@ -560,33 +604,43 @@ var Tags = function Tags(_ref) {
     onCreateOption: handleCreateTag,
     selectProps: selectProps
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
-    actionBlockProps: actionBlockProps,
-    bodyProps: bodyProps,
-    containerProps: containerProps,
-    isMetadataBlock: isMetadataBlock,
-    isTagsBodyVisible: isTagsBodyVisible,
-    titleComponentProps: titleComponentProps,
-    children: [neetoCist.isNotEmpty(selectedTags) && /*#__PURE__*/jsxRuntime.jsx(TagsList, _objectSpread({}, tagsListProps)), isPopoverPicker ? /*#__PURE__*/jsxRuntime.jsx(PopoverTagsSelector, {
-      buttonProps: buttonProps,
-      isDisabled: isDisabled,
-      tags: tags,
-      open: isTagsDropdownVisible,
-      onChange: handleAddExistingTag,
-      onCreateOption: handleCreateTag,
-      onOpenChange: setIsTagsDropdownVisible
-    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [isTagsDropdownVisible && /*#__PURE__*/jsxRuntime.jsx(TagsSelector, _objectSpread({}, tagsSelectorProps)), isAddTagsButtonVisible && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, _objectSpread({
-        disabled: isDisabled,
-        icon: lucideReact.Plus,
-        label: t("neetoTags.button.addTag", constants.SINGULAR),
-        size: "sm",
-        variant: "link",
-        onClick: function onClick() {
-          return setIsTagsDropdownVisible(true);
-        }
-      }, buttonProps))]
-    })]
+  var popoverTagsSelectorProps = {
+    buttonProps: buttonProps,
+    isDisabled: isDisabled,
+    tags: tags,
+    dataTestId: resolvedDataTestId,
+    open: isTagsDropdownVisible,
+    onChange: handleAddExistingTag,
+    onCreateOption: handleCreateTag,
+    onOpenChange: setIsTagsDropdownVisible
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Container, {
+      actionBlockProps: actionBlockProps,
+      bodyProps: bodyProps,
+      containerProps: containerProps,
+      isMetadataBlock: isMetadataBlock,
+      isTagsBodyVisible: isTagsBodyVisible,
+      titleComponentProps: titleComponentProps,
+      // The gear is the popover's sole trigger; letting the header row toggle
+      // too would race the panel's outside-click close and reopen it.
+      isHeaderInteractive: !isGearAnchoredPopover,
+      children: [neetoCist.isNotEmpty(selectedTags) && /*#__PURE__*/jsxRuntime.jsx(TagsList, _objectSpread({}, tagsListProps)), isInBodyPopoverPicker && /*#__PURE__*/jsxRuntime.jsx(PopoverTagsSelector, _objectSpread({}, popoverTagsSelectorProps)), !isPopoverPicker && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [isTagsDropdownVisible && /*#__PURE__*/jsxRuntime.jsx(TagsSelector, _objectSpread({}, tagsSelectorProps)), isAddTagsButtonVisible && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, _objectSpread({
+          disabled: isDisabled,
+          icon: lucideReact.Plus,
+          label: t("neetoTags.button.addTag", constants.SINGULAR),
+          size: "sm",
+          variant: "link",
+          onClick: function onClick() {
+            return setIsTagsDropdownVisible(true);
+          }
+        }, buttonProps))]
+      })]
+    }), isGearAnchoredPopover && /*#__PURE__*/jsxRuntime.jsx(PopoverTagsSelector, _objectSpread(_objectSpread({}, popoverTagsSelectorProps), {}, {
+      hideTriggerButton: true,
+      anchorRef: gearAnchorRef
+    }))]
   });
 };