@integry/sdk 4.5.13 → 4.5.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.13",
+  "version": "4.5.14",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",
@@ -37,6 +37,7 @@
     "@babel/preset-env": "^7.26.7",
     "@babel/preset-react": "^7.26.3",
     "@jsdevtools/version-bump-prompt": "^6.1.0",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
@@ -92,13 +93,16 @@
     "vitest": "^3.0.4"
   },
   "dependencies": {
+    "@preact/compat": "^18.3.1",
     "@yaireo/tagify": "^4.21.1",
     "classnames": "^2.3.1",
     "fast-sort": "^3.2.1",
     "fuzzysort": "^1.1.4",
     "htm": "3.1.0",
     "lit": "^3.2.1",
-    "preact": "10.2.0",
+    "preact": "^10.26.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "superstruct": "^0.15.2",
     "unfetch": "^4.2.0",
     "unistore": "^3.5.2"

package/src/components/CollapsedMenu/index.ts

@@ -26,7 +26,7 @@ const CollapsedMenu = (props: CollapsedMenuProps) => {
     verticalIcon = false,
   } = props;
 
-  const popupRef = useRef<HTMLDivElement>();
+  const popupRef = useRef<HTMLDivElement | null>(null);
 
   const [open, setOpen] = useState(false);
 
@@ -85,10 +85,13 @@ const CollapsedMenu = (props: CollapsedMenuProps) => {
         <div class=${styles.optionWrap}>
           ${options.map(
             (el) =>
-              html`<div class=${styles.option} onclick=${(event: any) => {
-                event.stopPropagation();
-                onClick(el)
-              }}>
+              html`<div
+                class=${styles.option}
+                onclick=${(event: any) => {
+                  event.stopPropagation();
+                  onClick(el);
+                }}
+              >
                 ${el.label}
               </div>`,
           )}

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

@@ -330,9 +330,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
           </div>`
         : html` <div className="${styles.mappedFieldMenu}">
             ${tagsComponent
-              ? html`<div
-                  dangerouslySetInnerHTML=${{ __html: tagsComponent }}
-                />`
+              ? html`${tagsComponent}`
               : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,
                 ).length > 0

package/src/components/MultipurposeField/index.tsx

@@ -95,7 +95,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
   const [tagify, setTagify] = useState<Tagify | null>(null);
   const [defaultTagifyValue, setDefaultTagifyValue] = useState('');
 
-  const menuRef = useRef<HTMLDivElement>();
+  const menuRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement>();
 
   const handleTabKeyDown = (event: KeyboardEvent) => {

package/src/features/common/StepNavigation/CollapsedSteps.ts

@@ -16,9 +16,15 @@ interface CollapsedStepsProps {
 }
 
 const CollapsedSteps = (props: CollapsedStepsProps) => {
-  const { steps, currentStepIndex, isPreviewMode, changeStep, isReadOnly = false } = props;
+  const {
+    steps,
+    currentStepIndex,
+    isPreviewMode,
+    changeStep,
+    isReadOnly = false,
+  } = props;
 
-  const collapseRef = useRef<HTMLDivElement>();
+  const collapseRef = useRef<HTMLDivElement | null>(null);
   const dotsRef = useRef<HTMLDivElement>();
 
   const [showCollapsed, setShowCollapsed] = useState(false);

package/src/features/common/StepNavigation/index.ts

@@ -23,7 +23,7 @@ interface ParsedStep {
 const StepNavigation = (props: StepNavigationProps) => {
   const MAX_STEP_WIDTH = 220;
 
-  const wrapRef = useRef<HTMLDivElement>();
+  const wrapRef = useRef<HTMLDivElement | null>(null);
   const {
     gotoStep,
     stepState: {
@@ -59,10 +59,10 @@ const StepNavigation = (props: StepNavigationProps) => {
       // console.log('step_width / MAX_WIDTH:', stepsToShow);
 
       let itemIndex = -1;
-       let stepsLength = steps.length;
-          if (isReadOnly) {
-            stepsLength = steps.length - 1;
-          }
+      let stepsLength = steps.length;
+      if (isReadOnly) {
+        stepsLength = steps.length - 1;
+      }
 
       if (stepsToShow <= stepsLength) {
         // const canShowComfortably = Math.floor(stepsToShow);
@@ -140,15 +140,15 @@ const StepNavigation = (props: StepNavigationProps) => {
           } else {
             itemIndex += 1;
             //  check if more Visible steps can be added
-             composedArray.push({
+            composedArray.push({
               type: 'VISIBLE',
               steps: [{ ...steps[itemIndex], itemIndex }],
-            });           
+            });
 
             // console.log('Show first, last, collapsed steps in middle');
             composedArray.push({
               type: 'COLLAPSED',
-              steps: steps.slice(itemIndex+1, stepsLength).map((el) => {
+              steps: steps.slice(itemIndex + 1, stepsLength).map((el) => {
                 itemIndex += 1;
                 return { ...el, itemIndex };
               }),
@@ -158,9 +158,7 @@ const StepNavigation = (props: StepNavigationProps) => {
             // add the last step always for readOnly mode
             composedArray.push({
               type: 'VISIBLE',
-              steps: [
-                { ...steps[stepsLength], itemIndex: stepsLength },
-              ],
+              steps: [{ ...steps[stepsLength], itemIndex: stepsLength }],
             });
           }
         }
@@ -188,7 +186,10 @@ const StepNavigation = (props: StepNavigationProps) => {
   };
 
   return html`
-    <div class="${styles.navigation} ${'integry-steps-navigation'}" ref=${wrapRef}>
+    <div
+      class="${styles.navigation} ${'integry-steps-navigation'}"
+      ref=${wrapRef}
+    >
       ${parsedSteps.map((parent) => {
         if (parent.type === 'VISIBLE') {
           return parent.steps.map(
@@ -212,7 +213,9 @@ const StepNavigation = (props: StepNavigationProps) => {
                   ((context?.isPreviewMode &&
                     Number(currentStepIndex) !== el.itemIndex) ||
                     Number(currentStepIndex) < el.itemIndex)}
-                  isLastStep=${isReadOnly ? el.itemIndex === steps.length - 1 : el.itemIndex === steps.length}
+                  isLastStep=${isReadOnly
+                    ? el.itemIndex === steps.length - 1
+                    : el.itemIndex === steps.length}
                   onClick=${() => changeStep(el.itemIndex)}
                   isReadOnly=${isReadOnly}
                 />
@@ -233,7 +236,8 @@ const StepNavigation = (props: StepNavigationProps) => {
         }
         return html`<></>`;
       })}
-      ${parsedSteps.length > 0 && !isReadOnly &&
+      ${parsedSteps.length > 0 &&
+      !isReadOnly &&
       html`
         <${NavItem}
           label="Confirmation"

package/src/features/containers/MarkeplaceApps/index.ts

@@ -158,7 +158,7 @@ const MarketplaceApps = (props: any) => {
   const [allowMultipleAuths, setAllowMultipleAuth] = useState<boolean>(true);
 
   const DEBOUNCE_DELAY = 500;
-  const debounceTimeout = useRef<ReturnType<typeof setTimeout>>(0);
+  const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const getApps = ({
     currentApps = <any>[],

package/src/features/containers/MarketplaceAppsCompact/index.ts

@@ -161,7 +161,7 @@ const MarketplaceAppsCompact = (props: any) => {
   const [allowMultipleAuths, setAllowMultipleAuth] = useState<boolean>(true);
 
   const DEBOUNCE_DELAY = 500;
-  const debounceTimeout = useRef<ReturnType<typeof setTimeout>>(0);
+  const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const getApps = ({
     currentApps = <any>[],

package/src/hooks/useEventListener.ts

@@ -7,9 +7,7 @@ function useEventListener<T extends HTMLElement = HTMLDivElement>(
   element?: RefObject<T>,
 ) {
   // Create a ref that stores handler
-  const savedHandler: RefObject<(event: Event) => void> = useRef<
-    (event: Event) => void
-  >();
+  const savedHandler = useRef<((event: Event) => void) | null>(null);
 
   useEffect(() => {
     // Define the listening target