@algolia/satellite 1.0.0-beta.157 → 1.0.0-beta.159

package/esm/Modal/Modal.js

@@ -1,58 +1,37 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import * as Dialog from "@radix-ui/react-dialog";
 import cx from "clsx";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment } from "react";
 import { X } from "react-feather";
-import { CSSTransition } from "react-transition-group";
-import useKeyPressEvent from "react-use/lib/useKeyPressEvent";
-import useLockBodyScroll from "react-use/lib/useLockBodyScroll";
 import { IconButton } from "../Button";
 import Card from "../Card";
 import { useCreatePortal, useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
-import uniqueId from "../utils/uniqueId";
 import ModalFooter from "./components/ModalFooter";
+import ModalSection from "./components/ModalSection";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_MODAL_LOCALE = {
-  dismissText: "Dismiss"
-};
-var ModalAnimation = function ModalAnimation(props) {
-  return (
-    /*#__PURE__*/
-    /* eslint-disable-next-line @algolia/satellite/invalid-classnames */
-    _jsx(CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
-      classNames: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["satellite-modal"]))),
-      timeout: 200,
-      appear: true,
-      unmountOnExit: true
-    }))
-  );
-};
-var ModalNoAnimation = function ModalNoAnimation(props) {
-  return props["in"] ? /*#__PURE__*/_jsx(_Fragment, {
-    children: props.children
-  }) : null;
+  dismissText: "Dismiss",
+  modalTitle: "Modal"
 };
 var SIZE_CLASSNAMES = {
-  medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["modal-dialog-medium"]))),
-  large: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["modal-dialog-large"])))
+  medium: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["modal-dialog-medium"]))),
+  large: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["modal-dialog-large"])))
 };
 export var Modal = function Modal(_ref) {
   var title = _ref.title,
     className = _ref.className,
     children = _ref.children,
     _ref$open = _ref.open,
-    open = _ref$open === void 0 ? true : _ref$open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    onDismiss = _ref.onDismiss,
     _ref$fullBleed = _ref.fullBleed,
     fullBleed = _ref$fullBleed === void 0 ? false : _ref$fullBleed,
-    _ref$onDismiss = _ref.onDismiss,
-    onDismiss = _ref$onDismiss === void 0 ? function () {} : _ref$onDismiss,
     _ref$animate = _ref.animate,
     animate = _ref$animate === void 0 ? true : _ref$animate,
     _ref$hideCloseIcon = _ref.hideCloseIcon,
@@ -61,91 +40,100 @@ export var Modal = function Modal(_ref) {
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$centerY = _ref.centerY,
     centerY = _ref$centerY === void 0 ? false : _ref$centerY,
+    autoFocusOnOpenElement = _ref.autoFocusOnOpenElement,
+    autoFocusOnCloseElement = _ref.autoFocusOnCloseElement,
+    triggerButton = _ref.triggerButton,
     propsLocale = _ref.locale;
-  var createPortal = useCreatePortal();
   var contextLocale = useLocale("modal");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    modalWrapperRef = _useState2[0],
-    setModalWrapperRef = _useState2[1];
-  var dialogRef = useRef(null);
-  var mouseDownTargetRef = useRef(null);
-  var ModalContainer = animate ? ModalAnimation : ModalNoAnimation;
-  var modalTitleId = useMemo(function () {
-    return uniqueId("modal-title");
-  }, []);
-  useLockBodyScroll(open);
-  useKeyPressEvent("Escape", function () {
-    if (open) onDismiss();
-  });
-  useEffect(function () {
-    if (!modalWrapperRef) return;
-    var onMouseUp = function onMouseUp(evt) {
-      if (evt.target === mouseDownTargetRef.current && dialogRef.current && !dialogRef.current.contains(evt.target)) {
-        onDismiss();
+  var createPortal = useCreatePortal();
+  var isControlled = triggerButton === undefined;
+  if (typeof document === "undefined") return /*#__PURE__*/_jsx(Fragment, {});
+  return /*#__PURE__*/_jsxs(Dialog.Root, {
+    open: isControlled ? open : undefined,
+    onOpenChange: function onOpenChange(open) {
+      if (!open) {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
       }
-      mouseDownTargetRef.current = null;
-    };
-    var onMouseDown = function onMouseDown(evt) {
-      return mouseDownTargetRef.current = evt.target;
-    };
-
-    /**
-     * We use native event handlers to avoid React event bubbling behaviour with element rendered in a portal.
-     * (otherwise, the modal gets dismissed when clicking on an AutoComplete menu item)
-     */
-    modalWrapperRef.addEventListener("mouseup", onMouseUp);
-    modalWrapperRef.addEventListener("mousedown", onMouseDown);
-    return function () {
-      modalWrapperRef.removeEventListener("mouseup", onMouseUp);
-      modalWrapperRef.removeEventListener("mousedown", onMouseDown);
-    };
-  }, [modalWrapperRef, onDismiss]);
-  var modalAccessibilityProps = _objectSpread({
-    role: "dialog"
-  }, title ? {
-    "aria-labelledby": modalTitleId
-  } : {
-    "aria-label": "Modal"
-  });
-  return createPortal( /*#__PURE__*/_jsx(ModalContainer, {
-    "in": open,
-    children: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-900/30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
-      }), /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center"])))),
-        ref: setModalWrapperRef
-      }, modalAccessibilityProps), {}, {
-        children: /*#__PURE__*/_jsxs(Card, {
-          ref: dialogRef,
-          as: "section",
-          elevation: "500",
-          className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
-          fullBleed: true,
-          "aria-label": title || "Modal",
-          children: [/*#__PURE__*/_jsxs("header", {
-            className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                px-8 min-h-14\n                flex items-center justify-between  space-x-2\n                ", "\n                ", "\n              "])), title ? "border-b border-grey-100" : "justify-end", !title && hideCloseIcon && "hidden"),
-            children: [!!title && /*#__PURE__*/_jsx("h2", {
-              id: modalTitleId,
-              className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
-              children: title
-            }), !hideCloseIcon && /*#__PURE__*/_jsx(IconButton, {
-              icon: X,
-              title: locale.dismissText,
-              variant: "subtle",
-              onClick: onDismiss,
-              className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["shrink-0 -mr-2"])))
-            })]
-          }), /*#__PURE__*/_jsx("div", {
-            className: fullBleed ? undefined : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["p-10"]))),
-            children: children
-          })]
+    },
+    modal: true,
+    children: [!isControlled && /*#__PURE__*/_jsx(Dialog.Trigger, {
+      asChild: true,
+      children: triggerButton
+    }), createPortal( /*#__PURE__*/_jsx(Dialog.Overlay, {
+      className: cx(animate && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["modal-animated"]))), stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["modal-overlay bg-grey-900/30 z-modalOverlay inset-0 fixed w-full h-full flex items-start justify-center overflow-x-hidden overflow-y-auto px-4 py-10"])))),
+      children: /*#__PURE__*/_jsx(Dialog.Content, {
+        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["modal-content"]))), SIZE_CLASSNAMES[size], centerY && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex m-auto"])))),
+        onOpenAutoFocus: function onOpenAutoFocus(e) {
+          if (autoFocusOnOpenElement === false) {
+            e.preventDefault();
+          } else if (autoFocusOnOpenElement instanceof HTMLElement) {
+            e.preventDefault();
+            autoFocusOnOpenElement.focus();
+          }
+        },
+        onCloseAutoFocus: function onCloseAutoFocus(e) {
+          if (autoFocusOnCloseElement instanceof HTMLElement) {
+            e.preventDefault();
+            autoFocusOnCloseElement.focus();
+          }
+        },
+        onEscapeKeyDown: function onEscapeKeyDown(e) {
+          if (isControlled) {
+            e.preventDefault();
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+          }
+        },
+        onInteractOutside: function onInteractOutside(e) {
+          if (isControlled) {
+            e.preventDefault();
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+          }
+        },
+        "aria-label": !title ? locale.modalTitle : undefined,
+        "aria-describedby": undefined,
+        children: /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx("div", {
+            className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["modal-container"]))),
+            children: /*#__PURE__*/_jsxs(Card, {
+              as: "div",
+              elevation: "500",
+              className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["relative"]))), className),
+              fullBleed: true,
+              children: [/*#__PURE__*/_jsx("header", {
+                className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["min-h-14 flex items-center justify-between space-x-2"]))), title ? stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-b border-grey-100 pl-8 pr-16"]))) : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["justify-end px-8"]))), !title && hideCloseIcon && stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["hidden"])))),
+                children: !!title && /*#__PURE__*/_jsx(Dialog.Title, {
+                  className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
+                  children: title
+                })
+              }), /*#__PURE__*/_jsx("div", {
+                className: cx(!fullBleed && stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-10"])))),
+                children: children
+              }), !hideCloseIcon && /*#__PURE__*/_jsx("div", {
+                className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["-mr-2 absolute top-3 right-8"]))),
+                children: /*#__PURE__*/_jsx(Dialog.Close, {
+                  asChild: true,
+                  children: /*#__PURE__*/_jsx(IconButton, {
+                    icon: X,
+                    title: locale.dismissText,
+                    variant: "subtle",
+                    showTooltip: false,
+                    onClick: function onClick(e) {
+                      if (isControlled) {
+                        e.preventDefault();
+                        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+                      }
+                    }
+                  })
+                })
+              })]
+            })
+          })
         })
