@bigbinary/neeto-molecules 1.1.74 → 1.1.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,11 +4,13 @@ import { Link } from 'react-router-dom';
4
4
 
5
5
  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}}
6
6
 
7
- var css = ".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{color:rgb(var(--neeto-ui-gray-500));margin:0 4px}";
7
+ var css = ".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}";
8
8
  n(css,{});
9
9
 
10
10
  var Breadcrumbs = function Breadcrumbs(_ref) {
11
- var breadcrumbs = _ref.breadcrumbs;
11
+ var breadcrumbs = _ref.breadcrumbs,
12
+ _ref$hasTrailingSepar = _ref.hasTrailingSeparator,
13
+ hasTrailingSeparator = _ref$hasTrailingSepar === void 0 ? false : _ref$hasTrailingSepar;
12
14
  return /*#__PURE__*/React.createElement("div", {
13
15
  className: "neeto-molecules-breadcrumbs-wrap"
14
16
  }, breadcrumbs.map(function (_ref2, index) {
@@ -23,13 +25,18 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
23
25
  to: link
24
26
  }, /*#__PURE__*/React.createElement(Typography, {
25
27
  className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-breadcrumb-link",
26
- component: "span",
28
+ component: "p",
27
29
  "data-cy": text,
28
30
  "data-test-id": text,
29
31
  style: "body2",
30
32
  weight: "normal"
31
- }, text)), index + 1 !== breadcrumbs.length && /*#__PURE__*/React.createElement("span", {
32
- className: "neeto-molecules-breadcrumb-separator neeto-ui-text-black"
33
+ }, text)), (index + 1 !== breadcrumbs.length || hasTrailingSeparator) && /*#__PURE__*/React.createElement(Typography, {
34
+ className: "neeto-molecules-breadcrumb-separator neeto-ui-text-gray-500",
35
+ component: "p",
36
+ "data-cy": "breadcrumb-divider-".concat(index),
37
+ "data-test-id": "breadcrumb-divider-".concat(index),
38
+ style: "body2",
39
+ weight: "normal"
33
40
  }, "/"));
34
41
  }));
