@bigbinary/neeto-molecules 1.1.74 → 1.1.76

package/dist/Rename.js

@@ -1,25 +1,49 @@
-import React, { useEffect, useState, useRef, Fragment } from 'react';
-import classnames from 'classnames';
-import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
-import { useStateWithDependency, useOnClickOutside, useHotKeys } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { MenuVertical, MenuHorizontal, Check, Close } from '@bigbinary/neeto-icons';
-import { Dropdown, Tooltip, Button, Typography, Input } from '@bigbinary/neetoui';
-import { mergeRight, isEmpty } from 'ramda';
-import { useTranslation } from 'react-i18next';
+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 _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 _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
 }
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(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 _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+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) {
@@ -31,14 +55,75 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 
-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 _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 _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+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++) {
@@ -54,44 +139,100 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
+var mergeRefs = function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return function (node) {
+    return refs.forEach(function (ref) {
+      return typeof ref === "function" ? ref(node) : ref.current = node;
+    });
+  };
+};
 
-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;
+var Editor = function Editor(_ref) {
+  var placeholder = _ref.placeholder,
+    inputWidth = _ref.inputWidth,
+    allowEmptySubmission = _ref.allowEmptySubmission,
+    name = _ref.name,
+    isLoading = _ref.isLoading,
+    handleRename = _ref.handleRename,
+    submitButtonProps = _ref.submitButtonProps,
+    handleClose = _ref.handleClose,
+    cancelButtonProps = _ref.cancelButtonProps,
+    setName = _ref.setName,
+    inputProps = _ref.inputProps,
+    editMode = _ref.editMode;
+  var closeRef = useHotKeys("escape", handleClose, {
+    mode: "scoped",
+    enabled: editMode
+  });
+  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({
+    placeholder: placeholder,
+    autoFocus: true,
+    className: "neeto-molecules-rename__input flex-grow",
+    "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", {
+      className: "flex items-center justify-end"
+    }, /*#__PURE__*/React.createElement(Button, _extends({
+      className: "neeto-ui-rounded-none",
+      "data-cy": "form-rename-submit-button",
+      "data-testid": "neeto-molecules-rename-button",
+      disabled: !allowEmptySubmission && isEmpty(name) || isLoading,
+      icon: Check,
+      loading: isLoading,
+      style: "text",
+      onClick: function onClick(event) {
+        return handleRename(event, name);
       }
+    }, submitButtonProps)), /*#__PURE__*/React.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
+    }, cancelButtonProps))),
+    onChange: withEventTargetValue(setName),
+    onClick: function onClick(event) {
+      return event.stopPropagation();
     }
-    return a;
-  }
+  }, 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 _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 _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+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) {
@@ -276,48 +417,91 @@ var MoreDropdown = function MoreDropdown(_ref) {
   }), menuBottomChildren));
 };
 
-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("."))
-  );
-};
-
-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 = ".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:150px}.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__breadcrumb-text{color:rgb(var(--neeto-ui-gray-500))}.neeto-molecules-rename__breadcrumb-text:hover,.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))}.neeto-molecules-breadcrumb__divider{font-weight:400;letter-spacing:.005em;line-height:16px;max-height:32px;padding:0;pointer-events:none}.dummy-span{font-size:14px;font-weight:400;padding:5px 8px}";
-n(css,{});
+var RenameMenu = withT(function (_ref) {
+  var t = _ref.t,
+    handleRenameClick = _ref.handleRenameClick,
+    disabled = _ref.disabled,
+    dropdownItems = _ref.dropdownItems,
+    onArchive = _ref.onArchive,
+    onClone = _ref.onClone,
+    onDelete = _ref.onDelete;
+  return /*#__PURE__*/React.createElement(MoreDropdown, {
+    dropdownButtonProps: {
+      "data-testid": "neeto-molecules-menu-button"
+    },
+    dropdownProps: {
+      position: "bottom-start",
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    },
+    menuItems: [{
+      "data-cy": "form-rename-button",
+      onClick: handleRenameClick,
+      label: t("neetoMolecules.common.actions.rename"),
+      isVisible: !disabled,
+      key: "edit-name-menu"
+    }, {
+      "data-cy": "form-clone-button",
+      onClick: onClone,
+      label: t("neetoMolecules.common.actions.clone"),
+      isVisible: isPresent(onClone),
+      key: "clone-entity-menu"
+    }, {
+      "data-cy": "form-archive-button",
+      onClick: onArchive,
+      label: t("neetoMolecules.common.actions.archive"),
+      isVisible: isPresent(onArchive),
+      key: "archive-entity-menu"
+    }, {
+      "data-cy": "form-delete-button",
+      onClick: onDelete,
+      label: t("neetoMolecules.common.actions.delete"),
+      isVisible: isPresent(onDelete),
+      key: "delete-entity-menu"
+    }].concat(_toConsumableArray(dropdownItems))
+  });
+});
 
