@integry/sdk 4.7.39 → 4.7.41

package/src/components/MultipurposeField/TagMenu/index.ts

@@ -1,536 +0,0 @@
-/* eslint-disable no-nested-ternary */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { NestedObject } from '@/interfaces';
-import { html } from 'htm/preact';
-import { createRef } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { isScrolledIntoView } from '@/utils/common';
-import { searchJSON } from '@/utils/searchJson';
-import { Input } from '@/components/Input';
-// import TagsMenuComponent from '@/components/React/TagsMenu';
-import { TagsMenu } from '@/components/TagsMenu';
-import { TagOptions } from '../TagOptions';
-import { ThreeDotLoader } from '../../ThreeDotLoader';
-import styles from './styles.module.scss';
-
-// component to show tags in the tag menu
-
-// enum for active tab
-export enum Tabs {
-  Values = 'values',
-  AppFields = 'AppFields',
-}
-interface Option {
-  value: string;
-  id: string;
-  isSelected?: boolean;
-  icon?: string;
-  description?: string;
-}
-interface FieldMenuProps {
-  tags: NestedObject;
-  options?: Option[];
-  appName?: string;
-  onTagClick?: (tag: string) => void;
-  onOptionClick?: (option: Option) => void;
-  hideTabs?: boolean;
-  defaultTab?: Tabs.AppFields | Tabs.Values;
-  fieldId?: string;
-  value?: string;
-  onTabSelect?: (tab: Tabs) => void;
-  isMappable?: boolean;
-  isEditable?: boolean;
-  enableSearch?: boolean;
-  refreshRootStepData?: (callback?: any) => void;
-  handleRefreshClick?: (callback?: any, nextPage?: string) => void;
-  isErrorOnLoadingOptions?: boolean;
-  isMultiSelect?: boolean;
-  loadingOptions?: boolean;
-  nextPage?: string;
-  tagsComponent?: any;
-  isDynamic?: boolean;
-  tagsTree?: any;
-  showMenuOnLeft?: boolean; // used when showing mapping menu in web app.
-}
-
-const customComponent = (props: { element: any }) => {
-  const { element } = props;
-  return html` <${element} /> `;
-};
-
-const FieldDropdown = (props: FieldMenuProps) => {
-  const {
-    appName = '',
-    tags = {},
-    options = [],
-    hideTabs = false,
-    defaultTab = Tabs.AppFields,
-    onTagClick = () => null,
-    onOptionClick = () => null,
-    fieldId = '',
-    value,
-    onTabSelect,
-    isEditable = false,
-    enableSearch = false,
-    refreshRootStepData,
-    handleRefreshClick,
-    isErrorOnLoadingOptions = false,
-    isMultiSelect = false,
-    loadingOptions = false,
-    nextPage = '',
-    isDynamic = true,
-    tagsTree = null,
-    isMappable = false,
-    showMenuOnLeft = false,
-  } = props;
-
-  // Set active tab in state
-  const [activeTab, setActiveTab] = useState(defaultTab);
-  const menuItemRefs = useRef<any>([]);
-  const tagMenyStyleRef = useRef<{ bottom?: string } | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [renderAgain, setRenderAgain] = useState(false);
-  const [searchValue, setSearchValue] = useState('');
-  const [isLoadingRootStepData, setisLoadingRootStepData] = useState(false);
-  const [
-    isErrorOnLoadingRootStepData,
-    setIsErrorOnLoadingRootStepData,
-  ] = useState(false);
-  const [isLoadingOptions, setisLoadingOptions] = useState(loadingOptions);
-  const [isLoadingMoreOptions, setIsLoadingMoreOptions] = useState(false);
-
-  useEffect(() => {
-    let optionsToProcess = options;
-    if (!Array.isArray(options)) {
-      optionsToProcess = [];
-    }
-    menuItemRefs.current = (optionsToProcess || []).map(
-      (element, i) => menuItemRefs.current[i] ?? createRef(),
-    );
-  }, [options]);
-
-  const isContentOverflowing = (menuItemRef: any): boolean => {
-    if (menuItemRef && menuItemRef.current) {
-      return menuItemRef.current.clientWidth < menuItemRef.current.scrollWidth;
-    }
-    return false;
-  };
-
-  /* set menu position relative to parent container, 
-  as the menu position is fixed to make it visible outside the scrollable area */
-  const parentContainer = document.getElementById(fieldId);
-  const getDynamicTagMenuPosition = (): any => {
-    const top = parentContainer
-      ? parentContainer.getBoundingClientRect().bottom
-      : '';
-    let tagMenuStyle = {
-      top: parentContainer ? `${top}px` : '',
-      left: parentContainer
-        ? `${parentContainer.getBoundingClientRect().left}px`
-        : '',
-      display:
-        parentContainer &&
-        !isScrolledIntoView(parentContainer, 'steps-body-container')
-          ? 'none'
-          : 'block',
-      maxWidth: parentContainer
-        ? `${
-            parentContainer.getBoundingClientRect().width - (tagsTree ? 0 : 0)
-          }px`
-        : '342px',
-    } as any;
-    if (
-      parentContainer &&
-      parentContainer.getBoundingClientRect().bottom +
-        210 /* 210 is maxheight of tagMenu */ >
-        window.innerHeight - 8
-    ) {
-      // if tagMenu is overflowing window, display it above the field
-      tagMenuStyle = {
-        bottom: `${
-          window.innerHeight - parentContainer.getBoundingClientRect().top
-        }px`,
-        left: parentContainer
-          ? `${parentContainer.getBoundingClientRect().left}px`
-          : '',
-        display:
-          parentContainer &&
-          !isScrolledIntoView(parentContainer, 'steps-body-container')
-            ? 'none'
-            : 'block',
-        maxWidth: parentContainer
-          ? `${parentContainer.getBoundingClientRect().width}px`
-          : '342px',
-      };
-    }
-    return tagMenuStyle;
-  };
-
-  const getDynamicTagMenuPositionLeftAligned = (): any => {
-    let tagMenuStyle = {} as any;
-
-    if (parentContainer) {
-      const parentRect = parentContainer.getBoundingClientRect();
-      const estimatedMenuWidth = 210; // Estimated width for the menu
-      const estimatedMenuHeight = 400; // Estimated height for the menu (same as the 210 value mentioned in your original code)
-
-      // Position the menu to the left of the parent container
-      tagMenuStyle = {
-        top: `${parentRect.top}px`,
-        right: `${window.innerWidth - parentRect.left}px`, // This positions it to the left of the container
-        display: !isScrolledIntoView(parentContainer, 'steps-body-container')
-          ? 'none'
-          : 'block',
-      };
-
-      // Check if the tag menu would overflow to the left of the window
-      if (parentRect.left - estimatedMenuWidth < 0) {
-        // If it would overflow to the left, position it to the right of the parent instead
-        tagMenuStyle = {
-          ...tagMenuStyle,
-          right: 'auto', // Clear the right property
-          left: `${parentRect.right}px`,
-        };
-      }
-
-      // Check if the menu would overflow vertically
-      if (parentRect.top + estimatedMenuHeight > window.innerHeight - 8) {
-        // If it would overflow at the bottom, adjust the top position
-        const availableHeight = window.innerHeight - 8 - parentRect.top;
-        tagMenuStyle.maxHeight = `${availableHeight}px`;
-
-        // If available height is too small, position above the parent instead
-        if (availableHeight < 300) {
-          // Minimum usable height
-          tagMenuStyle.top = 'auto';
-          tagMenuStyle.bottom = `${
-            window.innerHeight - parentRect.top - parentRect.height
-          }px`;
-          tagMenuStyle.maxHeight = `${Math.min(
-            estimatedMenuHeight,
-            parentRect.top - 8,
-          )}px`;
-        }
-      } else {
-        tagMenuStyle.maxHeight = `${estimatedMenuHeight}px`;
-      }
-    } else {
-      tagMenuStyle = {
-        display: 'none',
-      };
-    }
-
-    return tagMenuStyle;
-  };
-
-  tagMenyStyleRef.current = showMenuOnLeft
-    ? getDynamicTagMenuPositionLeftAligned()
-    : getDynamicTagMenuPosition();
-
-  const onScroll = (): void => {
-    tagMenyStyleRef.current = showMenuOnLeft
-      ? getDynamicTagMenuPositionLeftAligned()
-      : getDynamicTagMenuPosition();
-    setRenderAgain((prev) => !prev);
-  };
-
-  const getFilteredOptions = (
-    optionsToFilter: Option[] = [],
-    searchText = '',
-  ): Option[] => {
-    if (searchText.trim().length === 0) {
-      return optionsToFilter;
-    }
-    return optionsToFilter.filter((obj) =>
-      obj.value.toLowerCase().includes(searchText.trim().toLowerCase()),
-    );
-  };
-  const handleTabSelection = (tab: Tabs): void => {
-    setActiveTab(tab);
-    if (onTabSelect) {
-      onTabSelect(tab);
-    }
-  };
-  useEffect(() => {
-    if (value && !hideTabs) {
-      if (value.startsWith('{') && value.endsWith('}')) {
-        handleTabSelection(Tabs.AppFields);
-      }
-    }
-    window.addEventListener('scroll', onScroll, true);
-    return () => window.removeEventListener('scroll', onScroll);
-  }, []);
-
-  const handleOnSearch = (val: string) => {
-    setSearchValue(val);
-  };
-
-  const refreshCallback = (error = false) => {
-    setisLoadingRootStepData(false);
-    setIsErrorOnLoadingRootStepData(error);
-  };
-
-  const handleRefresh = () => {
-    if (refreshRootStepData) {
-      setisLoadingRootStepData(true);
-      refreshRootStepData(refreshCallback);
-    }
-  };
-  let selectedValues: any = [];
-  if (value) {
-    if (isMultiSelect) {
-      try {
-        selectedValues = JSON.parse(value);
-        selectedValues = Array.isArray(selectedValues)
-          ? selectedValues
-          : [String(selectedValues)];
-      } catch (e) {
-        selectedValues = [String(value)];
-      }
-    } else {
-      selectedValues = [value];
-    }
-  }
-
-  const popoverBottom = tagMenyStyleRef?.current?.bottom;
-  const popoverTop = (tagMenyStyleRef?.current as {
-    top?: string;
-    bottom?: string;
-  })?.top;
-  // remove px from end and convert to number
-  const popoverVertical = popoverBottom
-    ? `bottom: ${Number(popoverBottom.replace('px', '')) + 10}px;`
-    : popoverTop
-    ? `top: ${Number(popoverTop.replace('px', '')) + 10}px;`
-    : 'top: 0px;';
-
-  return html` <div
-    class=${showMenuOnLeft ? `${styles.tagMenuV2Container}` : ''}
-  >
-    ${showMenuOnLeft &&
-    html`<div
-      class="popover-arrow"
-      style="position: fixed;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid rgb(189, 189, 189);${popoverVertical}"
-    ></div>`}
-
-    <div
-      class=${`${styles.tagMenu} ${tagsTree ? styles.tagMenuV2 : ''} ${
-        enableSearch && !tagsTree ? styles.tagMenuWithSearch : ''
-      }`}
-      style=${parentContainer && tagMenyStyleRef?.current
-        ? tagMenyStyleRef.current
-        : ''}
-    >
-      ${enableSearch &&
-      !tagsTree &&
-      html`
-        <div class=${styles.tagMenuSearch}>
-          <${Input}
-            id="search_${fieldId}"
-            placeholder="Search for a field"
-            value="${searchValue}"
-            onChange="${handleOnSearch}"
-          />
-        </div>
-      `}
-      ${!hideTabs &&
-      html`<div class=${styles.tagMenuHeader}>
-        <div
-          class=${`${styles.tagMenuHeaderItem} ${
-            activeTab === Tabs.Values ? styles.active : ''
-          }`}
-          onClick=${() => handleTabSelection(Tabs.Values)}
-        >
-          Values
-        </div>
-        <div
-          class=${`${styles.tagMenuHeaderItem} ${
-            activeTab === Tabs.AppFields ? styles.active : ''
-          }`}
-          onClick=${() => handleTabSelection(Tabs.AppFields)}
-        >
-          ${appName ? `${appName} fields` : 'Fields'}
-        </div>
-      </div>`}
-      <div
-        class=${`${styles.tagMenuBody} ${
-          enableSearch && !tagsTree ? styles.tagMenuBodyWithSearch : ''
-        }`}
-      >
-        ${activeTab === Tabs.Values && (tagsTree === null || isDynamic)
-          ? html`<div
-              className=${styles.tagMenuBodyItem}
-              id="tag-menu-body-item"
-            >
-              ${options.length > 0
-                ? getFilteredOptions(options, searchValue).length > 0
-                  ? getFilteredOptions(options, searchValue).map(
-                      (option, i, arr) => {
-                        if (i === arr.length - 1) {
-                          setisLoadingOptions(false);
-                        }
-                        return html`
-                          <div
-                            class=${`${styles.value} ${
-                              option.icon ? styles.valueWithIcon : ''
-                            } ${
-                              selectedValues.includes(option.id)
-                                ? styles.selected
-                                : ''
-                            }`}
-                            onClick=${(e: Event) => {
-                              e.stopPropagation();
-                              onOptionClick(option);
-                            }}
-                            ref=${menuItemRefs.current[i]}
-                          >
-                            ${option.icon &&
-                            html`<img
-                              src="${option.icon}"
-                              alt="icon"
-                              class="${styles.icon}"
-                            />`}
-                            <div class="label-text">
-                              <div
-                                class="${option.description
-                                  ? styles.nameWithDescription
-                                  : ''}"
-                              >
-                                ${option.value}
-                              </div>
-                              ${option.description &&
-                              html`<div class="${styles.description}">
-                                ${option.description}
-                              </div>`}
-                            </div>
-                          </div>
-
-                          ${i !== arr.length - 1
-                            ? ''
-                            : html`<span>
-                                ${isLoadingOptions || isLoadingMoreOptions
-                                  ? html`<${ThreeDotLoader} color="#999" />`
-                                  : isDynamic
-                                  ? html` <a
-                                      className=${styles.optionsRefreshProminent}
-                                      href="#"
-                                      onclick=${(e: Event) => {
-                                        e.preventDefault();
-                                        if (handleRefreshClick) {
-                                          setIsLoadingMoreOptions(true);
-                                          handleRefreshClick(
-                                            () =>
-                                              setIsLoadingMoreOptions(false),
-                                            nextPage,
-                                          );
-                                        }
-                                      }}
-                                      >${nextPage
-                                        ? `Load more options`
-                                        : `Reload options?`}</a
-                                    >`
-                                  : html``}
-                              </span>`}
-                        `;
-                      },
-                    )
-                  : html`<div className=${styles.noOptions}>
-                      Your search did not match any values
-                    </div>`
-                : html`<div className=${styles.noOptions}>
-                    <span className=${styles.noOptionsRetry}>
-                      ${isLoadingOptions || loadingOptions
-                        ? html`<${ThreeDotLoader} color="#999" />`
-                        : html`${isErrorOnLoadingOptions
-                              ? 'Could not load options.'
-                              : 'No options found.'}
-                            <a
-                              className=${styles.optionsRefresh}
-                              href="#"
-                              onclick=${(e: Event) => {
-                                e.preventDefault();
-                                if (handleRefreshClick) {
-                                  setisLoadingOptions(true);
-                                  handleRefreshClick(() =>
-                                    setisLoadingOptions(false),
-                                  );
-                                }
-                              }}
-                            >
-                              ${' '}Try again?</a
-                            >`}
-                    </span>
-                  </div>`}
-            </div>`
-          : html` <div className="${styles.mappedFieldMenu}">
-              ${tagsTree
-                ? html`<${TagsMenu}
-                    tagsTree=${tagsTree}
-                    onSelect=${onTagClick}
-                    renderValuesTab=${activeTab === Tabs.Values &&
-                    !isDynamic &&
-                    isMappable}
-                    options=${options}
-                    onOptionClick=${onOptionClick}
-                  />`
-                : html`${Object.keys(
-                    !isEditable ? searchJSON(tags, searchValue) : tags,
-                  ).length > 0
-                    ? Object.keys(
-                        !isEditable ? searchJSON(tags, searchValue) : tags,
-                      ).map(
-                        (objKey, index, arr) => html`
-                          <${TagOptions}
-                            objectKey="${objKey}"
-                            keyValue="${objKey}"
-                            objectData="${!isEditable
-                              ? searchJSON(tags, searchValue)[objKey]
-                              : tags[objKey]}"
-                            onSelect=${onTagClick}
-                            isRoot="${true}"
-                          />
-                          ${index !== arr.length - 1
-                            ? ''
-                            : html`<span>
-                                ${isLoadingRootStepData
-                                  ? html`<${ThreeDotLoader} color="#999" />`
-                                  : html` <a
-                                      className=${styles.optionsRefreshProminent}
-                                      href="#"
-                                      onclick=${handleRefresh}
-                                      >Reload fields?</a
-                                    >`}
-                              </span>`}
-                        `,
-                      )
-                    : html`<div className=${styles.noOptions}>
-                        ${!isEditable && searchValue !== ''
-                          ? 'Your search did not match any fields'
-                          : html`
-                              <span className=${styles.noOptionsRetry}>
-                                ${isLoadingRootStepData
-                                  ? html`<${ThreeDotLoader} color="#999" />`
-                                  : html`${isErrorOnLoadingRootStepData
-                                        ? 'Could not load fields.'
-                                        : 'No fields found.'}
-                                      <a
-                                        className=${styles.optionsRefresh}
-                                        href="#"
-                                        onclick=${(e: any) => {
-                                          e.preventDefault();
-                                          e.stopPropagation();
-                                          handleRefresh();
-                                        }}
-                                      >
-                                        ${' '}Try again?</a
-                                      >`}
-                              </span>
-                            `}
-                      </div>`}`}
-            </div>`}
-      </div>
-    </div>
-  </div>`;
-};
-
-export { FieldDropdown, FieldMenuProps };

