@integry/sdk 4.6.87 → 4.6.89

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/esm/index.csm.js +1 -1
  2. package/dist/umd/index.umd.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/MultipurposeField/TagMenu/index.ts +231 -202
  5. package/src/components/MultipurposeField/TagMenu/styles.module.scss +10 -2
  6. package/src/components/TagsMenu/styles.module.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@integry/sdk",
3
- "version": "4.6.87",
3
+ "version": "4.6.89",
4
4
  "description": "Integry SDK",
5
5
  "main": "dist/umd/index.umd.js",
6
6
  "module": "dist/esm/index.csm.js",
package/src/components/MultipurposeField/TagMenu/index.ts CHANGED
@@ -87,7 +87,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
87
87
  // Set active tab in state
88
88
  const [activeTab, setActiveTab] = useState(defaultTab);
89
89
  const menuItemRefs = useRef<any>([]);
90
- const tagMenyStyleRef = useRef(null);
90
+ const tagMenyStyleRef = useRef<{ bottom?: string } | null>(null);
91
91
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
92
92
  const [renderAgain, setRenderAgain] = useState(false);
93
93
  const [searchValue, setSearchValue] = useState('');
@@ -206,10 +206,13 @@ const FieldDropdown = (props: FieldMenuProps) => {
206
206
  tagMenuStyle.bottom = `${
207
207
  window.innerHeight - parentRect.top - parentRect.height
208
208
  }px`;
209
- tagMenuStyle.maxHeight = `fit-content`;
209
+ tagMenuStyle.maxHeight = `${Math.min(
210
+ estimatedMenuHeight,
211
+ parentRect.top - 8,
212
+ )}px`;
210
213
  }
211
214
  } else {
212
- tagMenuStyle.maxHeight = `fit-content`;
215
+ tagMenuStyle.maxHeight = `${estimatedMenuHeight}px`;
213
216
  }
