brew-js-react 0.2.0 → 0.2.3

package/dist/brew-js-react.js

@@ -225,6 +225,7 @@ var external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_ = __we
 
 var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.util,
     noop = _lib$util.noop,
+    pipe = _lib$util.pipe,
     either = _lib$util.either,
     is = _lib$util.is,
     isUndefinedOrNull = _lib$util.isUndefinedOrNull,
@@ -260,7 +261,7 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
     setImmediateOnce = _lib$util.setImmediateOnce,
     throwNotFunction = _lib$util.throwNotFunction,
     errorWithCode = _lib$util.errorWithCode,
-    keys = _lib$util.keys,
+    util_keys = _lib$util.keys,
     values = _lib$util.values,
     util_hasOwnProperty = _lib$util.hasOwnProperty,
     getOwnPropertyDescriptors = _lib$util.getOwnPropertyDescriptors,
@@ -275,6 +276,7 @@ var _lib$util = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_
     watchOnce = _lib$util.watchOnce,
     watchable = _lib$util.watchable,
     inherit = _lib$util.inherit,
+    freeze = _lib$util.freeze,
     deepFreeze = _lib$util.deepFreeze,
     iequal = _lib$util.iequal,
     randomId = _lib$util.randomId,
@@ -362,6 +364,17 @@ var _lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_z
 
 
 /* harmony default export */ const zeta_dom_dom = (dom);
+;// CONCATENATED MODULE: ./tmp/zeta-dom/domLock.js
+
+var domLock_lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.dom,
+    lock = domLock_lib$dom.lock,
+    locked = domLock_lib$dom.locked,
+    cancelLock = domLock_lib$dom.cancelLock,
+    notifyAsync = domLock_lib$dom.notifyAsync,
+    preventLeave = domLock_lib$dom.preventLeave;
+
+;// CONCATENATED MODULE: ./src/include/zeta-dom/domLock.js
+
 ;// CONCATENATED MODULE: ./tmp/brew-js/domAction.js
 
 var addAsyncAction = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.addAsyncAction,
@@ -377,6 +390,7 @@ var addAsyncAction = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_roo
 
 
 
+
 /**
  * @param {Partial<import("./dialog").DialogOptions<any>>} props
  */
