@adhese/sdk-react 1.1.4 → 1.2.0-nightly-20240625075942

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @adhese/sdk-react
 
+## 1.2.0-nightly-20240625075942
+
+### Minor Changes
+
+- 1ea0633: Set width and height on passed element from the passed options to prevent content jumping in your page if the size of the slot is already known
+
+### Patch Changes
+
+- Updated dependencies [1ea0633]
+  - @adhese/sdk@1.1.4-nightly-20240625075942
+
 ## 1.1.4
 
 ### Patch Changes

package/dist/AdheseSlot.js

@@ -18,7 +18,18 @@ function AdheseSlot({
     }, [options.setup, onChange])
   });
   const id = useId();
-  return /* @__PURE__ */ jsx("div", { ref: element, id: `${id}${slot == null ? void 0 : slot.id}`, "data-name": slot == null ? void 0 : slot.name });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: element,
+      id: `${id}${slot == null ? void 0 : slot.id}`,
+      "data-name": slot == null ? void 0 : slot.name,
+      style: (slot == null ? void 0 : slot.options) ? {
+        width: slot == null ? void 0 : slot.options.width,
+        height: slot == null ? void 0 : slot.options.height
+      } : void 0
+    }
+  );
 }
 export {
   AdheseSlot

package/dist/AdheseSlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdheseSlot.js","sources":["../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, useId, useRef } from 'react';\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { useAdheseSlot } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n} & Omit<AdheseSlotOptions, 'containingElement' | 'context'>;\n\n/**\n * Component to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be\n * created when the containing element is available and the Adhese instance is available.\n *\n * @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not\n * memoized.\n */\n// eslint-disable-next-line ts/naming-convention\nexport function AdheseSlot({\n  onChange,\n  ...options\n}: AdheseSlotProps): ReactElement {\n  const element = useRef<HTMLDivElement | null>(null);\n\n  const slot = useAdheseSlot(element, {\n    ...options,\n    setup: useCallback(((context, hooks): void => {\n      options.setup?.(context, hooks);\n\n      watch(context, (newSlot) => {\n        onChange?.(newSlot);\n      }, { immediate: true, deep: true });\n    }) satisfies AdheseSlotOptions['setup'], [options.setup, onChange]),\n  });\n\n  const id = useId();\n\n  return (\n    <div ref={element} id={`${id}${slot?.id}`} data-name={slot?.name} />\n  );\n}\n"],"names":[],"mappings":";;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAU,OAA8B,IAAI;AAE5C,QAAA,OAAO,cAAc,SAAS;AAAA,IAClC,GAAG;AAAA,IACH,OAAO,YAAa,CAAC,SAAS,UAAgB;;AACpC,oBAAA,UAAA,iCAAQ,SAAS;AAEnB,YAAA,SAAS,CAAC,YAAY;AAC1B,6CAAW;AAAA,SACV,EAAE,WAAW,MAAM,MAAM,KAAM,CAAA;AAAA,IACK,GAAA,CAAC,QAAQ,OAAO,QAAQ,CAAC;AAAA,EAAA,CACnE;AAED,QAAM,KAAK;AAEX,SACG,oBAAA,OAAA,EAAI,KAAK,SAAS,IAAI,GAAG,EAAE,GAAG,6BAAM,EAAE,IAAI,aAAW,6BAAM,KAAM,CAAA;AAEtE;"}
+{"version":3,"file":"AdheseSlot.js","sources":["../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, useId, useRef } from 'react';\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { useAdheseSlot } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n} & Omit<AdheseSlotOptions, 'containingElement' | 'context'>;\n\n/**\n * Component to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be\n * created when the containing element is available and the Adhese instance is available.\n *\n * @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not\n * memoized.\n */\n// eslint-disable-next-line ts/naming-convention\nexport function AdheseSlot({\n  onChange,\n  ...options\n}: AdheseSlotProps): ReactElement {\n  const element = useRef<HTMLDivElement | null>(null);\n\n  const slot = useAdheseSlot(element, {\n    ...options,\n    setup: useCallback(((context, hooks): void => {\n      options.setup?.(context, hooks);\n\n      watch(context, (newSlot) => {\n        onChange?.(newSlot);\n      }, { immediate: true, deep: true });\n    }) satisfies AdheseSlotOptions['setup'], [options.setup, onChange]),\n  });\n\n  const id = useId();\n\n  return (\n    <div\n      ref={element}\n      id={`${id}${slot?.id}`}\n      data-name={slot?.name}\n      style={slot?.options\n        ? {\n            width: slot?.options.width,\n            height: slot?.options.height,\n          }\n        : undefined}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAU,OAA8B,IAAI;AAE5C,QAAA,OAAO,cAAc,SAAS;AAAA,IAClC,GAAG;AAAA,IACH,OAAO,YAAa,CAAC,SAAS,UAAgB;;AACpC,oBAAA,UAAA,iCAAQ,SAAS;AAEnB,YAAA,SAAS,CAAC,YAAY;AAC1B,6CAAW;AAAA,SACV,EAAE,WAAW,MAAM,MAAM,KAAM,CAAA;AAAA,IACK,GAAA,CAAC,QAAQ,OAAO,QAAQ,CAAC;AAAA,EAAA,CACnE;AAED,QAAM,KAAK;AAGT,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI,GAAG,EAAE,GAAG,6BAAM,EAAE;AAAA,MACpB,aAAW,6BAAM;AAAA,MACjB,QAAO,6BAAM,WACT;AAAA,QACE,OAAO,6BAAM,QAAQ;AAAA,QACrB,QAAQ,6BAAM,QAAQ;AAAA,MAExB,IAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/cjs/AdheseSlot.cjs

@@ -20,7 +20,18 @@ function AdheseSlot({
     }, [options.setup, onChange])
   });
   const id = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: element, id: `${id}${slot == null ? void 0 : slot.id}`, "data-name": slot == null ? void 0 : slot.name });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: element,
