@webex/widgets 1.20.7 → 1.22.0

package/dist/webexWidgets.esm.js

@@ -4300,7 +4300,7 @@ function X(e) {
   };
 }
 
-var J = function (r) {
+var K = function (r) {
   _inherits(i, R);
   var a = X(i);
 
@@ -4319,12 +4319,12 @@ var J = function (r) {
   }]), i;
 }();
 
-function K(e, t) {
+function J(e, t) {
   for (var n = e, r = 0, a = Object.entries(t); r < a.length; r++) {
     var i = _slicedToArray(a[r], 2),
         o = i[0],
         s = i[1];
-    (null == s ? void 0 : s.constructor) === Object ? K(n[o], s) : n[o] = s;
+    (null == s ? void 0 : s.constructor) === Object ? J(n[o], s) : n[o] = s;
   }
 }
 
@@ -6522,7 +6522,7 @@ var Ve = {
             return r = this.fetchMeeting(t), e.next = 3, n(r);
 
           case 3:
-            a = e.sent, K(r, a), document.dispatchEvent(new CustomEvent("meeting:update", {
+            a = e.sent, J(r, a), document.dispatchEvent(new CustomEvent("meeting:update", {
               detail: r
             }));
 
@@ -6803,7 +6803,7 @@ function Xe(e) {
 
   function i(t) {
     var n;
-    return _classCallCheck(this, i), (n = a.call(this, t)).activitiesAdapter = new J(t.activities), n.meetingsAdapter = new He(t.meetings), n.membershipsAdapter = new Ue(t.memberships), n.organizationsAdapter = new Fe(t.organizations), n.peopleAdapter = new Ye(t.people), n.roomsAdapter = new _e(t.rooms), n;
+    return _classCallCheck(this, i), (n = a.call(this, t)).activitiesAdapter = new K(t.activities), n.meetingsAdapter = new He(t.meetings), n.membershipsAdapter = new Ue(t.memberships), n.organizationsAdapter = new Fe(t.organizations), n.peopleAdapter = new Ye(t.people), n.roomsAdapter = new _e(t.rooms), n;
   }
 
   return _createClass(i, [{
@@ -6819,7 +6819,7 @@ function Xe(e) {
   }]), i;
 })();
 
-function Ke(e) {
+function Je(e) {
   var t = e.size,
       n = e.className,
       r = e.style;
@@ -7541,11 +7541,11 @@ function Pt(e) {
   }));
 }
 
-Ke.propTypes = {
+Je.propTypes = {
   size: T.number,
   className: T.string,
   style: T.shape()
-}, Ke.defaultProps = {
+}, Je.defaultProps = {
   size: 26,
   className: "",
   style: {}
@@ -7815,7 +7815,7 @@ Ke.propTypes = {
   style: {}
 };
 var Lt = {
-  "arrow-down": Ke,
+  "arrow-down": Je,
   "arrow-left": Qe,
   "arrow-up": $e,
   check: nt,
@@ -7969,19 +7969,19 @@ var Ht,
     Gt = /auto|scroll/,
     _t = /^tb|vertical/,
     Xt = /msie|trident/i.test(Wt.navigator && Wt.navigator.userAgent),
-    Jt = function (e) {
+    Kt = function (e) {
   return parseFloat(e || "0");
 },
-    Kt = function (e, t, n) {
+    Jt = function (e, t, n) {
   return void 0 === e && (e = 0), void 0 === t && (t = 0), void 0 === n && (n = !1), Object.freeze({
     inlineSize: (n ? t : e) || 0,
     blockSize: (n ? e : t) || 0
   });
 },
     Qt = Object.freeze({
-  devicePixelContentBoxSize: Kt(),
-  borderBoxSize: Kt(),
-  contentBoxSize: Kt(),
+  devicePixelContentBoxSize: Jt(),
+  borderBoxSize: Jt(),
+  contentBoxSize: Jt(),
   contentRect: new qt(0, 0, 0, 0)
 }),
     $t = function (e, t) {
@@ -7994,29 +7994,29 @@ var Ht,
       i = _t.test(n.writingMode || ""),
       o = !r && Gt.test(n.overflowY || ""),
       s = !r && Gt.test(n.overflowX || ""),
-      c = r ? 0 : Jt(n.paddingTop),
-      l = r ? 0 : Jt(n.paddingRight),
-      u = r ? 0 : Jt(n.paddingBottom),
-      m = r ? 0 : Jt(n.paddingLeft),
-      p = r ? 0 : Jt(n.borderTopWidth),
-      d = r ? 0 : Jt(n.borderRightWidth),
-      f = r ? 0 : Jt(n.borderBottomWidth),
+      c = r ? 0 : Kt(n.paddingTop),
+      l = r ? 0 : Kt(n.paddingRight),
+      u = r ? 0 : Kt(n.paddingBottom),
+      m = r ? 0 : Kt(n.paddingLeft),
+      p = r ? 0 : Kt(n.borderTopWidth),
+      d = r ? 0 : Kt(n.borderRightWidth),
+      f = r ? 0 : Kt(n.borderBottomWidth),
       h = m + l,
       v = c + u,
-      g = (r ? 0 : Jt(n.borderLeftWidth)) + d,
+      g = (r ? 0 : Kt(n.borderLeftWidth)) + d,
       y = p + f,
       C = s ? e.offsetHeight - y - e.clientHeight : 0,
       w = o ? e.offsetWidth - g - e.clientWidth : 0,
       b = a ? h + g : 0,
       E = a ? v + y : 0,
-      x = r ? r.width : Jt(n.width) - b - w,
-      N = r ? r.height : Jt(n.height) - E - C,
+      x = r ? r.width : Kt(n.width) - b - w,
+      N = r ? r.height : Kt(n.height) - E - C,
       k = x + h + w + g,
       O = N + v + C + y,
       D = Object.freeze({
-    devicePixelContentBoxSize: Kt(Math.round(x * devicePixelRatio), Math.round(N * devicePixelRatio), i),
-    borderBoxSize: Kt(k, O, i),
-    contentBoxSize: Kt(x, N, i),
+    devicePixelContentBoxSize: Jt(Math.round(x * devicePixelRatio), Math.round(N * devicePixelRatio), i),
+    borderBoxSize: Jt(k, O, i),
+    contentBoxSize: Jt(x, N, i),
     contentRect: new qt(m, c, x, N)
   });
 
@@ -8573,17 +8573,12 @@ function jn(e) {
 }
 
 function zn() {
-  var e,
-      t,
-      n,
-      r,
-      a = (e = useState(0), t = _slicedToArray(e, 2), n = t[0], r = t[1], function () {
-    return r(n + 1);
-  }),
-      i = useCallback(function (e) {
-    i.current = e, a();
+  var e = useState(),
+      t = _slicedToArray(e, 2)[1],
+      n = useCallback(function (e) {
+    n.current = e, t(e);
   }, []);
-  return i;
+  return n;
 }
 
 function An(e, t) {
@@ -8763,7 +8758,7 @@ function Xn(e) {
   return t.setSeconds(0, 0), 6e4 * n + (n > 0 ? (6e4 + _n(t)) % 6e4 : _n(t));
 }
 
-function Kn(e) {
+function Jn(e) {
   Zn(1, arguments);
   var t = Fn(e);
   return !isNaN(t);
@@ -10013,7 +10008,7 @@ function Yr(e, t, n) {
   if (!i.localize) throw new RangeError("locale must contain localize property");
   if (!i.formatLong) throw new RangeError("locale must contain formatLong property");
   var p = Fn(e);
-  if (!Kn(p)) throw new RangeError("Invalid time value");
+  if (!Jn(p)) throw new RangeError("Invalid time value");
   var d = Xn(p),
       f = sr(p, d),
       h = {
@@ -10759,83 +10754,74 @@ function Na(e) {
 }
 
 function ka(e) {
-  var t = e.className,
-      n = e.focused,
-      r = e.onKeyDown,
-      a = e.onMouseEnter,
-      i = e.onSelect,
-      o = e.option,
-      s = e.sc,
-      c = e.selected,
-      l = e.tabIndex,
-      u = zn();
-  return zt(u, n), x.createElement("li", {
-    "aria-label": "object" !== _typeof(o.label) ? o.label : o.value,
-    "aria-selected": c === o.value,
-    className: t,
-    key: o.value,
+  var t = e.autoFocus,
+      n = e.className,
+      r = e.onMouseEnter,
+      a = e.onSelect,
+      i = e.option,
+      o = e.selected,
+      s = e.tabIndex,
+      c = zn(),
+      l = Pe("option", n),
+      u = _slicedToArray(l, 2),
+      m = u[0],
+      p = u[1];
+  zt(c, t);
+  return x.createElement("li", {
+    "aria-label": "object" !== _typeof(i.label) ? i.label : i.value,
+    "aria-selected": o === i.value,
+    className: m,
+    key: i.value,
     role: "option",
-    ref: u,
-    onClick: i,
-    onKeyDown: r,
-    onMouseEnter: a,
-    tabIndex: l,
-    title: "object" !== _typeof(o.label) && o.label
-  }, o.icon && x.createElement(It, {
-    name: o.icon
+    ref: c,
+    onClick: function () {
+      return a(i, !1);
+    },
+    onKeyDown: function (e) {
+      var t;
+      "ArrowUp" === e.key ? t = c.current.previousElementSibling : "ArrowDown" === e.key ? t = c.current.nextElementSibling : "Enter" === e.key && a(i, !0), t && t.focus();
+    },
+    onMouseEnter: r,
+    tabIndex: s,
+    title: "object" !== _typeof(i.label) ? i.label : void 0
+  }, i.icon && x.createElement(It, {
+    name: i.icon
   }), x.createElement("span", {
-    className: s("label")
-  }, o.label), c && x.createElement(It, {
-    className: De(s("check"), _defineProperty({}, s("check--invisible"), c !== o.value)),
+    className: p("label")
+  }, i.label), o && x.createElement(It, {
+    className: De(p("check"), _defineProperty({}, p("check--invisible"), o !== i.value)),
     size: 16,
     name: "check"
   }));
 }
 
 function Oa(e) {
-  var t = e.options,
-      n = e.className,
-      r = e.onBlur,
-      a = e.onSelect,
+  var t = e.className,
+      n = e.onBlur,
+      r = e.onSelect,
+      a = e.options,
       i = e.selected,
       o = e.tabIndex,
-      s = Pe("options-list", n),
-      c = _slicedToArray(s, 2),
-      l = c[0],
-      u = c[1],
-      m = useState(0),
-      p = _slicedToArray(m, 2),
-      d = p[0],
-      f = p[1],
-      h = function (e) {
-    if ("ArrowUp" === e.key) {
-      var n = (d + t.length - 1) % t.length;
-      f(n);
-    } else if ("ArrowDown" === e.key) {
-      var i = (d + 1) % t.length;
-      f(i);
-    } else "Enter" === e.key ? a(t[d]) : "Tab" === e.key && r();
-  };
-
+      s = e.withKey,
+      c = Pe("options-list", t),
+      l = _slicedToArray(c, 2),
+      u = l[0],
+      m = l[1];
   return x.createElement("div", {
-    className: l
+    className: u
   }, x.createElement("ul", {
     role: "menu",
-    className: u("list"),
-    tabIndex: o
-  }, t.map(function (e, t) {
+    className: m("list"),
+    tabIndex: o,
+    onKeyDown: function (e) {
+      "Tab" === e.key && n();
+    }
+  }, a.map(function (e, t) {
     return x.createElement(ka, {
-      className: "".concat(u("option"), " ").concat(d === t && u("option--focused")),
-      focused: t === d,
-      onKeyDown: h,
-      onMouseEnter: function () {
-        return f(t);
-      },
-      onSelect: function () {
-        return a(e);
-      },
+      key: e.value,
+      autoFocus: s && (e.value === i || 0 === t),
+      onSelect: r,
       option: e,
-      sc: u,
       selected: i,
       tabIndex: o
     });
@@ -10852,7 +10838,7 @@ function Da(e) {
       s = e.tooltip,
       c = e.ariaLabel,
       l = e.tabIndex,
-      u = useState(!1),
+      u = useState(void 0),
       m = _slicedToArray(u, 2),
       p = m[0],
       d = m[1],
@@ -10865,11 +10851,14 @@ function Da(e) {
       y = null == a || null === (t = a.find(function (e) {
     return e.value === r;
   })) || void 0 === t ? void 0 : t.label,
-      C = function () {
-    o || d(!p);
-  },
+      C = zn(),
       w = function () {
-    return d(!1);
+    return d(void 0);
+  },
+      E = function (e) {
+    return d({
+      withKey: e
+    });
   };
 
   return useEffect(function () {
@@ -10883,15 +10872,21 @@ function Da(e) {
     className: v
   }, x.createElement("div", {
     className: "".concat(g("selected-option"), " ").concat(p ? g("expanded") : ""),
-    onClick: C,
+    onClick: function () {
+      return e = !1, void (o || d(p ? void 0 : {
+        withKey: e
+      }));
+      var e;
+    },
     "aria-hidden": "true",
     role: "button",
     tabIndex: l,
     title: s,
     "aria-label": "".concat(y ? "".concat(y, ". ") : "").concat(c),
     onKeyDown: function (e) {
-      "Enter" !== e.key && " " !== e.key || e.target !== e.currentTarget || C(), "Tab" === e.key && d(!1);
-    }
+      "Enter" !== e.key && " " !== e.key || e.target !== e.currentTarget ? "Tab" === e.key ? w() : "ArrowDown" !== e.key && "ArrowUp" !== e.key || E(!0) : E(!0);
+    },
+    ref: C
   }, x.createElement("span", {
     className: g("label")
   }, y || r), x.createElement(It, {
@@ -10901,10 +10896,9 @@ function Da(e) {
     className: g("options-list"),
     options: a,
     onSelect: function (e) {
-      return function (e) {
-        d(!1), i(e.value);
-      }(e);
+      w(), i(e.value), C.current.focus();
     },
+    withKey: p.withKey,
     selected: r,
     tabIndex: l,
     onBlur: w
@@ -10926,7 +10920,7 @@ Ca.propTypes = {
   children: T.node.isRequired,
   className: T.string,
   isDisabled: T.bool,
-  onClick: T.func.isRequired,
+  onClick: T.func,
   pressed: T.bool,
   style: T.shape(),
   size: T.oneOfType([T.number, T.string]),
@@ -10938,6 +10932,7 @@ Ca.propTypes = {
   autoFocus: !1,
   className: "",
   isDisabled: !1,
+  onClick: void 0,
   pressed: !1,
   style: {},
   size: 32,
@@ -10989,43 +10984,41 @@ Ca.propTypes = {
   ariaLabel: void 0
 }, ka.propTypes = {
   className: T.string,
-  focused: T.bool,
-  onKeyDown: T.func,
+  autoFocus: T.bool,
   onMouseEnter: T.func,
   onSelect: T.func.isRequired,
-  option: T.objectOf(T.shape({
+  option: T.shape({
     value: T.string,
     label: T.node,
     icon: T.string
-  })).isRequired,
-  sc: T.func,
+  }).isRequired,
   selected: T.string,
   tabIndex: T.number
 }, ka.defaultProps = {
   className: "",
-  focused: void 0,
-  onKeyDown: void 0,
+  autoFocus: void 0,
   onMouseEnter: void 0,
-  sc: void 0,
   selected: void 0,
   tabIndex: void 0
 }, Oa.propTypes = {
   className: T.string,
   onBlur: T.func,
+  onSelect: T.func.isRequired,
   options: T.arrayOf(T.shape({
     value: T.string,
     label: T.node,
     icon: T.string
   })),
-  onSelect: T.func.isRequired,
   selected: T.string,
-  tabIndex: T.number
+  tabIndex: T.number,
+  withKey: T.bool
 }, Oa.defaultProps = {
   className: "",
   onBlur: void 0,
   options: [],
   selected: "",
-  tabIndex: void 0
+  tabIndex: void 0,
+  withKey: !1
 }, Da.propTypes = {
   className: T.string,
   value: T.string,
@@ -11236,89 +11229,95 @@ var Ia = function (e) {
 };
 
 function Sa(e) {
-  for (var t = e.className, n = e.collapseRangeStart, r = e.collapseRangeEnd, a = e.controls, i = e.meetingID, o = e.style, s = e.tabIndexes, c = useContext(Rt).meetingsAdapter, l = Dn(i).state, u = zn(), m = zn(), p = En(u).width, d = En(m).width, f = l === V, h = Pe("meeting-control-bar", t), v = _slicedToArray(h, 2), g = v[0], y = v[1], C = a(f), w = s(f), D = C.length, M = useState(), T = _slicedToArray(M, 2), P = T[0], L = T[1], I = useState([0, 0]), S = _slicedToArray(I, 2), R = _slicedToArray(S[0], 2), j = R[0], z = R[1], A = S[1], B = useState(!1), H = _slicedToArray(B, 2), q = H[0], U = H[1], Z = [], F = [], W = [], Y = [], G = 0; G < 20; G += 1) {
-    var _ = zn(),
-        X = zn(),
-        J = En(_).width,
-        K = En(X).width,
-        Q = G < D;
-
-    Z[G] = Q && _, F[G] = Q && X, W[G] = Q && J + 10, Y[G] = Q && K + 10;
+  for (var t = e.className, n = e.collapseRangeStart, r = e.collapseRangeEnd, a = e.controls, i = e.meetingID, o = e.style, s = e.tabIndexes, c = useContext(Rt).meetingsAdapter, l = Dn(i).state, u = zn(), m = zn(), p = zn(), d = En(u).width, f = En(p).width, h = l === V, v = Pe("meeting-control-bar", t), g = _slicedToArray(v, 2), y = g[0], C = g[1], w = a(h), D = s(h), M = w.length, T = useState(), P = _slicedToArray(T, 2), L = P[0], I = P[1], S = useState([0, 0]), R = _slicedToArray(S, 2), j = _slicedToArray(R[0], 2), z = j[0], A = j[1], B = R[1], H = useState(void 0), q = _slicedToArray(H, 2), U = q[0], Z = q[1], F = [], W = [], Y = [], G = [], _ = 0; _ < 20; _ += 1) {
+    var X = zn(),
+        K = zn(),
+        J = En(X).width,
+        Q = En(K).width,
+        $ = _ < M;
+    F[_] = $ && X, W[_] = $ && K, Y[_] = $ && J + 10, G[_] = $ && Q + 10;
   }
 
+  var ee = function () {
+    return Z(void 0);
+  };
+
   useEffect(function () {
-    if (W.splice(D), Y.splice(D), p && d && W.every(Ia) && Y.every(Ia)) {
-      for (var e = Y.reduce(function (e, t) {
+    if (Y.splice(M), G.splice(M), d && f && Y.every(Ia) && G.every(Ia)) {
+      for (var e = G.reduce(function (e, t) {
         return e + t;
-      }, 0), t = Y.map(function () {
+      }, 0), t = G.map(function () {
         return !0;
-      }), a = D - 1; a >= 0 && e > p; a -= 1) e -= Y[a] - W[a], t[a] = !1;
+      }), a = M - 1; a >= 0 && e > d; a -= 1) e -= G[a] - Y[a], t[a] = !1;
 
-      if (L(t), e <= p) A([0, 0]), U(!1);else {
-        var i = (n + D) % D,
-            o = (r + D) % D;
-        e += d + 10;
+      if (I(t), e <= d) B([0, 0]), ee();else {
+        var i = (n + M) % M,
+            o = (r + M) % M;
+        e += f + 10;
 
-        for (var s = o, c = o - 1; c >= i && e > p; c -= 1) e -= W[c], s = c;
+        for (var s = o, c = o - 1; c >= i && e > d; c -= 1) e -= Y[c], s = c;
 
-        A([s, o]);
+        B([s, o]);
       }
     }
-  }, [p, d, n, r, D].concat(W, Y));
+  }, [d, f, n, r, M].concat(Y, G));
 
-  var $,
-      ee = function (e, t) {
+  var te,
+      ne = function (e, t) {
     return function (e, t) {
-      return Array(t - e).fill().map(function (t, n) {
+      return Array(Math.max(0, t - e)).fill().map(function (t, n) {
         return e + n;
       });
     }(e, t).map(function (e) {
       return x.createElement(La, {
-        key: C[e],
-        type: C[e],
+        key: w[e],
+        type: w[e],
         meetingID: i,
-        showText: P[e],
-        autoFocus: w[e] === Math.min.apply(Math, _toConsumableArray(w)) || !1,
-        tabIndex: w[e]
+        showText: L[e],
+        autoFocus: D[e] === Math.min.apply(Math, _toConsumableArray(D)) || !1,
+        tabIndex: D[e]
       });
     });
   },
-      te = function () {
-    return U(!q);
-  },
-      ne = function (e, t, n, r) {
+      re = function (e, t, n, r) {
     return x.createElement("div", {
       ref: n,
       key: "collapse-button",
-      className: y("collapse-button")
+      className: C("collapse-button")
     }, x.createElement(Ea, {
       onClick: t,
       type: "toggle",
       size: 48,
-      pressed: e,
+      pressed: !!e,
       tabIndex: r,
       tooltip: "More options",
       ariaLabel: e ? "Collapse additional controls" : "Expand additional controls"
     }, x.createElement(It, {
       name: e ? "more-adr" : "more"
     })));
-  },
-      re = function () {
-    return U(!1);
   };
 
   return useEffect(function () {
     var e;
-    return q && (setTimeout(function () {
-      return document.addEventListener("click", re);
-    }), e = function () {
-      return document.removeEventListener("click", re);
-    }), e;
-  }, [q]), x.createElement("div", {
+
+    if (U) {
+      var t = function () {
+        return ee();
+      };
+
+      setTimeout(function () {
+        return document.addEventListener("click", t);
+      }), e = function () {
+        return document.removeEventListener("click", t);
+      };
+    }
+
+    return e;
+  }, [U]), x.createElement("div", {
     ref: u,
-    className: g,
+    className: y,
     style: o
-  }, q && ($ = C.slice(j, z).map(function (e) {
+  }, U && (te = w.slice(z, A).map(function (e) {
     return {
       value: e,
       label: x.createElement(La, {
@@ -11329,36 +11328,45 @@ function Sa(e) {
       })
     };
   }), x.createElement(Oa, {
-    className: y("collapsed-controls"),
-    options: $,
+    className: C("collapsed-controls"),
+    options: te,
     onSelect: function (e) {
-      c.meetingControls[e.value].action(i), te();
+      c.meetingControls[e.value].action(i), ee(), m.current.focus();
     },
-    tabIndex: w[j]
-  })), P && x.createElement("div", {
-    className: y("controls")
-  }, ee(0, j), j < z && ne(q, te, void 0, w[j]), ee(z, D)), x.createElement("div", {
-    className: "".concat(y("controls"), " ").concat(y("controls--control-refs")),
+    onBlur: ee,
+    withKey: U.withKey,
+    tabIndex: D[z]
+  })), L && x.createElement("div", {
+    className: C("controls")
+  }, ne(0, z), z < A && re(U, function (e) {
+    return t = !e.detail, void Z(function (e) {
+      return e ? void 0 : {
+        withKey: t
+      };
+    });
+    var t;
+  }, m, D[z]), ne(A, M)), x.createElement("div", {
+    className: "".concat(C("controls"), " ").concat(C("controls--control-refs")),
     "aria-hidden": "true"
-  }, C.map(function (e, t) {
+  }, w.map(function (e, t) {
     return x.createElement(x.Fragment, {
       key: e
     }, x.createElement("div", {
-      ref: Z[t],
+      ref: F[t],
       key: "icon"
     }, x.createElement(La, {
       type: e,
       meetingID: i,
       showText: !1
     })), x.createElement("div", {
-      ref: F[t],
+      ref: W[t],
       key: "text"
     }, x.createElement(La, {
       type: e,
       meetingID: i,
       showText: !0
     })));
-  }), ne(q, function () {}, m)));
+  }), re(U, function () {}, p)));
 }
 
 Sa.propTypes = {
@@ -11741,7 +11749,9 @@ function Ya(e) {
       m = l[1],
       p = (i || []).findIndex(function (e) {
     return e.key === r;
-  });
+  }),
+      d = zn();
+  zt(d, !0);
   return x.createElement("div", {
     className: u,
     style: a
@@ -11758,7 +11768,8 @@ function Ya(e) {
       }
     },
     "aria-label": "Use arrow keys to navigate between setting options",
-    role: "tablist"
+    role: "tablist",
+    ref: d
   }, i.map(function (e, t) {
     return x.createElement("li", {
       className: De(m("tab"), r === e.key && m("tab--active")),
@@ -11856,7 +11867,7 @@ var Ga = Pe("no-media"),
   }
 };
 
-function Ja(e) {
+function Ka(e) {
   var t = e.className,
       n = e.style,
       r = e.media,
@@ -11877,7 +11888,7 @@ function Ja(e) {
   }, o.message));
 }
 
-function Ka(e) {
+function Ja(e) {
   var t,
       n = e.className,
       r = e.meetingID,
@@ -11903,7 +11914,7 @@ function Ka(e) {
     type: "switch-microphone",
     meetingID: r,
     tabIndex: 103
-  })) : x.createElement(Ja, {
+  })) : x.createElement(Ka, {
     media: "microphone",
     className: c("no-media")
   }));
@@ -11936,7 +11947,7 @@ function Qa(e) {
     meetingID: n
   }), x.createElement(oa, {
     type: "bottom"
-  }, "Preview"))) : x.createElement(Ja, {
+  }, "Preview"))) : x.createElement(Ka, {
     media: "camera",
     className: c("no-media")
   }));
@@ -11956,7 +11967,7 @@ function $a(e) {
     key: "audio",
     heading: "Audio",
     content: function () {
-      return x.createElement(Ka, {
+      return x.createElement(Ja, {
         meetingID: t
       });
     },
@@ -12249,18 +12260,18 @@ function ii(e, t) {
   return n.displayName = "WithAdapter(".concat((r = e).displayName || r.name || "Component", ")"), n;
 }
 
-Ja.propTypes = {
+Ka.propTypes = {
   className: T.string,
   style: T.shape(),
   media: T.oneOf(["camera", "microphone"]).isRequired
-}, Ja.defaultProps = {
+}, Ka.defaultProps = {
   className: void 0,
   style: void 0
-}, Ka.propTypes = {
+}, Ja.propTypes = {
   className: T.string,
   meetingID: T.string.isRequired,
   style: T.shape()
-}, Ka.defaultProps = {
+}, Ja.defaultProps = {
   className: "",
   style: void 0
 }, Qa.propTypes = {
@@ -12822,38 +12833,54 @@ class AudioControl extends MeetingControl {
     logger.debug('MEETING', meetingID, 'AudioControl::display()', ['called with', {
       meetingID
     }]);
-    const muted = {
+    const common = {
       ID: this.ID,
-      type: 'BUTTON',
-      icon: 'microphone-muted',
-      tooltip: 'Unmute audio',
-      state: i.ACTIVE,
-      text: 'Unmute'
-    };
-    const unmuted = {
-      ID: this.ID,
-      type: 'BUTTON',
-      icon: 'microphone',
-      tooltip: 'Mute audio',
-      state: i.INACTIVE,
-      text: 'Mute'
+      type: 'BUTTON'
     };
-    const disabled = {
-      ID: this.ID,
-      type: 'BUTTON',
-      icon: 'microphone-muted',
-      state: i.DISABLED,
-      text: 'No microphone'
+    const STATES = {
+      muted: {
+        icon: 'microphone-muted',
+        tooltip: 'Unmute audio',
+        state: i.ACTIVE,
+        text: 'Unmute'
+      },
+      unmuted: {
+        icon: 'microphone',
+        tooltip: 'Mute audio',
+        state: i.INACTIVE,
+        text: 'Mute'
+      },
+      muting: {
+        icon: 'microphone',
+        tooltip: 'Muting audio',
+        state: i.DISABLED,
+        text: 'Muting...'
+      },
+      unmuting: {
+        icon: 'microphone-muted',
+        tooltip: 'Unmuting audio',
+        state: i.DISABLED,
+        text: 'Unmuting...'
+      },
+      noMicrophone: {
+        icon: 'microphone-muted',
+        tooltip: 'No microphone available',
+        state: i.DISABLED,
+        text: 'No microphone'
+      }
     };
     return this.adapter.getMeeting(meetingID).pipe(map(_ref => {
       let {
         localAudio: {
-          stream
+          stream,
+          muting
         },
         disabledLocalAudio
       } = _ref;
-      return stream && unmuted || disabledLocalAudio && muted || disabled;
-    }), distinctUntilChanged(), tap(display => logger.debug('MEETING', meetingID, 'AudioControl::display()', ['emitting', display])));
+      return muting === true && STATES.muting || muting === false && STATES.unmuting || stream && STATES.unmuted || disabledLocalAudio && STATES.muted || STATES.noMicrophone;
+    }), distinctUntilChanged(), map(state => ({ ...common,
+      ...state
+    })), tap(display => logger.debug('MEETING', meetingID, 'AudioControl::display()', ['emitting', display])));
   }
 
 }
@@ -13394,38 +13421,54 @@ class VideoControl extends MeetingControl {
     logger.debug('MEETING', meetingID, 'VideoControl::display()', ['called with', {
       meetingID
     }]);
-    const muted = {
+    const common = {
       ID: this.ID,
-      type: 'BUTTON',
-      icon: 'camera-muted',
-      tooltip: 'Start video',
-      state: i.ACTIVE,
-      text: 'Start video'
+      type: 'BUTTON'
     };
-    const unmuted = {
-      ID: this.ID,
-      type: 'BUTTON',
-      icon: 'camera',
-      tooltip: 'Stop video',
-      state: i.INACTIVE,
-      text: 'Stop video'
-    };
-    const disabled = {
-      ID: this.ID,
-      type: 'BUTTON',
-      icon: 'camera-muted',
-      state: i.DISABLED,
-      text: 'No camera'
+    const STATES = {
+      muted: {
+        icon: 'camera-muted',
+        tooltip: 'Start video',
+        state: i.ACTIVE,
+        text: 'Start video'
+      },
+      unmuted: {
+        icon: 'camera',
+        tooltip: 'Stop video',
+        state: i.INACTIVE,
+        text: 'Stop video'
+      },
+      muting: {
+        icon: 'camera',
+        tooltip: 'Stopping video',
+        state: i.DISABLED,
+        text: 'Stopping...'
+      },
+      unmuting: {
+        icon: 'camera-muted',
+        tooltip: 'Starting video',
+        state: i.DISABLED,
+        text: 'Starting...'
+      },
+      noCamera: {
+        icon: 'camera-muted',
+        tooltip: 'No camera available',
+        state: i.DISABLED,
+        text: 'No camera'
+      }
     };
     return this.adapter.getMeeting(meetingID).pipe(map(_ref => {
       let {
         localVideo: {
-          stream
+          stream,
+          muting
         },
         disabledLocalVideo
       } = _ref;
-      return stream && unmuted || disabledLocalVideo && muted || disabled;
-    }), distinctUntilChanged(), tap(display => logger.debug('MEETING', meetingID, 'VideoControl::display()', ['emitting', display])));
+      return muting === true && STATES.muting || muting === false && STATES.unmuting || stream && STATES.unmuted || disabledLocalVideo && STATES.muted || STATES.noCamera;
+    }), distinctUntilChanged(), map(state => ({ ...common,
+      ...state
+    })), tap(display => logger.debug('MEETING', meetingID, 'VideoControl::display()', ['emitting', display])));
   }
 
 }
@@ -14055,13 +14098,12 @@ class MeetingsSDKAdapter extends d {
       });
       logger.info('MEETING', ID, 'JOIN', 'Joining meeting');
     } catch (error) {
-      if (error.stack.includes('Meeting requires a moderator pin or guest')) {
+      if (error.joinIntentRequired) {
         logger.info('MEETING', ID, 'joinMeeting()', 'Meeting requires authentication');
-        const opts = error.joinOptions || {};
         this.updateMeeting(ID, () => ({
           passwordRequired: true,
-          invalidPassword: !!opts.pin && !opts.moderator,
-          invalidHostKey: !!opts.pin && opts.moderator
+          invalidPassword: !!options.password,
+          invalidHostKey: !!options.hostKey
         }));
       } else {
         logger.error('MEETING', ID, 'joinMeeting()', 'Unable to join', error);
@@ -14091,6 +14133,35 @@ class MeetingsSDKAdapter extends d {
       logger.error('MEETING', ID, 'leaveMeeting()', 'Unable to leave', error);
     }
   }
+  /**
+   * Returns the status of the specified local media (audio or video) in the form of an object
+   * with the following mutually exclusive boolean properties:
+   * - `unmuted` - the media is unmuted
+   * - `muted` - the media is muted
+   * - `muting` - the media is currently being muted
+   * - `unmuting` - the media is currently being unmuted
+   * - `disabled` - the media is disabled (there is no available media device)
+   *
+   * @param {object} localMedia  The local media object from the meeting
+   * @param {MediaStream|null} disabledLocalMedia  The disabled media stream
+   * @returns {{muting: boolean}|{unmuting: boolean}|{unmuted: boolean}|{muted: boolean}|{disabled: boolean}} The local media state
+   */
+  // eslint-disable-next-line class-methods-use-this
+
+
+  getLocalMediaState(localMedia, disabledLocalMedia) {
+    return localMedia.muting === true && {
+      muting: true
+    } || localMedia.muting === false && {
+      unmuting: true
+    } || localMedia.stream && {
+      unmuted: true
+    } || disabledLocalMedia && {
+      muted: true
+    } || {
+      disabled: true
+    };
+  }
   /**
    * Attempts to mute the microphone of the given meeting ID.
    * If the microphone is successfully muted, an audio mute event is dispatched.
@@ -14104,15 +14175,42 @@ class MeetingsSDKAdapter extends d {
     logger.debug('MEETING', ID, 'handleLocalAudio()', ['called with', {
       ID
     }]);
+    let state; // local audio state
+    // sanity checks and "(un)muting in-progress" state
+
+    await this.updateMeeting(ID, meeting => {
+      let updates;
+      state = this.getLocalMediaState(meeting.localAudio, meeting.disabledLocalAudio);
+
+      if (state.disabled) {
+        throw new Error('Can\'t mute/unmute disabled audio');
+      } else if (state.muting) {
+        throw new Error('Already muting audio');
+      } else if (state.unmuting) {
+        throw new Error('Already unmuting audio');
+      } else if (state.unmuted) {
+        updates = {
+          localAudio: {
+            muting: true
+          }
+        };
+      } else if (state.muted) {
+        updates = {
+          localAudio: {
+            muting: false
+          }
+        };
+      }
+
+      return updates;
+    });
 
     try {
       await this.updateMeeting(ID, async (meeting, sdkMeeting) => {
         const isInSession = !!meeting.remoteAudio;
-        const audioDisabled = !!this.meetings[ID].disabledLocalAudio;
-        const audioEnabled = !!meeting.localAudio.stream;
         let updates;
 
-        if (audioEnabled) {
+        if (state.unmuted) {
           // Mute the audio only if there is an active meeting
           if (isInSession) {
             logger.debug('MEETING', ID, 'handleLocalAudio()', 'calling sdkMeeting.muteAudio()');
@@ -14124,10 +14222,11 @@ class MeetingsSDKAdapter extends d {
           updates = {
             disabledLocalAudio: meeting.localAudio.stream,
             localAudio: {
-              stream: null
+              stream: null,
+              muting: undefined
             }
           };
-        } else if (audioDisabled) {
+        } else if (state.muted) {
           // Unmute the audio only if there is an active meeting
           if (isInSession) {
             logger.debug('MEETING', ID, 'handleLocalAudio()', 'calling sdkMeeting.unmuteAudio()');
@@ -14139,7 +14238,8 @@ class MeetingsSDKAdapter extends d {
           updates = {
             disabledLocalAudio: null,
             localAudio: {
-              stream: meeting.disabledLocalAudio
+              stream: meeting.disabledLocalAudio,
+              muting: undefined
             }
           };
         }
@@ -14151,6 +14251,11 @@ class MeetingsSDKAdapter extends d {
       });
     } catch (error) {
       logger.error('MEETING', ID, 'handleLocalAudio()', 'Unable to update local audio settings', error);
+      this.updateMeeting(ID, () => ({
+        localAudio: {
+          muting: undefined
+        }
+      }));
     }
   }
   /**
@@ -14166,15 +14271,42 @@ class MeetingsSDKAdapter extends d {
     logger.debug('MEETING', ID, 'handleLocalVideo()', ['called with', {
       ID
     }]);
+    let state; // local video state
+    // sanity checks and "(un)muting in-progress" state
+
+    await this.updateMeeting(ID, meeting => {
+      let updates;
+      state = this.getLocalMediaState(meeting.localVideo, meeting.disabledLocalVideo);
+
+      if (state.disabled) {
+        throw new Error('Can\'t mute/unmute disabled video');
+      } else if (state.muting) {
+        throw new Error('Already muting video');
+      } else if (state.unmuting) {
+        throw new Error('Already unmuting video');
+      } else if (state.unmuted) {
+        updates = {
+          localVideo: {
+            muting: true
+          }
+        };
+      } else if (state.muted) {
+        updates = {
+          localVideo: {
+            muting: false
+          }
+        };
+      }
+
+      return updates;
+    });
 
     try {
       await this.updateMeeting(ID, async (meeting, sdkMeeting) => {
         const isInSession = !!meeting.remoteVideo;
-        const videoEnabled = !!meeting.localVideo.stream;
-        const videoDisabled = !!meeting.disabledLocalVideo;
         let updates;
 
-        if (videoEnabled) {
+        if (state.unmuted) {
           // Mute the video only if there is an active meeting
           if (isInSession) {
             logger.debug('MEETING', ID, 'handleLocalVideo()', 'calling sdkMeeting.muteVideo()');
@@ -14184,12 +14316,13 @@ class MeetingsSDKAdapter extends d {
 
 
           updates = {
+            disabledLocalVideo: meeting.localVideo.stream,
             localVideo: {
-              stream: null
-            },
-            disabledLocalVideo: meeting.localVideo.stream
+              stream: null,
+              muting: undefined
+            }
           };
-        } else if (videoDisabled) {
+        } else if (state.muted) {
           // Unmute the video only if there is an active meeting
           if (isInSession) {
             logger.debug('MEETING', ID, 'handleLocalVideo()', 'calling sdkMeeting.unmuteVideo()');
@@ -14199,10 +14332,11 @@ class MeetingsSDKAdapter extends d {
 
 
           updates = {
+            disabledLocalVideo: null,
             localVideo: {
-              stream: meeting.disabledLocalVideo
-            },
-            disabledLocalVideo: null
+              stream: meeting.disabledLocalVideo,
+              muting: undefined
+            }
           };
         }
 
@@ -14213,6 +14347,11 @@ class MeetingsSDKAdapter extends d {
       });
     } catch (error) {
       logger.error('MEETING', ID, 'handleLocalVideo()', 'Unable to update local video settings', error);
+      this.updateMeeting(ID, () => ({
+        localVideo: {
+          muting: undefined
+        }
+      }));
     }
   }
   /**
@@ -14420,7 +14559,7 @@ class MeetingsSDKAdapter extends d {
         updates = {
           settings: {
             preview: {
-              stream
+              video: stream
             }
           },
           cameraID: deviceId
@@ -14604,15 +14743,14 @@ class MeetingsSDKAdapter extends d {
     if (!(ID in this.getMeetingObservables)) {
       const sdkMeeting = this.fetchMeeting(ID);
       const getMeeting$ = Observable.create(observer => {
-        if (this.meetings[ID]) {
+        if (sdkMeeting && this.meetings[ID]) {
           logger.debug('MEETING', ID, 'getMeeting()', ['initial meeting object', this.meetings[ID]]);
           observer.next(this.meetings[ID]);
+          observer.complete();
         } else {
           logger.error('MEETING', ID, 'getMeeting()', `Could not find meeting with ID "${ID}"`);
           observer.error(new Error(`Could not find meeting with ID "${ID}"`));
         }
-
-        observer.complete();
       });
       const meetingUpdateEvent$ = fromEvent(sdkMeeting, EVENT_MEETING_UPDATED).pipe(tap(() => logger.debug('MEETING', ID, 'getMeeting()', ['received', EVENT_MEETING_UPDATED, 'event'])), tap(meeting => {
         this.meetings[ID] = meeting;
@@ -15109,7 +15247,7 @@ var defineProperty = defineProperty$1;
 })(constants);
 
 var name = "@webex/sdk-component-adapter";
-var version = "1.91.1";
+var version = "1.93.0";
 const LOG_ARGS$1 = ['SDK-MEMBERSHIPS', `${name}-${version}`]; // max parameter value must be greater than 0 and less than or equal to 1000
 
 const MAX_MEMBERSHIPS = 1000; // TODO: Figure out how to import JS Doc definitions and remove duplication.
@@ -15170,7 +15308,7 @@ function sortRoomMembers(memberships, myID) {
   /* eslint-enable no-nested-ternary, indent */
 }
 /**
- * Gets the active members in a meeting
+ * Maps SDK members to adapter members
  *
  * @private
  * @param {object} sdkMembers Members object from sdk meeting, keyed by ID
@@ -15183,7 +15321,6 @@ function getMembers(sdkMembers) {
     sdkMembers
   }]);
   let members = Object.values(sdkMembers || {});
-  members = members.filter(member => member.isUser);
   members = sortMeetingMembers(members);
   return members.map(member => ({
     ID: member.participant && member.participant.person && constructHydraId(constants.hydraTypes.PEOPLE, member.participant.person.id),
@@ -16052,30 +16189,31 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /**
- * Webex meeting widget displays the default Webex meeting experience.
+ * Webex meeting widget presents a Webex meeting experience.
  *
  * @param {string} props.meetingDestination  ID of the virtual meeting location
- * @param {string} props.accessToken        access token to create the webex instance with
- * @param {string} [props.className]        Custom CSS class to apply
- * @param {Function} [props.controls]         Controls to display
+ * @param {string} props.accessToken         Access token of the joining user
+ * @param {string} [props.layout]            Layout for remote video (e.g. grid, focus, stack, etc)
+ * @param {Function} [props.controls]        Meeting controls to display
  * @param {number} [props.controlsCollapseRangeStart]  Zero-based index of the first collapsible control (can be negative)
- * @param {number} [props.controlsCollapseRangeEnd]  Zero-based index before the last collapsible control (can be negative)
+ * @param {number} [props.controlsCollapseRangeEnd]    Zero-based index before the last collapsible control (can be negative)
  * @param {string} [props.style]            Custom style to apply
+ * @param {string} [props.className]        Custom CSS class to apply
  * @returns {Object} JSX of the component
  */
 
-var WebexMeetingWidget = /*#__PURE__*/function (_Component) {
-  _inherits(WebexMeetingWidget, _Component);
+var WebexMeetingsWidget = /*#__PURE__*/function (_Component) {
+  _inherits(WebexMeetingsWidget, _Component);
 
-  var _super = _createSuper(WebexMeetingWidget);
+  var _super = _createSuper(WebexMeetingsWidget);
 
-  function WebexMeetingWidget(props) {
-    _classCallCheck(this, WebexMeetingWidget);
+  function WebexMeetingsWidget(props) {
+    _classCallCheck(this, WebexMeetingsWidget);
 
     return _super.call(this, props);
   }
 
-  _createClass(WebexMeetingWidget, [{
+  _createClass(WebexMeetingsWidget, [{
     key: "render",
     value: function render() {
       var _meeting$localAudio, _meeting$localVideo;
@@ -16084,72 +16222,76 @@ var WebexMeetingWidget = /*#__PURE__*/function (_Component) {
       var audioPermission = (_meeting$localAudio = meeting.localAudio) === null || _meeting$localAudio === void 0 ? void 0 : _meeting$localAudio.permission;
       var videoPermission = (_meeting$localVideo = meeting.localVideo) === null || _meeting$localVideo === void 0 ? void 0 : _meeting$localVideo.permission;
       var logo = /*#__PURE__*/x.createElement(WebexLogo, null);
+      var contentClass = 'webex-meetings-widget__content';
       var content;
 
       if (audioPermission === 'ASKING') {
         content = /*#__PURE__*/x.createElement(Ta, {
-          className: "webex-meeting-widget__content",
           meetingID: meeting.ID,
           media: "microphone",
-          logo: logo
+          logo: logo,
+          className: contentClass
         });
       } else if (videoPermission === 'ASKING') {
         content = /*#__PURE__*/x.createElement(Ta, {
-          className: "webex-meeting-widget__content",
           meetingID: meeting.ID,
           media: "camera",
-          logo: logo
+          logo: logo,
+          className: contentClass
         });
       } else {
         content = /*#__PURE__*/x.createElement(ti, {
-          className: "webex-meeting-widget__content",
           meetingID: meeting.ID,
           logo: logo,
+          layout: this.props.layout,
           controls: this.props.controls,
           controlsCollapseRangeStart: this.props.controlsCollapseRangeStart,
-          controlsCollapseRangeEnd: this.props.controlsCollapseRangeEnd
+          controlsCollapseRangeEnd: this.props.controlsCollapseRangeEnd,
+          className: contentClass
         });
       }
 
       return /*#__PURE__*/x.createElement("div", {
-        className: "webex-meeting-widget ".concat(this.props.className),
+        className: "webex-meetings-widget ".concat(this.props.className),
         style: this.props.style
       }, content);
     }
   }]);
 
-  return WebexMeetingWidget;
+  return WebexMeetingsWidget;
 }(Component);
 
-WebexMeetingWidget.propTypes = {
+WebexMeetingsWidget.propTypes = {
   accessToken: T.string.isRequired,
   className: T.string,
   controls: T.func,
   controlsCollapseRangeStart: T.number,
   controlsCollapseRangeEnd: T.number,
   meetingDestination: T.string.isRequired,
-  style: T.shape()
+  style: T.shape(),
+  layout: T.string
 };
-WebexMeetingWidget.defaultProps = {
+WebexMeetingsWidget.defaultProps = {
   className: '',
   controls: undefined,
   controlsCollapseRangeStart: undefined,
   controlsCollapseRangeEnd: undefined,
+  layout: 'Grid',
   style: {}
 };
-var appName = process.env.NODE_ENV === 'production' ? 'webex-widgets-meeting' : 'webex-widgets-meeting-dev';
-var WebexMeeting = ii(ni(WebexMeetingWidget), function (props) {
+var appName = process.env.NODE_ENV === 'production' ? 'webex-widgets-meetings' : 'webex-widgets-meetings-dev';
+var WebexMeetings = ii(ni(WebexMeetingsWidget), function (props) {
   var webex = new Webex({
     credentials: {
       access_token: props.accessToken
     },
     config: {
       appName: appName,
-      appVersion: "1.20.6"
+      appVersion: __appVersion__
     }
   });
   return new WebexSDKAdapter(webex);
 });
 
-export { WebexMeeting as WebexMeetingWidget };
+export { WebexMeetings as WebexMeetingsWidget };
 //# sourceMappingURL=webexWidgets.esm.js.map