35
42
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumbs.js","sources":["../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js","../src/components/Breadcrumbs/index.jsx"],"sourcesContent":["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}}export{n as default};\n","import React from \"react\";\n\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"react-router-dom\";\n\nimport \"./breadcrumbs.scss\";\n\nconst Breadcrumbs = ({ breadcrumbs }) => (\n <div className=\"neeto-molecules-breadcrumbs-wrap\">\n {breadcrumbs.map(({ text, link = \"#\" }, index) => (\n <div\n className=\"neeto-molecules-breadcrumb\"\n data-cy=\"header-breadcrumb\"\n key={index}\n >\n <Link to={link}>\n <Typography\n className=\"neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-breadcrumb-link\"\n component=\"span\"\n data-cy={text}\n data-test-id={text}\n style=\"body2\"\n weight=\"normal\"\n >\n {text}\n </Typography>\n </Link>\n {index + 1 !== breadcrumbs.length && (\n <span className=\"neeto-molecules-breadcrumb-separator neeto-ui-text-black\">\n /\n </span>\n )}\n </div>\n ))}\n </div>\n);\n\nBreadcrumbs.propTypes = {\n /**\n * To show breadcrumbs. `text` accepts a text string to be shown as the breadcrumb and `link` accepts relative URL path for the breadcrumb.\n */\n breadcrumbs: PropTypes.arrayOf(\n PropTypes.shape({\n text: PropTypes.string,\n link: PropTypes.string,\n })\n ),\n};\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","_ref","breadcrumbs","React","createElement","className","map","_ref2","index","text","_ref2$link","link","key","Link","to","Typography","component","style","weight","length"],"mappings":"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"}
1
+ {"version":3,"file":"Breadcrumbs.js","sources":["../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js","../src/components/Breadcrumbs/index.jsx"],"sourcesContent":["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}}export{n as default};\n","import React from \"react\";\n\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"react-router-dom\";\n\nimport \"./breadcrumbs.scss\";\n\nconst Breadcrumbs = ({ breadcrumbs, hasTrailingSeparator = false }) => (\n <div className=\"neeto-molecules-breadcrumbs-wrap\">\n {breadcrumbs.map(({ text, link = \"#\" }, index) => (\n <div\n className=\"neeto-molecules-breadcrumb\"\n data-cy=\"header-breadcrumb\"\n key={index}\n >\n <Link to={link}>\n <Typography\n className=\"neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-breadcrumb-link\"\n component=\"p\"\n data-cy={text}\n data-test-id={text}\n style=\"body2\"\n weight=\"normal\"\n >\n {text}\n </Typography>\n </Link>\n {(index + 1 !== breadcrumbs.length || hasTrailingSeparator) && (\n <Typography\n className=\"neeto-molecules-breadcrumb-separator neeto-ui-text-gray-500\"\n component=\"p\"\n data-cy={`breadcrumb-divider-${index}`}\n data-test-id={`breadcrumb-divider-${index}`}\n style=\"body2\"\n weight=\"normal\"\n >\n /\n </Typography>\n )}\n </div>\n ))}\n </div>\n);\n\nBreadcrumbs.propTypes = {\n /**\n * To show breadcrumbs. `text` accepts a text string to be shown as the breadcrumb and `link` accepts relative URL path for the breadcrumb.\n */\n breadcrumbs: PropTypes.arrayOf(\n PropTypes.shape({\n text: PropTypes.string,\n link: PropTypes.string,\n })\n ),\n /**\n * An optional `boolean` to control whether the component should show a trailing separator at the end. This will be useful if there's something like entity name to be shown after the breadcrumb component.\n */\n hasTrailingSeparator: PropTypes.bool,\n};\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","_ref","breadcrumbs","_ref$hasTrailingSepar","hasTrailingSeparator","React","createElement","className","map","_ref2","index","text","_ref2$link","link","key","Link","to","Typography","component","style","weight","length","concat"],"mappings":"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"}
@@ -1,14 +1,14 @@
1
- import React, { useEffect, useState, useRef, Fragment } from 'react';
2
- import { isNotEmpty, noop, isPresent } from '@bigbinary/neeto-cist';
3
- import { mergeRight, isEmpty, mergeDeepRight, length, filter } from 'ramda';
4
- import { Dropdown, Tooltip, Button, Typography, Input, Alert } from '@bigbinary/neetoui';
1
+ import React, { useEffect, useState, useRef } from 'react';
2
+ import { isPresent, isNotEmpty } from '@bigbinary/neeto-cist';
3
+ import { isEmpty, mergeRight, mergeDeepRight, length, filter } from 'ramda';
4
+ import { Typography, Input, Button, Dropdown, Tooltip, Alert } from '@bigbinary/neetoui';
5
5
  import { Link, NavLink } from 'react-router-dom';
6
6
  import classnames from 'classnames';
