npm - @cloudflare/realtimekit-ui - Versions diffs - 1.0.6-staging.3 → 1.0.6-staging.5 - Mend

@cloudflare/realtimekit-ui 1.0.6-staging.3 → 1.0.6-staging.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (380) hide show

package/dist/cjs/{floating-ui.dom.esm-90c5a220.js → floating-ui.dom.esm-705e65f3.js} RENAMED Viewed

@@ -609,7 +609,7 @@ const flip$1 = function (options) {
           if (!ignoreCrossAxisOverflow ||
           // We leave the current main axis only if every placement on that axis
           // overflows the main axis.
-          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
+          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
             // Try next placement and re-run the lifecycle.
             return {
               data: {
@@ -1233,7 +1233,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
 const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
@@ -1255,7 +1255,7 @@ const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspect
 const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
@@ -1281,7 +1281,7 @@ const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#documen
 function isLastTraversableNode(node) {
   return lastTraversableNodeNames.has(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -1343,7 +1343,7 @@ function getFrameElement(win) {
 }
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
@@ -1448,7 +1448,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -1479,14 +1479,9 @@ function getWindowScrollBarX(element, rect) {
   return rect.left + leftScroll;
 }
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-  // RTL <body> scrollbar.
-  getWindowScrollBarX(documentElement, htmlRect));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -1525,7 +1520,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -1548,7 +1543,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === 'rtl') {
+  if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -1559,6 +1554,10 @@ function getDocumentRect(element) {
   };
 }
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -1576,6 +1575,24 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -1626,7 +1643,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
 }
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -1639,12 +1656,12 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === 'fixed';
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
@@ -1745,11 +1762,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
 }
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === 'static';
+  return getComputedStyle$1(element).position === 'static';
 }
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -1810,7 +1827,7 @@ const getElementRects = async function (data) {
 };
 function isRTL(element) {
-  return getComputedStyle(element).direction === 'rtl';
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 const platform = {

package/dist/cjs/rtk-ai-transcriptions.cjs.entry.js CHANGED Viewed

@@ -117,7 +117,7 @@ const RtkAiTranscriptions = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '94f60db03785e266280aea971d3b998280840be2' }, index$1.h("div", { key: '0c709d7013ffd86748abc3a367e9cb504c2a37f5', class: "search-bar" }, index$1.h("input", { key: 'd98c6b1eb8835e59ed48d7a07bd12efbf72c9ae1', type: "text", placeholder: "Search Participant", value: this.participantQuery, onInput: (e) => (this.participantQuery = e.target.value) })), this.isProcessing && (index$1.h("div", { key: '041a08dd3e14b3d8c35d2d487d30a281f53338a0', class: "processing" }, index$1.h("p", { key: 'c4c90b39ca5ad0fd8161f0e3eb96aba38d959c6e' }, "Processing audio...."))), !this.isProcessing && (index$1.h("div", { key: '03bd5836324c9865d0e522d86e51701ec305f6ad', class: "content scrollbar", ref: (el) => (this.contentContainer = el) }, index$1.h("div", { key: '1df6f1b8cf06aa6f14d5700a7dfa86177bf3a752', class: "started-message" }, "Transcription started"), this.renderTranscripts()))));
+        return (index$1.h(index$1.Host, { key: 'f9d8cea8917ddb558fd721020c71e32964c4e653' }, index$1.h("div", { key: 'b35cf0970ccf2b813c99976e1554c2a4dc60ac12', class: "search-bar" }, index$1.h("input", { key: 'd6c84982fbf1f5b7c9b8264228f622ca74d60672', type: "text", placeholder: "Search Participant", value: this.participantQuery, onInput: (e) => (this.participantQuery = e.target.value) })), this.isProcessing && (index$1.h("div", { key: 'fbd031e9acdd967e2e81bcb655d3ff80a33210f5', class: "processing" }, index$1.h("p", { key: '7ee274172423aaac3f286f9463ae2c2b0a01d09e' }, "Processing audio...."))), !this.isProcessing && (index$1.h("div", { key: 'e07f3a7314132300113f955e7a83bc2ca18e6bc5', class: "content scrollbar", ref: (el) => (this.contentContainer = el) }, index$1.h("div", { key: '3ffd0b4a02a6aaa136a282f145772e2f3afd3bc1', class: "started-message" }, "Transcription started"), this.renderTranscripts()))));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"],

package/dist/cjs/rtk-audio-grid.cjs.entry.js CHANGED Viewed

