intelicoreact 1.4.10 → 1.4.11

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.
Files changed (12) hide show
  1. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +2 -1
  2. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +5 -0
  3. package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.js +2 -1
  4. package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.scss +5 -0
  5. package/dist/Atomic/FormElements/Input/Input.js +9 -3
  6. package/dist/Atomic/FormElements/TagListToDropdown/TagListToDropdown.js +125 -0
  7. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +503 -258
  8. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss +256 -7
  9. package/dist/Atomic/UI/Tag/Tag.js +2 -4
  10. package/dist/Atomic/UI/TagList/TagList.js +54 -38
  11. package/dist/Atomic/UI/TagList/TagList.scss +15 -0
  12. package/package.json +1 -1
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js CHANGED
@@ -15,6 +15,7 @@ var _useDebounce = require("../../../Functions/useDebounce");
15
15
  var _useIsMobile = _interopRequireDefault(require("../../../Functions/useIsMobile"));
16
16
  var _CheckboxInput = _interopRequireDefault(require("../../FormElements/CheckboxInput/CheckboxInput"));
17
17
  var _Input = _interopRequireDefault(require("../../FormElements/Input/Input"));
18
+ var _Button = _interopRequireDefault(require("../../UI/Button/Button"));
18
19
  var _Tag = _interopRequireDefault(require("../../UI/Tag/Tag"));
19
20
  var _TagList = _interopRequireDefault(require("../../UI/TagList/TagList"));
20
21
  require("./TagsDropdown.scss");
@@ -22,10 +23,11 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
22
23
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
23
24
  const RC = "tags-dropdown";
24
25
  const MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