7
- import { useStateWithDependency, useOnClickOutside, useHotKeys, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
8
- import { MenuVertical, MenuHorizontal, Check, Close, Home, ExternalLink, Undo } from '@bigbinary/neeto-icons';
9
- import { useTranslation } from 'react-i18next';
7
+ import { useHotKeys, withT, useStateWithDependency, useOnClickOutside } from '@bigbinary/neeto-commons-frontend/react-utils';
8
+ import { withEventTargetValue, joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
9
+ import { Check, Close, MenuVertical, MenuHorizontal, Home, ExternalLink, Undo } from '@bigbinary/neeto-icons';
10
10
  import { t as t$1 } from 'i18next';
11
- import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
11
+ import { useTranslation } from 'react-i18next';
12
12
 
13
13
  function _extends() {
14
14
  _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -25,37 +25,6 @@ function _extends() {
25
25
  return _extends.apply(this, arguments);
26
26
  }
27
27
 
28
- function _arrayLikeToArray(arr, len) {
29
- if (len == null || len > arr.length) len = arr.length;
30
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
31
- return arr2;
32
- }
33
-
34
- function _arrayWithoutHoles(arr) {
35
- if (Array.isArray(arr)) return _arrayLikeToArray(arr);
36
- }
37
-
38
- function _iterableToArray(iter) {
39
- if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
40
- }
41
-
42
- function _unsupportedIterableToArray(o, minLen) {
43
- if (!o) return;
44
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
45
- var n = Object.prototype.toString.call(o).slice(8, -1);
46
- if (n === "Object" && o.constructor) n = o.constructor.name;
47
- if (n === "Map" || n === "Set") return Array.from(o);
48
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
49
- }
50
-
51
- function _nonIterableSpread() {
52
- throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
53
- }
54
-
55
- function _toConsumableArray(arr) {
56
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
57
- }
58
-
59
28
  function _arrayWithHoles(arr) {
60
29
  if (Array.isArray(arr)) return arr;
61
30
  }
@@ -88,6 +57,21 @@ function _iterableToArrayLimit(r, l) {
88
57
  }
89
58
  }
90
59
 
60
+ function _arrayLikeToArray(arr, len) {
61
+ if (len == null || len > arr.length) len = arr.length;
62
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
63
+ return arr2;
64
+ }
65
+
66
+ function _unsupportedIterableToArray(o, minLen) {
67
+ if (!o) return;
68
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
69
+ var n = Object.prototype.toString.call(o).slice(8, -1);
70
+ if (n === "Object" && o.constructor) n = o.constructor.name;
71
+ if (n === "Map" || n === "Set") return Array.from(o);
72
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
73
+ }
74
+
91
75
  function _nonIterableRest() {
92
76
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
93
77
  }
@@ -96,6 +80,163 @@ function _slicedToArray(arr, i) {
96
80
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
97
81
  }
98
82
 
83
+ 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}}
84
+
85
+ var css$3 = ".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}";
86
+ n(css$3,{});
87
+
88
+ var Breadcrumbs = function Breadcrumbs(_ref) {
89
+ var breadcrumbs = _ref.breadcrumbs,
90
+ _ref$hasTrailingSepar = _ref.hasTrailingSeparator,
91
+ hasTrailingSeparator = _ref$hasTrailingSepar === void 0 ? false : _ref$hasTrailingSepar;
92
+ return /*#__PURE__*/React.createElement("div", {
93
+ className: "neeto-molecules-breadcrumbs-wrap"
94
+ }, breadcrumbs.map(function (_ref2, index) {
95
+ var text = _ref2.text,
96
+ _ref2$link = _ref2.link,
97
+ link = _ref2$link === void 0 ? "#" : _ref2$link;
98
+ return /*#__PURE__*/React.createElement("div", {
99
+ className: "neeto-molecules-breadcrumb",
100
+ "data-cy": "header-breadcrumb",
101
+ key: index
102
+ }, /*#__PURE__*/React.createElement(Link, {
103
+ to: link
104
+ }, /*#__PURE__*/React.createElement(Typography, {
105
+ className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-breadcrumb-link",
106
+ component: "p",
107
+ "data-cy": text,
108
+ "data-test-id": text,
109
+ style: "body2",
110
+ weight: "normal"
111
+ }, text)), (index + 1 !== breadcrumbs.length || hasTrailingSeparator) && /*#__PURE__*/React.createElement(Typography, {
112
+ className: "neeto-molecules-breadcrumb-separator neeto-ui-text-gray-500",
113
+ component: "p",
114
+ "data-cy": "breadcrumb-divider-".concat(index),
115
+ "data-test-id": "breadcrumb-divider-".concat(index),
116
+ style: "body2",
117
+ weight: "normal"
118
+ }, "/"));
119
+ }));
120
+ };
121
+
122
+ var MIN_WIDTH = 150;
123
+
124
+ var DummySpan = function DummySpan(_ref) {
125
+ var name = _ref.name,
126
+ placeholderRef = _ref.placeholderRef,
127
+ setInputWidth = _ref.setInputWidth;
128
+ useEffect(function () {
129
+ var _placeholderRef$curre;
130
+ //To handle the input width on initial render.
131
+ var placeholderSpanWidth = (_placeholderRef$curre = placeholderRef.current) === null || _placeholderRef$curre === void 0 ? void 0 : _placeholderRef$curre.offsetWidth;
132
+ setInputWidth(placeholderSpanWidth);
133
+ }, [name]);
134
+ return (
135
+ /*#__PURE__*/
136
+ // Dummy element to calculate the width to be set for the input. Do not remove.
137
+ React.createElement("div", {
138
+ className: "dummy-span pointer-events-none invisible absolute",
139
+ ref: placeholderRef
140
+ }, name.split(" ").join("."))
141
+ );
142
+ };
143
+
144
+ var mergeRefs = function mergeRefs() {
145
+ for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
146
+ refs[_key] = arguments[_key];
147
+ }
148
+ return function (node) {
149
+ return refs.forEach(function (ref) {
150
+ return typeof ref === "function" ? ref(node) : ref.current = node;
151
+ });
152
+ };
153
+ };
154
+
155
+ var Editor = function Editor(_ref) {
156
+ var placeholder = _ref.placeholder,
157
+ inputWidth = _ref.inputWidth,
158
+ allowEmptySubmission = _ref.allowEmptySubmission,
159
+ name = _ref.name,
160
+ isLoading = _ref.isLoading,
161
+ handleRename = _ref.handleRename,
162
+ submitButtonProps = _ref.submitButtonProps,
163
+ handleClose = _ref.handleClose,
164
+ cancelButtonProps = _ref.cancelButtonProps,
165
+ setName = _ref.setName,
166
+ inputProps = _ref.inputProps,
167
+ editMode = _ref.editMode;
168
+ var closeRef = useHotKeys("escape", handleClose, {
169
+ mode: "scoped",
170
+ enabled: editMode
171
+ });
172
+ var submitRef = useHotKeys(["command+return", "return"], function (event) {
173
+ if (isEmpty(name) && !allowEmptySubmission) return;
174
+ handleRename(event, name);
175
+ }, {
176
+ mode: "scoped",
177
+ enabled: editMode
178
+ });
179
+ return /*#__PURE__*/React.createElement("div", {
180
+ className: "flex min-w-0 max-w-full flex-grow"
181
+ }, /*#__PURE__*/React.createElement(Input, _extends({
182
+ placeholder: placeholder,
183
+ autoFocus: true,
184
+ className: "neeto-molecules-rename__input flex-grow",
185
+ "data-cy": "form-rename-text-field",
186
+ "data-testid": "neeto-molecules-name-input",
187
+ ref: mergeRefs(closeRef, submitRef),
188
+ style: {
189
+ width: inputWidth
190
+ },
191
+ value: name,
192
+ suffix: /*#__PURE__*/React.createElement("div", {
193
+ className: "flex items-center justify-end"
194
+ }, /*#__PURE__*/React.createElement(Button, _extends({
195
+ className: "neeto-ui-rounded-none",
196
+ "data-cy": "form-rename-submit-button",
197
+ "data-testid": "neeto-molecules-rename-button",
198
+ disabled: !allowEmptySubmission && isEmpty(name) || isLoading,
199
+ icon: Check,
200
+ loading: isLoading,
201
+ style: "text",
202
+ onClick: function onClick(event) {
203
+ return handleRename(event, name);
204
+ }
205
+ }, submitButtonProps)), /*#__PURE__*/React.createElement(Button, _extends({
206
+ className: "neeto-ui-rounded-none",
207
+ "data-cy": "form-rename-close-button",
208
+ "data-testid": "neeto-molecules-cancel-button",
209
+ disabled: isLoading,
210
+ icon: Close,
211
+ style: "text",
212
+ onClick: handleClose
213
+ }, cancelButtonProps))),
214
+ onChange: withEventTargetValue(setName),
215
+ onClick: function onClick(event) {
216
+ return event.stopPropagation();
217
+ }
218
+ }, inputProps)));
219
+ };
220
+
221
+ 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}";
222
+ n(css$2,{});
223
+
224
+ function _arrayWithoutHoles(arr) {
225
+ if (Array.isArray(arr)) return _arrayLikeToArray(arr);
226
+ }
227
+
228
+ function _iterableToArray(iter) {
229
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
230
+ }
231
+
232
+ function _nonIterableSpread() {
233
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
234
+ }
235
+
236
+ function _toConsumableArray(arr) {
237
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
238
+ }
239
+
99
240
  function _objectWithoutPropertiesLoose(source, excluded) {
100
241
  if (source == null) return {};
101
242
  var target = {};
@@ -278,48 +419,91 @@ var MoreDropdown = function MoreDropdown(_ref) {
278
419
  }), menuBottomChildren));