@@ -89,7 +89,7 @@ const RtkAudioGrid = class {
     }
     render() {
         const onStage = this.activeParticipants.concat(this.onStageParticipants);
-        return (index$1.h(index$1.Host, { key: '1fe3a85bc93c05e225d68f21055e1017a7f70d58' }, index$1.h("div", { key: 'af48ec158bcd5b6a9c2326703aac739643053c05', class: "content scrollbar" }, index$1.h("div", { key: 'c8141f9cb9f9eee023419c3c99cc98098907208b', class: "stage grid" }, this.renderGrid(onStage)), this.offStageParticipants.length > 0 && (index$1.h("div", { key: '43bc09bdf14e0faac406f8f5f0f0a244ec95624a', class: "waitlist-area" }, index$1.h("div", { key: '609530579f746d37e16839dd82afd8f04c183101', class: "listening-title" }, this.offStageParticipants.length, " ", this.t('grid.listening')), index$1.h("div", { key: '410f40724a1816bd12e925e5de5a2212f0202c6a', class: "waitlist-grid grid" }, this.renderGrid(this.offStageParticipants))))), index$1.h("slot", { key: 'f3ecc1e452e89239e3cb3327b597805fd01b6a1b' })));
+        return (index$1.h(index$1.Host, { key: '9abf98e115b0c6904fd970c39880101fab2c637c' }, index$1.h("div", { key: 'dba672bd5cdd108629802028080eef8d1fb3afd6', class: "content scrollbar" }, index$1.h("div", { key: '21fc5e7ac8a6226b35695960f8f4b92a227344b5', class: "stage grid" }, this.renderGrid(onStage)), this.offStageParticipants.length > 0 && (index$1.h("div", { key: '6aee7d64d2af6e4435c5e552e24d7a3dc12847f8', class: "waitlist-area" }, index$1.h("div", { key: 'e84f6038cc0071062b9d5d033848739bdb1cc971', class: "listening-title" }, this.offStageParticipants.length, " ", this.t('grid.listening')), index$1.h("div", { key: 'd6d5cdd233847dca6902a4c0158be110b36b1c76', class: "waitlist-grid grid" }, this.renderGrid(this.offStageParticipants))))), index$1.h("slot", { key: '03aee180fdfdf0a8391e31cc2e943173fb06bcc0' })));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {

package/dist/cjs/rtk-audio-visualizer_4.cjs.entry.js CHANGED Viewed

@@ -50,7 +50,7 @@ const drawBarsVisualizer = (canvas, volume) => {
     context.stroke();
 };
-const rtkAudioVisualizerCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block;width:-moz-fit-content;width:fit-content}.hideMuted{padding:var(--rtk-space-1, 4px)}canvas,rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host([size='sm']){transform:scale(0.9)}canvas{display:none}canvas.visible{display:block}canvas.bars{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}";
+const rtkAudioVisualizerCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block;width:-moz-fit-content;width:fit-content}.audioActivePadding{padding:var(--rtk-space-1, 4px)}canvas,rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host([size='sm']){transform:scale(0.9)}canvas{display:none}canvas.visible{display:block}canvas.bars{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}";
 const RtkAudioVisualizerStyle0 = rtkAudioVisualizerCss;
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -72,7 +72,7 @@ const RtkAudioVisualizer = class {
         this.iconPack = uiStore.defaultIconPack;
         /** Language */
         this.t = uiStore.useLanguage();
-        /** Hide when there is no audio / audio is muted */
+        /** Hide the visualizer if audio is muted */
         this.hideMuted = false;
         /** Audio visualizer for screensharing, it will use screenShareTracks.audio instead of audioTrack */
         this.isScreenShare = false;
@@ -160,12 +160,14 @@ const RtkAudioVisualizer = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '50fd0d2472432f4a67ead60e3ab44fa015a30a0a' }, index$1.h("div", { key: '6f453d5b54520ea6c798137c95a4e3cfe1a598bb', class: {
-                hideMuted: this.hideMuted,
-            } }, index$1.h("canvas", { key: '81a9c569126e607c80327cd309fb224ecaa877b4', width: "24", height: "24", class: {
+        if (this.hideMuted && !this.audioEnabled)
+            return null;
+        return (index$1.h(index$1.Host, null, index$1.h("div", { class: {
+                audioActivePadding: this.hideMuted && this.audioEnabled,
+            } }, index$1.h("canvas", { width: "24", height: "24", class: {
                 bars: true,
                 visible: this.audioEnabled,
-            }, ref: (el) => (this.visualizer = el), part: "canvas" }), !this.isScreenShare && !this.audioEnabled && this.hideMuted !== true && (index$1.h("rtk-icon", { key: '223c3eaea7f05589e0321df21d971e0753c6a260', icon: this.iconPack.mic_off, part: "mic-off-icon" })))));
+            }, ref: (el) => (this.visualizer = el), part: "canvas" }), !this.isScreenShare && !this.audioEnabled && (index$1.h("rtk-icon", { icon: this.iconPack.mic_off, part: "mic-off-icon" })))));
     }
     static get watchers() { return {
         "participant": ["participantChanged"]
@@ -472,7 +474,7 @@ const RtkSwitch = class {
         this.onChange.emit(checked);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'c2724826e576f196f000b31cb74ff24a7169c316', role: "switch", tabIndex: this.disabled && 0, "aria-readonly": this.readonly, "aria-checked": this.checked, "aria-disabled": this.disabled, class: { checked: this.checked }, onClick: this.onClick, onKeyPress: this.onKeyPress }, index$1.h("div", { key: 'e7a8fec98fb7bc6e2bee20e8b6bd8c45b8cd0bdf', class: "switch", part: "switch" })));
+        return (index$1.h(index$1.Host, { key: '74affe48ce91e7be340e9d37507859fdd473bcb1', role: "switch", tabIndex: this.disabled && 0, "aria-readonly": this.readonly, "aria-checked": this.checked, "aria-disabled": this.disabled, class: { checked: this.checked }, onClick: this.onClick, onKeyPress: this.onKeyPress }, index$1.h("div", { key: '24ae27603c839d40d6452c5ee669342acb60f73d', class: "switch", part: "switch" })));
     }
     static get watchers() { return {
         "checked": ["checkedChange"]