26
+ const COLORS = ["#F1F0F0", "#E3E2E0", "#EEDFDA", "#F9DEC9", "#FDECC8", "#DBECDB", "#D3E4EF", "#E8DEEE", "#F4E0E9", "#FFE2DD", "#D3EFED", "#ECEEDE"];
25
27
  const TagsDropdown = _ref => {
26
- var _Object$keys, _dropdownListWrapperR, _dropdownListRef$curr5, _dropdownListRef$curr6;
28
+ var _Object$keys, _dropdownListWrapperR2, _dropdownListRef$curr7, _dropdownListRef$curr8;
27
29
  let {
28
- options,
30
+ options: optionsProp,
29
31
  chosenOptions = [],
30
32
  onChange,
31
33
  className,
@@ -59,20 +61,33 @@ const TagsDropdown = _ref => {
59
61
  doRequest: doLiveSearchRequest,
60
62
  attributesOfNativeInput = {},
61
63
  withMobileLogic,
62
- minItemsForShowMobileSearch = MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH
64
+ withCreateLogic,
65
+ withActions,
66
+ withSearchInputInList,
67
+ renderOptionsAsTags,
68
+ minItemsForShowMobileSearch = MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH,
69
+ onOptionCreate,
70
+ onOptionEdit,
71
+ onOptionDelete,
72
+ onActionConfirmClick,
73
+ onActionCancelClick,
74
+ onDropdownListClose,
75
+ customTriggerRef,
76
+ renderCustomTrigger,
77
+ recalculateListContainerStylesTrigger
63
78
  } = _ref;
79
+ const inputRef = (0, _react.useRef)(null);
80
+ const wrapperRef = (0, _react.useRef)(null);
81
+ const dropdownRef = (0, _react.useRef)(null);
82
+ const dropdownListRef = (0, _react.useRef)(null);
83
+ const editOptionModalRef = (0, _react.useRef)(null);
84
+ const dropdownListWrapperRef = (0, _react.useRef)(null);
64
85
  const {
65
86
  isMobile: isMobileProp
66
87
  } = (0, _useIsMobile.default)();
67
88
  const isMobile = isMobileProp && withMobileLogic && window.screen.width <= 768;
68
89
  const [dropdownId] = (0, _react.useState)(id || fieldKey || Math.random().toString(16).slice(2));
69
90
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
70
- const [searchValue, setSearchValue] = (0, _react.useState)("");
71
- const dropdownRef = (0, _react.useRef)(null);
72
- const dropdownListRef = (0, _react.useRef)(null);
73
- const dropdownListWrapperRef = (0, _react.useRef)(null);
74
- const inputRef = (0, _react.useRef)(null);
75
- const wrapperRef = (0, _react.useRef)(null);
76
91
  const [initListHeight, setInitListHeight] = (0, _react.useState)(null);
77
92
  const [isScrollableList, setIsScrollableList] = (0, _react.useState)(null);
78
93
  const [isFixedMaxHeight, setIsFixedMaxHeight] = (0, _react.useState)(false);
@@ -82,9 +97,25 @@ const TagsDropdown = _ref => {
82
97
  searchValue,
83
98
  delay: 600
84
99
  });
85
- const [isValueDeleted, setIsValueDeleted] = (0, _react.useState)(false);
86
100
  const searchValueRef = (0, _react.useRef)(null);
101
+ const [searchValue, setSearchValue] = (0, _react.useState)("");
102
+ const setSearchValueInterceptor = value => {
103
+ setSearchValue(value);
104
+ setIsValueDeleted(searchValue !== value && value === "");
105
+ searchValueRef.current = value;
106
+ };
107
+ const [options, setOptions] = (0, _react.useState)([]);
108
+ const [editingOption, setEditingOption] = (0, _react.useState)(null);
109
+ const [isValueDeleted, setIsValueDeleted] = (0, _react.useState)(false);
87
110
  const [localOptionsStore, setLocalOptionsStore] = (0, _react.useState)({});
111
+ const randomColorForNewOption = (0, _react.useMemo)(() => {
112
+ const getRandomIndex = (min, max) => {
113
+ return Math.floor(Math.random() * (max - min + 1)) + min;
114
+ };
115
+ const randomIndex = getRandomIndex(0, COLORS.length - 1);
116
+ return COLORS[randomIndex];
117
+ // eslint-disable-next-line react-hooks/exhaustive-deps
118
+ }, [options.length]);
88
119
  const singleLevelOptions = options === null || options === void 0 ? void 0 : options.reduce((acc, item) => {
89
120
  const checkUniqAndPush = (acc, item) => {
90
121
  const isExist = acc === null || acc === void 0 ? void 0 : acc.findIndex(_ref2 => {
@@ -110,29 +141,66 @@ const TagsDropdown = _ref => {
110
141
  value,
111
142
  label: localOptionsStore === null || localOptionsStore === void 0 ? void 0 : localOptionsStore[value]
112
143
  })));
113
- const setSearchValueInterceptor = value => {
114
- setSearchValue(value);
115
- setIsValueDeleted(searchValue !== value && value === "");
116
- searchValueRef.current = value;
117
- };
118
- const doScrollCallback = (0, _react.useCallback)(e => {
119
- if (doLiveSearchRequest && typeof doLiveSearchRequest === "function") {
120
- if (Math.round(e.target.clientHeight + e.target.scrollTop) == e.target.scrollHeight) {
121
- doLiveSearchRequest(searchValueRef.current, true);
122
- }
123
- }
124
- }, [options]);
125
- const handleClickOutside = _ref3 => {
126
- var _getListContainer;
127
- let {
144
+
145
+ // --- GENERAL FUNCTIONS BEGIN --- //
146
+ const handleClickOutside = e => {
147
+ var _editOptionModalRef$c, _getListContainer, _customTriggerRef$cur, _customTriggerRef$cur2;
148
+ const {
128
149
  target
129
- } = _ref3;
130
- if (
131
- // eslint-disable-next-line no-use-before-define
132
- !((_getListContainer = getListContainer()) !== null && _getListContainer !== void 0 && _getListContainer.contains(target)) /* && !isTargetInParent(target) */) {
150
+ } = e;
151
+ if (editOptionModalRef.current && !((_editOptionModalRef$c = editOptionModalRef.current) !== null && _editOptionModalRef$c !== void 0 && _editOptionModalRef$c.contains(target)) && !document.getElementById(editingOption === null || editingOption === void 0 ? void 0 : editingOption.value).contains(target)) {
152
+ saveEditingOption();
153
+ } else if (!((_getListContainer = getListContainer()) !== null && _getListContainer !== void 0 && _getListContainer.contains(target)) && isOpen && (!(customTriggerRef !== null && customTriggerRef !== void 0 && customTriggerRef.current) || !(customTriggerRef !== null && customTriggerRef !== void 0 && (_customTriggerRef$cur = customTriggerRef.current) !== null && _customTriggerRef$cur !== void 0 && _customTriggerRef$cur.contains(target))) || customTriggerRef !== null && customTriggerRef !== void 0 && (_customTriggerRef$cur2 = customTriggerRef.current) !== null && _customTriggerRef$cur2 !== void 0 && _customTriggerRef$cur2.isEqualNode(target)) {
133
154
  setIsOpen(false);
155
+ onDropdownListClose === null || onDropdownListClose === void 0 || onDropdownListClose(e);
134
156
  }
135
157
  };
158
+ const closeList = e => {
159
+ var _inputRef$current;
160
+ handleClickOutside(e);
161
+ if (!e.target.isEqualNode(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
162
+ };
163
+ const isTargetInParent = target => {
164
+ var _target$className, _target$className$ind, _target$className2, _target$className2$in;
165
+ if ((target === null || target === void 0 ? void 0 : target.tagName) === "svg" && (target === null || target === void 0 ? void 0 : target.parentNodclassName) === "tag__button" || (target === null || target === void 0 ? void 0 : target.tagName) === "line") return false;
166
+ if ((target === null || target === void 0 ? void 0 : target.tagName) === "svg" && (target === null || target === void 0 ? void 0 : target.parentNodclassName) !== "tag__button" || (target === null || target === void 0 || (_target$className = target.className) === null || _target$className === void 0 || (_target$className$ind = _target$className.indexOf) === null || _target$className$ind === void 0 ? void 0 : _target$className$ind.call(_target$className, "tag__label")) !== -1 || (target === null || target === void 0 || (_target$className2 = target.className) === null || _target$className2 === void 0 || (_target$className2$in = _target$className2.indexOf) === null || _target$className2$in === void 0 ? void 0 : _target$className2$in.call(_target$className2, "tag-list_wrapper")) !== -1 || (target === null || target === void 0 ? void 0 : target.className) === "".concat(RC, "__trigger") || (target === null || target === void 0 ? void 0 : target.className) === "tags-dropdown__arrow") return true;
167
+ return false;
168
+ };
169
+ const isItemMatchesSearch = item => {
170
+ const title = item.title || item.label;
171
+ return searchValue.length ? title.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || "") : true;
172
+ };
173
+ // --- GENERAL FUNCTIONS END --- //
174
+
175
+ const prepareOptions = options => {
176
+ return options === null || options === void 0 ? void 0 : options.map(option => option !== null && option !== void 0 && option.groupName ? option === null || option === void 0 ? void 0 : option.list : option).flat();
177
+ };
178
+ const getFilteredOptions = options => options === null || options === void 0 ? void 0 : options.reduce((result, option) => {
179
+ if (option.groupName) {
180
+ var _option$list;
181
+ const filteredGroupItems = option === null || option === void 0 || (_option$list = option.list) === null || _option$list === void 0 ? void 0 : _option$list.filter(item => isItemMatchesSearch(item));
182
+ if (filteredGroupItems !== null && filteredGroupItems !== void 0 && filteredGroupItems.length) {
183
+ result.push({
184
+ ...option,
185
+ list: filteredGroupItems
186
+ });
187
+ }
188
+ } else if (isItemMatchesSearch(option)) {
189
+ result.push(option);
190
+ }
191
+ return result;
192
+ }, []);
193
+ const getTotalOptions = (0, _react.useCallback)(() => {
194
+ return options === null || options === void 0 ? void 0 : options.reduce((result, item) => {
195
+ if (item !== null && item !== void 0 && item.list) {
196
+ var _item$list2;
197
+ result += (item === null || item === void 0 || (_item$list2 = item.list) === null || _item$list2 === void 0 ? void 0 : _item$list2.length) || 0;
198
+ } else {
199
+ ++result;
200
+ }
201
+ return result;
202
+ }, 0);
203
+ }, [options]);
136
204
  const deleteChosen = value => {
137
205
  if (isMobile ? closeOnRemoveMobile : closeOnRemove) setIsOpen(false);
138
206
  setLocalOptionsStore(options => ({
@@ -170,81 +238,27 @@ const TagsDropdown = _ref => {
170
238
  setIsOpen(false);
171
239
  }
172
240
  };
173
- const getMarkupForElement = item => {
174
- var _title$toString, _item$customMobileIco;
175
- const {
176
- description
177
- } = item;
178
- const title = item.title || item.label;
179
- const hightlightSearchValue = title => {
180
- var _title$toLowerCase;
181
- const index = (_title$toLowerCase = title.toLowerCase()) === null || _title$toLowerCase === void 0 ? void 0 : _title$toLowerCase.indexOf(searchValue.toLowerCase());
182
- if (index === -1) return title;
183
- return /*#__PURE__*/_react.default.createElement("pre", {
184
- className: "inherit-styles"
185
- }, /*#__PURE__*/_react.default.createElement("span", null, title.substring(0, index)), /*#__PURE__*/_react.default.createElement("span", {
186
- className: "search-match bg--yellow"
187
- }, title.substring(index, index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length))), /*#__PURE__*/_react.default.createElement("span", null, title.substring(index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length))));
188
- };
189
- return /*#__PURE__*/_react.default.createElement("button", {
190
- key: title === null || title === void 0 || (_title$toString = title.toString()) === null || _title$toString === void 0 ? void 0 : _title$toString.replace(/ /g, "_"),
191
- onClick: e => {
192
- e.preventDefault();
193
- e.stopPropagation();
194
- onChangeHandler(item);
195
- },
196
- className: (0, _classnames.default)("".concat(RC, "__list-item"), {
197
- ["".concat(RC, "__list-item_active")]: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(value => value === item.value)
198
- }, {
199
- ["".concat(RC, "__list-item_disabled")]: item.disabled
200
- }, {
201
- ["".concat(RC, "__list-item_freezed")]: item === null || item === void 0 ? void 0 : item.isFreezed
202
- }, item.className)
203
- }, !isMobile && /*#__PURE__*/_react.default.createElement("span", {
204
- className: (0, _classnames.default)("".concat(RC, "__active-icon"), {
205
- ["".concat(RC, "__active-icon_active")]: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(value => value === item.value)
206
- })
207
- }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, {
208
- width: 16,
209
- height: 16,
210
- className: "color--text"
211
- })), /*#__PURE__*/_react.default.createElement("div", {
212
- className: (0, _classnames.default)("".concat(RC, "__list-item-body"))
213
- }, /*#__PURE__*/_react.default.createElement("span", {
214
- className: (0, _classnames.default)("".concat(RC, "__list-item-title"), item.labelClassName)
215
- }, hightlightSearchValue(title)), description && /*#__PURE__*/_react.default.createElement("span", {
216
- className: (0, _classnames.default)("".concat(RC, "__list-item-description"))
217
- }, description)), isMobile ? (_item$customMobileIco = item === null || item === void 0 ? void 0 : item.customMobileIcon) !== null && _item$customMobileIco !== void 0 ? _item$customMobileIco : /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
218
- value: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(value => value === item.value),
219
- onChange: () => {
220
- onChangeHandler(item);
221
- }
222
- }) : "");
223
- };
224
- const prepareOptions = options => {
225
- return options === null || options === void 0 ? void 0 : options.map(option => option !== null && option !== void 0 && option.groupName ? option === null || option === void 0 ? void 0 : option.list : option).flat();
226
- };
227
241
  const selectAllItems = () => {
228
242
  var _prepareOptions;
229
- const preparedOptions = (_prepareOptions = prepareOptions(options)) === null || _prepareOptions === void 0 ? void 0 : _prepareOptions.filter(_ref4 => {
243
+ const preparedOptions = (_prepareOptions = prepareOptions(options)) === null || _prepareOptions === void 0 ? void 0 : _prepareOptions.filter(_ref3 => {
230
244
  let {
231
245
  isFreezed,
232
246
  value
233
- } = _ref4;
247
+ } = _ref3;
234
248
  return !isFreezed && !(chosenOptions !== null && chosenOptions !== void 0 && chosenOptions.includes(value)) && value !== "open_modal";
235
249
  });
236
- setLocalOptionsStore(options => preparedOptions === null || preparedOptions === void 0 ? void 0 : preparedOptions.reduce((result, _ref5) => {
250
+ setLocalOptionsStore(options => preparedOptions === null || preparedOptions === void 0 ? void 0 : preparedOptions.reduce((result, _ref4) => {
237
251
  let {
238
252
  value,
239
253
  label
240
- } = _ref5;
254
+ } = _ref4;
241
255
  result[value] = label;
242
256
  return result;
243
257
  }, options));
244
- onChange([...chosenOptions, ...((preparedOptions === null || preparedOptions === void 0 ? void 0 : preparedOptions.map(_ref6 => {
258
+ onChange([...chosenOptions, ...((preparedOptions === null || preparedOptions === void 0 ? void 0 : preparedOptions.map(_ref5 => {
245
259
  let {
246
260
  value
247
- } = _ref6;
261
+ } = _ref5;
248
262
  return value;
249
263
  })) || [])], "chosenOptions");
250
264
  if (isMobile ? closeOnSelectAllMobile : closeOnSelectAll) setIsOpen(false);
@@ -253,18 +267,27 @@ const TagsDropdown = _ref => {
253
267
  setLocalOptionsStore({});
254
268
  onChange(chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.filter(item => {
255
269
  var _prepareOptions2;
256
- return (_prepareOptions2 = prepareOptions(options)) === null || _prepareOptions2 === void 0 || (_prepareOptions2 = _prepareOptions2.find(_ref7 => {
270
+ return (_prepareOptions2 = prepareOptions(options)) === null || _prepareOptions2 === void 0 || (_prepareOptions2 = _prepareOptions2.find(_ref6 => {
257
271
  let {
258
272
  value
259
- } = _ref7;
273
+ } = _ref6;
260
274
  return value === item;
261
275
  })) === null || _prepareOptions2 === void 0 ? void 0 : _prepareOptions2.isFreezed;
262
276
  }), "chosenOptions");
263
277
  if (isMobile ? closeOnRemoveAllMobile : closeOnRemoveAll) setIsOpen(false);
264
278
  };
279
+ const doScrollCallback = (0, _react.useCallback)(e => {
280
+ if (doLiveSearchRequest && typeof doLiveSearchRequest === "function") {
281
+ if (Math.round(e.target.clientHeight + e.target.scrollTop) == e.target.scrollHeight) {
282
+ doLiveSearchRequest(searchValueRef.current, true);
283
+ }
284
+ }
285
+ }, [options]);
286
+
287
+ // --- LIST CONTAINER FUNCTIONS BEGIN --- //
265
288
  const getParentNode = () => {
266
- var _ref8, _document$querySelect;
267
- return (_ref8 = (_document$querySelect = document.querySelector("div#root")) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("div#app")) !== null && _ref8 !== void 0 ? _ref8 : document.querySelector("div#storybook-root");
289
+ var _ref7, _document$querySelect;
290
+ return (_ref7 = (_document$querySelect = document.querySelector("div#root")) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("div#app")) !== null && _ref7 !== void 0 ? _ref7 : document.querySelector("div#storybook-root");
268
291
  };
269
292
  const initListContainer = () => {
270
293
  const dropdownList = document.createElement("div");
@@ -339,42 +362,213 @@ const TagsDropdown = _ref => {
339
362
  // eslint-disable-next-line no-use-before-define
340
363
  return /*#__PURE__*/(0, _reactDom.createPortal)(getListMarkUp(), lc);
341
364
  };
342
- const isTargetInParent = target => {
343
- var _target$className, _target$className$ind, _target$className2, _target$className2$in;
344
- if ((target === null || target === void 0 ? void 0 : target.tagName) === "svg" && (target === null || target === void 0 ? void 0 : target.parentNodclassName) === "tag__button" || (target === null || target === void 0 ? void 0 : target.tagName) === "line") return false;
345
- if ((target === null || target === void 0 ? void 0 : target.tagName) === "svg" && (target === null || target === void 0 ? void 0 : target.parentNodclassName) !== "tag__button" || (target === null || target === void 0 || (_target$className = target.className) === null || _target$className === void 0 || (_target$className$ind = _target$className.indexOf) === null || _target$className$ind === void 0 ? void 0 : _target$className$ind.call(_target$className, "tag__label")) !== -1 || (target === null || target === void 0 || (_target$className2 = target.className) === null || _target$className2 === void 0 || (_target$className2$in = _target$className2.indexOf) === null || _target$className2$in === void 0 ? void 0 : _target$className2$in.call(_target$className2, "tag-list_wrapper")) !== -1 || (target === null || target === void 0 ? void 0 : target.className) === "".concat(RC, "__trigger") || (target === null || target === void 0 ? void 0 : target.className) === "tags-dropdown__arrow") return true;
346
- return false;
365
+ // --- LIST CONTAINER FUNCTIONS END --- //
366
+
367
+ // --- CREATABLE LOGIC BEGIN --- //
368
+ const onOptionCreateClick = () => {
369
+ const tempId = Math.random().toString(16).slice(2);
370
+ const newOption = {
371
+ label: searchValue,
372
+ value: tempId,
373
+ style: {
374
+ backgroundColor: randomColorForNewOption
375
+ },
376
+ isEditable: true,
377
+ ref: /*#__PURE__*/(0, _react.createRef)()
378
+ };
379
+ setOptions(state => [...state, newOption]);
380
+ setSearchValue("");
381
+ onChangeHandler({
382
+ value: tempId,
383
+ label: searchValue
384
+ });
385
+ onOptionCreate === null || onOptionCreate === void 0 || onOptionCreate(newOption);
347
386
  };
348
- const isItemMatchesSearch = item => {
349
- const title = item.title || item.label;
350
- return searchValue.length ? title.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || "") : true;
387
+ const onOptionEditClick = (e, item) => {
388
+ e === null || e === void 0 || e.preventDefault();
389
+ e === null || e === void 0 || e.stopPropagation();
390
+ setEditingOption((editingOption === null || editingOption === void 0 ? void 0 : editingOption.value) === (item === null || item === void 0 ? void 0 : item.value) ? null : item);
351
391
  };
352
- const getFilteredOptions = options => options === null || options === void 0 ? void 0 : options.reduce((result, option) => {
353
- if (option.groupName) {
354
- var _option$list;
355
- const filteredGroupItems = option === null || option === void 0 || (_option$list = option.list) === null || _option$list === void 0 ? void 0 : _option$list.filter(item => isItemMatchesSearch(item));
356
- if (filteredGroupItems !== null && filteredGroupItems !== void 0 && filteredGroupItems.length) {
357
- result.push({
358
- ...option,
359
- list: filteredGroupItems
360
- });
392
+ const onOptionDeleteClick = () => {
393
+ var _onOptionDelete;
394
+ ((_onOptionDelete = onOptionDelete === null || onOptionDelete === void 0 ? void 0 : onOptionDelete(editingOption)) !== null && _onOptionDelete !== void 0 ? _onOptionDelete : new Promise(r => r())).then(() => {
395
+ deleteChosen(editingOption === null || editingOption === void 0 ? void 0 : editingOption.value);
396
+ setOptions(options => options.filter(_ref8 => {
397
+ let {
398
+ value
399
+ } = _ref8;
400
+ return value !== (editingOption === null || editingOption === void 0 ? void 0 : editingOption.value);
401
+ }));
402
+ setEditingOption(null);
403
+ });
404
+ };
405
+ const saveEditingOption = () => {
406
+ onOptionEdit === null || onOptionEdit === void 0 || onOptionEdit(editingOption);
407
+ setOptions(options => options.map(option => {
408
+ if (editingOption && option.value === (editingOption === null || editingOption === void 0 ? void 0 : editingOption.value)) {
409
+ const tmp = {
410
+ ...editingOption
411
+ };
412
+ setEditingOption(null);
413
+ return tmp;
361
414
  }
362
- } else if (isItemMatchesSearch(option)) {
363
- result.push(option);
415
+ return option;
416
+ }));
417
+ };
418
+ const setEditOptionModalStyles = () => {
419
+ var _editingOption$ref, _el$getBoundingClient, _dropdownListWrapperR;
420
+ if (!editingOption || !(editOptionModalRef !== null && editOptionModalRef !== void 0 && editOptionModalRef.current)) return null;
421
+ const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
422
+ const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
423
+ console.log({
424
+ windowHeight,
425
+ windowWidth
426
+ });
427
+ const el = editingOption === null || editingOption === void 0 || (_editingOption$ref = editingOption.ref) === null || _editingOption$ref === void 0 ? void 0 : _editingOption$ref.current;
428
+ const {
429
+ top,
430
+ bottom,
431
+ left,
432
+ right,
433
+ width,
434
+ height
435
+ } = (_el$getBoundingClient = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) !== null && _el$getBoundingClient !== void 0 ? _el$getBoundingClient : {};
436
+ const containerPosition = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 || (_dropdownListWrapperR = dropdownListWrapperRef.current) === null || _dropdownListWrapperR === void 0 ? void 0 : _dropdownListWrapperR.getBoundingClientRect();
437
+ if ((containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.right) > (containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.left) || (containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.right) >= 182) {
438
+ editOptionModalRef.current.style.left = "".concat(width - 50, "px");
439
+ } else {
440
+ editOptionModalRef.current.style.right = "".concat(right - width - 12, "px");
364
441
  }
365
- return result;
366
- }, []);
367
- const getTotalOptions = (0, _react.useCallback)(() => {
368
- return options === null || options === void 0 ? void 0 : options.reduce((result, item) => {
369
- if (item !== null && item !== void 0 && item.list) {
370
- var _item$list2;
371
- result += (item === null || item === void 0 || (_item$list2 = item.list) === null || _item$list2 === void 0 ? void 0 : _item$list2.length) || 0;
372
- } else {
373
- ++result;
442
+
443
+ // console.log(containerPosition.top, {
444
+ // top,
445
+ // bottom,
446
+ // left,
447
+ // right,
448
+ // width,
449
+ // height,
450
+ // });
451
+
452
+ editOptionModalRef.current.style.top = "".concat(top - height, "px");
453
+
454
+ // if (containerPosition?.top + top <= 173) {
455
+ // editOptionModalRef.current.style.top = `${top - height}px`;
456
+ // } else {
457
+ // editOptionModalRef.current.style.bottom = `${bottom - height}px`;
458
+ // }
459
+ };
460
+ const renderEditOptionModal = () => {
461
+ return /*#__PURE__*/_react.default.createElement("div", {
462
+ ref: editOptionModalRef,
463
+ className: (0, _classnames.default)("".concat(RC, "__edit-option-modal"))
464
+ }, /*#__PURE__*/_react.default.createElement("div", {
465
+ className: (0, _classnames.default)("".concat(RC, "__edit-option-modal-section"))
466
+ }, /*#__PURE__*/_react.default.createElement(_Input.default, {
467
+ value: editingOption.label,
468
+ onChange: v => setEditingOption(state => ({
469
+ ...state,
470
+ label: v
471
+ })),
472
+ onKeyDown: keyCode => {
473
+ if (keyCode === 13) saveEditingOption();
374
474
  }
375
- return result;
376
- }, 0);
377
- }, [options]);
475
+ }), /*#__PURE__*/_react.default.createElement(_Button.default, {
476
+ variant: "link",
477
+ icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Trash2, null),
478
+ label: "Delete",
479
+ onClick: onOptionDeleteClick
480
+ })), /*#__PURE__*/_react.default.createElement("div", {
481
+ className: (0, _classnames.default)("".concat(RC, "__edit-option-modal-section-divider"))
482
+ }), /*#__PURE__*/_react.default.createElement("div", {
483
+ className: (0, _classnames.default)("".concat(RC, "__edit-option-modal-section"))
484
+ }, /*#__PURE__*/_react.default.createElement("h3", null, "Colors"), /*#__PURE__*/_react.default.createElement("div", {
485
+ className: (0, _classnames.default)("".concat(RC, "__edit-option-modal-section-colors"))
486
+ }, COLORS.map(color => {
487
+ var _editingOption$style;
488
+ return /*#__PURE__*/_react.default.createElement("div", {
489
+ className: "color-block",
490
+ style: {
491
+ backgroundColor: color
492
+ },
493
+ onClick: () => setEditingOption(state => ({
494
+ ...state,
495
+ style: {
496
+ ...state.style,
497
+ backgroundColor: color
498
+ }
499
+ }))
500
+ }, (editingOption === null || editingOption === void 0 || (_editingOption$style = editingOption.style) === null || _editingOption$style === void 0 ? void 0 : _editingOption$style.backgroundColor) === color ? /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null) : null);
501
+ }))));
502
+ };
503
+ // --- CREATABLE LOGIC END --- //
504
+
505
+ // --- RENDER FUNCTIONS BEGIN --- //
506
+ const getMarkupForElement = item => {
507
+ var _title$toString, _item$customMobileIco;
508
+ const {
509
+ description
510
+ } = item;
511
+ const title = item.title || item.label;
512
+ const hightlightSearchValue = title => {
513
+ var _title$toLowerCase;
514
+ const index = (_title$toLowerCase = title.toLowerCase()) === null || _title$toLowerCase === void 0 ? void 0 : _title$toLowerCase.indexOf(searchValue.toLowerCase());
515
+ if (index === -1) return title;
516
+ return /*#__PURE__*/_react.default.createElement("pre", {
517
+ className: "inherit-styles"
518
+ }, /*#__PURE__*/_react.default.createElement("span", null, title.substring(0, index)), /*#__PURE__*/_react.default.createElement("span", {
519
+ className: "search-match bg--yellow"
520
+ }, title.substring(index, index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length))), /*#__PURE__*/_react.default.createElement("span", null, title.substring(index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length))));
521
+ };
522
+ return /*#__PURE__*/_react.default.createElement("button", {
523
+ ref: item === null || item === void 0 ? void 0 : item.ref,
524
+ key: title === null || title === void 0 || (_title$toString = title.toString()) === null || _title$toString === void 0 ? void 0 : _title$toString.replace(/ /g, "_"),
525
+ onClick: e => {
526
+ e.preventDefault();
527
+ e.stopPropagation();
528
+ onChangeHandler(item);
529
+ },
530
+ className: (0, _classnames.default)("".concat(RC, "__list-item"), {
531
+ ["".concat(RC, "__list-item_active")]: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(value => value === item.value)
532
+ }, {
533
+ ["".concat(RC, "__list-item_disabled")]: item.disabled
534
+ }, {
535
+ ["".concat(RC, "__list-item_freezed")]: item === null || item === void 0 ? void 0 : item.isFreezed
536
+ }, {
537
+ ["".concat(RC, "__list-item--editing")]: (item === null || item === void 0 ? void 0 : item.value) === (editingOption === null || editingOption === void 0 ? void 0 : editingOption.value)
538
+ }, item.className)
539
+ }, !isMobile && /*#__PURE__*/_react.default.createElement("span", {
540
+ className: (0, _classnames.default)("".concat(RC, "__active-icon"), {
541
+ ["".concat(RC, "__active-icon_active")]: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(value => value === item.value)
542
+ })
543
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, {
544
+ width: 16,
545
+ height: 16,
546
+ className: "color--text"
547
+ })), /*#__PURE__*/_react.default.createElement("div", {
548
+ className: (0, _classnames.default)("".concat(RC, "__list-item-body"))
549
+ }, renderOptionsAsTags ? /*#__PURE__*/_react.default.createElement(_Tag.default, {
550
+ key: item === null || item === void 0 ? void 0 : item.value,
551
+ className: (0, _classnames.default)("".concat(RC, "__list-item-title"), item === null || item === void 0 ? void 0 : item.labelClassName, {
552
+ "tag_with-btn": !(item !== null && item !== void 0 && item.isFreezed)
553
+ }),
554
+ label: hightlightSearchValue(title),
555
+ style: item === null || item === void 0 ? void 0 : item.style,
556
+ isNoDismiss: true
557
+ }) : /*#__PURE__*/_react.default.createElement("span", {
558
+ className: (0, _classnames.default)("".concat(RC, "__list-item-title"), item.labelClassName)
559
+ }, hightlightSearchValue(title)), description && /*#__PURE__*/_react.default.createElement("span", {
560
+ className: (0, _classnames.default)("".concat(RC, "__list-item-description"))
561
+ }, description)), !isMobile && (item === null || item === void 0 ? void 0 : item.isEditable) && /*#__PURE__*/_react.default.createElement("div", {
562
+ id: item === null || item === void 0 ? void 0 : item.value,
563
+ className: (0, _classnames.default)("".concat(RC, "__list-item-edit-trigger")),
564
+ onClick: e => onOptionEditClick(e, item)
565
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.MoreHorizontal, null)), isMobile ? (_item$customMobileIco = item === null || item === void 0 ? void 0 : item.customMobileIcon) !== null && _item$customMobileIco !== void 0 ? _item$customMobileIco : /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
566
+ value: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(value => value === item.value),
567
+ onChange: () => {
568
+ onChangeHandler(item);
569
+ }
570
+ }) : "");
571
+ };
378
572
  const getListMarkUp = () => {
379
573
  var _filteredOptions$filt, _filteredOptions$filt2;
380
574
  const filteredOptions = getFilteredOptions(options);
@@ -422,7 +616,16 @@ const TagsDropdown = _ref => {
422
616
  }
423
617
  }, attributesOfNativeInput)))), headerContent && /*#__PURE__*/_react.default.createElement("div", {
424
618
  className: (0, _classnames.default)("".concat(RC, "__header-row"))
425
- }, headerContent)) : null, /*#__PURE__*/_react.default.createElement("div", {
619
+ }, headerContent)) : null, withSearchInputInList && /*#__PURE__*/_react.default.createElement("div", {
620
+ className: (0, _classnames.default)("".concat(RC, "__input-list-wrapper"))
621
+ }, renderSearchInput()), withCreateLogic && searchValue && filteredOptions.length && singleLevelOptions.every(_ref9 => {
622
+ let {
623
+ label
624
+ } = _ref9;
625
+ return label.toLowerCase() !== searchValue.toLowerCase();
626
+ }) ? /*#__PURE__*/_react.default.createElement("div", {
627
+ className: (0, _classnames.default)("".concat(RC, "__creatable-helper"))
628
+ }, "Select an option or create one") : null, withCreateLogic && filteredOptions.length || !withCreateLogic ? /*#__PURE__*/_react.default.createElement("div", {
426
629
  ref: dropdownListRef,
427
630
  className: "".concat(RC, "__list ").concat(headerContent || isMobile ? "".concat(RC, "__list--with-header") : "", " ").concat(footerContent ? "".concat(RC, "__list--with-footer") : "")
428
631
  }, filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(option => {
@@ -433,17 +636,17 @@ const TagsDropdown = _ref => {
433
636
  }, /*#__PURE__*/_react.default.createElement("span", {
434
637
  className: "".concat(RC, "-group__name")
435
638
  }, option.groupName), (_option$list2 = option.list) === null || _option$list2 === void 0 ? void 0 : _option$list2.map(item => getMarkupForElement(item))) : getMarkupForElement(option);
436
- }), ((_filteredOptions$filt = filteredOptions.filter(_ref9 => {
639
+ }), ((_filteredOptions$filt = filteredOptions.filter(_ref10 => {
437
640
  let {
438
641
  value
439
- } = _ref9;
642
+ } = _ref10;
440
643
  return value !== "open_modal";
441
644
  })) === null || _filteredOptions$filt === void 0 ? void 0 : _filteredOptions$filt.length) === 0 ? /*#__PURE__*/_react.default.createElement("div", {
442
645
  className: "".concat(RC, "__no-options")
443
- }, noOptionsText) : null), (footerContent || isMobile) && ((_filteredOptions$filt2 = filteredOptions.filter(_ref10 => {
646
+ }, noOptionsText) : null) : null, (footerContent || isMobile) && ((_filteredOptions$filt2 = filteredOptions.filter(_ref11 => {
444
647
  let {
445
648
  value
446
- } = _ref10;
649
+ } = _ref11;
447
650
  return value !== "open_modal";
448
651
  })) === null || _filteredOptions$filt2 === void 0 ? void 0 : _filteredOptions$filt2.length) > 0 ? /*#__PURE__*/_react.default.createElement("div", {
449
652
  className: (0, _classnames.default)("".concat(RC, "__footer"), {
@@ -452,35 +655,159 @@ const TagsDropdown = _ref => {
452
655
  })
453
656
  }, footerContent, isMobile && /*#__PURE__*/_react.default.createElement("button", {
454
657
  onClick: () => setIsOpen(false)
455
- }, "Apply", chosenOptions !== null && chosenOptions !== void 0 && chosenOptions.length ? "(".concat(chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.length, ")") : "")) : null));
658
+ }, "Apply", chosenOptions !== null && chosenOptions !== void 0 && chosenOptions.length ? "(".concat(chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.length, ")") : "")) : null, editingOption && renderEditOptionModal(), withCreateLogic && searchValue && singleLevelOptions.every(_ref12 => {
659
+ let {
660
+ label
661
+ } = _ref12;
662
+ return label.toLowerCase() !== searchValue.toLowerCase();
663
+ }) && /*#__PURE__*/_react.default.createElement("div", {
664
+ className: (0, _classnames.default)("".concat(RC, "__create-option")),
665
+ onClick: onOptionCreateClick
666
+ }, "Create", /*#__PURE__*/_react.default.createElement(_Tag.default, {
667
+ label: searchValue,
668
+ style: {
669
+ backgroundColor: randomColorForNewOption
670
+ },
671
+ isNoDismiss: true
672
+ }))));
456
673
  };
457
- const closeList = e => {
458
- var _inputRef$current;
459
- handleClickOutside(e);
460
- inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
674
+ const renderSearchInput = () => {
675
+ return /*#__PURE__*/_react.default.createElement(_Input.default, {
676
+ ref: inputRef,
677
+ className: (0, _classnames.default)("".concat(RC, "__input"), {
678
+ ["".concat(RC, "__input--in-list")]: withSearchInputInList
679
+ }),
680
+ value: searchValue,
681
+ onChange: onSearchHandler,
682
+ placeholder: placeholder || "Select from list",
683
+ attributesOfNativeInput: {
684
+ ...attributesOfNativeInput,
685
+ onKeyDown: e => {
686
+ if (e.keyCode === 13 && withCreateLogic && singleLevelOptions.every(_ref13 => {
687
+ let {
688
+ label
689
+ } = _ref13;
690
+ return label.toLowerCase() !== searchValue.toLowerCase();
691
+ })) {
692
+ onOptionCreateClick();
693
+ }
694
+ onKeyPress(e, searchValue);
695
+ },
696
+ onFocus: e => {
697
+ var _e$target;
698
+ if (isMobile) e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 || _e$target.blur();
699
+ }
700
+ }
701
+ });
461
702
  };
703
+ const renderDropdownTrigger = (0, _react.useCallback)(() => {
704
+ var _renderCustomTrigger;
705
+ const renderDefaultDropdownTrigger = () => {
706
+ return /*#__PURE__*/_react.default.createElement("div", {
707
+ className: (0, _classnames.default)("".concat(RC, "__trigger"), {
708
+ "tags-dropdown__error": error,
709
+ ["".concat(RC, "__trigger--with-actions")]: withActions
710
+ }),
711
+ onClick: _ref14 => {
712
+ let {
713
+ target
714
+ } = _ref14;
715
+ if ((target === null || target === void 0 ? void 0 : target.tagName) === "INPUT") setIsOpen(true);else if (isTargetInParent(target)) {
716
+ setIsOpen(isOpen => !isOpen);
717
+ }
718
+ }
719
+ }, noTagsWrap ? /*#__PURE__*/_react.default.createElement(_TagList.default, {
720
+ items: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map((value, i) => {
721
+ const tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find(el => el.value == value);
722
+ const label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
723
+ return {
724
+ value,
725
+ label,
726
+ id: i,
727
+ className: tag === null || tag === void 0 ? void 0 : tag.labelClassName,
728
+ style: tag === null || tag === void 0 ? void 0 : tag.style
729
+ };
730
+ }),
731
+ disableShowMore: true
732
+ }) : chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(value => {
733
+ const tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find(el => el.value == value);
734
+ const label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
735
+ return /*#__PURE__*/_react.default.createElement(_Tag.default, {
736
+ key: value,
737
+ className: (0, _classnames.default)(tagClassname, tag === null || tag === void 0 ? void 0 : tag.labelClassName, {
738
+ "tag_with-btn": !(tag !== null && tag !== void 0 && tag.isFreezed)
739
+ }),
740
+ label: label,
741
+ style: tag === null || tag === void 0 ? void 0 : tag.style,
742
+ removeItem: tag !== null && tag !== void 0 && tag.isFreezed ? null : () => deleteChosen(value),
743
+ isNoDismiss: false
744
+ });
745
+ }), chosenOptions.length === 0 || !noTagsWrap ? renderSearchInput() : "", /*#__PURE__*/_react.default.createElement("span", {
746
+ className: (0, _classnames.default)("".concat(RC, "__arrow"), {
747
+ ["".concat(RC, "__arrow_active")]: isOpen
748
+ })
749
+ }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, {
750
+ className: "mobile-icon"
751
+ }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
752
+ className: "color--text"
753
+ }) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
754
+ className: "color--text"
755
+ })));
756
+ };
757
+ return (_renderCustomTrigger = renderCustomTrigger === null || renderCustomTrigger === void 0 ? void 0 : renderCustomTrigger({
758
+ chosenOptions,
759
+ singleLevelOptions,
760
+ deleteChosen,
761
+ inputRef,
762
+ onSearchHandler,
763
+ isOpen,
764
+ setIsOpen
765
+ })) !== null && _renderCustomTrigger !== void 0 ? _renderCustomTrigger : renderDefaultDropdownTrigger();
766
+ }, [chosenOptions, singleLevelOptions, inputRef, isOpen]);
767
+ // --- RENDER FUNCTIONS END --- //
768
+
462
769
  (0, _react.useLayoutEffect)(() => {
463
770
  initListContainer();
771
+ return () => {
772
+ var _getListContainer2, _getListContainerWrap;
773
+ (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 || _getListContainer2.remove();
774
+ (_getListContainerWrap = getListContainerWrapper()) === null || _getListContainerWrap === void 0 || _getListContainerWrap.remove();
775
+ };
464
776
  }, []);
465
777
  (0, _react.useLayoutEffect)(() => {
778
+ var _getListContainer3;
779
+ const onResize = () => {
780
+ setListContainerStyles();
781
+ setEditOptionModalStyles();
782
+ };
466
783
  if (!isMobile) {
467
- window.addEventListener("resize", setListContainerStyles);
784
+ window.addEventListener("resize", onResize);
468
785
  window.addEventListener("mousewheel", closeList);
786
+ window.addEventListener("scroll", closeList);
787
+ window.addEventListener("touchmove", closeList);
469
788
  window.addEventListener("mouseup", handleClickOutside);
470
789
  } else {
471
- window.removeEventListener("resize", setListContainerStyles);
790
+ window.removeEventListener("resize", onResize);
472
791
  window.removeEventListener("mousewheel", closeList);
792
+ window.removeEventListener("scroll", closeList);
793
+ window.removeEventListener("touchmove", closeList);
473
794
  window.removeEventListener("mouseup", handleClickOutside);
474
795
  }
796
+ (_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 || _getListContainer3.addEventListener("click", closeList);
475
797
  return () => {
476
- window.removeEventListener("resize", setListContainerStyles);
798
+ var _getListContainer4;
799
+ window.removeEventListener("resize", onResize);
477
800
  window.removeEventListener("mousewheel", closeList);
478
801
  window.removeEventListener("mouseup", handleClickOutside);
802
+ window.removeEventListener("scroll", closeList);
803
+ window.removeEventListener("touchmove", closeList);
804
+ (_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 || _getListContainer4.removeEventListener("click", closeList);
479
805
  };
480
- }, [getListContainer]);
806
+ }, [getListContainer, isMobile]);
481
807
  (0, _react.useLayoutEffect)(() => {
482
808
  setListContainerStyles();
483
- }, [isOpen, chosenOptions, isMobile, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 || (_dropdownListWrapperR = dropdownListWrapperRef.current) === null || _dropdownListWrapperR === void 0 || (_dropdownListWrapperR = _dropdownListWrapperR.getBoundingClientRect()) === null || _dropdownListWrapperR === void 0 ? void 0 : _dropdownListWrapperR.height]);
809
+ setEditOptionModalStyles();
810
+ }, [isOpen, chosenOptions, isMobile, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 || (_dropdownListWrapperR2 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR2 === void 0 || (_dropdownListWrapperR2 = _dropdownListWrapperR2.getBoundingClientRect()) === null || _dropdownListWrapperR2 === void 0 ? void 0 : _dropdownListWrapperR2.height, recalculateListContainerStylesTrigger]);
484
811
  (0, _react.useEffect)(() => {
485
812
  if (chosenOptions.length !== Object.keys(localOptionsStore).length) {
486
813
  options.map(option => {
@@ -493,160 +820,78 @@ const TagsDropdown = _ref => {
493
820
  });
494
821
  }
495
822
  }, [chosenOptions]);
496
- (0, _react.useEffect)(() => {
497
- if (!isMobile) {
498
- document.addEventListener("click", handleClickOutside, true);
499
- } else {
500
- document.removeEventListener("click", handleClickOutside, true);
501
- }
502
- return () => document.removeEventListener("click", handleClickOutside, true);
503
- }, [isMobile]);
504
823
  (0, _react.useEffect)(() => {
505
824
  var _selectAllButtonRef$c, _unselectAllButtonRef;
506
825
  const fn = isOpen ? "addEventListener" : "removeEventListener";
507
826
  selectAllButtonRef === null || selectAllButtonRef === void 0 || (_selectAllButtonRef$c = selectAllButtonRef.current) === null || _selectAllButtonRef$c === void 0 || _selectAllButtonRef$c[fn]("click", selectAllItems, true);
508
827
  unselectAllButtonRef === null || unselectAllButtonRef === void 0 || (_unselectAllButtonRef = unselectAllButtonRef.current) === null || _unselectAllButtonRef === void 0 || _unselectAllButtonRef[fn]("click", unselectAllItems, true);
509
828
  if (isOpen) {
510
- var _getListContainer2;
511
- (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 || _getListContainer2.classList.add("tags-dropdown__container--opened");
829
+ var _getListContainer5, _inputRef$current2, _inputRef$current2$fo;
830
+ (_getListContainer5 = getListContainer()) === null || _getListContainer5 === void 0 || _getListContainer5.classList.add("tags-dropdown__container--opened");
831
+ inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || (_inputRef$current2$fo = _inputRef$current2.focus) === null || _inputRef$current2$fo === void 0 || _inputRef$current2$fo.call(_inputRef$current2);
512
832
  } else {
513
- var _getListContainer3;
514
- (_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 || _getListContainer3.classList.remove("tags-dropdown__container--opened");
833
+ var _getListContainer6;
834
+ (_getListContainer6 = getListContainer()) === null || _getListContainer6 === void 0 || _getListContainer6.classList.remove("tags-dropdown__container--opened");
835
+ if (withSearchInputInList) setSearchValueInterceptor("");
515
836
  }
516
837
  }, [isOpen]);
517
838
  (0, _react.useEffect)(() => {
518
- if (isOpen && isMobile, dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
519
- var _dropdownListRef$curr, _dropdownListRef$curr2;
520
- setIsScrollableList((dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr = dropdownListRef.current) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr2 = dropdownListRef.current) === null || _dropdownListRef$curr2 === void 0 ? void 0 : _dropdownListRef$curr2.clientHeight));
839
+ const setScrollTopValue = e => {
840
+ setScrollTop(parseInt(e.target.scrollTop, 10));
841
+ };
842
+ if (isOpen && isMobile && dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
843
+ var _dropdownListRef$curr, _dropdownListRef$curr2, _dropdownListRef$curr3;
844
+ dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr = dropdownListRef.current) === null || _dropdownListRef$curr === void 0 || _dropdownListRef$curr.addEventListener("scroll", setScrollTopValue);
845
+ setIsScrollableList((dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr2 = dropdownListRef.current) === null || _dropdownListRef$curr2 === void 0 ? void 0 : _dropdownListRef$curr2.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr3 = dropdownListRef.current) === null || _dropdownListRef$curr3 === void 0 ? void 0 : _dropdownListRef$curr3.clientHeight));
521
846
  if (isScrollableList === null) {
522
- var _dropdownListRef$curr3, _dropdownListRef$curr4;
523
- setIsFixedMaxHeight((dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr3 = dropdownListRef.current) === null || _dropdownListRef$curr3 === void 0 ? void 0 : _dropdownListRef$curr3.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr4 = dropdownListRef.current) === null || _dropdownListRef$curr4 === void 0 ? void 0 : _dropdownListRef$curr4.clientHeight));
847
+ var _dropdownListRef$curr4, _dropdownListRef$curr5;
848
+ setIsFixedMaxHeight((dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr4 = dropdownListRef.current) === null || _dropdownListRef$curr4 === void 0 ? void 0 : _dropdownListRef$curr4.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr5 = dropdownListRef.current) === null || _dropdownListRef$curr5 === void 0 ? void 0 : _dropdownListRef$curr5.clientHeight));
524
849
  }