279
420
  };
280
421
 
281
- var MIN_WIDTH = 150;
282
-
283
- var DummySpan = function DummySpan(_ref) {
284
- var name = _ref.name,
285
- placeholderRef = _ref.placeholderRef,
286
- setInputWidth = _ref.setInputWidth;
287
- useEffect(function () {
288
- var _placeholderRef$curre;
289
- //To handle the input width on initial render.
290
- var placeholderSpanWidth = (_placeholderRef$curre = placeholderRef.current) === null || _placeholderRef$curre === void 0 ? void 0 : _placeholderRef$curre.offsetWidth;
291
- setInputWidth(placeholderSpanWidth);
292
- }, [name]);
293
- return (
294
- /*#__PURE__*/
295
- // Dummy element to calculate the width to be set for the input. Do not remove.
296
- React.createElement("div", {
297
- className: "dummy-span pointer-events-none invisible absolute",
298
- ref: placeholderRef
299
- }, name.split(" ").join("."))
300
- );
301
- };
302
-
303
- 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}}
304
-
305
- 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: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}";
306
- n(css$2,{});
422
+ var RenameMenu = withT(function (_ref) {
423
+ var t = _ref.t,
424
+ handleRenameClick = _ref.handleRenameClick,
425
+ disabled = _ref.disabled,
426
+ dropdownItems = _ref.dropdownItems,
427
+ onArchive = _ref.onArchive,
428
+ onClone = _ref.onClone,
429
+ onDelete = _ref.onDelete;
430
+ return /*#__PURE__*/React.createElement(MoreDropdown, {
431
+ dropdownButtonProps: {
432
+ "data-testid": "neeto-molecules-menu-button"
433
+ },
434
+ dropdownProps: {
435
+ position: "bottom-start",
436
+ onClick: function onClick(event) {
437
+ return event.stopPropagation();
438
+ }
439
+ },
440
+ menuItems: [{
441
+ "data-cy": "form-rename-button",
442
+ onClick: handleRenameClick,
443
+ label: t("neetoMolecules.common.actions.rename"),
444
+ isVisible: !disabled,
445
+ key: "edit-name-menu"
446
+ }, {
447
+ "data-cy": "form-clone-button",
448
+ onClick: onClone,
449
+ label: t("neetoMolecules.common.actions.clone"),
450
+ isVisible: isPresent(onClone),
451
+ key: "clone-entity-menu"
452
+ }, {
453
+ "data-cy": "form-archive-button",
454
+ onClick: onArchive,
455
+ label: t("neetoMolecules.common.actions.archive"),
456
+ isVisible: isPresent(onArchive),
457
+ key: "archive-entity-menu"
458
+ }, {
459
+ "data-cy": "form-delete-button",
460
+ onClick: onDelete,
461
+ label: t("neetoMolecules.common.actions.delete"),
462
+ isVisible: isPresent(onDelete),
463
+ key: "delete-entity-menu"
464
+ }].concat(_toConsumableArray(dropdownItems))
465
+ });
466
+ });
307
467
 
