intelicoreact 1.2.60 → 1.2.61

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 (6) hide show
  1. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +13 -4
  2. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +168 -166
  3. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +13 -4
  4. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss +192 -194
  5. package/dist/Atomic/UI/Modal/partials/useMobileModal.js +29 -51
  6. package/package.json +1 -1
package/dist/Atomic/FormElements/Dropdown/Dropdown.js CHANGED
@@ -348,7 +348,14 @@ var Dropdown = function Dropdown(_ref) {
348
348
 
349
349
  (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 ? void 0 : _getListContainer2.remove();
350
350
  } finally {
351
- getParentNode().append(dropdownList);
351
+ if (isMobile) {
352
+ var dropdownMobileListWrapper = document.createElement('div');
353
+ dropdownMobileListWrapper.classList.add('dropdown-mobile');
354
+ dropdownMobileListWrapper.append(dropdownList);
355
+ getParentNode().append(dropdownMobileListWrapper);
356
+ } else {
357
+ getParentNode().append(dropdownList);
358
+ }
352
359
  }
353
360
  };
354
361
 
@@ -644,9 +651,9 @@ var Dropdown = function Dropdown(_ref) {
644
651
  return option.value === value;
645
652
  })) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.postfix) || null;
646
653
  return /*#__PURE__*/_react.default.createElement("div", {
647
- className: (0, _classnames.default)(RC, className, {
654
+ className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({
648
655
  disabled: disabled
649
- }),
656
+ }, "".concat(RC, "-mobile"), isMobile)),
650
657
  ref: dropdownRef,
651
658
  onKeyDown: onKeyDown,
652
659
  onKeyUp: onKeyUp
@@ -683,7 +690,9 @@ var Dropdown = function Dropdown(_ref) {
683
690
  }, postfixText)), /*#__PURE__*/_react.default.createElement("span", {
684
691
  className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
685
692
  onClick: toggleList
686
- }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, null) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && renderListContainer());
693
+ }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, {
694
+ className: "mobile-icon"
695
+ }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && renderListContainer());
687
696
  };
688
697
 
689
698
  var _default = Dropdown;
package/dist/Atomic/FormElements/Dropdown/Dropdown.scss CHANGED
@@ -127,7 +127,7 @@
127
127
  align-items: center;
128
128
 
129
129
  width: 100%;
130
- height: 24px;
130
+ min-height: 24px;
131
131
  padding: 0 20px 0 30px;
132
132
 
133
133
  cursor: pointer;
@@ -282,207 +282,209 @@
282
282
  }
283
283
 
