@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta2

package/dist/Rename.js

@@ -1,143 +1,24 @@
-import React, { useEffect, useState, useRef } from 'react';
-import classNames from 'classnames';
-import { isPresent, isNotEmpty } from '@bigbinary/neeto-cist';
-import { useHotKeys, withT, useStateWithDependency, useOnClickOutside } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { isEmpty, mergeRight } from 'ramda';
-import { Typography, Input, Button, Dropdown, Tooltip } from '@bigbinary/neetoui';
-import { Link } from 'react-router-dom';
-import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
-import { Check, Close, MenuVertical, MenuHorizontal } from '@bigbinary/neeto-icons';
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css$1 = ".neeto-molecules-breadcrumbs-wrap{display:flex}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;line-height:1}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb a{text-decoration:none;transition:all .3s ease-in-out}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb a:focus-visible{border-radius:var(--neeto-ui-rounded-sm);outline:3px solid rgba(var(--neeto-ui-primary-500),50%)}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb-link{color:rgb(var(--neeto-ui-gray-500));padding:8px 5px}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb-link:hover{color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb-separator{margin:0 4px}";
-n(css$1,{});
-
-var Breadcrumbs = function Breadcrumbs(_ref) {
-  var breadcrumbs = _ref.breadcrumbs,
-    _ref$hasTrailingSepar = _ref.hasTrailingSeparator,
-    hasTrailingSeparator = _ref$hasTrailingSepar === void 0 ? false : _ref$hasTrailingSepar;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-breadcrumbs-wrap"
-  }, breadcrumbs.map(function (_ref2, index) {
-    var text = _ref2.text,
-      _ref2$link = _ref2.link,
-      link = _ref2$link === void 0 ? "#" : _ref2$link;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "neeto-molecules-breadcrumb",
-      "data-cy": "header-breadcrumb",
-      key: index
-    }, /*#__PURE__*/React.createElement(Link, {
-      to: link
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-breadcrumb-link",
-      component: "p",
-      "data-cy": text,
-      "data-test-id": text,
-      style: "body2",
-      weight: "normal"
-    }, text)), (index + 1 !== breadcrumbs.length || hasTrailingSeparator) && /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-molecules-breadcrumb-separator neeto-ui-text-gray-500",
-      component: "p",
-      "data-cy": "breadcrumb-divider-".concat(index),
-      "data-test-id": "breadcrumb-divider-".concat(index),
-      style: "body2",
-      weight: "normal"
-    }, "/"));
-  }));
-};
-
-var MIN_WIDTH = 150;
-
-var DummySpan = function DummySpan(_ref) {
-  var name = _ref.name,
-    placeholderRef = _ref.placeholderRef,
-    setInputWidth = _ref.setInputWidth;
-  useEffect(function () {
-    var _placeholderRef$curre;
-    //To handle the input width on initial render.
-    var placeholderSpanWidth = (_placeholderRef$curre = placeholderRef.current) === null || _placeholderRef$curre === void 0 ? void 0 : _placeholderRef$curre.offsetWidth;
-    setInputWidth(placeholderSpanWidth);
-  }, [name]);
-  return (
-    /*#__PURE__*/
-    // Dummy element to calculate the width to be set for the input. Do not remove.
-    React.createElement("div", {
-      className: "dummy-span pointer-events-none invisible absolute",
-      ref: placeholderRef
-    }, name.split(" ").join("."))
-  );
-};
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default, { useState, useRef, useMemo } from 'react';
+import classnames from 'classnames';
+import { isPresent, isNotEmpty, notEquals } from '@bigbinary/neeto-cist';
+import useOnClickOutside from '@bigbinary/neeto-commons-frontend/react-utils/useOnClickOutside';
+import useStateWithDependency from '@bigbinary/neeto-commons-frontend/react-utils/useStateWithDependency';
+import { isEmpty } from 'ramda';
+import Breadcrumbs from './Breadcrumbs.js';
+import _extends from '@babel/runtime/helpers/extends';
+import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils/general';
+import useHotkeys from '@bigbinary/neeto-hotkeys';
+import { Check, Close } from '@bigbinary/neeto-icons';
+import { Input, Button, Typography } from '@bigbinary/neetoui';
+import { n } from './inject-css-c86de496.js';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
+import MoreDropdown from './MoreDropdown.js';
+import 'react-router-dom';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import 'react-i18next';
 
 var mergeRefs = function mergeRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -152,7 +33,6 @@ var mergeRefs = function mergeRefs() {
 
 var Editor = function Editor(_ref) {
   var placeholder = _ref.placeholder,
-    inputWidth = _ref.inputWidth,
     allowEmptySubmission = _ref.allowEmptySubmission,
     name = _ref.name,
     isLoading = _ref.isLoading,
@@ -163,33 +43,36 @@ var Editor = function Editor(_ref) {
     setName = _ref.setName,
     inputProps = _ref.inputProps,
     editMode = _ref.editMode;
-  var closeRef = useHotKeys("escape", handleClose, {
+  var closeRef = useHotkeys("escape", function (event) {
+    return handleClose({
+      event: event
+    });
+  }, {
     mode: "scoped",
     enabled: editMode
   });
-  var submitRef = useHotKeys(["command+return", "return"], function (event) {
+  var submitRef = useHotkeys(["command+return", "return"], function (event) {
     if (isEmpty(name) && !allowEmptySubmission) return;
     handleRename(event, name);
   }, {
     mode: "scoped",
     enabled: editMode
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex min-w-0 max-w-full flex-grow"
-  }, /*#__PURE__*/React.createElement(Input, _extends({
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative flex min-w-0 max-w-full flex-grow"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "neeto-molecules-rename__input-width-maker"
+  }, name.replace(/\s/g, ".") || placeholder), /*#__PURE__*/React__default.createElement(Input, _extends({
     placeholder: placeholder,
     autoFocus: true,
-    className: "neeto-molecules-rename__input flex-grow",
+    className: "neeto-molecules-rename__input absolute",
     "data-cy": "form-rename-text-field",
     "data-testid": "neeto-molecules-name-input",
     ref: mergeRefs(closeRef, submitRef),
-    style: {
-      width: inputWidth
-    },
     value: name,
-    suffix: /*#__PURE__*/React.createElement("div", {
+    suffix: /*#__PURE__*/React__default.createElement("div", {
       className: "flex items-center justify-end"
-    }, /*#__PURE__*/React.createElement(Button, _extends({
+    }, /*#__PURE__*/React__default.createElement(Button, _extends({
       className: "neeto-ui-rounded-none",
       "data-cy": "form-rename-submit-button",
       "data-testid": "neeto-molecules-rename-button",
@@ -200,241 +83,61 @@ var Editor = function Editor(_ref) {
       onClick: function onClick(event) {
         return handleRename(event, name);
       }
-    }, submitButtonProps)), /*#__PURE__*/React.createElement(Button, _extends({
+    }, submitButtonProps)), /*#__PURE__*/React__default.createElement(Button, _extends({
       className: "neeto-ui-rounded-none",
       "data-cy": "form-rename-close-button",
       "data-testid": "neeto-molecules-cancel-button",
       disabled: isLoading,
       icon: Close,
       style: "text",
-      onClick: handleClose
+      onClick: function onClick(event) {
+        return handleClose({
+          event: event
+        });
+      }
     }, cancelButtonProps))),
     onChange: withEventTargetValue(setName),
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
-  }, inputProps)));
-};
-
-var css = ".neeto-molecules-rename__input{height:32px;margin-left:4px;max-width:100%;position:relative;transition:width .2s ease-in-out;width:-moz-max-content;width:max-content}.neeto-molecules-rename__input .neeto-ui-input{border-color:transparent}.neeto-molecules-rename__input .neeto-ui-input:focus-within{border-color:rgb(var(--neeto-ui-primary-500))}.neeto-molecules-rename__input .neeto-ui-input .neeto-ui-input__suffix{margin-right:0!important}.neeto-molecules-rename__input .neeto-ui-input input{min-width:0}.neeto-molecules-rename__text{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-white));border-radius:var(--neeto-ui-rounded);cursor:pointer;font-size:var(--neeto-ui-text-sm);font-weight:400;letter-spacing:.005em;line-height:1;margin:0 1px;max-height:32px;max-width:448px;padding:8px 5px;transition:var(--neeto-ui-transition)}.neeto-molecules-rename__display-text{color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-rename__display-text:hover{border:thin solid rgb(var(--neeto-ui-gray-300))}.dummy-span{font-size:14px;font-weight:400;padding:5px 8px}";
-n(css,{});
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-var MENU_ITEM_TYPES = {
-  menuItem: "menuItem",
-  divider: "divider"
-};
-var DEFAULT_TOOLTIP_PROPS = {
-  disabled: true,
-  position: "bottom"
-};
-
-var _excluded$2 = ["label", "key"],
-  _excluded2 = ["isVisible", "key"];
-var MenuItem$1 = Dropdown.MenuItem,
-  Menu$1 = Dropdown.Menu;
-var Submenu = function Submenu(_ref) {
-  var label = _ref.label,
-    key = _ref.key,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    customTarget: /*#__PURE__*/React.createElement(MenuItem$1.Button, null, label),
-    key: key,
-    position: "left",
-    trigger: "hover"
-  }, menuItemProps.dropdownProps), /*#__PURE__*/React.createElement(Menu$1, null, menuItemProps.menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded2);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
-      key: key
-    }, menuItemProps));
+  }, inputProps, {
+    label: null
   })));
 };
 
-var _excluded$1 = ["onClick", "label", "type", "hasSubItems"];
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MenuItem = Dropdown.MenuItem,
-  Divider = Dropdown.Divider;
-var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
-  var onClick = _ref.onClick,
-    label = _ref.label,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref$type,
-    _ref$hasSubItems = _ref.hasSubItems,
-    hasSubItems = _ref$hasSubItems === void 0 ? false : _ref$hasSubItems,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$1);
-  if (type === MENU_ITEM_TYPES.divider) {
-    return /*#__PURE__*/React.createElement(Divider, null);
-  }
-  if (hasSubItems) {
-    return /*#__PURE__*/React.createElement(Submenu, _objectSpread$1({
-      label: label
-    }, menuItemProps));
-  }
-  return /*#__PURE__*/React.createElement(MenuItem.Button, _objectSpread$1({
-    onClick: onClick
-  }, menuItemProps), label);
-};
+var css = ":root{--neeto-molecules-rename-font-size:var(--neeto-ui-text-sm);--neeto-molecules-rename-font-weight:600;--neeto-molecules-rename-letter-spacing:0;--neeto-molecules-rename-line-height:1.2;--neeto-molecules-rename-min-width:120px;--neeto-molecules-rename-color:var(--neeto-ui-black)}.neeto-molecules-rename-common-styles,.neeto-molecules-rename__input .neeto-ui-input input,.neeto-molecules-rename__input-width-maker,.neeto-molecules-rename__text{color:rgb(var(--neeto-ui-black));font-size:var(--neeto-ui-text-sm)!important;font-size:var(--neeto-molecules-rename-font-size)!important;font-weight:600;font-weight:var(--neeto-molecules-rename-font-weight);letter-spacing:0;letter-spacing:var(--neeto-molecules-rename-letter-spacing);line-height:1.2;line-height:var(--neeto-molecules-rename-line-height);margin:0}.neeto-molecules-rename__input{height:100%;margin:0;max-width:100%;min-width:0;position:relative;transition:width .2s ease-in-out;width:100%}.neeto-molecules-rename__input .neeto-ui-input{height:100%}.neeto-molecules-rename__input .neeto-ui-input .neeto-ui-input__suffix{margin-right:0!important}.neeto-molecules-rename__input .neeto-ui-input input{min-width:0}.neeto-molecules-rename__text{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-white));border-radius:var(--neeto-ui-rounded);cursor:pointer;max-width:448px;padding:8px;transition:var(--neeto-ui-transition)}.neeto-molecules-rename__display-text:hover{border:thin solid rgb(var(--neeto-ui-gray-400))}.neeto-molecules-rename__input-width-maker{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-white));border-radius:var(--neeto-ui-rounded);cursor:pointer;display:inline-flex;margin-right:68px;max-width:100%;min-width:120px;overflow:hidden;padding:8px;position:relative;transition:var(--neeto-ui-transition);visibility:hidden;white-space:nowrap}.neeto-molecules-rename-breadcrumbs{margin-bottom:0}.neeto-molecules-rename-breadcrumbs .neeto-molecules-breadcrumb a{display:flex}";
+n(css,{});
 
-var _excluded = ["isVisible", "key"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Menu = Dropdown.Menu;
-var MoreDropdown = function MoreDropdown(_ref) {
-  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
-    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
-    _ref$isVertical = _ref.isVertical,
-    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    menuTopChildren = _ref.menuTopChildren,
-    menuBottomChildren = _ref.menuBottomChildren,
-    _ref$menuItems = _ref.menuItems,
-    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
-  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
-  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
-  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
-  if (isDropdownDisabled && !tooltipProps.disabled) {
-    return /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, _extends({
-      disabled: true,
-      "data-cy": "more-dropdown-button",
-      "data-testid": "nui-dropdown-button",
-      icon: targetIcon,
-      iconPosition: "right",
-      size: "medium",
-      style: "text"
-    }, dropdownButtonProps))));
-  }
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    autoWidth: true,
-    className: "flex",
-    disabled: isDisabled,
-    icon: targetIcon,
-    buttonProps: _objectSpread({
-      className: "min-h-0 flex-shrink-0",
-      style: "text"
-    }, dropdownButtonProps)
-  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
-      key: key
-    }, menuItemProps));
-  }), menuBottomChildren));
-};
-
 var RenameMenu = withT(function (_ref) {
   var t = _ref.t,
     handleRenameClick = _ref.handleRenameClick,
     disabled = _ref.disabled,
     dropdownItems = _ref.dropdownItems,
-    onArchive = _ref.onArchive,
+    onArchiveStatusToggle = _ref.onArchiveStatusToggle,
+    onDisableStatusToggle = _ref.onDisableStatusToggle,
     onClone = _ref.onClone,
-    onDelete = _ref.onDelete;
-  return /*#__PURE__*/React.createElement(MoreDropdown, {
-    dropdownButtonProps: {
+    onDelete = _ref.onDelete,
+    isArchived = _ref.isArchived,
+    isDisabled = _ref.isDisabled,
+    dropdownButtonProps = _ref.dropdownButtonProps,
+    dropdownProps = _ref.dropdownProps;
+  return /*#__PURE__*/React__default.createElement(MoreDropdown, {
+    dropdownButtonProps: _objectSpread({
       "data-testid": "neeto-molecules-menu-button"
-    },
-    dropdownProps: {
+    }, dropdownButtonProps),
+    dropdownProps: _objectSpread({
       position: "bottom-start",
       onClick: function onClick(event) {
         return event.stopPropagation();
-      }
-    },
+      },
+      strategy: "fixed",
+      appendTo: function appendTo() {
+        return document.body;
+      },
+      zIndex: "99999"
+    }, dropdownProps),
     menuItems: [{
       "data-cy": "form-rename-button",
       onClick: handleRenameClick,
@@ -449,10 +152,16 @@ var RenameMenu = withT(function (_ref) {
       key: "clone-entity-menu"
     }, {
       "data-cy": "form-archive-button",
-      onClick: onArchive,
-      label: t("neetoMolecules.common.actions.archive"),
-      isVisible: isPresent(onArchive),
+      onClick: onArchiveStatusToggle,
+      label: isArchived ? t("neetoMolecules.common.actions.unArchive") : t("neetoMolecules.common.actions.archive"),
+      isVisible: isPresent(onArchiveStatusToggle),
       key: "archive-entity-menu"
+    }, {
+      "data-cy": "form-enable-button",
+      onClick: onDisableStatusToggle,
+      label: isDisabled ? t("neetoMolecules.common.actions.enable") : t("neetoMolecules.common.actions.disable"),
+      isVisible: isPresent(onDisableStatusToggle),
+      key: "enable-entity-menu"
     }, {
       "data-cy": "form-delete-button",
       onClick: onDelete,
@@ -470,29 +179,39 @@ var ViewName = function ViewName(_ref) {
     dropdownItems = _ref.dropdownItems,
     hideMenu = _ref.hideMenu,
     handleRenameClick = _ref.handleRenameClick,
-    onArchive = _ref.onArchive,
+    onArchiveStatusToggle = _ref.onArchiveStatusToggle,
+    onDisableStatusToggle = _ref.onDisableStatusToggle,
     onClone = _ref.onClone,
     onDelete = _ref.onDelete,
-    name = _ref.name;
-  var isDefaultMenuCallbacksPresent = isPresent(onArchive) || isPresent(onDelete) || isPresent(onClone);
+    name = _ref.name,
+    isArchived = _ref.isArchived,
+    isDisabled = _ref.isDisabled,
+    dropdownButtonProps = _ref.dropdownButtonProps,
+    dropdownProps = _ref.dropdownProps;
+  var isDefaultMenuCallbacksPresent = isPresent(onArchiveStatusToggle) || isPresent(onDisableStatusToggle) || isPresent(onDelete) || isPresent(onClone);
   var isMenuVisible = !hideMenu && (isNotEmpty(dropdownItems) || !disabled || isDefaultMenuCallbacksPresent);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, _extends({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, _extends({
     component: "p",
     "data-cy": "form-title",
     "data-testid": "neeto-molecules-value-display",
     style: "body2",
-    className: classNames("neeto-molecules-rename__text neeto-molecules-rename__display-text w-full truncate", {
+    className: classnames("neeto-molecules-rename__text neeto-molecules-rename__display-text w-full truncate", {
       "cursor-pointer": !disabled,
       "pointer-events-none cursor-text": disabled
     }),
     onClick: handleRenameClick
-  }, textProps), typeof formatText === "function" ? formatText(name) : name), isMenuVisible && /*#__PURE__*/React.createElement(RenameMenu, {
+  }, textProps), typeof formatText === "function" ? formatText(name) : name), isMenuVisible && /*#__PURE__*/React__default.createElement(RenameMenu, {
     disabled: disabled,
+    dropdownButtonProps: dropdownButtonProps,
     dropdownItems: dropdownItems,
+    dropdownProps: dropdownProps,
     handleRenameClick: handleRenameClick,
-    onArchive: onArchive,
+    isArchived: isArchived,
+    isDisabled: isDisabled,
+    onArchiveStatusToggle: onArchiveStatusToggle,
     onClone: onClone,
-    onDelete: onDelete
+    onDelete: onDelete,
+    onDisableStatusToggle: onDisableStatusToggle
   }));
 };
 
@@ -500,8 +219,11 @@ var Rename = function Rename(_ref) {
   var value = _ref.value,
     onRename = _ref.onRename,
     onClone = _ref.onClone,
-    onArchive = _ref.onArchive,
+    onArchiveStatusToggle = _ref.onArchiveStatusToggle,
+    onDisableStatusToggle = _ref.onDisableStatusToggle,
     onDelete = _ref.onDelete,
+    isArchived = _ref.isArchived,
+    isDisabled = _ref.isDisabled,
     _ref$isOpen = _ref.isOpen,
     isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
     _ref$isLoading = _ref.isLoading,
@@ -530,7 +252,11 @@ var Rename = function Rename(_ref) {
     allowEmptySubmission = _ref$allowEmptySubmis === void 0 ? false : _ref$allowEmptySubmis,
     _ref$defaultName = _ref.defaultName,
     defaultName = _ref$defaultName === void 0 ? "" : _ref$defaultName,
-    formatText = _ref.formatText;
+    formatText = _ref.formatText,
+    _ref$dropdownButtonPr = _ref.dropdownButtonProps,
+    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps;
   var _useStateWithDependen = useStateWithDependency(value !== null && value !== void 0 ? value : ""),
     _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
     name = _useStateWithDependen2[0],
@@ -539,25 +265,29 @@ var Rename = function Rename(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     editMode = _useState2[0],
     setEditMode = _useState2[1];
-  var _useState3 = useState(MIN_WIDTH),
-    _useState4 = _slicedToArray(_useState3, 2),
-    inputWidth = _useState4[0],
-    setInputWidth = _useState4[1];
   var renameRef = useRef(null);
-  var placeholderRef = useRef(null);
+  var initialName = useMemo(function () {
+    return name;
+  }, [editMode]);
   useOnClickOutside(renameRef, function () {
-    return editMode && handleClose();
+    return editMode && handleClose({
+      saveOnOutsideClick: notEquals(name, initialName)
+    });
   });
   var handleRename = function handleRename(event, name) {
-    event.stopPropagation();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
     var newName = allowEmptySubmission && isEmpty(name) ? defaultName : name;
     setName(newName);
     onRename === null || onRename === void 0 ? void 0 : onRename(newName);
     setEditMode(false);
   };
-  var handleClose = function handleClose(event) {
+  var handleClose = function handleClose(_ref2) {
+    var _ref2$event = _ref2.event,
+      event = _ref2$event === void 0 ? null : _ref2$event,
+      _ref2$saveOnOutsideCl = _ref2.saveOnOutsideClick,
+      saveOnOutsideClick = _ref2$saveOnOutsideCl === void 0 ? false : _ref2$saveOnOutsideCl;
     event === null || event === void 0 ? void 0 : event.stopPropagation();
-    setName(value);
+    saveOnOutsideClick ? handleRename(event, name) : setName(value);
     setEditMode(false);
   };
   var handleRenameClick = function handleRenameClick(event) {
@@ -570,7 +300,6 @@ var Rename = function Rename(_ref) {
     handleClose: handleClose,
     handleRename: handleRename,
     inputProps: inputProps,
-    inputWidth: inputWidth,
     isLoading: isLoading,
     name: name,
     placeholder: placeholder,
@@ -585,22 +314,26 @@ var Rename = function Rename(_ref) {
     handleRenameClick: handleRenameClick,
     hideMenu: hideMenu,
     name: name,
-    onArchive: onArchive,
+    isArchived: isArchived,
+    onArchiveStatusToggle: onArchiveStatusToggle,
+    isDisabled: isDisabled,
+    onDisableStatusToggle: onDisableStatusToggle,
     onClone: onClone,
     onDelete: onDelete,
-    textProps: textProps
+    textProps: textProps,
+    dropdownButtonProps: dropdownButtonProps,
+    dropdownProps: dropdownProps
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     ref: renameRef,
-    className: classNames("flex min-w-0 max-w-md flex-row items-center", className)
-  }, isNotEmpty(breadcrumbs) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    className: classnames("neeto-molecules-rename flex min-w-0 max-w-md flex-col items-start md:flex-row md:items-center", className)
+  }, isNotEmpty(breadcrumbs) && /*#__PURE__*/React__default.createElement(Breadcrumbs, {
     breadcrumbs: breadcrumbs,
-    hasTrailingSeparator: true
-  }), /*#__PURE__*/React.createElement(DummySpan, {
-    name: name,
-    placeholderRef: placeholderRef,
-    setInputWidth: setInputWidth
-  }), editMode ? /*#__PURE__*/React.createElement(Editor, editNameProps) : /*#__PURE__*/React.createElement(ViewName, viewNameProps));
+    hasTrailingSeparator: true,
+    className: "neeto-molecules-rename-breadcrumbs"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative flex max-w-full items-center gap-x-2"
+  }, editMode ? /*#__PURE__*/React__default.createElement(Editor, editNameProps) : /*#__PURE__*/React__default.createElement(ViewName, viewNameProps)));
 };
 
 export { Rename as default };