@integry/sdk 4.7.39 → 4.7.40

package/src/components/Toggle-v2/index.ts

@@ -1,40 +0,0 @@
-import { html } from 'htm/preact';
-
-import styles from './styles.module.scss';
-
-interface ToggleProps {
-  id: string;
-  value: boolean;
-  disabled: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onChange: (val: boolean, event?: any) => void;
-  size?: string;
-}
-
-/**
- * Toggle component
- *
- */
-const Toggle = (props: ToggleProps) => {
-  const { id, value: isToggled, onChange, disabled = false, size = 'lg' } = props;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleChange = (e: any) => {
-    onChange(!isToggled, e);
-  };
-
-  return html`
-    <label className=${`${styles.switch} toggle ${size === 'sm' ? styles.smallSwitch : ''}`}>
-      <input
-        type="checkbox"
-        id=${id}
-        onclick=${handleChange}
-        checked=${isToggled}
-        disabled=${disabled}
-      />
-      <span className=${`${styles.slider} ${styles.round}`} />
-    </label>
-  `;
-};
-
-export { Toggle, ToggleProps };

package/src/components/Toggle-v2/styles.module.scss

@@ -1,86 +0,0 @@
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 34px;
-  height: 14px;
-  margin: 0;
-  top: 0px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  display: none;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgb(213, 213, 213);
-  transition: 0.4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: '';
-  height: 15px;
-  width: 15px;
-  bottom: -0.5px;
-  background-color: #9b9b9b;
-  transition: 0.4s;
-}
-
-input:checked + .slider {
-  background-color: #9ddab3;
-}
-
-input:checked + .slider:before {
-  background-color: #3bb568;
-  left: 2.5px;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
-}
-
-input:checked + .slider:before {
-  transform: translateX(16px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 14px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-
-.disabled-input:checked + .slider {
-  background-color: #c6c5c5;
-}
-
-.disabled-input:checked + .slider:before {
-  background-color: #9b9b9b;
-}
-
-.smallSwitch {
-  width: 26px;
-  height: 10px;
-
-  .slider:before {
-    height: 15px;
-    width: 15px;
-    left: -1px;
-    bottom: -2.5px;
-  }
-
-  input:checked + .slider:before {
-    transform: translateX(13px);
-  }
-}

package/src/components/Tooltip/index.ts

@@ -1,271 +0,0 @@
-/**
- * Modified version of https://github.com/rschristian/preact-hint
- * for Preact with htm with added support for:
- * 1. bottom position
- * 2. dismissing popup on click of target element
- * 3. Delta Y to configure spacing
- * 4. Offset from center rendering
- */
-
-import { html } from 'htm/preact';
-import type { ComponentChild, VNode } from 'preact';
-import { useCallback, useRef, useState } from 'preact/hooks';
-import { ViewStyles } from '@/types';
-
-import styles from './styles.module.scss';
-
-interface Props {
-  children: ComponentChild | ComponentChild[];
-  dismissOnClick?: boolean;
-  position?:
-    | 'top'
-    | 'bottom'
-    | 'bottom-right'
-    | 'fixed'
-    | 'top-right'
-    | 'top-right-compact';
-  attribute?: string;
-  deltaY?: number;
-  hideArrow?: boolean;
-  template?: (content: string) => VNode;
-  style?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-interface HintProps {
-  content: string;
-  position:
-    | 'top'
-    | 'bottom'
-    | 'bottom-right'
-    | 'fixed'
-    | 'fixed-right'
-    | 'top-right'
-    | 'top-right-compact';
-  deltaY: number;
-  template?: (content: string) => VNode;
-  hideArrow?: boolean;
-  rootBoundingRect: ClientRect;
-  targetBoundingRect: ClientRect;
-}
-
-export function HintWrap(props: HintProps): VNode {
-  const hint = useRef<HTMLSpanElement | null>(null);
-
-  const { position, deltaY = 0, hideArrow, targetBoundingRect } = props;
-
-  if (['fixed', 'fixed-right'].includes(position)) {
-    return html`
-      <div
-        class="${`${styles['preact-hint']} ${
-          styles[`preact-hint__${position}`]
-        }`}
-      ${hideArrow ? styles['preact-hint_hide-arrow'] : ''}"
-        style="${position === 'fixed-right' ? 'right' : 'left'}: ${(position ===
-        'fixed-right'
-          ? 60 + 38 + targetBoundingRect.right - targetBoundingRect.left
-          : targetBoundingRect.left) -
-        deltaY}px; top: ${targetBoundingRect.bottom + 5}px;"
-      >
-        <pre class=${styles['preact-hint__content']} ref=${hint}>
-        ${props.template ? props.template(props.content) : props.content}
-      </pre
-        >
-      </div>
-    `;
-  }
-
-  let className = '';
-  if (
-    position === 'top' ||
-    position === 'top-right' ||
-    position === 'top-right-compact'
-  ) {
-    className = styles['preact-hint__top'];
-  } else if (position === 'bottom') {
-    className = styles['preact-hint__bottom'];
-  } else if (position === 'bottom-right') {
-    className = styles['preact-hint__bottom-right'];
-  }
-  return html`
-    <div
-      class="${`${styles['preact-hint']} ${className} ${
-        position === 'top-right' ? styles['preact-hint__top-right'] : ''
-      }}`}
-      ${hideArrow ? styles['preact-hint_hide-arrow'] : ''}"
-      style=${{
-        ...(position === 'bottom-right'
-          ? {
-              right:
-                props.rootBoundingRect.right -
-                props.targetBoundingRect.right -
-                12,
-            }
-          : {
-              left: props.targetBoundingRect.left - props.rootBoundingRect.left,
-            }),
-        ...(position === 'top'
-          ? {
-              bottom:
-                props.rootBoundingRect.height -
-                props.targetBoundingRect.top +
-                props.rootBoundingRect.top +
-                2 +
-                deltaY,
-            }
-          : {
-              top:
-                props.rootBoundingRect.height -
-                props.targetBoundingRect.top +
-                props.rootBoundingRect.top +
-                2 +
-                deltaY,
-            }),
-        ...(position === 'top-right'
-          ? {
-              right: 0,
-              left: 'auto',
-              top: 0 - props.targetBoundingRect.height - 10,
-            }
-          : {}),
-        ...(position === 'top-right-compact'
-          ? {
-              left: 0,
-              top: 0 - props.targetBoundingRect.height - 5,
-            }
-          : {}),
-      }}
-    >
-      <pre class=${styles['preact-hint__content']} ref=${hint}>
-        ${props.template ? props.template(props.content) : props.content}
-      </pre
-      >
-    </div>
-  `;
-}
-
-export const Hint = (props: Props): VNode => {
-  const {
-    position = 'bottom',
-    attribute = 'data-hint',
-    deltaY = 0,
-    hideArrow,
-    style = '',
-    disabled = false,
-    className = '',
-  } = props;
-  const [content, setContent] = useState<string>('');
-  const [
-    containerElement,
-    setContainerElement,
-  ] = useState<HTMLDivElement | null>(null);
-  const [
-    targetBoundingRect,
-    setTargetBoundingRect,
-  ] = useState<ClientRect | null>(null);
-
-  const handleMouseOver = (e: Event) => {
-    if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
-      setContent(e.target.getAttribute(attribute) || '');
-      setTargetBoundingRect(e.target.getBoundingClientRect());
-    }
-  };
-
-  const handleMouseOut = (e: Event) => {
-    // if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
-    setContent('');
-    setTargetBoundingRect(null);
-    // }
-  };
-  const handleMouseClick = () => {
-    setContent('');
-    setTargetBoundingRect(null);
-  };
-
-  const onRefChange = useCallback(
-    (node: HTMLDivElement | null) => {
-      // Remove existing event listeners before adding new ones
-      if (containerElement) {
-        containerElement.removeEventListener('mouseover', handleMouseOver);
-        containerElement.removeEventListener('mouseout', handleMouseOut);
-        if (props.dismissOnClick)
-          containerElement.removeEventListener('click', handleMouseClick);
-      }
-
-      setContainerElement(node);
-
-      if (containerElement) {
-        containerElement.addEventListener('mouseover', handleMouseOver);
-        containerElement.addEventListener('mouseout', handleMouseOut);
-        containerElement.addEventListener('mouseleave', handleMouseOut);
-        document.addEventListener('wheel', handleMouseOut);
-        if (props.dismissOnClick)
-          containerElement.addEventListener('click', handleMouseClick);
-      }
-    },
-    [containerElement, props.dismissOnClick],
-  );
-
-  const onRefChangeOld = useCallback(
-    (node: HTMLDivElement | null) => {
-      setContainerElement(node);
-      if (containerElement) {
-        containerElement.addEventListener('mouseover', (e) => {
-          if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
-            setContent(e.target.getAttribute(attribute) || '');
-            setTargetBoundingRect(e.target.getBoundingClientRect());
-          }
-        });
-        containerElement.addEventListener('mouseout', (e) => {
-          if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
-            setContent('');
-            setTargetBoundingRect(null);
-          }
-        });
-        containerElement.addEventListener('mouseleave', (e) => {
-          if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
-            setContent('');
-            setTargetBoundingRect(null);
-          }
-        });
-        document.addEventListener('wheel', (e) => {
-          if (e.target instanceof Element && e.target.hasAttribute(attribute)) {
-            setContent('');
-            setTargetBoundingRect(null);
-          }
-        });
-        if (props.dismissOnClick)
-          containerElement.addEventListener('click', () => {
-            setContent('');
-            setTargetBoundingRect(null);
-          });
-      }
-    },
-    [containerElement],
-  );
-
-  return disabled
-    ? html` ${props.children}`
-    : html`
-        <div
-          ref=${onRefChange}
-          style="position: relative;${style}"
-          class=${className}
-        >
-          ${content &&
-          containerElement &&
-          targetBoundingRect &&
-          html` <${HintWrap}
-            content=${content}
-            position=${position}
-            deltaY=${deltaY}
-            template=${props.template}
-            rootBoundingRect=${containerElement?.getBoundingClientRect()}
-            targetBoundingRect=${targetBoundingRect}
-            hideArrow=${hideArrow}
-          />`}
-          ${props.children}
-        </div>
-      `;
-};

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