284
284
  @media (max-width: 767px) {
285
- .dropdown {
286
- &__arrow {
287
- top: 50%!important;
288
- transform: translateY(-50%) rotate(90deg)!important;
289
- right: $spacing-m!important;
290
- width: 16px;
291
- height: 16px;
292
- text-align: center;
285
+ .dropdown-mobile {
286
+ .dropdown {
287
+ &__arrow {
288
+ top: 50%!important;
289
+ transform: translateY(-50%) rotate(90deg)!important;
290
+ right: $spacing-m!important;
291
+ width: 16px;
292
+ height: 16px;
293
+ text-align: center;
293
294
 
294
- svg {
295
- display: flex;
296
- position: relative!important;
297
- top: 5px!important;
298
- right: unset!important;
299
- height: 12px;
295
+ svg.mobile-icon {
296
+ display: flex;
297
+ position: relative!important;
298
+ top: 5px!important;
299
+ right: unset!important;
300
+ height: 12px;
301
+ }
300
302
  }
301
- }
302
- &__container {
303
- overflow: hidden!important;
304
-
305
- &--opened {
306
- width: 100dvw;
307
- height: 100dvh;
308
- max-height: 100dvh;
309
- position: fixed;
310
- left: 0!important;
311
- top: 0!important;
312
- background: rgba(23, 29, 51, 0.50);
313
- padding: $spacing-s;
303
+ &__container {
304
+ overflow: hidden!important;
305
+
306
+ &--opened {
307
+ width: 100dvw;
308
+ height: 100dvh;
309
+ max-height: 100dvh;
310
+ position: fixed;
311
+ left: 0!important;
312
+ top: 0!important;
313
+ background: rgba(23, 29, 51, 0.50);
314
+ padding: $spacing-s;
315
+ }
314
316
  }
315
- }
316
317
 
317
- &__container &__list {
318
- top: 0;
319
- padding:$spacing-m!important;
320
- padding-top: 0!important;
321
-
322
- &-wrapper {
323
- box-sizing: border-box;
324
- position: sticky;
325
- bottom: 0;
326
- max-height: 500px;
327
- border-radius: $spacing-l!important;
328
- overflow: hidden;
318
+ &__list {
319
+ top: 0;
320
+ padding:$spacing-m!important;
321
+ padding-top: 0!important;
329
322
 
330
- &--with-bottom-shadow::after {
331
- content: "";
332
- width: 100%;
333
- height: 15px;
334
- position: absolute;
323
+ &-wrapper {
324
+ box-sizing: border-box;
325
+ position: sticky;
335
326
  bottom: 0;
336
- background: linear-gradient(180deg, rgba(212, 218, 230, 0.50) 0%, rgba(212, 218, 230, 0.30) 21.35%, rgba(247, 248, 250, 0.00) 100%);
337
- z-index: 6;
338
- transform: rotate(180deg);
339
- opacity: 1;
340
- transition: all 0.2s;
341
- }
327
+ max-height: 500px;
328
+ border-radius: $spacing-l!important;
329
+ overflow: hidden;
342
330
 
343
- &--with-bottom-shadow-hidden::after {
344
- opacity: 0;
345
- }
331
+ &--with-bottom-shadow::after {
332
+ content: "";
333
+ width: 100%;
334
+ height: 15px;
335
+ position: absolute;
336
+ bottom: 0;
337
+ background: linear-gradient(180deg, rgba(212, 218, 230, 0.50) 0%, rgba(212, 218, 230, 0.30) 21.35%, rgba(247, 248, 250, 0.00) 100%);
338
+ z-index: 6;
339
+ transform: rotate(180deg);
340
+ opacity: 1;
341
+ transition: all 0.2s;
342
+ }
346
343
 
347
- &--fixed-height {
348
- height: 500px!important;
349
- }
350
- }
344
+ &--with-bottom-shadow-hidden::after {
345
+ opacity: 0;
346
+ }
351
347
 
352
- &-header {
353
- position: relative;
354
- display: flex;
355
- flex-direction: column;
356
- justify-content: space-between;
357
- padding: $spacing-m;
358
- color: #3B414B;
359
- font-size: 16px;
360
- font-weight: 600;
361
- line-height: 24px;
362
- letter-spacing: 0.1px;
363
- gap: $spacing-m;
348
+ &--fixed-height {
349
+ height: 500px!important;
350
+ }
351
+ }
364
352
 
365
- &-row {
353
+ &-header {
354
+ position: relative;
366
355
  display: flex;
367
- flex-direction: row;
368
- align-items: center;
369
- min-height: 24px;
356
+ flex-direction: column;
357
+ justify-content: space-between;
358
+ padding: $spacing-m;
359
+ color: #3B414B;
360
+ font-size: 16px;
361
+ font-weight: 600;
362
+ line-height: 24px;
363
+ letter-spacing: 0.1px;
364
+ gap: $spacing-m;
370
365
 
371
- .input__wrap {
372
- width: 100%;
366
+ &-row {
373
367
  display: flex;
368
+ flex-direction: row;
374
369
  align-items: center;
375
- padding-right: $spacing-s;
376
- border-radius: 6px;
377
- border: 1px solid var(--form-input-border, #E1E8F1);
378
- background: var(--black-bg-color, #F8FBFF)!important;
379
-
380
- input {
381
- background: unset!important;
370
+ min-height: 24px;
371
+
372
+ .input__wrap {
373
+ width: 100%;
374
+ display: flex;
375
+ align-items: center;
376
+ padding-right: $spacing-s;
377
+ border-radius: 6px;
378
+ border: 1px solid var(--form-input-border, #E1E8F1);
379
+ background: var(--black-bg-color, #F8FBFF)!important;
380
+
381
+ input {
382
+ background: unset!important;
383
+ }
382
384
  }
383
- }
384
385
 
385
386
 
386
- .input__close {
387
- padding: $spacing-xs;
388
- border-radius: 2px;
389
- background: var(--bg-gray-box, #F0F1F4);
390
- width: 24px;
391
- min-width: 24px;
392
- height: 24px;
393
- box-sizing: border-box;
394
- display: flex;
395
- align-items: center;
387
+ .input__close {
388
+ padding: $spacing-xs;
389
+ border-radius: 2px;
390
+ background: var(--bg-gray-box, #F0F1F4);
391
+ width: 24px;
392
+ min-width: 24px;
393
+ height: 24px;
394
+ box-sizing: border-box;
395
+ display: flex;
396
+ align-items: center;
396
397
 
397
- &::before,
398
- &::after {
399
- height: 12px;
400
- top: 50%;
401
- transform: translateY(-50%) rotate(45deg);
402
- border-radius: 8px;
403
- background-color: #171D33;
398
+ &::before,
399
+ &::after {
400
+ height: 12px;
401
+ top: 50%;
402
+ transform: translateY(-50%) rotate(45deg);
403
+ border-radius: 8px;
404
+ background-color: #171D33;
405
+ }
406
+ &::after {
407
+ transform: translateY(-50%) rotate(-45deg);
408
+ }
404
409
  }
405
- &::after {
406
- transform: translateY(-50%) rotate(-45deg);
407
410
  }
408
- }
409
- }
410
411
 
411
- &-with-shadow::after {
412
- content: "";
413
- position: absolute;
414
- left: 0;
415
- bottom: -15px;
416
- width: 100%;
417
- height: 15px;
418
- background: linear-gradient(180deg, rgba(212, 218, 230, 0.50) 0%, rgba(212, 218, 230, 0.30) 21.35%, rgba(247, 248, 250, 0.00) 100%);
419
- z-index: 10;
420
- opacity: 1;
421
- transition: all 0.2s;
422
- }
412
+ &-with-shadow::after {
413
+ content: "";
414
+ position: absolute;
415
+ left: 0;
416
+ bottom: -15px;
417
+ width: 100%;
418
+ height: 15px;
419
+ background: linear-gradient(180deg, rgba(212, 218, 230, 0.50) 0%, rgba(212, 218, 230, 0.30) 21.35%, rgba(247, 248, 250, 0.00) 100%);
420
+ z-index: 10;
421
+ opacity: 1;
422
+ transition: all 0.2s;
423
+ }
423
424
 
424
- &-with-shadow-hidden::after {
425
- opacity: 0;
425
+ &-with-shadow-hidden::after {
426
+ opacity: 0;
427
+ }
426
428
  }
427
- }
428
429
 
429
- &-close-icon {
430
- display: flex;
431
- align-items: center;
432
- justify-content: center;
433
- position: absolute;
434
- top: 0;
435
- right: 0;
436
- height: 100%;
437
- padding: $spacing-m;
438
- width: 50px;
439
- height: 50px;
440
- box-sizing: border-box;
430
+ &-close-icon {
431
+ display: flex;
432
+ align-items: center;
433
+ justify-content: center;
434
+ position: absolute;
435
+ top: 0;
436
+ right: 0;
437
+ height: 100%;
438
+ padding: $spacing-m;
439
+ width: 50px;
440
+ height: 50px;
441
+ box-sizing: border-box;
441
442
 
442
- svg {
443
- width: 16px;
444
- height: 16px;
445
- color: #A0A4B0;
443
+ svg {
444
+ width: 16px;
445
+ height: 16px;
446
+ color: #A0A4B0;
447
+ }
446
448
  }
447
449
  }
448
- }
449
450
 
450
- &-group {
451
- margin: 0;
452
- margin-bottom: $spacing-xs;
451
+ &-group {
452
+ margin: 0;
453
+ margin-bottom: $spacing-xs;
453
454
 
454
- &:last-child {
455
- margin-bottom: $spacing-m;
456
- }
455
+ &:last-child {
456
+ margin-bottom: $spacing-m;
457
+ }
457
458
 
458
- &__name {
459
- margin: 0;
460
- margin-bottom: $spacing-s;
461
- font-size: 11px;
462
- padding: 10px 0px 6px 0px;
463
- border-bottom: 1px solid rgba(58, 72, 122, 0.15);
459
+ &__name {
460
+ margin: 0;
461
+ margin-bottom: $spacing-s;
462
+ font-size: 11px;
463
+ padding: 10px 0px 6px 0px;
464
+ border-bottom: 1px solid rgba(58, 72, 122, 0.15);
465
+ }
464
466
  }
465
- }
466
467
 
467
- &__list-item {
468
- display: flex;
469
- justify-content: space-between;
470
- height: auto!important;
471
- padding: 10px $spacing-s!important;
472
- line-height: 24px;
468
+ &__list-item {
469
+ display: flex;
470
+ justify-content: space-between;
471
+ height: auto!important;
472
+ padding: 10px $spacing-s!important;
473
+ line-height: 24px;
473
474
 
474
- &-label {
475
- white-space: wrap!important;
475
+ &-label {
476
+ white-space: wrap!important;
476
477
 
477
- span.bg--yellow {
478
- background-color: unset!important;
479
- font-weight: 600;
478
+ span.bg--yellow {
479
+ background-color: unset!important;
480
+ font-weight: 600;
481
+ }
480
482
  }
481
- }
482
483
 
483
- &_active {
484
- border-radius: 6px;
485
- background: var(--bg-gray-box, #F0F1F4)!important;
484
+ &_active {
485
+ border-radius: 6px;
486
+ background: var(--bg-gray-box, #F0F1F4)!important;
487
+ }
486
488
  }
487
489
  }
488
490
  }
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js CHANGED
@@ -51,7 +51,7 @@ var RC = 'tags-dropdown';
51
51
  var MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
52
52
 
53
53
  var TagsDropdown = function TagsDropdown(_ref) {
54
- var _dropdownListWrapperR, _dropdownListWrapperR2, _dropdownListRef$curr5, _dropdownListRef$curr6;
54
+ var _dropdownListWrapperR, _dropdownListWrapperR2, _dropdownListRef$curr5, _dropdownListRef$curr6, _cn8;
55
55
 
56
56
  var options = _ref.options,
57
57
  _ref$chosenOptions = _ref.chosenOptions,
@@ -305,7 +305,14 @@ var TagsDropdown = function TagsDropdown(_ref) {
305
305
  });
306
306
  }
307
307
 
308
- getParentNode().append(dropdownList);
308
+ if (isMobile) {
309
+ var dropdownMobileListWrapper = document.createElement('div');
310
+ dropdownMobileListWrapper.classList.add('tags-dropdown-mobile');
311
+ dropdownMobileListWrapper.append(dropdownList);
312
+ getParentNode().append(dropdownMobileListWrapper);
313
+ } else {
314
+ getParentNode().append(dropdownList);
315
+ }
309
316
  };
310
317
 
311
318
  var getListContainer = function getListContainer() {
@@ -565,7 +572,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
565
572
  }
566
573
  }, [scrollTop, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
567
574
  return /*#__PURE__*/_react.default.createElement("div", {
568
- className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_disabled"), disabled)),
575
+ className: (0, _classnames.default)(RC, className, (_cn8 = {}, (0, _defineProperty2.default)(_cn8, "".concat(RC, "_disabled"), disabled), (0, _defineProperty2.default)(_cn8, "".concat(RC, "-mobile"), isMobile), _cn8)),
569
576
  ref: dropdownRef
570
577
  }, /*#__PURE__*/_react.default.createElement("div", {
571
578
  className: (0, _classnames.default)("".concat(RC, "__trigger"), {
@@ -626,7 +633,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
626
633
  }
627
634
  }, attributesOfNativeInput)) : '', isOpen && renderListContainer(), /*#__PURE__*/_react.default.createElement("span", {
628
635
  className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
629
- }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, null) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
636
+ }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, {
637
+ className: "mobile-icon"
638
+ }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
630
639
  className: "color--text"
631
640
  }) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
632
641
  className: "color--text"
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss CHANGED
@@ -134,7 +134,7 @@
134
134
  justify-content: flex-start;
135
135
 
136
136
  width: 100%;
137
- height: 24px;
137
+ min-height: 24px;
138
138
  padding-left: 35px;
139
139
 
140
140
  cursor: pointer;
@@ -185,10 +185,6 @@
185
185
 
186
186
  cursor: pointer;
187
187
 
188
- &_active {
189
- transform: rotate(180deg);
190
- }
191
-
192
188
  svg {
193
189
  width: auto;
194
190
  height: 100%;
@@ -263,234 +259,236 @@
263
259
  }
264
260
 
265
261
  @media (max-width: 767px) {
266
- .tags-dropdown {
267
- &__container {
268
- overflow: hidden !important;
269
-
270
- &--opened {
271
- width: 100dvw;
272
- height: 100dvh;
273
- max-height: 100dvh;
274
- position: fixed;
275
- left: 0 !important;
276
- top: 0 !important;
277
- background: rgba(23, 29, 51, 0.5);
278
- padding: $spacing-s;
262
+ .tags-dropdown-mobile {
263
+ .tags-dropdown {
264
+ &__container {
265
+ overflow: hidden !important;
266
+
267
+ &--opened {
268
+ width: 100dvw;
269
+ height: 100dvh;
270
+ max-height: 100dvh;
271
+ position: fixed;
272
+ left: 0 !important;
273
+ top: 0 !important;
274
+ background: rgba(23, 29, 51, 0.5);
275
+ padding: $spacing-s;
276
+ }
279
277
  }
280
- }
281
278
 
282
- &__selector-wrapper {
283
- position: absolute;
284
- box-sizing: border-box;
285
- bottom: $spacing-s;
286
- width: calc(100% - $spacing-m);
287
- max-height: 500px;
288
- border-radius: $spacing-l !important;
289
- overflow: hidden;
290
- background: $color--light;
291
-
292
- &--fixed-height {
293
- height: 500px !important;
279
+ &__selector-wrapper {
280
+ position: absolute;
281
+ box-sizing: border-box;
282
+ bottom: $spacing-s;
283
+ width: calc(100% - $spacing-m);
284
+ max-height: 500px;
285
+ border-radius: $spacing-l !important;
286
+ overflow: hidden;
287
+ background: $color--light;
288
+
289
+ &--fixed-height {
290
+ height: 500px !important;
291
+ }
294
292
  }
295
- }
296
293
 
297
- &__header,
298
- &__footer {
299
- height: unset;
300
- z-index: 4;
301
- background: none;
302
- border: none;
303
-
304
- &-with-shadow {
305
- &::after {
306
- content: '';
307
- position: absolute;
308
- left: 0;
309
- bottom: -15px;
310
- width: 100%;
311
- height: 15px;
312
- background: linear-gradient(
313
- 180deg,
314
- rgba(212, 218, 230, 0.5) 0%,
315
- rgba(212, 218, 230, 0.3) 21.35%,
316
- rgba(247, 248, 250, 0) 100%
317
- );
318
- transition: all 0.2s;
319
- opacity: 1;
320
- }
294
+ &__header,
295
+ &__footer {
296
+ height: unset;
297
+ z-index: 4;
298
+ background: none;
299
+ border: none;
321
300
 
322
- &-hidden::after {
323
- opacity: 0;
301
+ &-with-shadow {
302
+ &::after {
303
+ content: '';
304
+ position: absolute;
305
+ left: 0;
306
+ bottom: -15px;
307
+ width: 100%;
308
+ height: 15px;
309
+ background: linear-gradient(
310
+ 180deg,
311
+ rgba(212, 218, 230, 0.5) 0%,
312
+ rgba(212, 218, 230, 0.3) 21.35%,
313
+ rgba(247, 248, 250, 0) 100%
314
+ );
315
+ transition: all 0.2s;
316
+ opacity: 1;
317
+ }
318
+
319
+ &-hidden::after {
320
+ opacity: 0;
321
+ }
324
322
  }
325
323
  }
326
- }
327
-
328
- &__header {
329
- position: relative;
330
- display: flex;
331
- flex-direction: column;
332
- justify-content: space-between;
333
- padding: $spacing-m;
334
- color: #3b414b;
335
- font-size: 16px;
336
- font-weight: 600;
337
- line-height: 24px;
338
- letter-spacing: 0.1px;
339
- gap: $spacing-m;
340
324
 
341
- &-row {
342
- width: 100%;
325
+ &__header {
326
+ position: relative;
343
327
  display: flex;
344
- flex-direction: row;
345
- align-items: center;
346
- min-height: 24px;
328
+ flex-direction: column;
347
329
  justify-content: space-between;
330
+ padding: $spacing-m;
331
+ color: #3b414b;
332
+ font-size: 16px;
333
+ font-weight: 600;
334
+ line-height: 24px;
335
+ letter-spacing: 0.1px;
336
+ gap: $spacing-m;
348
337
 
349
- .input__wrap {
338
+ &-row {
350
339
  width: 100%;
351
340
  display: flex;
341
+ flex-direction: row;
352
342
  align-items: center;
353
- padding-right: $spacing-s;
354
- border-radius: 6px;
355
- border: 1px solid var(--form-input-border, #E1E8F1);
356
- background: var(--black-bg-color, #F8FBFF)!important;
357
-
358
- input {
359
- background: unset!important;
343
+ min-height: 24px;
344
+ justify-content: space-between;
345
+
346
+ .input__wrap {
347
+ width: 100%;
348
+ display: flex;
349
+ align-items: center;
350
+ padding-right: $spacing-s;
351
+ border-radius: 6px;
352
+ border: 1px solid var(--form-input-border, #E1E8F1);
353
+ background: var(--black-bg-color, #F8FBFF)!important;
354
+
355
+ input {
356
+ background: unset!important;
357
+ }
360
358
  }
361
- }
362
-
363
- .input__close {
364
- padding: $spacing-xs;
365
- border-radius: 2px;
366
- background: var(--bg-gray-box, #F0F1F4);
367
- width: 24px;
368
- min-width: 24px;
369
- height: 24px;
370
- box-sizing: border-box;
371
- display: flex;
372
- align-items: center;
373
359
 
374
- &::before,
375
- &::after {
376
- height: 12px;
377
- top: 50%;
378
- transform: translateY(-50%) rotate(45deg);
379
- border-radius: 8px;
380
- background-color: #171D33;
381
- }
382
- &::after {
383
- transform: translateY(-50%) rotate(-45deg);
360
+ .input__close {
361
+ padding: $spacing-xs;
362
+ border-radius: 2px;
363
+ background: var(--bg-gray-box, #F0F1F4);
364
+ width: 24px;
365
+ min-width: 24px;
366
+ height: 24px;
367
+ box-sizing: border-box;
368
+ display: flex;
369
+ align-items: center;
370
+
371
+ &::before,
372
+ &::after {
373
+ height: 12px;
374
+ top: 50%;
375
+ transform: translateY(-50%) rotate(45deg);
376
+ border-radius: 8px;
377
+ background-color: #171D33;
378
+ }
379
+ &::after {
380
+ transform: translateY(-50%) rotate(-45deg);
381
+ }
384
382
  }
385
383
  }
386
384
  }
387
- }
388
-
389
- &__footer {
390
- position: absolute;
391
- bottom: 0;
392
- padding: 0;
393
385
 
394
- &-with-shadow::after {
386
+ &__footer {
387
+ position: absolute;
395
388
  bottom: 0;
396
- top: -15px;
397
- transform: rotate(180deg);
398
- }
389
+ padding: 0;
399
390
 
400
- button {
401
- width: 100%;
402
- height: 40px;
403
- }
404
- }
405
-
406
- &__close-icon {
407
- display: flex;
408
- align-items: center;
409
- position: absolute;
410
- top: 0;
411
- right: 0;
412
- height: 100%;
413
- padding: $spacing-m;
414
- width: 50px;
415
- height: 50px;
416
- box-sizing: border-box;
391
+ &-with-shadow::after {
392
+ bottom: 0;
393
+ top: -15px;
394
+ transform: rotate(180deg);
395
+ }
417
396
 
418
- svg {
419
- width: 16px;
420
- height: 16px;
421
- color: #a0a4b0;
397
+ button {
398
+ width: 100%;
399
+ height: 40px;
400
+ }
422
401
  }
423
- }
424
-
425
- &__container &__list {
426
- top: 0;
427
- padding: $spacing-m $spacing-m !important;
428
- display: flex;
429
- flex-direction: column;
430
- gap: $spacing-xs;
431
- max-height: unset;
432
- }
433
402
 
434
- &-group {
435
- margin: 0;
436
- display: flex;
437
- flex-direction: column;
438
- gap: $spacing-xs;
403
+ &__close-icon {
404
+ display: flex;
405
+ align-items: center;
406
+ position: absolute;
407
+ top: 0;
408
+ right: 0;
409
+ height: 100%;
410
+ padding: $spacing-m;
411
+ width: 50px;
412
+ height: 50px;
413
+ box-sizing: border-box;
414
+
415
+ svg {
416
+ width: 16px;
417
+ height: 16px;
418
+ color: #a0a4b0;
419
+ }
420
+ }
439
421
 
440
- &:first-child {
441
- margin-top: calc($spacing-s * -1);
422
+ &__container &__list {
423
+ top: 0;
424
+ padding: $spacing-m $spacing-m !important;
425
+ display: flex;
426
+ flex-direction: column;
427
+ gap: $spacing-xs;
428
+ max-height: unset;
442
429
  }
443
430
 
444
- &__name {
431
+ &-group {
445
432
  margin: 0;
446
- margin-bottom: $spacing-s;
447
- font-size: 11px;
448
- padding: 10px 0px 6px 0px;
449
- box-shadow: none !important;
450
- border-bottom: 1px solid var(--black-gray-light-divider, rgba(58, 72, 122, 0.15));
451
- }
452
- }
433
+ display: flex;
434
+ flex-direction: column;
435
+ gap: $spacing-xs;
453
436
 
454
- &__list-item {
455
- display: flex;
456
- justify-content: space-between;
457
- height: auto !important;
458
- padding: 10px $spacing-s !important;
459
- line-height: 24px;
460
- min-height: unset!important;
437
+ &:first-child {
438
+ margin-top: calc($spacing-s * -1);
439
+ }
461
440
 
462
- &_active {
463
- border-radius: 6px;
464
- background: var(--bg-gray-box, #f0f1f4) !important;
441
+ &__name {
442
+ margin: 0;
443
+ margin-bottom: $spacing-s;
444
+ font-size: 11px;
445
+ padding: 10px 0px 6px 0px;
446
+ box-shadow: none !important;
447
+ border-bottom: 1px solid var(--black-gray-light-divider, rgba(58, 72, 122, 0.15));
448
+ }
465
449
  }
466
450
 
467
- .checkbox-input__input {
468
- margin: 0;
469
- margin-left: $spacing-s;
470
- }
451
+ &__list-item {
452
+ display: flex;
453
+ justify-content: space-between;
454
+ height: auto !important;
455
+ padding: 10px $spacing-s !important;
456
+ line-height: 24px;
457
+ min-height: unset!important;
471
458
 
472
- .search-match {
473
- font-weight: 600;
459
+ &_active {
460
+ border-radius: 6px;
461
+ background: var(--bg-gray-box, #f0f1f4) !important;
462
+ }
463
+
464
+ .checkbox-input__input {
465
+ margin: 0;
466
+ margin-left: $spacing-s;
467
+ }
468
+
469
+ .search-match {
470
+ font-weight: 600;
471
+ }
474
472
  }
475
- }
476
473
 
477
- &__arrow {
478
- top: 11px!important;
479
- width: 16px;
480
- height: 16px;
481
- display: flex;
482
- align-items: center;
483
- justify-content: center;
474
+ &__arrow {
475
+ top: 11px!important;
476
+ width: 16px;
477
+ height: 16px;
478
+ display: flex;
479
+ align-items: center;
480
+ justify-content: center;
484
481
 
485
- svg {
486
- height: 12px;
487
- transform: rotate(90deg);
482
+ svg.mobile-icon {
483
+ height: 12px;
484
+ transform: rotate(90deg);
485
+ }
488
486
  }
489
- }
490
487
 
491
- &__no-options {
492
- padding-left: 0!important;
493
- text-align: center;
488
+ &__no-options {
489
+ padding-left: 0!important;
490
+ text-align: center;
491
+ }
494
492
  }
495
493
  }
496
494
  }
package/dist/Atomic/UI/Modal/partials/useMobileModal.js CHANGED
@@ -31,7 +31,7 @@ var SCROLL_DIRECTION = {
31
31
  };
32
32
 
33
33
  function useMobileModal(_ref) {
34
- var _modalMobileContainer7, _modalMobileContainer8, _modalMobileHeaderRef3, _modalMobileHeaderRef4, _modalMobileBodyRef$c3, _modalMobileBodyRef$c4, _modalMobileFooterRef3, _modalMobileFooterRef4, _modalMobileFooterRef7, _modalMobileFooterRef8;
34
+ var _modalMobileHeaderRef5, _modalMobileHeaderRef6, _modalMobileFooterRef5, _modalMobileFooterRef6;
35
35
 
36
36
  var _ref$modalRef = _ref.modalRef,
37
37
  modalRef = _ref$modalRef === void 0 ? null : _ref$modalRef,
@@ -62,10 +62,7 @@ function useMobileModal(_ref) {
62
62
  setModalsLogic = _useState4[1];
63
63
 
64
64
  var _useState5 = (0, _react.useState)({
65
- modalMobileContainerHeight: 0,
66
65
  headerHeight: 0,
67
- bodyTop: 0,
68
- footerBottom: 0,
69
66
  footerHeight: 0
70
67
  }),
71
68
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -102,14 +99,16 @@ function useMobileModal(_ref) {
102
99
  el.addEventListener('scroll', function () {
103
100
  setScrollTop(function (scrollTop) {
104
101
  if (scrollTop !== el.scrollTop) setScrollTopPrev(scrollTop);
105
- return parseInt(el.scrollTop);
102
+ return el.scrollTop;
106
103
  });
107
104
  });
108
105
  }
109
106
  }, [modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : modalMobileContainerRef.current]); // Count ScrollDirection
110
107
 
111
108
  (0, _react.useEffect)(function () {
112
- setScrollDirection(scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : SCROLL_DIRECTION.DOWN);
109
+ setScrollDirection(function (prevScrollDirection) {
110
+ return scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : scrollTop > scrollTopPrev ? SCROLL_DIRECTION.DOWN : prevScrollDirection;
111
+ });
113
112
  }, [scrollTop, scrollTopPrev]); // Dynamic Modal Positioning
114
113
 
115
114
  (0, _react.useLayoutEffect)(function () {
@@ -145,70 +144,49 @@ function useMobileModal(_ref) {
145
144
  });
146
145
  (0, _react.useEffect)(function () {
147
146
  if (isMobile && withMobileLogic) {
148
- var footerBottom = modalsLogicProps.footerBottom,
149
- footerHeight = modalsLogicProps.footerHeight,
150
- headerHeight = modalsLogicProps.headerHeight,
151
- bodyTop = modalsLogicProps.bodyTop;
147
+ var footerHeight = modalsLogicProps.footerHeight,
148
+ headerHeight = modalsLogicProps.headerHeight;
152
149
  setModalsLogic(function (prevStickyLogic) {
153
150
  return {
154
- IS_HEADER_HIDDEN: footerBottom * -1 <= footerHeight || scrollDirection === SCROLL_DIRECTION.DOWN,
151
+ IS_HEADER_HIDDEN: scrollDirection === SCROLL_DIRECTION.DOWN || scrollTop === 0,
155
152
  IS_HEADER_STICKY: scrollDirection === SCROLL_DIRECTION.UP && scrollTop !== 0 && (scrollTop >= headerHeight || prevStickyLogic.IS_HEADER_STICKY),
156
- IS_FOOTER_HIDDEN: bodyTop > 0 || scrollDirection === SCROLL_DIRECTION.UP,
153
+ IS_FOOTER_HIDDEN: scrollDirection === SCROLL_DIRECTION.UP || scrollHeight === parseInt(scrollTop),
157
154
  IS_FOOTER_STICKY: scrollDirection === SCROLL_DIRECTION.DOWN && (scrollHeight - scrollTop >= footerHeight || prevStickyLogic.IS_FOOTER_STICKY)
158
155
  };
159
156
  });
160
157
  }
161
158
  }, [isMobile, withMobileLogic, scrollDirection, modalsLogicProps, modalHeight]);
162
159
  (0, _react.useLayoutEffect)(function () {
163
- setModalsLogicProps(function (state) {
164
- var _modalMobileContainer5, _modalMobileContainer6;
165
-
166
- return _objectSpread(_objectSpread({}, state), {}, {
167
- modalMobileContainerHeight: modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : (_modalMobileContainer5 = modalMobileContainerRef.current) === null || _modalMobileContainer5 === void 0 ? void 0 : (_modalMobileContainer6 = _modalMobileContainer5.getBoundingClientRect()) === null || _modalMobileContainer6 === void 0 ? void 0 : _modalMobileContainer6.height
168
- });
169
- });
170
- }, [modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : (_modalMobileContainer7 = modalMobileContainerRef.current) === null || _modalMobileContainer7 === void 0 ? void 0 : (_modalMobileContainer8 = _modalMobileContainer7.getBoundingClientRect()) === null || _modalMobileContainer8 === void 0 ? void 0 : _modalMobileContainer8.height]);
171
- (0, _react.useLayoutEffect)(function () {
172
- setModalsLogicProps(function (state) {
173
- var _modalMobileHeaderRef, _modalMobileHeaderRef2;
160
+ var _modalMobileHeaderRef, _modalMobileHeaderRef2;
174
161
 
175
- return _objectSpread(_objectSpread({}, state), {}, {
176
- headerHeight: modalMobileHeaderRef === null || modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef = modalMobileHeaderRef.current) === null || _modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef2 = _modalMobileHeaderRef.getBoundingClientRect()) === null || _modalMobileHeaderRef2 === void 0 ? void 0 : _modalMobileHeaderRef2.height
177
- });
178
- });
179
- }, [modalMobileHeaderRef === null || modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef3 = modalMobileHeaderRef.current) === null || _modalMobileHeaderRef3 === void 0 ? void 0 : (_modalMobileHeaderRef4 = _modalMobileHeaderRef3.getBoundingClientRect()) === null || _modalMobileHeaderRef4 === void 0 ? void 0 : _modalMobileHeaderRef4.height]);
180
- (0, _react.useLayoutEffect)(function () {
181
- setModalsLogicProps(function (state) {
182
- var _modalMobileBodyRef$c, _modalMobileBodyRef$c2;
162
+ if ((modalMobileHeaderRef === null || modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef = modalMobileHeaderRef.current) === null || _modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef2 = _modalMobileHeaderRef.getBoundingClientRect()) === null || _modalMobileHeaderRef2 === void 0 ? void 0 : _modalMobileHeaderRef2.height) !== undefined) {
163
+ setModalsLogicProps(function (state) {
164
+ var _modalMobileHeaderRef3, _modalMobileHeaderRef4;
183
165
 
184
- return _objectSpread(_objectSpread({}, state), {}, {
185
- bodyTop: modalMobileBodyRef === null || modalMobileBodyRef === void 0 ? void 0 : (_modalMobileBodyRef$c = modalMobileBodyRef.current) === null || _modalMobileBodyRef$c === void 0 ? void 0 : (_modalMobileBodyRef$c2 = _modalMobileBodyRef$c.getBoundingClientRect()) === null || _modalMobileBodyRef$c2 === void 0 ? void 0 : _modalMobileBodyRef$c2.top
166
+ return _objectSpread(_objectSpread({}, state), {}, {
167
+ headerHeight: modalMobileHeaderRef === null || modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef3 = modalMobileHeaderRef.current) === null || _modalMobileHeaderRef3 === void 0 ? void 0 : (_modalMobileHeaderRef4 = _modalMobileHeaderRef3.getBoundingClientRect()) === null || _modalMobileHeaderRef4 === void 0 ? void 0 : _modalMobileHeaderRef4.height
168
+ });
186
169
  });
187
- });
188
- }, [modalMobileBodyRef === null || modalMobileBodyRef === void 0 ? void 0 : (_modalMobileBodyRef$c3 = modalMobileBodyRef.current) === null || _modalMobileBodyRef$c3 === void 0 ? void 0 : (_modalMobileBodyRef$c4 = _modalMobileBodyRef$c3.getBoundingClientRect()) === null || _modalMobileBodyRef$c4 === void 0 ? void 0 : _modalMobileBodyRef$c4.top]);
170
+ }
171
+ }, [modalMobileHeaderRef === null || modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef5 = modalMobileHeaderRef.current) === null || _modalMobileHeaderRef5 === void 0 ? void 0 : (_modalMobileHeaderRef6 = _modalMobileHeaderRef5.getBoundingClientRect()) === null || _modalMobileHeaderRef6 === void 0 ? void 0 : _modalMobileHeaderRef6.height]);
189
172
  (0, _react.useLayoutEffect)(function () {
190
- setModalsLogicProps(function (state) {
191
- var _modalMobileFooterRef, _modalMobileFooterRef2;
173
+ var _modalMobileFooterRef, _modalMobileFooterRef2;
192
174
 
193
- return _objectSpread(_objectSpread({}, state), {}, {
194
- footerBottom: parseInt(modalsLogicProps.modalMobileContainerHeight - (modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef = modalMobileFooterRef.current) === null || _modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef2 = _modalMobileFooterRef.getBoundingClientRect()) === null || _modalMobileFooterRef2 === void 0 ? void 0 : _modalMobileFooterRef2.bottom))
195
- });
196
- });
197
- }, [modalsLogicProps.modalMobileContainerHeight, modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef3 = modalMobileFooterRef.current) === null || _modalMobileFooterRef3 === void 0 ? void 0 : (_modalMobileFooterRef4 = _modalMobileFooterRef3.getBoundingClientRect()) === null || _modalMobileFooterRef4 === void 0 ? void 0 : _modalMobileFooterRef4.bottom]);
198
- (0, _react.useLayoutEffect)(function () {
199
- setModalsLogicProps(function (state) {
200
- var _modalMobileFooterRef5, _modalMobileFooterRef6;
175
+ if ((modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef = modalMobileFooterRef.current) === null || _modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef2 = _modalMobileFooterRef.getBoundingClientRect()) === null || _modalMobileFooterRef2 === void 0 ? void 0 : _modalMobileFooterRef2.height) !== undefined) {
176
+ setModalsLogicProps(function (state) {
177
+ var _modalMobileFooterRef3, _modalMobileFooterRef4;
201
178
 
202
- return _objectSpread(_objectSpread({}, state), {}, {
203
- footerHeight: modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef5 = modalMobileFooterRef.current) === null || _modalMobileFooterRef5 === void 0 ? void 0 : (_modalMobileFooterRef6 = _modalMobileFooterRef5.getBoundingClientRect()) === null || _modalMobileFooterRef6 === void 0 ? void 0 : _modalMobileFooterRef6.height
179
+ return _objectSpread(_objectSpread({}, state), {}, {
180
+ footerHeight: modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef3 = modalMobileFooterRef.current) === null || _modalMobileFooterRef3 === void 0 ? void 0 : (_modalMobileFooterRef4 = _modalMobileFooterRef3.getBoundingClientRect()) === null || _modalMobileFooterRef4 === void 0 ? void 0 : _modalMobileFooterRef4.height
181
+ });
204
182
  });
205
- });
206
- }, [modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef7 = modalMobileFooterRef.current) === null || _modalMobileFooterRef7 === void 0 ? void 0 : (_modalMobileFooterRef8 = _modalMobileFooterRef7.getBoundingClientRect()) === null || _modalMobileFooterRef8 === void 0 ? void 0 : _modalMobileFooterRef8.height]);
183
+ }
184
+ }, [modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef5 = modalMobileFooterRef.current) === null || _modalMobileFooterRef5 === void 0 ? void 0 : (_modalMobileFooterRef6 = _modalMobileFooterRef5.getBoundingClientRect()) === null || _modalMobileFooterRef6 === void 0 ? void 0 : _modalMobileFooterRef6.height]);
207
185
  (0, _react.useEffect)(function () {
208
186
  if (modalMobileContainerRef !== null && modalMobileContainerRef !== void 0 && modalMobileContainerRef.current) {
209
- var _modalMobileContainer9, _modalMobileContainer10;
187
+ var _modalMobileContainer5, _modalMobileContainer6;
210
188
 
211
- setScrollHeight((modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : (_modalMobileContainer9 = modalMobileContainerRef.current) === null || _modalMobileContainer9 === void 0 ? void 0 : _modalMobileContainer9.scrollHeight) - (modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : (_modalMobileContainer10 = modalMobileContainerRef.current) === null || _modalMobileContainer10 === void 0 ? void 0 : _modalMobileContainer10.clientHeight));
189
+ setScrollHeight((modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : (_modalMobileContainer5 = modalMobileContainerRef.current) === null || _modalMobileContainer5 === void 0 ? void 0 : _modalMobileContainer5.scrollHeight) - (modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : (_modalMobileContainer6 = modalMobileContainerRef.current) === null || _modalMobileContainer6 === void 0 ? void 0 : _modalMobileContainer6.clientHeight));
212
190
  }
213
191
  }, [scrollTop, modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : modalMobileContainerRef.current]);
214
192
  /* MODALS LOGIC | END */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelicoreact",
3
- "version": "1.2.60",
3
+ "version": "1.2.61",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "files": [