@integry/sdk 4.5.2 → 4.5.4

package/src/components/Modal/styles.module.scss

@@ -0,0 +1,441 @@
+.modal {
+  font-family: 'Inter';
+  display: none;
+  z-index: 99;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  overflow-y: auto;
+  &.open {
+    position: fixed;
+    display: block;
+  }
+  .modalContainer {
+    display: flex;
+    min-height: 100vh;
+    align-items: flex-start;
+    justify-content: center;
+    text-align: center;
+    // margin-top: 4vh;
+    @media (min-width: 640px) {
+      display: block;
+      padding: 0;
+    }
+    .inset {
+      position: fixed;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      transition-property: opacity;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      opacity: 0.3;
+      background-color: #000000;
+    }
+    .span {
+      display: none;
+      @media (min-width: 640px) {
+        display: inline-block;
+        height: 100vh;
+        vertical-align: middle;
+      }
+    }
+    .contentWrap {
+      display: none;
+      position: relative;
+      vertical-align: bottom;
+      background: white;
+      border-radius: 4px;
+      text-align: left;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      overflow-x: hidden;
+      &.open {
+        display: inline-block;
+      }
+      @media (min-width: 640px) {
+        width: 100%;
+        max-width: 730px;
+        margin-top: 2rem;
+        margin-bottom: 0rem;
+        vertical-align: middle;
+        // max-height: calc(100vh - 100px);
+        overflow-y: auto;
+        &::-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);
+        }
+      }
+      .content {
+        position: relative;
+        background: white;
+        // padding-bottom: 30px;
+        border-radius: 4px;
+        height: calc(100% - 80px);
+      }
+      .close {
+        position: absolute;
+        cursor: pointer;
+        top: 10px;
+        right: 10px;
+      }
+
+      .closeCompact {
+        position: absolute;
+        cursor: pointer;
+        top: 24px;
+        right: 24px;
+      }
+    }
+
+    .contentWrapCompact {
+      display: none;
+      // height: calc(100vh - 120px);
+      min-height: 557px;
+      max-height: 620px;
+      position: relative;
+      vertical-align: bottom;
+      background: white;
+      border-radius: 4px;
+      text-align: left;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      overflow-x: hidden;
+      &.open {
+        display: inline-block;
+      }
+      @media (min-width: 640px) {
+        width: 100%;
+        max-width: 730px;
+        margin-top: 2rem;
+        margin-bottom: 0rem;
+        vertical-align: middle;
+        // max-height: calc(100vh - 100px);
+        overflow-y: auto;
+        &::-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);
+        }
+      }
+      .contentCompact {
+        position: relative;
+        background: white;
+        padding-bottom: 0px;
+        border-radius: 4px;
+        height: inherit;
+      }
+      .close {
+        position: absolute;
+        cursor: pointer;
+        top: 10px;
+        right: 10px;
+      }
+
+      .closeCompact {
+        position: absolute;
+        cursor: pointer;
+        top: 24px;
+        right: 24px;
+      }
+    }
+  }
+  &.marketplace-modal {
+    .modalContainer {
+      .contentWrap {
+        .close {
+          position: absolute;
+          cursor: pointer;
+          top: 28px;
+          right: 32px;
+          z-index: 99;
+        }
+        @media (min-width: 320px) {
+          min-width: 420px;
+          width: min-content;
+          max-width: 480px;
+          margin-top: 3rem;
+          margin-bottom: 0rem;
+          vertical-align: middle;
+          height: calc(100vh - 100px);
+          max-height: calc(100vh - 100px);
+          overflow-y: auto;
+          &::-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);
+          }
+        }
+        @media (min-width: 640px) {
+          width: 480px;
+          max-width: 480px;
+        }
+        @media (min-width: 857px) {
+          width: 800px;
+          max-width: 800px;
+        }
+        @media (min-width: 1237px) {
+          width: 1180px;
+          max-width: 1180px;
+        }
+        @media (min-height: 1152px) {
+          max-height: 1000px;
+          height: 1000px;
+        }
+      }
+    }
+  }
+  &.request-app-modal {
+    .modalContainer {
+      .contentWrap {
+        border-radius: 8px;
+        .close {
+          position: absolute;
+          cursor: pointer;
+          top: 0px;
+          right: 40px;
+          z-index: 99;
+        }
+        @media (min-width: 320px) {
+          width: 452px;
+          max-width: 480px;
+          margin-top: 3rem;
+          margin-bottom: 0rem;
+          vertical-align: middle;
+          max-height: calc(100vh - 100px);
+          overflow-y: auto;
+          &::-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);
+          }
+        }
+        @media (min-width: 640px) {
+          width: 587px;
+          max-width: 587px;
+        }
+      }
+    }
+  }
+  &.success-pop-up {
+    .modalContainer {
+      .contentWrap {
+        border-radius: 8px;
+        .close {
+          position: absolute;
+          cursor: pointer;
+          top: 0px;
+          right: 0px;
+          display: none;
+        }
+        @media (min-width: 320px) {
+          width: min-content;
+          max-width: 480px;
+          margin-top: 3rem;
+          margin-bottom: 0rem;
+          vertical-align: middle;
+          max-height: calc(100vh - 100px);
+        }
+        @media (min-width: 600px) {
+          width: 550px;
+          max-width: 550px;
+        }
+      }
+    }
+  }
+  &.confirmation-pop-up {
+    .modalContainer {
+      .contentWrap {
+        border-radius: 8px;
+        .close {
+          position: absolute;
+          cursor: pointer;
+          top: 0px;
+          right: 0px;
+          display: none;
+        }
+        @media (min-width: 320px) {
+          width: min-content;
+          max-width: 462px;
+          margin-top: 3rem;
+          margin-bottom: 0rem;
+          vertical-align: middle;
+          height: auto;
+          max-height: 300px;
+        }
+        @media (min-width: 600px) {
+          width: 462px;
+          max-width: 462px;
+        }
+      }
+    }
+  }
+  &.media-gallery-modal {
+    .modalContainer {
+      .contentWrap {
+        border-radius: 8px;
+        .close {
+          position: absolute;
+          cursor: pointer;
+          top: 6px;
+          right: 6px;
+        }
+        max-height: calc(100vh - 200px);
+        @media (min-width: 640px) {
+          width: 320px;
+          max-width: 320px;
+        }
+        @media (min-width: 857px) {
+          width: 550px;
+          max-width: 550px;
+        }
+        @media (min-width: 1237px) {
+          width: 800px;
+          max-width: 800px;
+        }
+        @media (min-height: 1152px) {
+          max-height: 800px;
+          height: 800px;
+        }
+      }
+    }
+  }
+  &.appModal {
+    .modalContainer {
+      .contentWrap {
+        .close {
+          position: absolute;
+          cursor: pointer;
+          top: 25px;
+          right: 27px;
+          z-index: 99;
+          width: 12px;
+          height: 12px;
+        }
+      }
+      .content {
+        padding-bottom: 10px !important;
+      }
+    }
+  }
+  &.flowAppsModal {
+    .modalContainer {
+      .contentWrap {
+        width: min-content;
+        overflow: hidden;
+        min-width: 605px;
+        .close {
+          position: absolute;
+          cursor: pointer;
+          top: 18px;
+          z-index: 99;
+          width: 12px;
+          height: 12px;
+          right: 27px;
+        }
+
+        @media (max-width: 768px) {
+          min-width: 312px;
+        }
+      }
+      .content {
+        padding-bottom: 10px !important;
+      }
+    }
+  }
+}
+
+.authConfirmation {
+  div {
+    user-select: none;
+  }
+  p {
+    user-select: none;
+  }
+  span {
+    user-select: none;
+  }
+  .content {
+    padding-bottom: 0 !important;
+  }
+  .contentWrap {
+    max-width: 485px !important;
+  }
+}
+.marketplaceAppDisconnectConfirmation {
+  .contentWrap {
+    min-width: 480px !important;
+    max-width: 485px !important;
+  }
+}