-      }))]
-    })
-  }));
+      })
+    }))]
+  });
 };
 Modal.Footer = ModalFooter;
+Modal.Section = ModalSection;
 export default Modal;

package/esm/Modal/Modal.tailwind.js

@@ -5,11 +5,18 @@ var modalPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
   var transitionEasing = "cubic-bezier(0.6, -0.28, 0.735, 0.045)";
-  var transitionDuration = 200;
+  var transitionDuration = "200ms";
   addComponents({
     ".modal-container": {
       zIndex: theme("zIndex.modal")
     },
+    ".modal-content": {
+      borderRadius: "8px",
+      width: "100%",
+      "&:focus": {
+        outline: "none"
+      }
+    },
     // Sizes
     ".modal-dialog-medium": {
       maxWidth: "640px"
@@ -21,24 +28,52 @@ var modalPlugin = plugin(function (_ref) {
 
   // Animation
   addComponents({
-    ".satellite-modal-appear .modal-container, .satellite-modal-enter .modal-container": {
-      opacity: "0.1",
-      transform: "translate(0, 8px) scale(0.94)"
-    },
-    ".satellite-modal-appear-active .modal-container, .satellite-modal-enter-active .modal-container": {
-      opacity: "1",
-      transform: "translate(0, 0) scale(1)",
-      transition: "all ".concat(transitionDuration, "ms ").concat(transitionEasing)
-    },
-    ".satellite-modal-exit .modal-container": {
-      opacity: "1",
-      transform: "translate(0, 0) scale(1)"
-    },
-    ".satellite-modal-exit-active .modal-container": {
-      opacity: "0.1",
-      transform: "translate(0, 8px) scale(0.94)",
-      transition: "all ".concat(transitionDuration, "ms ").concat(transitionEasing)
+    /* eslint-disable @algolia/satellite/prefer-stl-helper */
+    "@keyframes stl-modal-overlay-fade-in": {
+      from: {
+        opacity: "0"
+      },
+      to: {
+        opacity: "1"
+      }
+    },
+    "@keyframes stl-modal-overlay-fade-out": {
+      from: {
+        opacity: "1"
+      },
+      to: {
+        opacity: "0"
+      }
+    },
+    "@keyframes stl-modal-content-zoop-in": {
+      from: {
+        transform: "translate(0, 8px) scale(0.94)"
+      },
+      to: {
+        transform: "translate(0, 0) scale(1)"
+      }
+    },
+    "@keyframes stl-modal-content-zoop-out": {
+      from: {
+        transform: "translate(0, 0) scale(1)"
+      },
+      to: {
+        transform: "translate(0, 8px) scale(0.94)"
+      }
+    },
+    ".modal-animated.modal-overlay[data-state='open']": {
+      animation: "stl-modal-overlay-fade-in ".concat(transitionDuration, " ").concat(transitionEasing)
+    },
+    ".modal-animated.modal-overlay[data-state='closed']": {
+      animation: "stl-modal-overlay-fade-out ".concat(transitionDuration, " ").concat(transitionEasing)
+    },
+    ".modal-animated .modal-content[data-state='open']": {
+      animation: "stl-modal-content-zoop-in ".concat(transitionDuration, " ").concat(transitionEasing)
+    },
+    ".modal-animated .modal-content[data-state='closed']": {
+      animation: "stl-modal-content-zoop-out ".concat(transitionDuration, " ").concat(transitionEasing)
     }
+    /* eslint-enable @algolia/satellite/prefer-stl-helper */
   });
 });
 export default modalPlugin;

package/esm/Satellite/Satellite.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from "react";
+import { type FunctionComponent, type ReactNode } from "react";
 import type { ComponentsLocales } from "./locale";
 import type { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteProps {
@@ -7,5 +7,6 @@ export interface SatelliteProps {
     portalTarget?: HTMLElement;
     children: ReactNode;
 }
+export declare const DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
 export declare const Satellite: FunctionComponent<SatelliteProps>;
 export default Satellite;

package/esm/Satellite/Satellite.js

@@ -1,12 +1,35 @@
+import { useEffect } from "react";
 import SatelliteContext from "./SatelliteContext";
 import { router as defaultRouter } from "./SatelliteRouter";
 import { jsx as _jsx } from "react/jsx-runtime";
+export var DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
+var portalElement;
+var getPortalElement = function getPortalElement() {
+  if (typeof document === "undefined") return;
+  if (!portalElement) {
+    var element = document.createElement("div");
+    element.setAttribute("id", DEFAULT_PORTAL_TARGET_ID);
+    document.body.appendChild(element);
+    portalElement = element;
+  }
+  return portalElement;
+};
 export var Satellite = function Satellite(_ref) {
   var _ref$router = _ref.router,
     router = _ref$router === void 0 ? defaultRouter : _ref$router,
     locales = _ref.locales,
-    portalTarget = _ref.portalTarget,
+    _ref$portalTarget = _ref.portalTarget,
+    portalTarget = _ref$portalTarget === void 0 ? getPortalElement() : _ref$portalTarget,
     children = _ref.children;
+  useEffect(function () {
+    if (!portalTarget) return;
+    if (portalTarget === document.body) {
+      console.warn("Avoid using the document body as a portal target.");
+    }
+
+    // Radix adds pointer-events: none; on the body for its modal, so we need to reenable it for other portaled elements (tooltips, menus, autocomplete)
+    portalTarget.style.pointerEvents = "auto";
+  }, [portalTarget]);
   return /*#__PURE__*/_jsx(SatelliteContext.Provider, {
     value: {
       router: router,

package/esm/Tag/Tag.d.ts

@@ -2,20 +2,40 @@ import type { DetailedHTMLProps, HTMLAttributes, MouseEventHandler } from "react
 import type { ColorVariant } from "../types";
 export declare type TagVariants = ColorVariant | "pink";
 export declare type TagLocale = {
-    removeButton?: string | ((title: string) => string);
+    addButton?: string | ((title: string) => string);
+    deleteButton?: string | ((title: string) => string);
 };
 export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     /**
      * The "pink" variant should only be used for **Algolia admin** related things.
      * @default "grey"
-     * */
+     */
     variant?: TagVariants;
+    /**
+     * Handler function called when the "add" button is clicked.
+     */
+    onAdd?: MouseEventHandler<HTMLElement>;
+    /**
+     * The tooltip text to display when hovering over the "add" button.
+     */
+    addTooltip?: string;
+    /**
+     * Handler function called when the "delete" button is clicked.
+     */
     onDelete?: MouseEventHandler<HTMLElement>;
+    /**
+     * The tooltip text to display when hovering over the "delete" button.
+     */
+    deleteTooltip?: string;
+    /**
+     * Customize the text describing the "add" and "delete" buttons.
+     * If not provided, default values will be used.
+     */
     locale?: TagLocale;
 }
 /**
- * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
- * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or removed from an object by users.
+ * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or deleted from an object by users**.
+ * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or deleted from an object by users.
  *
  * - For status information, use badges instead
  * - For tallies or counts, use badges
@@ -30,9 +50,9 @@ export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanEleme
  * - **Error**: `variant="red"`
  *
  * ## Usability best practices
- * - Present tags close to or within the input control to allow users to add and remove tags
+ * - Present tags close to or within the input control to allow users to add and delete tags
  * - When writing tags, avoid line-wrapping
  * - Define the max width of text within a tag. Once the text reaches the max, truncate with ellipses
  */
-export declare const Tag: import("react").ForwardRefExoticComponent<Pick<TagProps, "key" | "id" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "locale" | "onDelete"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Tag: import("react").ForwardRefExoticComponent<Pick<TagProps, "key" | "id" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "locale" | "onAdd" | "addTooltip" | "onDelete" | "deleteTooltip"> & import("react").RefAttributes<HTMLSpanElement>>;
 export default Tag;

package/esm/Tag/Tag.js

@@ -1,20 +1,24 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["children", "variant", "className", "onDelete", "locale"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _excluded = ["children", "variant", "className", "onAdd", "addTooltip", "onDelete", "deleteTooltip", "locale"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import cx from "clsx";
 import { forwardRef } from "react";
-import { X } from "react-feather";
+import { Plus, X } from "react-feather";
 import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
+import { TooltipWrapper } from "../Tooltip";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_TAG_LOCALE = {
-  removeButton: function removeButton(title) {
-    return "Remove ".concat(title);
+  addButton: function addButton(title) {
+    return "Add ".concat(title);
+  },
+  deleteButton: function deleteButton(title) {
+    return "Delete ".concat(title);
   }
 };
 var VARIANT_CLASSNAMES = {
@@ -26,7 +30,7 @@ var VARIANT_CLASSNAMES = {
   red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-100 border-red-200 text-red-700"]))),
   pink: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-pink-100 border-pink-200 text-pink-700"])))
 };
-var BUTTON_CLOSE_VARIANT_CLASSNAMES = {
+var BUTTON_VARIANT_CLASSNAMES = {
   accent: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-accent-200 hover:bg-accent-200 focus:bg-accent-200"]))),
   grey: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-grey-200 hover:bg-grey-200 focus:bg-grey-200"]))),
   blue: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-blue-200 hover:bg-blue-200 focus:bg-blue-200"]))),
@@ -37,8 +41,8 @@ var BUTTON_CLOSE_VARIANT_CLASSNAMES = {
 };
 
 /**
- * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
- * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or removed from an object by users.
+ * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or deleted from an object by users**.
+ * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or deleted from an object by users.
  *
  * - For status information, use badges instead
  * - For tallies or counts, use badges
@@ -53,7 +57,7 @@ var BUTTON_CLOSE_VARIANT_CLASSNAMES = {
  * - **Error**: `variant="red"`
  *
  * ## Usability best practices
- * - Present tags close to or within the input control to allow users to add and remove tags
+ * - Present tags close to or within the input control to allow users to add and delete tags
  * - When writing tags, avoid line-wrapping
  * - Define the max width of text within a tag. Once the text reaches the max, truncate with ellipses
  */
@@ -62,31 +66,59 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "grey" : _ref$variant,
     className = _ref.className,
+    onAdd = _ref.onAdd,
+    addTooltip = _ref.addTooltip,
     onDelete = _ref.onDelete,
+    deleteTooltip = _ref.deleteTooltip,
     propsLocale = _ref.locale,
     props = _objectWithoutProperties(_ref, _excluded);
   var title = typeof children === "string" ? children : "tag";
   var contextLocale = useLocale("tag");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
   var tagClassName = cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["tag"]))), VARIANT_CLASSNAMES[variant], className);
-  var editable = Boolean(onDelete);
+  var addable = Boolean(onAdd);
+  var deletable = Boolean(onDelete);
+  var handleAdd = function handleAdd(evt) {
+    evt.stopPropagation();
+    onAdd === null || onAdd === void 0 ? void 0 : onAdd(evt);
+  };
   var handleDelete = function handleDelete(evt) {
     evt.stopPropagation();
     onDelete === null || onDelete === void 0 ? void 0 : onDelete(evt);
   };
+  var content = /*#__PURE__*/_jsx("span", {
+    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1 leading-base"]))),
+    children: children
+  });
   return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
     className: tagClassName,
     ref: ref,
-    children: [/*#__PURE__*/_jsx("span", {
-      className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1"]))),
-      children: children
-    }), editable && /*#__PURE__*/_jsx("button", {
-      className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
-      type: "button",
-      onClick: handleDelete,
-      "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,
-      children: /*#__PURE__*/_jsx(X, {
-        size: "1em"
+    children: [addable ? /*#__PURE__*/_jsx(TooltipWrapper, {
+      content: addTooltip,
+      hideDelay: 0,
+      placement: "bottom",
+      wrapperClassName: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["h-full"]))),
+      children: /*#__PURE__*/_jsxs("button", {
+        className: cx(stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["tag-add-button"]))), !deletable && stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleAdd,
+        "aria-label": typeof locale.addButton === "function" ? locale.addButton(title) : locale.addButton,
+        children: [/*#__PURE__*/_jsx(Plus, {
+          size: "1em"
+        }), content]
+      })
+    }) : content, deletable && /*#__PURE__*/_jsx(TooltipWrapper, {
+      content: deleteTooltip,
+      hideDelay: 0,
+      placement: "bottom-start",
+      children: /*#__PURE__*/_jsx("button", {
+        className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["tag-close-button p-1"]))), !addable && stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleDelete,
+        "aria-label": typeof locale.deleteButton === "function" ? locale.deleteButton(title) : locale.deleteButton,
+        children: /*#__PURE__*/_jsx(X, {
+          size: "1em"
+        })
       })
     })]
   }));