@@ -386,7 +400,7 @@ function createDialog(props) {
   var closing = false;
   var promise;
 
-  function closeDialog(value) {
+  function _closeDialog(value) {
     if (!closing) {
       closing = true;
       closeFlyout(root, value).then(function () {
@@ -403,7 +417,7 @@ function createDialog(props) {
 
   return {
     root: root,
-    close: closeDialog,
+    close: _closeDialog,
     open: function open() {
       if (promise) {
         return promise;
@@ -419,16 +433,20 @@ function createDialog(props) {
       }
 
       if (props.onRender) {
-        external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_.render( /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(props.onRender, extend({
-          closeDialog: closeDialog
-        }, props)), root);
+        var dialogProps = extend({}, props, {
+          closeDialog: function closeDialog(value) {
+            var promise = resolve((props.onCommit || pipe)(value));
+            catchAsync(lock(zeta_dom_dom.activeElement, promise));
+            promise.then(_closeDialog);
+          }
+        });
+        external_commonjs_react_dom_commonjs2_react_dom_amd_react_dom_root_ReactDOM_.render( /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(props.onRender, dialogProps), root);
       }
 
       promise = openFlyout(root);
       always(promise, function () {
         promise = null;
       });
-      promise.then(props.onCommit);
       (props.onOpen || noop)(root);
       return promise;
     }
@@ -462,6 +480,12 @@ function Dialog(props) {
 }
 // EXTERNAL MODULE: external "zeta-dom-react"
 var external_zeta_dom_react_ = __webpack_require__(103);
+;// CONCATENATED MODULE: ./tmp/zeta-dom/events.js
+
+var ZetaEventContainer = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.EventContainer;
+
+;// CONCATENATED MODULE: ./src/include/zeta-dom/events.js
+
 ;// CONCATENATED MODULE: ./tmp/brew-js/defaults.js
 
 var defaults_defaultExport = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_brew_.defaults;
@@ -497,6 +521,8 @@ var animateIn = external_commonjs_brew_js_commonjs2_brew_js_amd_brew_js_root_bre
 
 
 
+
+var view_root = zeta_dom_dom.root;
 var routeMap = new Map();
 var usedParams = {};
 var StateContext = /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createContext(Object.freeze({
@@ -519,6 +545,7 @@ function ViewContainer() {
 
   self.componentWillUnmount = app_app.on('navigate', function () {
     if (self.mounted && self.getViewComponent()) {
+      self.isForceUpdate = true;
       self.forceUpdate();
     }
   });
@@ -529,24 +556,31 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
     this.mounted = true;
   },
   componentDidCatch: function componentDidCatch(error) {
-    zeta_dom_dom.emit('error', this.parentElement || zeta_dom_dom.root, {
+    zeta_dom_dom.emit('error', this.parentElement || view_root, {
       error: error
     }, true);
   },
   render: function render() {
     /** @type {any} */
     var self = this;
+    var resolve;
+    var promise = new Promise(function (_resolve) {
+      resolve = _resolve;
+    });
     var V = self.getViewComponent();
 
     if (V && V !== self.currentViewComponent) {
       self.currentViewComponent = V;
 
       if (self.currentView && self.currentElement) {
+        var prevPath = self.currentPath;
+        var prevElement = self.currentElement;
         self.prevView = self.currentView;
-        self.prevElement = self.currentElement;
         self.currentElement = undefined;
-        animateOut(self.prevElement, 'show').then(function () {
-          self.prevElement = undefined;
+        app_app.emit('pageleave', prevElement, {
+          pathname: prevPath
+        }, true);
+        animateOut(prevElement, 'show').then(function () {
           self.prevView = undefined;
           self.forceUpdate();
         });
@@ -562,23 +596,87 @@ definePrototype(ViewContainer, external_commonjs_react_commonjs2_react_amd_react
           self.currentElement = element;
           self.parentElement = element.parentElement;
           util_setImmediate(function () {
-            return animateIn(element, 'show');
+            resolve();
+            animateIn(element, 'show');
+            app_app.emit('pageenter', element, {
+              pathname: app_app.path
+            }, true);
           });
         }
       })));
       defineGetterProperty(providerProps.value, 'active', function () {
         return self.currentView === view;
       });
+      self.currentPath = app_app.path;
       self.currentView = view;
+    } else {
+      if (self.isForceUpdate) {
+        self.isForceUpdate = false;
+        app_app.emit('pageenter', self.currentElement, {
+          pathname: app_app.path
+        }, true);
+      }
+
+      resolve();
     }
 
+    notifyAsync(self.parentElement || view_root, promise);
     return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(external_commonjs_react_commonjs2_react_amd_react_root_React_.Fragment, null, self.prevView, self.currentView);
   },
   getViewComponent: function getViewComponent() {
     var props = this.props;
-    return any(props.views, isViewMatched) || history.state === stateId && void redirectTo(props.defaultView);
+    var matched = any(props.views, isViewMatched) || props.defaultView;
+
+    if (history.state === stateId) {
+      // ensure the current path actually corresponds to the matched view
+      // when some views are not included in the list of allowed views
+      var targetPath = linkTo(matched, getCurrentParams(matched, true));
+
+      if (targetPath !== app_app.path) {
+        app_app.navigate(targetPath, true);
+        return;
+      }
+    }
+
+    return matched;
   }
 });
+
+function getCurrentParams(view, includeAll) {
+  var state = routeMap.get(view);
+
+  if (!state.maxParams) {
+    var matched = map(app_app.routes, function (v) {
+      var route = app_app.parseRoute(v);
+      var matched = route.length && !any(state.matchers, function (v, i) {
+        var pos = route.params[i];
+        return (v ? !(pos >= 0) : pos < route.minLength) || !isFunction(v) && !route.match(i, v);
+      });
+      return matched ? route : null;
+    });
+
+    if (matched[1]) {
+      matched = grep(matched, function (v) {
+        return !any(v.params, function (v, i) {
+          return usedParams[i] && !state.matchers[i];
+        });
+      });
+    }
+
+    if (matched[0]) {
+      var last = matched.slice(-1)[0];
+      state.maxParams = util_keys(extend.apply(0, [{}].concat(matched.map(function (v) {
+        return v.params;
+      }))));
+      state.minParams = map(last.params, function (v, i) {
+        return state.params[i] || v >= last.minLength ? null : i;
+      });
+    }
+  }
+
+  return pick(app_app.route, includeAll ? state.maxParams : state.minParams);
+}
+
 function useViewContainerState() {
   return external_commonjs_react_commonjs2_react_amd_react_root_React_.useContext(StateContext);
 }
@@ -591,14 +689,16 @@ function isViewMatched(view) {
 }
 function registerView(factory, routeParams) {
   var Component = function Component(props) {
-    var Component = (0,external_zeta_dom_react_.useAsync)(factory)[0];
+    var state = (0,external_zeta_dom_react_.useAsync)(factory);
+    var ref = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useRef)();
+
+    if (state[0] || state[1].error) {
+      (props.onComponentLoaded || noop)(ref.current);
+    }
+
     return /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement('div', extend({}, props.rootProps, {
-      ref: function ref(element) {
-        if (element && Component) {
-          (props.onComponentLoaded || noop)(element);
-        }
-      },
-      children: Component && /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(Component["default"])
+      ref: ref,
+      children: state[0] && /*#__PURE__*/external_commonjs_react_commonjs2_react_amd_react_root_React_.createElement(state[0]["default"])
     }));
   };
 
@@ -612,7 +712,7 @@ function registerView(factory, routeParams) {
   });
   routeMap.set(Component, {
     id: randomId(),
-    matchCount: keys(routeParams).length,
+    matchCount: util_keys(routeParams).length,
     matchers: routeParams,
     params: pick(routeParams, function (v) {
       return typeof v === 'string';
@@ -634,19 +734,13 @@ function renderView() {
   });
 }
 function linkTo(view, params) {
-  var viewParams = (routeMap.get(view) || {}).params;
-  var newParams = {};
-
-  for (var i in app_app.route) {
-    if (viewParams && i in viewParams) {
-      newParams[i] = viewParams[i];
-    } else if (params && i in params) {
-      newParams[i] = params[i];
-    } else if (!usedParams[i]) {
-      newParams[i] = app_app.route[i];
-    }
+  var state = routeMap.get(view);
+
+  if (!state) {
+    return '/';
   }
 
+  var newParams = extend(getCurrentParams(view), params, state.params);
   return app_app.route.getPath(newParams);
 }
 function navigateTo(view, params) {
@@ -661,12 +755,32 @@ function redirectTo(view, params) {
 
 
 
+
+var emitter = new ZetaEventContainer();
 var states = {};
 
 function getCurrentStates() {
   return states[history.state] || (states[history.state] = {});
 }
 
+function ViewState(value) {
+  this.value = value;
+}
+
+definePrototype(ViewState, {
+  get: function get() {
+    return this.value;
+  },
+  set: function set(value) {
+    this.value = value;
+  },
+  onPopState: function onPopState(callback) {
+    throwNotFunction(callback);
+    return emitter.add(this, 'popstate', function (e) {
+      callback.call(this, e.newValue);
+    });
+  }
+});
 function useAppReady() {
   var sReady = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(false);
   var ready = sReady[0],
@@ -681,32 +795,37 @@ function useAppReady() {
 function useRouteParam(name, defaultValue) {
   var container = useViewContainerState();
   var route = app_app.route;
-  var sValue = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(route[name]);
-  var value = sValue[0],
-      setValue = sValue[1];
+  var value = route[name] || '';
+  var ref = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useRef)(value);
+  var forceUpdate = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)()[1];
   (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
-    var current = route[name]; // route parameter might be changed after state initialization and before useEffect hook is called
+    var setValue = function setValue() {
+      var current = route[name] || '';
+
+      if (container.active && current !== ref.current) {
+        ref.current = current;
+        forceUpdate({});
+      }
+    }; // route parameter might be changed after state initialization and before useEffect hook is called
 
-    setValue(current);
+
+    setValue();
 
     if (name in route) {
-      return route.watch(name, function (value) {
-        util_setImmediate(function () {
-          if (container.active) {
-            setValue(value);
-          }
-        });
+      return route.watch(name, function () {
+        setImmediateOnce(setValue);
       });
     }
 
     console.error('Route parameter ' + name + ' does not exist');
   }, [name, defaultValue]);
+  ref.current = value;
 
   if (!value && defaultValue !== undefined) {
     app_app.navigate(route.getPath(extend({}, route, kv(name, defaultValue))), true);
   }
 
-  return value || '';
+  return value;
 }
 function useRouteState(key, defaultValue) {
   var container = useViewContainerState();
@@ -726,17 +845,23 @@ function ViewStateContainer(props) {
     return {
       getState: function getState(uniqueId, key) {
         var cur = getCurrentStates();
-        var state = cache[uniqueId] || (cache[uniqueId] = {
-          value: cur[key] && cur[key].value,
-          get: function get() {
-            return state.value;
-          },
-          set: function set(value) {
-            state.value = value;
-          }
-        });
+        var state = cache[uniqueId] || (cache[uniqueId] = new ViewState(cur[key] && cur[key].value));
 
         if (container.active) {
+          var stateId = state.stateId;
+
+          if (stateId && stateId !== history.state) {
+            var newValue = cur[key] && cur[key].value;
+            emitter.emit('popstate', state, {
+              newValue: newValue
+            }); // detach value in previous history state from current one
+
+            var previous = new ViewState(state.value);
+            states[stateId][key] = previous;
+            state.value = newValue;
+          }
+
+          state.stateId = history.state;
           cur[key] = state;
         }
 
@@ -770,7 +895,8 @@ if (toPrimitive) {
 
 function createCallback(translate) {
   var callback = function callback(key, data) {
-    return translate(key, data, true);
+    var result = translate(key, data, true);
+    return result !== undefined ? result : key;
   };
 
   return extend(callback, {
@@ -792,31 +918,38 @@ function makeTranslation(resources, defaultLang) {
   var re = new RegExp('^(' + Object.keys(resources[defaultLang]).join('|') + ')\\.');
   var cache = {};
 
-  function getTranslation(prefix, name, data, noEncode) {
-    var str = ((resources[app_app.language] || empty)[prefix] || empty)[name] || ((resources[defaultLang] || empty)[prefix] || empty)[name] || '';
+  function getTranslation(prefix, name, data, noEncode, lang) {
+    var str = ((resources[lang] || empty)[prefix] || empty)[name];
 
-    if (str && (!noEncode || data !== undefined)) {
-      return waterpipe(str, data, {
-        noEncode: noEncode
-      });
+    if (typeof str === 'string') {
+      if (str && (!noEncode || data !== undefined)) {
+        return waterpipe(str, data, {
+          noEncode: noEncode
+        });
+      }
+
+      return str;
     }
 
-    return str;
+    if (lang !== defaultLang) {
+      return getTranslation(prefix, name, data, noEncode, defaultLang);
+    }
   }
 
   function translate(key, data, noEncode) {
     var prefix = re.test(key) ? RegExp.$1 : '';
     var name = prefix ? key.slice(RegExp.lastMatch.length) : key;
-    return getTranslation(prefix, name, data, noEncode) || key;
+    return getTranslation(prefix, name, data, noEncode, app_app.language);
   }
 
   function getTranslationCallback() {
     var prefix = makeArray(arguments);
     var key = prefix.join(' ');
     return cache[key] || (cache[key] = createCallback(function (key, data, noEncode) {
+      var lang = app_app.language;
       return single(prefix, function (v) {
-        return getTranslation(v, key, data, noEncode);
-      }) || key;
+        return getTranslation(v, key, data, noEncode, lang);
+      });
     }));
   }
 
@@ -833,7 +966,10 @@ function makeTranslation(resources, defaultLang) {
   return {
     translate: cache[''],
     getTranslation: getTranslationCallback,
-    useTranslation: useTranslation
+    useTranslation: useTranslation,
+    keys: function keys(prefix) {
+      return util_keys(resources[defaultLang][prefix] || empty);
+    }
   };
 }
 ;// CONCATENATED MODULE: ./src/mixins/StaticAttributeMixin.js
@@ -863,7 +999,8 @@ definePrototype(Mixin, {
   },
   getCustomAttributes: function getCustomAttributes() {
     return {};
-  }
+  },
+  dispose: function dispose() {}
 });
 watchable(Mixin.prototype);
 util_define(Mixin, {
@@ -982,15 +1119,23 @@ definePrototype(StatefulMixin, Mixin, {
   },
   initElement: function initElement(element, state) {},
   clone: function clone() {
-    var clone = inherit(Object.getPrototypeOf(this));
+    var self = this;
+    var clone = inherit(Object.getPrototypeOf(self), self);
 
     _(clone, {
-      states: _(this).states,
+      states: _(self).states,
       prefix: randomId() + '.',
       counter: 0
     });
 
     return clone;
+  },
+  dispose: function dispose() {
+    var states = _(this).states;
+
+    each(states, function (i, v) {
+      delete states[i];
+    });
   }
 });
 ;// CONCATENATED MODULE: ./src/mixins/ClassNameMixin.js
@@ -1050,11 +1195,6 @@ definePrototype(ClassNameMixin, StatefulMixin, {
       }
     });
   },
-  clone: function clone() {
-    return extend(ClassNameMixinSuper.clone.call(this), {
-      classNames: this.classNames
-    });
-  },
   onClassNameUpdated: function onClassNameUpdated(element, prevState, state) {}
 });
 ;// CONCATENATED MODULE: ./src/mixins/AnimateMixin.js
@@ -1130,19 +1270,13 @@ definePrototype(AnimateSequenceMixin, AnimateMixin, {
     });
   }
 });
-;// CONCATENATED MODULE: ./tmp/zeta-dom/events.js
-
-var ZetaEventContainer = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.EventContainer;
-
-;// CONCATENATED MODULE: ./src/include/zeta-dom/events.js
-
 ;// CONCATENATED MODULE: ./src/mixins/ErrorHandlerMixin.js
 
 
 
 
 var ErrorHandlerMixinSuper = StatefulMixin.prototype;
-var emitter = new ZetaEventContainer();
+var ErrorHandlerMixin_emitter = new ZetaEventContainer();
 
 function isErrorMatched(filter, error) {
   if (isFunction(filter)) {
@@ -1162,7 +1296,7 @@ definePrototype(ErrorHandlerMixin, StatefulMixin, {
       filter = null;
     }
 
-    return emitter.add(this, filter ? 'error' : 'default', function (e) {
+    return ErrorHandlerMixin_emitter.add(this, filter ? 'error' : 'default', function (e) {
       if (!filter || isErrorMatched(filter, e.error)) {
         return callback(e.error);
       }
@@ -1175,10 +1309,22 @@ definePrototype(ErrorHandlerMixin, StatefulMixin, {
       var data = {
         error: e.error
       };
-      return emitter.emit('error', self, data) || emitter.emit('default', self, data);
+      return ErrorHandlerMixin_emitter.emit('error', self, data) || ErrorHandlerMixin_emitter.emit('default', self, data);
     });
   }
 });
+;// CONCATENATED MODULE: ./tmp/brew-js/var.js
+
+var getVarScope = undefined.getVarScope,
+    setVar = undefined.setVar,
+    declareVar = undefined.declareVar,
+    resetVar = undefined.resetVar,
+    getVar = undefined.getVar,
+    evaluate = undefined.evaluate,
+    evalAttr = undefined.evalAttr;
+
+;// CONCATENATED MODULE: ./src/include/brew-js/var.js
+
 ;// CONCATENATED MODULE: ./src/mixins/FlyoutToggleMixin.js
 
 
@@ -1188,16 +1334,17 @@ function FlyoutToggleMixin(mixin) {
   this.flyoutMixin = mixin;
 }
 definePrototype(FlyoutToggleMixin, ClassNameMixin, {
+  open: function open(value) {
+    return this.flyoutMixin.open(value);
+  },
+  close: function close(value) {
+    return this.flyoutMixin.close(value);
+  },
   getCustomAttributes: function getCustomAttributes() {
     var element = this.flyoutMixin.elements()[0];
     return extend({}, FlyoutToggleMixinSuper.getCustomAttributes.call(this), {
       'toggle': element && '#' + element.id
     });
-  },
-  clone: function clone() {
-    return extend(FlyoutToggleMixinSuper.clone.call(this), {
-      flyoutMixin: this.flyoutMixin
-    });
   }
 });
 ;// CONCATENATED MODULE: ./src/mixins/FlyoutMixin.js
@@ -1205,12 +1352,16 @@ definePrototype(FlyoutToggleMixin, ClassNameMixin, {
 
 
 
+
+
 var FlyoutMixinSuper = ClassNameMixin.prototype;
+var varname = '__flyout' + randomId();
 var flyoutMixinCounter = 0;
 function FlyoutMixin() {
   var self = this;
-  ClassNameMixin.call(self, ['open', 'closing', 'tweening-in', 'tweening-out']);
+  ClassNameMixin.call(self, ['open', 'closing', 'visible', 'tweening-in', 'tweening-out']);
   self.modal = false;
+  self.tabThrough = false;
   self.isFlyoutOpened = false;
   self.animating = false;
   self.visible = false;
@@ -1236,16 +1387,25 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
       'swipe-dismiss': self.swipeToDismiss
     }, self.modal && {
       'is-modal': ''
+    }, self.tabThrough && {
+      'tab-through': ''
     }, self.effects && {
       'animate-on': 'open',
       'animate-in': self.effects.join(' '),
       'animate-out': ''
     });
   },
+  open: function open(value) {
+    return openFlyout(this.elements()[0], kv(varname, value));
+  },
+  close: function close(value) {
+    return closeFlyout(this.elements()[0], value);
+  },
   onOpen: function onOpen(callback) {
+    var element = this.elements()[0];
     return this.onToggleState(function (opened) {
       if (opened) {
-        return callback();
+        return callback(getVar(element, varname));
       }
     });
   },
@@ -1261,6 +1421,7 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
 
     if (!element.id) {
       element.id = 'flyout-' + ++flyoutMixinCounter;
+      declareVar(element, varname, undefined);
     }
 
     app_app.on(element, {
@@ -1305,9 +1466,9 @@ definePrototype(FocusStateMixin, StatefulMixin, {
   initElement: function initElement(element, state) {
     FocusStateMixinSuper.initElement.call(this, element, state);
     zeta_dom_dom.on(element, {
-      focusin: function focusin() {
+      focusin: function focusin(e) {
         state.focused = true;
-        setClass(element, 'focused', true);
+        setClass(element, 'focused', e.source);
       },
       focusout: function focusout() {
         state.focused = false;
@@ -1455,9 +1616,13 @@ var useFocusStateMixin = createUseFunction(FocusStateMixin);
 var useLoadingStateMixin = createUseFunction(LoadingStateMixin);
 var useScrollableMixin = createUseFunction(ScrollableMixin);
 function useMixin(ctor) {
-  return (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(function () {
+  var mixin = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(function () {
     return new ctor();
   })[0].reset();
+  (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(function () {
+    return mixin.dispose.bind(mixin);
+  }, []);
+  return mixin;
 }
 function useMixinRef(mixin) {
   return mixin && mixin.getMixin().reset();