@bigbinary/neeto-molecules 1.3.9 → 1.3.11

package/dist/cjs/NavigationHeader.js

@@ -0,0 +1,867 @@
+'use strict';
+
+var React = require('react');
+var neetoCist = require('@bigbinary/neeto-cist');
+var ramda = require('ramda');
+var neetoui = require('@bigbinary/neetoui');
+var reactRouterDom = require('react-router-dom');
+var classnames = require('classnames');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var i18next = require('i18next');
+var reactI18next = require('react-i18next');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+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);
+}
+
+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$3 = ".neeto-molecules-breadcrumbs-wrap{display:flex}@media screen and (max-width:768px){.neeto-molecules-breadcrumbs-wrap{flex-wrap:wrap}}.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$3,{});
+
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var breadcrumbs = _ref.breadcrumbs,
+    _ref$hasTrailingSepar = _ref.hasTrailingSeparator,
+    hasTrailingSeparator = _ref$hasTrailingSepar === void 0 ? false : _ref$hasTrailingSepar;
+  return /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+      className: "neeto-molecules-breadcrumb",
+      "data-cy": "header-breadcrumb",
+      key: index
+    }, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
+      to: link
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.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__default["default"].createElement(neetoui.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;
+  React.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__default["default"].createElement("div", {
+      className: "dummy-span pointer-events-none invisible absolute",
+      ref: placeholderRef
+    }, name.split(" ").join("."))
+  );
+};
+
+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 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 = reactUtils.useHotKeys("escape", handleClose, {
+    mode: "scoped",
+    enabled: editMode
+  });
+  var submitRef = reactUtils.useHotKeys(["command+return", "return"], function (event) {
+    if (ramda.isEmpty(name) && !allowEmptySubmission) return;
+    handleRename(event, name);
+  }, {
+    mode: "scoped",
+    enabled: editMode
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex min-w-0 max-w-full flex-grow"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.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__default["default"].createElement("div", {
+      className: "flex items-center justify-end"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+      className: "neeto-ui-rounded-none",
+      "data-cy": "form-rename-submit-button",
+      "data-testid": "neeto-molecules-rename-button",
+      disabled: !allowEmptySubmission && ramda.isEmpty(name) || isLoading,
+      icon: neetoIcons.Check,
+      loading: isLoading,
+      style: "text",
+      onClick: function onClick(event) {
+        return handleRename(event, name);
+      }
+    }, submitButtonProps)), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+      className: "neeto-ui-rounded-none",
+      "data-cy": "form-rename-close-button",
+      "data-testid": "neeto-molecules-cancel-button",
+      disabled: isLoading,
+      icon: neetoIcons.Close,
+      style: "text",
+      onClick: handleClose
+    }, cancelButtonProps))),
+    onChange: utils.withEventTargetValue(setName),
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, inputProps)));
+};
+
+var css$2 = ".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$2,{});
+
+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$3 = ["label", "key"],
+  _excluded2$1 = ["isVisible", "key"];
+var MenuItem$1 = neetoui.Dropdown.MenuItem,
+  Menu$1 = neetoui.Dropdown.Menu;
+var Submenu = function Submenu(_ref) {
+  var label = _ref.label,
+    key = _ref.key,
+    menuItemProps = _objectWithoutProperties(_ref, _excluded$3);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, _extends({
+    customTarget: /*#__PURE__*/React__default["default"].createElement(MenuItem$1.Button, null, label),
+    key: key,
+    position: "left",
+    trigger: "hover"
+  }, menuItemProps.dropdownProps), /*#__PURE__*/React__default["default"].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$1);
+    if (!isVisible) return null;
+    return /*#__PURE__*/React__default["default"].createElement(MoreDropdownMenuItem, _extends({
+      key: key
+    }, menuItemProps));
+  })));
+};
+
+var _excluded$2 = ["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 = neetoui.Dropdown.MenuItem,
+  Divider = neetoui.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$2);
+  if (type === MENU_ITEM_TYPES.divider) {
+    return /*#__PURE__*/React__default["default"].createElement(Divider, null);
+  }
+  if (hasSubItems) {
+    return /*#__PURE__*/React__default["default"].createElement(Submenu, _objectSpread$1({
+      label: label
+    }, menuItemProps));
+  }
+  return /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, _objectSpread$1({
+    onClick: onClick
+  }, menuItemProps), label);
+};
+
+var _excluded$1 = ["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 = neetoui.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 = ramda.mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
+  var targetIcon = isVertical ? neetoIcons.MenuVertical : neetoIcons.MenuHorizontal;
+  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
+  if (isDropdownDisabled && !tooltipProps.disabled) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, tooltipProps, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(neetoui.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__default["default"].createElement(neetoui.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__default["default"].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$1);
+    if (!isVisible) return null;
+    return /*#__PURE__*/React__default["default"].createElement(MoreDropdownMenuItem, _extends({
+      key: key
+    }, menuItemProps));
+  }), menuBottomChildren));
+};
+
+var RenameMenu = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    handleRenameClick = _ref.handleRenameClick,
+    disabled = _ref.disabled,
+    dropdownItems = _ref.dropdownItems,
+    onArchiveStatusToggle = _ref.onArchiveStatusToggle,
+    onClone = _ref.onClone,
+    onDelete = _ref.onDelete,
+    isArchived = _ref.isArchived;
+  return /*#__PURE__*/React__default["default"].createElement(MoreDropdown, {
+    dropdownButtonProps: {
+      "data-testid": "neeto-molecules-menu-button"
+    },
+    dropdownProps: {
+      position: "bottom-start",
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      },
+      strategy: "fixed",
+      appendTo: function appendTo() {
+        return document.body;
+      }
+    },
+    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: neetoCist.isPresent(onClone),
+      key: "clone-entity-menu"
+    }, {
+      "data-cy": "form-archive-button",
+      onClick: onArchiveStatusToggle,
+      label: isArchived ? t("neetoMolecules.common.actions.unArchive") : t("neetoMolecules.common.actions.archive"),
+      isVisible: neetoCist.isPresent(onArchiveStatusToggle),
+      key: "archive-entity-menu"
+    }, {
+      "data-cy": "form-delete-button",
+      onClick: onDelete,
+      label: t("neetoMolecules.common.actions.delete"),
+      isVisible: neetoCist.isPresent(onDelete),
+      key: "delete-entity-menu"
+    }].concat(_toConsumableArray(dropdownItems))
+  });
+});
+
+var ViewName = function ViewName(_ref) {
+  var disabled = _ref.disabled,
+    textProps = _ref.textProps,
+    formatText = _ref.formatText,
+    dropdownItems = _ref.dropdownItems,
+    hideMenu = _ref.hideMenu,
+    handleRenameClick = _ref.handleRenameClick,
+    onArchiveStatusToggle = _ref.onArchiveStatusToggle,
+    onClone = _ref.onClone,
+    onDelete = _ref.onDelete,
+    name = _ref.name,
+    isArchived = _ref.isArchived;
+  var isDefaultMenuCallbacksPresent = neetoCist.isPresent(onArchiveStatusToggle) || neetoCist.isPresent(onDelete) || neetoCist.isPresent(onClone);
+  var isMenuVisible = !hideMenu && (neetoCist.isNotEmpty(dropdownItems) || !disabled || isDefaultMenuCallbacksPresent);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, _extends({
+    component: "p",
+    "data-cy": "form-title",
+    "data-testid": "neeto-molecules-value-display",
+    style: "body2",
+    className: classnames__default["default"]("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__default["default"].createElement(RenameMenu, {
+    disabled: disabled,
+    dropdownItems: dropdownItems,
+    handleRenameClick: handleRenameClick,
+    isArchived: isArchived,
+    onArchiveStatusToggle: onArchiveStatusToggle,
+    onClone: onClone,
+    onDelete: onDelete
+  }));
+};
+
+var Rename = function Rename(_ref) {
+  var value = _ref.value,
+    onRename = _ref.onRename,
+    onClone = _ref.onClone,
+    onArchiveStatusToggle = _ref.onArchiveStatusToggle,
+    onDelete = _ref.onDelete,
+    isArchived = _ref.isArchived,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$hideMenu = _ref.hideMenu,
+    hideMenu = _ref$hideMenu === void 0 ? false : _ref$hideMenu,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$dropdownItems = _ref.dropdownItems,
+    dropdownItems = _ref$dropdownItems === void 0 ? [] : _ref$dropdownItems,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    _ref$textProps = _ref.textProps,
+    textProps = _ref$textProps === void 0 ? {} : _ref$textProps,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$submitButtonProp = _ref.submitButtonProps,
+    submitButtonProps = _ref$submitButtonProp === void 0 ? {} : _ref$submitButtonProp,
+    _ref$cancelButtonProp = _ref.cancelButtonProps,
+    cancelButtonProps = _ref$cancelButtonProp === void 0 ? {} : _ref$cancelButtonProp,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$allowEmptySubmis = _ref.allowEmptySubmission,
+    allowEmptySubmission = _ref$allowEmptySubmis === void 0 ? false : _ref$allowEmptySubmis,
+    _ref$defaultName = _ref.defaultName,
+    defaultName = _ref$defaultName === void 0 ? "" : _ref$defaultName,
+    formatText = _ref.formatText;
+  var _useStateWithDependen = reactUtils.useStateWithDependency(value !== null && value !== void 0 ? value : ""),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    name = _useStateWithDependen2[0],
+    setName = _useStateWithDependen2[1];
+  var _useState = React.useState(isOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    editMode = _useState2[0],
+    setEditMode = _useState2[1];
+  var _useState3 = React.useState(MIN_WIDTH),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputWidth = _useState4[0],
+    setInputWidth = _useState4[1];
+  var renameRef = React.useRef(null);
+  var placeholderRef = React.useRef(null);
+  reactUtils.useOnClickOutside(renameRef, function () {
+    return editMode && handleClose();
+  });
+  var handleRename = function handleRename(event, name) {
+    event.stopPropagation();
+    var newName = allowEmptySubmission && ramda.isEmpty(name) ? defaultName : name;
+    setName(newName);
+    onRename === null || onRename === void 0 ? void 0 : onRename(newName);
+    setEditMode(false);
+  };
+  var handleClose = function handleClose(event) {
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    setName(value);
+    setEditMode(false);
+  };
+  var handleRenameClick = function handleRenameClick(event) {
+    event.stopPropagation();
+    !disabled && setEditMode(true);
+  };
+  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,
+    isArchived: isArchived,
+    onArchiveStatusToggle: onArchiveStatusToggle,
+    onClone: onClone,
+    onDelete: onDelete,
+    textProps: textProps
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: renameRef,
+    className: classnames__default["default"]("flex min-w-0 max-w-md flex-col items-start md:flex-row md:items-center", className)
+  }, neetoCist.isNotEmpty(breadcrumbs) && /*#__PURE__*/React__default["default"].createElement(Breadcrumbs, {
+    breadcrumbs: breadcrumbs,
+    hasTrailingSeparator: true
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-x-2"
+  }, /*#__PURE__*/React__default["default"].createElement(DummySpan, {
+    name: name,
+    placeholderRef: placeholderRef,
+    setInputWidth: setInputWidth
+  }), editMode ? /*#__PURE__*/React__default["default"].createElement(Editor, editNameProps) : /*#__PURE__*/React__default["default"].createElement(ViewName, viewNameProps)));
+};
+
+var DEFAULT_HOME_BUTTON_PROPS = {
+  tooltip: {
+    content: i18next.t("neetoMolecules.navigationHeader.home"),
+    position: "bottom"
+  },
+  homeUrl: "/",
+  icon: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Home, null)
+};
+
+var LeftBlock = function LeftBlock(_ref) {
+  var customHomeButtonProps = _ref.homeButtonProps,
+    homeUrl = _ref.homeUrl,
+    renameProps = _ref.renameProps,
+    children = _ref.children;
+  var homeButtonProps = ramda.mergeDeepRight(DEFAULT_HOME_BUTTON_PROPS, customHomeButtonProps);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-1 md:gap-2",
+    "data-testid": "navigation-header-left-block"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+    content: homeButtonProps.tooltip.content,
+    position: homeButtonProps.tooltip.position
+  }, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
+    "data-cy": "home-button",
+    "data-testid": "home-button",
+    to: homeUrl
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-rounded hover:neeto-ui-bg-gray-200 p-1"
+  }, homeButtonProps.icon))), neetoCist.isPresent(renameProps) && /*#__PURE__*/React__default["default"].createElement(Rename, _extends({
+    dropdownItems: renameProps.dropdownItems,
+    value: renameProps.value
+  }, renameProps)), children);
+};
+
+var NavigationLinks = function NavigationLinks(_ref) {
+  var headerLinks = _ref.headerLinks;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full items-center justify-center gap-2 md:gap-3 lg:gap-6",
+    "data-testid": "navigation-header-navigation-links"
+  }, headerLinks.map(function (headerLink) {
+    return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.NavLink, _extends({
+      activeClassName: "active",
+      className: "neeto-molecules-navigation-header__link capitalize no-underline",
+      "data-cy": "".concat(utils.joinHyphenCase(headerLink.key), "-tab"),
+      key: headerLink.key
+    }, headerLink), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      lineHeight: "normal",
+      style: "h4",
+      weight: "semibold"
+    }, headerLink.label));
+  }));
+};
+
+var AlertBlock = function AlertBlock(props) {
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, _extends({
+    "data-cy": "reset-alert",
+    "data-testid": "reset-alert",
+    submitButtonLabel: t("neetoMolecules.common.actions.reset")
+  }, props));
+};
+
+var css$1 = ".neeto-molecules-publish-block{align-items:center;display:flex;gap:12px;justify-content:flex-end}.neeto-molecules-publish-block__action-btn{align-items:center;display:inline-flex;flex-direction:row;gap:1px;justify-content:center}.neeto-molecules-publish-block__action-btn>.neeto-ui-btn:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.neeto-molecules-publish-block__action-btn>.neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}";
+n(css$1,{});
+
+var _excluded = ["t"],
+  _excluded2 = ["t"],
+  _excluded3 = ["t"],
+  _excluded4 = ["t"];
+var ViewDraftButton = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    "data-cy": "view-draft-button",
+    "data-testid": "view-draft-button",
+    icon: neetoIcons.ExternalLink,
+    style: "secondary",
+    target: "_blank",
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.viewDraftVersion"),
+      position: "top"
+    }
+  }, props));
+});
+var ResetDraftButton = reactUtils.withT(function (_ref2) {
+  var t = _ref2.t,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    "data-cy": "draft-button",
+    "data-testid": "draft-button",
+    icon: neetoIcons.Undo,
+    style: "secondary",
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.deleteDraftVersion"),
+      position: "top"
+    }
+  }, props));
+});
+var PublishButton = reactUtils.withT(function (_ref3) {
+  var t = _ref3.t,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    "data-cy": "publish-button",
+    "data-testid": "publish-button",
+    label: t("neetoMolecules.common.actions.publish")
+  }, props));
+});
+var PublishPreviewButton = reactUtils.withT(function (_ref4) {
+  var t = _ref4.t,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    "data-cy": "publish-preview-button",
+    "data-testid": "publish-preview-button",
+    icon: neetoIcons.ExternalLink,
+    target: "_blank",
+    className: classnames__default["default"]({
+      "pointer-events-none": props.disabled
+    }, props.className),
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.viewPublishedVersion"),
+      position: "top"
+    }
+  }, props));
+});
+var PublishBlock = function PublishBlock(_ref5) {
+  var renderDraftButtons = _ref5.renderDraftButtons,
+    renderPublishButtons = _ref5.renderPublishButtons;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var draftBlockButtons = renderDraftButtons({
+    ViewDraftButton: ViewDraftButton,
+    ResetDraftButton: ResetDraftButton
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-publish-block",
+    "data-testid": "neeto-molecules-publish-block"
+  }, draftBlockButtons && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-700",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.common.actions.draft")), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-1"
+  }, draftBlockButtons)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-gray-300 h-full w-px"
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-publish-block__action-btn"
+  }, renderPublishButtons({
+    PublishButton: PublishButton,
+    PublishPreviewButton: PublishPreviewButton
+  })));
+};
+PublishBlock.Alert = AlertBlock;
+
+var css = ".standalone-publish-preview-button{border-radius:var(--neeto-ui-rounded)!important}.neeto-molecules-navigation-header .neeto-molecules-navigation-header__link{color:rgb(var(--neeto-ui-gray-500))}.neeto-molecules-navigation-header .neeto-molecules-navigation-header__link .neeto-ui-text-h4{color:inherit}@media screen and (max-width:1024px){.neeto-molecules-navigation-header .neeto-molecules-navigation-header__link .neeto-ui-text-h4{font-size:14px}}.neeto-molecules-navigation-header .neeto-molecules-navigation-header__link.active{color:rgb(var(--neeto-ui-black))}.neeto-molecules-navigation-header .neeto-molecules-navigation-header__link:hover:not(.active){color:rgb(var(--neeto-ui-gray-600))}.neeto-molecules-navigation-header .neeto-molecules-navigation-header__link.disabled{color:rgb(var(--neeto-ui-gray-300));cursor:not-allowed}.neeto-molecules-navigation-header .neeto-molecules-navigation-header__link.disabled:hover{color:rgb(var(--neeto-ui-gray-300))}";
+n(css,{});
+
+var RightBlock = function RightBlock(_ref) {
+  var isDraftBlockHidden = _ref.isDraftBlockHidden,
+    previewDraftUrl = _ref.previewDraftUrl,
+    isResetDraftButtonVisible = _ref.isResetDraftButtonVisible,
+    onResetClick = _ref.onResetClick,
+    isResetting = _ref.isResetting,
+    isPublishDisabled = _ref.isPublishDisabled,
+    isPublishing = _ref.isPublishing,
+    handlePublish = _ref.handlePublish,
+    isPublishPreviewDisabled = _ref.isPublishPreviewDisabled,
+    previewPublishedUrl = _ref.previewPublishedUrl,
+    isPublishButtonVisible = _ref.isPublishButtonVisible,
+    isResetAlertOpen = _ref.isResetAlertOpen,
+    setIsResetAlertOpen = _ref.setIsResetAlertOpen,
+    handleReset = _ref.handleReset,
+    publishAlertTitle = _ref.publishAlertTitle,
+    publishAlertDescription = _ref.publishAlertDescription;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var renderDraftButtons = function renderDraftButtons(_ref2) {
+    var ViewDraftButton = _ref2.ViewDraftButton,
+      ResetDraftButton = _ref2.ResetDraftButton;
+    return !isDraftBlockHidden && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ViewDraftButton, {
+      to: previewDraftUrl
+    }), isResetDraftButtonVisible && /*#__PURE__*/React__default["default"].createElement(ResetDraftButton, {
+      loading: isResetting,
+      onClick: function onClick() {
+        return onResetClick();
+      }
+    }));
+  };
+  var renderPublishButtons = function renderPublishButtons(_ref3) {
+    var PublishButton = _ref3.PublishButton,
+      PublishPreviewButton = _ref3.PublishPreviewButton;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isPublishButtonVisible && /*#__PURE__*/React__default["default"].createElement(PublishButton, {
+      disabled: isPublishDisabled,
+      loading: isPublishing,
+      onClick: function onClick() {
+        return handlePublish();
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(PublishPreviewButton, {
+      disabled: isPublishPreviewDisabled,
+      to: previewPublishedUrl,
+      className: classnames__default["default"]({
+        "standalone-publish-preview-button": !isPublishButtonVisible
+      })
+    }));
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(PublishBlock, {
+    renderDraftButtons: renderDraftButtons,
+    renderPublishButtons: renderPublishButtons
+  }), /*#__PURE__*/React__default["default"].createElement(PublishBlock.Alert, {
+    isOpen: isResetAlertOpen,
+    isSubmitting: isResetting,
+    message: publishAlertDescription || t("neetoMolecules.navigationHeader.resetDescription"),
+    title: publishAlertTitle || t("neetoMolecules.navigationHeader.resetTitle"),
+    onClose: function onClose() {
+      return setIsResetAlertOpen(false);
+    },
+    onSubmit: handleReset
+  }));
+};
+
+var NavigationHeader = function NavigationHeader(_ref) {
+  var leftActionBlock = _ref.leftActionBlock,
+    navigationLinks = _ref.navigationLinks,
+    rightActionBlock = _ref.rightActionBlock;
+  var numberOfChildren = ramda.length(ramda.filter(neetoCist.isPresent, [leftActionBlock, navigationLinks, rightActionBlock]));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-navigation-header neeto-ui-border-gray-200 neeto-ui-bg-white flex h-16 w-full flex-shrink-0 items-center overflow-x-auto border-b px-2 py-2 md:px-4 lg:px-6",
+    "data-testid": "navigation-header"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "grid w-full gap-4",
+    style: {
+      gridTemplateColumns: "repeat(".concat(numberOfChildren, ", 1fr)")
+    }
+  }, leftActionBlock, navigationLinks, rightActionBlock));
+};
+NavigationHeader.LeftActionBlock = LeftBlock;
+NavigationHeader.NavigationLinks = NavigationLinks;
+NavigationHeader.RightActionBlock = RightBlock;
+
+module.exports = NavigationHeader;
+//# sourceMappingURL=NavigationHeader.js.map