package/src/components/MultipurposeField/Dropdown/ListBoxItem.tsx

@@ -0,0 +1,58 @@
+import { html } from 'htm/preact';
+import { useRef } from 'preact/hooks';
+
+import styles from './styles.module.scss';
+
+interface ListBoxItemProps {
+  value: string;
+  id: string;
+  isSelected?: boolean;
+  isHighlighted?: boolean;
+  onClick(): void;
+}
+
+const ListBoxItem = (props: ListBoxItemProps) => {
+  const { id, value, isSelected, isHighlighted = false, onClick } = props;
+  const listItemRef = useRef<HTMLSpanElement>();
+
+  const isContentOverflowing = (): boolean => {
+    if (listItemRef.current) {
+      return listItemRef.current.clientWidth < listItemRef.current.scrollWidth;
+    }
+    return false;
+  };
+
+  return html`
+    <span
+      class=${`${styles.listboxItem} ${isSelected ? styles.selected : ''} ${
+        isHighlighted ? styles.highlighted : ''
+      }`}
+      data-value=${id}
+      onclick=${onClick}
+      ref=${listItemRef}
+      data-hint=${`${isContentOverflowing() ? value : ''}`}
+    >
+      ${false &&
+      isSelected &&
+      html`
+        <svg
+          width="7"
+          height="7"
+          viewBox="0 0 7 7"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          stroke="#333"
+        >
+          <path
+            d="M6.33333 1.5L2.83522 5.5L1 3.40148"
+            stroke-width="1.2"
+            stroke-linecap="round"
+          />
+        </svg>
+      `}
+      ${value}
+    </span>
+  `;
+};
+
+export { ListBoxItem, ListBoxItemProps };