@integry/sdk 4.5.2 → 4.5.3

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

@@ -0,0 +1,208 @@
+.listboxGroupWrapper {
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    margin-bottom: 16px !important;
+  }
+}
+
+.listbox {
+  position: relative;
+  max-width: 100%;
+  user-select: none;
+  .customSelect {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    font-family: inherit;
+    letter-spacing: -0.2px;
+    color: #999999;
+
+    &.open .customOptions {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+    .readonlyHint {
+      width: 100%;
+      height: 100%;
+      z-index: 99;
+      position: absolute;
+    }
+  }
+  .disabled {
+    background: #eee;
+  }
+  .customSelectTrigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: 40px;
+    padding: 0 10px;
+    justify-content: space-between;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: inherit;
+    border: 1px solid #e2e0db;
+    border-radius: 4px;
+    span {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      height: 100%;
+      padding-right: 10px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &.selected {
+        color: #333333;
+      }
+    }
+    &:focus {
+      outline: none;
+    }
+    // &.error {
+    //   border-color: #f05c42;
+    // }
+    /*  &.searchable {
+      // cursor: text;
+    } */
+    .arrow {
+      transform: rotate(0);
+      cursor: pointer;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      &.close {
+        transform: rotate(180deg);
+      }
+      &.readonly {
+        cursor: auto;
+      }
+      &.isTagged {
+        margin-right: 40px;
+      }
+    }
+    .searchInput {
+      border: 0;
+      outline: none;
+      width: 100%;
+      color: #333;
+      font-size: 12px;
+      font-family: inherit;
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      &::placeholder {
+        color: #999999;
+      }
+    }
+    &.readonly {
+      cursor: auto;
+    }
+
+    button {
+      margin-bottom: -1px;
+      margin-right: -1px;
+    }
+  }
+  .customOptions {
+    position: absolute;
+    top: 100%;
+    left: 0px;
+    right: 0px;
+    z-index: 10;
+    margin-top: 10px;
+    display: block;
+    overflow: hidden;
+    background-color: #fff;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 20px;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    pointer-events: none;
+    visibility: hidden;
+    max-height: 132px;
+    min-height: 100%;
+    overflow-y: auto;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #e2e0db;
+    opacity: 0;
+    border-radius: 4px;
+    &::-webkit-scrollbar {
+      width: 7px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      // background: #f1f1f1;
+      background: transparent;
+      border-radius: 10px;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background: #ededed;
+      border: 1px solid #e7e7e7;
+      border-radius: 10px;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgb(116, 116, 116);
+    }
+  }
+}
+
+.noResults {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.listboxItem {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  border-width: 0px;
+  border-bottom-width: 1px;
+  border-style: solid;
+  border-color: #e2e0db;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 8px 10px;
+  svg {
+    position: absolute;
+    height: 100%;
+    width: 12px;
+    left: 16px;
+    top: 0;
+  }
+  &:last-child {
+    border: none;
+  }
+  &:hover {
+    color: #333;
+    background: #ececec;
+  }
+  &.selected {
+    color: #333;
+    font-weight: 500;
+    background: #ececec;
+  }
+  &.highlighted {
+    color: #333;
+    background: #ececec;
+  }
+}

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

@@ -0,0 +1,384 @@
+/* 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 { 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;
+}
+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;
+}
+
+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 = '',
+  } = props;
+
+  // Set active tab in state
+  const [activeTab, setActiveTab] = useState(defaultTab);
+  const menuItemRefs = useRef<any>([]);
+  const tagMenyStyleRef = useRef(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}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;
+  };
+  tagMenyStyleRef.current = getDynamicTagMenuPosition();
+
+  const onScroll = (): void => {
+    tagMenyStyleRef.current = 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) {
+      selectedValues = JSON.parse(value);
+    } else {
+      selectedValues = [value];
+    }
+  }
+  return html` <div
+    class=${`${styles.tagMenu} ${enableSearch ? styles.tagMenuWithSearch : ''}`}
+    style=${parentContainer && tagMenyStyleRef?.current
+      ? tagMenyStyleRef.current
+      : ''}
+  >
+    ${enableSearch &&
+    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 ? styles.tagMenuBodyWithSearch : ''
+      }`}
+    >
+      ${activeTab === Tabs.Values
+        ? 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} ${
+                            selectedValues.includes(option.id)
+                              ? styles.selected
+                              : ''
+                          }`}
+                          onClick=${(e: Event) => {
+                            e.stopPropagation();
+                            onOptionClick(option);
+                          }}
+                          ref=${menuItemRefs.current[i]}
+                          data-hint=${`${
+                            isContentOverflowing(menuItemRefs.current[i])
+                              ? option.value
+                              : ''
+                          }`}
+                        >
+                          ${option.value}
+                        </div>
+
+                        ${i !== arr.length - 1
+                          ? ''
+                          : html`<span>
+                              ${isLoadingOptions || isLoadingMoreOptions
+                                ? html`<${ThreeDotLoader} color="#999" />`
+                                : html` <a
+                                    className=${styles.optionsRefreshProminent}
+                                    href="#"
+                                    onclick=${() => {
+                                      if (handleRefreshClick) {
+                                        setIsLoadingMoreOptions(true);
+                                        handleRefreshClick(
+                                          () => setIsLoadingMoreOptions(false),
+                                          nextPage,
+                                        );
+                                      }
+                                    }}
+                                    >${nextPage
+                                      ? `Load more options`
+                                      : `Reload options?`}</a
+                                  >`}
+                            </span>`}
+                      `;
+                    },
+                  )
+                : html`<div className=${styles.noOptions}>
+                    Your search did not match any values
+                  </div>`
+              : html`<div className=${styles.noOptions}>
+                  <span className=${styles.noOptionsRetry}>
+                    ${isLoadingOptions
+                      ? html`<${ThreeDotLoader} color="#999" />`
+                      : html`${isErrorOnLoadingOptions
+                            ? 'Could not load options.'
+                            : 'No options found.'}
+                          <a
+                            className=${styles.optionsRefresh}
+                            href="#"
+                            onclick=${() => {
+                              if (handleRefreshClick) {
+                                setisLoadingOptions(true);
+                                handleRefreshClick(() =>
+                                  setisLoadingOptions(false),
+                                );
+                              }
+                            }}
+                          >
+                            ${' '}Try again?</a
+                          >`}
+                  </span>
+                </div>`}
+          </div>`
+        : html` <div className="${styles.mappedFieldMenu}">
+            ${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=${handleRefresh}
+                                >
+                                  ${' '}Try again?</a
+                                >`}
+                        </span>
+                      `}
+                </div>`}
+          </div>`}
+    </div>
+  </div>`;
+};
+
+export { FieldDropdown, FieldMenuProps };