214
217
  } else {
215
218
  tagMenuStyle = {
@@ -289,217 +292,243 @@ const FieldDropdown = (props: FieldMenuProps) => {
289
292
  }
290
293
  }
291
294
 
295
+ const popoverBottom = tagMenyStyleRef?.current?.bottom;
296
+ const popoverTop = (tagMenyStyleRef?.current as {
297
+ top?: string;
298
+ bottom?: string;
299
+ })?.top;
300
+ // remove px from end and convert to number
301
+ const popoverVertical = popoverBottom
302
+ ? `bottom: ${Number(popoverBottom.replace('px', '')) + 10}px;`
303
+ : popoverTop
304
+ ? `top: ${Number(popoverTop.replace('px', '')) + 10}px;`
305
+ : 'top: 0px;';
306
+
292
307
  return html` <div
293
- class=${`${styles.tagMenu} ${tagsTree ? styles.tagMenuV2 : ''} ${
294
- enableSearch && !tagsTree ? styles.tagMenuWithSearch : ''
295
- }`}
296
- style=${parentContainer && tagMenyStyleRef?.current
297
- ? tagMenyStyleRef.current
298
- : ''}
308
+ class=${showMenuOnLeft ? `${styles.tagMenuV2Container}` : ''}
299
309
  >
300
- ${enableSearch &&
301
- !tagsTree &&
302
- html`
303
- <div class=${styles.tagMenuSearch}>
304
- <${Input}
305
- id="search_${fieldId}"
306
- placeholder="Search for a field"
307
- value="${searchValue}"
308
- onChange="${handleOnSearch}"
309
- />
310
- </div>
311
- `}
312
- ${!hideTabs &&
313
- html`<div class=${styles.tagMenuHeader}>
314
- <div
315
- class=${`${styles.tagMenuHeaderItem} ${
316
- activeTab === Tabs.Values ? styles.active : ''
317
- }`}
318
- onClick=${() => handleTabSelection(Tabs.Values)}
319
- >
320
- Values
321
- </div>
322
- <div
323
- class=${`${styles.tagMenuHeaderItem} ${
324
- activeTab === Tabs.AppFields ? styles.active : ''
325
- }`}
326
- onClick=${() => handleTabSelection(Tabs.AppFields)}
327
- >
328
- ${appName ? `${appName} fields` : 'Fields'}
329
- </div>
330
- </div>`}
310
+ ${showMenuOnLeft &&
311
+ html`<div
312
+ class="popover-arrow"
313
+ style="position: fixed;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid rgb(189, 189, 189);${popoverVertical}"
314
+ ></div>`}
315
+
331
316
  <div
332
- class=${`${styles.tagMenuBody} ${
333
- enableSearch && !tagsTree ? styles.tagMenuBodyWithSearch : ''
317
+ class=${`${styles.tagMenu} ${tagsTree ? styles.tagMenuV2 : ''} ${
318
+ enableSearch && !tagsTree ? styles.tagMenuWithSearch : ''
334
319
  }`}
320
+ style=${parentContainer && tagMenyStyleRef?.current
321
+ ? tagMenyStyleRef.current
322
+ : ''}
335
323
  >
336
- ${activeTab === Tabs.Values && (tagsTree === null || isDynamic)
337
- ? html`<div className=${styles.tagMenuBodyItem} id="tag-menu-body-item">
338
- ${options.length > 0
339
- ? getFilteredOptions(options, searchValue).length > 0
340
- ? getFilteredOptions(options, searchValue).map(
341
- (option, i, arr) => {
342
- if (i === arr.length - 1) {
343
- setisLoadingOptions(false);
344
- }
345
- return html`
346
- <div
347
- class=${`${styles.value} ${
348
- option.icon ? styles.valueWithIcon : ''
349
- } ${
350
- selectedValues.includes(option.id)
351
- ? styles.selected
352
- : ''
353
- }`}
354
- onClick=${(e: Event) => {
355
- e.stopPropagation();
356
- onOptionClick(option);
357
- }}
358
- ref=${menuItemRefs.current[i]}
359
- >
360
- ${option.icon &&
361
- html`<img
362
- src="${option.icon}"
363
- alt="icon"
364
- class="${styles.icon}"
365
- />`}
366
- <div class="label-text">
367
- <div
368
- class="${option.description
369
- ? styles.nameWithDescription
370
- : ''}"
371
- >
372
- ${option.value}
324
+ ${enableSearch &&
325
+ !tagsTree &&
326
+ html`
327
+ <div class=${styles.tagMenuSearch}>
328
+ <${Input}
329
+ id="search_${fieldId}"
330
+ placeholder="Search for a field"
331
+ value="${searchValue}"
332
+ onChange="${handleOnSearch}"
333
+ />
334
+ </div>
335
+ `}
336
+ ${!hideTabs &&
337
+ html`<div class=${styles.tagMenuHeader}>
338
+ <div
339
+ class=${`${styles.tagMenuHeaderItem} ${
340
+ activeTab === Tabs.Values ? styles.active : ''
341
+ }`}
342
+ onClick=${() => handleTabSelection(Tabs.Values)}
343
+ >
344
+ Values
345
+ </div>
346
+ <div
347
+ class=${`${styles.tagMenuHeaderItem} ${
348
+ activeTab === Tabs.AppFields ? styles.active : ''
349
+ }`}
350
+ onClick=${() => handleTabSelection(Tabs.AppFields)}
351
+ >
352
+ ${appName ? `${appName} fields` : 'Fields'}
353
+ </div>
354
+ </div>`}
355
+ <div
356
+ class=${`${styles.tagMenuBody} ${
357
+ enableSearch && !tagsTree ? styles.tagMenuBodyWithSearch : ''
358
+ }`}
359
+ >
360
+ ${activeTab === Tabs.Values && (tagsTree === null || isDynamic)
361
+ ? html`<div
362
+ className=${styles.tagMenuBodyItem}
363
+ id="tag-menu-body-item"
364
+ >
365
+ ${options.length > 0
366
+ ? getFilteredOptions(options, searchValue).length > 0
367
+ ? getFilteredOptions(options, searchValue).map(
368
+ (option, i, arr) => {
369
+ if (i === arr.length - 1) {
370
+ setisLoadingOptions(false);
371
+ }
372
+ return html`
373
+ <div
374
+ class=${`${styles.value} ${
375
+ option.icon ? styles.valueWithIcon : ''
376
+ } ${
377
+ selectedValues.includes(option.id)
378
+ ? styles.selected
379
+ : ''
380
+ }`}
381
+ onClick=${(e: Event) => {
382
+ e.stopPropagation();
383
+ onOptionClick(option);
384
+ }}
385
+ ref=${menuItemRefs.current[i]}
386
+ >
387
+ ${option.icon &&
388
+ html`<img
389
+ src="${option.icon}"
390
+ alt="icon"
391
+ class="${styles.icon}"
392
+ />`}
393
+ <div class="label-text">
394
+ <div
395
+ class="${option.description
396
+ ? styles.nameWithDescription
397
+ : ''}"
398
+ >
399
+ ${option.value}
400
+ </div>
401
+ ${option.description &&
402
+ html`<div class="${styles.description}">
403
+ ${option.description}
404
+ </div>`}
373
405
  </div>
374
- ${option.description &&
375
- html`<div class="${styles.description}">
376
- ${option.description}
377
- </div>`}
378
406
  </div>
379
- </div>
380
407
 
381
- ${i !== arr.length - 1
382
- ? ''
383
- : html`<span>
384
- ${isLoadingOptions || isLoadingMoreOptions
385
- ? html`<${ThreeDotLoader} color="#999" />`
386
- : isDynamic
387
- ? html` <a
388
- className=${styles.optionsRefreshProminent}
389
- href="#"
390
- onclick=${(e: Event) => {
391
- e.preventDefault();
392
- if (handleRefreshClick) {
393
- setIsLoadingMoreOptions(true);
394
- handleRefreshClick(
395
- () => setIsLoadingMoreOptions(false),
396
- nextPage,
397
- );
398
- }
399
- }}
400
- >${nextPage
401
- ? `Load more options`
402
- : `Reload options?`}</a
403
- >`
404
- : html``}
405
- </span>`}
406
- `;
407
- },
408
- )
409
- : html`<div className=${styles.noOptions}>
410
- Your search did not match any values
411
- </div>`
412
- : html`<div className=${styles.noOptions}>
413
- <span className=${styles.noOptionsRetry}>
414
- ${isLoadingOptions || loadingOptions
415
- ? html`<${ThreeDotLoader} color="#999" />`
416
- : html`${isErrorOnLoadingOptions
417
- ? 'Could not load options.'
418
- : 'No options found.'}
419
- <a
420
- className=${styles.optionsRefresh}
421
- href="#"
422
- onclick=${(e: Event) => {
423
- e.preventDefault();
424
- if (handleRefreshClick) {
425
- setisLoadingOptions(true);
426
- handleRefreshClick(() =>
427
- setisLoadingOptions(false),
428
- );
429
- }
430
- }}
431
- >
432
- ${' '}Try again?</a
433
- >`}
434
- </span>
435
- </div>`}
436
- </div>`
437
- : html` <div className="${styles.mappedFieldMenu}">
438
- ${tagsTree
439
- ? html`<${TagsMenu}
440
- tagsTree=${tagsTree}
441
- onSelect=${onTagClick}
442
- renderValuesTab=${activeTab === Tabs.Values &&
443
- !isDynamic &&
444
- isMappable}
445
- options=${options}
446
- onOptionClick=${onOptionClick}
447
- />`
448
- : html`${Object.keys(
449
- !isEditable ? searchJSON(tags, searchValue) : tags,
450
- ).length > 0
451
- ? Object.keys(
452
- !isEditable ? searchJSON(tags, searchValue) : tags,
453
- ).map(
454
- (objKey, index, arr) => html`
455
- <${TagOptions}
456
- objectKey="${objKey}"
457
- keyValue="${objKey}"
458
- objectData="${!isEditable
459
- ? searchJSON(tags, searchValue)[objKey]
460
- : tags[objKey]}"
461
- onSelect=${onTagClick}
462
- isRoot="${true}"
463
- />
464
- ${index !== arr.length - 1
465
- ? ''
466
- : html`<span>
467
- ${isLoadingRootStepData
468
- ? html`<${ThreeDotLoader} color="#999" />`
469
- : html` <a
470
- className=${styles.optionsRefreshProminent}
471
- href="#"
472
- onclick=${handleRefresh}
473
- >Reload fields?</a
474
- >`}
475
- </span>`}
476
- `,
477
- )
478
- : html`<div className=${styles.noOptions}>
479
- ${!isEditable && searchValue !== ''
480
- ? 'Your search did not match any fields'
481
- : html`
482
- <span className=${styles.noOptionsRetry}>
483
- ${isLoadingRootStepData
484
- ? html`<${ThreeDotLoader} color="#999" />`
485
- : html`${isErrorOnLoadingRootStepData
486
- ? 'Could not load fields.'
487
- : 'No fields found.'}
488
- <a
489
- className=${styles.optionsRefresh}
408
+ ${i !== arr.length - 1
409
+ ? ''
410
+ : html`<span>
411
+ ${isLoadingOptions || isLoadingMoreOptions
412
+ ? html`<${ThreeDotLoader} color="#999" />`
413
+ : isDynamic
414
+ ? html` <a
415
+ className=${styles.optionsRefreshProminent}
490
416
  href="#"
491
- onclick=${(e: any) => {
417
+ onclick=${(e: Event) => {
492
418
  e.preventDefault();
493
- e.stopPropagation();
494
- handleRefresh();
419
+ if (handleRefreshClick) {
420
+ setIsLoadingMoreOptions(true);
421
+ handleRefreshClick(
422
+ () =>
423
+ setIsLoadingMoreOptions(false),
424
+ nextPage,
425
+ );
426
+ }
495
427
  }}
496
- >
497
- ${' '}Try again?</a
428
+ >${nextPage
429
+ ? `Load more options`
430
+ : `Reload options?`}</a
431
+ >`
432
+ : html``}
433
+ </span>`}
434
+ `;
435
+ },
436
+ )
437
+ : html`<div className=${styles.noOptions}>
438
+ Your search did not match any values
439
+ </div>`
440
+ : html`<div className=${styles.noOptions}>
441
+ <span className=${styles.noOptionsRetry}>
442
+ ${isLoadingOptions || loadingOptions
443
+ ? html`<${ThreeDotLoader} color="#999" />`
444
+ : html`${isErrorOnLoadingOptions
445
+ ? 'Could not load options.'
446
+ : 'No options found.'}
447
+ <a
448
+ className=${styles.optionsRefresh}
449
+ href="#"
450
+ onclick=${(e: Event) => {
451
+ e.preventDefault();
452
+ if (handleRefreshClick) {
453
+ setisLoadingOptions(true);
454
+ handleRefreshClick(() =>
455
+ setisLoadingOptions(false),
456
+ );
457
+ }
458
+ }}
459
+ >
460
+ ${' '}Try again?</a
461
+ >`}
462
+ </span>
463
+ </div>`}
464
+ </div>`
465
+ : html` <div className="${styles.mappedFieldMenu}">
466
+ ${tagsTree
467
+ ? html`<${TagsMenu}
468
+ tagsTree=${tagsTree}
469
+ onSelect=${onTagClick}
470
+ renderValuesTab=${activeTab === Tabs.Values &&
471
+ !isDynamic &&
472
+ isMappable}
473
+ options=${options}
474
+ onOptionClick=${onOptionClick}
475
+ />`
476
+ : html`${Object.keys(
477
+ !isEditable ? searchJSON(tags, searchValue) : tags,
478
+ ).length > 0
479
+ ? Object.keys(
480
+ !isEditable ? searchJSON(tags, searchValue) : tags,
481
+ ).map(
482
+ (objKey, index, arr) => html`
483
+ <${TagOptions}
484
+ objectKey="${objKey}"
485
+ keyValue="${objKey}"
486
+ objectData="${!isEditable
487
+ ? searchJSON(tags, searchValue)[objKey]
488
+ : tags[objKey]}"
489
+ onSelect=${onTagClick}
490
+ isRoot="${true}"
491
+ />
492
+ ${index !== arr.length - 1
493
+ ? ''
494
+ : html`<span>
495
+ ${isLoadingRootStepData
496
+ ? html`<${ThreeDotLoader} color="#999" />`
497
+ : html` <a
498
+ className=${styles.optionsRefreshProminent}
499
+ href="#"
500
+ onclick=${handleRefresh}
501
+ >Reload fields?</a
498
502
  >`}
499
- </span>
500
- `}
501
- </div>`}`}
502
- </div>`}
503
+ </span>`}
504
+ `,
505
+ )
506
+ : html`<div className=${styles.noOptions}>
507
+ ${!isEditable && searchValue !== ''
508
+ ? 'Your search did not match any fields'
509
+ : html`
510
+ <span className=${styles.noOptionsRetry}>
511
+ ${isLoadingRootStepData
512
+ ? html`<${ThreeDotLoader} color="#999" />`
513
+ : html`${isErrorOnLoadingRootStepData
514
+ ? 'Could not load fields.'
515
+ : 'No fields found.'}
516
+ <a
517
+ className=${styles.optionsRefresh}
518
+ href="#"
519
+ onclick=${(e: any) => {
520
+ e.preventDefault();
521
+ e.stopPropagation();
522
+ handleRefresh();
523
+ }}
524
+ >
525
+ ${' '}Try again?</a
526
+ >`}
527
+ </span>
528
+ `}
529
+ </div>`}`}
530
+ </div>`}
531
+ </div>
503
532
  </div>
504
533
  </div>`;
505
534
  };
package/src/components/MultipurposeField/TagMenu/styles.module.scss CHANGED
@@ -158,8 +158,16 @@
158
158
 
159
159
  .tagMenuV2 {
160
160
  height: max-content;
161
- max-height: fit-content;
162
- max-width: fit-content !important;
161
+ max-height: 405px !important;
162
+ max-width: 550px !important;
163
163
  overflow: hidden;
164
164
  min-width: 470px;
165
+ margin-right: 13px;
166
+ width: fit-content;
167
+ }
168
+ .tagMenuV2Container {
169
+ display: block;
170
+ position: absolute;
171
+ left: -13px;
172
+ top: 0;
165
173
  }
package/src/components/TagsMenu/styles.module.scss CHANGED
@@ -284,7 +284,7 @@
284
284
  }
285
285
  }
286
286
  .tagsListWrapper {
287
- max-height: 75vh; /* Increased max height for better viewing - old was 260px */
287
+ max-height: 260px; /* Increased max height for better viewing - old was 260px */
288
288
  overflow-y: auto;
289
289
  .valuesList {
290
290
  ul {