525
850
  }
526
851
  if (isOpen && dropdownListRef && dropdownListRef.current) {
527
852
  dropdownListRef.current.addEventListener("scroll", doScrollCallback);
528
853
  }
529
854
  return () => {
855
+ var _dropdownListRef$curr6;
530
856
  removeEventListener("scroll", doScrollCallback);
857
+ dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr6 = dropdownListRef.current) === null || _dropdownListRef$curr6 === void 0 || _dropdownListRef$curr6.removeEventListener("scroll", setScrollTopValue);
531
858
  };
532
- }, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current, dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr5 = dropdownListRef.current) === null || _dropdownListRef$curr5 === void 0 ? void 0 : _dropdownListRef$curr5.scrollHeight, dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr6 = dropdownListRef.current) === null || _dropdownListRef$curr6 === void 0 ? void 0 : _dropdownListRef$curr6.clientHeight]);
533
- (0, _react.useEffect)(() => {
534
- const setScrollTopValue = e => {
535
- setScrollTop(parseInt(e.target.scrollTop, 10));
536
- };
537
- if (isOpen && isMobile && dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
538
- var _dropdownListRef$curr7;
539
- dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr7 = dropdownListRef.current) === null || _dropdownListRef$curr7 === void 0 || _dropdownListRef$curr7.addEventListener("scroll", setScrollTopValue);
540
- }
541
- return () => {
542
- var _dropdownListRef$curr8;
543
- dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr8 = dropdownListRef.current) === null || _dropdownListRef$curr8 === void 0 || _dropdownListRef$curr8.removeEventListener("scroll", setScrollTopValue);
544
- };
545
- }, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
859
+ }, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current, dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr7 = dropdownListRef.current) === null || _dropdownListRef$curr7 === void 0 ? void 0 : _dropdownListRef$curr7.scrollHeight, dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr8 = dropdownListRef.current) === null || _dropdownListRef$curr8 === void 0 ? void 0 : _dropdownListRef$curr8.clientHeight]);
546
860
  (0, _react.useEffect)(() => {
547
861
  if (dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
548
862
  var _dropdownListRef$curr9, _dropdownListRef$curr10;
549
863
  setScrollHeight(parseInt((dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr9 = dropdownListRef.current) === null || _dropdownListRef$curr9 === void 0 ? void 0 : _dropdownListRef$curr9.scrollHeight) - (dropdownListRef === null || dropdownListRef === void 0 || (_dropdownListRef$curr10 = dropdownListRef.current) === null || _dropdownListRef$curr10 === void 0 ? void 0 : _dropdownListRef$curr10.clientHeight), 10));
550
864
  }
551
865
  }, [scrollTop, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
552
- (0, _react.useEffect)(() => {
553
- return () => {
554
- var _getListContainer4, _getListContainerWrap;
555
- (_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 || _getListContainer4.remove();
556
- (_getListContainerWrap = getListContainerWrapper()) === null || _getListContainerWrap === void 0 || _getListContainerWrap.remove();
557
- };
558
- }, []);
559
866
  (0, _react.useEffect)(() => {
560
867
  if (isSearchable && useLiveSearch && (debouncedSearchTerm || isValueDeleted || isOpen)) {
561
868
  doLiveSearchRequest === null || doLiveSearchRequest === void 0 || doLiveSearchRequest(debouncedSearchTerm);
562
869
  }
563
870
  }, [isOpen, debouncedSearchTerm, isValueDeleted]);
564
- (0, _react.useLayoutEffect)(() => {
565
- var _getListContainer5;
566
- if (!isMobile) {
567
- window.addEventListener("resize", setListContainerStyles);
568
- window.addEventListener("mousewheel", closeList);
569
- window.addEventListener("scroll", closeList);
570
- window.addEventListener("touchmove", closeList);
571
- } else {
572
- window.removeEventListener("resize", setListContainerStyles);
573
- window.removeEventListener("mousewheel", closeList);
574
- window.removeEventListener("scroll", closeList);
575
- window.removeEventListener("touchmove", closeList);
576
- }
577
- (_getListContainer5 = getListContainer()) === null || _getListContainer5 === void 0 || _getListContainer5.addEventListener("click", closeList);
578
- return () => {
579
- var _getListContainer6;
580
- window.removeEventListener("resize", setListContainerStyles);
581
- window.removeEventListener("mousewheel", closeList);
582
- window.removeEventListener("scroll", closeList);
583
- window.removeEventListener("touchmove", closeList);
584
- (_getListContainer6 = getListContainer()) === null || _getListContainer6 === void 0 || _getListContainer6.removeEventListener("click", closeList);
585
- };
586
- }, [getListContainer]);
871
+ (0, _react.useEffect)(() => {
872
+ setOptions(optionsProp.map(option => ({
873
+ ...option,
874
+ ref: /*#__PURE__*/(0, _react.createRef)()
875
+ })));
876
+ }, [optionsProp]);
877
+ (0, _react.useEffect)(() => {
878
+ if (editingOption) setEditOptionModalStyles();
879
+ }, [editingOption === null || editingOption === void 0 ? void 0 : editingOption.value]);
587
880
  return /*#__PURE__*/_react.default.createElement("div", {
588
881
  className: (0, _classnames.default)(RC, className, {
589
882
  ["".concat(RC, "_disabled")]: disabled,
590
- ["".concat(RC, "-mobile")]: isMobile
883
+ ["".concat(RC, "-mobile")]: isMobile,
884
+ ["".concat(RC, "--focused")]: isOpen
591
885
  }),
592
886
  ref: dropdownRef
887
+ }, renderDropdownTrigger(), withActions && /*#__PURE__*/_react.default.createElement("div", {
888
+ className: (0, _classnames.default)("".concat(RC, "__actions"))
593
889
  }, /*#__PURE__*/_react.default.createElement("div", {
594
- className: (0, _classnames.default)("".concat(RC, "__trigger"), {
595
- "tags-dropdown__error": error
596
- }),
597
- onClick: _ref11 => {
598
- let {
599
- target
600
- } = _ref11;
601
- if ((target === null || target === void 0 ? void 0 : target.tagName) === "INPUT") setIsOpen(true);else if (isTargetInParent(target)) {
602
- setIsOpen(isOpen => !isOpen);
603
- }
604
- }
605
- }, noTagsWrap ? /*#__PURE__*/_react.default.createElement(_TagList.default, {
606
- items: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map((value, i) => {
607
- const tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find(el => el.value == value);
608
- const label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
609
- return {
610
- value,
611
- label,
612
- id: i,
613
- className: tag === null || tag === void 0 ? void 0 : tag.labelClassName
614
- };
615
- }),
616
- disableShowMore: true
617
- }) : chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(value => {
618
- const tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find(el => el.value == value);
619
- const label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
620
- return /*#__PURE__*/_react.default.createElement(_Tag.default, {
621
- key: value,
622
- className: (0, _classnames.default)(tagClassname, tag === null || tag === void 0 ? void 0 : tag.labelClassName, {
623
- "tag_with-btn": !(tag !== null && tag !== void 0 && tag.isFreezed)
624
- }),
625
- label: label,
626
- removeItem: tag !== null && tag !== void 0 && tag.isFreezed ? null : () => deleteChosen(value),
627
- isNoDismiss: false
628
- });
629
- }), chosenOptions.length === 0 || !noTagsWrap ? /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
630
- ref: inputRef,
631
- className: "".concat(RC, "__input"),
632
- value: searchValue,
633
- onChange: e => onSearchHandler(e.target.value),
634
- placeholder: placeholder || "Select from list",
635
- onKeyDown: e => onKeyPress(e, searchValue),
636
- onFocus: e => {
637
- var _e$target;
638
- if (isMobile) e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 || _e$target.blur();
639
- }
640
- }, attributesOfNativeInput)) : "", isOpen && renderListContainer(), /*#__PURE__*/_react.default.createElement("span", {
641
- className: (0, _classnames.default)("".concat(RC, "__arrow"), {
642
- ["".concat(RC, "__arrow_active")]: isOpen
643
- })
644
- }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, {
645
- className: "mobile-icon"
646
- }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
647
- className: "color--text"
648
- }) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
649
- className: "color--text"
650
- }))));
890
+ className: (0, _classnames.default)("".concat(RC, "__actions-item")),
891
+ onClick: onActionConfirmClick
892
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
893
+ className: (0, _classnames.default)("".concat(RC, "__actions-item")),
894
+ onClick: onActionCancelClick
895
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null))), isOpen && renderListContainer());
651
896
  };
652
897
  var _default = exports.default = TagsDropdown;