@integry/sdk 4.6.86 → 4.6.88

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 +226 -200
  5. package/src/components/MultipurposeField/TagMenu/styles.module.scss +8 -1
  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.86",
3
+ "version": "4.6.88",
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('');
@@ -292,217 +292,243 @@ const FieldDropdown = (props: FieldMenuProps) => {
292
292
  }
293
293
  }
294
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', '')) + 20}px;`
303
+ : popoverTop
304
+ ? `top: ${Number(popoverTop.replace('px', '')) + 20}px;`
305
+ : 'top: 0px;';
306
+
295
307
  return html` <div
296
- class=${`${styles.tagMenu} ${tagsTree ? styles.tagMenuV2 : ''} ${
297
- enableSearch && !tagsTree ? styles.tagMenuWithSearch : ''
298
- }`}
299
- style=${parentContainer && tagMenyStyleRef?.current
300
- ? tagMenyStyleRef.current
301
- : ''}
308
+ class=${showMenuOnLeft ? `${styles.tagMenuV2Container}` : ''}
302
309
  >
303
- ${enableSearch &&
304
- !tagsTree &&
305
- html`
306
- <div class=${styles.tagMenuSearch}>
307
- <${Input}
308
- id="search_${fieldId}"
309
- placeholder="Search for a field"
310
- value="${searchValue}"
311
- onChange="${handleOnSearch}"
312
- />
313
- </div>
314
- `}
315
- ${!hideTabs &&
316
- html`<div class=${styles.tagMenuHeader}>
317
- <div
318
- class=${`${styles.tagMenuHeaderItem} ${
319
- activeTab === Tabs.Values ? styles.active : ''
320
- }`}
321
- onClick=${() => handleTabSelection(Tabs.Values)}
322
- >
323
- Values
324
- </div>
325
- <div
326
- class=${`${styles.tagMenuHeaderItem} ${
327
- activeTab === Tabs.AppFields ? styles.active : ''
328
- }`}
329
- onClick=${() => handleTabSelection(Tabs.AppFields)}
330
- >
331
- ${appName ? `${appName} fields` : 'Fields'}
332
- </div>
333
- </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
+
334
316
  <div