308
- var mergeRefs = function mergeRefs() {
309
- for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
310
- refs[_key] = arguments[_key];
311
- }
312
- return function (node) {
313
- return refs.forEach(function (ref) {
314
- return typeof ref === "function" ? ref(node) : ref.current = node;
315
- });
316
- };
468
+ var ViewName = function ViewName(_ref) {
469
+ var disabled = _ref.disabled,
470
+ textProps = _ref.textProps,
471
+ formatText = _ref.formatText,
472
+ dropdownItems = _ref.dropdownItems,
473
+ hideMenu = _ref.hideMenu,
474
+ handleRenameClick = _ref.handleRenameClick,
475
+ onArchive = _ref.onArchive,
476
+ onClone = _ref.onClone,
477
+ onDelete = _ref.onDelete,
478
+ name = _ref.name;
479
+ var isDefaultMenuCallbacksPresent = isPresent(onArchive) || isPresent(onDelete) || isPresent(onClone);
480
+ var isMenuVisible = !hideMenu && (isNotEmpty(dropdownItems) || !disabled || isDefaultMenuCallbacksPresent);
481
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, _extends({
482
+ component: "p",
483
+ "data-cy": "form-title",
484
+ "data-testid": "neeto-molecules-value-display",
485
+ style: "body2",
486
+ className: classnames("neeto-molecules-rename__text neeto-molecules-rename__display-text w-full truncate", {
487
+ "cursor-pointer": !disabled,
488
+ "pointer-events-none cursor-text": disabled
489
+ }),
490
+ onClick: handleRenameClick
491
+ }, textProps), typeof formatText === "function" ? formatText(name) : name), isMenuVisible && /*#__PURE__*/React.createElement(RenameMenu, {
492
+ disabled: disabled,
493
+ dropdownItems: dropdownItems,
494
+ handleRenameClick: handleRenameClick,
495
+ onArchive: onArchive,
496
+ onClone: onClone,
497
+ onDelete: onDelete
498
+ }));
317
499
  };