package/src/components/MultipurposeField/TagMenu/styles.module.scss

@@ -1,175 +0,0 @@
-.tagMenu {
-  width: 100%;
-  max-width: 342px;
-  max-height: 210px;
-  background: #ffffff;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px 0px;
-  border: 1px solid #e2e0db;
-  border-radius: 4px;
-  padding: 12px;
-  overflow-y: auto;
-  margin-top: 0px;
-  position: fixed;
-  z-index: 999;
-  height: max-content;
-
-  &::-webkit-scrollbar {
-    width: 7px;
-  }
-
-  /* Track */
-  &::-webkit-scrollbar-track {
-    // background: #f1f1f1;
-    background: transparent;
-    border-radius: 8px;
-  }
-
-  /* Handle */
-  &::-webkit-scrollbar-thumb {
-    background: #bdbdbd;
-    border: 1px solid #bdbdbd;
-    border-radius: 8px;
-  }
-
-  /* Handle on hover */
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgb(116, 116, 116);
-  }
-
-  .tagMenuHeader {
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    margin-bottom: 16px;
-    gap: 8px;
-    .tagMenuHeaderItem {
-      padding: 6px 12px;
-      background: #f2f2f2;
-      border-radius: 5px;
-      font-weight: 400;
-      font-size: 10px;
-      line-height: 12px;
-      color: #333333;
-      cursor: pointer;
-      &.active {
-        background: #4250f0;
-        color: #ffffff;
-      }
-    }
-  }
-  .tagMenuBody {
-    min-height: 15px;
-    .tagMenuBodyItem {
-      .value {
-        box-sizing: border-box;
-        height: 31px;
-        padding: 8px 0px 8px 12px;
-        width: 100%;
-        font-size: 12px;
-        line-height: 15px;
-        color: #333333;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        margin-bottom: 5px;
-        cursor: pointer;
-        &:hover {
-          background: rgba(66, 80, 240, 0.1);
-          border-radius: 5px !important;
-        }
-      }
-      .valueWithIcon {
-        display: flex;
-        align-items: center;
-        gap: 8px; /* Adjust spacing between image and text */
-        height: 40px !important;
-      }
-      .icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .description {
-        font-size: 0.85em;
-        color: #666;
-        width: 31.5rem;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      .nameWithDescription {
-        font-weight: 500;
-      }
-      .selected {
-        background: rgba(66, 80, 240, 0.1);
-        border-radius: 5px;
-      }
-    }
-  }
-  .noOptions {
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 15px;
-    margin-left: 16px;
-    color: #999;
-    span.noOptionsRetry {
-      [class^='styles-module_loader_'] {
-        position: relative;
-        top: 5px;
-      }
-    }
-  }
-  a.optionsRefreshProminent {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 8px;
-    font-size: 12px;
-    line-height: 15px;
-    color: #4250f0;
-    cursor: pointer;
-    text-decoration: none;
-  }
-  a.optionsRefresh {
-    font-size: 12px;
-    line-height: 15px;
-    color: #4250f0;
-    cursor: pointer;
-    text-decoration: none;
-  }
-}
-.tagMenuSearch {
-  position: relative;
-  margin-bottom: 5px;
-  fieldset {
-    margin-bottom: 5px;
-  }
-}
-
-.tagMenuWithSearch {
-  padding-top: 0px;
-}
-.tagMenuBodyWithSearch {
-  max-height: 142px;
-  overflow-y: auto;
-  span {
-    padding-left: 3px !important;
-  }
-}
-
-.tagMenuV2 {
-  height: max-content;
-  max-height: 405px !important;
-  max-width: 550px !important;
-  overflow: hidden;
-  min-width: 470px;
-  margin-right: 10px;
-  width: fit-content !important;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1),
-    0 4px 8px rgba(0, 0, 0, 0.05) !important;
-}
-.tagMenuV2Container {
-  display: block;
-  position: absolute;
-  left: -10px;
-  top: 0;
-}