335
- class=${`${styles.tagMenuBody} ${
336
- enableSearch && !tagsTree ? styles.tagMenuBodyWithSearch : ''
317
+ class=${`${styles.tagMenu} ${tagsTree ? styles.tagMenuV2 : ''} ${
318
+ enableSearch && !tagsTree ? styles.tagMenuWithSearch : ''
337
319
  }`}
320
+ style=${parentContainer && tagMenyStyleRef?.current
321
+ ? tagMenyStyleRef.current
322
+ : ''}
338
323
  >
339
- ${activeTab === Tabs.Values && (tagsTree === null || isDynamic)
340
- ? html`<div className=${styles.tagMenuBodyItem} id="tag-menu-body-item">
341
- ${options.length > 0
342
- ? getFilteredOptions(options, searchValue).length > 0
343
- ? getFilteredOptions(options, searchValue).map(
344
- (option, i, arr) => {
345
- if (i === arr.length - 1) {
346
- setisLoadingOptions(false);
347
- }
348
- return html`
349
- <div
350
- class=${`${styles.value} ${
351
- option.icon ? styles.valueWithIcon : ''
352
- } ${
353
- selectedValues.includes(option.id)
354
- ? styles.selected
355
- : ''
356
- }`}
357
- onClick=${(e: Event) => {
358
- e.stopPropagation();
359
- onOptionClick(option);
360
- }}
361
- ref=${menuItemRefs.current[i]}
362
- >
363
- ${option.icon &&
364
- html`<img
365
- src="${option.icon}"
366
- alt="icon"
367
- class="${styles.icon}"
368
- />`}
369
- <div class="label-text">
370
- <div
371
- class="${option.description
372
- ? styles.nameWithDescription
373
- : ''}"
374
- >
375
- ${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>`}
376
405
  </div>
377
- ${option.description &&
378
- html`<div class="${styles.description}">
379
- ${option.description}
380
- </div>`}
381
406
  </div>
382
- </div>
383
407
 
384
- ${i !== arr.length - 1
385
- ? ''
386
- : html`<span>
387
- ${isLoadingOptions || isLoadingMoreOptions
388
- ? html`<${ThreeDotLoader} color="#999" />`
389
- : isDynamic
390
- ? html` <a
391
- className=${styles.optionsRefreshProminent}
392
- href="#"
393
- onclick=${(e: Event) => {
394
- e.preventDefault();
395
- if (handleRefreshClick) {
396
- setIsLoadingMoreOptions(true);
397
- handleRefreshClick(
398
- () => setIsLoadingMoreOptions(false),
399
- nextPage,
400
- );
401
- }
402
- }}
403
- >${nextPage
404
- ? `Load more options`
405
- : `Reload options?`}</a
406
- >`
407
- : html``}
408
- </span>`}
409
- `;
410
- },
411
- )
412
- : html`<div className=${styles.noOptions}>
413
- Your search did not match any values
414
- </div>`
415
- : html`<div className=${styles.noOptions}>
416
- <span className=${styles.noOptionsRetry}>
417
- ${isLoadingOptions || loadingOptions
418
- ? html`<${ThreeDotLoader} color="#999" />`
419
- : html`${isErrorOnLoadingOptions
420
- ? 'Could not load options.'
421
- : 'No options found.'}
422
- <a
423
- className=${styles.optionsRefresh}
424
- href="#"
425
- onclick=${(e: Event) => {
426
- e.preventDefault();
427
- if (handleRefreshClick) {
428
- setisLoadingOptions(true);
429
- handleRefreshClick(() =>
430
- setisLoadingOptions(false),
431
- );
432
- }
433
- }}
434
- >
435
- ${' '}Try again?</a
436
- >`}
437
- </span>
438
- </div>`}
439
- </div>`
440
- : html` <div className="${styles.mappedFieldMenu}">
441
- ${tagsTree
442
- ? html`<${TagsMenu}
443
- tagsTree=${tagsTree}
444
- onSelect=${onTagClick}
445
- renderValuesTab=${activeTab === Tabs.Values &&
446
- !isDynamic &&
447
- isMappable}
448
- options=${options}
449
- onOptionClick=${onOptionClick}
450
- />`
451
- : html`${Object.keys(
452
- !isEditable ? searchJSON(tags, searchValue) : tags,
453
- ).length > 0
454
- ? Object.keys(
455
- !isEditable ? searchJSON(tags, searchValue) : tags,
456
- ).map(
457
- (objKey, index, arr) => html`
458
- <${TagOptions}
459
- objectKey="${objKey}"
460
- keyValue="${objKey}"
461
- objectData="${!isEditable
462
- ? searchJSON(tags, searchValue)[objKey]
463
- : tags[objKey]}"
464
- onSelect=${onTagClick}
465
- isRoot="${true}"
466
- />
467
- ${index !== arr.length - 1
468
- ? ''
469
- : html`<span>
470
- ${isLoadingRootStepData
471
- ? html`<${ThreeDotLoader} color="#999" />`
472
- : html` <a
473
- className=${styles.optionsRefreshProminent}
474
- href="#"
475
- onclick=${handleRefresh}
476
- >Reload fields?</a
477
- >`}
478
- </span>`}
479
- `,
480
- )
481
- : html`<div className=${styles.noOptions}>
482
- ${!isEditable && searchValue !== ''
483
- ? 'Your search did not match any fields'
484
- : html`
485
- <span className=${styles.noOptionsRetry}>
486
- ${isLoadingRootStepData
487
- ? html`<${ThreeDotLoader} color="#999" />`
488
- : html`${isErrorOnLoadingRootStepData
489
- ? 'Could not load fields.'
490
- : 'No fields found.'}
491
- <a
492
- 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}
493
416
  href="#"
494
- onclick=${(e: any) => {
417
+ onclick=${(e: Event) => {
495
418
  e.preventDefault();
496
- e.stopPropagation();
497
- handleRefresh();
419
+ if (handleRefreshClick) {
420
+ setIsLoadingMoreOptions(true);
421
+ handleRefreshClick(
422
+ () =>
423
+ setIsLoadingMoreOptions(false),
424
+ nextPage,
425
+ );
426
+ }
498
427
  }}
499
- >
500
- ${' '}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
501
502
  >`}
502
- </span>
503
- `}
504
- </div>`}`}
505
- </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>
506
532
  </div>
507
533
  </div>`;
508
534
  };
package/src/components/MultipurposeField/TagMenu/styles.module.scss CHANGED
@@ -158,8 +158,15 @@
158
158
 
159
159
  .tagMenuV2 {
160
160
  height: max-content;
161
- max-height: 405px !important;
161
+ max-height: 405px;
162
162
  max-width: fit-content !important;
163
163
  overflow: hidden;
164
164
  min-width: 470px;
165
+ margin-right: 20px;
166
+ }
167
+ .tagMenuV2Container {
168
+ display: block;
169
+ position: absolute;
170
+ left: -13px;
171
+ top: 0;
165
172
  }
package/src/components/TagsMenu/styles.module.scss CHANGED
@@ -284,7 +284,7 @@
284
284
  }
285
285
  }
286
286
  .tagsListWrapper {
287
- max-height: 260px; /* Increased max height for better viewing */
287
+ max-height: 260px; /* Increased max height for better viewing - old was 260px */
288
288
  overflow-y: auto;
289
289
  .valuesList {
290
290
  ul {