@integry/sdk 4.7.39 → 4.7.40

package/src/components/Listbox/index.ts

@@ -1,488 +0,0 @@
-/* eslint-disable no-use-before-define */
-import { html } from 'htm/preact';
-import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
-import fuzzysort from 'fuzzysort';
-import { createNewSortInstance } from 'fast-sort';
-import { Label } from '@/components/Label';
-import { Hint } from '@/components/Tooltip';
-import { useOnClickOutside } from '@/hooks/useOnClickOutside';
-import { ThreeDotLoader } from '@/components/ThreeDotLoader';
-import { IntegryAPI } from '@/modules/api';
-import { ErrorMessage } from '@/components/ErrorMessage';
-import useCustomRef from '@/hooks/useCustomRef';
-import { ListBoxItem, ListBoxItemProps } from './ListBoxItem';
-
-import styles from './styles.module.scss';
-
-interface ListBoxProps {
-  title: string;
-  description: string;
-  items: Omit<ListBoxItemProps, 'onClick'>[];
-  value?: string;
-  onChange(val: string): void;
-  isOpen?: boolean;
-  isDynamic?: boolean;
-  endpointUrl?: string;
-  isSearchable?: boolean;
-  placeholder: string | null;
-  isRequired?: boolean;
-  showStepValidation?: boolean;
-  responseMapper?(input: unknown): Omit<ListBoxItemProps, 'onClick'>[];
-  apiHandler: IntegryAPI;
-  endpointData: string;
-  isReadOnly?: boolean;
-  isChanged?: boolean;
-  isEditable?: boolean;
-}
-
-const ListBox = (props: ListBoxProps) => {
-  const {
-    title,
-    description,
-    items: passedItems = [],
-    value = null,
-    isOpen = false,
-    isDynamic = false,
-    endpointData,
-    isSearchable = false,
-    isRequired = false,
-    placeholder,
-    onChange = () => null,
-    showStepValidation = false,
-    responseMapper = (input: { id: string; value: string }[]) => input,
-    isReadOnly = false,
-    isChanged = false,
-    endpointUrl,
-    isEditable = false,
-  } = props;
-
-  const [query, setQuery] = useState<string>('');
-  const [editableTextValue, setEditableTextValue] = useState<string>('');
-
-  const [items, setItems] = useState<Omit<ListBoxItemProps, 'onClick'>[]>(
-    passedItems,
-  );
-
-  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
-
-  const [filteredItems, setFilteredItems] = useState<
-    Omit<ListBoxItemProps, 'onClick'>[]
-  >(passedItems);
-
-  const [loading, setLoading] = useState(
-    isDynamic && !passedItems.length && !value,
-  );
-
-  const [isDropdownOpen, setIsDropdownOpen] = useState(isOpen);
-
-  const [dropdownRef] = useCustomRef<HTMLDivElement>();
-  const [inputRef] = useCustomRef<HTMLInputElement>();
-
-  useOnClickOutside(dropdownRef, () => {
-    if (isDropdownOpen) {
-      setIsDropdownOpen(false);
-      setHighlightedIndex(-1);
-    }
-  });
-
-  useEffect(() => {
-    if (highlightedIndex > -1 && isDropdownOpen) {
-      const item = filteredItems[highlightedIndex];
-      if (item) {
-        const domEl = document.querySelector(`[data-value="${item.value}"]`);
-        domEl?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-      }
-    }
-  }, [highlightedIndex, isDropdownOpen]);
-
-  useEffect(() => {
-    if (dropdownRef && dropdownRef.current && isDropdownOpen === true) {
-      if (dropdownRef && dropdownRef.current) {
-        dropdownRef.current?.addEventListener('keyup', upHandler);
-      }
-    }
-    // Remove event listeners on cleanup
-    return () => {
-      if (dropdownRef && dropdownRef.current) {
-        dropdownRef.current.removeEventListener('keyup', upHandler);
-      }
-    };
-  }, [isDropdownOpen, dropdownRef, highlightedIndex]);
-
-  useEffect(() => {
-    let timer: null | ReturnType<typeof setTimeout> = null;
-    const item = items.find((a) => a.id === value);
-
-    if (!isDropdownOpen && query && !value) {
-      setQuery('');
-      timer = setTimeout(() => {
-        setSortedFilteredItems(items);
-      }, 250);
-    } else if (!isDropdownOpen && value && item) {
-      setQuery(item.value);
-    }
-    return () => {
-      if (timer) clearTimeout(timer);
-    };
-  }, [isDropdownOpen]);
-
-  useEffect(() => {
-    if (query && isSearchable) {
-      const filtered = fuzzysort
-        .go(query, items, {
-          keys: ['value'],
-          scoreFn: (keysResult) => {
-            const nameResult = keysResult[0];
-            const tagsResult = keysResult[1];
-            // assign higher score to name result
-            const score = Math.max(
-              nameResult ? nameResult.score + 100 : -Infinity,
-              tagsResult ? tagsResult.score : -Infinity,
-            );
-            return score;
-          },
-        })
-        .map((el) => el.obj);
-      setHighlightedIndex(-1);
-      setSortedFilteredItems(filtered);
-      if (filtered.length === 1) setHighlightedIndex(0);
-    } else if (isDropdownOpen) {
-      setHighlightedIndex(-1);
-      setSortedFilteredItems(items);
-    }
-  }, [query]);
-
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    const { isDynamic, endpointUrl } = props;
-    if (isDynamic && endpointUrl) {
-      fetchDynamicData();
-    } else if (!isDynamic && endpointUrl) {
-      // if isDynamic is false, endpointUrl will have JSON data instead of URL
-      try {
-        const data = JSON.parse(endpointUrl);
-        setItems(responseMapper(data));
-        setFilteredItems(responseMapper(data));
-        setLoading(false);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  }, [endpointData]);
-
-  const fetchDynamicData = (): void => {
-    const { apiHandler } = props;
-    if (endpointUrl) {
-      setLoading(true);
-      let data;
-      try {
-        data = JSON.parse(endpointData);
-      } catch (error) {
-        data = '';
-      }
-      apiHandler
-        .callDynamicDataEndpoint<
-          {
-            id: string;
-            value: string;
-          }[]
-        >(new URL(endpointUrl), data)
-        .then((res) => {
-          if (res) {
-            setItems(responseMapper(res));
-            setSortedFilteredItems(responseMapper(res));
-            // if value was selected before items were loaded, select it again
-            if (value && isSearchable) {
-              const item = responseMapper(res).find((a) => a.id === value);
-              if (item) {
-                setQuery(item.value);
-              } else {
-                setQuery('');
-              }
-              setLoading(false);
-            } else {
-              setQuery('');
-              setLoading(false);
-            }
-          }
-        });
-    }
-  };
-
-  const setSortedFilteredItems = (
-    data: { id: string; value: string }[],
-  ): void => {
-    const naturalSort = createNewSortInstance({
-      comparer: new Intl.Collator(undefined, {
-        numeric: true,
-        sensitivity: 'base',
-      }).compare,
-    });
-    const sorted = naturalSort(data).asc((item) => item.value);
-    setFilteredItems(sorted);
-  };
-
-  // If released key is our target key then set to false
-  const upHandler = useCallback(
-    ({ key }: { key: string }): void => {
-      switch (key) {
-        case 'Enter': // item selected
-          onDropdownItemClicked(filteredItems[highlightedIndex]);
-          break;
-        case 'Escape': // cancel selection
-          setIsDropdownOpen(false);
-          inputRef.current?.blur();
-          break;
-        case 'ArrowDown': {
-          if (highlightedIndex < 0) {
-            setHighlightedIndex(0); // first item
-          } else if (highlightedIndex < filteredItems.length - 1) {
-            setHighlightedIndex((idx) => idx + 1); // next item
-          } else {
-            setHighlightedIndex(0); // wrap around
-          }
-          break;
-        }
-        case 'ArrowUp': {
-          if (highlightedIndex < 0) {
-            setHighlightedIndex(filteredItems.length - 1); // last item
-          } else if (
-            highlightedIndex < filteredItems.length &&
-            highlightedIndex > 0
-          ) {
-            setHighlightedIndex((idx) => idx - 1); // previous item
-          } else {
-            setHighlightedIndex(filteredItems.length - 1); // wrap around
-          }
-          break;
-        }
-        default:
-          break;
-      }
-    },
-    [highlightedIndex, filteredItems],
-  );
-
-  const toggleDropdown = () => {
-    if (!isReadOnly) {
-      if (!isDropdownOpen) {
-        setQuery('');
-        inputRef.current?.focus();
-      }
-      setIsDropdownOpen((prev) => !prev);
-    }
-  };
-
-  const onDropdownItemClicked = (el: Omit<ListBoxItemProps, 'onClick'>) => {
-    onChange(el.id);
-    setIsDropdownOpen(false);
-    if (isEditable) {
-      setEditableTextValue(el.value);
-      setQuery('');
-      inputRef.current?.blur();
-    }
-    if (isSearchable) {
-      setQuery(el.value);
-      inputRef.current?.blur();
-    }
-  };
-
-  const onInputClicked = (e: InputEvent) => {
-    e.stopPropagation();
-    if (!isDropdownOpen && !isReadOnly) {
-      setQuery('');
-      setIsDropdownOpen(true);
-    }
-  };
-
-  const getSelectedItem = useMemo(() => {
-    const index = items.findIndex((el) => el.id === value);
-    return index > -1 ? items[index].value : 'Please Select...';
-  }, [items, value]);
-
-  const getItemFromText = (
-    textValue: string,
-  ): {
-    id: string;
-    value: string;
-  } => {
-    let tempItem = {
-      id: textValue,
-      value: textValue,
-    };
-    let itemFound = false;
-    items.forEach((item) => {
-      if (item.id === textValue && !itemFound) {
-        tempItem = item;
-        itemFound = true;
-      }
-    });
-    if (!itemFound) {
-      items.forEach((item) => {
-        if (item.value === textValue && !itemFound) {
-          tempItem = item;
-          itemFound = true;
-        }
-      });
-    }
-    return tempItem;
-  };
-
-  const updateValue = (e: InputEvent) => {
-    if (e.currentTarget instanceof HTMLInputElement) {
-      const { value: newValue } = e.currentTarget;
-
-      if (isEditable) {
-        const tempItem = getItemFromText(newValue);
-        onChange(tempItem.id);
-        setEditableTextValue(tempItem.value);
-        setQuery(tempItem.value.trim());
-      } else if (newValue !== '') {
-        setQuery(newValue.trim());
-      }
-    }
-  };
-
-  const handleRefreshClick = (): void => {
-    fetchDynamicData();
-    onChange('');
-    setIsDropdownOpen(false);
-    if (isSearchable) {
-      setQuery('');
-      inputRef.current?.blur();
-    }
-  };
-
-  return html`
-    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
-      <div ref=${dropdownRef} class="${styles.listboxGroupWrapper}">
-        <fieldset>
-          ${title &&
-          html`
-            <${Label}
-              title=${title}
-              description=${description}
-              isRequired=${isRequired}
-              labelTag=${isReadOnly && isChanged ? 'Changed' : ''}
-              allowRefresh=${isDynamic && endpointUrl}
-              handleRefreshClick=${handleRefreshClick}
-            />
-          `}
-          <div class=${styles.listbox}>
-            <div
-              class=${`${styles.customSelect} ${
-                isDropdownOpen ? styles.open : ''
-              }`}
-            >
-              ${isReadOnly &&
-              html`<span
-                class=${styles.readonlyHint}
-                data-hint=${isReadOnly ? `` : ''}
-              ></span>`}
-              <div
-                class=${`${styles.customSelectTrigger} ${
-                  showStepValidation &&
-                  !value &&
-                  isRequired &&
-                  !isDropdownOpen &&
-                  styles.error
-                } ${isSearchable && styles.searchable} ${
-                  isReadOnly ? styles.readonly : ''
-                }`}
-                role="button"
-                tabindex=${0}
-                onclick=${toggleDropdown}
-              >
-                <span class=${value && styles.selected}>
-                  ${loading
-                    ? html`Loading`
-                    : html` ${isSearchable || isEditable
-                        ? html`
-                            <input
-                              ref=${inputRef}
-                              class=${styles.searchInput}
-                              placeholder=${placeholder ||
-                              (isEditable
-                                ? 'Please select or enter value...'
-                                : 'Please Select or Search...')}
-                              value=${isEditable ? editableTextValue : query}
-                              oninput=${updateValue}
-                              onclick=${onInputClicked}
-                              readonly=${isReadOnly}
-                            />
-                          `
-                        : html`
-                            ${items.length > 0
-                              ? html`
-                                  ${value
-                                    ? html`${getSelectedItem}`
-                                    : html`${placeholder || 'Please Select...'}`}
-                                `
-                              : html`No options`}
-                          `}`}
-                </span>
-
-                <div ref=${dropdownRef} style="display: flex;">
-                  ${loading
-                    ? html`<${ThreeDotLoader} color="#ababab"><//>`
-                    : html`
-                        <div
-                          class=${`${styles.arrow} ${
-                            isDropdownOpen ? styles.close : ''
-                          } ${isReadOnly ? styles.readonly : ''}`}
-                        >
-                          <svg
-                            width="12"
-                            height="8"
-                            viewBox="0 0 12 8"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M11 1.5L6 6.5L1 1.5"
-                              stroke="#999999"
-                              stroke-width="2"
-                              stroke-linecap="round"
-                            />
-                          </svg>
-                        </div>
-                      `}
-                </div>
-              </div>
-              <div class=${styles.customOptions}>
-                ${items.length > 0 &&
-                !loading &&
-                html`
-                  ${filteredItems.map(
-                    (el, idx) => html`
-                      <${ListBoxItem}
-                        key=${el.id}
-                        id=${el.id}
-                        value=${el.value}
-                        isHighlighted=${highlightedIndex === idx}
-                        isSelected=${value === el.id}
-                        onClick=${() => onDropdownItemClicked(el)}
-                      ><//>
-                    `,
-                  )}
-                `}
-                ${isSearchable &&
-                query &&
-                !filteredItems.length &&
-                !loading &&
-                html`<div class=${styles.noResults}>No results found</div>`}
-              </div>
-            </div>
-            ${showStepValidation &&
-            !value &&
-            !isDropdownOpen &&
-            isRequired &&
-            html` <${ErrorMessage}>Please select an option</${ErrorMessage}>`}
-          </div>
-        </fieldset>
-      </div>
-    <//>
-  `;
-};
-
-export { ListBox, ListBoxProps };

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

@@ -1,197 +0,0 @@
-.listboxGroupWrapper {
-  fieldset {
-    margin: 0;
-    padding: 0;
-    border: none;
-    margin-bottom: 16px !important;
-  }
-}
-
-.listbox {
-  position: relative;
-  max-width: 285px;
-  user-select: none;
-  .customSelect {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    font-size: 14px;
-    font-family: inherit;
-    letter-spacing: -0.197647px;
-    color: #999999;
-
-    &.open .customOptions {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-    }
-    .readonlyHint {
-      width: 100%;
-      height: 100%;
-      z-index: 99;
-      position: absolute;
-    }
-  }
-  .customSelectTrigger {
-    position: relative;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    height: 35px;
-    padding: 0 10px;
-    justify-content: space-between;
-    cursor: pointer;
-    font-size: 14px;
-    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;
-      }
-    }
-    .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;
-    }
-  }
-  .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/Loader/index.ts

@@ -1,25 +0,0 @@
-import { html } from 'htm/preact';
-
-import styles from './styles.module.scss';
-
-const Loader = ({ fill = '#ADADAD', size='md' }) => html`
-  <svg
-    class=${styles.loader}
-    width="${size === 'sm' ? '12' : '15'}"
-    height="${size === 'sm' ? '12' : '15'}"
-    viewBox="0 0 15 15"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M9.13037 0.179352C7.57047 -0.168051 5.94039 -0.00810102 4.47777 0.635883C3.01515 1.27987 1.79647 2.37421 0.999409 3.75937C0.202348 5.14453 -0.131421 6.74808 0.0467641 8.33623C0.224949 9.92438 0.90577 11.4141 1.98997 12.5882C3.07417 13.7623 4.50506 14.5593 6.07402 14.8632C7.64298 15.167 9.26799 14.9618 10.7121 14.2773C12.1562 13.5929 13.344 12.4651 14.1022 11.0582C14.8604 9.65144 15.1494 8.03922 14.9271 6.45665L14.1844 6.56098C14.3845 7.9853 14.1243 9.43629 13.442 10.7024C12.7596 11.9685 11.6906 12.9836 10.3909 13.5996C9.09119 14.2156 7.62869 14.4003 6.21662 14.1269C4.80455 13.8534 3.51675 13.136 2.54097 12.0794C1.56519 11.0227 0.952454 9.68194 0.792088 8.2526C0.631721 6.82327 0.932113 5.38008 1.64947 4.13343C2.36682 2.88679 3.46363 1.90188 4.77999 1.32229C6.09635 0.742709 7.56343 0.598754 8.96733 0.911417L9.13037 0.179352Z"
-      fill="#E0E0E0"
-    />
-    <path
-      d="M14.93 6.47755C14.7207 4.95709 14.0501 3.53742 13.0085 2.41017C11.9669 1.28292 10.6046 0.50235 9.10537 0.173829L8.94483 0.906446C10.2941 1.20212 11.5202 1.90462 12.4577 2.91915C13.3951 3.93368 13.9987 5.21138 14.187 6.57979L14.93 6.47755Z"
-      fill="${fill}"
-    />
-  </svg>
-`;
-
-export { Loader };