+      id: `${id}${slot == null ? void 0 : slot.id}`,
+      "data-name": slot == null ? void 0 : slot.name,
+      style: (slot == null ? void 0 : slot.options) ? {
+        width: slot == null ? void 0 : slot.options.width,
+        height: slot == null ? void 0 : slot.options.height
+      } : void 0
+    }
+  );
 }
 exports.AdheseSlot = AdheseSlot;
 //# sourceMappingURL=AdheseSlot.cjs.map

package/dist/cjs/AdheseSlot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AdheseSlot.cjs","sources":["../../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, useId, useRef } from 'react';\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { useAdheseSlot } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n} & Omit<AdheseSlotOptions, 'containingElement' | 'context'>;\n\n/**\n * Component to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be\n * created when the containing element is available and the Adhese instance is available.\n *\n * @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not\n * memoized.\n */\n// eslint-disable-next-line ts/naming-convention\nexport function AdheseSlot({\n  onChange,\n  ...options\n}: AdheseSlotProps): ReactElement {\n  const element = useRef<HTMLDivElement | null>(null);\n\n  const slot = useAdheseSlot(element, {\n    ...options,\n    setup: useCallback(((context, hooks): void => {\n      options.setup?.(context, hooks);\n\n      watch(context, (newSlot) => {\n        onChange?.(newSlot);\n      }, { immediate: true, deep: true });\n    }) satisfies AdheseSlotOptions['setup'], [options.setup, onChange]),\n  });\n\n  const id = useId();\n\n  return (\n    <div ref={element} id={`${id}${slot?.id}`} data-name={slot?.name} />\n  );\n}\n"],"names":["useRef","useAdheseSlot","useCallback","watch","useId","jsx"],"mappings":";;;;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAUA,aAA8B,IAAI;AAE5C,QAAA,OAAOC,4BAAc,SAAS;AAAA,IAClC,GAAG;AAAA,IACH,OAAOC,MAAA,YAAa,CAAC,SAAS,UAAgB;;AACpC,oBAAA,UAAA,iCAAQ,SAAS;AAEnBC,sBAAA,SAAS,CAAC,YAAY;AAC1B,6CAAW;AAAA,SACV,EAAE,WAAW,MAAM,MAAM,KAAM,CAAA;AAAA,IACK,GAAA,CAAC,QAAQ,OAAO,QAAQ,CAAC;AAAA,EAAA,CACnE;AAED,QAAM,KAAKC,MAAAA;AAEX,SACGC,2BAAAA,IAAA,OAAA,EAAI,KAAK,SAAS,IAAI,GAAG,EAAE,GAAG,6BAAM,EAAE,IAAI,aAAW,6BAAM,KAAM,CAAA;AAEtE;;"}
+{"version":3,"file":"AdheseSlot.cjs","sources":["../../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, useId, useRef } from 'react';\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { useAdheseSlot } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n} & Omit<AdheseSlotOptions, 'containingElement' | 'context'>;\n\n/**\n * Component to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be\n * created when the containing element is available and the Adhese instance is available.\n *\n * @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not\n * memoized.\n */\n// eslint-disable-next-line ts/naming-convention\nexport function AdheseSlot({\n  onChange,\n  ...options\n}: AdheseSlotProps): ReactElement {\n  const element = useRef<HTMLDivElement | null>(null);\n\n  const slot = useAdheseSlot(element, {\n    ...options,\n    setup: useCallback(((context, hooks): void => {\n      options.setup?.(context, hooks);\n\n      watch(context, (newSlot) => {\n        onChange?.(newSlot);\n      }, { immediate: true, deep: true });\n    }) satisfies AdheseSlotOptions['setup'], [options.setup, onChange]),\n  });\n\n  const id = useId();\n\n  return (\n    <div\n      ref={element}\n      id={`${id}${slot?.id}`}\n      data-name={slot?.name}\n      style={slot?.options\n        ? {\n            width: slot?.options.width,\n            height: slot?.options.height,\n          }\n        : undefined}\n    />\n  );\n}\n"],"names":["useRef","useAdheseSlot","useCallback","watch","useId","jsx"],"mappings":";;;;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAUA,aAA8B,IAAI;AAE5C,QAAA,OAAOC,4BAAc,SAAS;AAAA,IAClC,GAAG;AAAA,IACH,OAAOC,MAAA,YAAa,CAAC,SAAS,UAAgB;;AACpC,oBAAA,UAAA,iCAAQ,SAAS;AAEnBC,sBAAA,SAAS,CAAC,YAAY;AAC1B,6CAAW;AAAA,SACV,EAAE,WAAW,MAAM,MAAM,KAAM,CAAA;AAAA,IACK,GAAA,CAAC,QAAQ,OAAO,QAAQ,CAAC;AAAA,EAAA,CACnE;AAED,QAAM,KAAKC,MAAAA;AAGT,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI,GAAG,EAAE,GAAG,6BAAM,EAAE;AAAA,MACpB,aAAW,6BAAM;AAAA,MACjB,QAAO,6BAAM,WACT;AAAA,QACE,OAAO,6BAAM,QAAQ;AAAA,QACrB,QAAQ,6BAAM,QAAQ;AAAA,MAExB,IAAA;AAAA,IAAA;AAAA,EAAA;AAGV;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adhese/sdk-react",
   "type": "module",
-  "version": "1.1.4",
+  "version": "1.2.0-nightly-20240625075942",
   "description": "Adhese SDK",
   "repository": {
     "type": "git",
@@ -44,7 +44,7 @@
     "react-dom": ">=16.13"
   },
   "dependencies": {
-    "@adhese/sdk": "^1.1.3",
+    "@adhese/sdk": "1.1.4-nightly-20240625075942",
     "@adhese/sdk-shared": "^1.1.0"
   }
 }