@@ -1,105 +0,0 @@
-.preact-hint {
-  position: absolute;
-  z-index: 9999;
-  cursor: default;
-  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));
-  &::after {
-    content: '';
-    width: 0;
-    height: 0;
-    margin: auto;
-    display: block;
-    position: absolute;
-    border: 4px solid transparent;
-  }
-
-  &.preact-hint__top {
-    padding-bottom: 4px;
-    &::after {
-      top: auto;
-      left: 50%;
-      bottom: 0;
-      border-bottom: none;
-      border-top-color: #fff;
-    }
-  }
-
-  &.preact-hint__bottom {
-    padding-top: 4px;
-    &::after {
-      top: 0;
-      left: 16px;
-      bottom: auto;
-      border-top: none;
-      border-bottom-color: #fff;
-    }
-  }
-  &.preact-hint__bottom-right {
-    padding-top: 4px;
-    &::after {
-      top: 0;
-      right: 16px;
-      bottom: auto;
-      border-top: none;
-      border-bottom-color: #fff;
-    }
-  }
-  &.preact-hint__fixed {
-    position: fixed;
-
-    &::after {
-      top: -4px;
-      left: 16px;
-      bottom: auto;
-      border-top: none;
-      border-bottom-color: #fff;
-    }
-  }
-
-  &.preact-hint__fixed-right {
-    position: fixed;
-
-    &::after {
-      top: -4px;
-      right: 16px;
-      bottom: auto;
-      border-top: none;
-      border-bottom-color: #fff;
-    }
-  }
-  &.preact-hint__top-right {
-    padding-top: 4px;
-    &::after {
-      top: auto;
-      left: 86%;
-      bottom: 0;
-      border-top: none;
-      border-bottom-color: #fff;
-    }
-  }
-  &.preact-hint_hide-arrow {
-    &::after {
-      display: none !important;
-    }
-  }
-}
-
-.preact-hint__content {
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  background: #ffffff;
-  border-radius: 5px;
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.062132);
-  padding: 8px;
-  margin: 0;
-  color: #000000;
-  display: block;
-}
-[class*='preact-hint__top-right'] {
-  &::after {
-    left: 86% !important;
-  }
-}