@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,136 @@
+.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: 100px;
+      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: 100px;
+        }
+      }
+      .selected {
+        background: rgba(66, 80, 240, 0.1);
+        border-radius: 100px;
+      }
+    }
+  }
+  .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;
+  }
+}

package/src/components/MultipurposeField/TagOptions/index.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable no-nested-ternary */
+import { html } from 'htm/preact';
+import { useState } from 'preact/hooks';
+
+import styles from './styles.module.scss';
+
+interface TagOptionsProps {
+  objectKey: string;
+  onSelect: (keyvalue: string) => void;
+  isRoot?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  objectData: any;
+  keyValue: string;
+}
+
+const TagOptions = (props: TagOptionsProps) => {
+  const [showChildObjects, setShowChildObjects] = useState(true);
+
+  const { objectKey = {}, onSelect, objectData, isRoot, keyValue } = props;
+  const isObject = objectData !== null && typeof objectData === 'object';
+  let isNestedButHasObjects = false;
+  if (!isRoot && typeof objectData !== 'string') {
+    isNestedButHasObjects = true;
+  }
+  return html`
+    <div
+      class="${styles.mappingOption} ${!isRoot ? isNestedButHasObjects ? styles.isNestedParent : styles.isNested : ''}"
+      onClick=${(e: any) => {
+        e.stopPropagation();
+        if(!isObject) {
+          onSelect(keyValue);
+        }
+      }}
+    >
+      <span class="${isObject ? styles.objectSpan : styles.stringSpan}">
+        ${isObject &&
+        html` <div
+          class="${styles.collapseOptionsButton} ${showChildObjects
+            ? styles.selected
+            : ''}"
+          onClick=${(e: any) => {
+            e.stopPropagation();
+            setShowChildObjects(!showChildObjects);
+          }}
+        >
+          <svg
+            width="8"
+            height="5"
+            viewBox="0 0 8 5"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.64258 0.73999L3.64258 3.73999L0.642578 0.73999"
+              stroke="#999999"
+              stroke-linecap="round"
+            />
+          </svg>
+        </div>`}
+        ${isObject
+          ? html`<div class=${styles.parentFieldName}>${objectKey}</div>`
+          : html`<div class=${styles.field}>
+              <div class=${styles.fieldName}>${objectKey}</div>
+              <div class=${styles.fieldValue}>${objectData}</div>
+            </div>`}
+      </span>
+
+      ${showChildObjects &&
+      isObject &&
+      Object.keys(objectData).map(
+        (key) => html` <${TagOptions}
+          objectKey="${key}"
+          objectData="${objectData[key]}"
+          onSelect="${onSelect}"
+          isRoot="${false}"
+          keyValue="${`${keyValue}.${key}`}"
+        />`,
+      )}
+    </div>
+  `;
+};
+
+export { TagOptions, TagOptionsProps };

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

@@ -0,0 +1,95 @@
+.mappingOption {
+  display: block;
+  align-content: center;
+  -webkit-user-select: none;
+
+  .collapseOptionsButton {
+    display: inline-flex;
+    cursor: pointer;
+    width: 17px;
+    height: 17px;
+    transform: rotate(-90deg);
+    justify-content: center;
+    user-select: none;
+
+    &.selected {
+      transform: initial;
+    }
+    svg {
+      height: 5px;
+      width: 7px;
+      align-self: center;
+    }
+  }
+  span {
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+    cursor: pointer;
+    align-content: center;
+    color: #333;
+    font-size: 14px;
+    line-height: 17px;
+    padding: 5px;
+    &.stringSpan {
+      padding-left: 13px;
+    }
+  }
+
+  &.isNestedParent {
+    margin-left: 10px;
+  }
+
+  &.isNested {
+    margin-left: 10px;
+
+    .field {
+      background: none !important;
+    }
+    &:hover {
+      cursor: pointer;
+
+      .field {
+        background-color: #eeeffa !important;
+      }
+    }
+  }
+
+  .field {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 8px;
+    gap: 8px;
+    border: 1px solid #e0e0e0;
+    border-radius: 2px;
+    font-size: 12px;
+    line-height: 15px;
+    .fieldName {
+      color: #8d8d8d;
+      -webkit-user-select: none;
+    }
+    .fieldValue {
+      color: #333333;
+      -webkit-user-select: none;
+    }
+
+    &:hover {
+      cursor: pointer;
+      background: rgba(66, 80, 240, 0.1);
+    }
+  }
+
+  .parentFieldName {
+    color: #6d6f7b;
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    .field {
+      background-color: #eeeffa;
+    }
+  }
+}