318
500
 
319
501
  var Rename = function Rename(_ref) {
320
502
  var value = _ref.value,
321
- _ref$onRename = _ref.onRename,
322
- onRename = _ref$onRename === void 0 ? noop : _ref$onRename,
503
+ onRename = _ref.onRename,
504
+ onClone = _ref.onClone,
505
+ onArchive = _ref.onArchive,
506
+ onDelete = _ref.onDelete,
323
507
  _ref$isOpen = _ref.isOpen,
324
508
  isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
325
509
  _ref$isLoading = _ref.isLoading,
@@ -349,8 +533,6 @@ var Rename = function Rename(_ref) {
349
533
  _ref$defaultName = _ref.defaultName,
350
534
  defaultName = _ref$defaultName === void 0 ? "" : _ref$defaultName,
351
535
  formatText = _ref.formatText;
352
- var _useTranslation = useTranslation(),
353
- t = _useTranslation.t;
354
536
  var _useStateWithDependen = useStateWithDependency(value !== null && value !== void 0 ? value : ""),
355
537
  _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
356
538
  name = _useStateWithDependen2[0],
@@ -372,7 +554,7 @@ var Rename = function Rename(_ref) {
372
554
  event.stopPropagation();
373
555
  var newName = allowEmptySubmission && isEmpty(name) ? defaultName : name;
374
556
  setName(newName);
375
- onRename(newName);
557
+ onRename === null || onRename === void 0 ? void 0 : onRename(newName);
376
558
  setEditMode(false);
377
559
  };
378
560
  var handleClose = function handleClose(event) {
@@ -380,114 +562,47 @@ var Rename = function Rename(_ref) {
380
562
  setName(value);
381
563
  setEditMode(false);
382
564
  };
383
- var handleRenameButton = function handleRenameButton(event) {
565
+ var handleRenameClick = function handleRenameClick(event) {
384
566
  event.stopPropagation();
385
- setEditMode(true);
567
+ !disabled && setEditMode(true);
386
568
  };
387
- var handleDisplayText = function handleDisplayText(event) {
388
- event.stopPropagation();
389
- !disabled && setEditMode(!editMode);
569
+ var editNameProps = {
570
+ allowEmptySubmission: allowEmptySubmission,
571
+ cancelButtonProps: cancelButtonProps,
572
+ handleClose: handleClose,
573
+ handleRename: handleRename,
574
+ inputProps: inputProps,
575
+ inputWidth: inputWidth,
576
+ isLoading: isLoading,
577
+ name: name,
578
+ placeholder: placeholder,
579
+ setName: setName,
580
+ submitButtonProps: submitButtonProps,
581
+ editMode: editMode
582
+ };
583
+ var viewNameProps = {
584
+ disabled: disabled,
585
+ dropdownItems: dropdownItems,
586
+ formatText: formatText,
587
+ handleRenameClick: handleRenameClick,
588
+ hideMenu: hideMenu,
589
+ name: name,
590
+ onArchive: onArchive,
591
+ onClone: onClone,
592
+ onDelete: onDelete,
593
+ textProps: textProps
390
594
  };
391
- var closeRef = useHotKeys("escape", handleClose, {
392
- mode: "scoped",
393
- enabled: editMode
394
- });
395
- var submitRef = useHotKeys(["command+return", "return"], function (event) {
396
- if (isEmpty(name) && !allowEmptySubmission) return;
397
- handleRename(event, name);
398
- }, {
399
- mode: "scoped",
400
- enabled: editMode
401
- });
402
595
  return /*#__PURE__*/React.createElement("div", {
403
596
  ref: renameRef,
404
597
  className: classnames("flex min-w-0 max-w-md flex-row items-center", className)
405
- }, breadcrumbs.map(function (_ref2) {
406
- var text = _ref2.text,
407
- link = _ref2.link;
408
- return /*#__PURE__*/React.createElement(Fragment, {
409
- key: text
410
- }, /*#__PURE__*/React.createElement(Link, _extends({
411
- className: "neeto-molecules-rename__text neeto-molecules-rename__breadcrumb-text",
412
- "data-testid": "neeto-molecules-value-display",
413
- to: link
414
- }, textProps), text), /*#__PURE__*/React.createElement(Typography, {
415
- className: "neeto-molecules-rename__breadcrumb-text neeto-molecules-breadcrumb__divider",
416
- component: "span"
417
- }, "/"));
598
+ }, isNotEmpty(breadcrumbs) && /*#__PURE__*/React.createElement(Breadcrumbs, {
599
+ breadcrumbs: breadcrumbs,
600
+ hasTrailingSeparator: true
418
601
  }), /*#__PURE__*/React.createElement(DummySpan, {
419
602
  name: name,
420
603
  placeholderRef: placeholderRef,
421
604
  setInputWidth: setInputWidth
422
- }), editMode ? /*#__PURE__*/React.createElement("div", {
423
- className: "flex min-w-0 max-w-full flex-grow"
424
- }, /*#__PURE__*/React.createElement(Input, _extends({
425
- autoFocus: true,
426
- className: "neeto-molecules-rename__input flex-grow",
427
- "data-cy": "form-rename-text-field",
428
- "data-testid": "neeto-molecules-name-input",
429
- onClick: function onClick(event) {
430
- return event.stopPropagation();
431
- },
432
- placeholder: placeholder,
433
- ref: mergeRefs(closeRef, submitRef),
434
- style: {
435
- width: inputWidth
436
- },
437
- value: name,
438
- suffix: /*#__PURE__*/React.createElement("div", {
439
- className: "flex items-center justify-end"
440
- }, /*#__PURE__*/React.createElement(Button, _extends({
441
- className: "neeto-ui-rounded-none",
442
- "data-cy": "form-rename-submit-button",
443
- "data-testid": "neeto-molecules-rename-button",
444
- icon: Check,
445
- loading: isLoading,
446
- style: "text",
447
- disabled: !allowEmptySubmission && isEmpty(name) || isLoading,
448
- onClick: function onClick(event) {
449
- return handleRename(event, name);
450
- }
451
- }, submitButtonProps)), /*#__PURE__*/React.createElement(Button, _extends({
452
- className: "neeto-ui-rounded-none",
453
- "data-cy": "form-rename-close-button",
454
- "data-testid": "neeto-molecules-cancel-button",
455
- disabled: isLoading,
456
- icon: Close,
457
- style: "text",
458
- onClick: handleClose
459
- }, cancelButtonProps))),
460
- onChange: function onChange(event) {
461
- return setName(event.target.value);
462
- }
463
- }, inputProps))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, _extends({
464
- component: "p",
465
- "data-cy": "form-title",
466
- "data-testid": "neeto-molecules-value-display",
467
- style: "body2",
468
- className: classnames("neeto-molecules-rename__text neeto-molecules-rename__display-text w-full truncate", {
469
- "cursor-pointer": !disabled,
470
- "pointer-events-none cursor-text": disabled
471
- }),
472
- onClick: handleDisplayText
473
- }, textProps), typeof formatText === "function" ? formatText(name) : name), !hideMenu && (isNotEmpty(dropdownItems) || !disabled) && /*#__PURE__*/React.createElement(MoreDropdown, {
474
- dropdownButtonProps: {
475
- "data-testid": "neeto-molecules-menu-button"
476
- },
477
- dropdownProps: {
478
- position: "bottom-start",
479
- onClick: function onClick(event) {
480
- return event.stopPropagation();
481
- }
482
- },
483
- menuItems: [{
484
- "data-cy": "form-rename-button",
485
- onClick: handleRenameButton,
486
- label: t("neetoMolecules.common.actions.rename"),
487
- isVisible: !disabled,
488
- key: "edit-name-menu"
489
- }].concat(_toConsumableArray(dropdownItems))
490
- })));
605
+ }), editMode ? /*#__PURE__*/React.createElement(Editor, editNameProps) : /*#__PURE__*/React.createElement(ViewName, viewNameProps));
491
606
  };
492
607
 
493
608
  var DEFAULT_HOME_BUTTON_PROPS = {