-var mergeRefs = function mergeRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-  return function (node) {
-    return refs.forEach(function (ref) {
-      return typeof ref === "function" ? ref(node) : ref.current = node;
-    });
-  };
+var ViewName = function ViewName(_ref) {
+  var disabled = _ref.disabled,
+    textProps = _ref.textProps,
+    formatText = _ref.formatText,
+    dropdownItems = _ref.dropdownItems,
+    hideMenu = _ref.hideMenu,
+    handleRenameClick = _ref.handleRenameClick,
+    onArchive = _ref.onArchive,
+    onClone = _ref.onClone,
+    onDelete = _ref.onDelete,
+    name = _ref.name;
+  var isDefaultMenuCallbacksPresent = isPresent(onArchive) || isPresent(onDelete) || isPresent(onClone);
+  var isMenuVisible = !hideMenu && (isNotEmpty(dropdownItems) || !disabled || isDefaultMenuCallbacksPresent);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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", {
+      "cursor-pointer": !disabled,
+      "pointer-events-none cursor-text": disabled
+    }),
+    onClick: handleRenameClick
+  }, textProps), typeof formatText === "function" ? formatText(name) : name), isMenuVisible && /*#__PURE__*/React.createElement(RenameMenu, {
+    disabled: disabled,
+    dropdownItems: dropdownItems,
+    handleRenameClick: handleRenameClick,
+    onArchive: onArchive,
+    onClone: onClone,
+    onDelete: onDelete
+  }));
 };
 
 var Rename = function Rename(_ref) {
   var value = _ref.value,
-    _ref$onRename = _ref.onRename,
-    onRename = _ref$onRename === void 0 ? noop : _ref$onRename,
+    onRename = _ref.onRename,
+    onClone = _ref.onClone,
+    onArchive = _ref.onArchive,
+    onDelete = _ref.onDelete,
     _ref$isOpen = _ref.isOpen,
     isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
     _ref$isLoading = _ref.isLoading,
@@ -347,8 +531,6 @@ var Rename = function Rename(_ref) {
     _ref$defaultName = _ref.defaultName,
     defaultName = _ref$defaultName === void 0 ? "" : _ref$defaultName,
     formatText = _ref.formatText;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   var _useStateWithDependen = useStateWithDependency(value !== null && value !== void 0 ? value : ""),
     _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
     name = _useStateWithDependen2[0],
@@ -370,7 +552,7 @@ var Rename = function Rename(_ref) {
     event.stopPropagation();
     var newName = allowEmptySubmission && isEmpty(name) ? defaultName : name;
     setName(newName);
-    onRename(newName);
+    onRename === null || onRename === void 0 ? void 0 : onRename(newName);
     setEditMode(false);
   };
   var handleClose = function handleClose(event) {
@@ -378,114 +560,47 @@ var Rename = function Rename(_ref) {
     setName(value);
     setEditMode(false);
   };
-  var handleRenameButton = function handleRenameButton(event) {
+  var handleRenameClick = function handleRenameClick(event) {
     event.stopPropagation();
-    setEditMode(true);
+    !disabled && setEditMode(true);
   };
-  var handleDisplayText = function handleDisplayText(event) {
-    event.stopPropagation();
-    !disabled && setEditMode(!editMode);
+  var editNameProps = {
+    allowEmptySubmission: allowEmptySubmission,
+    cancelButtonProps: cancelButtonProps,
+    handleClose: handleClose,
+    handleRename: handleRename,
+    inputProps: inputProps,
+    inputWidth: inputWidth,
+    isLoading: isLoading,
+    name: name,
+    placeholder: placeholder,
+    setName: setName,
+    submitButtonProps: submitButtonProps,
+    editMode: editMode
+  };
+  var viewNameProps = {
+    disabled: disabled,
+    dropdownItems: dropdownItems,
+    formatText: formatText,
+    handleRenameClick: handleRenameClick,
+    hideMenu: hideMenu,
+    name: name,
+    onArchive: onArchive,
+    onClone: onClone,
+    onDelete: onDelete,
+    textProps: textProps
   };
-  var closeRef = useHotKeys("escape", handleClose, {
-    mode: "scoped",
-    enabled: editMode
-  });
-  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", {
     ref: renameRef,
-    className: classnames("flex min-w-0 max-w-md flex-row items-center", className)
-  }, breadcrumbs.map(function (_ref2) {
-    var text = _ref2.text,
-      link = _ref2.link;
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: text
-    }, /*#__PURE__*/React.createElement(Link, _extends({
-      className: "neeto-molecules-rename__text neeto-molecules-rename__breadcrumb-text",
-      "data-testid": "neeto-molecules-value-display",
-      to: link
-    }, textProps), text), /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-molecules-rename__breadcrumb-text neeto-molecules-breadcrumb__divider",
-      component: "span"
-    }, "/"));
+    className: classNames("flex min-w-0 max-w-md flex-row items-center", className)
+  }, isNotEmpty(breadcrumbs) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    breadcrumbs: breadcrumbs,
+    hasTrailingSeparator: true
   }), /*#__PURE__*/React.createElement(DummySpan, {
     name: name,
     placeholderRef: placeholderRef,
     setInputWidth: setInputWidth
-  }), editMode ? /*#__PURE__*/React.createElement("div", {
-    className: "flex min-w-0 max-w-full flex-grow"
-  }, /*#__PURE__*/React.createElement(Input, _extends({
-    autoFocus: true,
-    className: "neeto-molecules-rename__input flex-grow",
-    "data-cy": "form-rename-text-field",
-    "data-testid": "neeto-molecules-name-input",
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    },
-    placeholder: placeholder,
-    ref: mergeRefs(closeRef, submitRef),
-    style: {
-      width: inputWidth
-    },
-    value: name,
-    suffix: /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center justify-end"
-    }, /*#__PURE__*/React.createElement(Button, _extends({
-      className: "neeto-ui-rounded-none",
-      "data-cy": "form-rename-submit-button",
-      "data-testid": "neeto-molecules-rename-button",
-      icon: Check,
-      loading: isLoading,
-      style: "text",
-      disabled: !allowEmptySubmission && isEmpty(name) || isLoading,
-      onClick: function onClick(event) {
-        return handleRename(event, name);
-      }
-    }, submitButtonProps)), /*#__PURE__*/React.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
-    }, cancelButtonProps))),
-    onChange: function onChange(event) {
-      return setName(event.target.value);
-    }
-  }, inputProps))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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", {
-      "cursor-pointer": !disabled,
-      "pointer-events-none cursor-text": disabled
-    }),
-    onClick: handleDisplayText
-  }, textProps), typeof formatText === "function" ? formatText(name) : name), !hideMenu && (isNotEmpty(dropdownItems) || !disabled) && /*#__PURE__*/React.createElement(MoreDropdown, {
-    dropdownButtonProps: {
-      "data-testid": "neeto-molecules-menu-button"
-    },
-    dropdownProps: {
-      position: "bottom-start",
-      onClick: function onClick(event) {
-        return event.stopPropagation();
-      }
-    },
-    menuItems: [{
-      "data-cy": "form-rename-button",
-      onClick: handleRenameButton,
-      label: t("neetoMolecules.common.actions.rename"),
-      isVisible: !disabled,
-      key: "edit-name-menu"
-    }].concat(_toConsumableArray(dropdownItems))
-  })));
+  }), editMode ? /*#__PURE__*/React.createElement(Editor, editNameProps) : /*#__PURE__*/React.createElement(ViewName, viewNameProps));
 };
 
 export { Rename as default };